Bug 1189472 - [Rule View] Pseudo-class panel and checkboxes should only be tab focusable when the panel is opened r=bgrins
authorGabriel Luong <gabriel.luong@gmail.com>
Thu, 30 Jul 2015 19:02:22 -0700
changeset 287167 a25357fa76f9fd637c9cb521b3fcff36c2f969b1
parent 287166 3e37f8f832995c9a28691b3f003bc5eccfa4b5dc
child 287168 ca53d4297f02919e8b4b79f7571d339d371c52db
child 287264 a64d71a817c027e9ffd1de345316a5fb02ada16f
push id5067
push userraliiev@mozilla.com
push dateMon, 21 Sep 2015 14:04:52 +0000
treeherdermozilla-beta@14221ffe5b2f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1189472
milestone42.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1189472 - [Rule View] Pseudo-class panel and checkboxes should only be tab focusable when the panel is opened r=bgrins
browser/devtools/styleinspector/cssruleview.xhtml
browser/devtools/styleinspector/rule-view.js
browser/devtools/styleinspector/test/browser_ruleview_pseudo_lock_options.js
--- a/browser/devtools/styleinspector/cssruleview.xhtml
+++ b/browser/devtools/styleinspector/cssruleview.xhtml
@@ -43,20 +43,20 @@
           <input id="ruleview-searchbox"
                  class="devtools-searchinput devtools-rule-searchbox"
                  type="search" placeholder="&filterStylesPlaceholder;"/>
           <button id="ruleview-searchinput-clear" class="devtools-searchinput-clear"></button>
         </div>
         <button id="ruleview-add-rule-button" title="&addRuleButtonTooltip;" class="devtools-button"></button>
         <button id="pseudo-class-panel-toggle" title="&togglePseudoClassPanel;" class="devtools-button"></button>
       </div>
-      <div id="pseudo-class-panel" class="devtools-toolbar" hidden="true">
-        <label><input id="pseudo-hover-toggle" type="checkbox" value=":hover" />:hover</label>
-        <label><input id="pseudo-active-toggle" type="checkbox" value=":active" />:active</label>
-        <label><input id="pseudo-focus-toggle" type="checkbox" value=":focus" />:focus</label>
+      <div id="pseudo-class-panel" class="devtools-toolbar" hidden="true" tabindex="-1">
+        <label><input id="pseudo-hover-toggle" type="checkbox" value=":hover" tabindex="-1" />:hover</label>
+        <label><input id="pseudo-active-toggle" type="checkbox" value=":active" tabindex="-1" />:active</label>
+        <label><input id="pseudo-focus-toggle" type="checkbox" value=":focus" tabindex="-1" />:focus</label>
       </div>
     </div>
 
     <div id="ruleview-container" class="ruleview devtools-monospace">
     </div>
 
   </body>
 </html>
--- a/browser/devtools/styleinspector/rule-view.js
+++ b/browser/devtools/styleinspector/rule-view.js
@@ -2293,19 +2293,26 @@ CssRuleView.prototype = {
 
   /**
    * Called when the pseudo class panel button is clicked and toggles
    * the display of the pseudo class panel.
    */
   _onTogglePseudoClassPanel: function() {
     if (this.pseudoClassPanel.hidden) {
       this.pseudoClassToggle.setAttribute("checked", "true");
+      this.hoverCheckbox.setAttribute("tabindex", "0");
+      this.activeCheckbox.setAttribute("tabindex", "0");
+      this.focusCheckbox.setAttribute("tabindex", "0");
     } else {
       this.pseudoClassToggle.removeAttribute("checked");
+      this.hoverCheckbox.setAttribute("tabindex", "-1");
+      this.activeCheckbox.setAttribute("tabindex", "-1");
+      this.focusCheckbox.setAttribute("tabindex", "-1");
     }
+
     this.pseudoClassPanel.hidden = !this.pseudoClassPanel.hidden;
   },
 
   /**
    * Called when a pseudo class checkbox is clicked and toggles
    * the pseudo class for the current selected element.
    */
   _onTogglePseudoClass: function(event) {
--- a/browser/devtools/styleinspector/test/browser_ruleview_pseudo_lock_options.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_pseudo_lock_options.js
@@ -24,81 +24,112 @@ let TEST_URI = [
   "<div>test div</div>"
 ].join("\n");
 
 add_task(function*() {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
   yield selectNode("div", inspector);
 
+  yield assertPseudoPanelClosed(view);
+
   info("Toggle the pseudo class panel open");
-  ok(view.pseudoClassPanel.hidden, "Pseudo Class Panel Hidden");
   view.pseudoClassToggle.click();
-  ok(!view.pseudoClassPanel.hidden, "Pseudo Class Panel Opened");
-  ok(!view.hoverCheckbox.disabled, ":hover checkbox is not disabled");
-  ok(!view.activeCheckbox.disabled, ":active checkbox is not disabled");
-  ok(!view.focusCheckbox.disabled, ":focus checkbox is not disabled");
+  yield assertPseudoPanelOpened(view);
 
   info("Toggle each pseudo lock and check that the pseudo lock is added");
-  yield togglePseudoClass(inspector, view, view.hoverCheckbox);
+  yield togglePseudoClass(inspector, view.hoverCheckbox);
   yield assertPseudoAdded(inspector, view, ":hover", 3, 1);
-  yield togglePseudoClass(inspector, view, view.hoverCheckbox);
+  yield togglePseudoClass(inspector, view.hoverCheckbox);
   yield assertPseudoRemoved(inspector, view, 2);
 
-  yield togglePseudoClass(inspector, view, view.activeCheckbox);
+  yield togglePseudoClass(inspector, view.activeCheckbox);
   yield assertPseudoAdded(inspector, view, ":active", 3, 1);
-  yield togglePseudoClass(inspector, view, view.activeCheckbox);
+  yield togglePseudoClass(inspector, view.activeCheckbox);
   yield assertPseudoRemoved(inspector, view, 2);
 
-  yield togglePseudoClass(inspector, view, view.focusCheckbox);
+  yield togglePseudoClass(inspector, view.focusCheckbox);
   yield assertPseudoAdded(inspector, view, ":focus", 3, 1);
-  yield togglePseudoClass(inspector, view, view.focusCheckbox);
+  yield togglePseudoClass(inspector, view.focusCheckbox);
   yield assertPseudoRemoved(inspector, view, 2);
 
   info("Toggle all pseudo lock and check that the pseudo lock is added");
-  yield togglePseudoClass(inspector, view, view.hoverCheckbox);
-  yield togglePseudoClass(inspector, view, view.activeCheckbox);
-  yield togglePseudoClass(inspector, view, view.focusCheckbox);
+  yield togglePseudoClass(inspector, view.hoverCheckbox);
+  yield togglePseudoClass(inspector, view.activeCheckbox);
+  yield togglePseudoClass(inspector, view.focusCheckbox);
   yield assertPseudoAdded(inspector, view, ":focus", 5, 1);
   yield assertPseudoAdded(inspector, view, ":active", 5, 2);
   yield assertPseudoAdded(inspector, view, ":hover", 5, 3);
-  yield togglePseudoClass(inspector, view, view.hoverCheckbox);
-  yield togglePseudoClass(inspector, view, view.activeCheckbox);
-  yield togglePseudoClass(inspector, view, view.focusCheckbox);
+  yield togglePseudoClass(inspector, view.hoverCheckbox);
+  yield togglePseudoClass(inspector, view.activeCheckbox);
+  yield togglePseudoClass(inspector, view.focusCheckbox);
   yield assertPseudoRemoved(inspector, view, 2);
 
   info("Select a null element");
   yield view.selectElement(null);
   ok(!view.hoverCheckbox.checked && view.hoverCheckbox.disabled,
     ":hover checkbox is unchecked and disabled");
   ok(!view.activeCheckbox.checked && view.activeCheckbox.disabled,
     ":active checkbox is unchecked and disabled");
   ok(!view.focusCheckbox.checked && view.focusCheckbox.disabled,
     ":focus checkbox is unchecked and disabled");
 
   info("Toggle the pseudo class panel close");
   view.pseudoClassToggle.click();
-  ok(view.pseudoClassPanel.hidden, "Pseudo Class Panel Closed");
+  yield assertPseudoPanelClosed(view);
 });
 
-function* togglePseudoClass(inspector, ruleView, pseudoClassOption) {
+function* togglePseudoClass(inspector, pseudoClassOption) {
   info("Toggle the pseudoclass, wait for it to be applied");
   let onRefresh = inspector.once("rule-view-refreshed");
   pseudoClassOption.click();
   yield onRefresh;
 }
 
-function* assertPseudoAdded(inspector, ruleView, pseudoClass, numRules,
+function* assertPseudoAdded(inspector, view, pseudoClass, numRules,
     childIndex) {
   info("Check that the ruleview contains the pseudo-class rule");
-  is(ruleView.element.children.length, numRules,
+  is(view.element.children.length, numRules,
     "Should have " + numRules + " rules.");
-  is(getRuleViewRuleEditor(ruleView, childIndex).rule.selectorText,
+  is(getRuleViewRuleEditor(view, childIndex).rule.selectorText,
     "div" + pseudoClass, "rule view is showing " + pseudoClass + " rule");
 }
 
-function* assertPseudoRemoved(inspector, ruleView, numRules) {
+function* assertPseudoRemoved(inspector, view, numRules) {
   info("Check that the ruleview no longer contains the pseudo-class rule");
-  is(ruleView.element.children.length, numRules,
+  is(view.element.children.length, numRules,
     "Should have " + numRules + " rules.");
-  is(getRuleViewRuleEditor(ruleView, 1).rule.selectorText, "div",
+  is(getRuleViewRuleEditor(view, 1).rule.selectorText, "div",
     "Second rule is div");
 }
+
+function* assertPseudoPanelOpened(view) {
+  info("Check the opened state of the pseudo class panel");
+
+  ok(!view.pseudoClassPanel.hidden, "Pseudo Class Panel Opened");
+  ok(!view.hoverCheckbox.disabled, ":hover checkbox is not disabled");
+  ok(!view.activeCheckbox.disabled, ":active checkbox is not disabled");
+  ok(!view.focusCheckbox.disabled, ":focus checkbox is not disabled");
+
+  is(view.pseudoClassPanel.getAttribute("tabindex"), "-1",
+    "Pseudo Class Panel has a tabindex of -1");
+  is(view.hoverCheckbox.getAttribute("tabindex"), "0",
+    ":hover checkbox has a tabindex of 0");
+  is(view.activeCheckbox.getAttribute("tabindex"), "0",
+    ":active checkbox has a tabindex of 0");
+  is(view.focusCheckbox.getAttribute("tabindex"), "0",
+    ":focus checkbox has a tabindex of 0");
+}
+
+function* assertPseudoPanelClosed(view) {
+  info("Check the closed state of the pseudo clas panel");
+
+  ok(view.pseudoClassPanel.hidden, "Pseudo Class Panel Hidden");
+
+  is(view.pseudoClassPanel.getAttribute("tabindex"), "-1",
+    "Pseudo Class Panel has a tabindex of -1");
+  is(view.hoverCheckbox.getAttribute("tabindex"), "-1",
+    ":hover checkbox has a tabindex of -1");
+  is(view.activeCheckbox.getAttribute("tabindex"), "-1",
+    ":active checkbox has a tabindex of -1");
+  is(view.focusCheckbox.getAttribute("tabindex"), "-1",
+    ":focus checkbox has a tabindex of -1");
+}