New features.

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();