fix: Add a hotkey to toggle focus the tab searchbox. 🔥

Use ctrl-shift-k/cmd-shift-k to toggle TC open and closed.
Also, use it to focus the search bar.

Reviewer: @ericawright
Fixes #95.
Merge pull request #539 from bwinton/keycombo

main.js

@@ -45,6 +45,7 @@ const {mount, unmount} = require('sdk/uri/resource');
 const {viewFor} = require('sdk/view/core');
 const {browserWindows} = require('sdk/windows');
 const {isBrowser, isDocumentLoaded} = require('sdk/window/utils');
+const {Hotkey} = require('sdk/hotkeys');
 
 const {Cc, Ci, Cu} = require('chrome');
 const windowWatcher = Cc['@mozilla.org/embedcomp/window-watcher;1'].
@@ -56,6 +57,7 @@ const {addVerticalTabs} = require('./verticaltabs');
 let self = require('sdk/self');
 const RESOURCE_HOST = 'tabcenter';
 
+let hotkey;
 
 function b64toBlob(win, b64Data, contentType, sliceSize) {
   contentType = contentType || '';
@@ -157,6 +159,32 @@ exports.main = function (options, callbacks) {
     }
   });
 
+  hotkey = Hotkey({
+    combo: 'accel-shift-k',
+    onPress: function () {
+      let window = viewFor(browserWindows.activeWindow);
+      let input = window.document.getElementById('find-input');
+      if (input) {
+        let mainWindow = window.document.getElementById('main-window');
+        let sidebar = window.document.getElementById('verticaltabs-box');
+        if (mainWindow.getAttribute('tabspinned') === 'true' &&
+          input.style.visibility === 'collapse') {
+          return;
+        }
+        if (sidebar.getAttribute('search_expanded') === 'true') {
+          sidebar.removeAttribute('search_expanded');
+          input.blur();
+        } else {
+          sidebar.setAttribute('search_expanded', 'true');
+          window.setTimeout(() => {
+            input.focus();
+          }, 500);
+        }
+      }
+    }
+  });
+
+
   setInterval(sendPayload, 24 * 60 * 60 * 1000);  // Every 24h.
   //setInterval(sendPayload, 20*1000);  // Every 20s for debugging.
 };
@@ -170,6 +198,8 @@ exports.onUnload = function (reason) {
     return;
   }
 
+  hotkey.destroy();
+
   // Shutdown the VerticalTabs object for each window.
   for (let window of browserWindows) {
     let win = viewFor(window);

skin/base.css

@@ -202,7 +202,8 @@
   visibility: collapse;
 }
 
-#verticaltabs-box[expanded="true"] {
+#verticaltabs-box[expanded="true"],
+#verticaltabs-box[search_expanded="true"] {
   width: 260px;
   box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1), inset 0 0 10px hsla(0, 0%, 0%, 0);
 }
@@ -307,11 +308,11 @@
   display: none;
 }
 
-#verticaltabs-box:not([expanded="true"]) #find-input {
+#verticaltabs-box:not([expanded="true"]):not([search_expanded="true"]) #find-input {
   visibility: collapse !important;
 }
 
-#verticaltabs-box:not([expanded="true"]) #new-tab-spacer {
+#verticaltabs-box:not([expanded="true"]):not([search_expanded="true"]) #new-tab-spacer {
   visibility: visible !important;
 }
 
@@ -328,6 +329,7 @@
 }
 
 #verticaltabs-box[expanded="true"] #pin-button,
+#verticaltabs-box[search_expanded="true"] #pin-button,
 #main-window[tabspinned="true"] #pin-button {
   opacity: 1;
 }
@@ -492,6 +494,7 @@
 }
 
 #verticaltabs-box[expanded="false"] .tabbrowser-tab[pinned],
+#verticaltabs-box[search_expanded="false"] .tabbrowser-tab[pinned],
 #main-window[tabspinned="false"] .tabbrowser-tab[pinned] {
   background-position: calc(100% + 12px) center !important;
   transition-delay: 350ms !important;
@@ -500,6 +503,7 @@
 }
 
 #verticaltabs-box[expanded="true"] .tabbrowser-tab[pinned],
+#verticaltabs-box[search_expanded="true"] .tabbrowser-tab[pinned],
 #main-window[tabspinned="true"] .tabbrowser-tab[pinned] {
   background-image: url("resource://tabcenter/skin/glyph-pin-pinned-12.svg") !important;
   background-position: calc(100% - 12px) center !important;
@@ -508,6 +512,7 @@
 }
 
 #verticaltabs-box[brighttext][expanded="true"] .tabbrowser-tab[pinned],
+#verticaltabs-box[brighttext][search_expanded="true"] .tabbrowser-tab[pinned],
 #main-window[brighttext][tabspinned="true"] .tabbrowser-tab[pinned] {
   background-image: url("resource://tabcenter/skin/glyph-pin-pinned-inverted-12.svg") !important;
 }

verticaltabs.js

@@ -387,6 +387,8 @@ VerticalTabs.prototype = {
         } else {
           window.VerticalTabs.stats.tab_center_unpinned++;
           button.setAttribute('tooltiptext', 'Keep sidebar open');
+          document.getElementById('verticaltabs-box').removeAttribute('search_expanded');
+          document.getElementById('find-input').blur();
         }
         window.VerticalTabs.resizeFindInput();
         window.VerticalTabs.resizeTabs();