chrome-devtools-frontend 1.0.1516909 → 1.0.1518653

package/front_end/panels/settings/components/SyncSection.ts

@@ -17,6 +17,7 @@ import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import type * as SettingsComponents from '../../../ui/components/settings/settings.js';
 import * as Lit from '../../../ui/lit/lit.js';
+import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as PanelCommon from '../../common/common.js';
 import * as PanelUtils from '../../utils/utils.js';
 
@@ -212,7 +213,7 @@ export class SyncSection extends HTMLElement {
   }
 
   async #fetchGdpDetails(): Promise<void> {
-    if (!Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled || Root.Runtime.hostConfig.isOffTheRecord) {
+    if (!Host.GdpClient.isGdpProfilesAvailable()) {
       return;
     }
 
@@ -304,21 +305,25 @@ function renderGdpSectionIfNeeded({
   gdpProfile?: Host.GdpClient.Profile,
   isEligibleToCreateProfile?: boolean,
 }): Lit.LitTemplate {
-  // clang-format off
-  if (!Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled || (!gdpProfile && !isEligibleToCreateProfile)) {
+  if (!Host.GdpClient.isGdpProfilesAvailable() || (!gdpProfile && !isEligibleToCreateProfile)) {
     return Lit.nothing;
   }
+  const hasReceiveBadgesCheckbox = receiveBadgesSetting &&
+      Host.GdpClient.getGdpProfilesEnterprisePolicy() === Root.Runtime.GdpProfilesEnterprisePolicyValue.ENABLED;
 
   function renderBrand(): Lit.LitTemplate {
+    // clang-format off
     return html`
       <div class="gdp-profile-header">
         <div class="gdp-logo" role="img" tabindex="0" aria-label="Google Developer Program"></div>
       </div>
     `;
+    // clang-format on
   }
 
+  // clang-format off
   return html`
-    <div class="gdp-profile-container">
+    <div class="gdp-profile-container" jslog=${VisualLogging.section().context('gdp-profile')}>
       <div class="divider"></div>
       ${gdpProfile ? html`
         <div class="gdp-profile-details-content">
@@ -326,10 +331,13 @@ function renderGdpSectionIfNeeded({
           <div class="plan-details">
             ${getGdpSubscriptionText(gdpProfile)}
             &nbsp;·&nbsp;
-            <x-link class="link" href=${Host.GdpClient.GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK}>
+            <x-link
+              jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('view-profile')}
+              class="link"
+              href=${Host.GdpClient.GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK}>
               ${i18nString(UIStrings.viewProfile)}
             </x-link></div>
-            ${receiveBadgesSetting ? html`
+            ${hasReceiveBadgesCheckbox ? html`
               <div class="setting-container"  ${ref(receiveBadgesSettingContainerRef)}>
                 <setting-checkbox class="setting-checkbox" .data=${{setting: receiveBadgesSetting}} @change=${(e: Event) => {
                   const settingCheckbox = e.target as SettingsComponents.SettingCheckbox.SettingCheckbox;
@@ -351,7 +359,7 @@ function renderGdpSectionIfNeeded({
             @click=${() => PanelCommon.GdpSignUpDialog.show({
               onSuccess: onSignUpSuccess
             })}
-            .jslogContext=${'gdp.sign-up-dialog-open'}
+            .jslogContext=${'open-sign-up-dialog'}
             .variant=${Buttons.Button.Variant.OUTLINED}>
               ${i18nString(UIStrings.signUp)}
           </devtools-button>
@@ -359,8 +367,8 @@ function renderGdpSectionIfNeeded({
       `}
     </div>
   `;
+  // clang-format on
 }
-// clang-format on
 
 customElements.define('devtools-sync-section', SyncSection);
 

package/front_end/panels/sources/AiCodeCompletionPlugin.ts

@@ -18,6 +18,7 @@ import {Plugin} from './Plugin.js';
 
 const AI_CODE_COMPLETION_CHARACTER_LIMIT = 20_000;
 const DISCLAIMER_TOOLTIP_ID = 'sources-ai-code-completion-disclaimer-tooltip';
+const SPINNER_TOOLTIP_ID = 'sources-ai-code-completion-spinner-tooltip';
 const CITATIONS_TOOLTIP_ID = 'sources-ai-code-completion-citations-tooltip';
 
 export class AiCodeCompletionPlugin extends Plugin {
@@ -212,8 +213,11 @@ export class AiCodeCompletionPlugin extends Plugin {
       this.#teaser = undefined;
     }
     if (!this.#aiCodeCompletion) {
+      const contextFlavor = this.uiSourceCode.url().startsWith('snippet://') ?
+          AiCodeCompletion.AiCodeCompletion.ContextFlavor.CONSOLE :
+          AiCodeCompletion.AiCodeCompletion.ContextFlavor.SOURCES;
       this.#aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion(
-          {aidaClient: this.#aidaClient}, this.#editor, AiCodeCompletion.AiCodeCompletion.Panel.SOURCES);
+          {aidaClient: this.#aidaClient}, this.#editor, contextFlavor);
       this.#aiCodeCompletion.addEventListener(
           AiCodeCompletion.AiCodeCompletion.Events.REQUEST_TRIGGERED, this.#onAiRequestTriggered, this);
       this.#aiCodeCompletion.addEventListener(
@@ -229,6 +233,7 @@ export class AiCodeCompletionPlugin extends Plugin {
     }
     this.#aiCodeCompletionDisclaimer = new PanelCommon.AiCodeCompletionDisclaimer();
     this.#aiCodeCompletionDisclaimer.disclaimerTooltipId = DISCLAIMER_TOOLTIP_ID;
+    this.#aiCodeCompletionDisclaimer.spinnerTooltipId = SPINNER_TOOLTIP_ID;
     this.#aiCodeCompletionDisclaimer.show(this.#aiCodeCompletionDisclaimerContainer, undefined, true);
   }
 

package/front_end/panels/sources/SourcesPanel.ts

@@ -38,6 +38,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 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 Breakpoints from '../../models/breakpoints/breakpoints.js';
 import * as Extensions from '../../models/extensions/extensions.js';
@@ -484,6 +485,8 @@ export class SourcesPanel extends UI.Panel.Panel implements
     } else if (!this.#paused) {
       UI.Context.Context.instance().setFlavor(SDK.Target.Target, debuggerModel.target());
     }
+
+    Badges.UserBadges.instance().recordAction(Badges.BadgeAction.DEBUGGER_PAUSED);
   }
 
   private debugInfoAttached(event: Common.EventTarget.EventTargetEvent<SDK.Script.Script>): void {

package/front_end/panels/timeline/AppenderUtils.ts

@@ -4,7 +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 type * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
+import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import type {VisualLoggingTrackName} from './CompatibilityTracksAppender.js';
@@ -36,7 +36,7 @@ export function buildGroupStyle(extra?: Partial<PerfUI.FlameChart.GroupStyle>):
   const defaultGroupStyle: PerfUI.FlameChart.GroupStyle = {
     padding: 4,
     height: 17,
-    collapsible: true,
+    collapsible: PerfUI.FlameChart.GroupCollapsibleState.ALWAYS,
     color: ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-on-surface'),
     backgroundColor: ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-cdt-base-container'),
     nestingLevel: 0,

package/front_end/panels/timeline/ExtensionTrackAppender.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 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 * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import {buildGroupStyle, buildTrackHeader, getDurationString} from './AppenderUtils.js';
@@ -42,7 +43,8 @@ export class ExtensionTrackAppender implements TrackAppender {
     if (totalEntryCount === 0) {
       return trackStartLevel;
     }
-    this.#appendTopLevelHeaderAtLevel(trackStartLevel, expanded);
+    const compact = !this.#extensionTopLevelTrack.isTrackGroup && totalEntryCount < 2;
+    this.#appendTopLevelHeaderAtLevel(trackStartLevel, compact, expanded);
     return this.#appendExtensionTrackData(trackStartLevel);
   }
 
@@ -52,8 +54,10 @@ export class ExtensionTrackAppender implements TrackAppender {
    * header corresponds to the track name, in the latter it corresponds
    * to the track group name.
    */
-  #appendTopLevelHeaderAtLevel(currentLevel: number, expanded?: boolean): void {
-    const style = buildGroupStyle({shareHeaderLine: false, collapsible: true});
+  #appendTopLevelHeaderAtLevel(currentLevel: number, compact: boolean, expanded?: boolean): void {
+    const style = compact ?
+        buildGroupStyle({shareHeaderLine: true, collapsible: PerfUI.FlameChart.GroupCollapsibleState.NEVER}) :
+        buildGroupStyle({shareHeaderLine: false, collapsible: PerfUI.FlameChart.GroupCollapsibleState.ALWAYS});
     const headerTitle = this.#extensionTopLevelTrack.name;
     const jsLogContext = this.#extensionTopLevelTrack.name === '🅰️ Angular' ? VisualLoggingTrackName.ANGULAR_TRACK :
                                                                              VisualLoggingTrackName.EXTENSION;
@@ -69,7 +73,12 @@ export class ExtensionTrackAppender implements TrackAppender {
    * corresponds to the track name itself, instead of the track name.
    */
   #appendSecondLevelHeader(trackStartLevel: number, headerTitle: string): void {
-    const style = buildGroupStyle({shareHeaderLine: false, padding: 2, nestingLevel: 1, collapsible: true});
+    const style = buildGroupStyle({
+      shareHeaderLine: false,
+      padding: 2,
+      nestingLevel: 1,
+      collapsible: PerfUI.FlameChart.GroupCollapsibleState.ALWAYS
+    });
     const group = buildTrackHeader(
         VisualLoggingTrackName.EXTENSION, trackStartLevel, headerTitle, style,
         /* selectable= */ true);

package/front_end/panels/timeline/GPUTrackAppender.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 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 * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import {buildGroupStyle, buildTrackHeader} from './AppenderUtils.js';
@@ -63,7 +64,7 @@ export class GPUTrackAppender implements TrackAppender {
    * @param expanded whether the track should be rendered expanded.
    */
   #appendTrackHeaderAtLevel(currentLevel: number, expanded?: boolean): void {
-    const style = buildGroupStyle({collapsible: false});
+    const style = buildGroupStyle({collapsible: PerfUI.FlameChart.GroupCollapsibleState.NEVER});
     const group = buildTrackHeader(
         VisualLoggingTrackName.GPU, currentLevel, i18nString(UIStrings.gpu), style, /* selectable= */ true, expanded);
     this.#compatibilityBuilder.registerTrackForGroup(group, this);

package/front_end/panels/timeline/InteractionsTrackAppender.ts

@@ -69,7 +69,11 @@ export class InteractionsTrackAppender implements TrackAppender {
    */
   #appendTrackHeaderAtLevel(currentLevel: number, expanded?: boolean): void {
     const trackIsCollapsible = this.#parsedTrace.data.UserInteractions.interactionEvents.length > 0;
-    const style = buildGroupStyle({collapsible: trackIsCollapsible, useDecoratorsForOverview: true});
+    const style = buildGroupStyle({
+      collapsible: trackIsCollapsible ? PerfUI.FlameChart.GroupCollapsibleState.ALWAYS :
+                                        PerfUI.FlameChart.GroupCollapsibleState.NEVER,
+      useDecoratorsForOverview: true,
+    });
     const group = buildTrackHeader(
         VisualLoggingTrackName.INTERACTIONS, currentLevel, i18nString(UIStrings.interactions), style,
         /* selectable= */ true, expanded);

package/front_end/panels/timeline/LayoutShiftsTrackAppender.ts

@@ -8,6 +8,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as ComponentHelpers from '../../ui/components/helpers/helpers.js';
+import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import {buildGroupStyle, buildTrackHeader} from './AppenderUtils.js';
@@ -85,7 +86,7 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
    * appended.
    */
   #appendTrackHeaderAtLevel(currentLevel: number, expanded?: boolean): void {
-    const style = buildGroupStyle({collapsible: false});
+    const style = buildGroupStyle({collapsible: PerfUI.FlameChart.GroupCollapsibleState.NEVER});
     const group = buildTrackHeader(
         VisualLoggingTrackName.LAYOUT_SHIFTS, currentLevel, i18nString(UIStrings.layoutShifts), style,
         /* selectable= */ true, expanded);

package/front_end/panels/timeline/ThreadAppender.ts

@@ -262,7 +262,11 @@ export class ThreadAppender implements TrackAppender {
    */
   #appendTrackHeaderAtLevel(currentLevel: number): void {
     const trackIsCollapsible = this.#entries.length > 0;
-    const style = buildGroupStyle({shareHeaderLine: false, collapsible: trackIsCollapsible});
+    const style = buildGroupStyle({
+      shareHeaderLine: false,
+      collapsible: trackIsCollapsible ? PerfUI.FlameChart.GroupCollapsibleState.ALWAYS :
+                                        PerfUI.FlameChart.GroupCollapsibleState.NEVER,
+    });
     if (this.#headerNestingLevel !== null) {
       style.nestingLevel = this.#headerNestingLevel;
     }
@@ -304,7 +308,11 @@ export class ThreadAppender implements TrackAppender {
     const currentTrackCount = this.#compatibilityBuilder.getCurrentTrackCountForThreadType(threadType);
     if (currentTrackCount === 0) {
       const trackIsCollapsible = this.#entries.length > 0;
-      const headerStyle = buildGroupStyle({shareHeaderLine: false, collapsible: trackIsCollapsible});
+      const headerStyle = buildGroupStyle({
+        shareHeaderLine: false,
+        collapsible: trackIsCollapsible ? PerfUI.FlameChart.GroupCollapsibleState.ALWAYS :
+                                          PerfUI.FlameChart.GroupCollapsibleState.NEVER,
+      });
 
       // Don't set any jslogcontext (first argument) because this is a shared
       // header group. Each child will have its context set.
@@ -315,7 +323,8 @@ export class ThreadAppender implements TrackAppender {
 
     // Nesting is set to 1 because the track is appended inside the
     // header for all raster threads.
-    const titleStyle = buildGroupStyle({padding: 2, nestingLevel: 1, collapsible: false});
+    const titleStyle =
+        buildGroupStyle({padding: 2, nestingLevel: 1, collapsible: PerfUI.FlameChart.GroupCollapsibleState.NEVER});
     const rasterizerTitle = this.threadType === Trace.Handlers.Threads.ThreadType.RASTERIZER ?
         i18nString(UIStrings.rasterizerThreadS, {PH1: currentTrackCount + 1}) :
         i18nString(UIStrings.threadPoolThreadS, {PH1: currentTrackCount + 1});

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -152,8 +152,12 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     [this.droppedFramePattern, this.partialFramePattern] = this.preparePatternCanvas();
 
     this.framesGroupStyle = this.buildGroupStyle({useFirstLineForOverview: true});
-    this.screenshotsGroupStyle =
-        this.buildGroupStyle({useFirstLineForOverview: true, nestingLevel: 1, collapsible: false, itemsHeight: 150});
+    this.screenshotsGroupStyle = this.buildGroupStyle({
+      useFirstLineForOverview: true,
+      nestingLevel: 1,
+      collapsible: PerfUI.FlameChart.GroupCollapsibleState.NEVER,
+      itemsHeight: 150
+    });
 
     ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
       const headers = [
@@ -427,7 +431,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     const defaultGroupStyle = {
       padding: 4,
       height: 17,
-      collapsible: true,
+      collapsible: PerfUI.FlameChart.GroupCollapsibleState.ALWAYS,
       color: ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-on-surface'),
       backgroundColor: ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-cdt-base-container'),
       nestingLevel: 0,
@@ -774,7 +778,8 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       return;
     }
 
-    this.framesGroupStyle.collapsible = hasScreenshots;
+    this.framesGroupStyle.collapsible =
+        hasScreenshots ? PerfUI.FlameChart.GroupCollapsibleState.ALWAYS : PerfUI.FlameChart.GroupCollapsibleState.NEVER;
     const expanded = Root.Runtime.Runtime.queryParam('flamechart-force-expand') === 'frames';
 
     this.appendHeader(i18nString(UIStrings.frames), this.framesGroupStyle, false /* selectable */, expanded);

package/front_end/panels/timeline/TimelinePanel.ts

@@ -2242,7 +2242,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     }
 
     UI.Context.Context.instance().setFlavor(
-        AiAssistanceModel.AgentFocus, AiAssistanceModel.AgentFocus.full(parsedTrace));
+        AiAssistanceModel.AgentFocus, AiAssistanceModel.AgentFocus.fromParsedTrace(parsedTrace));
   }
 
   #onAnnotationModifiedEvent(e: Event): void {
@@ -3079,7 +3079,8 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       for (const modelName in insightsForNav.model) {
         const model = modelName as keyof Trace.Insights.Types.InsightModelsType;
         const insight = insightsForNav.model[model];
-        const formatter = new AiAssistanceModel.PerformanceInsightFormatter(parsedTrace, insight);
+        const focus = AiAssistanceModel.AgentFocus.fromParsedTrace(parsedTrace);
+        const formatter = new AiAssistanceModel.PerformanceInsightFormatter(focus, insight);
         if (!formatter.insightIsSupported()) {
           // Not all Insights are integrated with "Ask AI" yet, let's avoid
           // filling up the response with those ones because there will be no

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