1574054 - [RTL] Navigating through devtools tabs with arrow keys is reversed

Status: VERIFIED FIXED

(DevTools :: Inspector, defect, P3)

Description

[Itiel]

Using Windows 10, latest Nightly.

STR:

1. In about:config change 'intl.uidirection' to 1 and restart Nightly
2. Open devtools
3. Focus e.g. the Inspector tab
4. Press the left arrow key to move to the devtools tab on the left

AR:
Focus goes to the tab on Inspector's right.

ER:
Focus should have gone to the tab on the left.

Comment 1

[Itiel]

The same applies to the Inspector inner tabs.

Comment 2

[Brad Werth [:bradwerth]]

Thank you for finding this.

Comment 3

[Razvan Caliman [:rcaliman]]

The Tabs component (devtools/client/shared/components/tabs/Tabs.js) seems to handle highlighting the tabs on arrow key press, but it doesn't take into account the document language direction.

    onKeyDown(event) {
      // Bail out if the focus isn't on a tab.
      if (!event.target.closest(".tabs-menu-item")) {
        return;
      }

      let activeTab = this.state.activeTab;
      const tabCount = this.props.children.length;

      switch (event.code) {
        case "ArrowRight":
          activeTab = Math.min(tabCount - 1, activeTab + 1);
          break;
        case "ArrowLeft":
          activeTab = Math.max(0, activeTab - 1);
          break;
      }

      if (this.state.activeTab != activeTab) {
        this.setActive(activeTab);
      }
    }

With a bit of guidance, I believe this could be a good candidate for a good-first-bug.
I'll assign myself as a mentor and help anyone who wants to work on it.

To get your development set up, please start here: https://docs.firefox-dev.tools/

Comment 4

[Maxime Vaillancourt]

Hi! Going to try and tackle this. I'll submit an initial patch, though I feel like I'll need some help for tests.

Comment 5

[Maxime Vaillancourt]

Attachment: Bug 1574054 - Fix arrow keys behavior on tabs when document direction is RTL. r=rcaliman

Fix arrow keys behavior on tabs when document direction is RTL

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/6847c6c481f3
Fix arrow keys behavior on tabs when document direction is RTL. r=rcaliman

Comment 7

[Raul Gurzau (:RaulG)]

https://hg.mozilla.org/mozilla-central/rev/6847c6c481f3