Merge pull request #135 from iampeterbanjo/tabs-tabs-switch-tabs

add tabs-tabs-tabs example to show switching active tabs

tabs-tabs-tabs/tabs.css

@@ -7,6 +7,14 @@ a {
   display: inline-block;
 }
 
+.switch-tabs {
+  padding-left: 10px;
+}
+
+.switch-tabs a {
+  display: block;
+}
+
 .panel {
   margin: 5px;
 }

tabs-tabs-tabs/tabs.html

@@ -36,6 +36,13 @@
     
     <a href="#" id="tabs-highlight">Highlight (only supported by Chrome)</a>
 
+    <div class="panel-section-separator"></div>
+
+    <div class="switch-tabs">
+      <p>Switch to tab</p>
+
+      <div id="tabs-list"></div>
+    </div>
   </div>
 
   <script src="tabs.js"></script>

tabs-tabs-tabs/tabs.js

@@ -12,6 +12,37 @@ function firstUnpinnedTab(tabs) {
   }
 }
 
+/**
+ * listTabs to switch to
+ */
+function listTabs() {
+  getCurrentWindowTabs().then((tabs) => {
+    let tabsList = document.getElementById('tabs-list');
+    let currentTabs = document.createDocumentFragment();
+    let limit = 5;
+    let counter = 0;
+
+    tabsList.textContent = '';
+
+    for (let tab of tabs) {
+      if (!tab.active && counter <= limit) {
+        let tabLink = document.createElement('a');
+
+        tabLink.textContent = tab.title || tab.id;
+        tabLink.setAttribute('href', tab.id);
+        tabLink.classList.add('switch-tabs');
+        currentTabs.appendChild(tabLink);
+      }
+
+      counter += 1;
+    }
+
+    tabsList.appendChild(currentTabs);
+  });
+}
+
+document.addEventListener("DOMContentLoaded", listTabs);
+
 function getCurrentWindowTabs() {
   return browser.tabs.query({currentWindow: true});
 }
@@ -137,6 +168,22 @@ document.addEventListener("click", function(e) {
     });
   }
 
+  else if (e.target.classList.contains('switch-tabs')) {
+    var tabId = +e.target.getAttribute('href');
+
+    chrome.tabs.query({
+      currentWindow: true
+    }, function(tabs) {
+      for (var tab of tabs) {
+        if (tab.id === tabId) {
+          chrome.tabs.update(tabId, {
+              active: true
+          });
+        }
+      }
+    });
+  }
+
   e.preventDefault();
 });