chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

package/front_end/ui/legacy/FilterBar.ts

@@ -393,7 +393,7 @@ export class NamedBitSetFilterUI extends Common.ObjectWrapper.ObjectWrapper<Filt
   }
 
   private addBit(name: string, label: string, title?: string): void {
-    const typeFilterElement = (this.filtersElement.createChild('span', name) as HTMLElement);
+    const typeFilterElement = this.filtersElement.createChild('span', name);
     typeFilterElement.tabIndex = -1;
     this.typeFilterElementTypeNames.set(typeFilterElement, name);
     createTextChild(typeFilterElement, label);
@@ -470,13 +470,11 @@ export class NamedBitSetFilterUI extends Common.ObjectWrapper.ObjectWrapper<Filt
       this.allowedTypes.delete(typeName);
     } else {
       this.allowedTypes.add(typeName);
-      Host.userMetrics.legacyResourceTypeFilterItemSelected(typeName);
     }
 
     if (this.allowedTypes.size === 0) {
       this.allowedTypes.add(NamedBitSetFilterUI.ALL_TYPES);
     }
-    Host.userMetrics.legacyResourceTypeFilterNumberOfSelectedChanged(this.allowedTypes.size);
 
     if (this.setting) {
       // Settings do not support `Sets` so convert it back to the Map-like object.
@@ -499,8 +497,8 @@ export class CheckboxFilterUI extends Common.ObjectWrapper.ObjectWrapper<FilterU
   private label: CheckboxLabel;
   private checkboxElement: HTMLInputElement;
   constructor(
-      className: string, title: string, activeWhenChecked?: boolean, setting?: Common.Settings.Setting<boolean>,
-      jslogContext?: string) {
+      className: string, title: Common.UIString.LocalizedString, activeWhenChecked?: boolean,
+      setting?: Common.Settings.Setting<boolean>, jslogContext?: string) {
     super();
     this.filterElement = document.createElement('div');
     this.filterElement.classList.add('filter-checkbox-filter');

package/front_end/ui/legacy/Infobar.ts

@@ -10,7 +10,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as ARIAUtils from './ARIAUtils.js';
 import infobarStyles from './infobar.css.legacy.js';
 import {Keys} from './KeyboardShortcut.js';
-import {createShadowRootWithCoreStyles, createTextButton} from './UIUtils.js';
+import {createShadowRootWithCoreStyles, createTextButton, type DevToolsCloseButton} from './UIUtils.js';
 import type {Widget} from './Widget.js';
 
 const UIStrings = {
@@ -47,7 +47,7 @@ export class Infobar {
   private readonly disableSetting: Common.Settings.Setting<any>|null;
   private readonly closeContainer: HTMLElement;
   private readonly toggleElement: Buttons.Button.Button;
-  private readonly closeButton: HTMLElement;
+  private readonly closeButton: DevToolsCloseButton;
   private closeCallback: (() => void)|null;
   #firstFocusableElement: HTMLElement|null = null;
   private parentView?: Widget;
@@ -64,9 +64,9 @@ export class Infobar {
           'jslog', `${VisualLogging.dialog(jslogContext).track({resize: true, keydown: 'Enter|Escape'})}`);
     }
     this.element.classList.add('flex-none');
-    this.shadowRoot = createShadowRootWithCoreStyles(this.element, {cssFile: infobarStyles, delegatesFocus: undefined});
+    this.shadowRoot = createShadowRootWithCoreStyles(this.element, {cssFile: infobarStyles});
 
-    this.contentElement = this.shadowRoot.createChild('div', 'infobar infobar-' + type) as HTMLDivElement;
+    this.contentElement = this.shadowRoot.createChild('div', 'infobar infobar-' + type);
 
     this.mainRow = this.contentElement.createChild('div', 'infobar-main-row');
     this.detailsRows = this.contentElement.createChild('div', 'infobar-details-rows hidden');
@@ -95,9 +95,13 @@ export class Infobar {
           buttonClass += ' primary-button';
         }
 
+        const buttonVariant = action.buttonVariant ?? Buttons.Button.Variant.OUTLINED;
+
         const button = createTextButton(action.text, actionCallback, {
           className: buttonClass,
           jslogContext: action.jslogContext,
+          variant: buttonVariant,
+          icon: action.icon,
         });
         if (action.highlight && !this.#firstFocusableElement) {
           this.#firstFocusableElement = button;
@@ -119,10 +123,8 @@ export class Infobar {
         {className: 'hidden show-more', jslogContext: 'show-more', variant: Buttons.Button.Variant.TEXT});
     this.toggleElement.setAttribute('role', 'link');
     this.closeContainer.appendChild(this.toggleElement);
-    this.closeButton = this.closeContainer.createChild('div', 'close-button', 'dt-close-button');
+    this.closeButton = this.closeContainer.createChild('dt-close-button', 'close-button');
     this.closeButton.hidden = !isCloseable;
-    // @ts-ignore This is a custom element defined in UIUitls.js that has a `setTabbable` that TS doesn't
-    //            know about.
     this.closeButton.setTabbable(true);
     ARIAUtils.setDescription(this.closeButton, i18nString(UIStrings.close));
     self.onInvokeElement(this.closeButton, this.dispose.bind(this));
@@ -246,6 +248,8 @@ export interface InfobarAction {
   highlight: boolean;
   delegate: (() => void)|null;
   dismiss: boolean;
+  buttonVariant?: Buttons.Button.Variant;
+  icon?: string;
   jslogContext?: string;
 }
 

package/front_end/ui/legacy/InspectorView.ts

@@ -32,10 +32,12 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as IconButton from '../components/icon_button/icon_button.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import type {ActionDelegate as ActionDelegateInterface} from './ActionRegistration.js';
+import {ActionRegistry} from './ActionRegistry.js';
 import * as ARIAUtils from './ARIAUtils.js';
 import type {Context} from './Context.js';
 import type {ContextMenu} from './ContextMenu.js';
@@ -67,6 +69,10 @@ const UIStrings = {
    *@description The aria label for main tabbed pane that contains Panels
    */
   panels: 'Panels',
+  /**
+   *@description Title of an action that reloads the tab currently being debugged by DevTools
+   */
+  reloadDebuggedTab: 'Reload',
   /**
    *@description Title of an action that reloads the DevTools
    */
@@ -476,6 +482,36 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     }
   }
 
+  displayDebuggedTabReloadRequiredWarning(message: string): void {
+    if (!this.reloadRequiredInfobar) {
+      const infobar = new Infobar(
+          InfobarType.INFO, message,
+          [
+            {
+              text: i18nString(UIStrings.reloadDebuggedTab),
+              highlight: true,
+              delegate: () => {
+                reloadDebuggedTab();
+                if (this.reloadRequiredInfobar) {
+                  this.reloadRequiredInfobar.dispose();
+                }
+              },
+              dismiss: false,
+              buttonVariant: Buttons.Button.Variant.PRIMARY,
+              icon: 'refresh',
+              jslogContext: 'main.debug-reload',
+            },
+          ],
+          undefined, undefined, 'reload-required');
+      infobar.setParentView(this);
+      this.attachInfobar(infobar);
+      this.reloadRequiredInfobar = infobar;
+      infobar.setCloseCallback(() => {
+        delete this.reloadRequiredInfobar;
+      });
+    }
+  }
+
   displayReloadRequiredWarning(message: string): void {
     if (!this.reloadRequiredInfobar) {
       const infobar = new Infobar(
@@ -602,6 +638,10 @@ function reloadDevTools(): void {
   Host.InspectorFrontendHost.InspectorFrontendHostInstance.reattach(() => window.location.reload());
 }
 
+function reloadDebuggedTab(): void {
+  void ActionRegistry.instance().getAction('inspector-main.reload').execute();
+}
+
 export class ActionDelegate implements ActionDelegateInterface {
   handleAction(context: Context, actionId: string): boolean {
     switch (actionId) {

package/front_end/ui/legacy/ListWidget.ts

@@ -199,8 +199,10 @@ export class ListWidget<T> extends VBox {
       this.element.focus();
       this.delegate.removeItemRequested(this.items[index], index);
       ARIAUtils.alert(i18nString(UIStrings.removedItem));
-      // focus on the next item in the list, or the last item if we're removing the last item
-      (this.elements[Math.min(index, this.elements.length - 1)] as HTMLElement).focus();
+      if (this.elements.length >= 1) {
+        // focus on the next item in the list, or the last item if we're removing the last item
+        (this.elements[Math.min(index, this.elements.length - 1)] as HTMLElement).focus();
+      }
     }
   }
 
@@ -387,7 +389,7 @@ export class Editor<T> {
     select.setAttribute('jslog', `${VisualLogging.dropDown().track({change: true}).context(name)}`);
     select.classList.add('chrome-select');
     for (let index = 0; index < options.length; ++index) {
-      const option = (select.createChild('option') as HTMLOptionElement);
+      const option = select.createChild('option');
       option.value = options[index];
       option.textContent = options[index];
       option.setAttribute(

package/front_end/ui/legacy/ProgressIndicator.ts

@@ -47,12 +47,11 @@ export class ProgressIndicator implements Common.Progress.Progress {
   constructor() {
     this.element = document.createElement('div');
     this.element.classList.add('progress-indicator');
-    this.shadowRoot =
-        createShadowRootWithCoreStyles(this.element, {cssFile: progressIndicatorStyles, delegatesFocus: undefined});
+    this.shadowRoot = createShadowRootWithCoreStyles(this.element, {cssFile: progressIndicatorStyles});
     this.contentElement = this.shadowRoot.createChild('div', 'progress-indicator-shadow-container');
 
     this.labelElement = this.contentElement.createChild('div', 'title');
-    this.progressElement = (this.contentElement.createChild('progress') as HTMLProgressElement);
+    this.progressElement = this.contentElement.createChild('progress');
     this.progressElement.value = 0;
     this.stopButton = this.contentElement.createChild('button', 'progress-indicator-shadow-stop-button');
     this.stopButton.addEventListener('click', this.cancel.bind(this));

package/front_end/ui/legacy/ReportView.ts

@@ -215,11 +215,11 @@ export class Section extends VBox {
   }
 
   appendRow(): HTMLElement {
-    return this.fieldList.createChild('div', 'report-row') as HTMLElement;
+    return this.fieldList.createChild('div', 'report-row');
   }
 
   appendSelectableRow(): HTMLElement {
-    return this.fieldList.createChild('div', 'report-row report-row-selectable') as HTMLElement;
+    return this.fieldList.createChild('div', 'report-row report-row-selectable');
   }
 
   clearContent(): void {

package/front_end/ui/legacy/SearchableView.ts

@@ -41,11 +41,10 @@ import * as Buttons from '../components/buttons/buttons.js';
 import * as IconButton from '../components/icon_button/icon_button.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
-import {HistoryInput} from './HistoryInput.js';
 import {InspectorView} from './InspectorView.js';
 import searchableViewStyles from './searchableView.css.legacy.js';
 import {Toolbar, ToolbarButton, ToolbarText, ToolbarToggle} from './Toolbar.js';
-import {createTextButton} from './UIUtils.js';
+import {createHistoryInput, createTextButton} from './UIUtils.js';
 import {VBox} from './Widget.js';
 
 const UIStrings = {
@@ -150,7 +149,7 @@ export class SearchableView extends VBox {
   private readonly footerElementContainer: HTMLElement;
   private readonly footerElement: HTMLElement;
   private replaceToggleButton: ToolbarToggle;
-  private searchInputElement: HistoryInput;
+  private searchInputElement: HTMLInputElement;
   private matchesElement: HTMLElement;
   private searchNavigationPrevElement: ToolbarButton;
   private searchNavigationNextElement: ToolbarButton;
@@ -193,9 +192,7 @@ export class SearchableView extends VBox {
     const searchIcon = IconButton.Icon.create('search');
     iconAndInput.appendChild(searchIcon);
 
-    this.searchInputElement = HistoryInput.create();
-    this.searchInputElement.type = 'search';
-    this.searchInputElement.classList.add('search-replace', 'search');
+    this.searchInputElement = createHistoryInput('search', 'search-replace search');
     this.searchInputElement.id = 'search-input-field';
     this.searchInputElement.autocomplete = 'off';
     this.searchInputElement.placeholder = i18nString(UIStrings.findString);
@@ -207,7 +204,7 @@ export class SearchableView extends VBox {
     iconAndInput.appendChild(this.searchInputElement);
 
     const replaceInputElements = searchInputElements.createChild('div', 'replace-element input-line');
-    this.replaceInputElement = replaceInputElements.createChild('input', 'search-replace') as HTMLInputElement;
+    this.replaceInputElement = replaceInputElements.createChild('input', 'search-replace');
     this.replaceInputElement.addEventListener('keydown', this.onReplaceKeyDown.bind(this), true);
     this.replaceInputElement.placeholder = i18nString(UIStrings.replace);
     this.replaceInputElement.setAttribute(

package/front_end/ui/legacy/SettingsUI.ts

@@ -53,7 +53,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/SettingsUI.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export const createSettingCheckbox = function(
-    name: string, setting: Common.Settings.Setting<boolean>, omitParagraphElement?: boolean,
+    name: Common.UIString.LocalizedString, setting: Common.Settings.Setting<boolean>, omitParagraphElement?: boolean,
     tooltip?: string): Element {
   const label = CheckboxLabel.create(name, undefined, undefined, setting.name);
   if (tooltip) {
@@ -80,7 +80,7 @@ const createSettingSelect = function(
   const settingSelectElement = container.createChild('p');
   settingSelectElement.classList.add('settings-select');
   const label = settingSelectElement.createChild('label');
-  const select = (settingSelectElement.createChild('select', 'chrome-select') as HTMLSelectElement);
+  const select = settingSelectElement.createChild('select', 'chrome-select');
   label.textContent = name;
   if (subtitle) {
     container.classList.add('chrome-select-label');

package/front_end/ui/legacy/ShortcutRegistry.test.ts

@@ -16,12 +16,12 @@ describe('ShortcutTreeNode', () => {
     const node = new UI.ShortcutRegistry.ShortcutTreeNode(0, 0);
     node.addKeyMapping([12, 154, 36], 'test action');
     const leafNode = node.getNode(12)?.getNode(154)?.getNode(36);
-    assert.ok(leafNode, 'node should have a descendant for the mapping');
+    assert.isOk(leafNode, 'node should have a descendant for the mapping');
     assert.include(
         leafNode?.actions() || [], 'test action', 'the mapping\'s node should have the \'test action\' action');
     assert.isTrue(node.hasChords(), 'node should have chords');
-    assert.ok(node.getNode(12), 'node should have a child for key=12');
-    assert.notOk(node.getNode(154), 'node should not have a direct child for key=154');
+    assert.isOk(node.getNode(12), 'node should have a child for key=12');
+    assert.isNotOk(node.getNode(154), 'node should not have a direct child for key=154');
   });
 
   it('can clear itself', () => {

package/front_end/ui/legacy/SoftDropDown.ts

@@ -71,7 +71,6 @@ export class SoftDropDown<T> implements ListDelegate<T> {
     this.width = 315;
     createShadowRootWithCoreStyles(this.glassPane.contentElement, {
       cssFile: softDropDownStyles,
-      delegatesFocus: undefined,
     }).appendChild(this.list.element);
     ARIAUtils.markAsMenu(this.list.element);
     VisualLogging.setMappedParent(this.list.element, this.element);

package/front_end/ui/legacy/SplitWidget.ts

@@ -89,7 +89,7 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
         this.contentElement.createChild('div', 'shadow-split-widget-contents shadow-split-widget-sidebar vbox');
     this.mainElement =
         this.contentElement.createChild('div', 'shadow-split-widget-contents shadow-split-widget-main vbox');
-    const mainSlot = this.mainElement.createChild('slot') as HTMLSlotElement;
+    const mainSlot = this.mainElement.createChild('slot');
     mainSlot.name = 'main';
     mainSlot.addEventListener('slotchange', (_: Event) => {
       const assignedNode = mainSlot.assignedNodes()[0];
@@ -98,7 +98,7 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
         this.setMainWidget(widget);
       }
     });
-    const sidebarSlot = this.sidebarElementInternal.createChild('slot') as HTMLSlotElement;
+    const sidebarSlot = this.sidebarElementInternal.createChild('slot');
     sidebarSlot.name = 'sidebar';
     sidebarSlot.addEventListener('slotchange', (_: Event) => {
       const assignedNode = sidebarSlot.assignedNodes()[0];

package/front_end/ui/legacy/SuggestBox.test.ts

@@ -64,7 +64,7 @@ describeWithLocale('SuggestBox', () => {
     suggestBox.updateSuggestions(
         anchorBox, [{text: 'First'}, {text: 'Hello'}, {text: 'The best suggestion'}], true, true, 'e');
 
-    assert.deepStrictEqual(delegate.appliedSuggestions, [{suggestion: 'First', isIntermediateSuggestion: true}]);
+    assert.deepEqual(delegate.appliedSuggestions, [{suggestion: 'First', isIntermediateSuggestion: true}]);
   });
 
   it('selects no item when "canShowForSingleItem" is false', () => {
@@ -72,7 +72,7 @@ describeWithLocale('SuggestBox', () => {
         anchorBox, [{text: 'First'}, {text: 'Hello', priority: 2}, {text: 'The best suggestion', priority: 5}], false,
         true, 'e');
 
-    assert.deepStrictEqual(delegate.appliedSuggestions, []);
+    assert.deepEqual(delegate.appliedSuggestions, []);
   });
 
   it('selects the highest priority item', () => {
@@ -80,7 +80,7 @@ describeWithLocale('SuggestBox', () => {
         anchorBox, [{text: 'First'}, {text: 'Hello', priority: 2}, {text: 'The best suggestion', priority: 5}], true,
         true, 'e');
 
-    assert.deepStrictEqual(
+    assert.deepEqual(
         delegate.appliedSuggestions, [{suggestion: 'The best suggestion', isIntermediateSuggestion: true}]);
   });
 
@@ -95,7 +95,7 @@ describeWithLocale('SuggestBox', () => {
     suggestBox.keyPressed(createKeyEvent('ArrowDown'));
     suggestBox.keyPressed(createKeyEvent('ArrowDown'));
 
-    assert.deepStrictEqual(delegate.appliedSuggestions, [
+    assert.deepEqual(delegate.appliedSuggestions, [
       {suggestion: 'The best suggestion', isIntermediateSuggestion: true},
       {suggestion: 'Hello', isIntermediateSuggestion: true},
       {suggestion: 'First', isIntermediateSuggestion: true},
@@ -111,7 +111,7 @@ describeWithLocale('SuggestBox', () => {
         true, 'e');
 
     suggestBox.keyPressed(createKeyEvent('Enter'));
-    assert.deepStrictEqual(delegate.accceptedSuggestions, ['The best suggestion']);
+    assert.deepEqual(delegate.accceptedSuggestions, ['The best suggestion']);
   });
 
   it('closes the controller element after accepting a suggestion', () => {

package/front_end/ui/legacy/SuggestBox.ts

@@ -105,8 +105,7 @@ export class SuggestBox implements ListDelegate<Suggestion> {
     this.glassPane = new GlassPane();
     this.glassPane.setAnchorBehavior(AnchorBehavior.PREFER_BOTTOM);
     this.glassPane.setOutsideClickCallback(this.hide.bind(this));
-    const shadowRoot = createShadowRootWithCoreStyles(
-        this.glassPane.contentElement, {cssFile: suggestBoxStyles, delegatesFocus: undefined});
+    const shadowRoot = createShadowRootWithCoreStyles(this.glassPane.contentElement, {cssFile: suggestBoxStyles});
     shadowRoot.appendChild(this.element);
   }
 

package/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_);
@@ -123,7 +131,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.tabsElement = this.headerContentsElement.createChild('div', 'tabbed-pane-header-tabs');
     this.tabsElement.setAttribute('role', 'tablist');
     this.tabsElement.addEventListener('keydown', this.keyDown.bind(this), false);
-    this.contentElementInternal = this.contentElement.createChild('div', 'tabbed-pane-content') as HTMLDivElement;
+    this.contentElementInternal = this.contentElement.createChild('div', 'tabbed-pane-content');
     this.contentElementInternal.createChild('slot');
     this.tabs = [];
     this.tabsHistory = [];
@@ -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;
@@ -1149,7 +1172,7 @@ export class TabbedPaneTab {
     iconContainer.classList.add('tabbed-pane-header-tab-icon');
     const iconNode = measuring ? this.createMeasureClone(this.icon) : this.icon;
     iconContainer.appendChild(iconNode);
-    tabElement.insertBefore(iconContainer, titleElement);
+    titleElement.insertAdjacentElement('beforebegin', iconContainer);
     tabIcons.set(tabElement, iconContainer);
   }
 
@@ -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();
   }
 

package/front_end/ui/legacy/TextPrompt.ts

@@ -88,7 +88,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
     this.ghostTextElement.setAttribute('contenteditable', 'false');
     this.leftParenthesesIndices = [];
     this.changed = false;
-    ARIAUtils.markAsHidden(this.ghostTextElement);
+    ARIAUtils.setHidden(this.ghostTextElement, true);
   }
 
   initialize(

package/front_end/ui/legacy/ThrottledWidget.ts

@@ -16,11 +16,11 @@ export class ThrottledWidget extends VBox {
     this.updateWhenVisible = false;
   }
 
-  protected doUpdate(): Promise<void> {
+  protected override doUpdate(): Promise<void> {
     return Promise.resolve();
   }
 
-  update(): void {
+  override update(): void {
     this.updateWhenVisible = !this.isShowing();
     if (this.updateWhenVisible) {
       return;

package/front_end/ui/legacy/Toolbar.test.ts

@@ -2,16 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Coordinator from '../components/render_coordinator/render_coordinator.js';
-
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 import {
   dispatchClickEvent,
   doubleRaf,
   renderElementIntoDOM,
 } from '../../testing/DOMHelpers.js';
 import {describeWithLocale} from '../../testing/EnvironmentHelpers.js';
+import * as RenderCoordinator from '../components/render_coordinator/render_coordinator.js';
 
 import * as UI from './legacy.js';
 
@@ -22,7 +19,7 @@ describeWithLocale('Toolbar', () => {
       renderElementIntoDOM(input.element);
       input.setValue('test value');
       const clearButton = input.element.querySelector('.toolbar-input-clear-button');
-      await coordinator.done();
+      await RenderCoordinator.done();
       const innerButton = clearButton?.shadowRoot?.querySelector('button');
       assert.instanceOf(innerButton, HTMLElement);
       assert.strictEqual(innerButton.title, 'Clear');

package/front_end/ui/legacy/Toolbar.ts

@@ -81,11 +81,11 @@ export class Toolbar {
 
   constructor(className: string, parentElement?: Element) {
     this.items = [];
-    this.element = (parentElement ? parentElement.createChild('div') : document.createElement('div')) as HTMLElement;
+    this.element = parentElement ? parentElement.createChild('div') : document.createElement('div');
     this.element.className = className;
     this.element.classList.add('toolbar');
     this.enabled = true;
-    this.shadowRoot = createShadowRootWithCoreStyles(this.element, {cssFile: toolbarStyles, delegatesFocus: undefined});
+    this.shadowRoot = createShadowRootWithCoreStyles(this.element, {cssFile: toolbarStyles});
     this.contentElement = this.shadowRoot.createChild('div', 'toolbar-shadow');
   }
 
@@ -1028,9 +1028,9 @@ export class ToolbarMenuButton extends ToolbarCombobox {
       useSoftMenu: this.useSoftMenu,
       x: this.element.getBoundingClientRect().left,
       y: this.element.getBoundingClientRect().top + this.element.offsetHeight,
-      // Without rAF, pointer events will be un-ignored too early, and a single click causes the
-      // context menu to be closed and immediately re-opened on Windows (https://crbug.com/339560549).
-      onSoftMenuClosed: () => requestAnimationFrame(() => this.element.removeAttribute('aria-expanded')),
+      // Without adding a delay, pointer events will be un-ignored too early, and a single click causes
+      // the context menu to be closed and immediately re-opened on Windows (https://crbug.com/339560549).
+      onSoftMenuClosed: () => setTimeout(() => this.element.removeAttribute('aria-expanded'), 50),
     });
     this.contextMenuHandler(contextMenu);
     this.element.setAttribute('aria-expanded', 'true');
@@ -1104,7 +1104,7 @@ export class ToolbarComboBox extends ToolbarItem<void> {
     const element = document.createElement('span');
     element.classList.add('toolbar-select-container');
     super(element);
-    this.selectElementInternal = (this.element.createChild('select', 'toolbar-item') as HTMLSelectElement);
+    this.selectElementInternal = this.element.createChild('select', 'toolbar-item');
     const dropdownArrowIcon = IconButton.Icon.create('triangle-down', 'toolbar-dropdown-arrow');
     this.element.appendChild(dropdownArrowIcon);
     if (changeHandler) {
@@ -1137,8 +1137,8 @@ export class ToolbarComboBox extends ToolbarItem<void> {
     this.selectElementInternal.appendChild(option);
   }
 
-  createOption(label: string, value?: string): Element {
-    const option = (this.selectElementInternal.createChild('option') as HTMLOptionElement);
+  createOption(label: string, value?: string): HTMLOptionElement {
+    const option = this.selectElementInternal.createChild('option');
     option.text = label;
     if (typeof value !== 'undefined') {
       option.value = value;
@@ -1250,7 +1250,8 @@ export class ToolbarCheckbox extends ToolbarItem<void> {
   inputElement: HTMLInputElement;
 
   constructor(
-      text: string, tooltip?: string, listener?: ((arg0: MouseEvent) => void), jslogContext?: string, small?: boolean) {
+      text: Common.UIString.LocalizedString, tooltip?: Common.UIString.LocalizedString,
+      listener?: ((arg0: MouseEvent) => void), jslogContext?: string, small?: boolean) {
     super(CheckboxLabel.create(text));
     this.element.classList.add('checkbox');
     this.inputElement = (this.element as CheckboxLabel).checkboxElement;
@@ -1287,8 +1288,10 @@ export class ToolbarCheckbox extends ToolbarItem<void> {
 }
 
 export class ToolbarSettingCheckbox extends ToolbarCheckbox {
-  constructor(setting: Common.Settings.Setting<boolean>, tooltip?: string, alternateTitle?: string) {
-    super(alternateTitle || setting.title() || '', tooltip, undefined, setting.name);
+  constructor(
+      setting: Common.Settings.Setting<boolean>, tooltip?: Common.UIString.LocalizedString,
+      alternateTitle?: Common.UIString.LocalizedString) {
+    super(alternateTitle || setting.title(), tooltip, undefined, setting.name);
     bindCheckbox(this.inputElement, setting);
   }
 }

package/front_end/ui/legacy/Treeoutline.ts

@@ -406,8 +406,7 @@ export class TreeOutlineInShadow extends TreeOutline {
     super();
     this.contentElement.classList.add('tree-outline');
     this.element = document.createElement('div');
-    this.shadowRoot =
-        createShadowRootWithCoreStyles(this.element, {cssFile: treeoutlineStyles, delegatesFocus: undefined});
+    this.shadowRoot = createShadowRootWithCoreStyles(this.element, {cssFile: treeoutlineStyles});
     this.disclosureElement = this.shadowRoot.createChild('div', 'tree-outline-disclosure');
     this.disclosureElement.appendChild(this.contentElement);
     this.renderSelection = true;