chrome-devtools-frontend 1.0.1023618 → 1.0.1024166

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';

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 = {
   /**

package/front_end/panels/media/EventTimelineView.ts

@@ -4,9 +4,15 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 
-import type {PlayerEvent} from './MediaModel.js';
-import type {Event, EventProperties} from './TickingFlameChart.js';
-import {ColdColorScheme, HotColorScheme, TickingFlameChart} from './TickingFlameChart.js';
+import {type PlayerEvent} from './MediaModel.js';
+
+import {
+  ColdColorScheme,
+  HotColorScheme,
+  TickingFlameChart,
+  type Event,
+  type EventProperties,
+} from './TickingFlameChart.js';
 
 // Has to be a double, see https://v8.dev/blog/react-cliff
 const NO_NORMALIZED_TIMESTAMP = -1.5;

package/front_end/panels/media/MainView.ts

@@ -7,8 +7,7 @@ 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 {PlayerEvent} from './MediaModel.js';
-import {MediaModel, Events} from './MediaModel.js';
+import {MediaModel, Events, type PlayerEvent} from './MediaModel.js';
 import {PlayerDetailView} from './PlayerDetailView.js';
 import {PlayerListView} from './PlayerListView.js';
 

package/front_end/panels/media/PlayerDetailView.ts

@@ -8,8 +8,8 @@ import type * as Protocol from '../../generated/protocol.js';
 
 import {PlayerEventsView} from './EventDisplayTable.js';
 import {PlayerEventsTimeline} from './EventTimelineView.js';
-import type {TriggerHandler} from './MainView.js';
-import type {PlayerEvent} from './MediaModel.js';
+import {type TriggerHandler} from './MainView.js';
+import {type PlayerEvent} from './MediaModel.js';
 import {PlayerMessagesView} from './PlayerMessagesView.js';
 import {PlayerPropertiesView} from './PlayerPropertiesView.js';
 
@@ -88,7 +88,8 @@ export class PlayerDetailView extends UI.TabbedPane.TabbedPane implements Trigge
     this.propertyView.onProperty(property);
   }
 
-  onError(_error: Protocol.Media.PlayerError): void {
+  onError(error: Protocol.Media.PlayerError): void {
+    this.messageView.addError(error);
   }
 
   onMessage(message: Protocol.Media.PlayerMessage): void {

package/front_end/panels/media/PlayerListView.ts

@@ -9,8 +9,8 @@ import playerListViewStyles from './playerListView.css.js';
 
 import type * as Protocol from '../../generated/protocol.js';
 
-import type {MainView, TriggerDispatcher} from './MainView.js';
-import type {PlayerEvent} from './MediaModel.js';
+import {type MainView, type TriggerDispatcher} from './MainView.js';
+import {type PlayerEvent} from './MediaModel.js';
 import {PlayerPropertyKeys} from './PlayerPropertiesView.js';
 
 const UIStrings = {

package/front_end/panels/media/PlayerMessagesView.ts

@@ -47,6 +47,26 @@ const UIStrings = {
   *@description Default text for user-text-entry for searching log messages.
   */
   filterLogMessages: 'Filter log messages',
+  /**
+  *@description The label for the group name that this error belongs to.
+  */
+  errorGroupLabel: 'Error Group:',
+  /**
+  *@description The label for the numeric code associated with this error.
+  */
+  errorCodeLabel: 'Error Code:',
+  /**
+  *@description The label for extra data associated with an error.
+  */
+  errorDataLabel: 'Data:',
+  /**
+  *@description The label for the stacktrace associated with the error.
+  */
+  errorStackLabel: 'Stacktrace:',
+  /**
+  *@description The label for a root cause error associated with this error.
+  */
+  errorCauseLabel: 'Caused by:',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/media/PlayerMessagesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -318,6 +338,62 @@ export class PlayerMessagesView extends UI.Widget.VBox {
     UI.UIUtils.createTextChild(container, message.message);
   }
 
+  private errorToDiv(error: Protocol.Media.PlayerError): Element {
+    const entry = UI.Fragment.Fragment.build`
+    <div class="status-error-box">
+    <div class="status-error-field-labeled">
+      <span class="status-error-field-label" $="status-error-group"></span>
+      <span>${error.errorType}</span>
+    </div>
+    <div class="status-error-field-labeled">
+      <span class="status-error-field-label" $="status-error-code"></span>
+      <span>${error.code}</span>
+    </div>
+    <div class="status-error-field-labeled" $="status-error-data">
+    </div>
+    <div class="status-error-field-labeled" $="status-error-stack">
+    </div>
+    <div class="status-error-field-labeled" $="status-error-cause">
+    </div>
+    `;
+
+    entry.$('status-error-group').textContent = i18nString(UIStrings.errorGroupLabel);
+    entry.$('status-error-code').textContent = i18nString(UIStrings.errorCodeLabel);
+
+    if (Object.keys(error.data).length !== 0) {
+      const label = entry.$('status-error-data').createChild('span', 'status-error-field-label');
+      UI.UIUtils.createTextChild(label, i18nString(UIStrings.errorDataLabel));
+      const dataContent = entry.$('status-error-data').createChild('div');
+      for (const [key, value] of Object.entries(error.data)) {
+        const datumContent = dataContent.createChild('div');
+        UI.UIUtils.createTextChild(datumContent, `${key}: ${value}`);
+      }
+    }
+
+    if (error.stack.length !== 0) {
+      const label = entry.$('status-error-stack').createChild('span', 'status-error-field-label');
+      UI.UIUtils.createTextChild(label, i18nString(UIStrings.errorStackLabel));
+      const stackContent = entry.$('status-error-stack').createChild('div');
+      for (const stackEntry of error.stack) {
+        const frameBox = stackContent.createChild('div');
+        UI.UIUtils.createTextChild(frameBox, `${stackEntry.file}:${stackEntry.line}`);
+      }
+    }
+
+    if (error.cause.length !== 0) {
+      const label = entry.$('status-error-cause').createChild('span', 'status-error-field-label');
+      UI.UIUtils.createTextChild(label, i18nString(UIStrings.errorCauseLabel));
+      entry.$('status-error-cause').appendChild(this.errorToDiv(error.cause[0]));
+    }
+
+    return entry.element();
+  }
+
+  addError(error: Protocol.Media.PlayerError): void {
+    const container = this.bodyPanel.createChild('div', 'media-messages-message-container media-message-error');
+    container.appendChild(this.errorToDiv(error));
+  }
+
   wasShown(): void {
     super.wasShown();
     this.registerCSSFiles([playerMessagesViewStyles]);

package/front_end/panels/media/playerMessagesView.css

@@ -66,3 +66,18 @@
 .media-messages-message-unselected {
   display: none;
 }
+
+.status-error-box {
+  font-family: monospace;
+  border: 1px solid var(--color-details-hairline);
+  padding: 4px;
+}
+
+.status-error-field-label {
+  padding-right: 10px;
+  color: var(--color-text-secondary);
+}
+
+.status-error-field-labeled {
+  display: flex;
+}

package/front_end/panels/mobile_throttling/MobileThrottlingSelector.ts

@@ -7,8 +7,12 @@ import * as SDK from '../../core/sdk/sdk.js';
 
 import {throttlingManager} from './ThrottlingManager.js';
 
-import type {Conditions, ConditionsList, MobileThrottlingConditionsGroup} from './ThrottlingPresets.js';
-import {ThrottlingPresets} from './ThrottlingPresets.js';
+import {
+  ThrottlingPresets,
+  type Conditions,
+  type ConditionsList,
+  type MobileThrottlingConditionsGroup,
+} from './ThrottlingPresets.js';
 
 const UIStrings = {
   /**