diff --git a/browser/devtools/styleinspector/rule-view.js b/browser/devtools/styleinspector/rule-view.js
index 90d533d1250..cd2cba0b75d 100644
--- a/browser/devtools/styleinspector/rule-view.js
+++ b/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");
diff --git a/browser/devtools/styleinspector/ruleview.css b/browser/devtools/styleinspector/ruleview.css
index 48c1bb10235..17872e03b9f 100644
--- a/browser/devtools/styleinspector/ruleview.css
+++ b/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;
}
diff --git a/browser/devtools/styleinspector/test/browser.ini b/browser/devtools/styleinspector/test/browser.ini
index b5b56f4b09d..a78d0ccdad8 100644
--- a/browser/devtools/styleinspector/test/browser.ini
+++ b/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]
diff --git a/browser/devtools/styleinspector/test/browser_ruleview_search-filter-overridden-property.js b/browser/devtools/styleinspector/test/browser_ruleview_search-filter-overridden-property.js
new file mode 100644
index 00000000000..7b8e2983c93
--- /dev/null
+++ b/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 = `
+
+
Styled Node
+`;
+
+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.");
+}
diff --git a/browser/themes/shared/devtools/ruleview.css b/browser/themes/shared/devtools/ruleview.css
index 801a87a9901..cb866d5d9b0 100644
--- a/browser/themes/shared/devtools/ruleview.css
+++ b/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;
}
diff --git a/toolkit/locales/en-US/chrome/global/devtools/styleinspector.properties b/toolkit/locales/en-US/chrome/global/devtools/styleinspector.properties
index 9295a92d732..c7b54cc55cc 100644
--- a/toolkit/locales/en-US/chrome/global/devtools/styleinspector.properties
+++ b/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.