chrome-devtools-frontend 1.0.1602543 → 1.0.1603822

package/front_end/panels/common/ThrottlingUtils.ts

@@ -0,0 +1,46 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as SDK from '../../core/sdk/sdk.js';
+import * as CrUXManager from '../../models/crux-manager/crux-manager.js';
+
+export interface ThrottlingRecommendations {
+  cpuOption: SDK.CPUThrottlingManager.CPUThrottlingOption|null;
+  networkConditions: SDK.NetworkManager.Conditions|null;
+}
+
+/**
+ * Computes the recommended CPU and network throttling presets based on CrUX
+ * field metric data.
+ */
+export function getThrottlingRecommendations(): ThrottlingRecommendations {
+  const cruxManager = CrUXManager.CrUXManager.instance();
+  const roundTripTimeMetricData = cruxManager.getSelectedFieldMetricData('round_trip_time');
+
+  let cpuOption: SDK.CPUThrottlingManager.CPUThrottlingOption =
+      SDK.CPUThrottlingManager.CalibratedMidTierMobileThrottlingOption;
+  if (cpuOption.rate() === 0) {
+    cpuOption = SDK.CPUThrottlingManager.MidTierThrottlingOption;
+  }
+
+  const networkConditions = getRecommendedNetworkConditions(roundTripTimeMetricData);
+
+  return {
+    cpuOption,
+    networkConditions,
+  };
+}
+
+/**
+ * Computes the recommended network throttling preset based on CrUX RTT field
+ * metric data. Returns null if no RTT data is available or no preset matches.
+ */
+export function getRecommendedNetworkConditions(roundTripTimeMetricData?: CrUXManager.MetricResponse):
+    SDK.NetworkManager.Conditions|null {
+  if (roundTripTimeMetricData?.percentiles) {
+    const rtt = Number(roundTripTimeMetricData.percentiles.p75);
+    return SDK.NetworkManager.getRecommendedNetworkPreset(rtt);
+  }
+  return null;
+}

package/front_end/panels/common/common.ts

@@ -109,5 +109,6 @@ export * as ExtensionServer from './ExtensionServer.js';
 export * as ExtensionView from './ExtensionView.js';
 export * as PersistenceUtils from './PersistenceUtils.js';
 export * as DOMLinkifier from './DOMLinkifier.js';
+export * as ThrottlingUtils from './ThrottlingUtils.js';
 export * as ExtensionIframe from './ExtensionView.js';
 export {CopyChangesToPrompt} from './CopyChangesToPrompt.js';

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -331,6 +331,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
 
   #computedStylesTree = new TreeOutline.TreeOutline.TreeOutline<ComputedStyleData>();
   #treeData?: TreeOutline.TreeOutline.TreeOutlineData<ComputedStyleData>;
+  #enableNarrowViewResizing = true;
   readonly #view: View;
 
   /**
@@ -378,10 +379,19 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
   }
 
   override onResize(): void {
-    const isNarrow = this.contentElement.offsetWidth < 260;
+    const isNarrow = this.#enableNarrowViewResizing && this.contentElement.offsetWidth < 260;
     this.#computedStylesTree.classList.toggle('computed-narrow', isNarrow);
   }
 
+  get enableNarrowViewResizing(): boolean {
+    return this.#enableNarrowViewResizing;
+  }
+
+  set enableNarrowViewResizing(enable: boolean) {
+    this.#enableNarrowViewResizing = enable;
+    this.onResize();
+  }
+
   get filterText(): RegExp|string {
     if (this.#filterIsRegex) {
       return new RegExp(this.#filterText);

package/front_end/panels/elements/StandaloneStylesContainer.ts

@@ -115,9 +115,6 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
   }
 
   async #updateSections(signal?: AbortSignal): Promise<void> {
-    for (const section of this.#sections) {
-      section.dispose();
-    }
     const node = this.node();
     if (!node) {
       this.#sections = [];

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -44,7 +44,6 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Badges from '../../models/badges/badges.js';
 import * as Bindings from '../../models/bindings/bindings.js';
-import * as ComputedStyle from '../../models/computed_style/computed_style.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Tooltips from '../../ui/components/tooltips/tooltips.js';
@@ -375,55 +374,12 @@ export class StylePropertiesSection {
     this.markSelectorMatches();
     this.onpopulate();
     this.#updateCollapsedState();
-
-    this.stylesContainer.computedStyleModel().addEventListener(
-        ComputedStyle.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.#onCSSModelChanged, this);
   }
 
   setComputedStyles(computedStyles: Map<string, string>|null): void {
     this.computedStyles = computedStyles;
   }
 
-  #onCSSModelChanged(event: Common.EventTarget.EventTargetEvent<ComputedStyle.ComputedStyleModel.CSSModelChangedEvent>):
-      void {
-    const edit = event?.data && 'edit' in event.data ? event.data.edit : null;
-    if (edit) {
-      this.styleSheetEdited(edit);
-      void this.refreshComputedValues();
-      return;
-    }
-
-    if (this.stylesContainer.isEditingStyle || this.stylesContainer.userOperation) {
-      void this.refreshComputedValues();
-    }
-  }
-
-  async refreshComputedValues(): Promise<void> {
-    const node = this.stylesContainer.node();
-    if (!node) {
-      return;
-    }
-
-    const cssModel = node.domModel().cssModel();
-    const computedStyleModel = this.stylesContainer.computedStyleModel();
-
-    const matchedStyles = await cssModel.cachedMatchedCascadeForNode(node);
-    const parentNodeId = matchedStyles?.getParentLayoutNodeId();
-
-    const [computedStyles, parentsComputedStyles] = await Promise.all([
-      computedStyleModel.fetchComputedStyle(),
-      parentNodeId ? cssModel.getComputedStyle(parentNodeId) : null,
-    ]);
-
-    if (computedStyles) {
-      this.setComputedStyles(computedStyles.computedStyle);
-    }
-    if (parentsComputedStyles) {
-      this.setParentsComputedStyles(parentsComputedStyles);
-    }
-    this.updateAuthoringHint();
-  }
-
   setParentsComputedStyles(parentsComputedStyles: Map<string, string>|null): void {
     this.parentsComputedStyles = parentsComputedStyles;
   }
@@ -444,11 +400,6 @@ export class StylePropertiesSection {
     }
   }
 
-  dispose(): void {
-    this.stylesContainer.computedStyleModel().removeEventListener(
-        ComputedStyle.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.#onCSSModelChanged, this);
-  }
-
   setSectionIdx(sectionIdx: number): void {
     this.sectionIdx = sectionIdx;
     this.onpopulate();

package/front_end/panels/elements/StylesContainer.ts

@@ -17,7 +17,6 @@ export interface StylesContainer {
   activeCSSAngle: InlineEditor.CSSAngle.CSSAngle|null;
   readonly webCustomData: WebCustomData|undefined;
   isEditingStyle: boolean;
-  userOperation: boolean;
   readonly sectionByElement: WeakMap<Node, StylePropertiesSection>;
   readonly element: HTMLElement;
   readonly linkifier: Components.Linkifier.Linkifier;

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -189,7 +189,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   private readonly decorator: StylePropertyHighlighter;
 
   private lastRevealedProperty: SDK.CSSProperty.CSSProperty|null = null;
-  userOperation = false;
+  private userOperation = false;
   isEditingStyle = false;
   #filterRegex: RegExp|null = null;
   #isRegex = false;
@@ -211,6 +211,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   #webCustomData?: WebCustomData;
 
   activeCSSAngle: InlineEditor.CSSAngle.CSSAngle|null = null;
+  #updateAbortController?: AbortController;
+  #updateComputedStylesAbortController?: AbortController;
 
   constructor(computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel) {
     super(computedStyleModel, {delegatesFocus: true});
@@ -688,9 +690,12 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
   override onCSSModelChanged(
       event: Common.EventTarget.EventTargetEvent<ComputedStyle.ComputedStyleModel.CSSModelChangedEvent>): void {
-    // We only recreate sections if this update is more than an "edit" operation.
-    // Sections will pull their own updates in the case of an "edit".
-    if (event?.data && 'edit' in event.data && event.data.edit) {
+    const edit = event?.data && 'edit' in event.data ? event.data.edit : null;
+    if (edit) {
+      for (const section of this.allSections()) {
+        section.styleSheetEdited(edit);
+      }
+      void this.#refreshComputedStyles();
       return;
     }
 
@@ -713,6 +718,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
   #resetUpdateIfNotEditing(): void {
     if (this.userOperation || this.isEditingStyle) {
+      void this.#refreshComputedStyles();
       return;
     }
 
@@ -861,6 +867,28 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     }
   }
 
+  async #refreshComputedStyles(): Promise<void> {
+    this.#updateComputedStylesAbortController?.abort();
+    this.#updateAbortController = new AbortController();
+    const signal = this.#updateAbortController.signal;
+    const matchedStyles = await this.fetchMatchedCascade();
+    const nodeId = this.node()?.id;
+    const parentNodeId = matchedStyles?.getParentLayoutNodeId();
+
+    const [computedStyles, parentsComputedStyles] =
+        await Promise.all([this.fetchComputedStylesFor(nodeId), this.fetchComputedStylesFor(parentNodeId)]);
+
+    if (signal.aborted) {
+      return;
+    }
+
+    for (const section of this.allSections()) {
+      section.setComputedStyles(computedStyles);
+      section.setParentsComputedStyles(parentsComputedStyles);
+      section.updateAuthoringHint();
+    }
+  }
+
   focusedSectionIndex(): number {
     let index = 0;
     for (const block of this.sectionBlocks) {
@@ -903,9 +931,6 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
     this.linkifier.reset();
     const prevSections = this.sectionBlocks.map(block => block.sections).flat();
-    for (const section of prevSections) {
-      section.dispose();
-    }
     this.sectionBlocks = [];
 
     const node = this.node();

package/front_end/panels/mobile_throttling/NetworkThrottlingSelector.ts

@@ -6,9 +6,11 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as CrUXManager from '../../models/crux-manager/crux-manager.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 * as PanelsCommon from '../common/common.js';
 
 import {ThrottlingManager} from './ThrottlingManager.js';
 import type {NetworkThrottlingConditionsGroup} from './ThrottlingPresets.js';
@@ -185,6 +187,18 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.ObjectWrapper<
         SDK.NetworkManager.MultitargetNetworkManager.Events.CONDITIONS_CHANGED, () => {
           select.currentConditions = SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions();
         });
+
+    // Subscribe to CrUX field data changes to show recommended throttling
+    // presets based on real-user RTT data.
+    const cruxManager = CrUXManager.CrUXManager.instance();
+    const updateRecommendation = (): void => {
+      const roundTripTimeMetricData = cruxManager.getSelectedFieldMetricData('round_trip_time');
+      select.recommendedConditions =
+          PanelsCommon.ThrottlingUtils.getRecommendedNetworkConditions(roundTripTimeMetricData);
+    };
+    cruxManager.addEventListener(CrUXManager.Events.FIELD_DATA_CHANGED, updateRecommendation);
+    updateRecommendation();
+
     return select;
   }
 

package/front_end/panels/profiler/ProfileView.ts

@@ -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/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/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/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`