Changed out tab control scheme.

README.md

@@ -4,8 +4,8 @@ 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.3
+# Version: 1.3.4
-Updating for Firefox AMO
+Changed out tab control scheme.
 
 ***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.

src/css/tabsSearch.css

@@ -18,13 +18,23 @@ html, body { overflow-x: hidden; }
     margin-left: 1.4em;
 }
 
-#udArrows {
+#tabControls {
+    position: fixed;
+    z-index: 120;
+    height: 128px;
+    padding: 0em 0.4em 0.4em 0.4em;
+    width: auto;
+    background-color: rgba(9,107,120, 0.85);
+    color: rgb(255,255,255);
+}
+
+#bottomControls {
     position: fixed;
     bottom: 0;
     margin-left: 25%;
 }
 
-#udArrows input {
+#bottomControls input {
     font-size: 2em;
     background-color: rgba(79, 186, 70, 1);
     color: rgba(255,255,255,1);
@@ -33,7 +43,7 @@ html, body { overflow-x: hidden; }
     padding: 0.1em;
 }
 
-#udArrows input:hover {
+#bottomControls input:hover {
     background-color: rgba(152, 152, 152, 1);
     color: rgba(0,0,0,1);
     cursor: pointer;
@@ -41,6 +51,7 @@ html, body { overflow-x: hidden; }
 }
 
 #searchBar, #errorZone {
+    z-index: 888;
     width: 630px;
     background: rgb(255,255,255);
     color: rgba(9,107,120, 0.85);
@@ -100,16 +111,17 @@ html, body { overflow-x: hidden; }
 }
 
 .closeImg, .hiderImg {
-    padding: 0.5em;
+    padding: 0.2em;
     width: 28px;
     height: 28px;
     clear: both;
+    float: left;
 }
 
 .pTagTitleText {
     background-color: rgba(63, 63, 63, 0.64);
     line-height: 1.5em;
-    margin-top: 2em;
+    margin-top: 4.5em;
     height: 3em;
     overflow: hidden;
     text-overflow: ellipsis;

src/manifest.json

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

src/pages/tabsSearch.html

@@ -14,7 +14,7 @@
     <div id="listZone" class="container"></div>
     <div id="errorZone" style="display: none;"></div>
 
-    <div id="udArrows">
+    <div id="bottomControls">
         <input type="image" id="goTop" title="To Top" src="../icons/up-arrow.png" />
         <input type="image" id="showAllBttn" title="Unhide All Tabs" src="../icons/eyeOpen.png" />
         <input type="image" id="goToTab" title="Scroll Current Tab To View" src="../icons/go2-arrow.png" />
@@ -24,11 +24,13 @@
         <input type="image" id="goBottom" title="To Bottom" src="../icons/down-arrow.png"/>
     </div>
 
+    <div id="tabControls" style="display: none;">
+        <img id="closeBttn" class="closeImg" src="../icons/x.png" />
+        <img id="hideTgglBttn" class="hiderImg" src="../icons/eyeOpen.png" />
+    </div>
 
     <template id="tabContainerTemplate">
         <div title="" id="iconElm" class="">
-            <img id="closeBttn" class="closeImg" src="" />
-            <img id="hideTgglBttn" class="hiderImg" src="" />
             <p class="pTagTitleText" ></p>
         </div>
     </template>

src/scripts/dragContainersSetup.js

@@ -1,8 +1,14 @@
 var count  = 2; toMoveID = 0, newIndex = 0;;
 var insert = "";
 
-var drake = dragula()
+var drake = dragula({
-    .on('drag', function (el) {
+        direction: 'horizontal',        // X axis is considered when determining where an element would be dropped
+        copy: false,                    // elements are moved by default, not copied
+        copySortSource: false,          // elements in copy-source containers can be reordered
+        revertOnSpill: true,            // spilling will put the element back where it was dragged from, if this is true
+        removeOnSpill: false,           // spilling will `.remove` the element, if this is true
+        ignoreInputTextSelection: true  // allows users to select input text, see details below
+    }).on('drag', function (el) {
         toMoveID = parseInt(el.getAttribute("tabID"));
         el.className = el.className.replace('ex-moved', '');
     }).on('drop', function (el, container) {

src/scripts/eventListeners.js

@@ -10,7 +10,9 @@ document.addEventListener("click", (e) => {
     var id        = 0;
 
     if (targetID == "closeBttn") {
-        closeBttnAction(target, targetID, parentElm, id);
+        if (hoverTarget) {
+            closeBttnAction(hoverTarget, hoverTarget.id);
+        }
     } else if (targetID == "iconElm") {
         setNewTabAction(target, targetID, parentElm, id);
     } else if (targetID == "goTop") {
@@ -22,7 +24,9 @@ document.addEventListener("click", (e) => {
     } else if (targetID == "newTab") {
         createTab();
     } else if (targetID == "hideTgglBttn") {
-        hideSelectedTabAction(target, targetID, parentElm, id);
+        if (hoverTarget) {
+            hideSelectedTabAction(hoverTarget, hoverTarget.id);
+        }
     } else if (targetID == "hideAllBttn") {
         showHideTabsAction(0)
     } else if (targetID == "showAllBttn") {
@@ -32,21 +36,24 @@ document.addEventListener("click", (e) => {
     }
 });
 
-function closeBttnAction(target, targetID, parentElm, id) {
+function closeBttnAction(target, targetID) {
-    if (parentElm == oldElm) {
+    parentElm = target.parentElement;
-        var index = Array.from(parentElm.parentElement.children).indexOf(parentElm);
+
+    if (target == oldElm) {
+        var index = Array.from(parentElm.children).indexOf(target);
         (index - 1 < 0) ? index++ :  index-- ;  // Check what index to chose
-        var newElm = parentElm.parentElement.children[index];
+        var newElm = parentElm.children[index];
 
         id = parseInt(newElm.getAttribute("tabID"));
         browser.tabs.update(id, { active: true });
         setOldElm(newElm);
     }
 
-    id = parseInt(parentElm.getAttribute("tabID"));
+    id = parseInt(target.getAttribute("tabID"));
     browser.tabs.remove(id);
-
+    parentElm.removeChild(target);
-    parentElm.parentElement.removeChild(parentElm);
+    hoverTarget = undefined;
+    document.getElementById("tabControls").style.display = "none";
 }
 
 function setNewTabAction(target, targetID, parentElm, id) {
@@ -55,21 +62,23 @@ function setNewTabAction(target, targetID, parentElm, id) {
         browser.windows.update(tab.windowId, {focused: true});
         browser.tabs.update(id, { active: true });
     },id);
-
     setOldElm(target);
+    document.getElementById("tabControls").querySelector("#hideTgglBttn").src = "../icons/eyeOpen.png";
 }
 
-function hideSelectedTabAction(target, targetID, parentElm, id) {
+function hideSelectedTabAction(target, targetID) {
-    id = parseInt(parentElm.getAttribute("tabID"));
+    parentElm = target.parentElement;
+    id        = parseInt(target.getAttribute("tabID"));
+    control   = document.getElementById("tabControls").querySelector("#hideTgglBttn");
 
     if (id != oldElm.getAttribute("tabID")) {
-        if (target.src.includes("eyeClosed.png")) {
+        if (control.src.includes("eyeClosed.png")) {
-            parentElm.setAttribute("class", "block");
+            target.setAttribute("class", "block");
-            target.src  = "../icons/eyeOpen.png"
+            control.src  = "../icons/eyeOpen.png";
             unhideSelectedTab(id);
         } else {
-            parentElm.setAttribute("class", "block hiddenBGColor");
+            target.setAttribute("class", "block hiddenBGColor");
-            target.src  = "../icons/eyeClosed.png"
+            control.src  = "../icons/eyeClosed.png";
             hideSelectedTab(id);
         }
     }
@@ -87,7 +96,6 @@ function setSearchModeAction(target, targetID, parentElm, id) {
 }
 
 function setOldElm(target) {
-    target.querySelectorAll(".hiderImg")[0].src = "../icons/eyeOpen.png";
     oldElm.setAttribute("class", "block");
     oldElm = target;
     target.setAttribute("class", "block block-focused");

src/scripts/generateView.js

@@ -5,11 +5,12 @@ 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          = "";
+let hoverTarget     = undefined
-var currentWinId    = undefined;
+let oldElm          = undefined;
-var newWinId        = undefined;
+let currentWinId    = undefined;
-var focusedWinID    = undefined;
+let newWinId        = undefined;
-var windowIndex     = 0;
+let focusedWinID    = undefined;
+let windowIndex     = 0;
 
 function logTabs(tabs) {
     windowIndex = 0;
@@ -71,19 +72,20 @@ function createContainer(tab) {
 
     spanTag.setAttribute("tabID", tab.id);
     spanTag.title         = tab.title;
-    closeImgTag.src       = "../icons/x.png";
 
-    if (!tab.hidden) {
+    if (!tab.hidden)
         spanTag.className = "block";
-        hidnStImgTag.src  = "../icons/eyeOpen.png";
+    else
-    } 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 + ")"; }
+
+    spanTag.addEventListener("mouseenter", function (eve) {
+        moveTabControlTo(eve.target);
+    });
+
     pTag.appendChild(iconText);
     listZone.appendChild(clone);
 }
@@ -95,6 +97,21 @@ function createTab() {
             })
 }
 
+function moveTabControlTo(elm) {
+    let tabControls = document.getElementById("tabControls");
+    let rect        = elm.getBoundingClientRect();
+    tabControls.style.left = (rect.left - 46) + "px";
+    tabControls.style.top  = rect.top + "px";
+    hoverTarget            = elm;
+
+    if (elm.className == "block hiddenBGColor")
+        document.getElementById("tabControls").querySelector("#hideTgglBttn").src = "../icons/eyeClosed.png";
+    else
+        document.getElementById("tabControls").querySelector("#hideTgglBttn").src = "../icons/eyeOpen.png";
+
+    document.getElementById("tabControls").style.display = "";
+}
+
 function onError(error) { console.log(`Error: ${error}`); }
 
 function getTabs() {

src/scripts/showHideLogic.js

@@ -40,21 +40,24 @@ function showHideTabsAction(doType) {
         }
     }, doType);
 
-    var imgs = document.querySelectorAll(".hiderImg");
     if (doType == 0) {
-        for (var i = 0; i < imgs.length; i++) {
+        let tabs = document.querySelectorAll(".block");
-            imgs[i].parentElement.setAttribute("class", "block hiddenBGColor");
+        for (var i = 0; i < tabs.length; i++) {
-            imgs[i].src = "../icons/eyeClosed.png";
+            tabs[i].setAttribute("class", "block hiddenBGColor");
         }
-
-        oldElm.querySelectorAll(".hiderImg")[0].src = "../icons/eyeOpen.png";
         oldElm.setAttribute("class", "block block-focused");
     } else {
-        for (var i = 0; i < imgs.length; i++) {
+        let tabs = document.querySelectorAll(".hiddenBGColor");
-            imgs[i].parentElement.setAttribute("class", "block");
+        for (var i = 0; i < tabs.length; i++) {
-            imgs[i].src = "../icons/eyeOpen.png";
+            tabs[i].setAttribute("class", "block");
         }
-
         oldElm.setAttribute("class", "block block-focused");
     }
+
+    if (hoverTarget) {
+        if (hoverTarget.className == "block hiddenBGColor")
+            document.getElementById("tabControls").querySelector("#hideTgglBttn").src = "../icons/eyeClosed.png";
+        else
+            document.getElementById("tabControls").querySelector("#hideTgglBttn").src = "../icons/eyeOpen.png";
+    }
 }