Bug 789785 - [inspector] Change wording of "Only user styles" checkbox

browser/devtools/styleinspector/CssHtmlTree.jsm

@@ -227,8 +227,8 @@ CssHtmlTree.prototype = {
   // The search filter
   searchField: null,
 
-  // Reference to the "Only user Styles" checkbox.
-  onlyUserStylesCheckbox: null,
+  // Reference to the "Include browser styles" checkbox.
+  includeBrowserStylesCheckbox: null,
 
   // Holds the ID of the panelRefresh timeout.
   _panelRefreshTimeout: null,
@@ -239,9 +239,9 @@ CssHtmlTree.prototype = {
   // Number of visible properties
   numVisibleProperties: 0,
 
-  get showOnlyUserStyles()
+  get includeBrowserStyles()
   {
-    return this.onlyUserStylesCheckbox.checked;
+    return this.includeBrowserStylesCheckbox.checked;
   },
 
   /**
@@ -369,28 +369,29 @@ CssHtmlTree.prototype = {
   },
 
   /**
-   * The change event handler for the onlyUserStyles checkbox.
+   * The change event handler for the includeBrowserStyles checkbox.
    *
    * @param {Event} aEvent the DOM Event object.
    */
-  onlyUserStylesChanged: function CssHtmltree_onlyUserStylesChanged(aEvent)
+  includeBrowserStylesChanged:
+  function CssHtmltree_includeBrowserStylesChanged(aEvent)
   {
     this.refreshSourceFilter();
     this.refreshPanel();
   },
 
   /**
-   * When onlyUserStyles.checked is true we only display properties that have
-   * matched selectors and have been included by the document or one of the
+   * When includeBrowserStyles.checked is false we only display properties that
+   * have matched selectors and have been included by the document or one of the
    * document's stylesheets. If .checked is false we display all properties
    * including those that come from UA stylesheets.
    */
   refreshSourceFilter: function CssHtmlTree_setSourceFilter()
   {
     this._matchedProperties = null;
-    this.cssLogic.sourceFilter = this.showOnlyUserStyles ?
-                                 CssLogic.FILTER.ALL :
-                                 CssLogic.FILTER.UA;
+    this.cssLogic.sourceFilter = this.includeBrowserStyles ?
+                                 CssLogic.FILTER.UA :
+                                 CssLogic.FILTER.ALL;
   },
 
   /**
@@ -651,8 +652,8 @@ CssHtmlTree.prototype = {
     delete this.viewedElement;
 
     // Remove event listeners
-    this.onlyUserStylesCheckbox.removeEventListener("command",
-      this.onlyUserStylesChanged);
+    this.includeBrowserStylesCheckbox.removeEventListener("command",
+      this.includeBrowserStylesChanged);
     this.searchField.removeEventListener("command", this.filterChanged);
 
     // Cancel tree construction
@@ -784,7 +785,7 @@ PropertyView.prototype = {
    */
   get visible()
   {
-    if (this.tree.showOnlyUserStyles && !this.hasMatchedSelectors) {
+    if (!this.tree.includeBrowserStyles && !this.hasMatchedSelectors) {
       return false;
     }
 

browser/devtools/styleinspector/csshtmltree.xul

@@ -67,9 +67,10 @@ To visually debug the templates without running firefox, alter the display:none
   -->
   <div id="templateRoot">
     <xul:hbox class="headerControls" flex="1" align="center">
-      <xul:checkbox class="onlyuserstyles" save="${onlyUserStylesCheckbox}"
-                    oncommand="${onlyUserStylesChanged}" checked="true"
-                    label="&userStylesLabel;"/>
+      <xul:checkbox class="includebrowserstyles"
+                    save="${includeBrowserStylesCheckbox}"
+                    oncommand="${includeBrowserStylesChanged}" checked="false"
+                    label="&browserStylesLabel;"/>
       <xul:textbox class="searchfield" type="search" save="${searchField}"
                    placeholder="&userStylesSearch;" flex="1"
                    oncommand="${filterChanged}"/>

browser/devtools/styleinspector/test/browser_styleinspector_bug_672744_search_filter.js

@@ -54,10 +54,10 @@ function SI_toggleDefaultStyles()
 {
   Services.obs.removeObserver(SI_toggleDefaultStyles, "StyleInspector-populated", false);
 
-  info("clearing \"only user styles\" checkbox");
+  info("checking \"Browser styles\" checkbox");
 
   let doc = computedView.styleDocument;
-  let checkbox = doc.querySelector(".onlyuserstyles");
+  let checkbox = doc.querySelector(".includebrowserstyles");
   Services.obs.addObserver(SI_AddFilterText, "StyleInspector-populated", false);
   checkbox.click();
 }

browser/devtools/styleinspector/test/browser_styleinspector_bug_672746_default_styles.js

@@ -2,7 +2,7 @@
 /* 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.
+// Tests that the checkbox to include browser styles works properly.
 
 let doc;
 let inspector;
@@ -65,7 +65,7 @@ function SI_toggleDefaultStyles()
 {
   // Click on the checkbox.
   let doc = computedView.styleDocument;
-  let checkbox = doc.querySelector(".onlyuserstyles");
+  let checkbox = doc.querySelector(".includebrowserstyles");
   Services.obs.addObserver(SI_checkDefaultStyles, "StyleInspector-populated", false);
 
   checkbox.click();

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

@@ -8,10 +8,10 @@
   - A good criteria is the language in which you'd find the best
   - documentation on web development on the web. -->
 
-<!-- LOCALIZATION NOTE (userStylesLabel): This is the label for the checkbox
+<!-- LOCALIZATION NOTE (browserStylesLabel): 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">
+<!ENTITY browserStylesLabel    "Browser styles">
 
 <!-- LOCALIZATION NOTE (userStylesSearch): This is the placeholder that goes in
   -  the search box when no search term has been entered. -->

browser/themes/gnomestripe/devtools/csshtmltree.css

@@ -124,7 +124,7 @@
   background-color: -moz-dialog;
 }
 
-.onlyuserstyles {
+.includebrowserstyles {
   cursor: pointer;
   font-size: 11px;
 }

browser/themes/pinstripe/devtools/csshtmltree.css

@@ -126,7 +126,7 @@
   background-color: -moz-dialog;
 }
 
-.onlyuserstyles {
+.includebrowserstyles {
   cursor: pointer;
   font-size: 11px;
 }

browser/themes/winstripe/devtools/csshtmltree.css

@@ -126,7 +126,7 @@
   background-color: -moz-dialog;
 }
 
-.onlyuserstyles {
+.includebrowserstyles {
   cursor: pointer;
   font-size: 11px;
 }