Use Widget mechanism for TabbedPane and CountersGraph

Chromium CL to remove test and temporary disable another one
https://crrev.com/c/6935448

Bug: 444247021
Change-Id: If9920aaa5419f95a08e4de316751a5749f5c7252
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6935524
Reviewed-by: Ergün Erdoğmuş <ergunsh@chromium.org>
Commit-Queue: Nikolay Vitkov <nvitkov@chromium.org>

Author: Lightning00Blade

front_end/panels/timeline/CountersGraph.ts

@@ -137,7 +137,7 @@ export class CountersGraph extends UI.Widget.VBox {
     if (event.updateType === 'RESET' || event.updateType === 'VISIBLE_WINDOW') {
       const newWindow = event.state.milli.timelineTraceWindow;
       this.calculator.setWindow(newWindow.min, newWindow.max);
-      this.#scheduleRefresh();
+      this.requestUpdate();
     }
   }
 
@@ -153,7 +153,7 @@ export class CountersGraph extends UI.Widget.VBox {
       this.counters[i].reset();
       this.counterUI[i].reset();
     }
-    this.#scheduleRefresh();
+    this.requestUpdate();
     let counterEventsFound = 0;
     for (let i = 0; i < events.length; ++i) {
       const event = events[i];
@@ -208,8 +208,8 @@ export class CountersGraph extends UI.Widget.VBox {
     this.refresh();
   }
 
-  #scheduleRefresh(): void {
-    UI.UIUtils.invokeOnceAfterBatchUpdate(this, this.refresh);
+  override performUpdate(): Promise<void>|void {
+    this.refresh();
   }
 
   draw(): void {

front_end/ui/legacy/BUILD.gn

@@ -192,6 +192,7 @@ ts_library("unittests") {
     "ShortcutRegistry.test.ts",
     "SplitWidget.test.ts",
     "SuggestBox.test.ts",
+    "TabbedPane.test.ts",
     "Toolbar.test.ts",
     "Treeoutline.test.ts",
     "UIUtils.test.ts",

front_end/ui/legacy/TabbedPane.test.ts

@@ -0,0 +1,102 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Platform from '../../core/platform/platform.js';
+import {doubleRaf, raf, renderElementIntoDOM} from '../../testing/DOMHelpers.js';
+import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
+
+import * as UI from './legacy.js';
+
+describeWithEnvironment('TabbedPane', () => {
+  let tabbedPane: UI.TabbedPane.TabbedPane;
+
+  /**
+   * A simple widget class that can receive focus.
+   */
+  class FocusableWidget extends UI.Widget.Widget {
+    constructor(name: string) {
+      super();
+      this.element.tabIndex = -1;  // Make it focusable
+      this.element.textContent = name;
+      this.setDefaultFocusedElement(this.element);
+    }
+  }
+
+  /**
+   * This hook runs before each test case (`it(...)`).
+   * It sets up a new TabbedPane and populates it with 10 tabs.
+   */
+  beforeEach(async () => {
+    tabbedPane = new UI.TabbedPane.TabbedPane();
+    tabbedPane.markAsRoot();
+
+    for (let i = 0; i < 10; i++) {
+      tabbedPane.appendTab(i.toString(), `Tab ${i}`, new FocusableWidget(`Widget ${i}`));
+    }
+    renderElementIntoDOM(tabbedPane);
+    await doubleRaf();
+  });
+
+  const dispatchKeyEvent = (key: string) => {
+    const activeElement = Platform.DOMUtilities.deepActiveElement(document);
+    if (activeElement) {
+      activeElement.dispatchEvent(new KeyboardEvent('keydown', {key, bubbles: true, cancelable: true}));
+    }
+  };
+
+  const getFocusedElementText = () => {
+    const activeElement = Platform.DOMUtilities.deepActiveElement(document);
+    return activeElement ? activeElement.textContent : null;
+  };
+
+  it('should navigate between tabs using arrow keys and wrap around', async () => {
+    // Focus the first tab to start the test.
+    tabbedPane.selectTab('0');
+    tabbedPane.focusSelectedTabHeader();
+    await raf();
+
+    assert.strictEqual(getFocusedElementText(), 'Tab 0', 'Initial focus should be on Tab 0');
+
+    // Move right to the next tab.
+    dispatchKeyEvent('ArrowRight');
+    assert.strictEqual(getFocusedElementText(), 'Tab 1', 'Focus should move to Tab 1');
+
+    // Move to the last tab.
+    for (let i = 2; i <= 9; i++) {
+      dispatchKeyEvent('ArrowRight');
+    }
+    assert.strictEqual(getFocusedElementText(), 'Tab 9', 'Focus should be on the last tab');
+
+    // Wrap around to the first tab when moving right from the last tab.
+    dispatchKeyEvent('ArrowRight');
+    assert.strictEqual(getFocusedElementText(), 'Tab 0', 'Focus should wrap around to Tab 0');
+
+    // Wrap around to the last tab when moving left from the first tab.
+    dispatchKeyEvent('ArrowLeft');
+    assert.strictEqual(getFocusedElementText(), 'Tab 9', 'Focus should wrap around to Tab 9 on left arrow');
+  });
+
+  it('should focus the widget content when Enter is pressed on a tab', () => {
+    // Start with the second tab focused.
+    tabbedPane.selectTab('1');
+    tabbedPane.focusSelectedTabHeader();
+    assert.strictEqual(getFocusedElementText(), 'Tab 1', 'Initial focus should be on Tab 1');
+
+    // Press 'Enter' to focus the widget inside the tab's view.
+    dispatchKeyEvent('Enter');
+    assert.strictEqual(getFocusedElementText(), 'Widget 1', 'Focus should move to Widget 1');
+
+    // For the next step, manually re-focus the tab element, as the user would via Shift+Tab.
+    tabbedPane.focusSelectedTabHeader();
+    assert.strictEqual(getFocusedElementText(), 'Tab 1', 'Focus returned to Tab 1');
+
+    // Move left to Tab 0.
+    dispatchKeyEvent('ArrowLeft');
+    assert.strictEqual(getFocusedElementText(), 'Tab 0', 'Focus should move to Tab 0');
+
+    // Press 'Enter' to focus the widget in the first tab.
+    dispatchKeyEvent('Enter');
+    assert.strictEqual(getFocusedElementText(), 'Widget 0', 'Focus should move to Widget 0');
+  });
+});

front_end/ui/legacy/TabbedPane.ts

@@ -19,7 +19,7 @@ import {ContextMenu} from './ContextMenu.js';
 import tabbedPaneStyles from './tabbedPane.css.js';
 import type {Toolbar} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
-import {installDragHandle, invokeOnceAfterBatchUpdate} from './UIUtils.js';
+import {installDragHandle} from './UIUtils.js';
 import {VBox, type Widget} from './Widget.js';
 import {Events as ZoomManagerEvents, ZoomManager} from './ZoomManager.js';
 
@@ -228,7 +228,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     if (this.tabsHistory[0] === tab && this.isShowing()) {
       this.selectTab(tab.id, userGesture);
     }
-    this.updateTabElements();
+    this.requestUpdate();
   }
 
   closeTab(id: string, userGesture?: boolean): void {
@@ -244,7 +244,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     for (let i = 0; i < ids.length; ++i) {
       this.innerCloseTab(ids[i], userGesture);
     }
-    this.updateTabElements();
+    this.requestUpdate();
     if (this.tabsHistory.length) {
       this.selectTab(this.tabsHistory[0].id, false);
     }
@@ -346,7 +346,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.tabsHistory.splice(this.tabsHistory.indexOf(tab), 1);
     this.tabsHistory.splice(0, 0, tab);
 
-    this.updateTabElements();
+    this.requestUpdate();
     if (focused || forceFocus) {
       this.focus();
     }
@@ -396,7 +396,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
       return;
     }
     tab.setIcon(icon);
-    this.updateTabElements();
+    this.requestUpdate();
   }
 
   setTrailingTabIcon(id: string, icon: IconButton.Icon.Icon|null): void {
@@ -413,7 +413,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
       return;
     }
     tab.setSuffixElement(suffixElement);
-    this.updateTabElements();
+    this.requestUpdate();
   }
 
   setBadge(id: string, content: string|null): void {
@@ -443,7 +443,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
   private zoomChanged(): void {
     this.clearMeasuredWidths();
     if (this.isShowing()) {
-      this.updateTabElements();
+      this.requestUpdate();
     }
   }
 
@@ -461,7 +461,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     if (tab && tab.title !== tabTitle) {
       tab.title = tabTitle;
       ARIAUtils.setLabel(tab.tabElement, tabTitle);
-      this.updateTabElements();
+      this.requestUpdate();
     }
   }
 
@@ -493,19 +493,19 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
       this.clearMeasuredWidths();
       this.currentDevicePixelRatio = window.devicePixelRatio;
     }
-    this.updateTabElements();
+    this.requestUpdate();
   }
 
   headerResized(): void {
-    this.updateTabElements();
+    this.requestUpdate();
   }
 
   override wasShown(): void {
     const effectiveTab = this.currentTab || this.tabsHistory[0];
     if (effectiveTab && this.autoSelectFirstItemOnShow) {
       this.selectTab(effectiveTab.id);
     }
-    this.updateTabElements();
+    this.requestUpdate();
     this.dispatchEventToListeners(Events.PaneVisibilityChanged, {isVisible: true});
   }
 
@@ -537,10 +537,6 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     return constraints;
   }
 
-  private updateTabElements(): void {
-    invokeOnceAfterBatchUpdate(this, this.innerUpdateTabElements);
-  }
-
   setPlaceholderElement(element: Element, focusedElement?: Element): void {
     this.placeholderElement = element;
     if (focusedElement) {
@@ -553,10 +549,10 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   async waitForTabElementUpdate(): Promise<void> {
-    this.innerUpdateTabElements();
+    this.performUpdate();
   }
 
-  private innerUpdateTabElements(): void {
+  override performUpdate(): void {
     if (!this.isShowing()) {
       return;
     }

front_end/ui/legacy/UIUtils.ts

@@ -965,13 +965,6 @@ export function endBatchUpdate(): void {
   }
 }
 
-export function invokeOnceAfterBatchUpdate(object: Object, method: () => void): void {
-  if (!postUpdateHandlers) {
-    postUpdateHandlers = new InvokeOnceHandlers(true);
-  }
-  postUpdateHandlers.add(object, method);
-}
-
 export function animateFunction(
     window: Window, func: (...args: any[]) => void, params: Array<{
       from: number,