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.