New features.

src/css/tabsSearch.css

@@ -21,6 +21,25 @@ html, body {
     margin-left: 1.5em;
 }
 
+#udArrows {
+    position: fixed;
+    bottom: 0;
+    margin-left: 40%;
+}
+
+#udArrows button {
+    font-size: 1.4em;
+    background-color: rgba(79, 186, 70, 1);
+    color: rgba(255,255,255,1);
+}
+
+#udArrows button:hover {
+    background-color: rgba(255,255,255,1);
+    color: rgba(0,0,0,1);
+    cursor: pointer;
+    border-style: none;
+}
+
 #searchBar, #errorZone {
     width: 630px;
     background: rgb(255,255,255);
@@ -38,9 +57,8 @@ html, body {
 #errorZone {
     color: red;
     border-style: dotted;
-    margin-top: 2em;
-    padding-top: 0.5em;
-    padding-bottom: 0.5em;
+    margin: 6em 0em 0em 2em;
+    padding: 0.5em 0em 0.5em 0em;
 }
 
 #listZone {
@@ -68,6 +86,10 @@ html, body {
     color: rgba(64,64,64, 0.84);
 }
 
+.block-focused {
+    background-color: rgba(53, 103, 14, 0.8);
+}
+
 .thumbImg {
     clear: left;
     width: 64px;

src/manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "Tab Search",
-    "version": "1.1.6",
+    "version": "1.1.8",
     "description": "Search Tabs and switch to them quickly.",
 
   "applications": {

src/pages/tabsSearch.html

@@ -11,10 +11,15 @@
         <input id="searchBar" type="text" placeholder="Search tabs..." value="" autofocus />
     </div>
 
-    <div id="listZone" class="container">
+    <div id="listZone" class="container"></div>
+    <div id="errorZone" style="display: none;"></div>
+
+    <div id="udArrows">
+        <button id="goTop" type="button" title="To Top">&Wedge;</button>
+        <button id="goToTab" type="button" title="Scroll Current Tab To View">&mdash;</button>
+        <button id="goBottom" type="button" title="To Bottom">&Vee;</button>
     </div>
 
-    <div id="errorZone" style="display: none;"></div>
 
     <script src="../scripts/libs/dragula.min.js" charset="utf-8"></script>
     <script src="../scripts/dragContainersSetup.js" charset="utf-8"></script>

src/scripts/dragContainersSetup.js

@@ -15,7 +15,7 @@ var drake = dragula()
             }
         }
 
-        browser.tabs.move(toMoveID, {index: newIndex}).then();
+        tabsAction.move(toMoveID, {index: newIndex}).then();
         el.className += ' ex-moved';
     }).on('over', function (el, container) {
         container.className += ' ex-over';

src/scripts/eventListeners.js

@@ -1,30 +1,37 @@
 // Set click events
 document.addEventListener("click", (e) => {
-    var target = e.target;
-    var targetID = target.id;
+    var target    = e.target;
+    var targetID  = target.id;
     var parentElm = target.parentElement;
+    var id        = 0;
 
     if (targetID == "closeBttn") {
-        var id = parseInt(parentElm.getAttribute("tabID"));
+        id = parseInt(parentElm.getAttribute("tabID"));
 
-        browser.tabs.remove(id).then(function () {
-            console.log("Removed tab..." + id)
-        }, onError);
+        browser.tabs.remove(id);
 
         parentElm.parentElement.removeChild(parentElm);
     } else if (targetID == "iconElm" || targetID == "faveIcon") {
-        if (targetID == "faveIcon") {
-            var id = parseInt(parentElm.parentElement.getAttribute("tabID"));
-        } else {
-            var id = parseInt(target.getAttribute("tabID"));
-        }
+        if (targetID == "faveIcon")
+            target = parentElm.parentElement;
 
-        browser.tabs.update(id, { active: true }).then(function () {
-            console.log("Selected tab..." + id)
-        }, onError);
+        oldElm.setAttribute("class", "block");
+        oldElm = target;
+        target.setAttribute("class", "block block-focused");
+
+        id = parseInt(target.getAttribute("tabID"));
+        browser.tabs.update(id, { active: true });
+    } else if (targetID == "goTop") {
+        window.scrollTo(0,0);
+    } else if (targetID == "goBottom") {
+        window.scrollTo(0,document.body.scrollHeight);
+    } else if (targetID == "goToTab") {
+        // Go to selected and 100px up
+         oldElm.scrollIntoView();
+         window.scrollBy(0, -100);
     }
 });
 
-document.getElementById("searchBar").onkeypress = function(e){
+document.getElementById("searchBar").onkeypress = function () {
     searchTabs();
 }

src/scripts/generateView.js

@@ -1,50 +1,89 @@
-const tabQuery = browser.tabs.query({currentWindow: true});
-const searchBar = document.getElementById("searchBar");
-const errHandler = document.getElementById("errorZone");
-const listZone = document.getElementById("listZone");
-const notFoundText = document.createTextNode("Search not found...");
-
+const tabsAction    = browser.tabs;
+const searchBar     = document.getElementById("searchBar");
+const errHandler    = document.getElementById("errorZone");
+const listZone      = document.getElementById("listZone");
+const notFoundText  = document.createTextNode("Search not found...");
+var oldElm          = "";
+var plusTag         = ""
 
 function logTabs(tabs) {
     // tab.url requires the `tabs` permission
     for (let tab of tabs) {
         createContainer(tab);
     }
-    // Set window position to bottom of list
-    window.scrollTo(0,document.body.scrollHeight);
+    addPlusContainer();
+    // Set poped-out-window position and 100px up from selected elm
+     oldElm.scrollIntoView();
+     window.scrollBy(0, -100);
 }
 
 function createContainer(tab) {
-    var id = tab.id;
-    var spanTag = document.createElement("SPAN");
-    var iconText = document.createTextNode(tab.title);
-    var centerTag = document.createElement("CENTER");
-    var closeImgTag = document.createElement("IMG");
-    var icoImgTag = document.createElement("IMG");
+    var id                = tab.id;
+    var spanTag           = document.createElement("SPAN");
+    var iconText          = document.createTextNode(tab.title);
+    var centerTag         = document.createElement("CENTER");
+    var closeImgTag       = document.createElement("IMG");
+    var icoImgTag         = document.createElement("IMG");
 
-    spanTag.title = tab.title;
-    spanTag.id = "iconElm";
-    spanTag.className = "block";
-    spanTag.setAttribute("tabID",tab.id);
-
-    closeImgTag.id = "closeBttn";
+    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;
+    closeImgTag.src       = "../icons/x.png";
+    icoImgTag.id          = "faveIcon";
+    icoImgTag.className   = "thumbImg";
+    icoImgTag.onerror     = function() { icoImgTag.src = "../icons/tab.png"; }
+    icoImgTag.src         = tab.favIconUrl;
 
     centerTag.appendChild(icoImgTag);
     spanTag.appendChild(closeImgTag);
     spanTag.appendChild(centerTag);
     spanTag.appendChild(iconText);
     listZone.appendChild(spanTag);
+
+    // Set oldElm so eventListeners.js has starting ref
+    if (tab.active == true) {
+        spanTag.className     = "block block-focused";
+        if (oldElm) {
+            oldElm.setAttribute("class", "block");
+        }
+        oldElm = spanTag;
+    }
 }
 
+function addPlusContainer() {
+    var spanTag           = document.createElement("SPAN");
+    var centerTag         = document.createElement("CENTER");
+    var icoImgTag         = document.createElement("IMG");
+
+    spanTag .addEventListener("click", createTab);
+    spanTag.title         = "Open a new tab...";
+    spanTag.className     = "block";
+    icoImgTag.style       = "width: 100%; height:auto";
+    icoImgTag.src         = "../icons/plus.png";
+
+    centerTag.appendChild(icoImgTag);
+    spanTag.appendChild(centerTag);
+    listZone.appendChild(spanTag);
+    plusTag = spanTag;
+}
+
+function createTab() {
+  tabsAction.create({})
+            .then(function (tab) {
+                createContainer(tab);
+            }).then(function () {
+                listZone.appendChild(plusTag);
+            });
+}
 
 function onError(error) { console.log(`Error: ${error}`); }
-function getAllTabs() { tabQuery.then(logTabs, onError); }
 
-getAllTabs();
+function getTabs(tabs) {
+    // Get current tab and then list of tabs
+    tabsAction.query({currentWindow: true})
+            .then(logTabs, onError);
+}
+getTabs();

src/scripts/searchTabs.js

@@ -35,4 +35,8 @@ function clearNodes(targetNode) {
 }
 
 function loadSelTab(id) { browser.tabs.update(id, { active: true }); }
-function searchTabs() { tabQuery.then(findTabs, onError); }
+
+function searchTabs() {
+    tabsAction.query({currentWindow: true})
+              .then(findTabs, onError);
+}