Bug 179654 – Web Inspector: Cleanup navigation bar dividers and separators

• Component: Web Inspector
• Status: RESOLVED FIXED

[Matt Baker]

Two small things:

- Hierarchical path arrow should have a simpler appearance, instead of a tapered arrow head.
- The number of dividers added ContentBrowser to its navigation bar is excessive. It makes sense to have dividers between the regular buttons and the left/right sidebar buttons. Other than that, let content views add their own dividers as needed.

[Radar WebKit Bug Importer]

<rdar://problem/35523734>

[Matt Baker]

Created attachment 326847 [details]
Patch

[Matt Baker]

Created attachment 326849 [details]
[Image] before/after

[Devin Rousso]

Comment on attachment 326847 [details]
Patch

r=me.

I think that changing the chevron is awesome, but I think we might want to adjust the margin to make it more even on both sides.  With this patch (and before it too actually), it looked like the divider was shifted more towards the left, and there was an uneven amount of space when compared to the right side.  I think we should adjust this.

HierarchicalPathComponent.css
    .hierarchical-path-component > .separator {
        --path-component-separator-margin-start: 4px; // or use `-webkit-margin-start: 4px;`
    }

Also, it's slightly weird to have a separator before/after the sidebar icons, but not elsewhere.  I'm not sure if Xcode has anything similar :(

[Matt Baker]

(In reply to Devin Rousso from comment #4)
> Comment on attachment 326847 [details]
> Patch
> 
> r=me.
> 
> I think that changing the chevron is awesome, but I think we might want to
> adjust the margin to make it more even on both sides.  With this patch (and
> before it too actually), it looked like the divider was shifted more towards
> the left, and there was an uneven amount of space when compared to the right
> side.  I think we should adjust this.

I'll take a look.

> 
> HierarchicalPathComponent.css
>     .hierarchical-path-component > .separator {
>         --path-component-separator-margin-start: 4px; // or use
> `-webkit-margin-start: 4px;`
>     }
> 
> Also, it's slightly weird to have a separator before/after the sidebar
> icons, but not elsewhere.  I'm not sure if Xcode has anything similar :(

In general Xcode doesn't use dividers between toolbar items. The only instance I found is in the Debug area, bottom right. A divider separates the filter buttons from the Variables/Console view buttons.

I like using them to separate sidebar buttons from normal buttons, and between groups of related buttons.

[Matt Baker]

Created attachment 326864 [details]
Patch

[Matt Baker]

(In reply to Matt Baker from comment #5)
> (In reply to Devin Rousso from comment #4)
> > Comment on attachment 326847 [details]
> > Patch
> > 
> > r=me.
> > 
> > I think that changing the chevron is awesome, but I think we might want to
> > adjust the margin to make it more even on both sides.  With this patch (and
> > before it too actually), it looked like the divider was shifted more towards
> > the left, and there was an uneven amount of space when compared to the right
> > side.  I think we should adjust this.
> 
> I'll take a look.
> 
> > 
> > HierarchicalPathComponent.css
> >     .hierarchical-path-component > .separator {
> >         --path-component-separator-margin-start: 4px; // or use
> > `-webkit-margin-start: 4px;`
> >     }
> >

Went with 3px, which was an improvement. 4px looked too wide (maybe due to the left column of pixels in the separator SVG being empty space).

[WebKit Commit Bot]

Comment on attachment 326864 [details]
Patch

Clearing flags on attachment: 326864

Committed r224807: <https://trac.webkit.org/changeset/224807>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.