added some features

README.md

@@ -4,10 +4,9 @@ Search Firefox tabs and get a list or automatic direct to the searched tab.
 # Download
 https://addons.mozilla.org/en-US/firefox/addon/tab-search-and-manage/
 
-# Version: 1.3.7
+# Version: 1.3.8
-* Fixed scroll to top
+* Added tab mute option
-* Fixed scroll to bottom
+* Added to new window option
-* Improved scroll to current tab time.
 
 
 ***Note:

src/css/tabsSearch.css

@@ -25,7 +25,7 @@ html, body { overflow-x: hidden; }
 #tabControls {
     position: fixed;
     z-index: 555;
-    height: 128px;
+    height: 152px;
     padding: 0em 0.4em 0.4em 0.4em;
     background-color: rgba(9,107,120, 0.85);
     color: rgb(255,255,255);
@@ -120,7 +120,7 @@ html, body { overflow-x: hidden; }
 	scrollbar-width: thin;
 }
 
-.closeImg, .hiderImg {
+.closeImg, .hiderImg, .popoutImg, .muterImg {
     padding: 0.2em;
     width: 28px;
     height: 28px;
@@ -140,5 +140,5 @@ html, body { overflow-x: hidden; }
 .closeImg { float: right; }
 .block-focused { background-color: rgba(53, 103, 14, 0.8); }
 .closeImg:hover { background-color: rgba(196, 11, 11, 1); }
-.hiderImg:hover { background-color: rgba(30, 129, 22, 1); }
+.hiderImg:hover, .popoutImg:hover, .muterImg:hover { background-color: rgba(30, 129, 22, 1); }
 .hiddenBGColor { background-color: rgba(152, 152, 152, 0.8); }

src/manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "Tab Search and Manage",
-    "version": "1.3.7",
+    "version": "1.3.8",
     "description": "This plugin can search, drag-n-drop ordering, and (un)hide all or some tabs.",
 
   "applications": {

src/pages/tabsSearch.html

@@ -26,8 +26,10 @@
     </div>
 
     <div id="tabControls" style="display: none;">
-        <img id="closeBttn" class="closeImg" src="../icons/x.png" />
+        <img id="closeBttn" class="closeImg" title="Close Tab" src="../icons/x.png" />
-        <img id="hideTgglBttn" class="hiderImg" src="../icons/eyeOpen.png" />
+        <img id="hideTgglBttn" class="hiderImg" title="Show/Hide Tab" src="../icons/eyeOpen.png" />
+        <img id="muteTgglBttn" class="muterImg" title="(Un)Mute Tab" src="../icons/isNotMuted.png" />
+        <img id="popoutBttn" class="popoutImg" title="Popout Tab" src="../icons/popout-arrow.png" />
     </div>
 
     <template id="tabContainerTemplate">

src/scripts/eventListeners.js

@@ -18,6 +18,18 @@ document.addEventListener("click", (e) => {
         if (hoverTarget) {
             closeBttnAction(hoverTarget, hoverTarget.id);
         }
+    } else if (targetID == "hideTgglBttn") {
+        if (hoverTarget) {
+            hideSelectedTabAction(hoverTarget, hoverTarget.id);
+        }
+    } else if (targetID == "popoutBttn") {
+        if (hoverTarget) {
+            popoutSelectedTabAction(hoverTarget, hoverTarget.id);
+        }
+    } else if (targetID == "muteTgglBttn") {
+        if (hoverTarget) {
+            muteSelectedTabAction(hoverTarget, hoverTarget.id);
+        }
     } else if (targetID == "iconElm") {
         setNewTabAction(target, targetID, parentElm, id);
     } else if (targetID == "goTop") {
@@ -32,10 +44,6 @@ document.addEventListener("click", (e) => {
         createTab();
     } else if (targetID == "newWin") {
         createWin();
-    } else if (targetID == "hideTgglBttn") {
-        if (hoverTarget) {
-            hideSelectedTabAction(hoverTarget, hoverTarget.id);
-        }
     } else if (targetID == "hideAllBttn") {
         showHideTabsAction(0)
     } else if (targetID == "showAllBttn") {
@@ -46,7 +54,7 @@ document.addEventListener("click", (e) => {
 });
 
 function closeBttnAction(target, targetID) {
-    parentElm = target.parentElement;
+    let parentElm = target.parentElement;
 
     if (target == oldElm) {
         var index = Array.from(parentElm.children).indexOf(target);
@@ -75,6 +83,12 @@ function setNewTabAction(target, targetID, parentElm, id) {
     document.getElementById("tabControls").querySelector("#hideTgglBttn").src = "../icons/eyeOpen.png";
 }
 
+function popoutSelectedTabAction(target, targetID) {
+    parentElm = target.parentElement;
+    id        = parseInt(target.getAttribute("tabID"));
+    popoutSelectedTab(id);
+}
+
 function hideSelectedTabAction(target, targetID) {
     parentElm = target.parentElement;
     id        = parseInt(target.getAttribute("tabID"));
@@ -84,6 +98,7 @@ function hideSelectedTabAction(target, targetID) {
         if (control.src.includes("eyeClosed.png")) {
             target.setAttribute("class", "block");
             control.src  = "../icons/eyeOpen.png";
+            // In generateview
             unhideSelectedTab(id);
         } else {
             target.setAttribute("class", "block hiddenBGColor");
@@ -93,6 +108,22 @@ function hideSelectedTabAction(target, targetID) {
     }
 }
 
+function muteSelectedTabAction(target, targetID) {
+    parentElm = target.parentElement;
+    id        = parseInt(target.getAttribute("tabID"));
+    control   = document.getElementById("tabControls").querySelector("#muteTgglBttn");
+
+    if (control.src.includes("isMuted.png")) {
+        control.src  = "../icons/isNotMuted.png";
+        // In generateview
+        unmuteSelectedTab(id);
+    } else {
+        control.src  = "../icons/isMuted.png";
+        muteSelectedTab(id);
+    }
+}
+
+
 function setSearchModeAction(target, targetID, parentElm, id) {
     var currentMode = target.getAttribute("searchwindowsmode");
     if (currentMode == "true") {

src/scripts/generateView.js

@@ -13,6 +13,39 @@ let newWinId        = undefined;
 let focusedWinID    = undefined;
 let windowIndex     = 0;
 
+
+
+
+function popoutSelectedTab(id) {
+    const randomWinId = Math.floor(Math.random() * 99999);
+    windowsAction.create({tabId: id});
+}
+
+function unhideSelectedTab(id) {
+    tabsAction.show(id).then(successMsg, errMsg);
+}
+
+function hideSelectedTab(id)   {
+    tabsAction.hide(id).then(successMsg, errMsg);
+}
+
+function muteSelectedTab(id) {
+    tabsAction.update(
+        id,
+        {muted: true}
+    )
+}
+
+function unmuteSelectedTab(id)   {
+    tabsAction.update(
+        id,
+        {muted: false}
+    )
+}
+
+
+
+
 function logTabs(tabs) {
     windowIndex = 0;
 
@@ -79,6 +112,7 @@ function createContainer(tab) {
     else
         spanTag.className = "block hiddenBGColor";
 
+
     spanTag.style.backgroundImage    = "url(" + tab.favIconUrl + ")";
     icoImgTag.src         = tab.favIconUrl;
     icoImgTag.onerror     = function() { spanTag.style.backgroundImage = "url(" + tabImg + ")"; }
@@ -102,9 +136,11 @@ function createWin() {
   windowsAction.create({});
 }
 
-function moveTabControlTo(elm) {
+async function moveTabControlTo(elm) {
     let tabControls        = document.getElementById("tabControls");
     let hideTgglBttn       = tabControls.querySelector("#hideTgglBttn")
+    let muteTgglBttn       = tabControls.querySelector("#muteTgglBttn")
+
     let rect               = elm.getBoundingClientRect();
     tabControls.style.left = (rect.left - 46) + "px";
     tabControls.style.top  = rect.top + "px";
@@ -115,6 +151,14 @@ function moveTabControlTo(elm) {
     else
         hideTgglBttn.src = "../icons/eyeOpen.png";
 
+
+    id  = parseInt(hoverTarget.getAttribute("tabID"));
+    tab = await tabsAction.get(id);
+    if (tab.mutedInfo.muted == false)
+        muteTgglBttn.src  = "../icons/isNotMuted.png";
+    else
+        muteTgglBttn.src  = "../icons/isMuted.png";
+
     tabControls.style.display = "";
 }
 

src/scripts/showHideLogic.js

@@ -1,12 +1,3 @@
-// tabsAction.discard(id);
-function unhideSelectedTab(id) {
-    tabsAction.show(id).then(successMsg, errMsg);
-}
-
-function hideSelectedTab(id)   {
-    tabsAction.hide(id).then(successMsg, errMsg);
-}
-
 function successMsg(ev) { console.log("Tab is hidden..." + ev); }
 
 function errMsg(ev) {