Bug 209617 - Web Inspector: RTL: ArrowLeft and ArrowRight keys select wrong navigation bar items
Summary: Web Inspector: RTL: ArrowLeft and ArrowRight keys select wrong navigation bar...
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: 209625
  Show dependency treegraph
 
Reported: 2020-03-26 13:18 PDT by Nikita Vasilyev
Modified: 2020-03-26 17:12 PDT (History)
3 users (show)

See Also:


Attachments
Patch (2.51 KB, patch)
2020-03-26 13:20 PDT, Nikita Vasilyev
nvasilyev: commit-queue-
Details | Formatted Diff | Diff
Patch (3.33 KB, patch)
2020-03-26 14:44 PDT, Nikita Vasilyev
hi: review+
hi: commit-queue-
Details | Formatted Diff | Diff
Patch (3.36 KB, patch)
2020-03-26 15:52 PDT, Nikita Vasilyev
no flags Details | Formatted Diff | Diff
Patch (3.35 KB, patch)
2020-03-26 16:08 PDT, Nikita Vasilyev
nvasilyev: commit-queue-
Details | Formatted Diff | Diff
Patch (3.49 KB, patch)
2020-03-26 16:40 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-03-26 13:18:19 PDT
Steps:
0. Enable RTL mode
1. Open Elements tab
2. In the right sidebar, focus on "Styles" navigation bar item
3. Press Arrow Left key

Expected:
Item on the left is selected ("Computed").

Actual:
Selection didn't change.
Comment 1 Nikita Vasilyev 2020-03-26 13:20:58 PDT
Created attachment 394651 [details]
Patch
Comment 2 Devin Rousso 2020-03-26 13:58:57 PDT
Comment on attachment 394651 [details]
Patch

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

> Source/WebInspectorUI/UserInterface/Views/NavigationBar.js:383
> +        if (delta === -1) {

Why not combine these into one loop?
Comment 3 Nikita Vasilyev 2020-03-26 14:01:23 PDT
Comment on attachment 394651 [details]
Patch

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

>> Source/WebInspectorUI/UserInterface/Views/NavigationBar.js:383
>> +        if (delta === -1) {
> 
> Why not combine these into one loop?

I can. I simply didn't touch what was working.
Comment 4 Nikita Vasilyev 2020-03-26 14:44:00 PDT
Created attachment 394659 [details]
Patch

Looks much nicer now.
Comment 5 Devin Rousso 2020-03-26 14:57:35 PDT
Comment on attachment 394659 [details]
Patch

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

r=me, with a few changes

> Source/WebInspectorUI/UserInterface/Views/NavigationBar.js:371
> +        if (event.code !== "ArrowLeft" && event.code !== "ArrowRight")

NIT: I'd pull this out into an `isLeftArrow` variable so you can avoid the repeated comparison below

> Source/WebInspectorUI/UserInterface/Views/NavigationBar.js:377
> +        let selectedIndex = this._navigationItems.indexOf(this._selectedNavigationItem);

NIT: I'd put this closer to the `while`, where it's used

> Source/WebInspectorUI/UserInterface/Views/NavigationBar.js:-381
> -            if (selectedNavigationItemIndex === -1)
> -                selectedNavigationItemIndex = this._navigationItems.length;

I think we still need this logic, or at least something like it.
```
    if (selectedIndex === -1)
        selectedIndex = (this._navigationItems.length + delta) % this._navigationItems.length;
```

> Source/WebInspectorUI/UserInterface/Views/NavigationBar.js:383
> +        while (true) {

I generally try to avoid `while (true)` as they can often easily turn into an infinite loop, but the bounding in this case looks fine.  To be really safe, I'd ether add `console.assert(selectedIndex)` or move the first `if` to just be the condition of the `while` itself.

> Source/WebInspectorUI/UserInterface/Views/NavigationBar.js:392
> +                this.selectedNavigationItem?.element.focus();

I don't think we need the `?.`, as it shouldn't be possible for a `WI.RadioButtonNavigationItem` to not have an `element`.
Comment 6 Nikita Vasilyev 2020-03-26 15:07:11 PDT
Comment on attachment 394659 [details]
Patch

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

>> Source/WebInspectorUI/UserInterface/Views/NavigationBar.js:392
>> +                this.selectedNavigationItem?.element.focus();
> 
> I don't think we need the `?.`, as it shouldn't be possible for a `WI.RadioButtonNavigationItem` to not have an `element`.

It checks for `this.selectedNavigationItem` which can be null. Not the element.
Comment 7 Nikita Vasilyev 2020-03-26 15:36:05 PDT
Comment on attachment 394659 [details]
Patch

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

>> Source/WebInspectorUI/UserInterface/Views/NavigationBar.js:-381
>> -                selectedNavigationItemIndex = this._navigationItems.length;
> 
> I think we still need this logic, or at least something like it.
> ```
>     if (selectedIndex === -1)
>         selectedIndex = (this._navigationItems.length + delta) % this._navigationItems.length;
> ```

Currently in NavigationBar, focus doesn't cycle from the last item to the 1st. It *does* cycle in ScopeBar. I have a slight preference for not cycling the focus.
Comment 8 Devin Rousso 2020-03-26 15:36:22 PDT
Comment on attachment 394659 [details]
Patch

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

>>> Source/WebInspectorUI/UserInterface/Views/NavigationBar.js:392
>>> +                this.selectedNavigationItem?.element.focus();
>> 
>> I don't think we need the `?.`, as it shouldn't be possible for a `WI.RadioButtonNavigationItem` to not have an `element`.
> 
> It checks for `this.selectedNavigationItem` which can be null. Not the element.

Err, yes, my mistake 😅

Regardless, it shouldn't be possible for `this.selectedNavigationItem` to not exist in these conditions.  `WI.NavigationBar.prototype.set selectedNavigationItem` will only result in a `null` value for `this.selectedNavitationItem` if:
 - the given `WI.NavigationItem` is attached to a different `WI.NavigationBar`
    => this isn't possible because we're grabbing the `WI.NavigationItem` from `this._navigationItems`, meaning `this` is already the right parent
 - the given `WI.NavigationItem` is `null` or not a `WI.RadioButtonNavigationItem`
    => this isn't possible because of the `if` condition that had to have been true for this code to be run

As such, I think we should be safe to remove it.  Or am I missing something?
Comment 9 Devin Rousso 2020-03-26 15:38:28 PDT
Comment on attachment 394659 [details]
Patch

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

>>> Source/WebInspectorUI/UserInterface/Views/NavigationBar.js:-381
>>> -                selectedNavigationItemIndex = this._navigationItems.length;
>> 
>> I think we still need this logic, or at least something like it.
>> ```
>>     if (selectedIndex === -1)
>>         selectedIndex = (this._navigationItems.length + delta) % this._navigationItems.length;
>> ```
> 
> Currently in NavigationBar, focus doesn't cycle from the last item to the 1st. It *does* cycle in ScopeBar. I have a slight preference for not cycling the focus.

I don't think that's what this does.  I think this just makes it so that if nothing is currently selected (or if somehow the selected `WI.NavigationItem` is not in the list of `_navigationItems`), it selects either the first or the last `WI.NavigationItem` depending on what key was pressed.
Comment 10 Nikita Vasilyev 2020-03-26 15:42:41 PDT
Comment on attachment 394659 [details]
Patch

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

>>>> Source/WebInspectorUI/UserInterface/Views/NavigationBar.js:-381
>>>> -                selectedNavigationItemIndex = this._navigationItems.length;
>>> 
>>> I think we still need this logic, or at least something like it.
>>> ```
>>>     if (selectedIndex === -1)
>>>         selectedIndex = (this._navigationItems.length + delta) % this._navigationItems.length;
>>> ```
>> 
>> Currently in NavigationBar, focus doesn't cycle from the last item to the 1st. It *does* cycle in ScopeBar. I have a slight preference for not cycling the focus.
> 
> I don't think that's what this does.  I think this just makes it so that if nothing is currently selected (or if somehow the selected `WI.NavigationItem` is not in the list of `_navigationItems`), it selects either the first or the last `WI.NavigationItem` depending on what key was pressed.

Oh, you're right.

You just pointed out that this.selectedNavitationItem should never be null here, so this shouldn't be something that could happen.
Comment 11 Nikita Vasilyev 2020-03-26 15:52:50 PDT Comment hidden (obsolete)
Comment 12 Nikita Vasilyev 2020-03-26 16:08:14 PDT
Created attachment 394667 [details]
Patch
Comment 13 Devin Rousso 2020-03-26 16:30:27 PDT
Comment on attachment 394659 [details]
Patch

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

>>>>> Source/WebInspectorUI/UserInterface/Views/NavigationBar.js:-381
>>>>> -                selectedNavigationItemIndex = this._navigationItems.length;
>>>> 
>>>> I think we still need this logic, or at least something like it.
>>>> ```
>>>>     if (selectedIndex === -1)
>>>>         selectedIndex = (this._navigationItems.length + delta) % this._navigationItems.length;
>>>> ```
>>> 
>>> Currently in NavigationBar, focus doesn't cycle from the last item to the 1st. It *does* cycle in ScopeBar. I have a slight preference for not cycling the focus.
>> 
>> I don't think that's what this does.  I think this just makes it so that if nothing is currently selected (or if somehow the selected `WI.NavigationItem` is not in the list of `_navigationItems`), it selects either the first or the last `WI.NavigationItem` depending on what key was pressed.
> 
> Oh, you're right.
> 
> You just pointed out that this.selectedNavitationItem should never be null here, so this shouldn't be something that could happen.

I pointed out that `this.selctedNavigationItem` can't be `null` _below_.  I think this is completely possible for it to be `null` here, such as in the case that a `WI.NavigationBar` doesn't have any `WI.RadioButtonNavigationItem`.
Comment 14 Nikita Vasilyev 2020-03-26 16:40:09 PDT
Created attachment 394675 [details]
Patch
Comment 15 EWS 2020-03-26 17:11:37 PDT
Committed r259094: <https://trac.webkit.org/changeset/259094>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 394675 [details].
Comment 16 Radar WebKit Bug Importer 2020-03-26 17:12:16 PDT
<rdar://problem/60943785>