Bug 672746 - Add an Only user styles checkbox to the style inspector, r=msucan

browser/devtools/styleinspector/CssHtmlTree.jsm

@@ -72,7 +72,9 @@ function CssHtmlTree(aStyleWin, aCssLogic, aPanel)
 
   // Nodes used in templating
   this.root = this.styleDocument.getElementById("root");
+  this.path = this.styleDocument.getElementById("path");
   this.templateRoot = this.styleDocument.getElementById("templateRoot");
+  this.templatePath = this.styleDocument.getElementById("templatePath");
   this.propertyContainer = this.styleDocument.getElementById("propertyContainer");
   this.templateProperty = this.styleDocument.getElementById("templateProperty");
   this.panel = aPanel;
@@ -148,6 +150,14 @@ XPCOMUtils.defineLazyGetter(CssHtmlTree, "_strings", function() Services.strings
 
 CssHtmlTree.prototype = {
   htmlComplete: false,
+  
+  // Reference to the "Only user Styles" checkbox.
+  onlyUserStylesCheckbox: null,
+
+  get showOnlyUserStyles()
+  {
+    return this.onlyUserStylesCheckbox.checked;
+  },
 
   /**
    * Update the highlighted element. The CssHtmlTree panel will show the style
@@ -162,11 +172,13 @@ CssHtmlTree.prototype = {
 
     this.viewedElement = aElement;
 
-    CssHtmlTree.processTemplate(this.templateRoot, this.root, this);
+    CssHtmlTree.processTemplate(this.templatePath, this.path, this);
 
     if (this.htmlComplete) {
       this.refreshPanel();
     } else {
+      CssHtmlTree.processTemplate(this.templateRoot, this.root, this);
+
       // We use a setTimeout loop to display the properties in batches of 15 at a
       // time. This results in a perceptibly more responsive UI.
       let i = 0;
@@ -190,6 +202,7 @@ CssHtmlTree.prototype = {
             this.win.setTimeout(displayProperties.bind(this), 50);
           } else {
             this.htmlComplete = true;
+            Services.obs.notifyObservers(null, "StyleInspector-populated", null);
           }
         }
       }
@@ -205,6 +218,7 @@ CssHtmlTree.prototype = {
     for each(let propView in this.propertyViews) {
       propView.refresh();
     }
+    Services.obs.notifyObservers(null, "StyleInspector-populated", null);
   },
 
   /**
@@ -229,6 +243,24 @@ CssHtmlTree.prototype = {
     }
   },
 
+  /**
+   * The change event handler for the onlyUserStyles checkbox. When
+   * onlyUserStyles.checked is true we do not display properties that have no
+   * matched selectors, and we do not display UA styles. If .checked is false we
+   * do display even properties with no matched selectors, and we include the UA
+   * styles.
+   *
+   * @param {Event} aEvent the DOM Event object.
+   */
+  onlyUserStylesChanged: function CssHtmltree_onlyUserStylesChanged(aEvent)
+  {
+    this.cssLogic.sourceFilter = this.showOnlyUserStyles ?
+                                 CssLogic.FILTER.ALL :
+                                 CssLogic.FILTER.UA;
+    
+    this.refreshPanel();
+  },
+
   /**
    * Provide access to the path to get from document.body to the selected
    * element.
@@ -356,6 +388,26 @@ PropertyView.prototype = {
     return this.tree.cssLogic.getPropertyInfo(this.name);
   },
 
+  /**
+   * Should this property be visible?
+   */
+  get visible()
+  {
+    if (this.tree.showOnlyUserStyles && this.matchedSelectorCount == 0) {
+      return false;
+    }
+
+    return true;
+  },
+
+  /**
+   * Returns the className that should be assigned to the propertyView.
+   */
+  get className()
+  {
+    return this.visible ? "property-view" : "property-view-hidden";
+  },
+
   /**
    * The number of matched selectors.
    */
@@ -377,7 +429,15 @@ PropertyView.prototype = {
    */
   refresh: function PropertyView_refresh()
   {
-    if (!this.tree.viewedElement) {
+    this.element.className = this.className;
+
+    if (this.prevViewedElement != this.tree.viewedElement) {
+      this._matchedSelectorViews = null;
+      this._unmatchedSelectorViews = null;
+      this.prevViewedElement = this.tree.viewedElement;
+    }
+
+    if (!this.tree.viewedElement || !this.visible) {
       this.valueNode.innerHTML = "";
       this.matchedSelectorsContainer.hidden = true;
       this.unmatchedSelectorsContainer.hidden = true;
@@ -389,13 +449,7 @@ PropertyView.prototype = {
     }
 
     this.valueNode.innerHTML = this.propertyInfo.value;
-
-    if (this.prevViewedElement != this.tree.viewedElement) {
-      this._matchedSelectorViews = null;
-      this._unmatchedSelectorViews = null;
-      this.prevViewedElement = this.tree.viewedElement;
-    }
-
+    
     this.refreshMatchedSelectors();
     this.refreshUnmatchedSelectors();
   },

browser/devtools/styleinspector/csshtmltree.xhtml

@@ -66,6 +66,10 @@
 <div id="root">
 </div>
 
+<!-- The output from #templatePath (below) is inserted here. -->
+<div id="path">
+</div>
+
 <!-- The output from #templateProperty (below) is appended here. -->
 <div id="propertyContainer">
 </div>
@@ -75,10 +79,24 @@ To visually debug the templates without running firefox, alter the display:none
 -->
 <div style="display:none;">
   <!--
-  templateRoot sits at the top of the window showing what we're looking at.
-  For data it needs an instance of CssHtmlTree.
+  templateRoot sits at the top of the window and contains the "include default
+  styles" checkbox. For data it needs an instance of CssHtmlTree.
   -->
   <div id="templateRoot">
+    <div class="filters">
+      <label class="userStylesLabel" dir="${getRTLAttr}">
+        &userStylesLabel;
+        <input class="userStyles" save="${onlyUserStylesCheckbox}" type="checkbox"
+               onchange="${onlyUserStylesChanged}" checked=""/>
+      </label>
+    </div>
+  </div>
+
+  <!--
+  templatePath sits just below the top of the window showing what we're looking
+  at. For data it needs an instance of CssHtmlTree.
+  -->
+  <div id="templatePath">
     <p class="path">
       <label dir="${getRTLAttr}">&lookingAtLabel;</label>
       <ol>
@@ -98,7 +116,7 @@ To visually debug the templates without running firefox, alter the display:none
   }
   -->
   <div id="templateProperty">
-    <div class="property-view" save="${element}" dir="${getRTLAttr}">
+    <div class="${className}" save="${element}" dir="${getRTLAttr}">
       <div class="property-header">
         <div class="property-name" dir="${getRTLAttr}">
           <a class="link" target="_blank" title="&helpLinkTitle;"

browser/devtools/styleinspector/test/browser/Makefile.in

@@ -49,6 +49,7 @@ _BROWSER_TEST_FILES = \
   browser_styleinspector.js \
   browser_styleinspector_webconsole.js \
   browser_bug683672.js \
+  browser_styleinspector_bug_672746_default_styles.js \
   head.js \
   $(NULL)
 

browser/devtools/styleinspector/test/browser/browser_styleinspector_bug_672746_default_styles.js

@@ -0,0 +1,107 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Tests that the checkbox to show only user styles works properly.
+
+let doc;
+let stylePanel;
+
+function createDocument()
+{
+  doc.body.innerHTML = '<style type="text/css"> ' +
+    '.matches {color: #F00;}</style>' +
+    '<span id="matches" class="matches">Some styled text</span>' +
+    '</div>';
+  doc.title = "Style Inspector Default Styles Test";
+  ok(window.StyleInspector, "StyleInspector exists");
+  ok(StyleInspector.isEnabled, "style inspector preference is enabled");
+  stylePanel = StyleInspector.createPanel();
+  Services.obs.addObserver(runStyleInspectorTests, "StyleInspector-opened", false);
+  stylePanel.openPopup(gBrowser.selectedBrowser, "end_before", 0, 0, false, false);
+}
+
+function runStyleInspectorTests()
+{
+  Services.obs.removeObserver(runStyleInspectorTests, "StyleInspector-opened", false);
+
+  ok(stylePanel.isOpen(), "style inspector is open");
+
+  Services.obs.addObserver(SI_check, "StyleInspector-populated", false);
+  SI_inspectNode();
+}
+
+function SI_inspectNode()
+{
+  let span = doc.querySelector("#matches");
+  ok(span, "captain, we have the matches span");
+
+  let htmlTree = stylePanel.cssHtmlTree;
+  stylePanel.selectNode(span);
+
+  is(span, htmlTree.viewedElement,
+    "style inspector node matches the selected node");
+  is(htmlTree.viewedElement, stylePanel.cssLogic.viewedElement,
+     "cssLogic node matches the cssHtmlTree node");
+}
+
+function SI_check()
+{
+  Services.obs.removeObserver(SI_check, "StyleInspector-populated", false);
+  is(propertyVisible("color"), true,
+    "span #matches color property is visible");
+  is(propertyVisible("background-color"), false,
+    "span #matches background-color property is hidden");
+
+  SI_toggleDefaultStyles();
+}
+
+function SI_toggleDefaultStyles()
+{
+  // Click on the checkbox.
+  let iframe = stylePanel.querySelector("iframe");
+  let checkbox = iframe.contentDocument.querySelector(".userStyles");
+  Services.obs.addObserver(SI_checkDefaultStyles, "StyleInspector-populated", false);
+  EventUtils.synthesizeMouse(checkbox, 5, 5, {}, iframe.contentWindow);
+}
+
+function SI_checkDefaultStyles()
+{
+  Services.obs.removeObserver(SI_checkDefaultStyles, "StyleInspector-populated", false);
+  // Check that the default styles are now applied.
+  is(propertyVisible("color"), true,
+      "span color property is visible");
+  is(propertyVisible("background-color"), true,
+      "span background-color property is visible");
+
+  Services.obs.addObserver(finishUp, "StyleInspector-closed", false);
+  stylePanel.hidePopup();
+}
+
+function propertyVisible(aName)
+{
+  let propertyViews = stylePanel.cssHtmlTree.propertyViews;
+  return propertyViews[aName].className == "property-view";
+}
+
+function finishUp()
+{
+  Services.obs.removeObserver(finishUp, "StyleInspector-closed", false);
+  ok(!stylePanel.isOpen(), "style inspector is closed");
+  doc = stylePanel = null;
+  gBrowser.removeCurrentTab();
+  finish();
+}
+
+function test()
+{
+  waitForExplicitFinish();
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function onLoad(evt) {
+    gBrowser.selectedBrowser.removeEventListener(evt.type, onLoad, true);
+    doc = content.document;
+    waitForFocus(createDocument, content);
+  }, true);
+
+  content.location = "data:text/html,default styles test";
+}

browser/locales/en-US/chrome/browser/styleinspector.dtd

@@ -1,3 +1,8 @@
+<!-- LOCALIZATION NOTE (userStylesLabel): This is the label for the checkbox
+  -  that specifies whether the styles that are not from the user's stylesheet
+  -  should be displayed or not. -->
+<!ENTITY userStylesLabel    "Only user styles">
+
 <!-- LOCALIZATION NOTE (lookingAtLabel): This is the label for the path of
   -  the highlighted element in the web page. This path is based on the document
   -  tree. -->

browser/themes/gnomestripe/browser/devtools/csshtmltree.css

@@ -42,7 +42,8 @@ body {
   font-size: 11px;
   background: #EEE;
 }
-.path {
+.path,
+.filters {
   font-size: 11px;
   word-spacing: -1px;
 }
@@ -138,6 +139,10 @@ a.link:visited {
   font-size: 10px;
 }
 
+.property-view-hidden {
+  display: none;
+}
+
 .rule-link {
   text-align: end;
   -moz-padding-start: 10px;
@@ -165,3 +170,13 @@ a.link:visited {
 .unmatched {
   color: brown;
 }
+
+.userStyles {
+  position: relative;
+  top: 3px;
+}
+
+.userStyles,
+.userStylesLabel {
+  cursor: pointer;
+}

browser/themes/pinstripe/browser/devtools/csshtmltree.css

@@ -42,7 +42,8 @@ body {
   font-size: 11px;
   background: #EEE;
 }
-.path {
+.path,
+.filters {
   font-size: 11px;
   word-spacing: -1px;
 }
@@ -138,6 +139,10 @@ a.link:visited {
   font-size: 10px;
 }
 
+.property-view-hidden {
+  display: none;
+}
+
 .rule-link {
   text-align: end;
   -moz-padding-start: 10px;
@@ -165,3 +170,13 @@ a.link:visited {
 .unmatched {
   color: brown;
 }
+
+.userStyles {
+  position: relative;
+  top: 3px;
+}
+
+.userStyles,
+.userStylesLabel {
+  cursor: pointer;
+}

browser/themes/winstripe/browser/devtools/csshtmltree.css

@@ -42,7 +42,8 @@ body {
   font-size: 11px;
   background: #EEE;
 }
-.path {
+.path,
+.filters {
   font-size: 11px;
   word-spacing: -1px;
 }
@@ -138,6 +139,10 @@ a.link:visited {
   font-size: 10px;
 }
 
+.property-view-hidden {
+  display: none;
+}
+
 .rule-link {
   text-align: end;
   -moz-padding-start: 10px;
@@ -165,3 +170,13 @@ a.link:visited {
 .unmatched {
   color: brown;
 }
+
+.userStyles {
+  position: relative;
+  top: 3px;
+}
+
+.userStyles,
+.userStylesLabel {
+  cursor: pointer;
+}