Merge pull request #11 from JessFairbairn:context

Context

.github/workflows/deploy.yml

@@ -0,0 +1,46 @@
+name: Deploy
+
+on: 
+    release:
+        types: [prereleased]
+
+jobs:
+    Deploy:
+        runs-on: ubuntu-latest
+        steps:
+        - uses: actions/checkout@v2 #Checkout Repo
+        - name: Install
+          run: |
+            npm install
+            mkdir external
+            cp node_modules/webextension-polyfill/dist/browser-polyfill.min.js external/browser-polyfill.min.js
+        - name: Web-ext build
+          id: web-ext-build
+          uses: kewisch/action-web-ext@v1
+          with:
+            cmd: build
+
+        - name: Web-ext sign
+          id: web-ext-sign
+          uses: kewisch/action-web-ext@v1
+          with:
+            cmd: sign
+            channel: listed
+            source: ${{ steps.web-ext-build.outputs.target }}
+            sourceCode: sources.zip
+
+            # Specify API secrets.
+            apiKey: ${{ secrets.JWT_ISSUER }}
+            apiSecret: ${{ secrets.JWT_SECRET }}
+
+            # Send it to dev server, for now
+            apiUrlPrefix: "https://addons-dev.allizom.org/api/v5/"
+
+            releaseNotes: ${{github.event.release.body}}
+
+        - name: "Attach release assets to release"
+          env:
+              GH_TOKEN: ${{ github.token }}
+          run: |
+              gh release upload ${{ github.event.release.tag_name }} \
+              ${{ steps.web-ext-sign.outputs.target }}

.github/workflows/main.yml

@@ -1,12 +1,7 @@
-name: Karma Tests
+name: Tests
 
 # Run on Pull Request to $branch only
-on:
-  pull_request:
-    branches: [ $branch ]
-  push:
-    branches:
-      master
+on: [push]
 
 # Job Setup
 jobs:
@@ -16,8 +11,24 @@ jobs:
     - uses: actions/checkout@v2 #Checkout Repo
     - uses: actions/setup-node@v1 #Setup Node
       with:
-        node-version: '12'
+        node-version: '22'
     - name: Run Karma Tests
       run: |
         npm install
-        npm run test  
+        npm run test
+      timeout-minutes: 5
+  web-ext:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2 #Checkout Repo
+    - name: Install
+      run: |
+        npm install
+        mkdir external
+        cp node_modules/webextension-polyfill/dist/browser-polyfill.min.js external/browser-polyfill.min.js
+    - name: Web-ext lint
+      uses: kewisch/action-web-ext@v1
+      with:
+        cmd: lint
+        channel: listed
+

.gitignore

@@ -4,3 +4,4 @@ node_modules
 
 external
 vscode-firefox-debug.log
+coverage

build.cmd

@@ -1,3 +1,4 @@
+call npm install --save=false
 mkdir external
-copy node_modules/webextension-polyfill/dist/browser-polyfill.min.js external/browser-polyfill.min.js
+copy node_modules\webextension-polyfill\dist\browser-polyfill.min.js external\browser-polyfill.min.js
 web-ext build --overwrite-dest

build.sh

@@ -1,4 +1,5 @@
 #!/bin/bash
+npm install
 mkdir external
 cp node_modules/webextension-polyfill/dist/browser-polyfill.min.js external/browser-polyfill.min.js
 web-ext build --overwrite-dest

manifest.json

@@ -2,7 +2,7 @@
 
   "manifest_version": 2,
   "name": "Tab Kraken",
-  "version": "0.2.5",
+  "version": "0.2.6",
 
   "description": "Helps sort your tabs",
 

package.json

@@ -1,4 +1,5 @@
 {
+  "name": "tab_kraken",
   "scripts": {
     "test": "karma start karma.config.js"
   },

page/TabItems.js

@@ -36,9 +36,17 @@ export class TabItemList extends HTMLElement {
             this.tabMap[tab.id] = tabItem;
         }
 
-        this.shadowRoot.querySelector("#closeAllButton").onclick = closeFunction;
+        this.shadowRoot.querySelector("#closeAllButton").onclick = _event => {
+            closeFunction(false);
+        };
+        this.shadowRoot.querySelector("#close-all-including-hidden-button").onclick = _event => {
+            shadowRoot.getElementById("context-button").focus();
+            closeFunction(true);
+        };
         this.shadowRoot.querySelector("#collapseButton").onclick = this.toggleCollapse;
 
+        this.shadowRoot.getElementById("context-button").onclick = this.openContext;
+
         this.collapseList = collapseList;
         if (this.collapseList) {
             shadowRoot.getElementById("tab-list").classList.add("collapsed");
@@ -80,6 +88,14 @@ export class TabItemList extends HTMLElement {
 
 
     }
+
+    openContext(event) {
+        // event.preventDefault();
+        let shadowRoot = this.getRootNode();
+        shadowRoot.querySelector("menu").classList.add("visible");
+        shadowRoot.querySelector("menu li:first-child button").focus();
+        shadowRoot.querySelector("menu").classList.remove("visible");
+    }
 }
 
 export class TabItem extends HTMLLIElement {

page/script.js

@@ -16,8 +16,12 @@ browser.tabs.query({}).then(async tabList => {
 let tabLists = [];
 
 browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+    if (changeInfo.url?.startsWith(`moz-extension://${TAB_KRAKEN_UUID}`)) {
+        return;
+    }
     let changedProperties = Object.getOwnPropertyNames(changeInfo);
-    if (changedProperties.length === 1 && changedProperties[0] === "title"){
+    if (changedProperties.length === 1 && changedProperties[0] === "title") 
+        {
         return;
     }
     reloadAll();
@@ -43,7 +47,7 @@ async function loadDuplicateTabList(fullTabList) {
 
         let tabListElement = new TabItemList(
             tabs, 
-            async () => await closeAllTabsWithUrl(key), 
+            async (includeHidden = false) => await closeAllTabsWithUrl(key, includeHidden), 
             false
         );
         tabListElement.innerText = key;
@@ -69,7 +73,7 @@ function loadDomainList(tabList) {
 
         let tabListElement = new TabItemList(
             domainTabList, 
-            () => closeAllTabsInDomain(domain), 
+            (includeHidden=false) => closeAllTabsInDomain(domain, includeHidden), 
             true,
             true
         );
@@ -141,17 +145,25 @@ function countSiteNumbersInTabList(urlList) {
     return siteCounts;
 }
 
-async function closeAllTabsInDomain(domain) {
+async function closeAllTabsInDomain(domain, includeHidden=false) {
 
-    let tabs = await browser.tabs.query({url: `*://${domain}/*`, pinned: false, hidden: false});
+    const queryParams = { url: `*://${domain}/*`, pinned: false };
+    if (!includeHidden) {
+        queryParams["hidden"] = false;
+    }
+    let tabs = await browser.tabs.query(queryParams);
     let tabIds = tabs.map(tab => tab.id);
     await browser.tabs.remove(tabIds);
     await reloadAll();
 }
 
-async function closeAllTabsWithUrl(url) {
+async function closeAllTabsWithUrl(url, includeHidden=false) {
 
-    let tabs = await browser.tabs.query({url: url, pinned: false, hidden: false});
+    const queryParams = { url: url, pinned: false };
+    if (!includeHidden) {
+        queryParams["hidden"] = false;
+    }
+    let tabs = await browser.tabs.query(queryParams);
     let tabIds = tabs.map(tab => tab.id);
     await browser.tabs.remove(tabIds);
 }

page/style.css

@@ -1,13 +1,12 @@
 @import url('dark-colours.css') (prefers-color-scheme: dark);
 @import url('light-colours.css') (prefers-color-scheme: light);
 
-* {
-    font-family: "Fira Sans", Helvetica, sans-serif;
+*, button {
+    font-family: "Fira Sans", Helvetica, sans-serif!important;
 }
-
+ 
 
 .cool-list {
-
     padding: 0.5em;
 }
 
@@ -18,18 +17,18 @@
 }
 
 
-/* .cool-list li:nth-child(odd) {
+.cool-list li:nth-child(odd) {
     background-color: var(--group-background-colour);
-} */
+}
 
 .cool-list > li, .cool-list > .tab-item {
-    /* background-color: var(--alternate-row-colour); */
+    background-color: var(--alternate-row-colour);
     background-color: var(--group-background-colour);
 }
 
 .cool-list ul > li {
     background-color: var(--alternate-row-colour);
-}
+} */
 
 
 .cool-list, ul.cool-list{

page/templates.html

@@ -47,9 +47,30 @@
             padding-right: 0.5em;
         }
 
-        .flex-bar button {
+        .flex-bar > button, .flex-bar > a {
+            display: inline-flex;
+            align-items: center;
             flex-direction: row;
             border: 0;
+            background-color: lightgrey;
+            text-decoration: none;
+            color: black;
+            padding: 1px 4px 1px 4px;
+
+            /* display:block;
+            line-height: 200%; */
+        }
+
+        #context-button {
+            position: relative;
+        }
+
+        #context-button > span {
+            line-height: 0;
+        }
+
+        #closeAllButton > span {
+            line-height: 1ex;
         }
 
         #tab-list li {
@@ -67,13 +88,47 @@
         #tab-list.collapsed {
             display: none;
         }
-
-        #collapseButton {
+        #context-button {
             margin-left: auto;
+        }
+        #collapseButton {
+            margin-left: 1em;
             margin-right: 1em;
             padding-top: 2px; /*not super important but makes the chevron not too high*/
         }
 
+        #menuWrapper {
+            position: relative;
+        }
+
+        menu {
+            display: none;
+            background-color: grey;
+            padding: 1px;
+            z-index: 1;
+            top: 3px;
+        }
+
+        menu > li {
+            padding: 0;
+            margin-bottom: 2px;
+            list-style: none;
+        }
+
+        menu > li:last-child {
+            margin-bottom: initial;
+        }
+        menu button {
+            border: 0;
+            padding: 0.5em;
+            min-width: 10em;
+        }
+
+        #context-button:active~menu, menu:focus-within, menu.visible {
+            display: block;
+            position: absolute;
+        }
+
         .clickable {
             cursor: pointer;
         }
@@ -88,14 +143,25 @@
         }
     </style>
     <div class="flex-bar"><slot></slot>: <slot name="number"></slot>
+        <button id="context-button" href="#" aria-controls="contextMenu" title="Show more options">
+            <span aria-hidden="true">⋯</span>
+        </button>
+        <div id="menuWrapper">
+            <menu id="contextMenu" role="menu">
+                <li><button id="close-all-including-hidden-button" role="menuitem">
+                    Close all including hidden
+                </button></li>
+            </menu>
+        </div>
         <button
         id="collapseButton"
         title="Toggle list of tabs in category"
         aria-controls="tab-list">
             <img src="../icons/chevron-up.svg" aria-hidden="true"/>
         </button>
         <button id="closeAllButton" title="Close all tabs in category">
-            <span aria-hidden="true">✖</span></button>
+            <span aria-hidden="true">✖</span>
+        </button>
     </div>
     <ul id="tab-list"></ul>
 </template>

web-ext-config.js

@@ -6,6 +6,7 @@ module.exports = {
         "tests",
         "karma.config.js",
         "web-ext-config.js",
-        "package.json"
+        "package.json",
+        "package-lock.json",
     ]
   };