New version, added hideshow functionality, theme changed a bit.

README.md

@@ -5,11 +5,20 @@ Search Firefox tabs and get a list or automatic direct to the searched tab.
 https://addons.mozilla.org/en-US/firefox/addon/tab-search-smarter/
 
 # Version: 1.2.2
-Changed theme to differentiate from Tab Groups plugin.
+<ul>
+<li>Changed plugin name</li>
+<li>Added show/hide tabs functionality</li>
+<li>Changed some theming and css rules</li>
+</ul>
+
+***Note:
+To get tab hiding functionality, you must go to <b>about:config</b> and search for <b>extensions.webextensions.tabhide.enabled</b>. Set it to <b>true</b> by double clicking it. Then tabs can be shown or hidden via the eyes.
 
 
 # Images
 ![1 Default list style without interacting with tab. ](images/pic1.png)
-![2 Hovoring on tab. ](images/pic2.png)
+![2 Hovering on tab. ](images/pic2.png)
 ![3 List of tabs matching search. ](images/pic3.png)
-![4 Search failed response. ](images/pic4.png)
+![4 3 tabs hidden and three shown. ](images/pic4.png)
+![5 All tabs but current active hidden. ](images/pic5.png)
+![6 Search failed response. ](images/pic6.png)

src/css/tabsSearch.css

@@ -1,6 +1,4 @@
-html, body {
-    overflow-x: hidden;
-}
+html, body { overflow-x: hidden; }
 
 #masterContainer, div[id*="listZone"], .block {
    display: block;
@@ -23,17 +21,17 @@ html, body {
 #udArrows {
     position: fixed;
     bottom: 0;
-    margin-left: 36%;
+    margin-left: 28%;
 }
 
 #udArrows button {
-    font-size: 1.4em;
+    font-size: 2em;
     background-color: rgba(79, 186, 70, 1);
     color: rgba(255,255,255,1);
 }
 
 #udArrows button:hover {
-    background-color: rgba(255,255,255,1);
+    background-color: rgba(152, 152, 152, 1);
     color: rgba(0,0,0,1);
     cursor: pointer;
     border-style: none;
@@ -70,7 +68,10 @@ html, body {
 
 .block {
     display: block;
-    background-color: rgba(89, 89, 89, 0.8);
+    background-color: rgba(20, 107, 134, 0.87);
+    background-repeat: no-repeat;
+    background-size: 6em;
+    background-position: center;
     color: rgba(255,255,255,1);
     float: left;
     width: 125px;
@@ -81,28 +82,28 @@ html, body {
 }
 .block:hover {
     cursor: pointer;
-    background-color: rgba(152, 152, 152, 0.8);
+    background-color: rgba(110, 194, 45, 0.94);
     color: rgba(255, 255, 255, 0.84);
 }
 
-.block-focused {
-    background-color: rgba(53, 103, 14, 0.8);
+.closeImg, .hiderImg {
+    padding: 0.5em;
+    width: 28px;
+    height: 28px;
+    clear: both;
 }
 
-.thumbImg {
-    clear: left;
-    width: 64px;
-    height: 64px;
+.pTagTitleText {
+    background-color: rgba(63, 63, 63, 0.64);
+    line-height: 1.5em;
+    margin-top: 2em;
+    height: 3em;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
-.closeImg {
-    background-color: rgba(79, 186, 70, 1);
-    width: 16px;
-    height: 16px;
-    float: right;
-    padding: .5em;
-}
-
-.closeImg:hover {
-    background-color: rgba(255, 0, 0, 1);
-}
+.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); }
+.hiddenBGColor { background-color: rgba(152, 152, 152, 0.8); }

src/manifest.json

@@ -1,8 +1,8 @@
 {
     "manifest_version": 2,
-    "name": "Tab Search",
-    "version": "1.2.2",
-    "description": "Search Tabs and switch to them quickly.",
+    "name": "Tab Search and Manage",
+    "version": "1.2.5",
+    "description": "This plugin can search, drag-n-drop ordering, and (un)hide all or some tabs.",
 
   "applications": {
     "gecko": {
@@ -16,13 +16,14 @@
     "96": "icons/tabsSearch_96.png"
   },
 
-  "web_accessible_resources": [ "icons/*.png" ],
-
-  "permissions": [ "tabs" ],
+  "permissions": [
+      "tabs",
+      "tabHide"
+   ],
 
   "browser_action": {
       "default_icon": "icons/tabsSearch_48.png",
-      "default_title": "Tab Search",
+      "default_title": "Tab Search and Manage",
       "default_popup": "pages/tabsSearch.html"
   }
 }

src/pages/tabsSearch.html

@@ -18,12 +18,18 @@
         <button id="goTop" type="button" title="To Top">
             <img style="width:1em; height:1em;" src="../icons/up-arrow.png"/>
         </button>
+        <button id="showAllBttn" type="button" title="Unhide All Tabs">
+            <img style="width:1em; height:1em;" src="../icons/eyeOpen.png"/>
+        </button>
         <button id="goToTab" type="button" title="Scroll Current Tab To View">
             <img style="width:1em; height:1em;" src="../icons/go2-arrow.png"/>
         </button>
         <button id="newTab" type="button" title="New Tab">
             <img style="width:1em; height:1em;" src="../icons/plus.png"/>
         </button>
+        <button id="hideAllBttn" type="button" title="Hide All Tabs">
+            <img style="width:1em; height:1em;" src="../icons/eyeClosed.png"/>
+        </button>
         <button id="goBottom" type="button" title="To Bottom">
             <img style="width:1em; height:1em;" src="../icons/down-arrow.png"/>
         </button>
@@ -32,6 +38,7 @@
 
     <script src="../scripts/libs/dragula.min.js" charset="utf-8"></script>
     <script src="../scripts/dragContainersSetup.js" charset="utf-8"></script>
+    <script src="../scripts/showHideLogic.js"></script>
     <script src="../scripts/generateView.js"></script>
     <script src="../scripts/searchTabs.js"></script>
     <script src="../scripts/eventListeners.js" charset="utf-8"></script>

src/scripts/eventListeners.js

@@ -1,36 +1,57 @@
 // Set click events for tab blocks
 document.addEventListener("click", (e) => {
-    var target    = e.target;
+    var target    = undefined;
+
+    if (!e.target.className.includes("pTagTitleText")) {
+        target = e.target;
+    } else {
+        target = e.target.parentElement;
+    }
     var targetID  = target.id;
     var parentElm = target.parentElement;
     var id        = 0;
 
+
     if (targetID == "closeBttn") {
         id = parseInt(parentElm.getAttribute("tabID"));
-
         browser.tabs.remove(id);
-
         parentElm.parentElement.removeChild(parentElm);
-    } else if (targetID == "iconElm" || targetID == "faveIcon") {
-        if (targetID == "faveIcon")
-            target = parentElm.parentElement;
-
+    } else if (targetID == "iconElm") {
         id = parseInt(target.getAttribute("tabID"));
-            browser.tabs.update(id, { active: true });
+        browser.tabs.update(id, { active: true });
 
+        target.querySelectorAll(".hiderImg")[0].src = "../icons/eyeOpen.png";
         oldElm.setAttribute("class", "block");
         oldElm = target;
         target.setAttribute("class", "block block-focused");
     } else if (targetID == "goTop") {
         window.scrollTo(0,0);
     } else if (targetID == "goBottom") {
-        window.scrollTo(0,document.body.scrollHeight);
+        window.scrollTo(0, document.body.scrollHeight);
     } else if (targetID == "goToTab") {
         // Go to selected and 100px up
          oldElm.scrollIntoView();
          window.scrollBy(0, -100);
     } else if (targetID == "newTab") {
         createTab();
+    } else if (targetID == "hideTgglBttn") {
+        id = parseInt(parentElm.getAttribute("tabID"));
+
+        if (id != oldElm.getAttribute("tabID")) {
+            if (target.src.includes("eyeClosed.png")) {
+                parentElm.setAttribute("class", "block");
+                target.src  = "../icons/eyeOpen.png"
+                unhideSelectedTab(id);
+            } else {
+                parentElm.setAttribute("class", "block hiddenBGColor");
+                target.src  = "../icons/eyeClosed.png"
+                hideSelectedTab(id);
+            }
+        }
+    } else if (targetID == "hideAllBttn") {
+        doAllTabs(0)
+    } else if (targetID == "showAllBttn") {
+        doAllTabs(1);
     }
 });
 

src/scripts/generateView.js

@@ -3,6 +3,7 @@ const searchBar     = document.getElementById("searchBar");
 const errHandler    = document.getElementById("errorZone");
 const listZone      = document.getElementById("listZone");
 const notFoundText  = document.createTextNode("Search not found...");
+const tabImg        = browser.extension.getURL("icons/tab.png");
 var oldElm          = "";
 var plusTag         = ""
 
@@ -18,28 +19,39 @@ function logTabs(tabs) {
 
 function createContainer(tab) {
     var id                = tab.id;
-    var spanTag           = document.createElement("SPAN");
+    var spanTag           = document.createElement("DIV");
+    var pTag              = document.createElement("P");
     var iconText          = document.createTextNode(tab.title);
-    var centerTag         = document.createElement("CENTER");
     var closeImgTag       = document.createElement("IMG");
-    var icoImgTag         = document.createElement("IMG");
+    var hidnStImgTag      = document.createElement("IMG");
+    var icoImgTag         = document.createElement("IMG");  // Used to properly set bg
 
     spanTag.setAttribute("tabID", tab.id);
     spanTag.title         = tab.title;
     spanTag.id            = "iconElm";
-    spanTag.className     = "block";
     closeImgTag.id        = "closeBttn";
     closeImgTag.className = "closeImg";
     closeImgTag.src       = "../icons/x.png";
-    icoImgTag.id          = "faveIcon";
-    icoImgTag.className   = "thumbImg";
-    icoImgTag.onerror     = function() { icoImgTag.src = "../icons/tab.png"; }
-    icoImgTag.src         = tab.favIconUrl;
+    hidnStImgTag.id       = "hideTgglBttn"
+    hidnStImgTag.className= "hiderImg";
+    pTag.className        = "pTagTitleText";
+
+    if (!tab.hidden) {
+        spanTag.className = "block";
+        hidnStImgTag.src  = "../icons/eyeOpen.png";
+    } else {
+        spanTag.className = "block hiddenBGColor";
+        hidnStImgTag.src  = "../icons/eyeClosed.png";
+    }
+
+    spanTag.style.backgroundImage    = "url(" + tab.favIconUrl + ")";
+    icoImgTag.src         = tab.favIconUrl;
+    icoImgTag.onerror     = function() { spanTag.style.backgroundImage = "url(" + tabImg + ")"; }
 
-    centerTag.appendChild(icoImgTag);
     spanTag.appendChild(closeImgTag);
-    spanTag.appendChild(centerTag);
-    spanTag.appendChild(iconText);
+    spanTag.appendChild(hidnStImgTag);
+    pTag.appendChild(iconText);
+    spanTag.appendChild(pTag);
     listZone.appendChild(spanTag);
 
     // Set oldElm so eventListeners.js has starting ref

src/scripts/showHideLogic.js

@@ -0,0 +1,60 @@
+// 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) {
+    var msg = "" + ev;
+    if (msg.includes("extensions.webextensions.tabhide.enabled")) {
+        var errText = document.createTextNode(msg);
+        listZone.style.display   = "none";
+        errHandler.style.display = "block";
+        errHandler.appendChild(errText);
+        setTimeout(function () {
+            listZone.style.display   = "block";
+            errHandler.style.display = "none";
+            clearNodes(errHandler);
+        }, 4000);
+    }
+}
+
+function doAllTabs(doType) {
+    // 0 == hide and 1 == unhide
+    tabsAction.query({currentWindow: true}).then((tabs) => {
+        var tabCollectionIDs = [];
+
+        for (var i = 0; i < tabs.length; i++) {
+            tabCollectionIDs.push(tabs[i].id);
+        }
+
+        if (doType == 0) {
+            hideSelectedTab(tabCollectionIDs);
+        } else {
+            unhideSelectedTab(tabCollectionIDs);
+        }
+    }, doType);
+
+    var imgs = document.querySelectorAll(".hiderImg");
+    if (doType == 0) {
+        for (var i = 0; i < imgs.length; i++) {
+            imgs[i].parentElement.setAttribute("class", "block hiddenBGColor");
+            imgs[i].src = "../icons/eyeClosed.png";
+        }
+
+        oldElm.querySelectorAll(".hiderImg")[0].src = "../icons/eyeOpen.png";
+        oldElm.setAttribute("class", "block block-focused");
+    } else {
+        for (var i = 0; i < imgs.length; i++) {
+            imgs[i].parentElement.setAttribute("class", "block");
+            imgs[i].src = "../icons/eyeOpen.png";
+        }
+
+        oldElm.setAttribute("class", "block block-focused");
+    }
+}