Bug 208562 – Web Inspector: AXI: no way to expand/collapse sidebar sections with Tab navigation

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector

[Nikita Vasilyev]

Details sections are used in Elements tab (Computed and Node panels), Sources tab (Breakpoints, Resource, Scope Chain), and Storage tab.

There's currently now way to focus on the section with Tab/Shift-Tab navigation.

[Radar WebKit Bug Importer]

<rdar://problem/60028941>

[Nikita Vasilyev]

Created attachment 392828 [details]
Patch

[Nikita Vasilyev]

Created attachment 392829 [details]
[Video] With patch applied

[Devin Rousso]

Comment on attachment 392828 [details]
Patch

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

r=me

> Source/WebInspectorUI/UserInterface/Views/DetailsSection.css:107
> +    margin-top: calc(-1 * var(--details-section-header-vertical-padding));

Some explanation as to why this is necessary would be nice :)

> Source/WebInspectorUI/UserInterface/Views/DetailsSection.css:122
> +    outline-offset: -5px;
> +    border-radius: 9px;

These are oddly specific numbers.  How do you come up with them?

> Source/WebInspectorUI/UserInterface/Views/DetailsSection.js:163
> +        if (event.code === "Space" || event.code === "Enter") {

What's the difference between this (which only appears to be used once or twice in Web Inspector) and `keyIdentifier === "Left"` (which is used a good amount)?

[Nikita Vasilyev]

Comment on attachment 392828 [details]
Patch

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

>> Source/WebInspectorUI/UserInterface/Views/DetailsSection.css:107
>> +    margin-top: calc(-1 * var(--details-section-header-vertical-padding));
> 
> Some explanation as to why this is necessary would be nice :)

I left a comment in the ChangeLog.

>> Source/WebInspectorUI/UserInterface/Views/DetailsSection.css:122
>> +    border-radius: 9px;
> 
> These are oddly specific numbers.  How do you come up with them?

I tweaked the numbers so the outline is optically around the glyph. If we used a different glyph, the numbers would be different.

[Nikita Vasilyev]

Created attachment 392845 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 392845 [details]
Patch

Clearing flags on attachment: 392845

Committed r258058: <https://trac.webkit.org/changeset/258058>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.