merge conflict with mdn/chrome-browser and list tabs

tabs-tabs-tabs/tabs.html

@@ -28,10 +28,13 @@
 
     <div class="panel-section-separator"></div>
 
-
     <a href="#" id="tabs-add-zoom">Zoom in</a><br>
     <a href="#" id="tabs-default-zoom">Reset zoom</a><br>
-    <a href="#" id="tabs-decrease-zoom">Zoom out</a>
+    <a href="#" id="tabs-decrease-zoom">Zoom out</a><br>
+
+    <div class="panel-section-separator"></div>
+    
+    <a href="#" id="tabs-highlight">Highlight (only supported by Chrome)</a>
 
     <div class="panel-section-separator"></div>
 

tabs-tabs-tabs/tabs.js

@@ -12,20 +12,21 @@ function firstUnpinnedTab(tabs) {
   }
 }
 
+/**
+ * listTabs to switch to
+ */
 function listTabs() {
-  chrome.tabs.query({
-    currentWindow: true
-  }, function(tabs) {
-    var tabsList = document.getElementById('tabs-list');
-    var currentTabs = document.createDocumentFragment();
-    var limit = 5;
-    var counter = 0;
+  getCurrentWindowTabs().then((tabs) => {
+    let tabsList = document.getElementById('tabs-list');
+    let currentTabs = document.createDocumentFragment();
+    let limit = 5;
+    let counter = 0;
 
-    tabsList.innerHTML = '';
+    tabsList.textContent = '';
 
-    for (var tab of tabs) {
+    for (let tab of tabs) {
       if (!tab.active && counter <= limit) {
-        var tabLink = document.createElement('a');
+        let tabLink = document.createElement('a');
 
         tabLink.textContent = tab.title || tab.id;
         tabLink.setAttribute('href', tab.id);
@@ -40,9 +41,15 @@ function listTabs() {
   });
 }
 
+document.addEventListener("DOMContentLoaded", listTabs);
+
+function getCurrentWindowTabs() {
+  return browser.tabs.query({currentWindow: true});
+}
+
 document.addEventListener("click", function(e) {
   function callOnActiveTab(callback) {
-    chrome.tabs.query({currentWindow: true}, function(tabs) {
+    getCurrentWindowTabs().then((tabs) => {
       for (var tab of tabs) {
         if (tab.active) {
           callback(tab, tabs);
@@ -57,7 +64,8 @@ document.addEventListener("click", function(e) {
       if (!tab.pinned) {
         index = firstUnpinnedTab(tabs);
       }
-      chrome.tabs.move([tab.id], {index});
+      console.log(`moving ${tab.id} to ${index}`)
+      browser.tabs.move([tab.id], {index});
     });
   }
 
@@ -68,30 +76,30 @@ document.addEventListener("click", function(e) {
         var lastPinnedTab = Math.max(0, firstUnpinnedTab(tabs) - 1);
         index = lastPinnedTab;
       }
-      chrome.tabs.move([tab.id], {index});
+      browser.tabs.move([tab.id], {index});
     });
   }
 
   else if (e.target.id === "tabs-duplicate") {
     callOnActiveTab((tab) => {
-      chrome.tabs.duplicate(tab.id);
+      browser.tabs.duplicate(tab.id);
     });
   }
 
   else if (e.target.id === "tabs-reload") {
     callOnActiveTab((tab) => {
-      chrome.tabs.reload(tab.id);
+      browser.tabs.reload(tab.id);
     });
   }
 
   else if (e.target.id === "tabs-remove") {
     callOnActiveTab((tab) => {
-      chrome.tabs.remove(tab.id);
+      browser.tabs.remove(tab.id);
     });
   }
 
   else if (e.target.id === "tabs-create") {
-    chrome.tabs.create({url: "https://developer.mozilla.org/en-US/Add-ons/WebExtensions"});
+    browser.tabs.create({url: "https://developer.mozilla.org/en-US/Add-ons/WebExtensions"});
   }
 
   else if (e.target.id === "tabs-alertinfo") {
@@ -106,7 +114,8 @@ document.addEventListener("click", function(e) {
 
   else if (e.target.id === "tabs-add-zoom") {
     callOnActiveTab((tab) => {
-      chrome.tabs.getZoom(tab.id, function(zoomFactor){
+      var gettingZoom = browser.tabs.getZoom(tab.id);
+      gettingZoom.then((zoomFactor) => {
         //the maximum zoomFactor is 3, it can't go higher
         if (zoomFactor >= MAX_ZOOM) {
           alert("Tab zoom factor is already at max!");
@@ -115,7 +124,7 @@ document.addEventListener("click", function(e) {
           //if the newZoomFactor is set to higher than the max accepted
           //it won't change, and will never alert that it's at maximum
           newZoomFactor = newZoomFactor > MAX_ZOOM ? MAX_ZOOM : newZoomFactor;
-          chrome.tabs.setZoom(tab.id, newZoomFactor);
+          browser.tabs.setZoom(tab.id, newZoomFactor);
         }
       });
     });
@@ -123,7 +132,8 @@ document.addEventListener("click", function(e) {
 
   else if (e.target.id === "tabs-decrease-zoom") {
     callOnActiveTab((tab) => {
-      chrome.tabs.getZoom(tab.id, function(zoomFactor){
+      var gettingZoom = browser.tabs.getZoom(tab.id);
+      gettingZoom.then((zoomFactor) => {
         //the minimum zoomFactor is 0.3, it can't go lower
         if (zoomFactor <= MIN_ZOOM) {
           alert("Tab zoom factor is already at minimum!");
@@ -132,7 +142,7 @@ document.addEventListener("click", function(e) {
           //if the newZoomFactor is set to lower than the min accepted
           //it won't change, and will never alert that it's at minimum
           newZoomFactor = newZoomFactor < MIN_ZOOM ? MIN_ZOOM : newZoomFactor;
-          chrome.tabs.setZoom(tab.id, newZoomFactor);
+          browser.tabs.setZoom(tab.id, newZoomFactor);
         }
       });
     });
@@ -140,15 +150,23 @@ document.addEventListener("click", function(e) {
 
   else if (e.target.id === "tabs-default-zoom") {
     callOnActiveTab((tab) => {
-      chrome.tabs.getZoom(tab.id, function(zoomFactor){
+      var gettingZoom = browser.tabs.getZoom(tab.id);
+      gettingZoom.then((zoomFactor) => {
         if (zoomFactor == DEFAULT_ZOOM) {
           alert("Tab zoom is already at the default zoom factor");
         } else {
-          chrome.tabs.setZoom(tab.id, DEFAULT_ZOOM);
+          browser.tabs.setZoom(tab.id, DEFAULT_ZOOM);
         }
       });
     });
   }
+  // Currently (11/2/2016) only supported by Chrome
+  else if (e.target.id === "tabs-highlight") { // highlights current tab and next tab (cycles back to first tab if current tab is the last one)
+    callOnActiveTab((tab, tabs) => {
+      next = (tab.index+1) % tabs.length;
+      browser.tabs.highlight({tabs:[tab.index, next]});
+    });
+  }
 
   else if (e.target.classList.contains('switch-tabs')) {
     var tabId = +e.target.getAttribute('href');
@@ -169,4 +187,20 @@ document.addEventListener("click", function(e) {
   e.preventDefault();
 });
 
-document.addEventListener("DOMContentLoaded", listTabs);
+//onRemoved listener. fired when tab is removed
+browser.tabs.onRemoved.addListener(function(tabId, removeInfo){
+  console.log(`The tab with id: ${tabId}, is closing`);
+
+  if(removeInfo.isWindowClosing) {
+    console.log(`Its window is also closing.`);
+  } else {
+    console.log(`Its window is not closing`);
+  }
+});
+
+//onMoved listener. fired when tab is moved into the same window
+browser.tabs.onMoved.addListener(function(tabId, moveInfo){
+  var startIndex = moveInfo.fromIndex;
+  var endIndex = moveInfo.toIndex;
+  console.log(`Tab with id: ${tabId} moved from index: ${startIndex} to index: ${endIndex}`);
+});