chrome-devtools-frontend 1.0.1602348 → 1.0.1603822

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -964,8 +964,6 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
     }
     let objectPopoverHelper: ObjectUI.ObjectPopoverHelper.ObjectPopoverHelper|null;
     return {
-      // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-      // @ts-expect-error
       box: span.boxInWindow(),
       show: async (popover: UI.GlassPane.GlassPane) => {
         if (!heapProfilerModel) {
@@ -1364,7 +1362,7 @@ export class HeapSnapshotProfileType extends
       return;
     }
 
-    let profile: HeapProfileHeader = new HeapProfileHeader(heapProfilerModel, this);
+    let profile = new HeapProfileHeader(heapProfilerModel, this);
     this.setProfileBeingRecorded(profile);
     this.addProfile(profile);
     profile.updateStatus(i18nString(UIStrings.snapshotting));
@@ -1649,33 +1647,29 @@ export interface TrackingHeapSnapshotProfileTypeEventTypes {
 
 export class HeapProfileHeader extends ProfileHeader {
   readonly heapProfilerModelInternal: SDK.HeapProfilerModel.HeapProfilerModel|null;
-  maxJSObjectId: number;
-  workerProxy: HeapSnapshotWorkerProxy|null;
-  receiver: Common.StringOutputStream.OutputStream|null;
-  snapshotProxy: HeapSnapshotProxy|null;
+  maxJSObjectId = -1;
+  workerProxy: HeapSnapshotWorkerProxy|null = null;
+  receiver: Common.StringOutputStream.OutputStream|null = null;
+  snapshotProxy: HeapSnapshotProxy|null = null;
   readonly loadPromise: Promise<HeapSnapshotProxy>;
   fulfillLoad: (value: HeapSnapshotProxy|PromiseLike<HeapSnapshotProxy>) => void;
-  totalNumberOfChunks: number;
-  bufferedWriter: Bindings.TempFile.TempFile|null;
-  onTempFileReady: (() => void)|null;
+  totalNumberOfChunks = 0;
+  bufferedWriter: Bindings.TempFile.TempFile|null = null;
+  onTempFileReady: (() => void)|null = null;
   failedToCreateTempFile?: boolean;
   wasDisposed?: boolean;
   fileName?: Platform.DevToolsPath.RawPathString;
 
   constructor(
-      heapProfilerModel: SDK.HeapProfilerModel.HeapProfilerModel|null, type: HeapSnapshotProfileType, title?: string) {
+      heapProfilerModel: SDK.HeapProfilerModel.HeapProfilerModel|null,
+      type: HeapSnapshotProfileType,
+      title?: string,
+  ) {
     super(type, title || i18nString(UIStrings.snapshotD, {PH1: type.nextProfileUid()}));
     this.heapProfilerModelInternal = heapProfilerModel;
-    this.maxJSObjectId = -1;
-    this.workerProxy = null;
-    this.receiver = null;
-    this.snapshotProxy = null;
     const {promise, resolve} = Promise.withResolvers<HeapSnapshotProxy>();
     this.loadPromise = promise;
     this.fulfillLoad = resolve;
-    this.totalNumberOfChunks = 0;
-    this.bufferedWriter = null;
-    this.onTempFileReady = null;
   }
 
   heapProfilerModel(): SDK.HeapProfilerModel.HeapProfilerModel|null {

package/front_end/panels/profiler/LiveHeapProfileView.ts

@@ -103,15 +103,14 @@ export class LiveHeapProfileView extends UI.Widget.VBox {
   }
 
   createDataGrid(): DataGrid.SortableDataGrid.SortableDataGrid<GridNode> {
-    const defaultColumnConfig: DataGrid.DataGrid.ColumnDescriptor = {
-      id: '',
+    const defaultColumnConfig = {
       title: Common.UIString.LocalizedEmptyString,
       fixedWidth: true,
       sortable: true,
       align: DataGrid.DataGrid.Align.RIGHT,
       sort: DataGrid.DataGrid.Order.Descending,
     };
-    const columns = [
+    const columns: Array<{tooltip: Common.UIString.LocalizedString}&DataGrid.DataGrid.ColumnDescriptor> = [
       {
         ...defaultColumnConfig,
         id: 'size',
@@ -140,7 +139,7 @@ export class LiveHeapProfileView extends UI.Widget.VBox {
         sortable: true,
         tooltip: i18nString(UIStrings.urlOfTheScriptSource),
       },
-    ] as Array<{tooltip: Common.UIString.LocalizedString}&DataGrid.DataGrid.ColumnDescriptor>;
+    ];
     const dataGrid = new DataGrid.SortableDataGrid.SortableDataGrid({
       displayName: i18nString(UIStrings.heapProfile),
       columns,

package/front_end/panels/profiler/ProfileHeader.ts

@@ -11,17 +11,14 @@ export class ProfileHeader extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   readonly #profileType: ProfileType;
   title: string;
   uid: number;
-  #fromFile: boolean;
-  tempFile: Bindings.TempFile.TempFile|null;
+  #fromFile = false;
+  tempFile: Bindings.TempFile.TempFile|null = null;
 
   constructor(profileType: ProfileType, title: string) {
     super();
     this.#profileType = profileType;
     this.title = title;
     this.uid = profileType.incrementProfileUid();
-    this.#fromFile = false;
-
-    this.tempFile = null;
   }
 
   setTitle(title: string): void {
@@ -103,17 +100,14 @@ export interface EventTypes {
 export class ProfileType extends Common.ObjectWrapper.ObjectWrapper<ProfileEventTypes> {
   readonly #id: string;
   readonly #name: string;
-  profiles: ProfileHeader[];
-  #profileBeingRecorded: ProfileHeader|null;
-  #nextProfileUid: number;
+  profiles: ProfileHeader[] = [];
+  #profileBeingRecorded: ProfileHeader|null = null;
+  #nextProfileUid = 1;
 
   constructor(id: string, name: string) {
     super();
     this.#id = id;
     this.#name = name;
-    this.profiles = [];
-    this.#profileBeingRecorded = null;
-    this.#nextProfileUid = 1;
 
     if (!window.opener) {
       window.addEventListener('pagehide', this.clearTempStorage.bind(this), false);

package/front_end/panels/profiler/ProfileView.ts

@@ -138,7 +138,7 @@ export class ProfileView extends UI.View.SimpleView implements UI.SearchableView
     this.searchableViewInternal.setPlaceholder(i18nString(UIStrings.findByCostMsNameOrFile));
     this.searchableViewInternal.show(this.element);
 
-    const columns = ([] as DataGrid.DataGrid.ColumnDescriptor[]);
+    const columns: DataGrid.DataGrid.ColumnDescriptor[] = [];
     columns.push({
       id: 'self',
       title: this.columnHeader('self'),
@@ -298,9 +298,6 @@ export class ProfileView extends UI.View.SimpleView implements UI.SearchableView
     if (!this.profileDataGridTree) {
       return;
     }
-    const selectedProfileNode =
-        this.dataGrid.selectedNode ? (this.dataGrid.selectedNode as ProfileDataGridNode).profileNode : null;
-
     this.dataGrid.rootNode().removeChildren();
 
     const children = this.profileDataGridTree.children;
@@ -309,12 +306,6 @@ export class ProfileView extends UI.View.SimpleView implements UI.SearchableView
     for (let index = 0; index < count; ++index) {
       this.dataGrid.rootNode().appendChild(children[index]);
     }
-
-    if (selectedProfileNode) {
-      // TODO(crbug.com/1011811): Cleanup the added `selected` property to this SDK class.
-      // @ts-expect-error
-      selectedProfileNode.selected = true;
-    }
   }
 
   refreshVisibleData(): void {

package/front_end/panels/sensors/SensorsView.ts

@@ -660,10 +660,12 @@ export class SensorsView extends UI.Widget.VBox {
                   <input
                     id="alpha-input"
                     type="number"
+                    min="0"
+                    max="359.9999"
                     step="any"
+                    required
                     ${Directives.ref((el: Element | undefined) => { if (el) { this.alphaElement = el as HTMLInputElement; } })}
                     @change=${this.#onOrientationChange.bind(this)}
-                    @input=${this.#onOrientationInput.bind(this)}
                     @keydown=${this.#onOrientationKeyDown.bind(this)}
                     @focus=${this.#onOrientationFocus.bind(this)}
                   >
@@ -674,10 +676,12 @@ export class SensorsView extends UI.Widget.VBox {
                   <input
                     id="beta-input"
                     type="number"
+                    min="-180"
+                    max="179.9999"
                     step="any"
+                    required
                     ${Directives.ref((el: Element | undefined) => { if (el) { this.betaElement = el as HTMLInputElement; } })}
                     @change=${this.#onOrientationChange.bind(this)}
-                    @input=${this.#onOrientationInput.bind(this)}
                     @keydown=${this.#onOrientationKeyDown.bind(this)}
                     @focus=${this.#onOrientationFocus.bind(this)}
                   >
@@ -688,10 +692,12 @@ export class SensorsView extends UI.Widget.VBox {
                   <input
                     id="gamma-input"
                     type="number"
+                    min="-90"
+                    max="89.9999"
                     step="any"
+                    required
                     ${Directives.ref((el: Element | undefined) => { if (el) { this.gammaElement = el as HTMLInputElement; } })}
                     @change=${this.#onOrientationChange.bind(this)}
-                    @input=${this.#onOrientationInput.bind(this)}
                     @keydown=${this.#onOrientationKeyDown.bind(this)}
                     @focus=${this.#onOrientationFocus.bind(this)}
                   >
@@ -745,9 +751,9 @@ export class SensorsView extends UI.Widget.VBox {
     this.enableOrientationFields(true);
     this.setBoxOrientation(this.deviceOrientation, false);
 
-    this.#setOrientationInputValue(this.alphaElement, String(this.deviceOrientation.alpha));
-    this.#setOrientationInputValue(this.betaElement, String(this.deviceOrientation.beta));
-    this.#setOrientationInputValue(this.gammaElement, String(this.deviceOrientation.gamma));
+    this.alphaElement.value = String(this.deviceOrientation.alpha);
+    this.betaElement.value = String(this.deviceOrientation.beta);
+    this.gammaElement.value = String(this.deviceOrientation.gamma);
   }
 
   private createPressureSection(): void {
@@ -837,9 +843,9 @@ export class SensorsView extends UI.Widget.VBox {
       // Even though the angles in |deviceOrientation| will not be rounded
       // here, their precision will be rounded by CSS when we change
       // |this.orientationLayer.style| in setBoxOrientation().
-      this.#setOrientationInputValue(this.alphaElement, String(roundAngle(deviceOrientation.alpha)));
-      this.#setOrientationInputValue(this.betaElement, String(roundAngle(deviceOrientation.beta)));
-      this.#setOrientationInputValue(this.gammaElement, String(roundAngle(deviceOrientation.gamma)));
+      this.alphaElement.value = String(roundAngle(deviceOrientation.alpha));
+      this.betaElement.value = String(roundAngle(deviceOrientation.beta));
+      this.gammaElement.value = String(roundAngle(deviceOrientation.gamma));
     }
 
     const animate = modificationSource !== DeviceOrientationModificationSource.USER_DRAG;
@@ -853,17 +859,9 @@ export class SensorsView extends UI.Widget.VBox {
         {PH1: deviceOrientation.alpha, PH2: deviceOrientation.beta, PH3: deviceOrientation.gamma}));
   }
 
-  #onOrientationInput(event: Event): void {
-    const input = event.currentTarget as HTMLInputElement;
-    const valid = this.#validateOrientationInput(input, input.value);
-    input.classList.toggle('error-input', !valid);
-  }
-
   #onOrientationChange(event: Event): void {
     const input = event.currentTarget as HTMLInputElement;
-    const valid = this.#validateOrientationInput(input, input.value);
-    input.classList.toggle('error-input', !valid);
-    if (valid) {
+    if (input.checkValidity()) {
       this.applyDeviceOrientationUserInput();
     }
   }
@@ -871,8 +869,7 @@ export class SensorsView extends UI.Widget.VBox {
   #onOrientationKeyDown(event: KeyboardEvent): void {
     const input = event.currentTarget as HTMLInputElement;
     if (event.key === 'Enter') {
-      const valid = this.#validateOrientationInput(input, input.value);
-      if (valid) {
+      if (input.checkValidity()) {
         this.applyDeviceOrientationUserInput();
       }
       event.preventDefault();
@@ -883,10 +880,13 @@ export class SensorsView extends UI.Widget.VBox {
     if (value === null) {
       return;
     }
-    const stringValue = String(value);
-    const valid = this.#validateOrientationInput(input, stringValue);
-    if (valid) {
-      this.#setOrientationInputValue(input, stringValue);
+    const prevValue = input.value;
+    input.value = String(value);
+    if (input.checkValidity()) {
+      this.applyDeviceOrientationUserInput();
+    } else {
+      // If ArrowUp/ArrowDown adjusts the value out of bounds, we reset it.
+      input.value = prevValue;
     }
     event.preventDefault();
   }
@@ -896,25 +896,6 @@ export class SensorsView extends UI.Widget.VBox {
     input.select();
   }
 
-  #validateOrientationInput(input: HTMLInputElement, value: string): boolean {
-    if (input === this.alphaElement) {
-      return SDK.EmulationModel.DeviceOrientation.alphaAngleValidator(value);
-    }
-    if (input === this.betaElement) {
-      return SDK.EmulationModel.DeviceOrientation.betaAngleValidator(value);
-    }
-    if (input === this.gammaElement) {
-      return SDK.EmulationModel.DeviceOrientation.gammaAngleValidator(value);
-    }
-    return false;
-  }
-
-  #setOrientationInputValue(input: HTMLInputElement, value: string): void {
-    input.value = value;
-    const valid = this.#validateOrientationInput(input, value);
-    input.classList.toggle('error-input', !valid);
-  }
-
   private setBoxOrientation(deviceOrientation: SDK.EmulationModel.DeviceOrientation, animate: boolean): void {
     if (animate) {
       this.stageElement.classList.add('is-animating');

package/front_end/panels/settings/keybindsSettingsTab.css

@@ -35,7 +35,7 @@
   background-color: var(--sys-color-tonal-container);
 }
 
-.keybinds-list-item.keybinds-editing {
+.keybinds-list-item-wrapper:has(.keybinds-list-item.keybinds-editing) {
   background-color: var(--sys-color-neutral-container);
 }
 
@@ -168,31 +168,30 @@ button.text-button {
 }
 
 @media (forced-colors: active) {
-  /* Keyboard focus on wrapper element (shortcut items) */
+  .keybinds-list-item.keybinds-editing .keybinds-shortcut {
+    & devtools-button {
+      --sys-color-primary: buttonFace;
+    }
+  }
+
+  .keybinds-list-text input {
+    color: buttonText;
+  }
+
+  /* Keyboard focus / hover on wrapper element (shortcut items) */
   .keybinds-list-item-wrapper {
+    &:has(.keybinds-list-item:hover),
+    &:has(.keybinds-list-item:not(.keybinds-editing)):focus-within,
     &:focus,
     &:focus-visible {
-      background-color: Highlight !important; /* stylelint-disable-line declaration-no-important */
+      background-color: Highlight;
       forced-color-adjust: none;
 
+      --icon-default: HighlightText;
+
       & .keybinds-list-text,
       & .keybinds-action-name {
-        color: HighlightText !important; /* stylelint-disable-line declaration-no-important */
-      }
-
-      & .keybinds-key {
-        background: HighlightText;
-        color: Highlight;
-      }
-    }
-
-    /* Hover state (shortcut items) */
-    &:has(.keybinds-list-item:hover) {
-      background-color: Highlight !important; /* stylelint-disable-line declaration-no-important */
-      forced-color-adjust: none;
-
-      & .keybinds-list-text {
-        color: HighlightText !important; /* stylelint-disable-line declaration-no-important */
+        color: HighlightText;
       }
 
       & .keybinds-key {
@@ -203,23 +202,18 @@ button.text-button {
   }
 
   /* Editing state */
-  .keybinds-list-item.keybinds-editing {
-    background-color: Highlight !important; /* stylelint-disable-line declaration-no-important */
+  .keybinds-list-item-wrapper:has(.keybinds-list-item.keybinds-editing) {
+    background-color: Highlight;
     forced-color-adjust: none;
 
+    --icon-default: HighlightText;
+
     & .keybinds-list-text {
-      color: HighlightText !important; /* stylelint-disable-line declaration-no-important */
+      color: HighlightText;
     }
-  }
 
-  /* Category headers (e.g., "Background Services", "Debugger") */
-  .keybinds-category-header {
-    &:hover,
-    &:focus,
-    &:focus-visible {
-      background-color: Highlight !important; /* stylelint-disable-line declaration-no-important */
-      color: HighlightText !important; /* stylelint-disable-line declaration-no-important */
-      forced-color-adjust: none;
+    & .keybinds-error {
+    color: highlightText;
     }
   }
 }

package/front_end/panels/timeline/EventsTimelineTreeView.ts

@@ -87,13 +87,13 @@ export class EventsTimelineTreeView extends TimelineTreeView {
   }
 
   override populateColumns(columns: DataGrid.DataGrid.ColumnDescriptor[]): void {
-    columns.push(({
+    columns.push({
       id: 'start-time',
       title: i18nString(UIStrings.startTime),
       width: '80px',
       fixedWidth: true,
       sortable: true,
-    } as DataGrid.DataGrid.ColumnDescriptor));
+    });
     super.populateColumns(columns);
     columns.filter(c => c.fixedWidth).forEach(c => {
       c.width = '80px';

package/front_end/panels/timeline/ThirdPartyTreeView.ts

@@ -257,6 +257,8 @@ export class ThirdPartyTreeViewWidget extends TimelineTreeView.TimelineTreeView
 export class ThirdPartyTreeElement extends UI.Widget.WidgetElement<UI.Widget.Widget> {
   #treeView?: ThirdPartyTreeViewWidget;
 
+  static readonly observedAttributes = ['max-rows'];
+
   set treeView(treeView: ThirdPartyTreeViewWidget) {
     this.#treeView = treeView;
   }
@@ -266,6 +268,12 @@ export class ThirdPartyTreeElement extends UI.Widget.WidgetElement<UI.Widget.Wid
     this.style.display = 'contents';
   }
 
+  attributeChangedCallback(name: string, _oldValue: string|null, newValue: string|null): void {
+    if (name === 'max-rows' && newValue) {
+      this.style.setProperty('--max-rows', newValue);
+    }
+  }
+
   override createWidget(): UI.Widget.Widget {
     const containerWidget = new UI.Widget.Widget(this);
     containerWidget.contentElement.style.display = 'contents';

package/front_end/panels/timeline/TimelinePanel.ts

@@ -62,6 +62,7 @@ import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as PanelsCommon from '../common/common.js';
 import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
 
 import {ActiveFilters} from './ActiveFilters.js';
@@ -93,7 +94,7 @@ import {TimelineUIUtils} from './TimelineUIUtils.js';
 import {createHiddenTracksOverlay} from './TrackConfigBanner.js';
 import {UIDevtoolsController} from './UIDevtoolsController.js';
 import {UIDevtoolsUtils} from './UIDevtoolsUtils.js';
-import * as Utils from './utils/utils.js';
+import type * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
@@ -800,7 +801,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   #onFieldDataChanged(): void {
-    const recs = Utils.Helpers.getThrottlingRecommendations();
+    const recs = PanelsCommon.ThrottlingUtils.getThrottlingRecommendations();
     this.cpuThrottlingSelect?.updateRecommendedOption(recs.cpuOption);
     if (this.networkThrottlingSelect) {
       this.networkThrottlingSelect.recommendedConditions = recs.networkConditions;
@@ -3281,6 +3282,17 @@ export class CoreVitalsRevealer implements Common.Revealer.Revealer<Utils.Helper
   }
 }
 
+export class TimeRangeRevealer implements Common.Revealer.Revealer<Utils.Helpers.RevealableTimeRange> {
+  async reveal(revealable: Utils.Helpers.RevealableTimeRange): Promise<void> {
+    await UI.ViewManager.ViewManager.instance().showView('timeline');
+    const panel = TimelinePanel.instance();
+    TraceBounds.TraceBounds.BoundsManager.instance().setTimelineVisibleWindow(
+        revealable.bounds, {ignoreMiniMapBounds: true, shouldAnimate: true});
+    panel.select(null);
+    panel.getFlameChart().selectDetailsViewTab(Tab.Details, null);
+  }
+}
+
 export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   handleAction(context: UI.Context.Context, actionId: string): boolean {
     const panel = context.flavor(TimelinePanel);

package/front_end/panels/timeline/TimelineTreeView.ts

@@ -264,9 +264,9 @@ export class TimelineTreeView extends
     this.textFilterInternal = new TimelineRegExp();
 
     this.currentThreadSetting = Common.Settings.Settings.instance().createSetting('timeline-tree-current-thread', 0);
-    this.currentThreadSetting.addChangeListener(this.refreshTree, this);
+    this.currentThreadSetting.addChangeListener(() => this.refreshTree());
 
-    const columns = ([] as DataGrid.DataGrid.ColumnDescriptor[]);
+    const columns: DataGrid.DataGrid.ColumnDescriptor[] = [];
     this.populateColumns(columns);
 
     this.splitWidget = new UI.SplitWidget.SplitWidget(true, true, 'timeline-tree-view-details-split-widget');
@@ -403,8 +403,15 @@ export class TimelineTreeView extends
     }
   }
 
-  refreshTree(): void {
-    if (!this.element.parentElement) {
+  /**
+   * Refreshes the tree. By default, it will only do this
+   * if the tree is mounted into the DOM - as in the UI we
+   * have multiple trees and we only want to refresh the
+   * active one. Pass `true` into this function to force a
+   * refresh regardless.
+   */
+  refreshTree(forceRefresh = false): void {
+    if (!this.element.parentElement && !forceRefresh) {
       // This function can be called in different views (Bottom-Up and
       // Call Tree) by the same single event whenever the group-by
       // dropdown changes value. Thus, we bail out whenever the view is
@@ -462,15 +469,10 @@ export class TimelineTreeView extends
   }
 
   populateColumns(columns: DataGrid.DataGrid.ColumnDescriptor[]): void {
+    columns.push({id: 'self', title: i18nString(UIStrings.selfTime), width: '120px', fixedWidth: true, sortable: true});
     columns.push(
-        ({id: 'self', title: i18nString(UIStrings.selfTime), width: '120px', fixedWidth: true, sortable: true} as
-         DataGrid.DataGrid.ColumnDescriptor));
-    columns.push(
-        ({id: 'total', title: i18nString(UIStrings.totalTime), width: '120px', fixedWidth: true, sortable: true} as
-         DataGrid.DataGrid.ColumnDescriptor));
-    columns.push(
-        ({id: 'activity', title: i18nString(UIStrings.activity), disclosure: true, sortable: true} as
-         DataGrid.DataGrid.ColumnDescriptor));
+        {id: 'total', title: i18nString(UIStrings.totalTime), width: '120px', fixedWidth: true, sortable: true});
+    columns.push({id: 'activity', title: i18nString(UIStrings.activity), disclosure: true, sortable: true});
   }
 
   sortingChanged(): void {
@@ -959,7 +961,7 @@ export class AggregatedTimelineTreeView extends TimelineTreeView {
     super();
     this.groupBySetting = Common.Settings.Settings.instance().createSetting(
         'timeline-tree-group-by', AggregatedTimelineTreeView.GroupBy.None);
-    this.groupBySetting.addChangeListener(this.refreshTree.bind(this));
+    this.groupBySetting.addChangeListener(() => this.refreshTree());
     this.init();
     this.stackView = new TimelineStackView(this);
     this.stackView.addEventListener(TimelineStackView.Events.SELECTION_CHANGED, this.onStackViewSelectionChanged, this);
@@ -1297,10 +1299,10 @@ export class TimelineStackView extends
     const header = this.element.createChild('div', 'timeline-stack-view-header');
     header.textContent = i18nString(UIStrings.heaviestStack);
     this.treeView = treeView;
-    const columns = ([
-      {id: 'total', title: i18nString(UIStrings.totalTime), fixedWidth: true, width: '110px'},
-      {id: 'activity', title: i18nString(UIStrings.activity)},
-    ] as DataGrid.DataGrid.ColumnDescriptor[]);
+    const columns: DataGrid.DataGrid.ColumnDescriptor[] = [
+      {id: 'total', title: i18nString(UIStrings.totalTime), fixedWidth: true, width: '110px', sortable: false},
+      {id: 'activity', title: i18nString(UIStrings.activity), sortable: false},
+    ];
     this.dataGrid = new DataGrid.ViewportDataGrid.ViewportDataGrid({
       displayName: i18nString(UIStrings.timelineStack),
       columns,

package/front_end/panels/timeline/components/FieldSettingsDialog.ts

@@ -4,7 +4,6 @@
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/kit/kit.js';
-import './OriginMap.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as CrUXManager from '../../../models/crux-manager/crux-manager.js';
@@ -13,11 +12,12 @@ import * as Dialogs from '../../../ui/components/dialogs/dialogs.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as Input from '../../../ui/components/input/input.js';
 import * as uiI18n from '../../../ui/i18n/i18n.js';
+import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import fieldSettingsDialogStyles from './fieldSettingsDialog.css.js';
-import type {OriginMap} from './OriginMap.js';
+import {OriginMap} from './OriginMap.js';
 
 const UIStrings = {
   /**
@@ -95,6 +95,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/FieldSettin
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const {html, nothing, Directives: {ifDefined}} = Lit;
+const {widget, widgetRef} = UI.Widget;
 
 export class ShowDialog extends Event {
   static readonly eventName = 'showdialog';
@@ -309,13 +310,8 @@ export class FieldSettingsDialog extends HTMLElement {
     // clang-format off
     return html`
       <div class="origin-mapping-description">${i18nString(UIStrings.mapDevelopmentOrigins)}</div>
-      <devtools-origin-map
-        ${Lit.Directives.ref(el => {
-          if (el instanceof HTMLElement) {
-            this.#originMap = el as OriginMap;
-          }
-        })}
-      ></devtools-origin-map>
+      <devtools-widget ${widget(OriginMap)} ${widgetRef(OriginMap, el => { this.#originMap = el; })}>
+      </devtools-widget>
       <div class="origin-mapping-button-section">
         <devtools-button
           @click=${() => this.#originMap?.startCreation()}

package/front_end/panels/timeline/components/LiveMetricsView.ts

@@ -31,7 +31,6 @@ import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as PanelsCommon from '../../common/common.js';
-import * as Utils from '../utils/utils.js';
 
 import {CPUThrottlingSelector} from './CPUThrottlingSelector.js';
 import {md} from './insights/Helpers.js';
@@ -636,7 +635,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     networkRecEl.classList.add('environment-rec');
     networkRecEl.textContent = this.#getNetworkRecTitle() || i18nString(UIStrings.notEnoughData);
 
-    const recs = Utils.Helpers.getThrottlingRecommendations();
+    const recs = PanelsCommon.ThrottlingUtils.getThrottlingRecommendations();
 
     // clang-format off
     return html`