chrome-devtools-frontend 1.0.1023108 → 1.0.1024644

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

package/front_end/panels/mobile_throttling/NetworkThrottlingSelector.ts

@@ -6,8 +6,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 
-import type {NetworkThrottlingConditionsGroup} from './ThrottlingPresets.js';
-import {ThrottlingPresets} from './ThrottlingPresets.js';
+import {ThrottlingPresets, type NetworkThrottlingConditionsGroup} from './ThrottlingPresets.js';
 
 const UIStrings = {
   /**

package/front_end/panels/mobile_throttling/ThrottlingManager.ts

@@ -11,10 +11,13 @@ import * as UI from '../../ui/legacy/legacy.js';
 import {MobileThrottlingSelector} from './MobileThrottlingSelector.js';
 import {NetworkThrottlingSelector} from './NetworkThrottlingSelector.js';
 
-import type {
-  Conditions, ConditionsList, MobileThrottlingConditionsGroup, NetworkThrottlingConditionsGroup} from
-  './ThrottlingPresets.js';
-import {ThrottlingPresets} from './ThrottlingPresets.js';
+import {
+  ThrottlingPresets,
+  type Conditions,
+  type ConditionsList,
+  type MobileThrottlingConditionsGroup,
+  type NetworkThrottlingConditionsGroup,
+} from './ThrottlingPresets.js';
 
 const UIStrings = {
   /**

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -51,7 +51,7 @@ import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {NetworkTimeCalculator} from './NetworkTimeCalculator.js';
+import {type NetworkTimeCalculator} from './NetworkTimeCalculator.js';
 
 import {imageNameForResourceType} from '../utils/utils.js';
 

package/front_end/panels/network/NetworkFrameGrouper.ts

@@ -8,7 +8,7 @@ import type * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.j
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {NetworkGroupNode} from './NetworkDataGridNode.js';
-import type {GroupLookupInterface, NetworkLogView} from './NetworkLogView.js';
+import {type GroupLookupInterface, type NetworkLogView} from './NetworkLogView.js';
 
 export class NetworkFrameGrouper implements GroupLookupInterface {
   private parentView: NetworkLogView;

package/front_end/panels/network/NetworkItemView.ts

@@ -38,7 +38,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as NetworkComponents from './components/components.js';
 import {EventSourceMessagesView} from './EventSourceMessagesView.js';
 
-import type {NetworkTimeCalculator} from './NetworkTimeCalculator.js';
+import {type NetworkTimeCalculator} from './NetworkTimeCalculator.js';
 import {RequestCookiesView} from './RequestCookiesView.js';
 import {RequestHeadersView} from './RequestHeadersView.js';
 import {RequestPayloadView} from './RequestPayloadView.js';

package/front_end/panels/network/NetworkLogView.ts

@@ -55,15 +55,22 @@ import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import networkLogViewStyles from './networkLogView.css.js';
 
-import type {NetworkLogViewInterface, NetworkNode, EventTypes} from './NetworkDataGridNode.js';
-import {Events, NetworkGroupNode, NetworkRequestNode} from './NetworkDataGridNode.js';
+import {
+  Events,
+  NetworkGroupNode,
+  NetworkRequestNode,
+  type NetworkLogViewInterface,
+  type NetworkNode,
+  type EventTypes,
+} from './NetworkDataGridNode.js';
 import {NetworkFrameGrouper} from './NetworkFrameGrouper.js';
 import {NetworkLogViewColumns} from './NetworkLogViewColumns.js';
-import type {NetworkTimeCalculator} from './NetworkTimeCalculator.js';
+
 import {
   NetworkTimeBoundary,
   NetworkTransferDurationCalculator,
   NetworkTransferTimeCalculator,
+  type NetworkTimeCalculator,
 } from './NetworkTimeCalculator.js';
 
 const UIStrings = {

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -10,13 +10,14 @@ 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 type {NetworkNode} from './NetworkDataGridNode.js';
-import {NetworkRequestNode} from './NetworkDataGridNode.js';
-import type {NetworkLogView} from './NetworkLogView.js';
+import {NetworkRequestNode, type NetworkNode} from './NetworkDataGridNode.js';
+import {type NetworkLogView} from './NetworkLogView.js';
 import {NetworkManageCustomHeadersView} from './NetworkManageCustomHeadersView.js';
-import type {
-  NetworkTimeCalculator, NetworkTransferDurationCalculator, NetworkTransferTimeCalculator} from
-  './NetworkTimeCalculator.js';
+import {
+  type NetworkTimeCalculator,
+  type NetworkTransferDurationCalculator,
+  type NetworkTransferTimeCalculator,
+} from './NetworkTimeCalculator.js';
 import {NetworkWaterfallColumn} from './NetworkWaterfallColumn.js';
 import {RequestInitiatorView} from './RequestInitiatorView.js';
 

package/front_end/panels/network/NetworkPanel.ts

@@ -48,16 +48,15 @@ import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
 import * as Search from '../search/search.js';
 
 import {BlockedURLsPane} from './BlockedURLsPane.js';
-import type {RequestActivatedEvent} from './NetworkDataGridNode.js';
-import {Events} from './NetworkDataGridNode.js';
+
+import {Events, type RequestActivatedEvent} from './NetworkDataGridNode.js';
 import {NetworkItemView} from './NetworkItemView.js';
 import {NetworkLogView} from './NetworkLogView.js';
 import {NetworkOverview} from './NetworkOverview.js';
 import networkPanelStyles from './networkPanel.css.js';
 import {NetworkSearchScope} from './NetworkSearchScope.js';
 
-import type {NetworkTimeCalculator} from './NetworkTimeCalculator.js';
-import {NetworkTransferTimeCalculator} from './NetworkTimeCalculator.js';
+import {NetworkTransferTimeCalculator, type NetworkTimeCalculator} from './NetworkTimeCalculator.js';
 
 const UIStrings = {
   /**

package/front_end/panels/network/NetworkWaterfallColumn.ts

@@ -11,11 +11,11 @@ import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
-import type {NetworkNode} from './NetworkDataGridNode.js';
+import {type NetworkNode} from './NetworkDataGridNode.js';
 import {RequestTimeRangeNameToColor} from './NetworkOverview.js';
-import type {Label, NetworkTimeCalculator} from './NetworkTimeCalculator.js';
-import type {RequestTimeRange} from './RequestTimingView.js';
-import {RequestTimeRangeNames, RequestTimingView} from './RequestTimingView.js';
+import {type Label, type NetworkTimeCalculator} from './NetworkTimeCalculator.js';
+
+import {RequestTimeRangeNames, RequestTimingView, type RequestTimeRange} from './RequestTimingView.js';
 import networkingTimingTableStyles from './networkTimingTable.css.js';
 
 const BAR_SPACING = 1;

package/front_end/panels/network/RequestTimingView.ts

@@ -37,8 +37,7 @@ import * as Logs from '../../models/logs/logs.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {NetworkTimeCalculator} from './NetworkTimeCalculator.js';
-import {Events} from './NetworkTimeCalculator.js';
+import {Events, type NetworkTimeCalculator} from './NetworkTimeCalculator.js';
 
 import networkingTimingTableStyles from './networkTimingTable.css.js';
 

package/front_end/panels/network/components/RequestHeadersView.css

@@ -161,6 +161,10 @@ div.raw-headers-row {
   padding: 2px 0; /* adjust focus ring size */
 }
 
+.explanation .link {
+  font-weight: normal;
+}
+
 .inline-icon {
   vertical-align: middle;
 }

package/front_end/panels/network/components/RequestHeadersView.ts

@@ -74,6 +74,19 @@ const UIStrings = {
   onlyChooseThisOptionIfAn:
       'Only choose this option if an arbitrary website including this resource does not impose a security risk.',
   /**
+  *@description Message to explain lack of raw headers for a particular network request
+  */
+  provisionalHeadersAreShownDisableCache: 'Provisional headers are shown. Disable cache to see full headers.',
+  /**
+  *@description Tooltip to explain lack of raw headers for a particular network request
+  */
+  onlyProvisionalHeadersAre:
+      'Only provisional headers are available because this request was not sent over the network and instead was served from a local cache, which doesn’t store the original request headers. Disable cache to see full request headers.',
+  /**
+  *@description Message to explain lack of raw headers for a particular network request
+  */
+  provisionalHeadersAreShown: 'Provisional headers are shown.',
+  /**
   *@description Text in Request Headers View of the Network panel
   */
   referrerPolicy: 'Referrer Policy',
@@ -289,12 +302,44 @@ export class RequestHeadersComponent extends HTMLElement {
       >
         ${(this.#showRequestHeadersText && requestHeadersText) ?
             this.#renderRawHeaders(requestHeadersText, false) : html`
+          ${this.#maybeRenderProvisionalHeadersWarning()}
           ${headers.map(header => this.#renderHeader({...header, headerNotSet: false}))}
         `}
       </${Category.litTagName}>
     `;
   }
 
+  #maybeRenderProvisionalHeadersWarning(): LitHtml.LitTemplate {
+    assertNotNullOrUndefined(this.#request);
+    if (this.#request.requestHeadersText() !== undefined) {
+      return LitHtml.nothing;
+    }
+
+    let cautionText;
+    let cautionTitle = '';
+    if (this.#request.cachedInMemory() || this.#request.cached()) {
+      cautionText = i18nString(UIStrings.provisionalHeadersAreShownDisableCache);
+      cautionTitle = i18nString(UIStrings.onlyProvisionalHeadersAre);
+    } else {
+      cautionText = i18nString(UIStrings.provisionalHeadersAreShown);
+    }
+    return html`
+      <div class="call-to-action">
+        <div class="call-to-action-body">
+          <div class="explanation" title=${cautionTitle}>
+            <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+              iconName: 'warning_icon',
+              width: '12px',
+              height: '12px',
+              } as IconButton.Icon.IconData}>
+            </${IconButton.Icon.Icon.litTagName}>
+            ${cautionText} <x-link href="https://developer.chrome.com/docs/devtools/network/reference/#provisional-headers" class="link">${i18nString(UIStrings.learnMore)}</x-link>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
   #renderHeader(header: HeaderDescriptor): LitHtml.TemplateResult {
     return html`
       <div class="row">
@@ -310,20 +355,18 @@ export class RequestHeadersComponent extends HTMLElement {
       return LitHtml.nothing;
     }
     return html`
-      <div class="header-details">
-        <div class="call-to-action">
-          <div class="call-to-action-body">
-            <div class="explanation">${headerDetails.explanation()}</div>
-            ${headerDetails.examples.map(example => html`
-              <div class="example">
-                <code>${example.codeSnippet}</code>
-                ${example.comment ? html`
-                  <span class="comment">${example.comment()}</span>
-                ` : ''}
-              </div>
-            `)}
-            ${this.#maybeRenderHeaderDetailsLink(headerDetails)}
-          </div>
+      <div class="call-to-action">
+        <div class="call-to-action-body">
+          <div class="explanation">${headerDetails.explanation()}</div>
+          ${headerDetails.examples.map(example => html`
+            <div class="example">
+              <code>${example.codeSnippet}</code>
+              ${example.comment ? html`
+                <span class="comment">${example.comment()}</span>
+              ` : ''}
+            </div>
+          `)}
+          ${this.#maybeRenderHeaderDetailsLink(headerDetails)}
         </div>
       </div>
     `;

package/front_end/panels/profiler/BottomUpProfileDataGrid.ts

@@ -36,9 +36,8 @@ import * as Platform from '../../core/platform/platform.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import type * as UI from '../../ui/legacy/legacy.js';
 
-import type {Formatter} from './ProfileDataGrid.js';
-import {ProfileDataGridNode, ProfileDataGridTree} from './ProfileDataGrid.js';
-import type {TopDownProfileDataGridTree} from './TopDownProfileDataGrid.js';
+import {ProfileDataGridNode, ProfileDataGridTree, type Formatter} from './ProfileDataGrid.js';
+import {type TopDownProfileDataGridTree} from './TopDownProfileDataGrid.js';
 
 export interface NodeInfo {
   ancestor: SDK.ProfileTreeModel.ProfileNode;

package/front_end/panels/profiler/CPUProfileView.ts

@@ -38,9 +38,9 @@ import type * as Protocol from '../../generated/protocol.js';
 
 import {ProfileFlameChartDataProvider} from './CPUProfileFlameChart.js';
 
-import type {Formatter, ProfileDataGridNode} from './ProfileDataGrid.js';
-import type {ProfileHeader} from './ProfileHeader.js';
-import {ProfileEvents, ProfileType} from './ProfileHeader.js';
+import {type Formatter, type ProfileDataGridNode} from './ProfileDataGrid.js';
+
+import {ProfileEvents, ProfileType, type ProfileHeader} from './ProfileHeader.js';
 import {ProfileView, WritableProfileHeader} from './ProfileView.js';
 
 const UIStrings = {

package/front_end/panels/profiler/HeapProfileView.ts

@@ -14,11 +14,10 @@ import type * as Protocol from '../../generated/protocol.js';
 
 import {ProfileFlameChartDataProvider} from './CPUProfileFlameChart.js';
 
-import type {Samples, IdsRangeChangedEvent} from './HeapTimelineOverview.js';
-import {Events, HeapTimelineOverview} from './HeapTimelineOverview.js';
-import type {Formatter, ProfileDataGridNode} from './ProfileDataGrid.js';
-import type {ProfileHeader} from './ProfileHeader.js';
-import {ProfileType, ProfileEvents} from './ProfileHeader.js';
+import {Events, HeapTimelineOverview, type Samples, type IdsRangeChangedEvent} from './HeapTimelineOverview.js';
+import {type Formatter, type ProfileDataGridNode} from './ProfileDataGrid.js';
+
+import {ProfileType, ProfileEvents, type ProfileHeader} from './ProfileHeader.js';
 import {ProfileView, WritableProfileHeader} from './ProfileView.js';
 
 const UIStrings = {

package/front_end/panels/profiler/HeapProfilerPanel.ts

@@ -7,8 +7,8 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {HeapSnapshotView} from './HeapSnapshotView.js';
-import type {ProfileType} from './ProfileHeader.js';
+import {type HeapSnapshotView} from './HeapSnapshotView.js';
+import {type ProfileType} from './ProfileHeader.js';
 import {ProfilesPanel} from './ProfilesPanel.js';
 import {instance} from './ProfileTypeRegistry.js';
 

package/front_end/panels/profiler/HeapSnapshotDataGrids.ts

@@ -37,7 +37,6 @@ import * as Components from '../../ui/legacy/components/utils/utils.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {HeapSnapshotGridNode} from './HeapSnapshotGridNodes.js';
 import {
   AllocationGridNode,
   HeapSnapshotConstructorNode,
@@ -45,10 +44,11 @@ import {
   HeapSnapshotRetainingObjectNode,
   HeapSnapshotObjectNode,
   HeapSnapshotDiffNode,
+  type HeapSnapshotGridNode,
 } from './HeapSnapshotGridNodes.js';
-import type {HeapSnapshotProxy} from './HeapSnapshotProxy.js';
-import type {HeapProfileHeader} from './HeapSnapshotView.js';
-import type {DataDisplayDelegate} from './ProfileHeader.js';
+import {type HeapSnapshotProxy} from './HeapSnapshotProxy.js';
+import {type HeapProfileHeader} from './HeapSnapshotView.js';
+import {type DataDisplayDelegate} from './ProfileHeader.js';
 
 const UIStrings = {
   /**

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -37,13 +37,17 @@ import * as HeapSnapshotModel from '../../models/heap_snapshot_model/heap_snapsh
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {ChildrenProvider} from './ChildrenProvider.js';
-import type {
-  AllocationDataGrid, HeapSnapshotConstructorsDataGrid, HeapSnapshotDiffDataGrid, HeapSnapshotSortableDataGrid} from
-  './HeapSnapshotDataGrids.js';
-import {HeapSnapshotSortableDataGridEvents} from './HeapSnapshotDataGrids.js';
-import type {HeapSnapshotProviderProxy, HeapSnapshotProxy} from './HeapSnapshotProxy.js';
-import type {DataDisplayDelegate} from './ProfileHeader.js';
+import {type ChildrenProvider} from './ChildrenProvider.js';
+
+import {
+  HeapSnapshotSortableDataGridEvents,
+  type AllocationDataGrid,
+  type HeapSnapshotConstructorsDataGrid,
+  type HeapSnapshotDiffDataGrid,
+  type HeapSnapshotSortableDataGrid,
+} from './HeapSnapshotDataGrids.js';
+import {type HeapSnapshotProviderProxy, type HeapSnapshotProxy} from './HeapSnapshotProxy.js';
+import {type DataDisplayDelegate} from './ProfileHeader.js';
 
 const UIStrings = {
   /**

package/front_end/panels/profiler/HeapSnapshotProxy.ts

@@ -31,7 +31,7 @@
 import * as Common from '../../core/common/common.js';
 import type * as HeapSnapshotModel from '../../models/heap_snapshot_model/heap_snapshot_model.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import type {ChildrenProvider} from './ChildrenProvider.js';
+import {type ChildrenProvider} from './ChildrenProvider.js';
 
 const UIStrings = {
   /**

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -43,7 +43,6 @@ import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {HeapSnapshotSortableDataGrid} from './HeapSnapshotDataGrids.js';
 import {
   AllocationDataGrid,
   HeapSnapshotSortableDataGridEvents,
@@ -51,20 +50,26 @@ import {
   HeapSnapshotDiffDataGrid,
   HeapSnapshotRetainmentDataGrid,
   HeapSnapshotContainmentDataGrid,
+  type HeapSnapshotSortableDataGrid,
 } from './HeapSnapshotDataGrids.js';
-import type {AllocationGridNode, HeapSnapshotGridNode} from './HeapSnapshotGridNodes.js';
-import {HeapSnapshotGenericObjectNode} from './HeapSnapshotGridNodes.js';
-import type {HeapSnapshotProxy} from './HeapSnapshotProxy.js';
-import {HeapSnapshotWorkerProxy} from './HeapSnapshotProxy.js';
-import type {IdsRangeChangedEvent} from './HeapTimelineOverview.js';
-import {HeapTimelineOverview, Events, Samples} from './HeapTimelineOverview.js';
+
+import {
+  HeapSnapshotGenericObjectNode,
+  type AllocationGridNode,
+  type HeapSnapshotGridNode,
+} from './HeapSnapshotGridNodes.js';
+
+import {HeapSnapshotWorkerProxy, type HeapSnapshotProxy} from './HeapSnapshotProxy.js';
+
+import {HeapTimelineOverview, Events, Samples, type IdsRangeChangedEvent} from './HeapTimelineOverview.js';
 import * as ModuleUIStrings from './ModuleUIStrings.js';
-import type {DataDisplayDelegate} from './ProfileHeader.js';
+
 import {
   Events as ProfileHeaderEvents,
   ProfileEvents as ProfileTypeEvents,
   ProfileHeader,
   ProfileType,
+  type DataDisplayDelegate,
 } from './ProfileHeader.js';
 import {ProfileSidebarTreeElement} from './ProfileSidebarTreeElement.js';
 import {instance} from './ProfileTypeRegistry.js';

package/front_end/panels/profiler/ProfileLauncherView.ts

@@ -35,8 +35,8 @@ import * as UI from '../../ui/legacy/legacy.js';
 import {IsolateSelector} from './IsolateSelector.js';
 import profileLauncherViewStyles from './profileLauncherView.css.js';
 
-import type {ProfileType} from './ProfileHeader.js';
-import type {ProfilesPanel} from './ProfilesPanel.js';
+import {type ProfileType} from './ProfileHeader.js';
+import {type ProfilesPanel} from './ProfilesPanel.js';
 
 const UIStrings = {
   /**

package/front_end/panels/profiler/ProfileSidebarTreeElement.ts

@@ -6,8 +6,12 @@ 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 {DataDisplayDelegate, ProfileHeader, StatusUpdate} from './ProfileHeader.js';
-import {Events as ProfileHeaderEvents} from './ProfileHeader.js';
+import {
+  Events as ProfileHeaderEvents,
+  type DataDisplayDelegate,
+  type ProfileHeader,
+  type StatusUpdate,
+} from './ProfileHeader.js';
 
 const UIStrings = {
   /**

package/front_end/panels/profiler/ProfileView.ts

@@ -16,12 +16,12 @@ import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {BottomUpProfileDataGridTree} from './BottomUpProfileDataGrid.js';
-import type {ProfileFlameChartDataProvider} from './CPUProfileFlameChart.js';
-import {CPUProfileFlameChart} from './CPUProfileFlameChart.js';
-import type {Formatter, ProfileDataGridNode} from './ProfileDataGrid.js';
-import {ProfileDataGridTree} from './ProfileDataGrid.js';
-import type {DataDisplayDelegate, ProfileType} from './ProfileHeader.js';
-import {Events, ProfileHeader} from './ProfileHeader.js';
+
+import {CPUProfileFlameChart, type ProfileFlameChartDataProvider} from './CPUProfileFlameChart.js';
+
+import {ProfileDataGridTree, type Formatter, type ProfileDataGridNode} from './ProfileDataGrid.js';
+
+import {Events, ProfileHeader, type DataDisplayDelegate, type ProfileType} from './ProfileHeader.js';
 import {ProfileSidebarTreeElement} from './ProfileSidebarTreeElement.js';
 import {TopDownProfileDataGridTree} from './TopDownProfileDataGrid.js';