chrome-devtools-frontend 1.0.1516909 → 1.0.1519267

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -376,9 +376,10 @@ const UIStrings = {
   compositingFailedUnknownReason: 'Unknown Reason',
 
   /**
-   * @description Text for the execution stack trace
+   * @description Text for the execution "stack trace". It is not technically a stack trace, because it points to the beginning of each function
+   * and not to each call site, so we call it a function stack instead to avoid confusion.
    */
-  stackTrace: 'Stack trace',
+  functionStack: 'Function stack',
   /**
    * @description Text used to show any invalidations for a particular event that caused the browser to have to do more work to update the page.
    * @example {2} PH1
@@ -1711,10 +1712,10 @@ export class TimelineUIUtils {
       parsedTrace: Trace.TraceModel.ParsedTrace): Promise<void> {
     const {startTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(event);
     let initiatorStackLabel = i18nString(UIStrings.initiatorStackTrace);
-    let stackLabel = i18nString(UIStrings.stackTrace);
+    let stackLabel = i18nString(UIStrings.functionStack);
     const stackTraceForEvent = Trace.Extras.StackTraceForEvent.get(event, parsedTrace.data);
     if (stackTraceForEvent?.callFrames.length || stackTraceForEvent?.description || stackTraceForEvent?.parent) {
-      contentHelper.addSection(i18nString(UIStrings.stackTrace));
+      contentHelper.addSection(i18nString(UIStrings.functionStack));
       contentHelper.createChildStackTraceElement(stackTraceForEvent);
       // TODO(andoli): also build stack trace component for other events
       // that have a stack trace using the StackTraceForEvent helper.

package/front_end/panels/timeline/TimingsTrackAppender.ts

@@ -4,6 +4,7 @@
 import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Trace from '../../models/trace/trace.js';
+import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 
 import {buildGroupStyle, buildTrackHeader, getDurationString} from './AppenderUtils.js';
 import {
@@ -103,7 +104,11 @@ export class TimingsTrackAppender implements TrackAppender {
    */
   #appendTrackHeaderAtLevel(currentLevel: number, expanded?: boolean): void {
     const trackIsCollapsible = this.#parsedTrace.data.UserTimings.performanceMeasures.length > 0;
-    const style = buildGroupStyle({useFirstLineForOverview: true, collapsible: trackIsCollapsible});
+    const style = buildGroupStyle({
+      useFirstLineForOverview: true,
+      collapsible: trackIsCollapsible ? PerfUI.FlameChart.GroupCollapsibleState.IF_MULTI_ROW :
+                                        PerfUI.FlameChart.GroupCollapsibleState.NEVER,
+    });
     const group = buildTrackHeader(
         VisualLoggingTrackName.TIMINGS, currentLevel, i18nString(UIStrings.timings), style, /* selectable= */ true,
         expanded);

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

@@ -1,7 +1,6 @@
 // Copyright 2024 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable rulesdir/no-lit-render-outside-of-view */
 
 import '../../../ui/components/icon_button/icon_button.js';
 import '../../../ui/components/menus/menus.js';
@@ -9,15 +8,15 @@ import '../../../ui/components/menus/menus.js';
 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 * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import type * as Menus from '../../../ui/components/menus/menus.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 MobileThrottling from '../../mobile_throttling/mobile_throttling.js';
 
 import cpuThrottlingSelectorStyles from './cpuThrottlingSelector.css.js';
 
-const {html} = Lit;
+const {render, html} = Lit;
 
 const UIStrings = {
   /**
@@ -62,37 +61,110 @@ interface CPUThrottlingGroup {
   showCustomAddOption?: boolean;
 }
 
-export class CPUThrottlingSelector extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+interface ViewInput {
+  recommendedOption: SDK.CPUThrottlingManager.CPUThrottlingOption|null;
+  currentOption: SDK.CPUThrottlingManager.CPUThrottlingOption;
+  groups: CPUThrottlingGroup[];
+  throttling: SDK.CPUThrottlingManager.CalibratedCPUThrottling;
+  onMenuItemSelected: (event: Menus.SelectMenu.SelectMenuItemSelectedEvent) => void;
+  onCalibrateClick: () => void;
+}
+
+export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
+  let recommendedInfoEl;
+  if (input.recommendedOption && input.currentOption === SDK.CPUThrottlingManager.NoThrottlingOption) {
+    recommendedInfoEl = html`<devtools-icon
+        title=${i18nString(UIStrings.recommendedThrottlingReason)}
+        name=info></devtools-icon>`;
+  }
 
+  const selectionTitle = input.currentOption.title();
+  const hasCalibratedOnce = input.throttling.low || input.throttling.mid;
+  const calibrationLabel = hasCalibratedOnce ? i18nString(UIStrings.recalibrate) : i18nString(UIStrings.calibrate);
+
+  // clang-format off
+  /* eslint-disable rulesdir/no-deprecated-component-usages */
+  const template = html`
+    <style>${cpuThrottlingSelectorStyles}</style>
+    <devtools-select-menu
+          @selectmenuselected=${input.onMenuItemSelected}
+          .showDivider=${true}
+          .showArrow=${true}
+          .sideButton=${false}
+          .showSelectedItem=${true}
+          .jslogContext=${'cpu-throttling'}
+          .buttonTitle=${i18nString(UIStrings.cpu, {PH1: selectionTitle})}
+          .title=${i18nString(UIStrings.cpuThrottling, {PH1: selectionTitle})}
+        >
+        ${input.groups.map(group => {
+          return html`
+            <devtools-menu-group .name=${group.name} .title=${group.name}>
+              ${group.items.map(option => {
+                const title = option === input.recommendedOption ? i18nString(UIStrings.recommendedThrottling, {PH1: option.title()}) : option.title();
+                const rate = option.rate();
+                return html`
+                  <devtools-menu-item
+                    .value=${option.calibratedDeviceType ?? rate}
+                    .selected=${input.currentOption === option}
+                    .disabled=${rate === 0}
+                    .title=${title}
+                    jslog=${VisualLogging.item(option.jslogContext).track({click: true})}
+                  >
+                    ${title}
+                  </devtools-menu-item>
+                `;
+              })}
+              ${group.name === 'Calibrated presets' ? html`<devtools-menu-item
+                .value=${-1 /* This won't be displayed unless it has some value. */}
+                .title=${calibrationLabel}
+                jslog=${VisualLogging.action('cpu-throttling-selector-calibrate').track({click: true})}
+                @click=${input.onCalibrateClick}
+              >
+                ${calibrationLabel}
+              </devtools-menu-item>` : Lit.nothing}
+            </devtools-menu-group>`;
+        })}
+    </devtools-select-menu>
+    ${recommendedInfoEl}
+  `;
+  // clang-format on
+  render(template, target);
+};
+
+type View = typeof DEFAULT_VIEW;
+
+export class CPUThrottlingSelector extends UI.Widget.Widget {
   #currentOption: SDK.CPUThrottlingManager.CPUThrottlingOption;
   #recommendedOption: SDK.CPUThrottlingManager.CPUThrottlingOption|null = null;
   #groups: CPUThrottlingGroup[] = [];
   #calibratedThrottlingSetting: Common.Settings.Setting<SDK.CPUThrottlingManager.CalibratedCPUThrottling>;
+  readonly #view: View;
 
-  constructor() {
-    super();
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element);
     this.#currentOption = SDK.CPUThrottlingManager.CPUThrottlingManager.instance().cpuThrottlingOption();
     this.#calibratedThrottlingSetting =
         Common.Settings.Settings.instance().createSetting<SDK.CPUThrottlingManager.CalibratedCPUThrottling>(
             'calibrated-cpu-throttling', {}, Common.Settings.SettingStorageType.GLOBAL);
     this.#resetGroups();
-    this.#render();
+    this.#view = view;
   }
 
   set recommendedOption(recommendedOption: SDK.CPUThrottlingManager.CPUThrottlingOption|null) {
     this.#recommendedOption = recommendedOption;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+    this.requestUpdate();
   }
 
-  connectedCallback(): void {
+  override wasShown(): void {
+    super.wasShown();
     SDK.CPUThrottlingManager.CPUThrottlingManager.instance().addEventListener(
         SDK.CPUThrottlingManager.Events.RATE_CHANGED, this.#onOptionChange, this);
     this.#calibratedThrottlingSetting.addChangeListener(this.#onCalibratedSettingChanged, this);
     this.#onOptionChange();
   }
 
-  disconnectedCallback(): void {
+  override willHide(): void {
+    super.willHide();
     this.#calibratedThrottlingSetting.removeChangeListener(this.#onCalibratedSettingChanged, this);
     SDK.CPUThrottlingManager.CPUThrottlingManager.instance().removeEventListener(
         SDK.CPUThrottlingManager.Events.RATE_CHANGED, this.#onOptionChange, this);
@@ -101,12 +173,12 @@ export class CPUThrottlingSelector extends HTMLElement {
   #onOptionChange(): void {
     this.#currentOption = SDK.CPUThrottlingManager.CPUThrottlingManager.instance().cpuThrottlingOption();
 
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+    this.requestUpdate();
   }
 
   #onCalibratedSettingChanged(): void {
     this.#resetGroups();
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+    this.requestUpdate();
   }
 
   #onMenuItemSelected(event: Menus.SelectMenu.SelectMenuItemSelectedEvent): void {
@@ -147,74 +219,15 @@ export class CPUThrottlingSelector extends HTMLElement {
     ];
   }
 
-  #render = (): void => {
-    let recommendedInfoEl;
-    if (this.#recommendedOption && this.#currentOption === SDK.CPUThrottlingManager.NoThrottlingOption) {
-      recommendedInfoEl = html`<devtools-icon
-        title=${i18nString(UIStrings.recommendedThrottlingReason)}
-        name=info></devtools-icon>`;
-    }
-
-    const selectionTitle = this.#currentOption.title();
-    const setting = this.#calibratedThrottlingSetting.get();
-    const hasCalibratedOnce = setting.low || setting.mid;
-    const calibrationLabel = hasCalibratedOnce ? i18nString(UIStrings.recalibrate) : i18nString(UIStrings.calibrate);
-
-    // clang-format off
-    /* eslint-disable rulesdir/no-deprecated-component-usages */
-    const output = html`
-      <style>${cpuThrottlingSelectorStyles}</style>
-      <devtools-select-menu
-            @selectmenuselected=${this.#onMenuItemSelected}
-            .showDivider=${true}
-            .showArrow=${true}
-            .sideButton=${false}
-            .showSelectedItem=${true}
-            .jslogContext=${'cpu-throttling'}
-            .buttonTitle=${i18nString(UIStrings.cpu, {PH1: selectionTitle})}
-            .title=${i18nString(UIStrings.cpuThrottling, {PH1: selectionTitle})}
-          >
-          ${this.#groups.map(group => {
-            return html`
-              <devtools-menu-group .name=${group.name} .title=${group.name}>
-                ${group.items.map(option => {
-                  const title = option === this.#recommendedOption ? i18nString(UIStrings.recommendedThrottling, {PH1: option.title()}) : option.title();
-                  const rate = option.rate();
-                  return html`
-                    <devtools-menu-item
-                      .value=${option.calibratedDeviceType ?? rate}
-                      .selected=${this.#currentOption === option}
-                      .disabled=${rate === 0}
-                      .title=${title}
-                      jslog=${VisualLogging.item(option.jslogContext).track({click: true})}
-                    >
-                      ${title}
-                    </devtools-menu-item>
-                  `;
-                })}
-                ${group.name === 'Calibrated presets' ? html`<devtools-menu-item
-                  .value=${-1 /* This won't be displayed unless it has some value. */}
-                  .title=${calibrationLabel}
-                  jslog=${VisualLogging.action('cpu-throttling-selector-calibrate').track({click: true})}
-                  @click=${this.#onCalibrateClick}
-                >
-                  ${calibrationLabel}
-                </devtools-menu-item>` : Lit.nothing}
-              </devtools-menu-group>`;
-          })}
-      </devtools-select-menu>
-      ${recommendedInfoEl}
-    `;
-    /* eslint-enable rulesdir/no-deprecated-component-usages */
-    // clang-format on
-    Lit.render(output, this.#shadow, {host: this});
-  };
-}
-
-customElements.define('devtools-cpu-throttling-selector', CPUThrottlingSelector);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-cpu-throttling-selector': CPUThrottlingSelector;
+  override async performUpdate(): Promise<void> {
+    const input: ViewInput = {
+      recommendedOption: this.#recommendedOption,
+      currentOption: this.#currentOption,
+      groups: this.#groups,
+      throttling: this.#calibratedThrottlingSetting.get(),
+      onMenuItemSelected: this.#onMenuItemSelected.bind(this),
+      onCalibrateClick: this.#onCalibrateClick.bind(this),
+    };
+    this.#view(input, undefined, this.contentElement);
   }
 }

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

@@ -158,7 +158,7 @@ export class LayoutShiftDetails extends UI.Widget.Widget {
 export const DEFAULT_VIEW: (input: ViewInput, output: object, target: HTMLElement) => void =
     (input, _output, target) => {
       if (!input.event || !input.parsedTrace) {
-        render(html``, target);
+        render(Lit.nothing, target);
         return;
       }
 

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

@@ -5,7 +5,6 @@
 /* eslint-disable rulesdir/no-lit-render-outside-of-view */
 
 import '../../../ui/components/icon_button/icon_button.js';
-import './CPUThrottlingSelector.js';
 import './FieldSettingsDialog.js';
 import './NetworkThrottlingSelector.js';
 import '../../../ui/components/menus/menus.js';
@@ -30,6 +29,7 @@ import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import {getThrottlingRecommendations} from '../utils/Helpers.js';
 
+import {CPUThrottlingSelector} from './CPUThrottlingSelector.js';
 import {md} from './insights/Helpers.js';
 import liveMetricsViewStyles from './liveMetricsView.css.js';
 import type {MetricCardData} from './MetricCard.js';
@@ -638,7 +638,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         </ul>
       ` : nothing}
       <div class="environment-option">
-        <devtools-cpu-throttling-selector .recommendedOption=${recs.cpuOption}></devtools-cpu-throttling-selector>
+        <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(CPUThrottlingSelector, {recommendedOption: recs.cpuOption})}></devtools-widget>
       </div>
       <div class="environment-option">
         <devtools-network-throttling-selector .recommendedConditions=${recs.networkConditions}></devtools-network-throttling-selector>

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

@@ -197,7 +197,7 @@ export interface ViewInput {
 export const DEFAULT_VIEW: (
     input: ViewInput, output: object, target: HTMLElement) => void = (input, _output, target) => {
   if (!input.request) {
-    render(html``, target);
+    render(Lit.nothing, target);
     return;
   }
   const {request} = input;

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

@@ -86,7 +86,7 @@ export const DEFAULT_VIEW: (input: ViewInput, output: object, target: HTMLElemen
       const {activeEvent, eventToInsightsMap} = input;
       const relatedInsights = activeEvent ? eventToInsightsMap.get(activeEvent) ?? [] : [];
       if (!activeEvent || eventToInsightsMap.size === 0 || relatedInsights.length === 0) {
-        render(html``, target);
+        render(Lit.nothing, target);
         return;
       }
 

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

@@ -478,7 +478,7 @@ export class SidebarSingleInsightSet extends HTMLElement {
       insightSetKey,
     } = this.#data;
     if (!parsedTrace?.insights || !insightSetKey) {
-      Lit.render(html``, this.#shadow, {host: this});
+      Lit.render(Lit.nothing, this.#shadow, {host: this});
       return;
     }
 

package/front_end/panels/timeline/components/cpuThrottlingSelector.css

@@ -4,21 +4,23 @@
  * found in the LICENSE file.
  */
 
-:host {
-  display: flex;
-  align-items: center;
-  max-width: 100%;
-  height: 20px;
-}
+ @scope to (devtools-widget > *) {
+  :scope {
+    display: flex;
+    align-items: center;
+    max-width: 100%;
+    height: 20px;
+  }
 
-devtools-icon[name="info"] {
-  margin-left: var(--sys-size-3);
-  width: var(--sys-size-8);
-  height: var(--sys-size-8);
-}
+  devtools-icon[name="info"] {
+    margin-left: var(--sys-size-3);
+    width: var(--sys-size-8);
+    height: var(--sys-size-8);
+  }
 
-devtools-select-menu {
-  min-width: 160px;
-  max-width: 100%;
-  height: 20px;
+  devtools-select-menu {
+    min-width: 160px;
+    max-width: 100%;
+    height: 20px;
+  }
 }

package/front_end/panels/timeline/components/insights/BaseInsightComponent.ts

@@ -8,6 +8,7 @@ import '../../../../ui/components/markdown_view/markdown_view.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Root from '../../../../core/root/root.js';
 import * as AIAssistance from '../../../../models/ai_assistance/ai_assistance.js';
+import * as Badges from '../../../../models/badges/badges.js';
 import type {InsightModel} from '../../../../models/trace/insights/types.js';
 import type * as Trace from '../../../../models/trace/trace.js';
 import * as Buttons from '../../../../ui/components/buttons/buttons.js';
@@ -195,6 +196,8 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
       UI.Context.Context.instance().setFlavor(AIAssistance.AgentFocus, focus.withInsight(this.model));
     }
 
+    Badges.UserBadges.instance().recordAction(Badges.BadgeAction.PERFORMANCE_INSIGHT_CLICKED);
+
     this.sharedTableState.selectedRowEl?.classList.remove('selected');
     this.sharedTableState.selectedRowEl = null;
     this.sharedTableState.selectionIsSticky = false;

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: https://source.chromium.org/chromium/chromium/src/+/main:components/variations/proto/devtools/
 Version: N/A
-Revision: a53252f55270b0a53536cabc8402ef6457ee9ab9
+Revision: 0b46aaf7af942d8ed35500074840aba1ef6d6303
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE