Bug 159634 – Web Inspector: Simplify CSS selectors for Visual Styles sidebar

• Component: Web Inspector
• Status: RESOLVED CONFIGURATION CHANGED

[Nikita Vasilyev]

Many CSS selectors of Visual Styles sidebar are deeply nested and extremely verbose:

    .sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row > .visual-style-property-container > .visual-style-property-title

Often, it can be reduced to:

    .visual-style-property-title

[Radar WebKit Bug Importer]

<rdar://problem/27282143>

[Nikita Vasilyev]

Created attachment 283693 [details]
Patch

[Joseph Pecoraro]

Comment on attachment 283693 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=283693&action=review

> Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css:30
> -.sidebar > .panel.details.css-style .visual > .details-section .details-section > .header > .visual-style-section-clear {
> +.visual-style-section-clear {

This affects the specificity of these selectors. This one for example is a huge change in specificity and changes common properties (like position, and width). How sure are we that this doesn't cause any breakage?

[Timothy Hatcher]

Comment on attachment 283693 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=283693&action=review

>> Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css:30
>> +.visual-style-section-clear {
> 
> This affects the specificity of these selectors. This one for example is a huge change in specificity and changes common properties (like position, and width). How sure are we that this doesn't cause any breakage?

I am also worried about this. Yes, this is still a unique selector. But it does now become possible to easily conflict with it.

I agree dropping ".sidebar > .panel.details.css-style" for all rules is likely fine. Going further is not worth it, or needs done in a follow up with more testing.

[Nikita Vasilyev]

(In reply to comment #3)
> Comment on attachment 283693 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=283693&action=review
> 
> > Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css:30
> > -.sidebar > .panel.details.css-style .visual > .details-section .details-section > .header > .visual-style-section-clear {
> > +.visual-style-section-clear {
> 
> This affects the specificity of these selectors. This one for example is a
> huge change in specificity and changes common properties (like position, and
> width). How sure are we that this doesn't cause any breakage?

I looked at all its usages:

$ ack -Q '.visual-style-section-clear' --css
UserInterface/Views/VisualStyleDetailsPanel.css
30:.visual-style-section-clear {
40:.details-section.collapsed > .header > .visual-style-section-clear,
41:.details-section .details-section:not(.modified) > .header > .visual-style-section-clear {

I didn't see any other CSS rules applying to the same selector, e.g. .blah > div.

[Nikita Vasilyev]

I agree that this patch looks dangerous. I'll split it into a several patches.

Going forward, I'll try to review CSS changes so we don't get too many deeply nested selectors in the first place.

[Devin Rousso]

The Visual styles sidebar was removed in r236298 <https://webkit.org/b/189807>.