Bug 1151943 - Part 2: Add a search button next to overridden properties to filter for similar properties r=pbro

browser/devtools/styleinspector/rule-view.js

@@ -3032,6 +3032,19 @@ TextPropertyEditor.prototype = {
       title: CssLogic.l10n("rule.warning.title"),
     });
 
+    // Filter button that filters for the current property name and is
+    // displayed when the property is overridden by another rule.
+    this.filterProperty = createChild(this.container, "div", {
+      class: "ruleview-overridden-rule-filter",
+      hidden: "",
+      title: CssLogic.l10n("rule.filterProperty.title"),
+    });
+
+    this.filterProperty.addEventListener("click", event => {
+      this.ruleEditor.ruleView.setFilterStyles("`" + this.prop.name + "`");
+      event.stopPropagation();
+    }, false);
+
     // Holds the viewers for the computed properties.
     // will be populated in |_updateComputed|.
     this.computed = createChild(this.element, "ul", {
@@ -3159,6 +3172,9 @@ TextPropertyEditor.prototype = {
     }
 
     this.warning.hidden = this.editing || this.isValid();
+    this.filterProperty.hidden = this.editing ||
+                                 !this.isValid() ||
+                                 !this.prop.overridden;
 
     if (this.prop.overridden || !this.prop.enabled) {
       this.element.classList.add("ruleview-overridden");

browser/devtools/styleinspector/ruleview.css

@@ -70,7 +70,7 @@ body {
 
 .ruleview-propertyvaluecontainer {
   cursor: text;
-  padding-right: 15px;
+  padding-right: 5px;
 }
 
 .ruleview-propertyvaluecontainer a {
@@ -78,6 +78,7 @@ body {
 }
 
 .ruleview-computedlist,
+.ruleview-overridden-rule-filter[hidden],
 .ruleview-warning[hidden] {
   display: none;
 }

browser/devtools/styleinspector/test/browser.ini

@@ -150,6 +150,7 @@ skip-if = e10s # Bug 1090340
 [browser_ruleview_search-filter-computed-list_03.js]
 [browser_ruleview_search-filter-computed-list_04.js]
 [browser_ruleview_search-filter-computed-list_expander.js]
+[browser_ruleview_search-filter-overridden-property.js]
 [browser_ruleview_search-filter_01.js]
 [browser_ruleview_search-filter_02.js]
 [browser_ruleview_search-filter_03.js]

browser/devtools/styleinspector/test/browser_ruleview_search-filter-overridden-property.js

@@ -0,0 +1,74 @@
+/* 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/ */
+
+"use strict";
+
+// Tests that the rule view overriden search filter works properly for
+// overridden properties.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    width: 100%;
+  }
+  h1 {
+    width: 50%;
+  }
+  </style>
+  <h1 id='testid' class='testclass'>Styled Node</h1>
+`;
+
+add_task(function*() {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
+  yield selectNode("#testid", inspector);
+  yield testFilterOverriddenProperty(inspector, view);
+});
+
+function* testFilterOverriddenProperty(inspector, ruleView) {
+  info("Check that the correct rules are visible");
+  is(ruleView.element.children.length, 3, "Should have 3 rules.");
+
+  let rule = getRuleViewRuleEditor(ruleView, 1).rule;
+  let textPropEditor = rule.textProps[0].editor;
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(!textPropEditor.element.classList.contains("ruleview-overridden"),
+    "width property is not overridden.");
+  ok(textPropEditor.filterProperty.hidden,
+    "Overridden search button is hidden.");
+
+  rule = getRuleViewRuleEditor(ruleView, 2).rule;
+  textPropEditor = rule.textProps[0].editor;
+  is(rule.selectorText, "h1", "Third rule is h1.");
+  ok(textPropEditor.element.classList.contains("ruleview-overridden"),
+    "width property is overridden.");
+  ok(!textPropEditor.filterProperty.hidden,
+    "Overridden search button is not hidden.");
+
+  let searchField = ruleView.searchField;
+  let onRuleViewFiltered = inspector.once("ruleview-filtered");
+
+  info("Click the overridden search");
+  textPropEditor.filterProperty.click();
+  yield onRuleViewFiltered;
+
+  info("Check that the overridden search is applied");
+  is(searchField.value, "`width`", "The search field value is width.");
+
+  rule = getRuleViewRuleEditor(ruleView, 1).rule;
+  textPropEditor = rule.textProps[0].editor;
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(textPropEditor.container.classList.contains("ruleview-highlight"),
+    "width property is correctly highlighted.");
+
+  rule = getRuleViewRuleEditor(ruleView, 2).rule;
+  textPropEditor = rule.textProps[0].editor;
+  is(rule.selectorText, "h1", "Third rule is h1.");
+  ok(textPropEditor.container.classList.contains("ruleview-highlight"),
+    "width property is correctly highlighted.");
+  ok(textPropEditor.element.classList.contains("ruleview-overridden"),
+    "width property is overridden.");
+  ok(!textPropEditor.filterProperty.hidden,
+    "Overridden search button is not hidden.");
+}

browser/themes/shared/devtools/ruleview.css

@@ -5,10 +5,12 @@
 /* CSS Variables specific to this panel that aren't defined by the themes */
 .theme-light {
   --rule-highlight-background-color: #ffee99;
+  --rule-filter-icon: url(magnifying-glass-light.png);
 }
 
 .theme-dark {
   --rule-highlight-background-color: #594724;
+  --rule-filter-icon: url(magnifying-glass.png);
 }
 
 .ruleview {
@@ -105,18 +107,25 @@
   background-size: 13px 12px;
   -moz-margin-start: 5px;
   display: inline-block;
-  vertical-align: top;
   width: 13px;
   height: 12px;
 }
 
-
 @media (min-resolution: 1.1dppx) {
   .ruleview-warning {
     background-image: url(alerticon-warning@2x.png);
   }
 }
 
+.ruleview-overridden-rule-filter {
+  background-image: var(--rule-filter-icon);
+  background-size: 11px 11px;
+  -moz-margin-start: 5px;
+  display: inline-block;
+  width: 11px;
+  height: 11px;
+}
+
 .ruleview-ruleopen {
   -moz-padding-end: 5px;
 }
@@ -302,13 +311,15 @@
  * the state
  */
 #ruleview-add-rule-button,
-#pseudo-class-panel-toggle {
+#pseudo-class-panel-toggle,
+.ruleview-overridden-rule-filter {
   opacity: 0.8;
 }
 
 #ruleview-add-rule-button:not([disabled]):hover,
 #pseudo-class-panel-toggle:hover,
-#pseudo-class-panel-toggle[checked] {
+#pseudo-class-panel-toggle[checked],
+.ruleview-overridden-rule-filter:hover {
   opacity: 1;
 }
 

toolkit/locales/en-US/chrome/global/devtools/styleinspector.properties

@@ -64,6 +64,11 @@ helpLinkTitle=Read the documentation for this property
 # the title attribute of the warning icon.
 rule.warning.title=Invalid property value
 
+# LOCALIZATION NOTE (rule.filterProperty.title): Text displayed in the tooltip
+# of the search button that is shown next to a property that has been overridden
+# in the rule view.
+rule.filterProperty.title=Filter rules containing this property
+
 # 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.