Bug 234036 – Web Inspector: Increase padding around icons in Alignment editor

• Component: Web Inspector
• Status: RESOLVED FIXED

[Nikita Vasilyev]

Increase margin and padding around the icons, making the icons more visually appealing and easier to distinguish and from each other.

[Radar WebKit Bug Importer]

<rdar://problem/86543279>

[Nikita Vasilyev]

Created attachment 448791 [details]
Patch

[Nikita Vasilyev]

Created attachment 448792 [details]
[Image] Before

[Nikita Vasilyev]

Created attachment 448793 [details]
[Image] After

[Devin Rousso]

Comment on attachment 448791 [details]
Patch

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

> Source/WebInspectorUI/ChangeLog:3
> +        Web Inspector: Revamp visual design of Alignment editor

Is this really a "revamp"?  Why not something more descriptive like "Web Inspector: increase padding around icons in Alignment editor"?

> Source/WebInspectorUI/UserInterface/Images/AlignContentStretch.svg:4
> +    <rect x="2" y="9" width="12" height="6" fill="currentColor"/>

Does this still look good in 1x?

> Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.css:30
> +    padding: 2px;

IMO this feels a bit too roomy horizontally.  What does it look like if you did `padding: 2px 1px`?

Along these lines, I personally think it looks better when they're all right next to each other (just like a native segmented control <https://developer.apple.com/design/human-interface-guidelines/macos/selectors/segmented-controls/>).  I suppose one major difference is that we don't fill the background when it's selected, but perhaps we could do that (and invert the black box to a white box)?

> Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.css:38
> +    margin-left: 4px;

`margin-inline-start`?  Speaking of, does the order of this flip in RTL?

[Nikita Vasilyev]

Created attachment 448807 [details]
Patch

[Nikita Vasilyev]

Created attachment 448808 [details]
[Image] After, 1x

(In reply to Devin Rousso from comment #5)
> > Source/WebInspectorUI/UserInterface/Images/AlignContentStretch.svg:4
> > +    <rect x="2" y="9" width="12" height="6" fill="currentColor"/>
> 
> Does this still look good in 1x?

*Now* it does.

Other icons can be improved. Although, most icons on macOS Monterey and Big Sur icons don't look pixel-perfect on 1x either so I don't know how much effort we should put into this going forward.

[Nikita Vasilyev]

Created attachment 448809 [details]
[Image] RTL, Dark mode

[Devin Rousso]

Comment on attachment 448807 [details]
Patch

r=me

[EWS]

Committed r287870 (245914@main): <https://commits.webkit.org/245914@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 448807 [details].