Bug 203308 – Web Inspector: Styles: un-experimentalize showing rule icons

• Component: Web Inspector
• Status: RESOLVED FIXED

[Devin Rousso]

I've been living on this for a while, and there have been no issues.

[Matt Baker]

FWIW, I really dislike the rule icons. Part of the sidebar cleanup Nikita did recently was to simplify a lot of the visual clutter that has plagued this sidebar.

The icons add a clickable context-menu target, which is nice, but it would be great if there was another way to get that functionality without adding back these hideous icons.

[Devin Rousso]

Created attachment 381713 [details]
Patch

[Joseph Pecoraro]

(In reply to Matt Baker from comment #1)
> FWIW, I really dislike the rule icons. Part of the sidebar cleanup Nikita
> did recently was to simplify a lot of the visual clutter that has plagued
> this sidebar.

The visual clutter that I recall was inside the properties itself (warning icons, strikethroughs, etc).

> The icons add a clickable context-menu target, which is nice, but it would
> be great if there was another way to get that functionality without adding
> back these hideous icons.

FWIW, the icons were discussed over here, and I think my comment still stands:
https://bugs.webkit.org/show_bug.cgi?id=199946#c16

> I think adding icons provides the following benefits with no obvious drawbacks:
> 
>     (1) Distinguishing CSS "Rule" Types and providing visual anchors for rule sections
>         Types:
>           • Style Attribute
>           • Author Rule
>           • Inherited Rule
>           • User Agent Rule
>           • Pseudo Element Rule
> 
>     (2) Provides a convenient Hit Target for Discovery and Activation of Useful Actions associated with the "Rule"
>         Actions:
>           • Copy (selector + properties)
>           • Enable/Disable
>           • Duplicate (starting point to create a new rule like this one much easier then typing it all out from scratch)
> 
> None of these have corollaries in the current sidebar.
> 
>     • Finding a pseudo element selector in the current design means reading the bold and only bold text of each selector in a list which may be difficult in a list of complex selectors.
>     • Finding the next selector in a list of complex selectors is not easy as it could be, you have to find the thin gray line and the typically obfuscated link
>     • Copying an entire CSS Rule (selector + properties) is not possible today without a seemingly broken selection rect
>     • Enabling / Disabling all properties in a rule takes many clicks or deleting the properties
>     • Duplicating a Rule is not possible today today without copying and pasting a few times or re-typing the full selector
> 
> So I see a lot of benefits to this without any drawbacks.


Can you enumerate why you think the icons are "hideous"?

It sounds like you agree with (2) but don't disagree in the value of (1). Is that the case, or do you still see (1) as valuable and just dislike the UI we are using?

[Matt Baker]

(In reply to Joseph Pecoraro from comment #3)
> (In reply to Matt Baker from comment #1)
> > FWIW, I really dislike the rule icons. Part of the sidebar cleanup Nikita
> > did recently was to simplify a lot of the visual clutter that has plagued
> > this sidebar.
> 
> The visual clutter that I recall was inside the properties itself (warning
> icons, strikethroughs, etc).
> 
> > The icons add a clickable context-menu target, which is nice, but it would
> > be great if there was another way to get that functionality without adding
> > back these hideous icons.
> 
> FWIW, the icons were discussed over here, and I think my comment still
> stands:
> https://bugs.webkit.org/show_bug.cgi?id=199946#c16
> 
> > I think adding icons provides the following benefits with no obvious drawbacks:
> > 
> >     (1) Distinguishing CSS "Rule" Types and providing visual anchors for rule sections
> >         Types:
> >           • Style Attribute
> >           • Author Rule
> >           • Inherited Rule
> >           • User Agent Rule
> >           • Pseudo Element Rule
> > 
> >     (2) Provides a convenient Hit Target for Discovery and Activation of Useful Actions associated with the "Rule"
> >         Actions:
> >           • Copy (selector + properties)
> >           • Enable/Disable
> >           • Duplicate (starting point to create a new rule like this one much easier then typing it all out from scratch)
> > 
> > None of these have corollaries in the current sidebar.
> > 
> >     • Finding a pseudo element selector in the current design means reading the bold and only bold text of each selector in a list which may be difficult in a list of complex selectors.
> >     • Finding the next selector in a list of complex selectors is not easy as it could be, you have to find the thin gray line and the typically obfuscated link
> >     • Copying an entire CSS Rule (selector + properties) is not possible today without a seemingly broken selection rect
> >     • Enabling / Disabling all properties in a rule takes many clicks or deleting the properties
> >     • Duplicating a Rule is not possible today today without copying and pasting a few times or re-typing the full selector
> > 
> > So I see a lot of benefits to this without any drawbacks.
> 
> 
> Can you enumerate why you think the icons are "hideous"?

That was a bit dramatic. My only problem with the icons is just that, IMO, they visually clutter the UI.

> It sounds like you agree with (2) but don't disagree in the value of (1). Is
> that the case, or do you still see (1) as valuable and just dislike the UI
> we are using?

This is a fair assessment. I don't find the following helpful/necessary (again, just my opinion/personal taste):
- Distinguishing the rule type
- Visually anchoring the rule
- Helping to find the next selector

I do agree that having a UI for doing things like duplicating and copying rules is very useful. I suppose there really isn't another place to locate such a UI, and I definitely don't have any good suggestions, so this seems fine.

[Joseph Pecoraro]

Comment on attachment 381713 [details]
Patch

rs=me

[WebKit Commit Bot]

Comment on attachment 381713 [details]
Patch

Clearing flags on attachment: 381713

Committed r251624: <https://trac.webkit.org/changeset/251624>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Radar WebKit Bug Importer]

<rdar://problem/56639816>