chrome-devtools-frontend 1.0.1022611 → 1.0.1024166

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -14,12 +14,16 @@ import * as UI from '../../ui/legacy/legacy.js';
 import type * as Protocol from '../../generated/protocol.js';
 
 import cssOverviewCompletedViewStyles from './cssOverviewCompletedView.css.js';
-import type {
-  OverviewController, PopulateNodesEvent, PopulateNodesEventNodes, PopulateNodesEventNodeTypes} from
-  './CSSOverviewController.js';
-import {Events as CSSOverViewControllerEvents} from './CSSOverviewController.js';
+
+import {
+  Events as CSSOverViewControllerEvents,
+  type OverviewController,
+  type PopulateNodesEvent,
+  type PopulateNodesEventNodes,
+  type PopulateNodesEventNodeTypes,
+} from './CSSOverviewController.js';
 import {CSSOverviewSidebarPanel, SidebarEvents} from './CSSOverviewSidebarPanel.js';
-import type {UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
+import {type UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
 
 const UIStrings = {
   /**

package/front_end/panels/css_overview/CSSOverviewController.ts

@@ -6,8 +6,8 @@ import * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 
-import type {ContrastIssue} from './CSSOverviewCompletedView.js';
-import type {UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
+import {type ContrastIssue} from './CSSOverviewCompletedView.js';
+import {type UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
 
 export class OverviewController extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   currentUrl: string;

package/front_end/panels/css_overview/CSSOverviewModel.ts

@@ -9,9 +9,9 @@ import * as ColorPicker from '../../ui/legacy/components/color_picker/color_pick
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import * as Protocol from '../../generated/protocol.js';
 
-import type {ContrastIssue} from './CSSOverviewCompletedView.js';
-import type {UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
-import {CSSOverviewUnusedDeclarations} from './CSSOverviewUnusedDeclarations.js';
+import {type ContrastIssue} from './CSSOverviewCompletedView.js';
+
+import {CSSOverviewUnusedDeclarations, type UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
 
 interface NodeStyleStats {
   elementCount: number;

package/front_end/panels/css_overview/CSSOverviewPanel.ts

@@ -10,13 +10,12 @@ import * 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 {ContrastIssue} from './CSSOverviewCompletedView.js';
-import {CSSOverviewCompletedView} from './CSSOverviewCompletedView.js';
+import {CSSOverviewCompletedView, type ContrastIssue} from './CSSOverviewCompletedView.js';
 import {Events, OverviewController} from './CSSOverviewController.js';
-import type {GlobalStyleStats} from './CSSOverviewModel.js';
-import {CSSOverviewModel} from './CSSOverviewModel.js';
+
+import {CSSOverviewModel, type GlobalStyleStats} from './CSSOverviewModel.js';
 import {CSSOverviewProcessingView} from './CSSOverviewProcessingView.js';
-import type {UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
+import {type UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 let CSSOverviewPanelInstance: CSSOverviewPanel;

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/DOMLinkifier.ts

@@ -95,7 +95,11 @@ export const linkifyNodeReference = function(
   link.addEventListener('mouseleave', () => SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(), false);
 
   if (!options.preventKeyboardFocus) {
-    link.addEventListener('keydown', event => event.key === 'Enter' && Common.Revealer.reveal(node, false) && false);
+    link.addEventListener('keydown', event => {
+      if (event.key === 'Enter') {
+        void Common.Revealer.reveal(node, false);
+      }
+    });
     link.tabIndex = 0;
     UI.ARIAUtils.markAsLink(link);
   }

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');
@@ -590,9 +601,22 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     const [computedStyles, parentsComputedStyles] =
         await Promise.all([this.fetchComputedStylesFor(node), this.fetchComputedStylesFor(parentNode)]);
 
+    if (signal.aborted) {
+      return;
+    }
+
     const matchedStyles = await this.fetchMatchedCascade();
 
-    await this.innerRebuildUpdate(matchedStyles, computedStyles, parentsComputedStyles);
+    if (signal.aborted) {
+      return;
+    }
+
+    await this.innerRebuildUpdate(signal, matchedStyles, computedStyles, parentsComputedStyles);
+
+    if (signal.aborted) {
+      return;
+    }
+
     if (!this.initialUpdateCompleted) {
       this.initialUpdateCompleted = true;
       this.appendToolbarItem(this.createRenderingShortcuts());
@@ -604,6 +628,8 @@ 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});
   }
 
@@ -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';