Bug 914079 - Pseudo-element header can be used to toggle rules; r=mikeratcliffe

browser/devtools/styleinspector/rule-view.js

@@ -1212,6 +1212,11 @@ CssRuleView.prototype = {
     return this._showPseudoElements;
   },
 
+  _getRuleViewHeaderClassName: function(isPseudo) {
+    let baseClassName = "theme-gutter ruleview-header";
+    return isPseudo ? baseClassName + " ruleview-expandable-header" : baseClassName;
+  },
+
   /**
    * Creates editor UI for each of the rules in _elementStyle.
    */
@@ -1232,7 +1237,7 @@ CssRuleView.prototype = {
       if (seenPseudoElement && !seenNormalElement && !rule.pseudoElement) {
         seenNormalElement = true;
         let div = this.doc.createElementNS(HTML_NS, "div");
-        div.className = "theme-gutter ruleview-header";
+        div.className = this._getRuleViewHeaderClassName();
         div.textContent = this.selectedElementLabel;
         this.element.appendChild(div);
       }
@@ -1240,7 +1245,7 @@ CssRuleView.prototype = {
       let inheritedSource = rule.inheritedSource;
       if (inheritedSource != lastInheritedSource) {
         let div = this.doc.createElementNS(HTML_NS, "div");
-        div.className = "theme-gutter ruleview-header";
+        div.className = this._getRuleViewHeaderClassName();
         div.textContent = inheritedSource;
         lastInheritedSource = inheritedSource;
         this.element.appendChild(div);
@@ -1250,8 +1255,11 @@ CssRuleView.prototype = {
         seenPseudoElement = true;
 
         let div = this.doc.createElementNS(HTML_NS, "div");
-        div.className = "theme-gutter ruleview-header";
+        div.className = this._getRuleViewHeaderClassName(true);
         div.textContent = this.pseudoElementLabel;
+        div.addEventListener("dblclick", () => {
+          this.togglePseudoElementVisibility(!this.showPseudoElements);
+        }, false);
 
         let twisty = this.pseudoElementTwisty =
           this.doc.createElementNS(HTML_NS, "span");

browser/devtools/styleinspector/ruleview.css

@@ -50,7 +50,11 @@
 }
 
 .ruleview-header {
-  vertical-align:middle;
+  vertical-align: middle;
   height: 1.5em;
   line-height: 1.5em;
-}
+}
+
+.ruleview-header.ruleview-expandable-header {
+  cursor: pointer;
+}

browser/devtools/styleinspector/test/browser_ruleview_pseudoelement.js

@@ -48,7 +48,10 @@ function testTopLeft()
     ok (!view.element.classList.contains("show-pseudo-elements"), "Pseudo Elements are collapsed by twisty");
     expander.click();
     ok (view.element.classList.contains("show-pseudo-elements"), "Pseudo Elements are expanded again");
-    expander.click();
+
+    // Make sure that dblclicking on the header container also toggles the pseudo elements
+    EventUtils.synthesizeMouseAtCenter(gutters[0], {clickCount: 2}, inspector.sidebar.getWindowForTab("ruleview"));
+    ok (!view.element.classList.contains("show-pseudo-elements"), "Pseudo Elements are collapsed by dblclicking");
 
     let defaultView = element.ownerDocument.defaultView;
     let elementRule = elementRules[0];