1485243 - Add highlights to the source link, selector and computed properties when filtering styles

Status: RESOLVED FIXED

(DevTools :: Inspector: Rules, enhancement, P3)

Description

[Gabriel Luong [:gl] (ΦωΦ)]

In Bug 1400319, I changed:

.ruleview-highlight {
  background-color: var(--rule-highlight-background-color);
}

to

.ruleview-highlight > .ruleview-namecontainer,
.ruleview-highlight > .ruleview-propertyvaluecontainer {
  background-color: var(--rule-highlight-background-color);
}

to align with the designs I was looking at the time, but we actually missed a lot of selectors to include with this. We used to be able to highlight the selector, source link and computed properties when filtering styles in the Rules view.

Comment 1

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: 1485243.patch

Comment 2

[Brian Grinstead [:bgrins]]

Comment on attachment 9003016 [details] [diff] [review]
1485243.patch

Review of attachment 9003016 [details] [diff] [review]:
-----------------------------------------------------------------

::: devtools/client/themes/rules.css
@@ +531,2 @@
>  .ruleview-highlight > .ruleview-namecontainer,
> +.ruleview-highlight > .ruleview-propertyvaluecontainer,

I guess in this case the .ruleview-namecontainer is the node that gets the .ruleview-highlight class? Since it's now the parent of these nodes.

Comment 3

[Gabriel Luong [:gl] (ΦωΦ)]

Comment on attachment 9003016 [details] [diff] [review]
1485243.patch

Review of attachment 9003016 [details] [diff] [review]:
-----------------------------------------------------------------

::: devtools/client/themes/rules.css
@@ +531,2 @@
>  .ruleview-highlight > .ruleview-namecontainer,
> +.ruleview-highlight > .ruleview-propertyvaluecontainer,

It's .ruleview-propertycontainer and .ruleview-computed that gets the .ruleview-highlight class for the properties. I added a wrapper container around the computed properties so that we can get proper highlighting of the computed properties.

Comment 4

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/88cfe9dfcb97