Added controls

README.md

@@ -4,9 +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.8
+# Version: 1.3.9
-* Added tab mute option
+* Added tab duplicate button
-* Added to new window option
+* Added secondary control menu
 
 
 ***Note:

src/css/tabsSearch.css

@@ -22,15 +22,22 @@ html, body { overflow-x: hidden; }
     margin-left: 1.4em;
 }
 
-#tabControls {
+#tabControls,
+#tabControls2 {
     position: fixed;
     z-index: 555;
-    height: 152px;
+    width: 145px;
+    height: 32px;
     padding: 0em 0.4em 0.4em 0.4em;
     background-color: rgba(9,107,120, 0.85);
     color: rgb(255,255,255);
 }
 
+#tabControls2 {
+    height: 152px;
+    width: auto;
+}
+
 #bottomControls {
     position: fixed;
     bottom: 0;
@@ -120,14 +127,24 @@ html, body { overflow-x: hidden; }
 	scrollbar-width: thin;
 }
 
-.closeImg, .hiderImg, .popoutImg, .muterImg {
+/* Control defaults */
+.closeImg, .hiderImg, .muterImg, .dupeImg, .popoutImg {
     padding: 0.2em;
     width: 28px;
     height: 28px;
-    clear: both;
     float: left;
 }
 
+/* Control 2 imgs set to vertical */
+.closeImg {
+    clear: both;
+}
+
+.hiderImg, .muterImg, .dupeImg, .popoutImg {
+    float: right;
+}
+
+
 .pTagTitleText {
     background-color: rgba(63, 63, 63, 0.64);
     line-height: 1.5em;
@@ -137,8 +154,11 @@ html, body { overflow-x: hidden; }
     text-overflow: ellipsis;
 }
 
-.closeImg { float: right; }
+.hiderImg:hover, .popoutImg:hover,
+.muterImg:hover, .dupeImg:hover {
+    background-color: rgba(30, 129, 22, 1);
+}
+
 .block-focused { background-color: rgba(53, 103, 14, 0.8); }
 .closeImg:hover { background-color: rgba(196, 11, 11, 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.8",
+    "version": "1.3.9",
     "description": "This plugin can search, drag-n-drop ordering, and (un)hide all or some tabs.",
 
   "applications": {
@@ -19,6 +19,7 @@
   "permissions": [
       "tabs",
       "tabHide",
+      "activeTab",
       "storage"
    ],
 

src/pages/tabsSearch.html

@@ -26,12 +26,17 @@
     </div>
 
     <div id="tabControls" style="display: none;">
-        <img id="closeBttn" class="closeImg" title="Close Tab" src="../icons/x.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" />
+        <img id="duplicateBttn" class="dupeImg" title="Duplicate Tab" src="../icons/dupeTab.png" />
+        <img id="muteTgglBttn" class="muterImg" title="(Un)Mute Tab" src="../icons/isNotMuted.png" />
+        <img id="hideTgglBttn" class="hiderImg" title="Show/Hide Tab" src="../icons/eyeOpen.png" />
     </div>
 
+    <div id="tabControls2" style="display: none;">
+        <img id="closeBttn" class="closeImg" title="Close Tab" src="../icons/x.png" />
+    </div>
+
+
     <template id="tabContainerTemplate">
         <div title="" id="iconElm" class="">
             <p class="pTagTitleText" ></p>

src/scripts/eventListeners.js

@@ -26,6 +26,10 @@ document.addEventListener("click", (e) => {
         if (hoverTarget) {
             popoutSelectedTabAction(hoverTarget, hoverTarget.id);
         }
+    } else if (targetID == "duplicateBttn") {
+        if (hoverTarget) {
+            duplicateTabAction(hoverTarget, hoverTarget.id);
+        }
     } else if (targetID == "muteTgglBttn") {
         if (hoverTarget) {
             muteSelectedTabAction(hoverTarget, hoverTarget.id);
@@ -89,6 +93,12 @@ function popoutSelectedTabAction(target, targetID) {
     popoutSelectedTab(id);
 }
 
+function duplicateTabAction(target, targetID) {
+    parentElm = target.parentElement;
+    id        = parseInt(target.getAttribute("tabID"));
+    duplicateTab(id);
+}
+
 function hideSelectedTabAction(target, targetID) {
     parentElm = target.parentElement;
     id        = parseInt(target.getAttribute("tabID"));
@@ -141,7 +151,7 @@ function setOldElm(target) {
     target.setAttribute("class", "block block-focused");
 }
 
-function scrollToView(time = 200) {
+function scrollToView(time = 400) {
     setTimeout(function () {
         // Go to selected and 100px up
         oldElm.scrollIntoView();

src/scripts/generateView.js

@@ -21,6 +21,12 @@ function popoutSelectedTab(id) {
     windowsAction.create({tabId: id});
 }
 
+
+async function duplicateTab(id) {
+    tab = await tabsAction.duplicate(id);
+    createContainer(tab);
+}
+
 function unhideSelectedTab(id) {
     tabsAction.show(id).then(successMsg, errMsg);
 }
@@ -138,12 +144,17 @@ function createWin() {
 
 async function moveTabControlTo(elm) {
     let tabControls        = document.getElementById("tabControls");
+    let tabControls2       = document.getElementById("tabControls2");
     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";
+    tabControls.style.left = (rect.left) + "px";
+    tabControls.style.top  = (rect.top) + "px";
+
+    tabControls2.style.left = (rect.left - 46) + "px";
+    tabControls2.style.top  = rect.top + "px";
     hoverTarget            = elm;
 
     if (elm.className == "block hiddenBGColor")
@@ -159,7 +170,8 @@ async function moveTabControlTo(elm) {
     else
         muteTgglBttn.src  = "../icons/isMuted.png";
 
-    tabControls.style.display = "";
+    tabControls.style.display  = "";
+    tabControls2.style.display = "";
 }
 
 function onError(error) { console.log(`Error: ${error}`); }