v2.5.4

Author: GuiMar10

src/components/sidebar/sidebar.html

@@ -35,8 +35,13 @@
         </div>
       </div>
       <div id="sidebar-content">
-        <hr />
-        <button id="new-tab-button">+ New Tab <span>Ctrl+T</span></button>
+        <div id="separator">
+          <hr />
+          <span id="clearbtn"><i class="fa-solid fa-arrow-down"></i>Clear</span>
+        </div>
+        <button id="new-tab-button">
+          <i class="fa-regular fa-plus"></i> New Tab <span>Ctrl+T</span>
+        </button>
         <ul id="tab-list"></ul>
       </div>
     </div>

src/components/sidebar/sidebar.js

@@ -52,17 +52,72 @@ browser.storage.local.get('favorites', function (result) {
 });
 
 // Update sidebar when a tab changes
-browser.tabs.onUpdated.addListener((changeInfo) => {
-  if (changeInfo.status === "complete") {
-    initTabSidebarControl();
-  }
+browser.tabs.onUpdated.addListener(() => {
+  initTabSidebarControl();
+});
+
+// Update sidebar when tabs are created, activated, closed
+browser.tabs.onCreated.addListener(() => {
+  initTabSidebarControl();
 });
 
-// Update sidebar when a tab is created
-browser.tabs.onCreated.addListener(function () {
+browser.tabs.onActivated.addListener(() => {
   initTabSidebarControl();
 });
 
+browser.tabs.onRemoved.addListener((tabId) => {
+  const index = base.findIndex((tab) => tab.id === tabId);
+  if (index !== -1) {
+    base.splice(index, 1);
+  }
+  initTabSidebarControl();
+})
+
+// Sidebar clear button
+function clearTabs(tabs) {
+  let newTabs = tabs
+  tabs.forEach((tab) => {
+    if (!tab.active && !tab.audible && !openedFavorites.includes(tab.id)) {
+      browser.tabs.remove(tab.id)
+      newTabs = tabs.filter((tab) => {
+        if (false) return
+      })
+    }
+  })
+  if (newTabs.length == tabs.length) {
+    tabs.forEach((tab) => {
+      if (!tab.active && !openedFavorites.includes(tab.id)) {
+        browser.tabs.remove(tab.id)
+        newTabs = tabs.filter((tab) => {
+          if (false) return
+        })
+      }
+    })
+  }
+  if (newTabs.length == tabs.length) {
+    tabs.forEach((tab) => {
+      if (!openedFavorites.includes(tab.id)) {
+        browser.tabs.remove(tab.id)
+        newTabs = tabs.filter((tab) => {
+          if (false) return
+        })
+      }
+    })
+  }
+}
+
+function canClearTabs(tabs) {
+  let newTabs = tabs.filter((tab) => {
+    return !openedFavorites.includes(tab.id);
+  });
+  return (newTabs.length > 0)
+}
+document.querySelector('#separator span').addEventListener('click', () => {
+  browser.tabs.query({ currentWindow: true }).then((tabs) => {
+    clearTabs(tabs)
+  })
+})
+
 // Browser-control
 function handleBrowserControl(id) {
   browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
@@ -205,73 +260,76 @@ document.querySelector('button#b2').addEventListener("click", function () {
 
 function newTab() {
   browser.tabs.create({});
-  document.querySelectorAll('[aria-label="favopen"]')?.forEach((elemento) => {
-    elemento.ariaLabel = "";
-  })
 }
 
 // Sidebar Code
 let base, draggedOver, dragging, activeTabId;
 
 const init = (array) => {
-  base = array.map((tab) => ({
-    id: tab.id,
-    title: tab.title,
-    favIconUrl: tab.favIconUrl,
-  }));
+  base = array;
   renderItems(base);
 };
 
 const renderItems = (data) => {
   tabList.innerHTML = '';
   data.forEach((tab) => {
-    const node = document.createElement('li');
-    node.draggable = true;
-    node.dataset.tabId = tab.id;
-
-    const titleNode = document.createElement('div');
-    titleNode.classList.add('tab-title');
-    titleNode.textContent = tab.title;
-
-    let iconNode;
-    if (tab.favIconUrl) {
-      iconNode = document.createElement('img');
-      iconNode.src = tab.favIconUrl;
-      iconNode.alt = tab.title;
-    } else {
-      iconNode = document.createElement('i');
-      iconNode.classList.add('fa', 'fa-solid', 'fa-globe');
-      iconNode.setAttribute('aria-hidden', 'true');
-    }
+    if (!openedFavorites.includes(tab.id)) {
+      const node = document.createElement('li');
+      node.draggable = true;
+      node.dataset.tabId = tab.id;
+
+      const titleNode = document.createElement('div');
+      titleNode.classList.add('tab-title');
+      titleNode.textContent = tab.title;
+
+      let iconNode;
+      if (tab.favIconUrl) {
+        iconNode = document.createElement('img');
+        iconNode.src = tab.favIconUrl;
+        iconNode.alt = tab.title;
+      } else {
+        iconNode = document.createElement('i');
+        iconNode.classList.add('fa', 'fa-solid', 'fa-globe');
+        iconNode.setAttribute('aria-hidden', 'true');
+      }
+
+      const closeButton = document.createElement('button');
+      closeButton.classList.add('close');
+      closeButton.innerHTML = '×';
+      closeButton.addEventListener('click', closeTab);
+
+      node.appendChild(iconNode);
 
-    const closeButton = document.createElement('button');
-    closeButton.classList.add('close');
-    closeButton.title = 'Close Tab';
-    closeButton.innerHTML = '×';
-    closeButton.addEventListener('click', closeTab);
-
-    node.appendChild(iconNode);
-    node.appendChild(titleNode);
-    node.appendChild(closeButton);
-
-    node.addEventListener('drag', setDragging);
-    node.addEventListener('dragover', setDraggedOver);
-    node.addEventListener('drop', compare);
-    node.addEventListener('click', navigateToTab);
-    node.addEventListener('auxclick', (event) => {
-      if (event.button === 1) {
-        closeTab(event);
+      if (tab.audible) {
+        const soundIcon = document.createElement('i');
+        soundIcon.classList.add('fa', 'fa-light', 'fa-volume-high');
+        soundIcon.setAttribute('aria-hidden', 'true');
+        node.appendChild(soundIcon)
       }
-    });
 
-    if (tab.id === activeTabId) {
-      node.classList.add('active');
-    }
+      node.appendChild(titleNode);
+      node.appendChild(closeButton);
 
-    if (!openedFavorites.includes(tab.id)) {
+      node.addEventListener('drag', setDragging);
+      node.addEventListener('dragover', setDraggedOver);
+      node.addEventListener('drop', compare);
+      node.addEventListener('click', navigateToTab);
+      node.addEventListener('auxclick', (event) => {
+        if (event.button === 1) {
+          closeTab(event);
+        }
+      });
       tabList.appendChild(node);
     }
+
+    document.querySelector('.active')?.classList.remove('active');
+    document.querySelector(`[data-tab-id="${activeTabId}"]`)?.classList.add('active');
   });
+  if (canClearTabs(data)) {
+    document.querySelector('#separator span').style.display = 'block'
+  } else {
+    document.querySelector('#separator span').style.display = 'none'
+  }
 };
 
 const compare = () => {
@@ -306,26 +364,12 @@ const closeTab = (e, middleclick = false) => {
   browser.tabs.remove(tabId);
 };
 
-browser.tabs.onRemoved.addListener((tabId) => {
-  const index = base.findIndex((tab) => tab.id === tabId);
-  if (index !== -1) {
-    base.splice(index, 1);
-    renderItems(base);
-  }
-  initTabSidebarControl();
-  updateSearchBar();
-})
-
 const navigateToTab = (e) => {
   const tabId = parseInt(e.currentTarget.dataset.tabId);
   browser.tabs.update(tabId, { active: true, highlighted: false });
   updateSearchBar();
 
-  tabList.querySelector('.active')?.classList.remove('active');
-  document.querySelector('[aria-label="favopen"]')?.setAttribute('aria-label', '');
-
   activeTabId = tabId;
-  tabList.querySelector(`[data-tab-id="${activeTabId}"]`)?.classList.add('active');
 
   e.currentTarget.classList.add('current-tab');
 };
@@ -359,10 +403,10 @@ function favoriteDrop() {
         if (!tabtoPin.url.startsWith('about:')) {
           favoritesg[i] = { url: tabtoPin.url, favicon: tabtoPin.favIconUrl, id: i }
           openedFavorites[i] = tabtoPin.id
-          renderItems(base);
           browser.storage.local.set({
             favorites: favoritesg
           });
+          initTabSidebarControl();
         }
       })
     }
@@ -374,51 +418,44 @@ favoriteDiv.addEventListener('dragover', favoriteDragOver);
 favoriteDiv.addEventListener('drop', favoriteDrop);
 
 function loadFavorites() {
+  favoriteDiv.innerHTML = "";
   // Render
   favorites.forEach(async (favorite) => {
     if (favorite !== undefined) {
       const element = document.createElement('button')
-      element.className = "favorite"
-      element.dataset.url = favorite.url;
       if (openedFavorites[favorite.id] && (await browser.tabs.get(openedFavorites[favorite.id]))?.active) {
-        element.ariaLabel = 'favopen';
+        element.dataset.tabId = openedFavorites[favorite.id];
+        element.classList.add('active')
       }
       element.onclick = async () => {
         if (!openedFavorites[favorite.id]) {
-          const tabCreated = await browser.tabs.create({ url: element.dataset.url });
+          const tabCreated = await browser.tabs.create({ url: favorite.url });
           openedFavorites[favorite.id] = tabCreated.id;
         } else {
-          tabList.querySelector('.active')?.classList.remove('active');
           browser.tabs.update(openedFavorites[favorite.id], { active: true });
         }
-        document.querySelectorAll('[aria-label="favopen"]')?.forEach((elemento) => {
-          elemento.ariaLabel = "";
-        })
-        element.ariaLabel = "favopen";
-        updateSearchBar();
+        element.dataset.tabId = openedFavorites[favorite.id];
+        element.classList.add('active')
       }
-      element.onauxclick = async (event) => {
+      element.onauxclick = (event) => {
         if (event.button == 1 && openedFavorites[favorite.id]) {
           // Unload favorite
           browser.tabs.remove(openedFavorites[favorite.id])
           openedFavorites[favorite.id] = undefined
           element.ariaLabel = ""
         } else if (event.button == 2) {
           // Remove favorite
-          initTabSidebarControl();
-          if (openedFavorites[favorite.id]) {
-            delete openedFavorites[favorite.id];
-          }
+          delete openedFavorites[favorite.id];
           browser.storage.local.get('favorites', function (result) {
             var favoritesg = result.favorites;
             delete favoritesg[favorite.id]
-            favoriteDiv.innerHTML = "";
             favorites = favoritesg
             loadFavorites();
             browser.storage.local.set({
               favorites: favoritesg
             });
           })
+          initTabSidebarControl();
         }
       }
 
@@ -429,8 +466,8 @@ function loadFavorites() {
 
       favoriteDiv.appendChild(element);
     }
-    updateSearchBar();
   });
+  updateSearchBar();
 }
 
 // Look for updates
@@ -440,7 +477,6 @@ browser.storage.onChanged.addListener(() => {
     if (JSON.stringify(favoritesg) !== JSON.stringify(favorites)) {
       favoritesg.forEach(fav => {
         if (fav?.url !== favorites[fav.id]?.url) {
-          favoriteDiv.innerHTML = "";
           favorites = favoritesg
           loadFavorites();
         }
@@ -460,16 +496,7 @@ function initTabSidebarControl() {
     init(tabs);
     activeTabId = tabs.find((tab) => tab.active).id;
     renderItems(base);
-  });
-
-  browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
-    const index = base.findIndex((t) => t.id === tabId);
-    if (index !== -1) {
-      base[index].title = tab.title;
-      base[index].favIconUrl = tab.favIconUrl;
-      renderItems(base);
-      updateSearchBar();
-    }
+    updateSearchBar();
   });
 }