Bug 1240670 - Hide the filter property search for an unmatched rule r=pbro

devtools/client/inspector/rules/models/rule.js

@@ -39,6 +39,8 @@ XPCOMUtils.defineLazyGetter(this, "domUtils", function() {
  *          inherited: An element this rule was inherited from.  If omitted,
  *            the rule applies directly to the current element.
  *          isSystem: Is this a user agent style?
+ *          isUnmatched: True if the rule does not match the current selected
+ *            element, otherwise, false.
  */
 function Rule(elementStyle, options) {
   this.elementStyle = elementStyle;
@@ -48,6 +50,7 @@ function Rule(elementStyle, options) {
   this.pseudoElement = options.pseudoElement || "";
 
   this.isSystem = options.isSystem;
+  this.isUnmatched = options.isUnmatched || false;
   this.inherited = options.inherited || null;
   this.keyframes = options.keyframes || null;
   this._modificationDepth = 0;

devtools/client/inspector/rules/test/browser.ini

@@ -101,6 +101,7 @@ skip-if = e10s # Bug 1039528: "inspect element" contextual-menu doesn't work wit
 [browser_rules_edit-selector_04.js]
 [browser_rules_edit-selector_05.js]
 [browser_rules_edit-selector_06.js]
+[browser_rules_edit-selector_07.js]
 [browser_rules_editable-field-focus_01.js]
 [browser_rules_editable-field-focus_02.js]
 [browser_rules_eyedropper.js]

devtools/client/inspector/rules/test/browser_rules_edit-selector_07.js

@@ -0,0 +1,62 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view overridden search filter does not appear for an
+// unmatched rule.
+
+const TEST_URI = `
+  <style type="text/css">
+    div {
+      height: 0px;
+    }
+    #testid {
+      height: 1px;
+    }
+    .testclass {
+      height: 10px;
+    }
+  </style>
+  <div id="testid">Styled Node</div>
+  <span class="testclass">This is a span</span>
+`;
+
+add_task(function*() {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
+
+  yield selectNode("#testid", inspector);
+  yield testEditSelector(view, "span");
+});
+
+function* testEditSelector(view, name) {
+  info("Test editing existing selector fields");
+
+  let ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Focusing an existing selector name in the rule-view");
+  let editor = yield focusEditableField(view, ruleEditor.selectorText);
+
+  is(inplaceEditor(ruleEditor.selectorText), editor,
+    "The selector editor got focused");
+
+  info("Entering a new selector name and committing");
+  editor.input.value = name;
+
+  info("Entering the commit key");
+  let onRuleViewChanged = once(view, "ruleview-changed");
+  EventUtils.synthesizeKey("VK_RETURN", {});
+  yield onRuleViewChanged;
+
+  // Get the new rule editor that replaced the original
+  ruleEditor = getRuleViewRuleEditor(view, 1);
+  let rule = ruleEditor.rule;
+  let textPropEditor = rule.textProps[0].editor;
+
+  is(view._elementStyle.rules.length, 3, "Should have 3 rules.");
+  ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
+  ok(ruleEditor.element.getAttribute("unmatched"),
+    "Rule with " + name + " does not match the current element.");
+  ok(textPropEditor.filterProperty.hidden, "Overridden search is hidden.");
+}

devtools/client/inspector/rules/views/rule-editor.js

@@ -86,6 +86,7 @@ RuleEditor.prototype = {
     this.element = this.doc.createElementNS(HTML_NS, "div");
     this.element.className = "ruleview-rule theme-separator";
     this.element.setAttribute("uneditable", !this.isEditable);
+    this.element.setAttribute("unmatched", this.rule.isUnmatched);
     this.element._ruleEditor = this;
 
     // Give a relative position for the inplace editor's measurement
@@ -494,6 +495,7 @@ RuleEditor.prototype = {
         return;
       }
 
+      ruleProps.isUnmatched = !isMatching;
       let newRule = new Rule(elementStyle, ruleProps);
       let editor = new RuleEditor(ruleView, newRule);
       let rules = elementStyle.rules;
@@ -503,7 +505,6 @@ RuleEditor.prototype = {
       elementStyle._changed();
       elementStyle.markOverriddenAll();
 
-      editor.element.setAttribute("unmatched", !isMatching);
       this.element.parentNode.replaceChild(editor.element, this.element);
 
       // Remove highlight for modified selector

devtools/client/inspector/rules/views/text-property-editor.js

@@ -299,7 +299,8 @@ TextPropertyEditor.prototype = {
     this.warning.hidden = this.editing || this.isValid();
     this.filterProperty.hidden = this.editing ||
                                  !this.isValid() ||
-                                 !this.prop.overridden;
+                                 !this.prop.overridden ||
+                                 this.ruleEditor.rule.isUnmatched;
 
     if (!this.editing &&
         (this.prop.overridden || !this.prop.enabled ||