[A11y] Add move left/right operation to tab context menu

Currently, users are unable to change the position of tab items in tab
component using single point mode of operation. This fix introduces a
"move left/right" option in the context menu, allowing users who have
difficulty dragging tab items to change their positions with a click.
Screenshot: https://imgur.com/a/cNAr7qE

Bug: 383164782
Change-Id: I98e61c224b60f2be0d17e9f44599b783bac4fc66
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6086108
Reviewed-by: Simon Zünd <[email protected]>
Reviewed-by: Nancy Li <[email protected]>
Commit-Queue: Yanling Wang <[email protected]>

Author: yanlingwang23

front_end/ui/legacy/TabbedPane.ts

@@ -75,6 +75,14 @@ const UIStrings = {
    *@description Indicates that a tab contains a preview feature (i.e., a beta / experimental feature).
    */
   previewFeature: 'Preview feature',
+  /**
+   * @description Text to move a tab forwar.
+   */
+  moveTabRight: 'Move right',
+  /**
+   * @description Text to move a tab backward.
+   */
+  moveTabLeft: 'Move left',
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/TabbedPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -387,6 +395,21 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.selectTab(this.tabs[nextIndex].id, true);
   }
 
+  getTabIndex(id: string): number {
+    const index = this.tabs.indexOf((this.tabsById.get(id) as TabbedPaneTab));
+    return index;
+  }
+
+  moveTabBackward(id: string, index: number): void {
+    this.insertBefore((this.tabsById.get(id) as TabbedPaneTab), index - 1);
+    this.updateTabSlider();
+  }
+
+  moveTabForward(id: string, index: number): void {
+    this.insertBefore((this.tabsById.get(id) as TabbedPaneTab), index + 2);
+    this.updateTabSlider();
+  }
+
   lastOpenedTabIds(tabsCount: number): string[] {
     function tabToTabId(tab: TabbedPaneTab): string {
       return tab.id;
@@ -1317,6 +1340,14 @@ export class TabbedPaneTab {
       this.closeTabs(this.tabbedPane.tabsToTheRight(this.id));
     }
 
+    function moveTabForward(this: TabbedPaneTab, tabIndex: number): void {
+      this.tabbedPane.moveTabForward(this.id, tabIndex);
+    }
+
+    function moveTabBackward(this: TabbedPaneTab, tabIndex: number): void {
+      this.tabbedPane.moveTabBackward(this.id, tabIndex);
+    }
+
     const contextMenu = new ContextMenu(event);
     if (this.closeable) {
       contextMenu.defaultSection().appendItem(i18nString(UIStrings.close), close.bind(this), {jslogContext: 'close'});
@@ -1331,6 +1362,15 @@ export class TabbedPaneTab {
     if (this.delegate) {
       this.delegate.onContextMenu(this.id, contextMenu);
     }
+    const tabIndex = this.tabbedPane.getTabIndex(this.id);
+    if (tabIndex > 0) {
+      contextMenu.defaultSection().appendItem(
+          i18nString(UIStrings.moveTabLeft), moveTabBackward.bind(this, tabIndex), {jslogContext: 'move-tab-backward'});
+    }
+    if (tabIndex < this.tabbedPane.tabsElement.childNodes.length - 1) {
+      contextMenu.defaultSection().appendItem(
+          i18nString(UIStrings.moveTabRight), moveTabForward.bind(this, tabIndex), {jslogContext: 'move-tab-forward'});
+    }
     void contextMenu.show();
   }
 

front_end/ui/visual_logging/KnownContextValues.ts

@@ -2314,6 +2314,8 @@ export const knownContextValues = new Set([
   'mouseover',
   'mouseup',
   'mousewheel',
+  'move-tab-backward',
+  'move-tab-forward',
   'move-to-bottom',
   'move-to-top',
   'mr',