Backed out changeset 6fe81a6dbaa8 (bug 1252640) because browser_rules_pseudo_lock_options.js is still busted
authorWes Kocher <wkocher@mozilla.com>
Thu, 03 Mar 2016 12:43:43 -0800
changeset 324837 4d65c8ec069b65b9856aab8bc2ced0f0e62390e7
parent 324836 6fe81a6dbaa8f2ffdfb64ff677af85128d0555ec
child 324838 a328633a812bba1402fe3166d1a364418303be45
push id1128
push userjlund@mozilla.com
push dateWed, 01 Jun 2016 01:31:59 +0000
treeherdermozilla-release@fe0d30de989d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1252640
milestone47.0a1
backs out6fe81a6dbaa8f2ffdfb64ff677af85128d0555ec
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
Backed out changeset 6fe81a6dbaa8 (bug 1252640) because browser_rules_pseudo_lock_options.js is still busted MozReview-Commit-ID: ENmjcTCS30T
devtools/client/inspector/rules/rules.js
devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js
devtools/client/inspector/rules/test/browser_rules_pseudo_lock_options.js
devtools/client/themes/rules.css
--- a/devtools/client/inspector/rules/rules.js
+++ b/devtools/client/inspector/rules/rules.js
@@ -1054,74 +1054,75 @@ CssRuleView.prototype = {
    *         The label for the container header
    * @param  {Boolean} isPseudo
    *         Whether or not the container will hold pseudo element rules
    * @return {DOMNode} The container element
    */
   createExpandableContainer: function(label, isPseudo = false) {
     let header = this.styleDocument.createElementNS(HTML_NS, "div");
     header.className = this._getRuleViewHeaderClassName(true);
+    header.classList.add("show-expandable-container");
     header.textContent = label;
 
     let twisty = this.styleDocument.createElementNS(HTML_NS, "span");
     twisty.className = "ruleview-expander theme-twisty";
     twisty.setAttribute("open", "true");
 
     header.insertBefore(twisty, header.firstChild);
     this.element.appendChild(header);
 
     let container = this.styleDocument.createElementNS(HTML_NS, "div");
     container.classList.add("ruleview-expandable-container");
-    container.hidden = false;
     this.element.appendChild(container);
 
     header.addEventListener("dblclick", () => {
-      this._toggleContainerVisibility(twisty, container, isPseudo,
+      this._toggleContainerVisibility(twisty, header, isPseudo,
         !this.showPseudoElements);
     }, false);
 
     twisty.addEventListener("click", () => {
-      this._toggleContainerVisibility(twisty, container, isPseudo,
+      this._toggleContainerVisibility(twisty, header, isPseudo,
         !this.showPseudoElements);
     }, false);
 
     if (isPseudo) {
-      this._toggleContainerVisibility(twisty, container, isPseudo,
+      this._toggleContainerVisibility(twisty, header, isPseudo,
         this.showPseudoElements);
     }
 
     return container;
   },
 
   /**
    * Toggle the visibility of an expandable container
    *
    * @param  {DOMNode}  twisty
-   *         Clickable toggle DOM Node
-   * @param  {DOMNode}  container
-   *         Expandable container DOM Node
+   *         clickable toggle DOM Node
+   * @param  {DOMNode}  header
+   *         expandable container header DOM Node
    * @param  {Boolean}  isPseudo
-   *         Whether or not the container will hold pseudo element rules
+   *         whether or not the container will hold pseudo element rules
    * @param  {Boolean}  showPseudo
-   *         Whether or not pseudo element rules should be displayed
+   *         whether or not pseudo element rules should be displayed
    */
-  _toggleContainerVisibility: function(twisty, container, isPseudo,
-      showPseudo) {
+  _toggleContainerVisibility: function(twisty, header, isPseudo, showPseudo) {
     let isOpen = twisty.getAttribute("open");
 
     if (isPseudo) {
       this._showPseudoElements = !!showPseudo;
 
       Services.prefs.setBoolPref("devtools.inspector.show_pseudo_elements",
         this.showPseudoElements);
 
-      container.hidden = !this.showPseudoElements;
+      header.classList.toggle("show-expandable-container",
+        this.showPseudoElements);
+
       isOpen = !this.showPseudoElements;
     } else {
-      container.hidden = !container.hidden;
+      header.classList.toggle("show-expandable-container");
     }
 
     if (isOpen) {
       twisty.removeAttribute("open");
     } else {
       twisty.setAttribute("open", "true");
     }
   },
--- a/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js
@@ -35,31 +35,33 @@ function* testTopLeft(inspector, view) {
       selectionRulesNb: 0
     }
   );
 
   let gutters = assertGutters(view);
 
   info("Make sure that clicking on the twisty hides pseudo elements");
   let expander = gutters[0].querySelector(".ruleview-expander");
-  ok(!view.element.children[1].hidden, "Pseudo Elements are expanded");
+  ok(view.element.firstChild.classList.contains("show-expandable-container"),
+     "Pseudo Elements are expanded");
 
   expander.click();
-  ok(view.element.children[1].hidden,
-    "Pseudo Elements are collapsed by twisty");
+  ok(!view.element.firstChild.classList.contains("show-expandable-container"),
+     "Pseudo Elements are collapsed by twisty");
 
   expander.click();
-  ok(!view.element.children[1].hidden, "Pseudo Elements are expanded again");
+  ok(view.element.firstChild.classList.contains("show-expandable-container"),
+     "Pseudo Elements are expanded again");
 
   info("Make sure that dblclicking on the header container also toggles " +
        "the pseudo elements");
   EventUtils.synthesizeMouseAtCenter(gutters[0], {clickCount: 2},
                                      view.styleWindow);
-  ok(view.element.children[1].hidden,
-    "Pseudo Elements are collapsed by dblclicking");
+  ok(!view.element.firstChild.classList.contains("show-expandable-container"),
+     "Pseudo Elements are collapsed by dblclicking");
 
   let elementRuleView = getRuleViewRuleEditor(view, 3);
 
   let elementFirstLineRule = rules.firstLineRules[0];
   let elementFirstLineRuleView =
     [...view.element.children[1].children].filter(e => {
       return e._ruleEditor && e._ruleEditor.rule === elementFirstLineRule;
     })[0]._ruleEditor;
@@ -128,18 +130,18 @@ function* testTopRight(inspector, view) 
   let gutters = assertGutters(view);
 
   let expander = gutters[0].querySelector(".ruleview-expander");
   ok(!view.element.firstChild.classList.contains("show-expandable-container"),
      "Pseudo Elements remain collapsed after switching element");
 
   expander.scrollIntoView();
   expander.click();
-  ok(!view.element.children[1].hidden,
-    "Pseudo Elements are shown again after clicking twisty");
+  ok(view.element.firstChild.classList.contains("show-expandable-container"),
+     "Pseudo Elements are shown again after clicking twisty");
 }
 
 function* testBottomRight(inspector, view) {
   yield assertPseudoElementRulesNumbers("#bottomright", inspector, view, {
     elementRulesNb: 4,
     firstLineRulesNb: 1,
     firstLetterRulesNb: 1,
     selectionRulesNb: 0
--- a/devtools/client/inspector/rules/test/browser_rules_pseudo_lock_options.js
+++ b/devtools/client/inspector/rules/test/browser_rules_pseudo_lock_options.js
@@ -104,28 +104,32 @@ function* assertPseudoRemoved(inspector,
 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");
 }
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -82,21 +82,21 @@
 .ruleview-code {
   direction: ltr;
 }
 
 .ruleview-property:not(:hover) > .ruleview-enableproperty {
   pointer-events: none;
 }
 
-.ruleview-expandable-container[hidden] {
+.ruleview-expandable-container {
   display: none;
 }
 
-.ruleview-expandable-container {
+.show-expandable-container + .ruleview-expandable-container {
   display: block;
 }
 
 .ruleview-namecontainer {
   cursor: text;
 }
 
 .ruleview-propertyvaluecontainer {
@@ -146,17 +146,16 @@
   border-top-style: solid;
   border-bottom-style: solid;
   padding: 1px 4px;
   -moz-user-select: none;
   word-wrap: break-word;
   vertical-align: middle;
   min-height: 1.5em;
   line-height: 1.5em;
-  margin-top: -1px;
 }
 
 :root[platform="win"] .ruleview-header,
 :root[platform="linux"] .ruleview-header {
   margin-top: 4px;
 }
 
 .ruleview-header.ruleview-expandable-header {