Bug 227707 – Web Inspector: Elements Tab Details Sidebar navigation items sometime wrap to a second line

• Component: Web Inspector
• Status: RESOLVED FIXED

[Patrick Angle]

Created attachment 432938 [details]
Screen Recording of Issue

At very narrow widths, the navigation items for the details sidebar can wrap, resulting in a strange-looking appearance. It appears adding the `Layout` item revealed this existing bug.

[Radar WebKit Bug Importer]

<rdar://problem/80213546>

[Patrick Angle]

Created attachment 432948 [details]
Patch v1.0

[Patrick Angle]

Created attachment 432951 [details]
Screen Recording of Patch v1.0

[Devin Rousso]

Comment on attachment 432948 [details]
Patch v1.0

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

r=me, nice fix :)

> Source/WebInspectorUI/ChangeLog:19
> +         When accumulating item widths, use the ceiling of the width to make up for slight imprecision in cumulative
> +        sizing in order to get sizing just a bit larger than the item, instead of possibly just a bit smaller.

NIT: this is basically a repeat of the above, so I'd either remove the above or remove this

> Source/WebInspectorUI/UserInterface/Views/NavigationBar.js:226
> +            return visibleNavigationItems.reduce((total, item) => total + Math.ceil(item.width), 0);

There's another `navigationItem.width` on :255.  Should we `Math.ceil` that too?

[Patrick Angle]

Comment on attachment 432948 [details]
Patch v1.0

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

>> Source/WebInspectorUI/UserInterface/Views/NavigationBar.js:226
>> +            return visibleNavigationItems.reduce((total, item) => total + Math.ceil(item.width), 0);
> 
> There's another `navigationItem.width` on :255.  Should we `Math.ceil` that too?

Yes, since we are using `ceil` to calculate the amount we are now subtracting from. This is what I get for having my search be in case-sensitive mode 😅

[Patrick Angle]

Created attachment 432958 [details]
Patch v1.1 - Review notes

[EWS]

Committed r279613 (239434@main): <https://commits.webkit.org/239434@main>

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