chrome-devtools-frontend 1.0.1626437 → 1.0.1628368

package/front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -1330,17 +1330,18 @@ function renderNetworkRequestPreview(networkRequest: NonNullable<DomTreeAiWidget
   const resourceType = Common.ResourceType.resourceTypes[networkRequest.resourceType];
   const {iconName, color} = PanelUtils.iconDataForResourceType(resourceType);
 
+  const imageUrl = networkRequest.imageContent?.asImagePreviewUrl() ?? networkRequest.url;
+
   return html`
     <div class="network-request-preview">
       <div class="network-request-header">
         <div class="network-request-icon">
           ${
-      resourceType.isImage() ? html`<img src=${networkRequest.imageUrl ?? networkRequest.url} alt=${filename} />` :
+      resourceType.isImage() ? html`<img src=${imageUrl} alt=${filename} />` :
                                html`<devtools-icon name=${iconName} style=${Lit.Directives.styleMap({
                                  color: color ?? ''
                                })}></devtools-icon>`}
-        </div>
-        <div class="network-request-details">
+        </div>        <div class="network-request-details">
           <div class="network-request-name" title=${networkRequest.url}>${filename}</div>
           <div class="network-request-size">${size}</div>
         </div>

package/front_end/panels/common/AiCodeCompletionTeaser.ts

@@ -9,6 +9,7 @@ import * as Host from '../../core/host/host.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 AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
 import * as AiCodeGeneration from '../../models/ai_code_generation/ai_code_generation.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -163,6 +164,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
 
 interface AiCodeCompletionTeaserConfig {
   onDetach: () => void;
+  panel?: AiCodeCompletion.AiCodeCompletion.ContextFlavor;
 }
 
 export class AiCodeCompletionTeaser extends UI.Widget.Widget {
@@ -172,6 +174,7 @@ export class AiCodeCompletionTeaser extends UI.Widget.Widget {
   #boundOnAidaAvailabilityChange: () => Promise<void>;
   #boundOnAiCodeCompletionSettingChanged: () => void;
   #onDetach: () => void;
+  #panel?: AiCodeCompletion.AiCodeCompletion.ContextFlavor;
 
   // Whether the user completed first run experience dialog or not.
   #aiCodeCompletionFreCompletedSetting =
@@ -186,6 +189,7 @@ export class AiCodeCompletionTeaser extends UI.Widget.Widget {
     super();
     this.markAsExternallyManaged();
     this.#onDetach = config.onDetach;
+    this.#panel = config.panel;
     this.#view = view ?? DEFAULT_VIEW;
     this.#boundOnAidaAvailabilityChange = this.#onAidaAvailabilityChange.bind(this);
     this.#boundOnAiCodeCompletionSettingChanged = this.#onAiCodeCompletionSettingChanged.bind(this);
@@ -283,6 +287,11 @@ export class AiCodeCompletionTeaser extends UI.Widget.Widget {
 
     if (result) {
       this.#aiCodeCompletionFreCompletedSetting.set(true);
+      if (this.#panel === AiCodeCompletion.AiCodeCompletion.ContextFlavor.CONSOLE) {
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionFreCompletedFromConsole);
+      } else if (this.#panel === AiCodeCompletion.AiCodeCompletion.ContextFlavor.SOURCES) {
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionFreCompletedFromSources);
+      }
       this.detach();
     } else {
       this.requestUpdate();

package/front_end/panels/common/common.ts

@@ -102,7 +102,7 @@ export {FreDialog} from './FreDialog.js';
 export {GdpSignUpDialog} from './GdpSignUpDialog.js';
 export {GeminiRebrandPromoDialog} from './GeminiRebrandPromoDialog.js';
 export {AiCodeCompletionDisclaimer} from './AiCodeCompletionDisclaimer.js';
-export {AiCodeCompletionSummaryToolbar} from './AiCodeCompletionSummaryToolbar.js';
+export * as AiCodeCompletionSummaryToolbar from './AiCodeCompletionSummaryToolbar.js';
 export * from './BadgeNotification.js';
 export * as ExtensionPanel from './ExtensionPanel.js';
 export * as ExtensionServer from './ExtensionServer.js';

package/front_end/panels/console/ConsoleView.ts

@@ -351,7 +351,7 @@ export class ConsoleView extends UI.Widget.VBox implements
   #allCollapsed = false;
   aiCodeCompletionConfig?: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig;
   private aiCodeCompletionSummaryToolbarContainer?: HTMLElement;
-  private aiCodeCompletionSummaryToolbar?: AiCodeCompletionSummaryToolbar;
+  private aiCodeCompletionSummaryToolbar?: AiCodeCompletionSummaryToolbar.AiCodeCompletionSummaryToolbar;
 
   constructor(viewportThrottlerTimeout: number) {
     super();
@@ -667,7 +667,7 @@ export class ConsoleView extends UI.Widget.VBox implements
     if (this.aiCodeCompletionSummaryToolbar) {
       return;
     }
-    this.aiCodeCompletionSummaryToolbar = new AiCodeCompletionSummaryToolbar({
+    this.aiCodeCompletionSummaryToolbar = new AiCodeCompletionSummaryToolbar.AiCodeCompletionSummaryToolbar({
       citationsTooltipId: CITATIONS_TOOLTIP_ID,
       disclaimerTooltipId: DISCLAIMER_TOOLTIP_ID,
       spinnerTooltipId: SPINNER_TOOLTIP_ID,

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -1021,7 +1021,7 @@ export class StylePropertiesSection {
     const containerQueryElement = new ElementsComponents.CSSQuery.CSSQuery();
     containerQueryElement.data = {
       queryPrefix: '@container',
-      queryName: containerQuery.name,
+      queryName: containerQuery.textIsConditionText ? undefined : containerQuery.name,
       queryText: containerQuery.text,
       onQueryTextClick,
       jslogContext: 'container-query',
@@ -1596,7 +1596,11 @@ export class StylePropertiesSection {
       const range = query.range as TextUtils.TextRange.TextRange;
       let success = false;
       if (query instanceof SDK.CSSContainerQuery.CSSContainerQuery) {
-        success = await cssModel.setContainerQueryText(query.styleSheetId, range, newContent);
+        if (query.textIsConditionText) {
+          success = await cssModel.setContainerQueryConditionText(query.styleSheetId, range, newContent);
+        } else {
+          success = await cssModel.setContainerQueryText(query.styleSheetId, range, newContent);
+        }
       } else if (query instanceof SDK.CSSSupports.CSSSupports) {
         success = await cssModel.setSupportsText(query.styleSheetId, range, newContent);
       } else if (query instanceof SDK.CSSScope.CSSScope) {

package/front_end/panels/elements/StylesAiCodeCompletionProvider.ts

@@ -166,7 +166,7 @@ export class StylesAiCodeCompletionProvider {
   }|null> {
     this.#aiCodeCompletionConfig?.onRequestTriggered();
     // Registering AiCodeCompletionRequestTriggered metric even if the request is served from cache
-    Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionRequestTriggered);
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionRequestTriggeredFromStyles);
 
     try {
       const completionResponse = await this.#aiCodeCompletion?.completeCode(

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -229,7 +229,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   aiCodeCompletionConfig?: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig;
   aiCodeCompletionProvider?: StylesAiCodeCompletionProvider.StylesAiCodeCompletionProvider;
   #aiCodeCompletionSummaryToolbarContainer?: HTMLElement;
-  #aiCodeCompletionSummaryToolbar?: PanelsCommon.AiCodeCompletionSummaryToolbar;
+  #aiCodeCompletionSummaryToolbar?: PanelsCommon.AiCodeCompletionSummaryToolbar.AiCodeCompletionSummaryToolbar;
 
   constructor(computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel) {
     super(computedStyleModel, {delegatesFocus: true, useShadowDom: true, classes: ['flex-none']});
@@ -1581,12 +1581,13 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     if (this.#aiCodeCompletionSummaryToolbar) {
       return;
     }
-    this.#aiCodeCompletionSummaryToolbar = new PanelsCommon.AiCodeCompletionSummaryToolbar({
-      citationsTooltipId: CITATIONS_TOOLTIP_ID,
-      disclaimerTooltipId: DISCLAIMER_TOOLTIP_ID,
-      spinnerTooltipId: SPINNER_TOOLTIP_ID,
-      panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.STYLES,
-    });
+    this.#aiCodeCompletionSummaryToolbar =
+        new PanelsCommon.AiCodeCompletionSummaryToolbar.AiCodeCompletionSummaryToolbar({
+          citationsTooltipId: CITATIONS_TOOLTIP_ID,
+          disclaimerTooltipId: DISCLAIMER_TOOLTIP_ID,
+          spinnerTooltipId: SPINNER_TOOLTIP_ID,
+          panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.STYLES,
+        });
     const containingPane = this.contentElement.enclosingNodeOrSelfWithClass('style-panes-wrapper') as HTMLElement;
     this.#aiCodeCompletionSummaryToolbarContainer =
         containingPane.createChild('div', 'ai-code-completion-summary-toolbar-container');

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -188,11 +188,11 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/emulation/DeviceModeToolbar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {ifDefined, styleMap} = Directives;
+const {ifDefined, live, styleMap} = Directives;
 const {widget} = UI.Widget;
 const {bindToSetting} = UI.UIUtils;
 
-export class DeviceModeToolbar {
+export class DeviceModeToolbar extends UI.Widget.Widget {
   private model: EmulationModel.DeviceModeModel.DeviceModeModel;
   private readonly showMediaInspectorSetting: Common.Settings.Setting<boolean>;
   private readonly showRulersSetting: Common.Settings.Setting<boolean>;
@@ -201,7 +201,6 @@ export class DeviceModeToolbar {
   private readonly showUserAgentTypeSetting: Common.Settings.Setting<boolean>;
   private autoAdjustScaleSetting: Common.Settings.Setting<boolean>;
   private readonly lastMode: Map<EmulationModel.EmulatedDevices.EmulatedDevice, EmulationModel.EmulatedDevices.Mode>;
-  readonly #element: HTMLDivElement;
   private readonly emulatedDevicesList: EmulationModel.EmulatedDevices.EmulatedDevicesList;
   private readonly persistenceSetting: Common.Settings.Setting<{device: string, orientation: string, mode: string}>;
   private mainToolbar: UI.Toolbar.Toolbar;
@@ -213,6 +212,7 @@ export class DeviceModeToolbar {
       model: EmulationModel.DeviceModeModel.DeviceModeModel,
       showMediaInspectorSetting: Common.Settings.Setting<boolean>,
       showRulersSetting: Common.Settings.Setting<boolean>) {
+    super();
     this.model = model;
     this.showMediaInspectorSetting = showMediaInspectorSetting;
     this.showRulersSetting = showRulersSetting;
@@ -220,21 +220,19 @@ export class DeviceModeToolbar {
     this.deviceOutlineSetting = this.model.deviceOutlineSetting();
     this.showDeviceScaleFactorSetting =
         Common.Settings.Settings.instance().createSetting('emulation.show-device-scale-factor', false);
-    this.showDeviceScaleFactorSetting.addChangeListener(this.update, this);
+    this.showDeviceScaleFactorSetting.addChangeListener(this.requestUpdate, this);
 
     this.showUserAgentTypeSetting =
         Common.Settings.Settings.instance().createSetting('emulation.show-user-agent-type', false);
-    this.showUserAgentTypeSetting.addChangeListener(this.update, this);
+    this.showUserAgentTypeSetting.addChangeListener(this.requestUpdate, this);
 
     this.autoAdjustScaleSetting =
         Common.Settings.Settings.instance().createSetting('emulation.auto-adjust-scale', true);
 
     this.lastMode = new Map();
 
-    this.#element = document.createElement('div');
-    this.#element.classList.add('device-mode-toolbar');
-    this.#element.setAttribute('jslog', `${VisualLogging.toolbar('device-mode').track({resize: true})}`);
-
+    this.contentElement.classList.add('device-mode-toolbar');
+    this.contentElement.setAttribute('jslog', VisualLogging.toolbar('device-mode').track({resize: true}).toString());
     this.mainToolbar = this.createMainToolbar();
     this.optionsToolbar = this.createOptionsToolbar();
 
@@ -247,13 +245,13 @@ export class DeviceModeToolbar {
     this.persistenceSetting = Common.Settings.Settings.instance().createSetting(
         'emulation.device-mode-value', {device: '', orientation: '', mode: ''});
 
-    this.model.toolbarControlsEnabledSetting().addChangeListener(this.update, this);
-    this.model.scaleSetting().addChangeListener(this.update, this);
-    this.model.uaSetting().addChangeListener(this.update, this);
-    this.model.deviceScaleFactorSetting().addChangeListener(this.update, this);
-    this.model.addEventListener(EmulationModel.DeviceModeModel.Events.UPDATED, this.update, this);
+    this.model.toolbarControlsEnabledSetting().addChangeListener(this.requestUpdate, this);
+    this.model.scaleSetting().addChangeListener(this.requestUpdate, this);
+    this.model.uaSetting().addChangeListener(this.requestUpdate, this);
+    this.model.deviceScaleFactorSetting().addChangeListener(this.requestUpdate, this);
+    this.model.addEventListener(EmulationModel.DeviceModeModel.Events.UPDATED, this.requestUpdate, this);
 
-    this.update();
+    this.requestUpdate();
   }
 
   private createEmptyToolbarElement(): HTMLDivElement {
@@ -292,7 +290,7 @@ export class DeviceModeToolbar {
   }
 
   private createMainToolbar(): UI.Toolbar.Toolbar {
-    const mainToolbar = this.#element.createChild('devtools-toolbar', 'main-toolbar');
+    const mainToolbar = this.contentElement.createChild('devtools-toolbar', 'main-toolbar');
     return mainToolbar as UI.Toolbar.Toolbar;
   }
 
@@ -359,7 +357,7 @@ export class DeviceModeToolbar {
                 title=${i18nString(UIStrings.deviceType)}
                 aria-label=${i18nString(UIStrings.deviceType)}
                 @change=${this.onDeviceChange.bind(this)}
-                .value=${selectedDeviceOption === deviceModeOptions.responsive ? 'Responsive' : (selectedDeviceOption?.title || 'Responsive')}
+                .value=${live(selectedDeviceOption === deviceModeOptions.responsive ? 'Responsive' : (selectedDeviceOption?.title || 'Responsive'))}
                 jslog=${VisualLogging.dropDown().track({change: true}).context('device')}>
           <option value="Responsive" ?selected=${deviceModeOptions.responsive.selected} jslog=${VisualLogging.item(deviceModeOptions.responsive.jslogContext).track({click: true})}>
             ${deviceModeOptions.responsive.title}
@@ -485,7 +483,7 @@ export class DeviceModeToolbar {
   }
 
   private createOptionsToolbar(): UI.Toolbar.Toolbar {
-    const optionsToolbar = this.#element.createChild('devtools-toolbar', 'device-mode-toolbar-options');
+    const optionsToolbar = this.contentElement.createChild('devtools-toolbar', 'device-mode-toolbar-options');
     optionsToolbar.wrappable = true;
     optionsToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
     const moreOptionsButton = new UI.Toolbar.ToolbarMenuButton(
@@ -737,7 +735,7 @@ export class DeviceModeToolbar {
     const value = (event.target as HTMLSelectElement).value;
     if (value === 'Edit') {
       this.emulatedDevicesList.revealCustomSetting();
-      this.renderMainToolbar();
+      this.requestUpdate();
     } else if (value === 'Responsive') {
       this.switchToResponsive();
     } else {
@@ -751,7 +749,7 @@ export class DeviceModeToolbar {
   }
 
   private deviceListChanged(): void {
-    this.renderMainToolbar();
+    this.requestUpdate();
     const device = this.model.device();
     if (!device) {
       return;
@@ -875,11 +873,7 @@ export class DeviceModeToolbar {
     return `${(this.model.scale() * 100).toFixed(0)}`;
   }
 
-  element(): Element {
-    return this.#element;
-  }
-
-  update(): void {
+  override performUpdate(): void {
     const enabled = this.model.toolbarControlsEnabledSetting().get();
     this.mainToolbar.setEnabled(enabled);
     this.optionsToolbar.setEnabled(enabled);
@@ -942,7 +936,7 @@ export class DeviceModeToolbar {
       this.#measuringElement.style.pointerEvents = 'none';
       const dummyOption = document.createElement('option');
       this.#measuringElement.appendChild(dummyOption);
-      this.#element.appendChild(this.#measuringElement);
+      this.contentElement.appendChild(this.#measuringElement);
     }
 
     const dummyOption = this.#measuringElement.options[0];

package/front_end/panels/emulation/DeviceModeView.ts

@@ -124,7 +124,7 @@ export class DeviceModeView extends UI.Widget.VBox {
 
   private createUI(): void {
     this.toolbar = new DeviceModeToolbar(this.model, this.showMediaInspectorSetting, this.showRulersSetting);
-    this.contentElement.appendChild(this.toolbar.element());
+    this.toolbar.show(this.contentElement);
     this.contentClip = this.contentElement.createChild('div', 'device-mode-content-clip vbox');
     this.responsivePresetsContainer = this.contentClip.createChild('div', 'device-mode-presets-container');
     this.responsivePresetsContainer.setAttribute('jslog', `${VisualLogging.responsivePresets()}`);
@@ -358,7 +358,7 @@ export class DeviceModeView extends UI.Widget.VBox {
       this.cachedScale = this.model.scale();
     }
 
-    this.toolbar.update();
+    this.toolbar.requestUpdate();
     this.loadImage(this.screenImage, this.model.screenImage());
     this.loadImage(this.outlineImage, this.model.outlineImage());
     this.mediaInspector.setAxisTransform(this.model.scale());

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -84,6 +84,15 @@ const UIStrings = {
    * @description Tooltip text of checkbox to include running the Search Engine Optimization audits in Lighthouse
    */
   isThisPageOptimizedForSearch: 'Is this page optimized for search engine results ranking',
+  /**
+   * @description Text of checkbox to include running the Agentic Browsing audits in Lighthouse
+   */
+  agenticBrowsing: 'Agentic browsing',
+  /**
+   * @description Tooltip text of checkbox to include running the Agentic Browsing audits in Lighthouse
+   */
+  agenticBrowsingDescription:
+      'These checks ensure high-quality, browsable websites for AI agents and validate the correctness of WebMCP integrations. This category is still under development and subject to change.',
   /**
    * @description ARIA label for a radio button input to emulate mobile device behavior when running audits in Lighthouse.
    */
@@ -749,6 +758,15 @@ export function getPresets(): LighthouseModel.RunTypes.Preset[] {
         supportedModes: ['navigation', 'snapshot'],
         userMetric: Host.UserMetrics.LighthouseCategoryUsed.SEO,
       },
+      {
+        setting: Common.Settings.Settings.instance().createSetting(
+            'lighthouse.cat-agentic-browsing', false, Common.Settings.SettingStorageType.SYNCED),
+        configID: 'agentic-browsing',
+        title: i18nLazyString(UIStrings.agenticBrowsing),
+        description: i18nLazyString(UIStrings.agenticBrowsingDescription),
+        supportedModes: ['navigation', 'snapshot'],
+        userMetric: Host.UserMetrics.LighthouseCategoryUsed.AGENTIC_BROWSING,
+      },
     ];
   }
   return presets;

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -269,11 +269,13 @@ export class HeapSnapshotGridNode extends
       const value = this.data[columnId];
       const percentColumn = columnId + '-percent';
       const percent = this.data[percentColumn];
+      const tooltipColumn = `${columnId}-tooltip`;
+      const tooltip = this.data[tooltipColumn];
       if (percent) {
         render(
             html`
           <div class="profile-multiple-values">
-            <span aria-hidden="true">${value}</span>
+            <span aria-hidden="true" title=${Directives.ifDefined(tooltip)}>${value}</span>
             <span class="percent-column" aria-hidden="true">${percent}</span>
           </div>`,
             cell);
@@ -283,7 +285,7 @@ export class HeapSnapshotGridNode extends
         render(
             html`
           <div>
-            <span>${value}</span>
+            <span title=${Directives.ifDefined(tooltip)}>${value}</span>
           </div>`,
             cell);
       }
@@ -560,6 +562,8 @@ export abstract class HeapSnapshotGenericObjectNode extends HeapSnapshotGridNode
       retainedSize: i18n.ByteUtilities.formatBytesToKb(this.retainedSize),
       'shallowSize-percent': this.toPercentString(shallowSizePercent),
       'retainedSize-percent': this.toPercentString(retainedSizePercent),
+      'shallowSize-tooltip': i18n.ByteUtilities.bytesToString(this.shallowSize),
+      'retainedSize-tooltip': i18n.ByteUtilities.bytesToString(this.retainedSize),
     };
   }
 
@@ -580,8 +584,7 @@ export abstract class HeapSnapshotGenericObjectNode extends HeapSnapshotGridNode
   }
 
   override createCell(columnId: string): HTMLElement {
-    const cell = columnId !== 'object' ? this.createValueCell(columnId) : this.createObjectCell();
-    return cell;
+    return columnId !== 'object' ? this.createValueCell(columnId) : this.createObjectCell();
   }
 
   createObjectCell(): HTMLElement {
@@ -1132,6 +1135,8 @@ export class HeapSnapshotConstructorNode extends HeapSnapshotGridNode {
       retainedSize: i18n.ByteUtilities.formatBytesToKb(this.retainedSize),
       'shallowSize-percent': this.toPercentString(shallowSizePercent),
       'retainedSize-percent': this.toPercentString(retainedSizePercent),
+      'shallowSize-tooltip': i18n.ByteUtilities.bytesToString(this.shallowSize),
+      'retainedSize-tooltip': i18n.ByteUtilities.bytesToString(this.retainedSize),
     };
   }
 

package/front_end/panels/profiler/profiler-meta.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -16,22 +15,6 @@ const UIStrings = {
    * @description Title for the profiler tab
    */
   memory: 'Memory',
-  /**
-   * @description Title of the 'Live Heap Profile' tool in the bottom drawer
-   */
-  liveHeapProfile: 'Live Heap Profile',
-  /**
-   * @description Title of an action under the Performance category that can be invoked through the Command Menu
-   */
-  startRecordingHeapAllocations: 'Start recording heap allocations',
-  /**
-   * @description Title of an action under the Performance category that can be invoked through the Command Menu
-   */
-  stopRecordingHeapAllocations: 'Stop recording heap allocations',
-  /**
-   * @description Title of an action in the live heap profile tool to start with reload
-   */
-  startRecordingHeapAllocationsAndReload: 'Start recording heap allocations and reload the page',
   /**
    * @description Text in the Shortcuts page to explain a keyboard shortcut (start/stop recording performance)
    */
@@ -40,10 +23,6 @@ const UIStrings = {
    * @description Command for showing the profiler tab
    */
   showMemory: 'Show Memory',
-  /**
-   * @description Command for showing the 'Live Heap Profile' tool in the bottom drawer
-   */
-  showLiveHeapProfile: 'Show Live Heap Profile',
   /**
    * @description Tooltip text that appears when hovering over the largeicon clear button in the Profiles Panel of a profiler tool
    */
@@ -90,56 +69,6 @@ UI.ViewManager.registerViewExtension({
   },
 });
 
-UI.ViewManager.registerViewExtension({
-  location: UI.ViewManager.ViewLocationValues.DRAWER_VIEW,
-  id: 'live-heap-profile',
-  commandPrompt: i18nLazyString(UIStrings.showLiveHeapProfile),
-  title: i18nLazyString(UIStrings.liveHeapProfile),
-  persistence: UI.ViewManager.ViewPersistence.CLOSEABLE,
-  order: 100,
-  async loadView() {
-    const Profiler = await loadProfilerModule();
-    return Profiler.LiveHeapProfileView.LiveHeapProfileView.instance();
-  },
-  experiment: Root.ExperimentNames.ExperimentName.LIVE_HEAP_PROFILE,
-});
-
-UI.ActionRegistration.registerActionExtension({
-  actionId: 'live-heap-profile.toggle-recording',
-  iconClass: UI.ActionRegistration.IconClass.START_RECORDING,
-  toggleable: true,
-  toggledIconClass: UI.ActionRegistration.IconClass.STOP_RECORDING,
-  toggleWithRedColor: true,
-  async loadActionDelegate() {
-    const Profiler = await loadProfilerModule();
-    return new Profiler.LiveHeapProfileView.ActionDelegate();
-  },
-  category: UI.ActionRegistration.ActionCategory.MEMORY,
-  experiment: Root.ExperimentNames.ExperimentName.LIVE_HEAP_PROFILE,
-  options: [
-    {
-      value: true,
-      title: i18nLazyString(UIStrings.startRecordingHeapAllocations),
-    },
-    {
-      value: false,
-      title: i18nLazyString(UIStrings.stopRecordingHeapAllocations),
-    },
-  ],
-});
-
-UI.ActionRegistration.registerActionExtension({
-  actionId: 'live-heap-profile.start-with-reload',
-  iconClass: UI.ActionRegistration.IconClass.REFRESH,
-  async loadActionDelegate() {
-    const Profiler = await loadProfilerModule();
-    return new Profiler.LiveHeapProfileView.ActionDelegate();
-  },
-  category: UI.ActionRegistration.ActionCategory.MEMORY,
-  experiment: Root.ExperimentNames.ExperimentName.LIVE_HEAP_PROFILE,
-  title: i18nLazyString(UIStrings.startRecordingHeapAllocationsAndReload),
-});
-
 UI.ActionRegistration.registerActionExtension({
   actionId: 'profiler.heap-toggle-recording',
   category: UI.ActionRegistration.ActionCategory.MEMORY,

package/front_end/panels/profiler/profiler.ts

@@ -10,7 +10,6 @@ import * as HeapSnapshotGridNodes from './HeapSnapshotGridNodes.js';
 import * as HeapSnapshotView from './HeapSnapshotView.js';
 import * as HeapTimelineOverview from './HeapTimelineOverview.js';
 import * as IsolateSelector from './IsolateSelector.js';
-import * as LiveHeapProfileView from './LiveHeapProfileView.js';
 import * as ProfileDataGrid from './ProfileDataGrid.js';
 import * as ProfileFlameChart from './ProfileFlameChartDataProvider.js';
 import * as ProfileHeader from './ProfileHeader.js';
@@ -30,7 +29,6 @@ export {
   HeapSnapshotView,
   HeapTimelineOverview,
   IsolateSelector,
-  LiveHeapProfileView,
   ProfileDataGrid,
   ProfileFlameChart,
   ProfileHeader,

package/front_end/panels/sources/AiCodeCompletionPlugin.ts

@@ -23,7 +23,7 @@ export class AiCodeCompletionPlugin extends Plugin {
   #aiCodeCompletionDisclaimer?: PanelCommon.AiCodeCompletionDisclaimer;
   #aiCodeCompletionDisclaimerContainer = document.createElement('div');
   #aiCodeCompletionDisclaimerToolbarItem = new UI.Toolbar.ToolbarItem(this.#aiCodeCompletionDisclaimerContainer);
-  #aiCodeCompletionCitationsToolbar?: PanelCommon.AiCodeCompletionSummaryToolbar;
+  #aiCodeCompletionCitationsToolbar?: PanelCommon.AiCodeCompletionSummaryToolbar.AiCodeCompletionSummaryToolbar;
   #aiCodeCompletionCitationsToolbarContainer = document.createElement('div');
   #aiCodeCompletionCitationsToolbarAttached = false;
   aiCodeCompletionConfig: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig;
@@ -113,11 +113,12 @@ export class AiCodeCompletionPlugin extends Plugin {
     if (this.#aiCodeCompletionCitationsToolbar) {
       return;
     }
-    this.#aiCodeCompletionCitationsToolbar = new PanelCommon.AiCodeCompletionSummaryToolbar({
-      citationsTooltipId: CITATIONS_TOOLTIP_ID,
-      hasTopBorder: true,
-      panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.SOURCES
-    });
+    this.#aiCodeCompletionCitationsToolbar =
+        new PanelCommon.AiCodeCompletionSummaryToolbar.AiCodeCompletionSummaryToolbar({
+          citationsTooltipId: CITATIONS_TOOLTIP_ID,
+          hasTopBorder: true,
+          panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.SOURCES
+        });
     this.#aiCodeCompletionCitationsToolbar.show(this.#aiCodeCompletionCitationsToolbarContainer, undefined, true);
   }