Bug 1252640 - Fix overlapping borders in the ruleview-header r=pbro
authorGabriel Luong <gabriel.luong@gmail.com>
Thu, 03 Mar 2016 12:55:14 -0800
changeset 322939 d2a269c7c7bbfcca49eef2648b07a4feb7351b35
parent 322938 3a8630991a092b18d46f3bea4fa4de671e647095
child 322940 62a334ac99eb9de2e0199db428e0182ea1ceb98a
push id5913
push userjlund@mozilla.com
push dateMon, 25 Apr 2016 16:57:49 +0000
treeherdermozilla-beta@dcaf0a6fa115 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1252640
milestone47.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 1252640 - Fix overlapping borders in the ruleview-header r=pbro MozReview-Commit-ID: JdQBKSQ96Rs
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,75 +1054,74 @@ 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, header, isPseudo,
+      this._toggleContainerVisibility(twisty, container, isPseudo,
         !this.showPseudoElements);
     }, false);
 
     twisty.addEventListener("click", () => {
-      this._toggleContainerVisibility(twisty, header, isPseudo,
+      this._toggleContainerVisibility(twisty, container, isPseudo,
         !this.showPseudoElements);
     }, false);
 
     if (isPseudo) {
-      this._toggleContainerVisibility(twisty, header, isPseudo,
+      this._toggleContainerVisibility(twisty, container, isPseudo,
         this.showPseudoElements);
     }
 
     return container;
   },
 
   /**
    * Toggle the visibility of an expandable container
    *
    * @param  {DOMNode}  twisty
-   *         clickable toggle DOM Node
-   * @param  {DOMNode}  header
-   *         expandable container header DOM Node
+   *         Clickable toggle DOM Node
+   * @param  {DOMNode}  container
+   *         Expandable container 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, header, isPseudo, showPseudo) {
+  _toggleContainerVisibility: function(twisty, container, isPseudo,
+      showPseudo) {
     let isOpen = twisty.getAttribute("open");
 
     if (isPseudo) {
       this._showPseudoElements = !!showPseudo;
 
       Services.prefs.setBoolPref("devtools.inspector.show_pseudo_elements",
         this.showPseudoElements);
 
-      header.classList.toggle("show-expandable-container",
-        this.showPseudoElements);
-
+      container.hidden = !this.showPseudoElements;
       isOpen = !this.showPseudoElements;
     } else {
-      header.classList.toggle("show-expandable-container");
+      container.hidden = !container.hidden;
     }
 
     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,33 +35,31 @@ 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.firstChild.classList.contains("show-expandable-container"),
-     "Pseudo Elements are expanded");
+  ok(!view.element.children[1].hidden, "Pseudo Elements are expanded");
 
   expander.click();
-  ok(!view.element.firstChild.classList.contains("show-expandable-container"),
-     "Pseudo Elements are collapsed by twisty");
+  ok(view.element.children[1].hidden,
+    "Pseudo Elements are collapsed by twisty");
 
   expander.click();
-  ok(view.element.firstChild.classList.contains("show-expandable-container"),
-     "Pseudo Elements are expanded again");
+  ok(!view.element.children[1].hidden, "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.firstChild.classList.contains("show-expandable-container"),
-     "Pseudo Elements are collapsed by dblclicking");
+  ok(view.element.children[1].hidden,
+    "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;
@@ -130,18 +128,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.firstChild.classList.contains("show-expandable-container"),
-     "Pseudo Elements are shown again after clicking twisty");
+  ok(!view.element.children[1].hidden,
+    "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,32 +104,28 @@ 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 {
+.ruleview-expandable-container[hidden] {
   display: none;
 }
 
-.show-expandable-container + .ruleview-expandable-container {
+.ruleview-expandable-container {
   display: block;
 }
 
 .ruleview-namecontainer {
   cursor: text;
 }
 
 .ruleview-propertyvaluecontainer {
@@ -146,16 +146,17 @@
   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 {