chrome-devtools-frontend 1.0.1022611 → 1.0.1024166

package/front_end/ui/components/buttons/Button.ts

@@ -17,7 +17,16 @@ declare global {
 export const enum Variant {
   PRIMARY = 'primary',
   SECONDARY = 'secondary',
+  // This is a bit confusing: the TOOLBAR variant is the historical variant
+  // that has been used when adding toolbar icons to legacy DevTools toolbars.
+  // In July 2022 we began work on the new unified toolbar, which will first be
+  // built for Performance Insights and then rolled out across the panels. Once
+  // that work is done, we can remove these two variants and revert back to
+  // having one.
+  // We need to differentiate because the unified toolbar icons are 16px in
+  // size, not 18px (which the toolbar small icons are).
   TOOLBAR = 'toolbar',
+  UNIFIED_TOOLBAR_2022 = 'unified_toolbar_2022',
   ROUND = 'round',
 }
 
@@ -60,10 +69,16 @@ export type ButtonData = {
   type?: ButtonType,
   value?: string,
   title?: string,
+}|{
+  variant: Variant.UNIFIED_TOOLBAR_2022,
+  iconUrl: string,
+  disabled?: boolean,
+  active?: boolean,
+  title?: string,
 };
 
 interface ButtonElementInternals extends ElementInternals {
-  readonly form?: HTMLFormElement;
+  readonly form: HTMLFormElement|null;
   readonly validity: ValidityState;
   readonly willValidate: boolean;
   readonly validationMessage: string;
@@ -100,10 +115,19 @@ export class Button extends HTMLElement {
   set data(data: ButtonData) {
     this.#props.variant = data.variant;
     this.#props.iconUrl = data.iconUrl;
-    this.#props.size = data.size || Size.MEDIUM;
+    this.#props.size = Size.MEDIUM;
+
+    if ('size' in data && data.size) {
+      this.#props.size = data.size;
+    }
+
     this.#props.active = Boolean(data.active);
-    this.#props.spinner = Boolean(data.spinner);
-    this.#props.type = data.type || 'button';
+    this.#props.spinner = Boolean('spinner' in data ? data.spinner : false);
+
+    this.#props.type = 'button';
+    if ('type' in data && data.type) {
+      this.#props.type = data.type;
+    }
     this.#setDisabledProperty(data.disabled || false);
     this.#props.title = data.title;
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
@@ -192,7 +216,7 @@ export class Button extends HTMLElement {
     if (!this.#props.variant) {
       throw new Error('Button requires a variant to be defined');
     }
-    if (this.#props.variant === Variant.TOOLBAR) {
+    if (this.#props.variant === Variant.TOOLBAR || this.#props.variant === Variant.UNIFIED_TOOLBAR_2022) {
       if (!this.#props.iconUrl) {
         throw new Error('Toolbar button requires an icon');
       }
@@ -211,7 +235,8 @@ export class Button extends HTMLElement {
     const classes = {
       primary: this.#props.variant === Variant.PRIMARY,
       secondary: this.#props.variant === Variant.SECONDARY,
-      toolbar: this.#props.variant === Variant.TOOLBAR,
+      toolbar: this.#props.variant === Variant.TOOLBAR || this.#props.variant === Variant.UNIFIED_TOOLBAR_2022,
+      'unified-toolbar-2022': this.#props.variant === Variant.UNIFIED_TOOLBAR_2022,
       round: this.#props.variant === Variant.ROUND,
       'text-with-icon': Boolean(this.#props.iconUrl) && !this.#isEmpty,
       'only-icon': Boolean(this.#props.iconUrl) && this.#isEmpty,
@@ -254,7 +279,7 @@ export class Button extends HTMLElement {
   // The following properties and methods aren't strictly required,
   // but browser-level form controls provide them. Providing them helps
   // ensure consistency with browser-provided controls.
-  get form(): HTMLFormElement|undefined {
+  get form(): HTMLFormElement|null {
     return this.#internals.form;
   }
   get name(): string|null {

package/front_end/ui/components/buttons/button.css

@@ -85,6 +85,15 @@ button.toolbar.small {
   width: 18px;
 }
 
+button.unified-toolbar-2022 {
+  /* These buttons are always 16px in dimension, and don't have different
+   * sizes, hence the lack of a size class above and the use of important! to
+   * ensure no sizing classes accidentally interfere.
+   */
+  height: 16px !important; /* stylelint-disable-line declaration-no-important */
+  width: 16px !important;/* stylelint-disable-line declaration-no-important */
+}
+
 button.round.small {
   height: 24px;
   width: 24px;
@@ -199,6 +208,13 @@ button.round devtools-icon {
   --icon-color: var(--color-text-secondary);
 }
 
+button.unified-toolbar-2022 devtools-icon {
+  width: 16px;
+  height: 16px;
+
+  --icon-color: var(--color-text-secondary);
+}
+
 button.primary devtools-icon {
   --icon-color: var(--color-background);
 }

package/front_end/ui/components/data_grid/DataGrid.ts

@@ -15,7 +15,7 @@ import {BodyCellFocusedEvent, ColumnHeaderClickEvent, ContextMenuHeaderResetClic
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 import {addColumnVisibilityCheckboxes, addSortableColumnItems} from './DataGridContextMenuUtils.js';
-import type {CellPosition, Column, Row, SortState} from './DataGridUtils.js';
+
 import {
   calculateColumnWidthPercentageFromWeighting,
   calculateFirstFocusableCell,
@@ -24,6 +24,10 @@ import {
   handleArrowKeyNavigation,
   renderCellValue,
   SortDirection,
+  type CellPosition,
+  type Column,
+  type Row,
+  type SortState,
 } from './DataGridUtils.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';

package/front_end/ui/components/data_grid/DataGridContextMenuUtils.ts

@@ -3,9 +3,9 @@
 // found in the LICENSE file.
 import type * as UI from '../../legacy/legacy.js';
 
-import type {DataGrid} from './DataGrid.js';
+import {type DataGrid} from './DataGrid.js';
 import {ContextMenuColumnSortClickEvent} from './DataGridEvents.js';
-import type {Column} from './DataGridUtils.js';
+import {type Column} from './DataGridUtils.js';
 
 function toggleColumnVisibility(dataGrid: DataGrid, column: Column): void {
   const newVisibility = !column.visible;

package/front_end/ui/components/data_grid/DataGridController.ts

@@ -5,11 +5,18 @@
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as ComponentHelpers from '../helpers/helpers.js';
 import type * as TextUtils from '../../../models/text_utils/text_utils.js';
-import type {SortState, Column, Row} from './DataGridUtils.js';
-import {SortDirection, getRowEntryForColumnId, getStringifiedCellValues} from './DataGridUtils.js';
-import type {DataGridData, DataGridContextMenusConfiguration} from './DataGrid.js';
-import type {ContextMenuColumnSortClickEvent, ColumnHeaderClickEvent} from './DataGridEvents.js';
-import {DataGrid} from './DataGrid.js';
+
+import {
+  SortDirection,
+  getRowEntryForColumnId,
+  getStringifiedCellValues,
+  type SortState,
+  type Column,
+  type Row,
+} from './DataGridUtils.js';
+
+import {type ContextMenuColumnSortClickEvent, type ColumnHeaderClickEvent} from './DataGridEvents.js';
+import {DataGrid, type DataGridData, type DataGridContextMenusConfiguration} from './DataGrid.js';
 import dataGridControllerStyles from './dataGridController.css.js';
 
 export interface DataGridControllerData {

package/front_end/ui/components/data_grid/DataGridControllerIntegrator.ts

@@ -3,8 +3,7 @@
 // found in the LICENSE file.
 
 import * as UI from '../../legacy/legacy.js';
-import {DataGridController} from './DataGridController.js';
-import type {DataGridControllerData} from './DataGridController.js';
+import {DataGridController, type DataGridControllerData} from './DataGridController.js';
 
 export class DataGridControllerIntegrator extends UI.Widget.VBox {
   readonly dataGrid: DataGridController;

package/front_end/ui/components/data_grid/DataGridEvents.ts

@@ -1,7 +1,7 @@
 // Copyright (c) 2021 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-import type {Cell, Column, Row} from './DataGridUtils.js';
+import {type Cell, type Column, type Row} from './DataGridUtils.js';
 
 export class ColumnHeaderClickEvent extends Event {
   static readonly eventName = 'columnheaderclick';

package/front_end/ui/components/data_grid/DataGridRenderers.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
-import type {CellValue} from './DataGridUtils.js';
+import {type CellValue} from './DataGridUtils.js';
 
 export const primitiveRenderer = (value: CellValue): LitHtml.TemplateResult => {
   return LitHtml.html`${value}`;

package/front_end/ui/components/docs/building-ui-documentation/CreatingComponents.md

@@ -0,0 +1,112 @@
+# Creating components
+
+A component is created by extending `HTMLElement`. The name of the component should match the filename. The component should be exported by the file.
+
+```ts
+// ElementBreadcrumbs.ts
+export class ElementBreadcrumbs extends HTMLElement {
+}
+```
+
+## Where to put components
+
+If the component is for a specific panel, and not expected to be re-usable, it should be created within the panel's folder, within a sub-directory of `components`:
+
+```
+front_end/panels/elements/components/ElementsBreadcrumbs.ts
+```
+
+If a component is designed to be re-usable, it should live in `front_end/ui/components`, in its own folder. That folder also contains an entrypoint, along with files for the component's definition.
+
+```
+front_end/ui/components/button/button.ts // entrypoint
+front_end/ui/components/button/Button.ts // component definition
+```
+
+## Defining and naming a component
+
+A component should be given a `static readonly litTagName` property, which defines its name:
+
+```ts
+// ElementBreadcrumbs.ts
+export class ElementBreadcrumbs extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-elements-breadcrumbs`;
+}
+```
+
+> Remember that all custom elements **must** contain a hyphen. Prefer `devtools-` as the prefix by default.
+
+We then use the `ComponentHelpers` module (`front_end/ui/components/helpers`) to define the component and register it with the browser:
+
+```ts
+ComponentHelpers.CustomElements.defineComponent('devtools-elements-breadcrumbs', ElementsBreadcrumbs);
+```
+
+And finally we tell TypeScript that this component exists:
+
+```ts
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-elements-breadcrumbs': ElementsBreadcrumbs;
+  }
+}
+```
+
+By doing this, TypeScript understands that `document.querySelector('devtools-elements-breadcrumbs')` returns an `ElementsBreadcrumbs` instance.
+
+We have a custom ESLint rule that ensures that the tag name is used consistently in all the locations where it is required.
+
+## Creating a shadow root
+
+Each component gets its own Shadow Root to ensure that styles and events that occur within it are encapsulated and do not leak out:
+
+```ts
+export class ElementsBreadcrumbs extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-elements-breadcrumbs`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+}
+```
+
+> We set the mode to `open` so it's open to inspection via DevTools. [See this MDN explainer](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/mode) for more details.
+
+## Rendering a component
+
+Each component defines a `#render` method which is responsible for invoking LitHtml and having the component render HTML into the DOM.
+
+> The `#` symbol indicates a [private class method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields).
+
+The `#render` method calls `LitHtml.render`, building up a template with `LitHtml.html`:
+
+```ts
+LitHtml.render(LitHtml.html``, this.#shadow, {host: this});
+```
+
+There is unfortunately a [clang-format bug](crbug.com/1079231) which makes its auto-formatting of LitHtml templates very unreadable, so we usually disable clang-format round the call:
+
+```ts
+// clang-format off
+LitHtml.render(...)
+// clang-format on
+```
+
+## Scheduled and batched rendering
+
+To have your component render, you could manually call `this.#render()`. However, if you were to have multiple updates to a component (perhaps some values it's passed get changed), we want to avoid having multiple renders where possible and instead batch them.
+
+We can use the `ScheduledRender` helper (`front_end/ui/components/helpers/scheduled-render.ts`) to achieve this. First, bind the `#render` method of your component, to ensure it's always bound to the component instance's scope:
+
+```ts
+export class ElementsBreadcrumbs extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-chrome-link`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #boundRender = this.#render.bind(this);
+}
+```
+
+Then, rather than call `this.#render()` directly, you instead call the scheduler:
+
+```ts
+void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+```
+
+> `scheduleRender` returns a promise; we use the `void` keyword to instruct TypeScript that we are purposefully not using `await` to wait for the promise to resolve. When scheduling a render it's most common to "fire and forget".

package/front_end/ui/components/docs/building-ui-documentation/README.md

@@ -0,0 +1,19 @@
+# Building UI elements in DevTools
+
+This is the documentation containing all the information you need to be able to build UI in DevTools and get familiar with our front-end stack.
+
+Note that this documentation is a work in progress as it is migrated from the [original Google Doc](https://docs.google.com/document/d/1Gwd-w7LoW1qnWu3uku438-MQ82m4AinKDIdy9z3fl3Q/edit?resourcekey=0-vxHqiKAvfJ4JAOj4bZ4EFA#). crbug.com/1344124 tracks this work.
+
+## Table of Contents
+
+1. [Creating components](./CreatingComponents.md)
+
+## FAQs
+
+> Wasn't this a google doc before?
+
+Yes. The original version of this documentation was a publicly accessible Google Doc. However, keeping the documentation apart from the code was a challenge, along with the fact that Docs aren't the best for dealing with lots of code. That motivated the change to move the documentation into the repository, hopefully helping it keep up to date and still remaining public.
+
+> What should I do if I want to make a change?
+
+Please send a CL and ask jacktfranklin@ to review it. If you're not sure on the change, feel free to ping jacktfranklin@ to discuss.

package/front_end/ui/components/docs/button/basic.html

@@ -35,6 +35,15 @@
         padding: 0px 5px;
         height: 23px;
       }
+      #unified-toolbar {
+        background-color: var(--color-background);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        border-bottom: 1px solid var(--color-details-hairline);
+        padding: 5px 6px;
+        height: 26px;
+      }
       .separator {
         background-color: var(--color-details-hairline);
         width: 1px;
@@ -50,6 +59,8 @@
     </div>
     <div id="small-toolbar">
     </div>
+    <div id="unified-toolbar">
+    </div>
     <form onsubmit="event.preventDefault(); alert('submitted');" id="form">
       <input name="field" placeholder="Enter smth" />
     </form>

package/front_end/ui/components/docs/button/basic.ts

@@ -299,6 +299,13 @@ for (let i = 0; i < 6; i++) {
   }
 }
 
+const unifiedToolbarButton = new Buttons.Button.Button();
+unifiedToolbarButton.data = {
+  variant: Buttons.Button.Variant.UNIFIED_TOOLBAR_2022,
+  iconUrl: testIcon,
+};
+document.querySelector('#unified-toolbar')?.appendChild(unifiedToolbarButton);
+
 // Submit Button
 const submitButton = new Buttons.Button.Button();
 submitButton.data = {

package/front_end/ui/components/icon_button/IconButton.ts

@@ -5,11 +5,9 @@
 import * as ComponentHelpers from '../../components/helpers/helpers.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
 
-import {Icon} from './Icon.js';
+import {Icon, type IconData} from './Icon.js';
 import iconButtonStyles from './iconButton.css.js';
 
-import type {IconData} from './Icon.js';
-
 export interface IconWithTextData {
   iconName: string;
   iconColor?: string;

package/front_end/ui/components/linear_memory_inspector/LinearMemoryInspector.ts

@@ -9,25 +9,39 @@ import linearMemoryInspectorStyles from './linearMemoryInspector.css.js';
 
 const {render, html} = LitHtml;
 
-import type {
-  AddressInputChangedEvent, HistoryNavigationEvent, LinearMemoryNavigatorData, PageNavigationEvent} from
-  './LinearMemoryNavigator.js';
-import {Mode, Navigation, LinearMemoryNavigator} from './LinearMemoryNavigator.js';
-import type {
-  EndiannessChangedEvent, LinearMemoryValueInterpreterData, ValueTypeToggledEvent} from
-  './LinearMemoryValueInterpreter.js';
-import {LinearMemoryValueInterpreter} from './LinearMemoryValueInterpreter.js';
-import type {ByteSelectedEvent, LinearMemoryViewerData, ResizeEvent} from './LinearMemoryViewer.js';
-import type {ValueType, ValueTypeMode} from './ValueInterpreterDisplayUtils.js';
+import {
+  Mode,
+  Navigation,
+  LinearMemoryNavigator,
+  type AddressInputChangedEvent,
+  type HistoryNavigationEvent,
+  type LinearMemoryNavigatorData,
+  type PageNavigationEvent,
+} from './LinearMemoryNavigator.js';
+
+import {
+  LinearMemoryValueInterpreter,
+  type EndiannessChangedEvent,
+  type LinearMemoryValueInterpreterData,
+  type ValueTypeToggledEvent,
+} from './LinearMemoryValueInterpreter.js';
+
 import {
   VALUE_INTEPRETER_MAX_NUM_BYTES,
   Endianness,
   getDefaultValueTypeMapping,
+  type ValueType,
+  type ValueTypeMode,
 } from './ValueInterpreterDisplayUtils.js';
 import {formatAddress, parseAddress} from './LinearMemoryInspectorUtils.js';
-import type {JumpToPointerAddressEvent, ValueTypeModeChangedEvent} from './ValueInterpreterDisplay.js';
-import {LinearMemoryViewer} from './LinearMemoryViewer.js';
-import type {HighlightInfo} from './LinearMemoryViewerUtils.js';
+import {type JumpToPointerAddressEvent, type ValueTypeModeChangedEvent} from './ValueInterpreterDisplay.js';
+import {
+  LinearMemoryViewer,
+  type ByteSelectedEvent,
+  type LinearMemoryViewerData,
+  type ResizeEvent,
+} from './LinearMemoryViewer.js';
+import {type HighlightInfo} from './LinearMemoryViewerUtils.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 const UIStrings = {

package/front_end/ui/components/linear_memory_inspector/LinearMemoryInspectorController.ts

@@ -9,12 +9,17 @@ import * as SDK from '../../../core/sdk/sdk.js';
 import * as Protocol from '../../../generated/protocol.js';
 import * as UI from '../../legacy/legacy.js';
 
-import type {Settings} from './LinearMemoryInspector.js';
+import {type Settings} from './LinearMemoryInspector.js';
 import {Events as LmiEvents, LinearMemoryInspectorPaneImpl} from './LinearMemoryInspectorPane.js';
-import type {ValueType, ValueTypeMode} from './ValueInterpreterDisplayUtils.js';
-import {Endianness, getDefaultValueTypeMapping} from './ValueInterpreterDisplayUtils.js';
+
+import {
+  Endianness,
+  getDefaultValueTypeMapping,
+  type ValueType,
+  type ValueTypeMode,
+} from './ValueInterpreterDisplayUtils.js';
 import * as Bindings from '../../../models/bindings/bindings.js';
-import type {HighlightInfo} from './LinearMemoryViewerUtils.js';
+import {type HighlightInfo} from './LinearMemoryViewerUtils.js';
 
 const UIStrings = {
   /**

package/front_end/ui/components/linear_memory_inspector/LinearMemoryInspectorPane.ts

@@ -6,11 +6,16 @@ import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as UI from '../../legacy/legacy.js';
 
-import type {AddressChangedEvent, MemoryRequestEvent, Settings, SettingsChangedEvent} from './LinearMemoryInspector.js';
-import {LinearMemoryInspector} from './LinearMemoryInspector.js';
-import type {LazyUint8Array} from './LinearMemoryInspectorController.js';
-import {LinearMemoryInspectorController} from './LinearMemoryInspectorController.js';
-import type {HighlightInfo} from './LinearMemoryViewerUtils.js';
+import {
+  LinearMemoryInspector,
+  type AddressChangedEvent,
+  type MemoryRequestEvent,
+  type Settings,
+  type SettingsChangedEvent,
+} from './LinearMemoryInspector.js';
+
+import {LinearMemoryInspectorController, type LazyUint8Array} from './LinearMemoryInspectorController.js';
+import {type HighlightInfo} from './LinearMemoryViewerUtils.js';
 
 const UIStrings = {
   /**

package/front_end/ui/components/linear_memory_inspector/LinearMemoryValueInterpreter.ts

@@ -7,13 +7,14 @@ import * as ComponentHelpers from '../helpers/helpers.js';
 import * as IconButton from '../icon_button/icon_button.js';
 import linearMemoryValueInterpreterStyles from './linearMemoryValueInterpreter.css.js';
 
-import {ValueInterpreterDisplay} from './ValueInterpreterDisplay.js';
-import {ValueInterpreterSettings} from './ValueInterpreterSettings.js';
-
-import type {ValueDisplayData} from './ValueInterpreterDisplay.js';
-import type {ValueType, ValueTypeMode} from './ValueInterpreterDisplayUtils.js';
-import {Endianness} from './ValueInterpreterDisplayUtils.js';
-import type {TypeToggleEvent, ValueInterpreterSettingsData} from './ValueInterpreterSettings.js';
+import {ValueInterpreterDisplay, type ValueDisplayData} from './ValueInterpreterDisplay.js';
+import {
+  ValueInterpreterSettings,
+  type TypeToggleEvent,
+  type ValueInterpreterSettingsData,
+} from './ValueInterpreterSettings.js';
+
+import {Endianness, type ValueType, type ValueTypeMode} from './ValueInterpreterDisplayUtils.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 

package/front_end/ui/components/linear_memory_inspector/LinearMemoryViewer.ts

@@ -4,7 +4,7 @@
 import * as LitHtml from '../../lit-html/lit-html.js';
 import * as ComponentHelpers from '../helpers/helpers.js';
 
-import type {HighlightInfo} from './LinearMemoryViewerUtils.js';
+import {type HighlightInfo} from './LinearMemoryViewerUtils.js';
 import {toHexString} from './LinearMemoryInspectorUtils.js';
 import linearMemoryViewerStyles from './linearMemoryViewer.css.js';
 

package/front_end/ui/components/markdown_view/MarkdownImage.ts

@@ -7,8 +7,7 @@ import * as IconButton from '../../components/icon_button/icon_button.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
 import markdownImageStyles from './markdownImage.css.js';
 
-import type {ImageData} from './MarkdownImagesMap.js';
-import {getMarkdownImage} from './MarkdownImagesMap.js';
+import {getMarkdownImage, type ImageData} from './MarkdownImagesMap.js';
 
 export interface MarkdownImageData {
   key: string;

package/front_end/ui/components/markdown_view/MarkdownView.ts

@@ -7,10 +7,8 @@ import type * as Marked from '../../../third_party/marked/marked.js';
 import * as ComponentHelpers from '../../components/helpers/helpers.js';
 import markdownViewStyles from './markdownView.css.js';
 
-import type {MarkdownImageData} from './MarkdownImage.js';
-import type {MarkdownLinkData} from './MarkdownLink.js';
-import {MarkdownLink} from './MarkdownLink.js';
-import {MarkdownImage} from './MarkdownImage.js';
+import {MarkdownLink, type MarkdownLinkData} from './MarkdownLink.js';
+import {MarkdownImage, type MarkdownImageData} from './MarkdownImage.js';
 
 const html = LitHtml.html;
 const render = LitHtml.render;

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

@@ -10,13 +10,15 @@ import * as Coordinator from '../render_coordinator/render_coordinator.js';
 
 import treeOutlineStyles from './treeOutline.css.js';
 
-import type {TreeNodeId, TreeNode, TreeNodeWithChildren} from './TreeOutlineUtils.js';
 import {
   findNextNodeForTreeOutlineKeyboardNavigation,
   getNodeChildren,
   getPathToTreeNode,
   isExpandableNode,
   trackDOMNodeToTreeNode,
+  type TreeNodeId,
+  type TreeNode,
+  type TreeNodeWithChildren,
 } from './TreeOutlineUtils.js';
 
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();

package/front_end/ui/legacy/ActionRegistry.ts

@@ -2,8 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type {Action} from './ActionRegistration.js';
-import {getRegisteredActionExtensions} from './ActionRegistration.js';
+import {getRegisteredActionExtensions, type Action} from './ActionRegistration.js';
 import {Context} from './Context.js';
 
 let actionRegistryInstance: ActionRegistry|undefined;

package/front_end/ui/legacy/Context.ts

@@ -5,7 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as Root from '../../core/root/root.js';  // eslint-disable-line @typescript-eslint/no-unused-vars
 
-import type {ContextFlavorListener} from './ContextFlavorListener.js';
+import {type ContextFlavorListener} from './ContextFlavorListener.js';
 
 let contextInstance: Context;
 

package/front_end/ui/legacy/ContextMenu.ts

@@ -34,8 +34,8 @@ import * as Root from '../../core/root/root.js';
 
 import {ActionRegistry} from './ActionRegistry.js';
 import {ShortcutRegistry} from './ShortcutRegistry.js';
-import type {SoftContextMenuDescriptor} from './SoftContextMenu.js';
-import {SoftContextMenu} from './SoftContextMenu.js';
+
+import {SoftContextMenu, type SoftContextMenuDescriptor} from './SoftContextMenu.js';
 import {deepElementFromEvent} from './UIUtils.js';
 
 export class Item {

package/front_end/ui/legacy/Dialog.ts

@@ -34,10 +34,10 @@ import * as ARIAUtils from './ARIAUtils.js';
 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 type {WidgetElement} from './Widget.js';
-import {WidgetFocusRestorer} from './Widget.js';
+import {type SplitWidget} from './SplitWidget.js';
+import {type DevToolsCloseButton} from './UIUtils.js';
+
+import {WidgetFocusRestorer, type WidgetElement} from './Widget.js';
 
 import dialogStyles from './dialog.css.legacy.js';
 

package/front_end/ui/legacy/DockController.ts

@@ -33,10 +33,10 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 
-import type {ActionDelegate} from './ActionRegistration.js';
-import type {Context} from './Context.js';
-import type {Provider, ToolbarItem} from './Toolbar.js';
-import {ToolbarButton} from './Toolbar.js';
+import {type ActionDelegate} from './ActionRegistration.js';
+import {type Context} from './Context.js';
+
+import {ToolbarButton, type Provider, type ToolbarItem} from './Toolbar.js';
 
 const UIStrings = {
   /**

package/front_end/ui/legacy/FilterBar.ts

@@ -36,10 +36,10 @@ import * as ARIAUtils from './ARIAUtils.js';
 import {Icon} from './Icon.js';
 import {KeyboardShortcut, Modifiers} from './KeyboardShortcut.js';
 import {bindCheckbox} from './SettingsUI.js';
-import type {Suggestions} from './SuggestBox.js';
+import {type Suggestions} from './SuggestBox.js';
 import {Events, TextPrompt} from './TextPrompt.js';
-import type {ToolbarButton} from './Toolbar.js';
-import {ToolbarSettingToggle} from './Toolbar.js';
+
+import {ToolbarSettingToggle, type ToolbarButton} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
 import {CheckboxLabel, createTextChild} from './UIUtils.js';
 import {HBox} from './Widget.js';