Bug 702411 - Rule view shouldn't update during highlighting. r=robcee

browser/devtools/styleinspector/CssRuleView.jsm

@@ -714,6 +714,7 @@ function CssRuleView(aDoc, aStore)
   this.element.addEventListener("copy", this._boundCopy);
 
   this._createContextMenu();
+  this._showEmpty();
 }
 
 CssRuleView.prototype = {
@@ -769,6 +770,7 @@ CssRuleView.prototype = {
 
     this._viewedElement = aElement;
     if (!this._viewedElement) {
+      this._showEmpty();
       return;
     }
 
@@ -808,6 +810,21 @@ CssRuleView.prototype = {
     this._createEditors();
   },
 
+  /**
+   * Show the user that the rule view has no node selected.
+   */
+  _showEmpty: function CssRuleView_showEmpty()
+  {
+    if (this.doc.getElementById("noResults") > 0) {
+      return;
+    }
+
+    createChild(this.element, "div", {
+      id: "noResults",
+      textContent: CssLogic.l10n("rule.empty")
+    });
+  },
+
   /**
    * Clear the rules.
    */

browser/devtools/styleinspector/test/browser_ruleview_ui.js

@@ -72,7 +72,13 @@ function startTest()
     ruleView = new CssRuleView(doc);
     doc.documentElement.appendChild(ruleView.element);
     ruleView.element.addEventListener("CssRuleViewChanged", ruleViewChanged, false);
+    is(ruleView.element.querySelectorAll("#noResults").length, 1, "Has a no-results element.");
     ruleView.highlight(testElement);
+    is(ruleView.element.querySelectorAll("#noResults").length, 0, "After a highlight, no longer has a no-results element.");
+    ruleView.highlight(null);
+    is(ruleView.element.querySelectorAll("#noResults").length, 1, "After highlighting null, has a no-results element again.");
+    ruleView.highlight(testElement);
+
     waitForFocus(testCancelNew, ruleDialog);
   }, true);
 }

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

@@ -127,3 +127,7 @@ rule.contextmenu.copypropertyvalue.accesskey=U
 ruleView.label=Rules
 ruleView.accesskey=R
 ruleView.tooltiptext=View and Edit CSS
+
+# LOCALIZATION NOTE (ruleView.empty): Text displayed when the highlighter is
+# first opened and there's no node selected in the rule view.
+rule.empty=No element selected.