chrome-devtools-frontend 1.0.1622369 → 1.0.1624583

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -907,8 +907,7 @@ export class StylePropertiesSection {
       return;
     }
     const sourceTreeElement = this.closestPropertyForEditing(this.#activeAiSuggestion.cssProperty.index);
-    if (!(sourceTreeElement instanceof StylePropertyTreeElement) ||
-        sourceTreeElement.property !== this.#activeAiSuggestion.cssProperty) {
+    if (!(sourceTreeElement instanceof StylePropertyTreeElement)) {
       return;
     }
     return sourceTreeElement;

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -3515,7 +3515,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     if (this.prompt) {
       this.prompt.detach();
       this.prompt = null;
-      this.#clearGhostTextInValue();
+      this.section().activeAiSuggestion = undefined;
     }
   }
 
@@ -3637,12 +3637,12 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     }
     const isEditingName = UI.UIUtils.isBeingEdited(this.nameElement);
     if (isEditingName) {
-      this.prompt.applySuggestion({text: activeAiSuggestion.name}, true);
+      this.prompt.applySuggestion({text: activeAiSuggestion.name, disableAcceptSuggestionOnStopCharacters: true}, true);
       this.#showGhostTextInValue(activeAiSuggestion.value);
     } else {
       // Only has ghost text for one field - name part or value part
       const currentSuggestedText = isEditingName ? activeAiSuggestion.name : activeAiSuggestion.value;
-      this.prompt.applySuggestion({text: currentSuggestedText}, true);
+      this.prompt.applySuggestion({text: currentSuggestedText, disableAcceptSuggestionOnStopCharacters: true}, true);
     }
   }
 

package/front_end/panels/elements/StylesAiCodeCompletionProvider.ts

@@ -5,6 +5,7 @@
 import * as Common from '../../core/common/common.js';
 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 type * as SDK from '../../core/sdk/sdk.js';
 import * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
@@ -55,9 +56,17 @@ export class StylesAiCodeCompletionProvider {
       // early return as this means that code completion was previously setup
       return;
     }
+    // Adding '}' as a stop sequence so that suggestion is limited to properties for a given style section
+    const stopSequences = ['}'];
+    if (this.#aiCodeCompletionConfig.completionContext.stopSequences) {
+      stopSequences.push(...this.#aiCodeCompletionConfig.completionContext.stopSequences);
+    }
     this.#aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion(
-        {aidaClient: this.#aidaClient}, this.#aiCodeCompletionConfig.panel, undefined,
-        this.#aiCodeCompletionConfig.completionContext.stopSequences);
+        {
+          aidaClient: this.#aidaClient,
+          serverSideLoggingEnabled: !Root.Runtime.hostConfig.aidaAvailability?.disallowLogging
+        },
+        this.#aiCodeCompletionConfig.panel, undefined, stopSequences);
     this.#aiCodeCompletionConfig.onFeatureEnabled();
   }
 

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -135,10 +135,16 @@ const UIStrings = {
    * @description Tooltip text for the link in the sidebar pane layer separators that reveals the layer in the layer tree view.
    */
   clickToRevealLayer: 'Click to reveal layer in layer tree',
+  /**
+   * @description Text to announce that the AI suggestion was accepted.
+   * @example {color: blue;} PH1
+   */
+  aiSuggestionAccepted: '{PH1} Suggestion accepted.',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/elements/StylesSidebarPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const lockedString = i18n.i18n.lockedString;
 
 // Number of ms elapsed with no keypresses to determine is the input is finished, to announce results
 const FILTER_IDLE_PERIOD = 500;
@@ -1918,14 +1924,18 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
           return;
         }
         break;
-      case 'Enter':
+      case 'Enter': {
         if (keyboardEvent.shiftKey) {
           return;
         }
         // Accept any available autocompletions and advance to the next field.
-        this.tabKeyPressed();
+        const handled = this.tabKeyPressed();
+        if (this.aiCodeCompletionProvider && handled) {
+          event.consume(true);
+        }
         keyboardEvent.preventDefault();
         return;
+      }
       case 'Escape':
         if (this.#handleEscape(keyboardEvent)) {
           return;
@@ -2264,9 +2274,18 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
     if (!this.queryRange) {
       this.queryRange = new TextUtils.TextRange.TextRange(0, 0, 0, this.text().length);
     }
+
+    const properties = this.#getAiSuggestedProperties(args.text);
+    if (properties.length === 0) {
+      this.treeElement.section().activeAiSuggestion = undefined;
+      this.activeAiSuggestionInfo = undefined;
+      return;
+    }
+
+    const styleText = properties.map(p => `${p.name}: ${p.value};`).join(' ');
     this.treeElement.section().activeAiSuggestion = {
-      text: args.text,
-      properties: this.#getAiSuggestedProperties(args.text),
+      text: styleText,
+      properties,
       cursorPosition: args.from,
       clearCachedRequest: args.clearCachedRequest,
       cssProperty: this.treeElement.property,
@@ -2276,6 +2295,7 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
     if (args.rpcGlobalId) {
       args.onImpression(args.rpcGlobalId, latency, args.sampleId);
     }
+    UI.ARIAUtils.LiveAnnouncer.status(lockedString(styleText));
   }
 
   #getAiSuggestedProperties(suggestionText: string): ActiveAiSuggestionProperty[] {
@@ -2356,7 +2376,7 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
         // Explicitly set the query range as it is cleared during `acceptAutoComplete`
         this.queryRange = new TextUtils.TextRange.TextRange(0, 0, 0, textAfterAccept.length);
         // Re-apply the ghost text for the remainder
-        this.applySuggestion({text: suggestionForCurrentPrompt}, true);
+        this.applySuggestion({text: suggestionForCurrentPrompt, disableAcceptSuggestionOnStopCharacters: true}, true);
       }
       return true;
     }
@@ -2371,12 +2391,16 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
   }
 
   async commitAiSuggestion(): Promise<void> {
+    const suggestionText = this.treeElement.section().activeAiSuggestion?.text;
     await this.treeElement.section().commitActiveAiSuggestion();
     if (this.activeAiSuggestionInfo) {
       this.aiCodeCompletionProvider?.onSuggestionAccepted(
           this.activeAiSuggestionInfo.citations, this.activeAiSuggestionInfo.rpcGlobalId,
           this.activeAiSuggestionInfo.sampleId);
     }
+    if (suggestionText) {
+      UI.ARIAUtils.LiveAnnouncer.status(i18nString(UIStrings.aiSuggestionAccepted, {PH1: suggestionText}));
+    }
     // Clear state and return
     this.setAiAutoCompletion(null);
   }

package/front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -89,7 +89,11 @@
   }
 
   &.ghost-row, .ghost-value-prediction {
-    opacity: 50%;
+    .webkit-css-property {
+      opacity: 50%;
+    }
+
+    color: var(--sys-color-token-subtle);
     font-style: italic;
     pointer-events: none;
   }

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -16,7 +16,6 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
 
-import * as EmulationComponents from './components/components.js';
 const UIStrings = {
   /**
    * @description Title of the device dimensions selection item in the Device Mode Toolbar.
@@ -219,8 +218,8 @@ export class DeviceModeToolbar {
   private spanButton!: Buttons.Button.Button;
   private postureItem!: HTMLSelectElement;
   private modeButton!: Buttons.Button.Button;
-  private widthInput: EmulationComponents.DeviceSizeInputElement.SizeInputElement;
-  private heightInput: EmulationComponents.DeviceSizeInputElement.SizeInputElement;
+  private widthInput: HTMLInputElement;
+  private heightInput: HTMLInputElement;
   private deviceScaleItem!: HTMLSelectElement;
   private deviceScaleItems: HTMLElement[] = [];
   private deviceSelectItem!: HTMLSelectElement;
@@ -255,10 +254,9 @@ export class DeviceModeToolbar {
         Common.Settings.Settings.instance().createSetting('emulation.auto-adjust-scale', true);
 
     this.lastMode = new Map();
-    this.widthInput = new EmulationComponents.DeviceSizeInputElement.SizeInputElement(
-        i18nString(UIStrings.width), {jslogContext: 'width'});
-    this.heightInput = new EmulationComponents.DeviceSizeInputElement.SizeInputElement(
-        i18nString(UIStrings.heightLeaveEmptyForFull), {jslogContext: 'height'});
+
+    this.widthInput = this.createSizeInput(i18nString(UIStrings.width), 'width');
+    this.heightInput = this.createSizeInput(i18nString(UIStrings.heightLeaveEmptyForFull), 'height');
 
     this.#element = document.createElement('div');
     this.#element.classList.add('device-mode-toolbar');
@@ -306,6 +304,30 @@ export class DeviceModeToolbar {
     return element;
   }
 
+  private createSizeInput(title: string, jslogContext: string): HTMLInputElement {
+    const input = document.createElement('input');
+    input.type = 'number';
+    input.max = String(EmulationModel.DeviceModeModel.MaxDeviceSize);
+    input.min = String(EmulationModel.DeviceModeModel.MinDeviceSize);
+    input.title = title;
+    input.classList.add('device-mode-size-input');
+    input.setAttribute('jslog', `${VisualLogging.textField().track({change: true}).context(jslogContext)}`);
+
+    input.addEventListener('keydown', (event: Event) => {
+      let modifiedValue = UI.UIUtils.modifiedFloatNumber(Number(input.value), event);
+      if (modifiedValue === null) {
+        return;
+      }
+      modifiedValue = Math.min(modifiedValue, EmulationModel.DeviceModeModel.MaxDeviceSize);
+      modifiedValue = Math.max(modifiedValue, EmulationModel.DeviceModeModel.MinDeviceSize);
+
+      event.preventDefault();
+      input.value = String(modifiedValue);
+      input.dispatchEvent(new Event('change'));
+    });
+    return input;
+  }
+
   private createMainToolbar(): UI.Toolbar.Toolbar {
     const mainToolbar = this.#element.createChild('devtools-toolbar', 'main-toolbar');
 
@@ -320,14 +342,16 @@ export class DeviceModeToolbar {
     mainToolbar.append(...dimensionsSpan.childNodes);
     mainToolbar.append(this.deviceSelectItem);
 
-    this.widthInput.addEventListener('sizechanged', ({size: width}) => {
+    this.widthInput.addEventListener('change', () => {
+      const width = Number(this.widthInput.value);
       if (this.autoAdjustScaleSetting.get()) {
         this.model.setWidthAndScaleToFit(width);
       } else {
         this.model.setWidth(width);
       }
     });
-    this.heightInput.addEventListener('sizechanged', ({size: height}) => {
+    this.heightInput.addEventListener('change', () => {
+      const height = Number(this.heightInput.value);
       if (this.autoAdjustScaleSetting.get()) {
         this.model.setHeightAndScaleToFit(height);
       } else {
@@ -389,8 +413,8 @@ export class DeviceModeToolbar {
     MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelect.createForGlobalConditions(
         mainToolbar, i18nString(UIStrings.throttling));
     const saveDataItem = MobileThrottling.ThrottlingManager.throttlingManager().createSaveDataOverrideSelector();
-    saveDataItem.turnShrinkable();
-    mainToolbar.appendToolbarItem(saveDataItem);
+    saveDataItem.classList.add('dark-text', 'toolbar-has-dropdown-shrinkable');
+    mainToolbar.append(saveDataItem);
 
     mainToolbar.append(this.createEmptyToolbarElement());
     this.modeButton = new Buttons.Button.Button();
@@ -947,8 +971,8 @@ export class DeviceModeToolbar {
     }
 
     const size = this.model.appliedDeviceSize();
-    this.widthInput.size = String(size.width);
-    this.heightInput.size =
+    this.widthInput.value = String(size.width);
+    this.heightInput.value =
         this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive && this.model.isFullHeight() ?
         '' :
         String(size.height);

package/front_end/panels/emulation/deviceModeView.css

@@ -25,6 +25,31 @@
   font-size: 16px;
 }
 
+.device-mode-size-input {
+  /*
+   * 4 characters for the maximum size of the value,
+   * 2 characters for the width of the step-buttons,
+   * 2 pixels padding between the characters and the
+   * step-buttons.
+   */
+  width: calc(4ch + 2ch + 2px);
+  max-height: 18px;
+  border: var(--sys-color-neutral-outline);
+  border-radius: 4px;
+  margin: 0 2px;
+  text-align: center;
+  font-size: inherit;
+  font-family: inherit;
+}
+
+.device-mode-size-input:disabled {
+  user-select: none;
+}
+
+.device-mode-size-input:focus::-webkit-input-placeholder {
+  color: transparent;
+}
+
 .device-mode-empty-toolbar-element {
   width: 0;
 }

package/front_end/panels/greendev/GreenDevPanel.ts

@@ -8,6 +8,8 @@ import * as Host from '../../core/host/host.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
+import * as Marked from '../../third_party/marked/marked.js';
+import * as MarkdownView from '../../ui/components/markdown_view/markdown_view.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import greenDevPanelStyles from './GreenDevPanel.css.js';
@@ -265,9 +267,11 @@ export class GreenDevPanel extends UI.Panel.Panel {
     if (data.type === 'new-message' && data.text) {
       this.#appendMessageToContainer(session.container, data.text, data.isUser ?? false);
     } else if (data.type === 'update-last-message') {
-      const lastMsg = session.container.lastElementChild?.querySelector('.message-content');
+      const lastMsg = session.container.lastElementChild?.querySelector('.message-content devtools-markdown-view');
       if (lastMsg) {
-        lastMsg.textContent = data.text ?? null;
+        (lastMsg as MarkdownView.MarkdownView.MarkdownView).data = {
+          tokens: Marked.Marked.lexer(data.text ?? ''),
+        };
       }
     } else if (data.type === 'full-state') {
       session.container.innerHTML = '';
@@ -306,7 +310,30 @@ export class GreenDevPanel extends UI.Panel.Panel {
 
     const content = document.createElement('div');
     content.className = 'message-content';
-    content.textContent = text;
+    if (isUser) {
+      content.textContent = text;
+    } else {
+      const markdown = new MarkdownView.MarkdownView.MarkdownView();
+      markdown.data = {
+        tokens: Marked.Marked.lexer(text),
+      };
+      content.append(markdown);
+      const style = document.createElement('style');
+      style.textContent = `
+        .message { font-size: 1.0rem; }
+        .message code { font-size: 1.0rem; font-family: 'Roboto Mono', monospace; color: green; }
+        devtools-code-block {
+          white-space: pre-wrap;
+        }
+      `;
+      markdown.shadowRoot?.appendChild(style);
+
+      const codeBlocks = markdown.shadowRoot?.querySelectorAll('devtools-code-block');
+      for (const block of codeBlocks ?? []) {
+        // We need to rerender the component for the styles to be applied.
+        block.connectedCallback();
+      }
+    }
     content.style.flexGrow = '1';
     messageElement.appendChild(content);
 

package/front_end/panels/media/EventDisplayTable.ts

@@ -42,7 +42,7 @@ export interface EventDisplayColumnConfig {
 }
 
 export const enum MediaEventColumnKeys {
-  TIMESTAMP = 'display-timestamp',
+  TIMESTAMP = 'displayTimestamp',
   EVENT = 'event',
   VALUE = 'value',
 }

package/front_end/panels/mobile_throttling/NetworkThrottlingSelector.ts

@@ -176,35 +176,11 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.eventMixin<Eve
   #disabled = false;
 
   static createForGlobalConditions(element: HTMLElement, title: string): NetworkThrottlingSelect {
-    ThrottlingManager.instance();  // Instantiate the throttling manager to connect network manager with the setting
     const selectElement = element.createChild('select');
-    const select = new NetworkThrottlingSelect(selectElement, {
-      title,
-      jslogContext: SDK.NetworkManager.activeNetworkThrottlingKeySetting().name,
-      currentConditions: SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions()
-    });
+    const select = new NetworkThrottlingSelect(selectElement, {title});
+    select.bindToGlobalConditions = true;
     select.show(element, undefined, /* suppressOrphanWidgetError= */ true);
-    select.addEventListener(Events.CONDITIONS_CHANGED, event => {
-      const conditions = event.data;
-      if (!('block' in conditions)) {
-        SDK.NetworkManager.MultitargetNetworkManager.instance().setNetworkConditions(conditions);
-      }
-    });
-    SDK.NetworkManager.MultitargetNetworkManager.instance().addEventListener(
-        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();
+    select.performUpdate();
 
     return select;
   }
@@ -259,6 +235,51 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.eventMixin<Eve
     this.requestUpdate();
   }
 
+  #onConditionsChanged =
+      (event: Common.EventTarget.EventTargetEvent<SDK.NetworkManager.ThrottlingConditions>): void => {
+        const conditions = event.data;
+        if (!('block' in conditions)) {
+          SDK.NetworkManager.MultitargetNetworkManager.instance().setNetworkConditions(conditions);
+        }
+      };
+
+  #onGlobalConditionsChanged = (): void => {
+    this.currentConditions = SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions();
+  };
+
+  #updateRecommendation = (): void => {
+    const cruxManager = CrUXManager.CrUXManager.instance();
+    const roundTripTimeMetricData = cruxManager.getSelectedFieldMetricData('round_trip_time');
+    this.recommendedConditions = PanelsCommon.ThrottlingUtils.getRecommendedNetworkConditions(roundTripTimeMetricData);
+  };
+
+  set bindToGlobalConditions(bind: boolean) {
+    const cruxManager = CrUXManager.CrUXManager.instance();
+    const multitargetNetworkManager = SDK.NetworkManager.MultitargetNetworkManager.instance();
+
+    if (bind) {
+      this.#jslogContext = SDK.NetworkManager.activeNetworkThrottlingKeySetting().name;
+      ThrottlingManager.instance();  // Instantiate the throttling manager to connect network manager with the setting
+      this.#currentConditions = multitargetNetworkManager.networkConditions();
+
+      this.addEventListener(Events.CONDITIONS_CHANGED, this.#onConditionsChanged);
+      multitargetNetworkManager.addEventListener(
+          SDK.NetworkManager.MultitargetNetworkManager.Events.CONDITIONS_CHANGED, this.#onGlobalConditionsChanged);
+
+      // Subscribe to CrUX field data changes to show recommended throttling
+      // presets based on real-user RTT data.
+      cruxManager.addEventListener(CrUXManager.Events.FIELD_DATA_CHANGED, this.#updateRecommendation);
+      this.#updateRecommendation();
+    } else {
+      this.removeEventListener(Events.CONDITIONS_CHANGED, this.#onConditionsChanged);
+      multitargetNetworkManager.removeEventListener(
+          SDK.NetworkManager.MultitargetNetworkManager.Events.CONDITIONS_CHANGED, this.#onGlobalConditionsChanged);
+      cruxManager.removeEventListener(CrUXManager.Events.FIELD_DATA_CHANGED, this.#updateRecommendation);
+    }
+
+    this.requestUpdate();
+  }
+
   get variant(): NetworkThrottlingSelect.Variant {
     return this.#variant;
   }

package/front_end/panels/mobile_throttling/ThrottlingManager.ts

@@ -9,6 +9,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import {Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {MobileThrottlingSelector} from './MobileThrottlingSelector.js';
@@ -330,45 +331,27 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
     };
   }
 
-  createSaveDataOverrideSelector(className?: string): UI.Toolbar.ToolbarComboBox {
-    const reset = new Option(i18nString(UIStrings.noSaveDataOverride), undefined, true, true);
-    const enable = new Option(i18nString(UIStrings.saveDataOn));
-    const disable = new Option(i18nString(UIStrings.saveDataOff));
-    const handler = (e: Event): void => {
-      const select = e.target as HTMLSelectElement;
-      switch (select.selectedOptions.item(0)) {
-        case reset:
-          for (const emulationModel of SDK.TargetManager.TargetManager.instance().models(
-                   SDK.EmulationModel.EmulationModel)) {
-            void this.#emulationQueue.push(
-                emulationModel.setDataSaverOverride(SDK.EmulationModel.DataSaverOverride.UNSET));
-          }
-          break;
-        case enable:
-          for (const emulationModel of SDK.TargetManager.TargetManager.instance().models(
-                   SDK.EmulationModel.EmulationModel)) {
-            void this.#emulationQueue.push(
-                emulationModel.setDataSaverOverride(SDK.EmulationModel.DataSaverOverride.ENABLED));
-          }
-          break;
-        case disable:
-          for (const emulationModel of SDK.TargetManager.TargetManager.instance().models(
-                   SDK.EmulationModel.EmulationModel)) {
-            void this.#emulationQueue.push(
-                emulationModel.setDataSaverOverride(SDK.EmulationModel.DataSaverOverride.DISABLED));
-          }
-          break;
-      }
-      this.dispatchEventToListeners(ThrottlingManager.Events.SAVE_DATA_OVERRIDE_CHANGED, select.selectedIndex);
-    };
-    const select = new UI.Toolbar.ToolbarComboBox(handler, i18nString(UIStrings.saveDataSettingTooltip), className);
-    select.addOption(reset);
-    select.addOption(enable);
-    select.addOption(disable);
-
-    this.addEventListener(
-        ThrottlingManager.Events.SAVE_DATA_OVERRIDE_CHANGED, ({data}) => select.setSelectedIndex(data));
+  setSaveDataOverride(selectedIndex: number): void {
+    let override = SDK.EmulationModel.DataSaverOverride.UNSET;
+    if (selectedIndex === 1) {
+      override = SDK.EmulationModel.DataSaverOverride.ENABLED;
+    } else if (selectedIndex === 2) {
+      override = SDK.EmulationModel.DataSaverOverride.DISABLED;
+    }
+    for (const emulationModel of SDK.TargetManager.TargetManager.instance().models(SDK.EmulationModel.EmulationModel)) {
+      void this.#emulationQueue.push(emulationModel.setDataSaverOverride(override));
+    }
+    this.dispatchEventToListeners(ThrottlingManager.Events.SAVE_DATA_OVERRIDE_CHANGED, selectedIndex);
+  }
 
+  createSaveDataOverrideSelector(className?: string): HTMLSelectElement {
+    const select = document.createElement('select');
+    select.title = i18nString(UIStrings.saveDataSettingTooltip);
+    UI.ARIAUtils.setLabel(select, i18nString(UIStrings.saveDataSettingTooltip));
+    if (className) {
+      select.className = className;
+    }
+    UI.Widget.registerWidgetConfig(select, UI.Widget.widgetConfig(SaveDataOverrideSelect));
     return select;
   }
 
@@ -453,6 +436,52 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
   }
 }
 
+export interface SaveDataOverrideViewInput {
+  selectedIndex: number;
+  onSelect: (index: number) => void;
+}
+
+export type SaveDataOverrideViewFunction =
+    (input: SaveDataOverrideViewInput, output: undefined, target: HTMLSelectElement) => void;
+
+export const DEFAULT_SAVE_DATA_VIEW: SaveDataOverrideViewFunction = (input, _output, target) => {
+  // clang-format off
+  render(html`
+    <option value="unset" ?selected=${input.selectedIndex === 0}>${i18nString(UIStrings.noSaveDataOverride)}</option>
+    <option value="enabled" ?selected=${input.selectedIndex === 1}>${i18nString(UIStrings.saveDataOn)}</option>
+    <option value="disabled" ?selected=${input.selectedIndex === 2}>${i18nString(UIStrings.saveDataOff)}</option>
+  `, target, {container: {listeners: {change: (e: Event) => input.onSelect((e.target as HTMLSelectElement).selectedIndex)}}});
+  // clang-format on
+};
+
+export class SaveDataOverrideSelect extends
+    Common.ObjectWrapper.eventMixin<ThrottlingManager.EventTypes, typeof UI.Widget.Widget<HTMLSelectElement>>(
+        UI.Widget.Widget) {
+  #selectedIndex = 0;
+  readonly #view: SaveDataOverrideViewFunction;
+
+  constructor(element: HTMLElement, view = DEFAULT_SAVE_DATA_VIEW) {
+    super(element);
+    this.#view = view;
+    ThrottlingManager.instance().addEventListener(ThrottlingManager.Events.SAVE_DATA_OVERRIDE_CHANGED, ({data}) => {
+      this.#selectedIndex = data;
+      this.requestUpdate();
+    });
+    this.performUpdate();
+  }
+
+  override performUpdate(): void {
+    this.#view(
+        {
+          selectedIndex: this.#selectedIndex,
+          onSelect: index => {
+            ThrottlingManager.instance().setSaveDataOverride(index);
+          },
+        },
+        undefined, this.contentElement);
+  }
+}
+
 export namespace ThrottlingManager {
   export const enum Events {
     SAVE_DATA_OVERRIDE_CHANGED = 'SaveDataOverrideChanged',

package/front_end/panels/network/NetworkConfigView.ts

@@ -218,7 +218,7 @@ export class NetworkConfigView extends UI.Widget.VBox {
     const section = this.createSection(title, 'network-config-throttling');
     MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelect.createForGlobalConditions(section, title);
     const saveDataSelect =
-        MobileThrottling.ThrottlingManager.throttlingManager().createSaveDataOverrideSelector('chrome-select').element;
+        MobileThrottling.ThrottlingManager.throttlingManager().createSaveDataOverrideSelector('chrome-select');
     section.appendChild(saveDataSelect);
   }
 

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -182,12 +182,6 @@ const UIStrings = {
    * @description Text in Heap Snapshot View of a profiler tool
    */
   heapSnapshotProfilesShowMemory: 'See the memory distribution of JavaScript objects and related DOM nodes',
-  /**
-   * @description Label for a checkbox in the heap snapshot view of the profiler tool. The "heap snapshot" contains the
-   * current state of JavaScript memory. With this checkbox enabled, the snapshot also includes internal data that is
-   * specific to Chrome (hence implementation-specific).
-   */
-  exposeInternals: 'Internals with implementation details',
   /**
    * @description Progress update that the profiler is capturing a snapshot of the heap
    */
@@ -1282,7 +1276,6 @@ export class StatisticsPerspective extends Perspective {
 export class HeapSnapshotProfileType extends
     Common.ObjectWrapper.eventMixin<HeapSnapshotProfileTypeEventTypes, typeof ProfileType>(ProfileType)
         implements SDK.TargetManager.SDKModelObserver<SDK.HeapProfilerModel.HeapProfilerModel> {
-  readonly exposeInternals: Common.Settings.Setting<boolean>;
   customContentInternal: UI.UIUtils.CheckboxLabel|null;
   constructor(id?: string, title?: string) {
     super(id || HeapSnapshotProfileType.TypeId, title || i18nString(UIStrings.heapSnapshot));
@@ -1295,7 +1288,6 @@ export class HeapSnapshotProfileType extends
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.HeapProfilerModel.HeapProfilerModel, SDK.HeapProfilerModel.Events.REPORT_HEAP_SNAPSHOT_PROGRESS,
         this.reportHeapSnapshotProgress, this);
-    this.exposeInternals = Common.Settings.Settings.instance().createSetting('expose-internals', false);
     this.customContentInternal = null;
   }
 
@@ -1336,19 +1328,6 @@ export class HeapSnapshotProfileType extends
     return i18nString(UIStrings.heapSnapshotProfilesShowMemory);
   }
 
-  override customContent(): Element|null {
-    const exposeInternalsInHeapSnapshotCheckbox =
-        SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.exposeInternals), this.exposeInternals);
-    this.customContentInternal = exposeInternalsInHeapSnapshotCheckbox;
-    return exposeInternalsInHeapSnapshotCheckbox;
-  }
-
-  override setCustomContentEnabled(enable: boolean): void {
-    if (this.customContentInternal) {
-      this.customContentInternal.disabled = !enable;
-    }
-  }
-
   override createProfileLoadedFromFile(title: string): ProfileHeader {
     return new HeapProfileHeader(null, this, title);
   }
@@ -1370,7 +1349,7 @@ export class HeapSnapshotProfileType extends
     await heapProfilerModel.takeHeapSnapshot({
       reportProgress: true,
       captureNumericValue: true,
-      exposeInternals: this.exposeInternals.get(),
+      exposeInternals: true,
     });
     profile = this.profileBeingRecorded() as HeapProfileHeader;
     if (!profile) {

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: 1f344c5922432c73b3db8100c1f15163fdf8b530
+Revision: e388465394450fcfccc5529cf634c8561999f3b8
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE