fix: tab index issue, add batch permission request

Author: programmerg

docs/index.html

@@ -36,6 +36,9 @@ <h1 class="display-4 fw-bold lh-1 text-body-secondary">
           <a href="https://chromewebstore.google.com/detail/quick-access/pomnndfpgmpdpcjinlcihleaehhblchc" class="btn btn-primary btn-lg px-4 me-md-2 fw-bold">
             Add to <span id="browser">Chrome</span>
           </a>
+          <a href="https://github.com/programmerg/quick-access/" class="btn btn-light btn-lg px-4 me-md-2 fw-bold">
+            Get involved
+          </a>
         </div>
       </div>
       <div class="col-lg-4 offset-lg-1 p-0 overflow-hidden shadow-lg">
@@ -273,7 +276,7 @@ <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold"></h3>
   <div class="container">
     <p class="pb-5">Thanks for trying it! ;)</p>
     <p class="pb-1">This is a hobby project for myself, but let's see if it can conquer the world!</p>
-    <p class="pb-5">Bug reports, improvement ideas, and pull requests are welcome!</p>
+    <p class="pb-5"><a href="https://github.com/programmerg/quick-access/issues">Bug reports</a>, <a href="https://github.com/programmerg/quick-access/discussions">improvement ideas</a>, and <a href="https://github.com/programmerg/quick-access/pulls">pull requests</a> are welcome!</p>
   </div>
 
   <footer class="container">
@@ -317,8 +320,14 @@ <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold"></h3>
     }
 
     function initDonwloadButton() {
-      const downloadBtn = document.getElementById('browser')
-      if (downloadBtn) downloadBtn.innerText = getBrowser();
+      const downloadBtn = document.getElementById('browser');
+      const isFirefox = navigator.userAgent.indexOf("Firefox") != -1;
+      if (downloadBtn) {
+        downloadBtn.innerText = getBrowser();
+        downloadBtn.parentElement.href = isFirefox 
+          ? 'https://addons.mozilla.org/hu/firefox/addon/quick-access/' 
+          : 'https://chromewebstore.google.com/detail/quick-access/pomnndfpgmpdpcjinlcihleaehhblchc';
+      }
     }
 
     function initModal() {

index.css

@@ -1134,3 +1134,31 @@ fieldset {
 #welcomeModal .permissions label {
     margin: 0.5em 0;
 }
+
+#about .form-group {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+#about h1 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+}
+
+.about-buttons {
+    display: grid;
+    gap: 15px;
+    grid-template-columns: repeat(2, 1fr);
+}
+
+.about-buttons a {
+    display: block;
+    padding: 0.5rem 1rem;
+    border-radius: var(--border-radius-lg);
+    background-color: var(--color-overlay);
+    color: var(--color-text);
+    text-align: center;
+    text-decoration: none;
+}

index.html

@@ -113,6 +113,11 @@ <h2 class="modal-title">
                 <p data-i18n="welcome_permissions2"></p>
                 <p data-i18n="welcome_footnote"></p>
             </div>
+
+            <div class="modal-footer">
+                <!-- button type="reset" class="btn-secondary" data-i18n="cancel"></button -->
+                <button type="submit" class="btn-primary" style="width:100%" data-i18n="save"></button>
+            </div>
         </form>
     </dialog>
 

index.js

@@ -64,13 +64,28 @@ export class UI {
 
     // MARK: Permissions
     registerPermissionEventListeners() {
-        ['topSites', 'history', 'bookmarks', 'tabGroups', 'readingList'].forEach(view => {
-            const inputs = document.querySelectorAll(`input[name="${view}Permission"]`);
-            Array.from(inputs).forEach(input => input.addEventListener('change', (e) => {
-                const items = (view === 'tabGroups') ? ['tabGroups', 'tabs'] : [view];
-                if (e.target.checked)   Permission.request(items).catch(e => this.addToast(e));
-                else                    Permission.remove(items).catch(e => this.addToast(e));
-            }));
+        ['welcomeModal', 'settingsModal'].forEach(id => {
+            const modal = document.getElementById(id);
+            const form = modal.querySelector('form');
+            modal.querySelector('button[type="submit"]').addEventListener('click', (e) => {
+                const removedItems = [], requestedItems = [];
+                ['topSites', 'history', 'bookmarks', 'tabGroups', 'readingList'].forEach(view => {
+                    const items = (view === 'tabGroups') ? ['tabGroups', 'tabs'] : [view];
+                    if (form[view + 'Permission'].checked)  requestedItems.push(...items);
+                    else                                    removedItems.push(...items);
+                });
+
+                if (removedItems.length > 0) {
+                    Permission.remove(removedItems)
+                        .catch(e => this.addToast(e));
+                }
+                if (requestedItems.length > 0) {
+                    Permission.request(requestedItems)
+                        .then(granted => { if (!granted) this.handlePermissionChange(); })
+                        .catch(e => this.addToast(e));
+                }
+                if (id === 'welcomeModal') modal.close();
+            });
         });
 
         browser.permissions?.onAdded.addListener(({permissions}) => this.handlePermissionChange());
@@ -87,6 +102,8 @@ export class UI {
             const btn = document.querySelector(`[data-view="${view}"]`);
             btn.classList.toggle('hidden', !permissions.includes(view));
         });
+
+        if (this.currentView !== '' && !permissions.includes(this.currentView)) this.switchView('');
     }
 
     // MARK: Translation
@@ -428,10 +445,11 @@ export class UI {
                 const parentId = e.currentTarget.dataset.id;
                 if (tile.classList.contains('folder') && itemId !== parentId) {
                     if (!(item instanceof Tab && item.url === '')) {
-                        item.save({ parentId: parentId }).catch(e => this.addToast(e)); // move
+                        item.save({ parentId }).catch(e => this.addToast(e)); // move
                     }
                 } else if (sourceIdx !== targetIdx) {
-                    item.save({ index: targetIdx }).catch(e => this.addToast(e)); // reorder
+                    const index = items[targetIdx].index;
+                    if (index) item.save({ index }).catch(e => this.addToast(e)); // reorder
                 }
                 tile.classList.remove('dropping');
                 sourceElement.style.opacity = 1;
@@ -462,8 +480,7 @@ export class UI {
             }
             return;
         }
-        return this.loadContent();
-
+        /*
         const grid = document.getElementById('grid');
         const oldTile = grid.querySelector(`.tile[data-id="${id}"]`);
         const newTile = item ? this.createTile(item) : null;
@@ -498,6 +515,8 @@ export class UI {
         } else { // propably just moved to another folder, so we can remove the tile from here
             if (oldTile) oldTile.remove();
         }
+        */
+        return this.loadContent();
     }
 
     registerTileEventListeners() {
@@ -857,18 +876,21 @@ export class UI {
 
         const manifest = browser.runtime?.getManifest();
         modal.querySelector('#about').innerHTML = `
-            <div class="form-group" style="text-align: center">
-                <h2><span>${manifest.name}</span> - <span>${manifest.version}</span></h2>
+            <div class="form-group">
+                <h1><img src="./images/icon-24.png" alt="logo"> <span style="color: #5f6368;">${manifest.name}</span></h1>
+                <p>${browser.i18n?.getMessage('version')}: <span>${manifest.version}</span></p>
             </div>
-            <div class="form-group" style="text-align: center">
+            <div class="form-group">
                 <p><span>${manifest.description}</span></p>
             </div>
-            <div class="form-group" style="text-align: center">
+            <div class="form-group">
                 <p>${browser.i18n?.getMessage('developer')}: <span>${manifest.author}</span></p>
             </div>
-            <div class="form-group" style="text-align: center">
-                <p><a href="${manifest.homepage_url}" target="_blank">${browser.i18n?.getMessage('homepage')}</a></p>
-                <p><a href="https://chromewebstore.google.com/detail/quick-access/pomnndfpgmpdpcjinlcihleaehhblchc" target="_blank">Chrome Web Store</a></p>
+            <div class="form-group about-buttons">
+                <a href="${manifest.homepage_url}" target="_blank">${browser.i18n?.getMessage('homepage')}</a>
+                <a href="https://github.com/programmerg/quick-access/" target="_blank">GitHub</a>
+                <a href="https://chromewebstore.google.com/detail/quick-access/pomnndfpgmpdpcjinlcihleaehhblchc" target="_blank">Chrome Web Store</a>
+                <a href="https://addons.mozilla.org/hu/firefox/addon/quick-access/" target="_blank">Firefox Add-ons</a>
             </div>
         `;
     }

manifest.json

@@ -3,7 +3,7 @@
     "minimum_chrome_version": "121",
     "name": "__MSG_app_name__",
     "description": "__MSG_app_description__",
-    "version": "1.4.2",
+    "version": "1.4.3",
     "author": "Gelencsér Gergő",
     "homepage_url": "https://programmerg.github.io/quick-access/",
     "default_locale": "en",
@@ -31,7 +31,7 @@
     ],
     "browser_specific_settings": {
         "gecko": {
-            "id": "quick-access@programmerg.github.io"
+            "id": "@quick-access.programmerg.github.io"
         }
     },
     "background": {

readme.md

@@ -37,15 +37,15 @@ This is a hobby project for myself, but let's see if it can conquer the world!
 
 ## Installation
 
-Get it from the [Chrome Webstore](https://chromewebstore.google.com/detail/quick-access/pomnndfpgmpdpcjinlcihleaehhblchc)
+Get it from the [Chrome Web Store](https://chromewebstore.google.com/detail/quick-access/pomnndfpgmpdpcjinlcihleaehhblchc) / [Firefox Add-ons](https://addons.mozilla.org/hu/firefox/addon/quick-access/)
 
 -- OR -- 
 
-1. Download the <a href="https://github.com/programmerg/quick-access/archive/refs/tags/v1.4.1.zip">latest release</a>.
+1. Download the <a href="https://github.com/programmerg/quick-access/archive/refs/tags/v1.4.3.zip">latest release</a>.
 2. Open your browser and go to `chrome://extensions`.
 3. Enable "Developer mode".
 4. Click "Load unpacked" and select the project folder.
-5. Hooray, you now have your own Quick Access version!
+5. Hooray, you now have your own Quick Access!
 
 ## File Structure
 
@@ -60,7 +60,9 @@ Get it from the [Chrome Webstore](https://chromewebstore.google.com/detail/quick
 
 ## Contributing
 
-Bug reports, improvement ideas, and pull requests are welcome!
+[Bug reports](https://github.com/programmerg/quick-access/issues), 
+[improvement ideas](https://github.com/programmerg/quick-access/discussions), 
+and [pull requests](https://github.com/programmerg/quick-access/pulls) are welcome!
 
 ## License
 

src/Tab.js

@@ -59,8 +59,6 @@ export class Tab {
         const currentWindow = browser.windows?.WINDOW_ID_CURRENT;
         let results = [];
 
-        // console.log(await browser.tabs?.query({ windowId: currentWindow })); // TODO: index bug
-
         if (parentId === '') {
             const tabGroups = await browser.tabGroups?.query({ windowId: currentWindow });
             const tabs = await browser.tabs?.query({ windowId: currentWindow, groupId: -1 });