Bug 212064

Summary:

Web Inspector: Left/Right arrow keys should collapse/expand details sections

Product:

WebKit

Reporter:

Nikita Vasilyev <nvasilyev>

Component:

Web Inspector

Assignee:

Nikita Vasilyev <nvasilyev>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

hi, inspector-bugzilla-changes, webkit-bug-importer

Priority:

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-05-19 00:13:49 PDT

Steps:
1. Open Elements tab
2. Select Computed tab
3. Focus on "Box Model" section header
4. Press Arrow Right

Expected:
Section expands.

Actual:
Nothing happens.

Notes:
In DOM tree outline, left/right keys collapse/expand the selected tree branch.
However, the details sections currently don't collapse/expand by pressing left/right keys.

Comment 1 Radar WebKit Bug Importer 2020-05-19 00:23:57 PDT

<rdar://problem/63384091>

Comment 2 Nikita Vasilyev 2020-05-19 00:24:03 PDT

Created attachment 399715 [details]
Patch

Comment 3 Nikita Vasilyev 2020-05-19 00:24:42 PDT

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

Comment 4 Devin Rousso 2020-05-20 10:50:28 PDT

Comment on attachment 399715 [details]
Patch

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

r=me

> Source/WebInspectorUI/UserInterface/Views/DetailsSection.js:40
> +        this._headerElement.addEventListener("keydown", this._headerElementKeyDown.bind(this));

NIT: I've been trying to move away from `_on*` method names, as I find `_handle*` to be clearer.

> Source/WebInspectorUI/UserInterface/Views/DetailsSection.js:161
> +        if (this._optionsElement?.contains(event.target))
> +            return;

NIT: this could probably be earlier given that it doesn't care about `isSpaceOrEnterKey`.

> Source/WebInspectorUI/UserInterface/Views/DetailsSection.js:166
> +            this.collapsed = !this.collapsed;

NIT: early `return`?

> Source/WebInspectorUI/UserInterface/Views/ExpandableView.js:35
> +            this._disclosureButton.addEventListener("keydown", this._onDisclosureButtonKeyDown.bind(this));

Ditto (DetailsSection.js:40)

Comment 5 Nikita Vasilyev 2020-05-20 14:35:57 PDT

Comment on attachment 399715 [details]
Patch

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

>> Source/WebInspectorUI/UserInterface/Views/DetailsSection.js:161
>> +            return;
> 
> NIT: this could probably be earlier given that it doesn't care about `isSpaceOrEnterKey`.

Yeah, but I intentionally put it here because because `contains` involves DOM traversal. I'd rather not do it on every keydown.

Comment 6 Nikita Vasilyev 2020-05-20 14:36:26 PDT

Created attachment 399893 [details]
Patch

Comment 7 EWS 2020-05-20 15:08:18 PDT

Committed r261962: <https://trac.webkit.org/changeset/261962>

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