New version plus look.

src/scripts/dragContainersSetup.js

@@ -0,0 +1,27 @@
+var count = 2; toMoveID = 0, newIndex = 0;;
+var insert = "";
+
+var drake = dragula()
+    .on('drag', function (el) {
+        toMoveID = parseInt(el.getAttribute("tabID"));
+        el.className = el.className.replace('ex-moved', '');
+    }).on('drop', function (el, container) {
+        var subCont = document.getElementById("listZone");
+        var size = subCont.children.length;
+
+        for (var i = 0; i < size; i++) {
+            if (subCont.children[i].getAttribute("tabID") == toMoveID) {
+                newIndex = i;
+            }
+        }
+
+        browser.tabs.move(toMoveID, {index: newIndex}).then();
+        el.className += ' ex-moved';
+    }).on('over', function (el, container) {
+        container.className += ' ex-over';
+    }).on('out', function (el, container) {
+        container.className = container.className.replace('ex-over', '');
+});
+
+// Connect to pre created containers
+drake.containers.push(document.querySelector('#listZone'));

src/scripts/eventListeners.js

@@ -0,0 +1,30 @@
+// Set click events
+document.addEventListener("click", (e) => {
+    var target = e.target;
+    var targetID = target.id;
+    var parentElm = target.parentElement;
+
+    if (targetID == "closeBttn") {
+        var id = parseInt(parentElm.getAttribute("tabID"));
+
+        browser.tabs.remove(id).then(function () {
+            console.log("Removed tab..." + id)
+        }, onError);
+
+        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"));
+        }
+
+        browser.tabs.update(id, { active: true }).then(function () {
+            console.log("Selected tab..." + id)
+        }, onError);
+    }
+});
+
+document.getElementById("searchBar").onkeypress = function(e){
+    searchTabs();
+}

src/scripts/generateView.js

@@ -0,0 +1,53 @@
+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...");
+
+
+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);
+}
+
+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");
+
+    spanTag.title = tab.title;
+    spanTag.id = "iconElm";
+    spanTag.className = "block";
+    spanTag.setAttribute("tabID",tab.id);
+
+    closeImgTag.id = "closeBttn";
+    closeImgTag.className = "closeImg";
+    closeImgTag.src = "../icons/x.png";
+
+    icoImgTag.id = "faveIcon";
+    icoImgTag.className = "thumbImg";
+    if (tab.favIconUrl == null || tab.favIconUrl == "") {
+        icoImgTag.src = "../icons/tab.png";
+    } else {
+        icoImgTag.src = tab.favIconUrl;
+    }
+
+    centerTag.appendChild(icoImgTag);
+    spanTag.appendChild(closeImgTag);
+    spanTag.appendChild(centerTag);
+    spanTag.appendChild(iconText);
+    listZone.appendChild(spanTag);
+}
+
+
+function onError(error) { console.log(`Error: ${error}`); }
+function getAllTabs() { tabQuery.then(logTabs, onError); }
+
+getAllTabs();

src/scripts/searchTabs.js

@@ -0,0 +1,38 @@
+function findTabs(tabs) {
+    var selection = [];
+
+    clearNodes(listZone);
+    if (searchBar.value != "") {
+        for (let tab of tabs) {
+            var title = tab.title;
+            if (title.toLowerCase().includes(searchBar.value.toLowerCase())) {
+                selection.push(tab);
+            }
+        }
+        if (selection.length > 1) {
+            for (let sel of selection) {
+                createContainer(sel)
+            }
+            errHandler.style.display = "none";
+            clearNodes(errHandler);
+        } else {
+            if (selection[0] != undefined) {
+                errHandler.style.display = "none";
+                clearNodes(errHandler);
+                loadSelTab(selection[0].id);
+            } else {
+                errHandler.style.display = "block";
+                errHandler.appendChild(notFoundText);
+            }
+        }
+    } else { logTabs(tabs); }
+}
+
+function clearNodes(targetNode) {
+    while (targetNode.firstChild) {
+        targetNode.removeChild(targetNode.firstChild);
+    }
+}
+
+function loadSelTab(id) { browser.tabs.update(id, { active: true }); }
+function searchTabs() { tabQuery.then(findTabs, onError); }

src/scripts/tabsSearch.js

@@ -1,81 +0,0 @@
-const toFind = document.getElementById("toFind");
-const tabQuery = browser.tabs.query({currentWindow: true});
-const errHandler = document.getElementById("errorZone");
-const listZone = document.getElementById("listZone");
-const notFoundText = document.createTextNode("Search not found...");
-
-document.getElementById("toFind").onkeypress = function(e){
-    searchTabs();
-}
-
-document.addEventListener("click", (e) => {
-    if (e.target.id != "toFind" && e.target.id != "listZone" ) {
-        if (e.target.tagName == "IMG") {
-            var parent = e.target.parentNode;
-            loadSelTab(parseInt(parent.id));
-        } else {
-            loadSelTab(parseInt(e.target.id));
-        }
-    }
-});
-
-function logTabs(tabs) {
-    var selection = [];
-
-    clearNodes(listZone);
-    if (toFind.value != "") {
-        for (let tab of tabs) {
-            var title = tab.title;
-            if (title.toLowerCase().includes(toFind.value.toLowerCase())) {
-                selection.push(tab);
-            }
-        }
-        if (selection.length > 1) {
-            for (let sel of selection) {
-                icon = document.createElement("DIV");
-                thumbnail = document.createElement("IMG");
-                title = document.createElement("P");
-                lineBreak = document.createElement("BR");
-                titleText = document.createTextNode(sel.title);
-
-                icon.id = sel.id;
-                icon.className = "box";
-                thumbnail.className = "thumbImg";
-                thumbnail.src = sel.favIconUrl;
-                title.className = "title";
-
-                icon.appendChild(thumbnail);
-                icon.appendChild(title);
-                title.appendChild(titleText);
-                listZone.appendChild(icon);
-                listZone.appendChild(lineBreak);
-            }
-            errHandler.style.display = "none";
-            clearNodes(errHandler);
-        } else {
-            if (selection[0] != undefined) {
-                errHandler.style.display = "none";
-                clearNodes(errHandler);
-                loadSelTab(selection[0].id);
-            } else {
-                errHandler.style.display = "block";
-                errHandler.appendChild(notFoundText);
-            }
-        }
-    }
-}
-
-function loadSelTab(id) {
-    browser.tabs.update(id, {
-        active: true
-    });
-}
-
-function clearNodes(targetNode) {
-    while (targetNode.firstChild) {
-        targetNode.removeChild(targetNode.firstChild);
-    }
-}
-
-function searchTabs() { tabQuery.then(logTabs, onError); }
-function onError(error) { console.log(`Error: ${error}`); }