Bug 212064 - Web Inspector: Left/Right arrow keys should collapse/expand details sections
Summary: Web Inspector: Left/Right arrow keys should collapse/expand details sections
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nikita Vasilyev
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-05-19 00:13 PDT by Nikita Vasilyev
Modified: 2020-05-20 15:08 PDT (History)
3 users (show)

See Also:


Attachments
Patch (5.37 KB, patch)
2020-05-19 00:24 PDT, Nikita Vasilyev
hi: review+
Details | Formatted Diff | Diff
[Video] With patch applied (484.92 KB, video/quicktime)
2020-05-19 00:24 PDT, Nikita Vasilyev
no flags Details
Patch (5.46 KB, patch)
2020-05-20 14:36 PDT, Nikita Vasilyev
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
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].