Bug 208562

Summary: Web Inspector: AXI: no way to expand/collapse sidebar sections with Tab navigation
Product: WebKit Reporter: Nikita Vasilyev <nvasilyev>
Component: Web InspectorAssignee: Nikita Vasilyev <nvasilyev>
Status: RESOLVED FIXED    
Severity: Normal CC: commit-queue, hi, inspector-bugzilla-changes, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: All   
OS: All   
Attachments:
Description Flags
Patch
hi: review+
[Video] With patch applied
none
Patch none

Description Nikita Vasilyev 2020-03-03 23:34:22 PST
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.
Comment 1 Radar WebKit Bug Importer 2020-03-03 23:34:32 PST
<rdar://problem/60028941>
Comment 2 Nikita Vasilyev 2020-03-06 18:28:40 PST
Created attachment 392828 [details]
Patch
Comment 3 Nikita Vasilyev 2020-03-06 18:31:57 PST
Created attachment 392829 [details]
[Video] With patch applied
Comment 4 Devin Rousso 2020-03-06 20:14:27 PST
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)?
Comment 5 Nikita Vasilyev 2020-03-06 20:33:04 PST
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.
Comment 6 Nikita Vasilyev 2020-03-06 20:34:53 PST
Created attachment 392845 [details]
Patch
Comment 7 WebKit Commit Bot 2020-03-06 21:23:03 PST
Comment on attachment 392845 [details]
Patch

Clearing flags on attachment: 392845

Committed r258058: <https://trac.webkit.org/changeset/258058>
Comment 8 WebKit Commit Bot 2020-03-06 21:23:04 PST
All reviewed patches have been landed.  Closing bug.