Bug 1240670 - Hide the filter property search for an unmatched rule r=pbro
authorGabriel Luong <gabriel.luong@gmail.com>
Wed, 20 Jan 2016 15:48:43 -0500
changeset 323651 39b3a840629638233e8e6b180f22bb16ceeea644
parent 323650 546b7fdcb156699da621b0a6743f030b9040785f
child 323652 c6f2522efb3d94f8a6916b69df0e68fad0fa1c7c
push id9762
push usermozilla@noorenberghe.ca
push dateWed, 20 Jan 2016 21:31:00 +0000
reviewerspbro
bugs1240670
milestone46.0a1
Bug 1240670 - Hide the filter property search for an unmatched rule r=pbro
devtools/client/inspector/rules/models/rule.js
devtools/client/inspector/rules/test/browser.ini
devtools/client/inspector/rules/test/browser_rules_edit-selector_07.js
devtools/client/inspector/rules/views/rule-editor.js
devtools/client/inspector/rules/views/text-property-editor.js
--- a/devtools/client/inspector/rules/models/rule.js
+++ b/devtools/client/inspector/rules/models/rule.js
@@ -34,25 +34,28 @@ XPCOMUtils.defineLazyGetter(this, "domUt
  * @param {ElementStyle} elementStyle
  *        The ElementStyle to which this rule belongs.
  * @param {Object} options
  *        The information used to construct this rule.  Properties include:
  *          rule: A StyleRuleActor
  *          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;
   this.domRule = options.rule || null;
   this.style = options.rule;
   this.matchedSelectors = options.matchedSelectors || [];
   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;
 
   if (this.domRule && this.domRule.mediaText) {
     this.mediaText = this.domRule.mediaText;
   }
 
--- a/devtools/client/inspector/rules/test/browser.ini
+++ b/devtools/client/inspector/rules/test/browser.ini
@@ -96,16 +96,17 @@ skip-if = e10s # Bug 1039528: "inspect e
 [browser_rules_edit-selector-click.js]
 [browser_rules_edit-selector-commit.js]
 [browser_rules_edit-selector_01.js]
 [browser_rules_edit-selector_02.js]
 [browser_rules_edit-selector_03.js]
 [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]
 [browser_rules_filtereditor-appears-on-swatch-click.js]
 [browser_rules_filtereditor-commit-on-ENTER.js]
 [browser_rules_filtereditor-revert-on-ESC.js]
 skip-if = (os == "win" && debug) || e10s # bug 963492: win. bug 1040653: e10s.
 [browser_rules_guessIndentation.js]
new file mode 100644
--- /dev/null
+++ b/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.");
+}
--- a/devtools/client/inspector/rules/views/rule-editor.js
+++ b/devtools/client/inspector/rules/views/rule-editor.js
@@ -81,16 +81,17 @@ RuleEditor.prototype = {
     // detect mutations on  pseudo elements in Bug 1034110.
     return trait && !this.rule.elementStyle.element.isAnonymous;
   },
 
   _create: function() {
     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
     // span to be placed absolutely against.
     this.element.style.position = "relative";
 
     // Add the source link.
     this.source = createChild(this.element, "div", {
@@ -489,26 +490,26 @@ RuleEditor.prototype = {
       let {ruleProps, isMatching} = response;
       if (!ruleProps) {
         // Notify for changes, even when nothing changes,
         // just to allow tests being able to track end of this request.
         ruleView.emit("ruleview-invalid-selector");
         return;
       }
 
+      ruleProps.isUnmatched = !isMatching;
       let newRule = new Rule(elementStyle, ruleProps);
       let editor = new RuleEditor(ruleView, newRule);
       let rules = elementStyle.rules;
 
       rules.splice(rules.indexOf(this.rule), 1);
       rules.push(newRule);
       elementStyle._changed();
       elementStyle.markOverriddenAll();
 
-      editor.element.setAttribute("unmatched", !isMatching);
       this.element.parentNode.replaceChild(editor.element, this.element);
 
       // Remove highlight for modified selector
       if (ruleView.highlightedSelector) {
         ruleView.toggleSelectorHighlighter(ruleView.lastSelectorIcon,
           ruleView.highlightedSelector);
       }
 
--- a/devtools/client/inspector/rules/views/text-property-editor.js
+++ b/devtools/client/inspector/rules/views/text-property-editor.js
@@ -294,17 +294,18 @@ TextPropertyEditor.prototype = {
     } else {
       this.enable.style.visibility = "visible";
       this.enable.removeAttribute("checked");
     }
 
     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 ||
          !this.prop.isKnownProperty())) {
       this.element.classList.add("ruleview-overridden");
     } else {
       this.element.classList.remove("ruleview-overridden");
     }