chrome-devtools-frontend 1.0.1023618 → 1.0.1025020

package/front_end/panels/css_overview/CSSOverviewProcessingView.ts

@@ -7,8 +7,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 
 import cssOverviewProcessingViewStyles from './cssOverviewProcessingView.css.js';
 
-import type {OverviewController} from './CSSOverviewController.js';
-import {Events} from './CSSOverviewController.js';
+import {Events, type OverviewController} from './CSSOverviewController.js';
 
 const UIStrings = {
   /**

package/front_end/panels/elements/ColorSwatchPopoverIcon.ts

@@ -9,9 +9,9 @@ import * as ColorPicker from '../../ui/legacy/components/color_picker/color_pick
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {StylePropertiesSection} from './StylePropertiesSection.js';
-import type {StylePropertyTreeElement} from './StylePropertyTreeElement.js';
-import type {StylesSidebarPane} from './StylesSidebarPane.js';
+import {type StylePropertiesSection} from './StylePropertiesSection.js';
+import {type StylePropertyTreeElement} from './StylePropertyTreeElement.js';
+import {type StylesSidebarPane} from './StylesSidebarPane.js';
 
 const UIStrings = {
   /**

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -42,12 +42,11 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as ElementsComponents from './components/components.js';
 import computedStyleSidebarPaneStyles from './computedStyleSidebarPane.css.js';
 
-import type {ComputedStyle} from './ComputedStyleModel.js';
-import {ComputedStyleModel, Events} from './ComputedStyleModel.js';
+import {ComputedStyleModel, Events, type ComputedStyle} from './ComputedStyleModel.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {PlatformFontsWidget} from './PlatformFontsWidget.js';
-import type {Category} from './PropertyNameCategories.js';
-import {categorizePropertyName, DefaultCategoryOrder} from './PropertyNameCategories.js';
+
+import {categorizePropertyName, DefaultCategoryOrder, type Category} from './PropertyNameCategories.js';
 import {StylePropertiesSection} from './StylePropertiesSection.js';
 import {StylesSidebarPane, StylesSidebarPropertyRenderer} from './StylesSidebarPane.js';
 import * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';

package/front_end/panels/elements/ElementsPanel.ts

@@ -51,14 +51,17 @@ import {AccessibilityTreeView} from './AccessibilityTreeView.js';
 import * as ElementsComponents from './components/components.js';
 import {ComputedStyleWidget} from './ComputedStyleWidget.js';
 
-import type {ElementsTreeElement} from './ElementsTreeElement.js';
+import {type ElementsTreeElement} from './ElementsTreeElement.js';
 import {ElementsTreeElementHighlighter} from './ElementsTreeElementHighlighter.js';
 import {ElementsTreeOutline} from './ElementsTreeOutline.js';
-import type {MarkerDecorator} from './MarkerDecorator.js';
+import {type MarkerDecorator} from './MarkerDecorator.js';
 import {MetricsSidebarPane} from './MetricsSidebarPane.js';
 import {LayoutSidebarPane} from './LayoutSidebarPane.js';
-import {Events as StylesSidebarPaneEvents, StylesSidebarPane} from './StylesSidebarPane.js';
-import type {StylesUpdateCompletedEvent} from './StylesSidebarPane.js';
+import {
+  Events as StylesSidebarPaneEvents,
+  StylesSidebarPane,
+  type StylesUpdateCompletedEvent,
+} from './StylesSidebarPane.js';
 
 const UIStrings = {
   /**

package/front_end/panels/elements/ElementsSidebarPane.ts

@@ -6,8 +6,7 @@ import * as Common from '../../core/common/common.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {ComputedStyleChangedEvent} from './ComputedStyleModel.js';
-import {ComputedStyleModel, Events} from './ComputedStyleModel.js';
+import {ComputedStyleModel, Events, type ComputedStyleChangedEvent} from './ComputedStyleModel.js';
 
 export class ElementsSidebarPane extends UI.Widget.VBox {
   protected computedStyleModelInternal: ComputedStyleModel;

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -51,11 +51,10 @@ import * as ElementsComponents from './components/components.js';
 import {canGetJSPath, cssPath, jsPath, xPath} from './DOMPath.js';
 import {ElementsPanel} from './ElementsPanel.js';
 
-import type {ElementsTreeOutline, UpdateRecord} from './ElementsTreeOutline.js';
-import {MappedCharToEntity} from './ElementsTreeOutline.js';
+import {MappedCharToEntity, type ElementsTreeOutline, type UpdateRecord} from './ElementsTreeOutline.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
-import type {MarkerDecorator, MarkerDecoratorRegistration} from './MarkerDecorator.js';
-import {getRegisteredDecorators} from './MarkerDecorator.js';
+
+import {getRegisteredDecorators, type MarkerDecorator, type MarkerDecoratorRegistration} from './MarkerDecorator.js';
 
 const UIStrings = {
   /**

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -47,7 +47,7 @@ import elementsTreeOutlineStyles from './elementsTreeOutline.css.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {TopLayerContainer} from './TopLayerContainer.js';
 
-import type {MarkerDecoratorRegistration} from './MarkerDecorator.js';
+import {type MarkerDecoratorRegistration} from './MarkerDecorator.js';
 
 const UIStrings = {
   /**

package/front_end/panels/elements/PlatformFontsWidget.ts

@@ -36,8 +36,7 @@ import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import type * as Protocol from '../../generated/protocol.js';
 
-import type {ComputedStyleModel} from './ComputedStyleModel.js';
-import {Events} from './ComputedStyleModel.js';
+import {Events, type ComputedStyleModel} from './ComputedStyleModel.js';
 
 const UIStrings = {
   /**

package/front_end/panels/elements/StyleEditorWidget.ts

@@ -6,9 +6,9 @@ import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import type * as ElementsComponents from './components/components.js';
 
-import type {StylePropertiesSection} from './StylePropertiesSection.js';
+import {type StylePropertiesSection} from './StylePropertiesSection.js';
 import {StylePropertyTreeElement} from './StylePropertyTreeElement.js';
-import type {StylesSidebarPane} from './StylesSidebarPane.js';
+import {type StylesSidebarPane} from './StylesSidebarPane.js';
 
 type PropertySelectedEvent = ElementsComponents.StylePropertyEditor.PropertySelectedEvent;
 type PropertyDeselectedEvent = ElementsComponents.StylePropertyEditor.PropertyDeselectedEvent;

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -48,8 +48,7 @@ import {linkifyDeferredNodeReference} from './DOMLinkifier.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import stylesSectionTreeStyles from './stylesSectionTree.css.js';
 
-import type {Context} from './StylePropertyTreeElement.js';
-import {StylePropertyTreeElement} from './StylePropertyTreeElement.js';
+import {StylePropertyTreeElement, type Context} from './StylePropertyTreeElement.js';
 import {StylesSidebarPane} from './StylesSidebarPane.js';
 
 const UIStrings = {

package/front_end/panels/elements/StylePropertyHighlighter.ts

@@ -4,9 +4,9 @@
 
 import type * as SDK from '../../core/sdk/sdk.js';
 
-import type {StylePropertiesSection} from './StylePropertiesSection.js';
+import {type StylePropertiesSection} from './StylePropertiesSection.js';
 import {StylePropertyTreeElement} from './StylePropertyTreeElement.js';
-import type {StylesSidebarPane} from './StylesSidebarPane.js';
+import {type StylesSidebarPane} from './StylesSidebarPane.js';
 
 export class StylePropertyHighlighter {
   private readonly styleSidebarPane: StylesSidebarPane;

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -18,11 +18,10 @@ import {BezierPopoverIcon, ColorSwatchPopoverIcon, ShadowSwatchPopoverHelper} fr
 import * as ElementsComponents from './components/components.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import {StyleEditorWidget} from './StyleEditorWidget.js';
-import type {StylePropertiesSection} from './StylePropertiesSection.js';
+import {type StylePropertiesSection} from './StylePropertiesSection.js';
 import {CSSPropertyPrompt, StylesSidebarPane, StylesSidebarPropertyRenderer} from './StylesSidebarPane.js';
 import {getCssDeclarationAsJavascriptProperty} from './StylePropertyUtils.js';
-import {cssRuleValidatorsMap} from './CSSRuleValidator.js';
-import type {AuthoringHint} from './CSSRuleValidator.js';
+import {cssRuleValidatorsMap, type AuthoringHint} from './CSSRuleValidator.js';
 
 const FlexboxEditor = ElementsComponents.StylePropertyEditor.FlexboxEditor;
 const GridEditor = ElementsComponents.StylePropertyEditor.GridEditor;

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -51,8 +51,8 @@ import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import * as ElementsComponents from './components/components.js';
-import type {ComputedStyleChangedEvent} from './ComputedStyleModel.js';
-import {ComputedStyleModel} from './ComputedStyleModel.js';
+
+import {ComputedStyleModel, type ComputedStyleChangedEvent} from './ComputedStyleModel.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import {ElementsSidebarPane} from './ElementsSidebarPane.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
@@ -60,7 +60,7 @@ import {StyleEditorWidget} from './StyleEditorWidget.js';
 import {StylePropertyHighlighter} from './StylePropertyHighlighter.js';
 import stylesSidebarPaneStyles from './stylesSidebarPane.css.js';
 
-import type {StylePropertyTreeElement} from './StylePropertyTreeElement.js';
+import {type StylePropertyTreeElement} from './StylePropertyTreeElement.js';
 import {
   StylePropertiesSection,
   BlankStylePropertiesSection,
@@ -216,6 +216,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   activeCSSAngle: InlineEditor.CSSAngle.CSSAngle|null;
   #urlToChangeTracker: Map<Platform.DevToolsPath.UrlString, ChangeTracker> = new Map();
   #copyChangesButton?: UI.Toolbar.ToolbarButton;
+  #updateAbortController?: AbortController;
 
   static instance(): StylesSidebarPane {
     if (!stylesSidebarPaneInstance) {
@@ -422,6 +423,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   forceUpdate(): void {
     this.needsForceUpdate = true;
     this.swatchPopoverHelperInternal.hide();
+    this.#updateAbortController?.abort();
     this.resetCache();
     this.update();
   }
@@ -574,8 +576,17 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   }
 
   async doUpdate(): Promise<void> {
+    this.#updateAbortController?.abort();
+    this.#updateAbortController = new AbortController();
+    await this.#innerDoUpdate(this.#updateAbortController.signal);
+  }
+
+  async #innerDoUpdate(signal: AbortSignal): Promise<void> {
     if (!this.initialUpdateCompleted) {
       window.setTimeout(() => {
+        if (signal.aborted) {
+          return;
+        }
         if (!this.initialUpdateCompleted) {
           // the spinner will get automatically removed when innerRebuildUpdate is called
           this.sectionsContainer.createChild('span', 'spinner');
@@ -583,16 +594,28 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       }, 200 /* only spin for loading time > 200ms to avoid unpleasant render flashes */);
     }
 
-    const node = this.node();
-    // TODO: Fetch the parent node id using CDP command
-    const parentNode = node ? node.parentNode : null;
+    const matchedStyles = await this.fetchMatchedCascade();
+
+    if (signal.aborted) {
+      return;
+    }
+
+    const nodeId = this.node()?.id;
+    const parentNodeId = matchedStyles?.getParentLayoutNodeId();
 
     const [computedStyles, parentsComputedStyles] =
-        await Promise.all([this.fetchComputedStylesFor(node), this.fetchComputedStylesFor(parentNode)]);
+        await Promise.all([this.fetchComputedStylesFor(nodeId), this.fetchComputedStylesFor(parentNodeId)]);
 
-    const matchedStyles = await this.fetchMatchedCascade();
+    if (signal.aborted) {
+      return;
+    }
+
+    await this.innerRebuildUpdate(signal, matchedStyles, computedStyles, parentsComputedStyles);
+
+    if (signal.aborted) {
+      return;
+    }
 
-    await this.innerRebuildUpdate(matchedStyles, computedStyles, parentsComputedStyles);
     if (!this.initialUpdateCompleted) {
       this.initialUpdateCompleted = true;
       this.appendToolbarItem(this.createRenderingShortcuts());
@@ -604,14 +627,17 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       this.dispatchEventToListeners(Events.InitialUpdateCompleted);
     }
 
+    this.nodeStylesUpdatedForTest((this.node() as SDK.DOMModel.DOMNode), true);
+
     this.dispatchEventToListeners(Events.StylesUpdateCompleted, {hasMatchedStyles: this.hasMatchedStyles});
   }
 
-  private async fetchComputedStylesFor(node: SDK.DOMModel.DOMNode|null): Promise<Map<string, string>|null> {
-    if (!node) {
+  private async fetchComputedStylesFor(nodeId: Protocol.DOM.NodeId|undefined): Promise<Map<string, string>|null> {
+    const node = this.node();
+    if (node === null || nodeId === undefined) {
       return null;
     }
-    return await node.domModel().cssModel().getComputedStyle(node.id);
+    return await node.domModel().cssModel().getComputedStyle(nodeId);
   }
 
   onResize(): void {
@@ -734,8 +760,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   }
 
   private async innerRebuildUpdate(
-      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null, computedStyles: Map<string, string>|null,
-      parentsComputedStyles: Map<string, string>|null): Promise<void> {
+      signal: AbortSignal, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null,
+      computedStyles: Map<string, string>|null, parentsComputedStyles: Map<string, string>|null): Promise<void> {
     // ElementsSidebarPane's throttler schedules this method. Usually,
     // rebuild is suppressed while editing (see onCSSModelChanged()), but we need a
     // 'force' flag since the currently running throttler process cannot be canceled.
@@ -759,9 +785,15 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       return;
     }
 
-    this.sectionBlocks = await this.rebuildSectionsForMatchedStyleRules(
+    const blocks = await this.rebuildSectionsForMatchedStyleRules(
         (matchedStyles as SDK.CSSMatchedStyles.CSSMatchedStyles), computedStyles, parentsComputedStyles);
 
+    if (signal.aborted) {
+      return;
+    }
+
+    this.sectionBlocks = blocks;
+
     // Style sections maybe re-created when flexbox editor is activated.
     // With the following code we re-bind the flexbox editor to the new
     // section with the same index as the previous section had.
@@ -813,7 +845,6 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     } else {
       this.noMatchesElement.classList.toggle('hidden', this.sectionBlocks.length > 0);
     }
-    this.nodeStylesUpdatedForTest((node as SDK.DOMModel.DOMNode), true);
     if (this.lastRevealedProperty) {
       this.decorator.highlightProperty(this.lastRevealedProperty);
       this.lastRevealedProperty = null;

package/front_end/panels/elements/TopLayerContainer.ts

@@ -9,7 +9,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as ElementsComponents from './components/components.js';
 import * as ElementsTreeOutline from './ElementsTreeOutline.js';
 
-import type {ElementsTreeElement} from './ElementsTreeElement.js';
+import {type ElementsTreeElement} from './ElementsTreeElement.js';
 
 const UIStrings = {
   /**

package/front_end/panels/elements/components/AdornerSettingsPane.ts

@@ -8,7 +8,7 @@ import * as Input from '../../../ui/components/input/input.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import adornerSettingsPaneStyles from './adornerSettingsPane.css.js';
 
-import type {AdornerSettingsMap} from './AdornerManager.js';
+import {type AdornerSettingsMap} from './AdornerManager.js';
 
 const UIStrings = {
   /**

package/front_end/panels/elements/components/ElementsBreadcrumbs.ts

@@ -9,10 +9,9 @@ import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import elementsBreadcrumbsStyles from './elementsBreadcrumbs.css.js';
 
-import type {UserScrollPosition} from './ElementsBreadcrumbsUtils.js';
-import {crumbsToRender} from './ElementsBreadcrumbsUtils.js';
+import {crumbsToRender, type UserScrollPosition} from './ElementsBreadcrumbsUtils.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
-import type {DOMNode} from './Helper.js';
+import {type DOMNode} from './Helper.js';
 
 import * as NodeText from '../../../ui/components/node_text/node_text.js';
 

package/front_end/panels/elements/components/ElementsBreadcrumbsUtils.ts

@@ -4,7 +4,7 @@
 
 import * as i18n from '../../../core/i18n/i18n.js';
 
-import type {DOMNode} from './Helper.js';
+import {type DOMNode} from './Helper.js';
 
 const UIStrings = {
   /**

package/front_end/panels/elements/components/LayoutPane.ts

@@ -7,8 +7,7 @@ import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
-import type {BooleanSetting, EnumSetting, Setting} from './LayoutPaneUtils.js';
-import type {LayoutElement} from './LayoutPaneUtils.js';
+import {type LayoutElement, type BooleanSetting, type EnumSetting, type Setting} from './LayoutPaneUtils.js';
 
 import layoutPaneStyles from '../layoutPane.css.js';
 import * as Input from '../../../ui/components/input/input.js';

package/front_end/panels/elements/components/QueryContainer.ts

@@ -8,7 +8,7 @@ import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as NodeText from '../../../ui/components/node_text/node_text.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
-import type {DOMNode} from './Helper.js';
+import {type DOMNode} from './Helper.js';
 import queryContainerStyles from './queryContainer.css.js';
 
 const {render, html} = LitHtml;

package/front_end/panels/elements/components/StylePropertyEditor.ts

@@ -8,8 +8,7 @@ import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import stylePropertyEditorStyles from './stylePropertyEditor.css.js';
 
-import type {IconInfo} from './CSSPropertyIconResolver.js';
-import {findFlexContainerIcon, findGridContainerIcon} from './CSSPropertyIconResolver.js';
+import {findFlexContainerIcon, findGridContainerIcon, type IconInfo} from './CSSPropertyIconResolver.js';
 
 const UIStrings = {
   /**

package/front_end/panels/emulation/AdvancedApp.ts

@@ -8,8 +8,8 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import {DeviceModeWrapper} from './DeviceModeWrapper.js';
-import type {Bounds} from './InspectedPagePlaceholder.js';
-import {Events, InspectedPagePlaceholder} from './InspectedPagePlaceholder.js';
+
+import {Events, InspectedPagePlaceholder, type Bounds} from './InspectedPagePlaceholder.js';
 
 let appInstance: AdvancedApp;
 

package/front_end/panels/emulation/DeviceModeWrapper.ts

@@ -10,7 +10,7 @@ import type * as Protocol from '../../generated/protocol.js';
 import * as EmulationModel from '../../models/emulation/emulation.js';
 
 import {DeviceModeView} from './DeviceModeView.js';
-import type {InspectedPagePlaceholder} from './InspectedPagePlaceholder.js';
+import {type InspectedPagePlaceholder} from './InspectedPagePlaceholder.js';
 
 let deviceModeWrapperInstance: DeviceModeWrapper;
 

package/front_end/panels/event_listeners/EventListenersView.ts

@@ -15,8 +15,7 @@ import eventListenersViewStyles from './eventListenersView.css.js';
 
 import type * as Protocol from '../../generated/protocol.js';
 
-import type {FrameworkEventListenersObject} from './EventListenersUtils.js';
-import {frameworkEventListeners} from './EventListenersUtils.js';
+import {frameworkEventListeners, type FrameworkEventListenersObject} from './EventListenersUtils.js';
 
 const UIStrings = {
   /**

package/front_end/panels/issues/AffectedResourcesView.ts

@@ -16,8 +16,8 @@ import type * as NetworkForward from '../../panels/network/forward/forward.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as RequestLinkIcon from '../../ui/components/request_link_icon/request_link_icon.js';
 
-import type {IssueView} from './IssueView.js';
-import type {AggregatedIssue} from './IssueAggregator.js';
+import {type IssueView} from './IssueView.js';
+import {type AggregatedIssue} from './IssueAggregator.js';
 
 const UIStrings = {
   /**

package/front_end/panels/issues/CorsIssueDetailsView.ts

@@ -11,8 +11,8 @@ import * as NetworkForward from '../../panels/network/forward/forward.js';
 
 import {AffectedItem, AffectedResourcesView} from './AffectedResourcesView.js';
 
-import type {AggregatedIssue} from './IssueAggregator.js';
-import type {IssueView} from './IssueView.js';
+import {type AggregatedIssue} from './IssueAggregator.js';
+import {type IssueView} from './IssueView.js';
 
 const UIStrings = {
   /**

package/front_end/panels/issues/IssueView.ts

@@ -32,8 +32,8 @@ import {CorsIssueDetailsView} from './CorsIssueDetailsView.js';
 import {GenericIssueDetailsView} from './GenericIssueDetailsView.js';
 import {AttributionReportingIssueDetailsView} from './AttributionReportingIssueDetailsView.js';
 
-import type {AggregatedIssue} from './IssueAggregator.js';
-import type {HiddenIssuesMenuData} from './components/HideIssuesMenu.js';
+import {type AggregatedIssue} from './IssueAggregator.js';
+import {type HiddenIssuesMenuData} from './components/HideIssuesMenu.js';
 
 const UIStrings = {
   /**

package/front_end/panels/issues/IssuesPane.ts

@@ -13,8 +13,12 @@ import {HiddenIssuesRow} from './HiddenIssuesRow.js';
 import issuesPaneStyles from './issuesPane.css.js';
 import issuesTreeStyles from './issuesTree.css.js';
 
-import type {AggregatedIssue, AggregationKey} from './IssueAggregator.js';
-import {Events as IssueAggregatorEvents, IssueAggregator} from './IssueAggregator.js';
+import {
+  Events as IssueAggregatorEvents,
+  IssueAggregator,
+  type AggregatedIssue,
+  type AggregationKey,
+} from './IssueAggregator.js';
 import {IssueView} from './IssueView.js';
 import {IssueKindView, getGroupIssuesByKindSetting, issueKindViewSortPriority} from './IssueKindView.js';
 

package/front_end/panels/layer_viewer/LayerDetailsView.ts

@@ -38,8 +38,14 @@ import layerDetailsViewStyles from './layerDetailsView.css.js';
 
 import type * as Protocol from '../../generated/protocol.js';
 
-import type {LayerView, LayerViewHost, Selection, SnapshotSelection} from './LayerViewHost.js';
-import {ScrollRectSelection, Type} from './LayerViewHost.js';
+import {
+  ScrollRectSelection,
+  Type,
+  type LayerView,
+  type LayerViewHost,
+  type Selection,
+  type SnapshotSelection,
+} from './LayerViewHost.js';
 
 const UIStrings = {
   /**

package/front_end/panels/layer_viewer/LayerTreeOutline.ts

@@ -33,8 +33,13 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {LayerView, LayerViewHost, Selection, SnapshotSelection} from './LayerViewHost.js';
-import {LayerSelection} from './LayerViewHost.js';
+import {
+  LayerSelection,
+  type LayerView,
+  type LayerViewHost,
+  type Selection,
+  type SnapshotSelection,
+} from './LayerViewHost.js';
 
 const UIStrings = {
   /**

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -39,8 +39,15 @@ import type * as Protocol from '../../generated/protocol.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {LayerView, LayerViewHost} from './LayerViewHost.js';
-import {LayerSelection, Selection, SnapshotSelection, Type, ScrollRectSelection} from './LayerViewHost.js';
+import {
+  LayerSelection,
+  Selection,
+  SnapshotSelection,
+  Type,
+  ScrollRectSelection,
+  type LayerView,
+  type LayerViewHost,
+} from './LayerViewHost.js';
 import {Events as TransformControllerEvents, TransformController} from './TransformController.js';
 
 const UIStrings = {

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -8,7 +8,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 
-import type {ProtocolService} from './LighthouseProtocolService.js';
+import {type ProtocolService} from './LighthouseProtocolService.js';
 
 const UIStrings = {
   /**

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -11,14 +11,18 @@ import * as EmulationModel from '../../models/emulation/emulation.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Emulation from '../emulation/emulation.js';
 
-import type {
-  AuditProgressChangedEvent, PageAuditabilityChangedEvent, PageWarningsChangedEvent} from './LighthouseController.js';
-import {Events, LighthouseController} from './LighthouseController.js';
+import {
+  Events,
+  LighthouseController,
+  type AuditProgressChangedEvent,
+  type PageAuditabilityChangedEvent,
+  type PageWarningsChangedEvent,
+} from './LighthouseController.js';
 import lighthousePanelStyles from './lighthousePanel.css.js';
-import type {LighthouseRun} from './LighthouseProtocolService.js';
-import {ProtocolService} from './LighthouseProtocolService.js';
 
-import type {ReportJSON, RunnerResultArtifacts} from './LighthouseReporterTypes.js';
+import {ProtocolService, type LighthouseRun} from './LighthouseProtocolService.js';
+
+import {type ReportJSON, type RunnerResultArtifacts} from './LighthouseReporterTypes.js';
 import * as LighthouseReport from '../../third_party/lighthouse/report/report.js';
 import {LighthouseReportRenderer, LighthouseReportUIFeatures} from './LighthouseReportRenderer.js';
 import {Item, ReportSelector} from './LighthouseReportSelector.js';

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -13,7 +13,11 @@ import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 import * as Timeline from '../timeline/timeline.js';
-import type {RunnerResultArtifacts, NodeDetailsJSON, SourceLocationDetailsJSON} from './LighthouseReporterTypes.js';
+import {
+  type RunnerResultArtifacts,
+  type NodeDetailsJSON,
+  type SourceLocationDetailsJSON,
+} from './LighthouseReporterTypes.js';
 
 const UIStrings = {
   /**

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -7,8 +7,7 @@ import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {LighthouseController, Preset} from './LighthouseController.js';
-import {Events, Presets, RuntimeSettings} from './LighthouseController.js';
+import {Events, Presets, RuntimeSettings, type LighthouseController, type Preset} from './LighthouseController.js';
 import {RadioSetting} from './RadioSetting.js';
 
 const UIStrings = {

package/front_end/panels/lighthouse/LighthouseStatusView.ts

@@ -8,8 +8,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 
 import lighthouseDialogStyles from './lighthouseDialog.css.js';
 
-import type {LighthouseController} from './LighthouseController.js';
-import {Events, RuntimeSettings} from './LighthouseController.js';
+import {Events, RuntimeSettings, type LighthouseController} from './LighthouseController.js';
 
 const UIStrings = {
   /**

package/front_end/panels/lighthouse/LighthouseTimespanView.ts

@@ -5,8 +5,7 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {LighthouseController} from './LighthouseController.js';
-import {Events} from './LighthouseController.js';
+import {Events, type LighthouseController} from './LighthouseController.js';
 import lighthouseDialogStyles from './lighthouseDialog.css.js';
 
 const UIStrings = {

package/front_end/panels/media/EventDisplayTable.ts

@@ -9,7 +9,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 
 import eventDisplayTableStyles from './eventDisplayTable.css.js';
 
-import type {PlayerEvent} from './MediaModel.js';
+import {type PlayerEvent} from './MediaModel.js';
 
 const UIStrings = {
   /**