Bug 914079 - Pseudo-element header can be used to toggle rules; r=mikeratcliffe
authorPatrick Brosset <pbrosset@mozilla.com>
Tue, 10 Sep 2013 05:22:00 +0200
changeset 159592 2a0b716e7be492516af6133775cd5eae2db45934
parent 159591 e19b14609e526b718e340b85837b38d106087d88
child 159593 6b98e5ee513b4e158f35070775435d8e932d7f5a
push id2961
push userlsblakk@mozilla.com
push dateMon, 28 Oct 2013 21:59:28 +0000
treeherdermozilla-beta@73ef4f13486f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmikeratcliffe
bugs914079
milestone26.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 914079 - Pseudo-element header can be used to toggle rules; r=mikeratcliffe
browser/devtools/styleinspector/rule-view.js
browser/devtools/styleinspector/ruleview.css
browser/devtools/styleinspector/test/browser_ruleview_pseudoelement.js
--- a/browser/devtools/styleinspector/rule-view.js
+++ b/browser/devtools/styleinspector/rule-view.js
@@ -1207,16 +1207,21 @@ CssRuleView.prototype = {
   {
     if (this._showPseudoElements === undefined) {
       this._showPseudoElements =
         Services.prefs.getBoolPref("devtools.inspector.show_pseudo_elements");
     }
     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.
    */
   _createEditors: function CssRuleView_createEditors()
   {
     // Run through the current list of rules, attaching
     // their editors in order.  Create editors if needed.
     let lastInheritedSource = "";
@@ -1227,36 +1232,39 @@ CssRuleView.prototype = {
       if (rule.domRule.system) {
         continue;
       }
 
       // Only print header for this element if there are pseudo elements
       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);
       }
 
       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);
       }
 
       if (!seenPseudoElement && rule.pseudoElement) {
         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");
         twisty.className = "ruleview-expander theme-twisty";
         twisty.addEventListener("click", () => {
           this.togglePseudoElementVisibility(!this.showPseudoElements);
         }, false);
 
--- a/browser/devtools/styleinspector/ruleview.css
+++ b/browser/devtools/styleinspector/ruleview.css
@@ -45,12 +45,16 @@
   display: block;
 }
 
 .ruleview .ruleview-expander {
   vertical-align: middle;
 }
 
 .ruleview-header {
-  vertical-align:middle;
+  vertical-align: middle;
   height: 1.5em;
   line-height: 1.5em;
-}
\ No newline at end of file
+}
+
+.ruleview-header.ruleview-expandable-header {
+  cursor: pointer;
+}
--- a/browser/devtools/styleinspector/test/browser_ruleview_pseudoelement.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_pseudoelement.js
@@ -43,17 +43,20 @@ function testTopLeft()
 
     // Make sure that clicking on the twisty hides pseudo elements
     let expander = gutters[0].querySelector(".ruleview-expander");
     ok (view.element.classList.contains("show-pseudo-elements"), "Pseudo Elements are expanded");
     expander.click();
     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];
     let elementRuleView = [].filter.call(view.element.children, (e) => {
       return e._ruleEditor && e._ruleEditor.rule === elementRule;
     })[0]._ruleEditor;
 
     let elementAfterRule = afterRules[0];