chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

package/front_end/ui/components/tree_outline/TreeOutline.test.ts

@@ -12,14 +12,12 @@ import {
   stripLitHtmlCommentNodes,
 } from '../../../testing/DOMHelpers.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
-import * as Coordinator from '../render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../render_coordinator/render_coordinator.js';
 
 import * as TreeOutline from './tree_outline.js';
 
 const {html} = LitHtml;
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 async function renderTreeOutline<TreeNodeDataType>({
   tree,
   defaultRenderer,
@@ -43,7 +41,7 @@ async function renderTreeOutline<TreeNodeDataType>({
   component.data = data;
   renderElementIntoDOM(component);
   assert.isNotNull(component.shadowRoot);
-  await coordinator.done();
+  await RenderCoordinator.done();
   return {
     component,
     shadowRoot: component.shadowRoot,
@@ -502,7 +500,7 @@ describe('TreeOutline', () => {
       // Wait for the tree to be expanded
       await waitForRenderedTreeNodeCount(shadowRoot, 9);
       // Wait for the coordinator to have called focus() on the right node
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       assert.strictEqual(
           getFocusableTreeNode(shadowRoot),
@@ -711,7 +709,7 @@ describe('TreeOutline', () => {
         });
         const officeNode = getVisibleTreeNodeByText(shadowRoot, 'Offices');
         dispatchClickEvent(officeNode);
-        await coordinator.done();
+        await RenderCoordinator.done();
         dispatchKeyDownEvent(officeNode, {key: 'Enter', bubbles: true});
         await waitForRenderedTreeNodeCount(shadowRoot, 3);
         assert.strictEqual(officeNode.getAttribute('aria-expanded'), 'true');
@@ -725,7 +723,7 @@ describe('TreeOutline', () => {
         await waitForRenderedTreeNodeCount(shadowRoot, NODE_COUNT_BASIC_DATA_DEFAULT_EXPANDED);
         const officeNode = getVisibleTreeNodeByText(shadowRoot, 'Offices');
         dispatchClickEvent(officeNode);
-        await coordinator.done();
+        await RenderCoordinator.done();
         dispatchKeyDownEvent(officeNode, {key: 'Enter', bubbles: true});
         await waitForRenderedTreeNodeCount(shadowRoot, 6);
         assert.strictEqual(officeNode.getAttribute('aria-expanded'), 'false');
@@ -739,7 +737,7 @@ describe('TreeOutline', () => {
         });
         const officeNode = getVisibleTreeNodeByText(shadowRoot, 'Offices');
         dispatchClickEvent(officeNode);
-        await coordinator.done();
+        await RenderCoordinator.done();
         dispatchKeyDownEvent(officeNode, {key: ' ', bubbles: true});
         await waitForRenderedTreeNodeCount(shadowRoot, 3);
         assert.strictEqual(officeNode.getAttribute('aria-expanded'), 'true');
@@ -753,7 +751,7 @@ describe('TreeOutline', () => {
         await waitForRenderedTreeNodeCount(shadowRoot, 12);
         const officeNode = getVisibleTreeNodeByText(shadowRoot, 'Offices');
         dispatchClickEvent(officeNode);
-        await coordinator.done();
+        await RenderCoordinator.done();
         dispatchKeyDownEvent(officeNode, {key: ' ', bubbles: true});
         await waitForRenderedTreeNodeCount(shadowRoot, 6);
         assert.strictEqual(officeNode.getAttribute('aria-expanded'), 'false');
@@ -769,9 +767,9 @@ describe('TreeOutline', () => {
         await waitForRenderedTreeNodeCount(shadowRoot, NODE_COUNT_BASIC_DATA_FULLY_EXPANDED);
         const berlinNode = getVisibleTreeNodeByText(shadowRoot, 'BER');
         dispatchClickEvent(berlinNode);
-        await coordinator.done();
+        await RenderCoordinator.done();
         dispatchKeyDownEvent(berlinNode, {key: 'Home', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
         assert.strictEqual(
             getFocusableTreeNode(shadowRoot),
             getVisibleTreeNodeByText(shadowRoot, 'Offices'),
@@ -785,11 +783,11 @@ describe('TreeOutline', () => {
           tree: basicTreeData,
         });
         await component.expandRecursively(Number.POSITIVE_INFINITY);
-        await coordinator.done();
+        await RenderCoordinator.done();
         const officeNode = getVisibleTreeNodeByText(shadowRoot, 'Offices');
         dispatchClickEvent(officeNode);
         dispatchKeyDownEvent(officeNode, {key: 'End', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
         assert.strictEqual(
             getFocusableTreeNode(shadowRoot),
             // Calendar is the very last node in the tree
@@ -812,7 +810,7 @@ describe('TreeOutline', () => {
         const europeNode = getVisibleTreeNodeByText(shadowRoot, 'Europe');
         dispatchClickEvent(europeNode);
         dispatchKeyDownEvent(officeNode, {key: 'End', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
         assert.strictEqual(
             getFocusableTreeNode(shadowRoot),
             // Products is the last node in the tree, as its children are not expanded
@@ -829,7 +827,7 @@ describe('TreeOutline', () => {
         const officeNode = getVisibleTreeNodeByText(shadowRoot, 'Offices');
         dispatchClickEvent(officeNode);
         dispatchKeyDownEvent(officeNode, {key: 'ArrowUp', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
 
         assert.strictEqual(
             getFocusableTreeNode(shadowRoot),
@@ -846,7 +844,7 @@ describe('TreeOutline', () => {
         const berlinNode = getVisibleTreeNodeByText(shadowRoot, 'BER');
         dispatchClickEvent(berlinNode);
         dispatchKeyDownEvent(berlinNode, {key: 'ArrowUp', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
         assert.strictEqual(
             getFocusableTreeNode(shadowRoot),
             getVisibleTreeNodeByText(shadowRoot, 'MUC'),
@@ -862,7 +860,7 @@ describe('TreeOutline', () => {
         const ukNode = getVisibleTreeNodeByText(shadowRoot, 'UK');
         dispatchClickEvent(ukNode);
         dispatchKeyDownEvent(ukNode, {key: 'ArrowUp', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
         assert.strictEqual(
             getFocusableTreeNode(shadowRoot),
             getVisibleTreeNodeByText(shadowRoot, 'Europe'),
@@ -879,7 +877,7 @@ describe('TreeOutline', () => {
            const germanyNode = getVisibleTreeNodeByText(shadowRoot, 'Germany');
            dispatchClickEvent(germanyNode);
            dispatchKeyDownEvent(germanyNode, {key: 'ArrowUp', bubbles: true});
-           await coordinator.done();
+           await RenderCoordinator.done();
            assert.strictEqual(
                getFocusableTreeNode(shadowRoot),
                getVisibleTreeNodeByText(shadowRoot, 'LON'),
@@ -896,7 +894,7 @@ describe('TreeOutline', () => {
            const germanyNode = getVisibleTreeNodeByText(shadowRoot, 'Germany');
            dispatchClickEvent(germanyNode);
            dispatchKeyDownEvent(germanyNode, {key: 'ArrowUp', bubbles: true});
-           await coordinator.done();
+           await RenderCoordinator.done();
            assert.strictEqual(
                getFocusableTreeNode(shadowRoot),
                getVisibleTreeNodeByText(shadowRoot, 'BEL'),
@@ -914,7 +912,7 @@ describe('TreeOutline', () => {
         const chromeNode = getVisibleTreeNodeByText(shadowRoot, 'Chrome');
         dispatchClickEvent(chromeNode);
         dispatchKeyDownEvent(chromeNode, {key: 'ArrowRight', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
         assert.strictEqual(
             getFocusableTreeNode(shadowRoot),
             chromeNode,
@@ -928,7 +926,7 @@ describe('TreeOutline', () => {
         const officeNode = getVisibleTreeNodeByText(shadowRoot, 'Offices');
         dispatchClickEvent(officeNode);
         dispatchKeyDownEvent(officeNode, {key: 'ArrowRight', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
         assert.strictEqual(
             getFocusableTreeNode(shadowRoot),
             officeNode,
@@ -944,9 +942,9 @@ describe('TreeOutline', () => {
         dispatchClickEvent(officeNode);
         // Press once to expand, twice to navigate in to the first child
         dispatchKeyDownEvent(officeNode, {key: 'ArrowRight', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
         dispatchKeyDownEvent(officeNode, {key: 'ArrowRight', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
         assert.strictEqual(
             getFocusableTreeNode(shadowRoot),
             getVisibleTreeNodeByText(shadowRoot, 'Europe'),
@@ -960,11 +958,11 @@ describe('TreeOutline', () => {
           tree: basicTreeData,
         });
         await component.expandRecursively(Number.POSITIVE_INFINITY);
-        await coordinator.done();
+        await RenderCoordinator.done();
         const europeNode = getVisibleTreeNodeByText(shadowRoot, 'Europe');
         dispatchClickEvent(europeNode);
         dispatchKeyDownEvent(europeNode, {key: 'ArrowLeft', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
         assert.strictEqual(
             getFocusableTreeNode(shadowRoot),
             getVisibleTreeNodeByText(shadowRoot, 'Europe'),
@@ -1004,11 +1002,11 @@ describe('TreeOutline', () => {
         });
         await component.expandRecursively(Number.POSITIVE_INFINITY);
         await waitForRenderedTreeNodeCount(shadowRoot, NODE_COUNT_BASIC_DATA_FULLY_EXPANDED);
-        await coordinator.done();
+        await RenderCoordinator.done();
         const berlinNode = getVisibleTreeNodeByText(shadowRoot, 'BER');
         dispatchClickEvent(berlinNode);
         dispatchKeyDownEvent(berlinNode, {key: 'ArrowLeft', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
         assert.strictEqual(
             getFocusableTreeNode(shadowRoot),
             getVisibleTreeNodeByText(shadowRoot, 'Germany'),
@@ -1021,7 +1019,7 @@ describe('TreeOutline', () => {
         const productsNode = getVisibleTreeNodeByText(shadowRoot, 'Products');
         dispatchClickEvent(productsNode);
         dispatchKeyDownEvent(productsNode, {key: 'ArrowLeft', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
         assert.strictEqual(
             getFocusableTreeNode(shadowRoot),
             getVisibleTreeNodeByText(shadowRoot, 'Products'),
@@ -1036,7 +1034,7 @@ describe('TreeOutline', () => {
         const officeNode = getVisibleTreeNodeByText(shadowRoot, 'Offices');
         dispatchClickEvent(officeNode);
         dispatchKeyDownEvent(officeNode, {key: 'ArrowDown', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
         assert.strictEqual(
             getFocusableTreeNode(shadowRoot),
             getVisibleTreeNodeByText(shadowRoot, 'Products'),
@@ -1050,7 +1048,7 @@ describe('TreeOutline', () => {
         const productsNode = getVisibleTreeNodeByText(shadowRoot, 'Products');
         dispatchClickEvent(productsNode);
         dispatchKeyDownEvent(productsNode, {key: 'ArrowDown', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
         assert.strictEqual(
             getFocusableTreeNode(shadowRoot),
             getVisibleTreeNodeByText(shadowRoot, 'Products'),
@@ -1062,11 +1060,11 @@ describe('TreeOutline', () => {
           tree: basicTreeData,
         });
         await component.expandRecursively();
-        await coordinator.done();
+        await RenderCoordinator.done();
         const officeNode = getVisibleTreeNodeByText(shadowRoot, 'Offices');
         dispatchClickEvent(officeNode);
         dispatchKeyDownEvent(officeNode, {key: 'ArrowDown', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
         assert.strictEqual(
             getFocusableTreeNode(shadowRoot),
             getVisibleTreeNodeByText(shadowRoot, 'Europe'),
@@ -1082,7 +1080,7 @@ describe('TreeOutline', () => {
         const lonNode = getVisibleTreeNodeByText(shadowRoot, 'LON');
         dispatchClickEvent(lonNode);
         dispatchKeyDownEvent(lonNode, {key: 'ArrowDown', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
         assert.strictEqual(
             getFocusableTreeNode(shadowRoot),
             getVisibleTreeNodeByText(shadowRoot, 'Germany'),
@@ -1098,7 +1096,7 @@ describe('TreeOutline', () => {
         const berNode = getVisibleTreeNodeByText(shadowRoot, 'BER');
         dispatchClickEvent(berNode);
         dispatchKeyDownEvent(berNode, {key: 'ArrowDown', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
         assert.strictEqual(
             getFocusableTreeNode(shadowRoot),
             getVisibleTreeNodeByText(shadowRoot, 'Products'),
@@ -1115,7 +1113,7 @@ describe('TreeOutline', () => {
       });
       await component.expandRecursively(Number.POSITIVE_INFINITY);
       await waitForRenderedTreeNodeCount(shadowRoot, NODE_COUNT_BASIC_DATA_FULLY_EXPANDED);
-      await coordinator.done();
+      await RenderCoordinator.done();
       const rootNode = getVisibleTreeNodeByText(shadowRoot, 'Offices');
       assert.strictEqual(rootNode.getAttribute('aria-level'), '1');
 
@@ -1179,7 +1177,7 @@ describe('TreeOutline', () => {
       const arrowIcon = rootNode.querySelector<HTMLSpanElement>('.arrow-icon');
       assert.instanceOf(arrowIcon, HTMLSpanElement);
       dispatchClickEvent(arrowIcon);
-      await coordinator.done();
+      await RenderCoordinator.done();
       assert.strictEqual(rootNode.getAttribute('aria-expanded'), 'true');
     });
 
@@ -1190,7 +1188,7 @@ describe('TreeOutline', () => {
       await component.expandRecursively(Number.POSITIVE_INFINITY);
       await waitForRenderedTreeNodeCount(shadowRoot, NODE_COUNT_BASIC_DATA_FULLY_EXPANDED);
       const leafNodeCSGOffice = getVisibleTreeNodeByText(shadowRoot, 'CSG');
-      assert.strictEqual(leafNodeCSGOffice.getAttribute('aria-expanded'), null);
+      assert.isNull(leafNodeCSGOffice.getAttribute('aria-expanded'));
     });
   });
 
@@ -1200,7 +1198,7 @@ describe('TreeOutline', () => {
         const {component, shadowRoot} = await renderTreeOutline({
           tree: basicTreeData,
         });
-        await coordinator.done();
+        await RenderCoordinator.done();
         const officeNode = getVisibleTreeNodeByText(shadowRoot, 'Offices');
         const treeItemSelectedEvent =
             getEventPromise<TreeOutline.TreeOutline.ItemSelectedEvent<string>>(component, 'itemselected');
@@ -1213,14 +1211,14 @@ describe('TreeOutline', () => {
         const {component, shadowRoot} = await renderTreeOutline({
           tree: basicTreeData,
         });
-        await coordinator.done();
+        await RenderCoordinator.done();
         const officeNode = getVisibleTreeNodeByText(shadowRoot, 'Offices');
         dispatchClickEvent(officeNode);
-        await coordinator.done();
+        await RenderCoordinator.done();
         dispatchKeyDownEvent(officeNode, {key: 'ArrowDown', bubbles: true});
         const treeItemSelectedEvent =
             getEventPromise<TreeOutline.TreeOutline.ItemSelectedEvent<string>>(component, 'itemselected');
-        await coordinator.done();
+        await RenderCoordinator.done();
         const event = await treeItemSelectedEvent;
         assert.deepEqual(event.data, {node: basicTreeData[1]});
       });
@@ -1231,7 +1229,7 @@ describe('TreeOutline', () => {
         const {component, shadowRoot} = await renderTreeOutline({
           tree: basicTreeData,
         });
-        await coordinator.done();
+        await RenderCoordinator.done();
         const officeNode = getVisibleTreeNodeByText(shadowRoot, 'Offices').querySelector('.arrow-and-key-wrapper');
         assert.instanceOf(officeNode, HTMLSpanElement);
         const itemMouseOverEvent =
@@ -1247,7 +1245,7 @@ describe('TreeOutline', () => {
         const {component, shadowRoot} = await renderTreeOutline({
           tree: basicTreeData,
         });
-        await coordinator.done();
+        await RenderCoordinator.done();
         const officeNode = getVisibleTreeNodeByText(shadowRoot, 'Offices').querySelector('.arrow-and-key-wrapper');
         assert.instanceOf(officeNode, HTMLSpanElement);
         dispatchMouseOverEvent(officeNode);
@@ -1328,7 +1326,7 @@ describe('TreeOutline', () => {
         defaultRenderer: (node => html`${node.treeNodeData}`),
       };
       await waitForRenderedTreeNodeCount(shadowRoot, 4);
-      await coordinator.done();
+      await RenderCoordinator.done();
       const visibleTree = visibleNodesToTree(shadowRoot);
 
       // The tree should still be expanded down to the node with key `gawler`.
@@ -1357,7 +1355,7 @@ describe('TreeOutline', () => {
 
       await component.expandToAndSelectTreeNode({treeNodeData: 'literally anything', id: 'gawler'});
       await waitForRenderedTreeNodeCount(shadowRoot, 7);
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       // The tree is expanded down to include "Gawler" but the rest of the tree is still collapsed.
       assert.strictEqual(
@@ -1377,7 +1375,7 @@ describe('TreeOutlineUtils', () => {
 
     it('returns null if no path is found', async () => {
       const path = await TreeOutline.TreeOutlineUtils.getPathToTreeNode(basicTreeData, '-1');
-      assert.strictEqual(path, null);
+      assert.isNull(path);
     });
   });
 });
@@ -1392,7 +1390,7 @@ describe('TreeOutlineFiltering', () => {
     });
 
     await component.expandRecursively();
-    await coordinator.done();
+    await RenderCoordinator.done();
     await waitForRenderedTreeNodeCount(shadowRoot, 7);
     const visibleTree = visibleNodesToTree(shadowRoot);
 
@@ -1415,7 +1413,7 @@ describe('TreeOutlineFiltering', () => {
     });
 
     await component.expandNodeIds(['australia', 'sa', 'adelaide']);
-    await coordinator.done();
+    await RenderCoordinator.done();
     await waitForRenderedTreeNodeCount(shadowRoot, 7);
     const visibleTree = visibleNodesToTree(shadowRoot);
 

package/front_end/ui/components/tree_outline/TreeOutline.ts

@@ -7,7 +7,7 @@ import * as LitHtml from '../../lit-html/lit-html.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
 import * as CodeHighlighter from '../code_highlighter/code_highlighter.js';
 import * as ComponentHelpers from '../helpers/helpers.js';
-import * as Coordinator from '../render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../render_coordinator/render_coordinator.js';
 
 import treeOutlineStyles from './treeOutline.css.js';
 import {
@@ -23,8 +23,6 @@ import {
 
 const {html, Directives: {ifDefined}} = LitHtml;
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 export interface TreeOutlineData<TreeNodeDataType> {
   defaultRenderer: (node: TreeNode<TreeNodeDataType>, state: {isExpanded: boolean}) => LitHtml.TemplateResult;
   /**
@@ -337,7 +335,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     this.#selectedTreeNode = treeNode;
     await this.#render();
     this.dispatchEvent(new ItemSelectedEvent(treeNode));
-    void coordinator.write('DOMNode focus', () => {
+    void RenderCoordinator.write('DOMNode focus', () => {
       domNode.focus();
     });
   }
@@ -520,7 +518,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
 
     this.#scheduledRender = true;
 
-    await coordinator.write('TreeOutline render', () => {
+    await RenderCoordinator.write('TreeOutline render', () => {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       LitHtml.render(html`

package/front_end/ui/legacy/ARIAUtils.ts

@@ -146,10 +146,6 @@ export function markAsRadioGroup(element: Element): void {
   element.setAttribute('role', 'radiogroup');
 }
 
-export function markAsHidden(element: Element): void {
-  element.setAttribute('aria-hidden', 'true');
-}
-
 export function markAsSlider(element: Element, min: number|undefined = 0, max: number|undefined = 100): void {
   element.setAttribute('role', 'slider');
   element.setAttribute('aria-valuemin', String(min));
@@ -246,7 +242,7 @@ export function unsetExpandable(element: Element): void {
 }
 
 export function setHidden(element: Element, value: boolean): void {
-  element.setAttribute('aria-hidden', (Boolean(value)).toString());
+  element.setAttribute('aria-hidden', value.toString());
 }
 
 export function setLevel(element: Element, level: number): void {

package/front_end/ui/legacy/Dialog.ts

@@ -37,7 +37,6 @@ import {GlassPane, PointerEventsBehavior} from './GlassPane.js';
 import {InspectorView} from './InspectorView.js';
 import {KeyboardShortcut, Keys} from './KeyboardShortcut.js';
 import type {SplitWidget} from './SplitWidget.js';
-import type {DevToolsCloseButton} from './UIUtils.js';
 import {WidgetFocusRestorer} from './Widget.js';
 
 export class Dialog extends Common.ObjectWrapper.eventMixin<EventTypes, typeof GlassPane>(GlassPane) {
@@ -119,9 +118,8 @@ export class Dialog extends Common.ObjectWrapper.eventMixin<EventTypes, typeof G
   }
 
   addCloseButton(): void {
-    const closeButton =
-        (this.contentElement.createChild('div', 'dialog-close-button', 'dt-close-button') as DevToolsCloseButton);
-    closeButton.addEventListener('click', () => this.hide(), false);
+    const closeButton = this.contentElement.createChild('dt-close-button', 'dialog-close-button');
+    closeButton.addEventListener('click', this.hide.bind(this), false);
   }
 
   setOutsideTabIndexBehavior(tabIndexBehavior: OutsideTabIndexBehavior): void {

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

@@ -60,13 +60,13 @@ describe('DockController', () => {
      */
     await registerDockingSettings('left');
     const dockController = LegacyUI.DockController.DockController.instance({forceNew: true, canDock: true});
-    assert.strictEqual(dockController.dockSide(), undefined);
+    assert.isUndefined(dockController.dockSide());
   });
 
   it('falls back to undefined if the setting value is unexpected', async () => {
     await registerDockingSettings('woah-not-a-real-setting-value');
     const dockController = LegacyUI.DockController.DockController.instance({forceNew: true, canDock: true});
-    assert.strictEqual(dockController.dockSide(), undefined);
+    assert.isUndefined(dockController.dockSide());
   });
 
   it('sets the dockSide to undocked if the dock cannot be docked', async () => {

package/front_end/ui/legacy/DropTarget.ts

@@ -71,8 +71,7 @@ export class DropTarget {
       return;
     }
     this.dragMaskElement = this.element.createChild('div', '');
-    const shadowRoot =
-        createShadowRootWithCoreStyles(this.dragMaskElement, {cssFile: dropTargetStyles, delegatesFocus: undefined});
+    const shadowRoot = createShadowRootWithCoreStyles(this.dragMaskElement, {cssFile: dropTargetStyles});
     shadowRoot.createChild('div', 'drop-target-message').textContent = this.messageText;
     this.dragMaskElement.addEventListener('drop', this.onDrop.bind(this), true);
     this.dragMaskElement.addEventListener('dragleave', this.onDragLeave.bind(this), true);

package/front_end/ui/legacy/EmptyWidget.ts

@@ -52,7 +52,7 @@ export class EmptyWidget extends VBox {
     super();
     this.registerRequiredCSS(emptyWidgetStyles);
     this.element.classList.add('empty-view-scroller');
-    this.contentElement = this.element.createChild('div', 'empty-view') as HTMLDivElement;
+    this.contentElement = this.element.createChild('div', 'empty-view');
     this.contentElement.setAttribute('jslog', `${VisualLogging.section('empty-view')}`);
     this.textElement = this.contentElement.createChild('div', 'empty-bold-text');
     this.textElement.textContent = text;

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');
@@ -123,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));

package/front_end/ui/legacy/ListWidget.ts

@@ -389,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(