Bug 735214 - [inspector] Give the focus to the toolbar and make the buttons tabbable. (Part B - tabbable); r=rcampbell
authorPaul Rouget <paul@mozilla.com>
Wed, 04 Apr 2012 13:57:55 +0200
changeset 91836 01a50802f2d7af05258359a1282eb8394a6a465b
parent 91835 f95f46afce27e36177cff467933ed82582913a52
child 91837 0e71d6eec4d367757b4bd28eedf4fd09a64524ee
push id1
push userroot
push dateMon, 20 Oct 2014 17:29:22 +0000
reviewersrcampbell
bugs735214
milestone14.0a1
Bug 735214 - [inspector] Give the focus to the toolbar and make the buttons tabbable. (Part B - tabbable); r=rcampbell
browser/base/content/browser.xul
browser/devtools/highlighter/inspector.jsm
browser/devtools/highlighter/test/browser_inspector_tab_switch.js
browser/devtools/tilt/test/browser_tilt_04_initialization.js
browser/themes/gnomestripe/browser.css
browser/themes/gnomestripe/devtools/common.css
browser/themes/pinstripe/browser.css
browser/themes/pinstripe/devtools/common.css
browser/themes/winstripe/browser.css
browser/themes/winstripe/devtools/common.css
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -1006,31 +1006,34 @@
       <toolbarbutton id="inspector-inspect-toolbutton"
                      class="devtools-toolbarbutton"
                      command="Inspector:Inspect"/>
       <toolbarbutton id="inspector-treepanel-toolbutton"
                      class="devtools-toolbarbutton"
                      label="&htmlPanel.label;"
                      accesskey="&htmlPanel.accesskey;"
                      tooltiptext="&htmlPanel.tooltiptext;"
+                     tabindex="0"
                      command="Inspector:HTMLPanel"/>
       <arrowscrollbox id="inspector-breadcrumbs"
                       flex="1" orient="horizontal"
                       clicktoscroll="true"/>
       <hbox id="inspector-tools">
         <toolbarbutton id="inspector-3D-button"
                        class="devtools-toolbarbutton"
                        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>
 #ifndef XP_MACOSX
       <toolbarbutton id="highlighter-closebutton"
                      oncommand="InspectorUI.closeInspectorUI(false);"
                      tooltiptext="&inspectCloseButton.tooltiptext;"/>
 #endif
--- a/browser/devtools/highlighter/inspector.jsm
+++ b/browser/devtools/highlighter/inspector.jsm
@@ -387,16 +387,19 @@ InspectorUI.prototype = {
 
     this.chromeWin.addEventListener("keypress", this, false);
 
     // initialize the highlighter
     this.highlighter = new Highlighter(this.chromeWin);
 
     this.setupNavigationKeys();
     this.highlighterReady();
+
+    // Focus the first focusable element in the toolbar
+    this.chromeDoc.commandDispatcher.advanceFocusIntoSubtree(this.toolbar);
   },
 
   /**
    * Register the Rule View in the Sidebar.
    */
   registerRuleView: function IUI_registerRuleView()
   {
     let isOpen = this.isRuleViewOpen.bind(this);
@@ -742,17 +745,16 @@ InspectorUI.prototype = {
       this.startInspecting();
       this.highlighter.unlock();
     } else {
       this.highlighter.lock();
     }
 
     Services.obs.notifyObservers(null, INSPECTOR_NOTIFICATIONS.STATE_RESTORED, null);
 
-    this.win.focus();
     this.highlighter.highlight();
 
     if (this.store.getValue(this.winID, "htmlPanelOpen")) {
       this.treePanel.open();
     }
 
     if (this.store.getValue(this.winID, "sidebarOpen")) {
       this.showSidebar();
@@ -2101,16 +2103,22 @@ HTMLBreadcrumbs.prototype = {
   {
     let button = this.IUI.chromeDoc.createElement("button");
     let inspector = this.IUI;
     button.appendChild(this.prettyPrintNodeAsXUL(aNode));
     button.className = "inspector-breadcrumbs-button";
 
     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");
     };
 
     button.onclick = (function _onBreadcrumbsRightClick(aEvent) {
       if (aEvent.button == 2) {
         this.openSiblingMenu(button, aNode);
--- a/browser/devtools/highlighter/test/browser_inspector_tab_switch.js
+++ b/browser/devtools/highlighter/test/browser_inspector_tab_switch.js
@@ -110,16 +110,17 @@ function inspectorUIOpen2()
   ok(InspectorUI.inspecting, "Inspector is highlighting");
   ok(!InspectorUI.treePanel.isOpen(), "Inspector Tree Panel is not open");
   is(InspectorUI.store.length, 2, "Inspector.store.length = 2");
 
   // Disable highlighting.
   InspectorUI.toggleInspection();
   ok(!InspectorUI.inspecting, "Inspector is not highlighting");
 
+
   // Switch back to tab 1.
   executeSoon(function() {
     Services.obs.addObserver(inspectorFocusTab1,
       InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
     gBrowser.selectedTab = tab1;
   });
 }
 
@@ -183,20 +184,21 @@ function inspectorFocusTab2()
 
   // Make sure the inspector is still open.
   ok(!InspectorUI.inspecting, "Inspector is not highlighting");
   ok(!InspectorUI.treePanel.isOpen(), "Inspector Tree Panel is not open");
   ok(!InspectorUI.isSidebarOpen, "Inspector Sidebar is not open");
   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();
 
     // Switch back to tab 1.
     Services.obs.addObserver(inspectorSecondFocusTab1,
       InspectorUI.INSPECTOR_NOTIFICATIONS.TREEPANELREADY, false);
     gBrowser.selectedTab = tab1;
   });
--- a/browser/devtools/tilt/test/browser_tilt_04_initialization.js
+++ b/browser/devtools/tilt/test/browser_tilt_04_initialization.js
@@ -11,42 +11,39 @@ function test() {
     info("Skipping initialization test because WebGL isn't supported.");
     return;
   }
 
   waitForExplicitFinish();
 
   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.");
       },
       onTiltOpen: function(instance)
       {
         is(document.activeElement, instance.presenter.canvas,
           "The visualizer canvas should be focused on initialization.");
 
         ok(Tilt.visualizers[id] instanceof TiltVisualizer,
           "A new instance of the visualizer wasn't created properly.");
         ok(Tilt.visualizers[id].isInitialized(),
           "The new instance of the visualizer wasn't initialized properly.");
       },
       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.");
       },
       onEnd: function()
       {
         gBrowser.removeCurrentTab();
         finish();
--- a/browser/themes/gnomestripe/browser.css
+++ b/browser/themes/gnomestripe/browser.css
@@ -2190,16 +2190,20 @@ html|*#highlighter-nodeinfobar-pseudo-cl
   /* The content of the button can be larger than the button */
   overflow: hidden;
   min-height: 25px;
 
   margin: 0 -11px 0 0;
   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%);
 }
 
 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id {
   color: hsl(205,100%,70%);
 }
 
--- a/browser/themes/gnomestripe/devtools/common.css
+++ b/browser/themes/gnomestripe/devtools/common.css
@@ -52,16 +52,21 @@
   text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
   border: 1px solid hsla(210,8%,5%,.45);
   border-radius: 3px;
   background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
   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);
   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;
 }
 
 .devtools-toolbarbutton:not([checked]):hover:active {
   border-color: hsla(210,8%,5%,.6);
   background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
   box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
--- a/browser/themes/pinstripe/browser.css
+++ b/browser/themes/pinstripe/browser.css
@@ -2929,16 +2929,20 @@ html|*#highlighter-nodeinfobar-pseudo-cl
   /* The content of the button can be larger than the button */
   overflow: hidden;
   min-height: 25px;
 
   margin: 0 -11px 0 0;
   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%);
 }
 
 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id {
   color: hsl(205,100%,70%);
 }
 
--- a/browser/themes/pinstripe/devtools/common.css
+++ b/browser/themes/pinstripe/devtools/common.css
@@ -53,16 +53,21 @@
   color: hsl(210,30%,85%);
   text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
   border: 1px solid hsla(210,8%,5%,.45);
   border-radius: @toolbarbuttonCornerRadius@;
   background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
   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;
 }
 
 .devtools-toolbarbutton:not([label]) {
   min-width: 32px;
 }
 
--- a/browser/themes/winstripe/browser.css
+++ b/browser/themes/winstripe/browser.css
@@ -2857,16 +2857,20 @@ html|*#highlighter-nodeinfobar-pseudo-cl
   max-width: 85px;
   /* The content of the button can be larger than the button */
   overflow: hidden;
   min-height: 25px;
   margin: 0 -11px 0 0;
   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%);
 }
 
 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id {
   color: hsl(200,100%,70%);
 }
 
--- a/browser/themes/winstripe/devtools/common.css
+++ b/browser/themes/winstripe/devtools/common.css
@@ -52,16 +52,21 @@
   text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
   border: 1px solid hsla(211,68%,6%,.5);
   border-radius: 3px;
   background: -moz-linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2)) padding-box;
   box-shadow: 0 1px 0 hsla(209,29%,72%,.15) inset, 0 0 0 1px hsla(209,29%,72%,.1) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
   -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;
 }
 
 .devtools-toolbarbutton:not([label]) {
   min-width: 32px;
 }