Bug 735214 - [inspector] Give the focus to the toolbar and make the buttons tabbable. (Part B - tabbable); r=rcampbell

browser/base/content/browser.xul

@@ -1011,6 +1011,7 @@
                      label="&htmlPanel.label;"
                      accesskey="&htmlPanel.accesskey;"
                      tooltiptext="&htmlPanel.tooltiptext;"
+                     tabindex="0"
                      command="Inspector:HTMLPanel"/>
       <arrowscrollbox id="inspector-breadcrumbs"
                       flex="1" orient="horizontal"
@@ -1021,11 +1022,13 @@
                        hidden="true"
                        label="&inspect3DViewButton.label;"
                        accesskey="&inspect3DViewButton.accesskey;"
+                       tabindex="0"
                        command="Inspector:Tilt"/>
         <toolbarbutton id="inspector-style-button"
                        class="devtools-toolbarbutton"
                        label="&inspectStyleButton.label;"
                        accesskey="&inspectStyleButton.accesskey;"
+                       tabindex="0"
                        command="Inspector:Sidebar"/>
         <!-- registered tools go here -->
       </hbox>

browser/devtools/highlighter/inspector.jsm

@@ -392,6 +392,9 @@ InspectorUI.prototype = {
 
     this.setupNavigationKeys();
     this.highlighterReady();
+
+    // Focus the first focusable element in the toolbar
+    this.chromeDoc.commandDispatcher.advanceFocusIntoSubtree(this.toolbar);
   },
 
   /**
@@ -747,7 +750,6 @@ InspectorUI.prototype = {
 
     Services.obs.notifyObservers(null, INSPECTOR_NOTIFICATIONS.STATE_RESTORED, null);
 
-    this.win.focus();
     this.highlighter.highlight();
 
     if (this.store.getValue(this.winID, "htmlPanelOpen")) {
@@ -2106,6 +2108,12 @@ HTMLBreadcrumbs.prototype = {
 
     button.setAttribute("tooltiptext", this.prettyPrintNodeAsText(aNode));
 
+    button.onkeypress = function onBreadcrumbsKeypress(e) {
+      if (e.charCode == Ci.nsIDOMKeyEvent.DOM_VK_SPACE ||
+          e.keyCode == Ci.nsIDOMKeyEvent.DOM_VK_RETURN)
+        button.click();
+    }
+
     button.onBreadcrumbsClick = function onBreadcrumbsClick() {
       inspector.stopInspecting();
       inspector.select(aNode, true, true, "breadcrumbs");

browser/devtools/highlighter/test/browser_inspector_tab_switch.js

@@ -115,6 +115,7 @@ function inspectorUIOpen2()
   InspectorUI.toggleInspection();
   ok(!InspectorUI.inspecting, "Inspector is not highlighting");
 
+
   // Switch back to tab 1.
   executeSoon(function() {
     Services.obs.addObserver(inspectorFocusTab1,
@@ -188,10 +189,11 @@ function inspectorFocusTab2()
   is(InspectorUI.store.length, 2, "Inspector.store.length is 2");
   isnot(InspectorUI.selection, div, "selection does not match the div element");
 
-  // Make sure keybindings still sork
-  synthesizeKeyFromKeyTag("key_inspect");
 
   executeSoon(function() {
+    // Make sure keybindings still work
+    synthesizeKeyFromKeyTag("key_inspect");
+
     ok(InspectorUI.inspecting, "Inspector is highlighting");
     InspectorUI.toggleInspection();
 

browser/devtools/tilt/test/browser_tilt_04_initialization.js

@@ -16,15 +16,12 @@ function test() {
 
   createTab(function() {
     let id = TiltUtils.getWindowId(gBrowser.selectedBrowser.contentWindow);
-    let initialActiveElement;
 
     is(id, Tilt.currentWindowId,
       "The unique window identifiers should match for the same window.");
 
     createTilt({
       onInspectorOpen: function() {
-        initialActiveElement = document.activeElement;
-
         is(Tilt.visualizers[id], null,
           "A instance of the visualizer shouldn't be initialized yet.");
       },
@@ -40,8 +37,8 @@ function test() {
       },
       onTiltClose: function()
       {
-        is(document.activeElement, initialActiveElement,
-          "The focus wasn't correctly given back to the initial element.");
+        is(document.activeElement, gBrowser.selectedBrowser,
+          "The focus wasn't correctly given back to the selectedBrowser.");
 
         is(Tilt.visualizers[id], null,
           "The current instance of the visualizer wasn't destroyed properly.");

browser/themes/gnomestripe/browser.css

@@ -2195,6 +2195,10 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
   padding: 0 9px;
 }
 
+.inspector-breadcrumbs-button:-moz-focusring > label {
+  border-bottom: 1px dotted hsla(210,30%,85%,0.4);
+}
+
 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag {
   color: hsl(208,100%,60%);
 }

browser/themes/gnomestripe/devtools/common.css

@@ -57,6 +57,11 @@
   margin: 0 3px;
 }
 
+.devtools-toolbarbutton:-moz-focusring {
+  outline: 1px dotted hsla(210,30%,85%,0.4);
+  outline-offset: -4px;
+}
+
 .devtools-toolbarbutton:not([label]) {
   min-width: 32px;
 }

browser/themes/pinstripe/browser.css

@@ -2934,6 +2934,10 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
   padding: 0 9px;
 }
 
+.inspector-breadcrumbs-button:-moz-focusring > label {
+  border-bottom: 1px dotted hsla(210,30%,85%,0.4);
+}
+
 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag {
   color: hsl(208,100%,60%);
 }

browser/themes/pinstripe/devtools/common.css

@@ -58,6 +58,11 @@
   box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
 }
 
+.devtools-toolbarbutton:-moz-focusring {
+  outline: 1px dotted hsla(210,30%,85%,0.4);
+  outline-offset: -4px;
+}
+
 .devtools-toolbarbutton > .toolbarbutton-text {
   margin: 1px 6px;
 }

browser/themes/winstripe/browser.css

@@ -2862,6 +2862,10 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
   padding: 0 9px;
 }
 
+.inspector-breadcrumbs-button:-moz-focusring > label {
+  border-bottom: 1px dotted hsla(210,30%,85%,0.4);
+}
+
 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag {
   color: hsl(200,100%,60%);
 }

browser/themes/winstripe/devtools/common.css

@@ -57,6 +57,11 @@
   -moz-margin-end: 3px;
 }
 
+.devtools-toolbarbutton:-moz-focusring {
+  outline: 1px dotted hsla(210,30%,85%,0.4);
+  outline-offset: -4px;
+}
+
 .devtools-toolbarbutton > .toolbarbutton-icon {
   margin: 0;
 }