Merge pull request #8856 from MarcelGerber/extman-navigate-tabs

ingorichter · ingorichter · commit 6b5437c841ae · 2014-09-15T13:55:19.000-07:00
Navigate through Extension Manager tabs via Ctrl-(Shift)-Tab
diff --git a/src/extensibility/ExtensionManagerDialog.js b/src/extensibility/ExtensionManagerDialog.js
@@ -40,6 +40,7 @@ define(function (require, exports, module) {
         InstallExtensionDialog      = require("extensibility/InstallExtensionDialog"),
         AppInit                     = require("utils/AppInit"),
         Async                       = require("utils/Async"),
+        KeyEvent                    = require("utils/KeyEvent"),
         ExtensionManager            = require("extensibility/ExtensionManager"),
         ExtensionManagerView        = require("extensibility/ExtensionManagerView").ExtensionManagerView,
         ExtensionManagerViewModel   = require("extensibility/ExtensionManagerViewModel");
@@ -304,16 +305,36 @@ define(function (require, exports, module) {
         $dlg = dialog.getElement();
         $search = $(".search", $dlg);
         $searchClear = $(".search-clear", $dlg);
-        
+
+        function setActiveTab($tab) {
+            models[_activeTabIndex].scrollPos = $(".modal-body", $dlg).scrollTop();
+            $tab.tab("show");
+            $(".modal-body", $dlg).scrollTop(models[_activeTabIndex].scrollPos || 0);
+            $searchClear.click();
+        }
+
         // Dialog tabs
         $dlg.find(".nav-tabs a")
             .on("click", function (event) {
-                models[_activeTabIndex].scrollPos = $(".modal-body", $dlg).scrollTop();
-                $(this).tab("show");
-                $(".modal-body", $dlg).scrollTop(models[_activeTabIndex].scrollPos || 0);
-                $searchClear.click();
+                setActiveTab($(this));
             });
-        
+
+        // navigate through tabs via Ctrl-(Shift)-Tab
+        $dlg.on("keyup", function (event) {
+            if (event.keyCode === KeyEvent.DOM_VK_TAB && event.ctrlKey) {
+                var $tabs = $(".nav-tabs a", $dlg),
+                    tabIndex = _activeTabIndex;
+
+                if (event.shiftKey) {
+                    tabIndex--;
+                } else {
+                    tabIndex++;
+                }
+                tabIndex %= $tabs.length;
+                setActiveTab($tabs.eq(tabIndex));
+            }
+        });
+
         // Update & hide/show the notification overlay on a tab's icon, based on its model's notifyCount
         function updateNotificationIcon(index) {
             var model = models[index],
diff --git a/src/htmlContent/extension-manager-dialog.html b/src/htmlContent/extension-manager-dialog.html
@@ -1,4 +1,4 @@
-<div class="extension-manager-dialog modal">
+<div class="extension-manager-dialog modal" tabindex="-1">
     <div class="modal-header">
         <ul class="nav nav-tabs">
             {{#showRegistry}}

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div class="extension-manager-dialog modal">`
	`1`	`+<div class="extension-manager-dialog modal" tabindex="-1">`
`2`	`2`	`<div class="modal-header">`
`3`	`3`	`<ul class="nav nav-tabs">`
`4`	`4`	`{{#showRegistry}}`