chrome-devtools-frontend 1.0.1684555 → 1.0.1690116

package/front_end/panels/layer_viewer/LayerTreeOutline.ts

@@ -139,8 +139,13 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
   // clang-format on
 };
 
-export class LayerTreeOutline extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
-    UI.Widget.Widget) implements Common.EventTarget.EventTarget<EventTypes>, LayerView {
+const LayerTreeOutlineBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.Widget> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.Widget,
+    );
+
+export class LayerTreeOutline extends LayerTreeOutlineBase implements Common.EventTarget.EventTarget<EventTypes>,
+                                                                      LayerView {
   private layerViewHost: LayerViewHost;
   private layerTree?: SDK.LayerTreeBase.LayerTreeBase|null;
   private layerSnapshotMap?: Map<SDK.LayerTreeBase.Layer, SnapshotSelection>;

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -103,18 +103,17 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
       header: i18nString(UIStrings.noLayerInformation),
       text: i18nString(UIStrings.layerExplanation),
     })}</div>` : Lit.nothing}
-    ${input.error === 'webgl-disabled' ? html`<div>${widget(UI.EmptyWidget.EmptyWidget, {
+    ${input.error === 'webgl-disabled' ? html`<div><devtools-widget ${widget(UI.EmptyWidget.EmptyWidget, {
       header: i18nString(UIStrings.cantDisplayLayers),
       text: i18nString(UIStrings.webglSupportIsDisabledInYour),
-      extraElements: [
-        uiI18n.getFormatLocalizedString(
-          str_, UIStrings.checkSForPossibleReasons,
-          {
-            PH1: Link.create('chrome://gpu', undefined, undefined, 'about-gpu', 0, true),
-          },
-        ),
-      ],
-    })}</div>` : Lit.nothing}
+    })}>
+      ${uiI18n.getFormatLocalizedString(
+        str_, UIStrings.checkSForPossibleReasons,
+        {
+          PH1: Link.create('chrome://gpu', undefined, undefined, 'about-gpu', 0, true),
+        },
+      )}
+    </devtools-widget></div>` : Lit.nothing}
     <canvas
       tabindex="0"
       jslog=${VisualLogging.canvas('layers').track({
@@ -138,7 +137,14 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
   // clang-format onn
 };
 
-export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
+const Layers3DViewBase: Common.ObjectWrapper.EventMixin<
+  EventTypes,
+  typeof UI.Widget.VBox
+> = Common.ObjectWrapper.eventMixin(
+  UI.Widget.VBox,
+);
+
+export class Layers3DView extends Layers3DViewBase
     implements LayerView {
   private readonly layerViewHost: LayerViewHost;
   private transformController: TransformController;

package/front_end/panels/layer_viewer/PaintProfilerView.ts

@@ -239,8 +239,12 @@ const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement)
 
 type View = typeof DEFAULT_VIEW;
 
-export class PaintProfilerView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
-    UI.Widget.Widget) {
+const PaintProfilerViewBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.Widget> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.Widget,
+    );
+
+export class PaintProfilerView extends PaintProfilerViewBase {
   private canvasContainer?: HTMLElement;
   #selectionWindow?: PerfUI.OverviewGrid.Window;
   private readonly innerBarWidth: number;

package/front_end/panels/layer_viewer/layerDetailsView.css

@@ -37,6 +37,6 @@ ul {
 }
 
 .devtools-link.link-margin, .devtools-link.link-margin:hover {
-  margin: 8px;
+  margin: var(--sys-size-5);
   display: inline-block;
 }

package/front_end/panels/layer_viewer/layerTreeOutline.css

@@ -6,9 +6,9 @@
 
 @scope to (devtools-widget > *) {
   .layer-summary {
-    border-top: 1px solid var(--sys-color-divider);
+    border-top: var(--sys-size-1) solid var(--sys-color-divider);
     justify-content: space-between;
-    padding: 4px 10px;
+    padding: var(--sys-size-3) 10px;
     flex-shrink: 0;
   }
 

package/front_end/panels/layer_viewer/layers3DView.css

@@ -17,7 +17,7 @@
 
 devtools-toolbar {
   background-color: var(--sys-color-cdt-base-container);
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 canvas {

package/front_end/panels/layer_viewer/paintProfiler.css

@@ -19,7 +19,7 @@
   .paint-profiler-pie-chart {
     width: 60px !important; /* stylelint-disable-line declaration-no-important */
     height: 60px !important; /* stylelint-disable-line declaration-no-important */
-    padding: 2px;
+    padding: var(--sys-size-2);
     overflow: hidden;
     font-size: 10px;
   }

package/front_end/panels/lighthouse/LighthouseReportSelector.ts

@@ -40,7 +40,7 @@ export class ReportSelector {
 
     this.#comboBox.setEnabled(false);
     this.newLighthouseItem = document.createElement('option');
-    this.newLighthouseItem.label = i18nString(UIStrings.newReport);
+    this.newLighthouseItem.textContent = i18nString(UIStrings.newReport);
     this.#comboBox.addOption(this.newLighthouseItem);
     this.#comboBox.select(this.newLighthouseItem);
   }
@@ -127,7 +127,7 @@ export class Item {
     const url = new Common.ParsedURL.ParsedURL(finalDisplayedUrl);
     const timestamp = lighthouseResult.fetchTime;
     this.element = document.createElement('option');
-    this.element.label = `${new Date(timestamp).toLocaleTimeString()} - ${url.domain()}`;
+    this.element.textContent = `${new Date(timestamp).toLocaleTimeString()} - ${url.domain()}`;
   }
 
   select(): void {

package/front_end/panels/lighthouse/lighthousePanel.css

@@ -29,7 +29,7 @@ button.view-trace {
 .lighthouse-settings-pane {
   flex: none;
   background-color: var(--sys-color-cdt-base-container);
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .lighthouse-settings-pane devtools-toolbar {
@@ -50,7 +50,7 @@ select.lighthouse-report {
 
 .lighthouse-toolbar-container > devtools-toolbar {
   background-color: var(--sys-color-cdt-base-container);
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .lighthouse-toolbar-container > :first-child {
@@ -65,7 +65,7 @@ select.lighthouse-report {
   position: relative;
 
   :focus-visible {
-    outline: -webkit-focus-ring-color auto 1px;
+    outline: -webkit-focus-ring-color auto var(--sys-size-1);
   }
 
   .lh-tools__button {
@@ -79,7 +79,7 @@ select.lighthouse-report {
     }
 
     &.lh-active + .lh-tools__dropdown {
-      clip: rect(-8px, 204px, 270px, -10px);  /* stylelint-disable-line property-no-deprecated */
+      clip: rect(calc(-1 * var(--sys-size-5)), 204px, 270px, -10px);  /* stylelint-disable-line property-no-deprecated */
     }
   }
 
@@ -87,7 +87,7 @@ select.lighthouse-report {
     padding: var(--sys-size-5) 0;
     border-radius: var(--sys-shape-corner-small);
     box-shadow: var(--sys-elevation-level3);
-    top: 24px;
+    top: var(--sys-size-11);
 
     &:hover a:focus {
       background-color: transparent;

package/front_end/panels/lighthouse/lighthouseStartView.css

@@ -7,23 +7,23 @@
 
 .lighthouse-start-view {
   line-height: 18px;
-  padding: 24px;
+  padding: var(--sys-size-11);
   overflow: auto;
   height: 100%;
   /* for buttons */
   --legacy-accent-color: #0535c1;
   --legacy-accent-color-hover: #17b;
-  --font-size: 14px;
+  --font-size: var(--sys-typescale-body2-size);
   --report-font-family: roboto, helvetica, arial, sans-serif;
 }
 
 .lighthouse-start-view header {
   display: flex;
-  font-size: 18px;
+  font-size: var(--sys-typescale-headline3-size);
   flex-direction: row;
   align-items: center;
-  column-gap: 16px;
-  margin-bottom: 16px;
+  column-gap: var(--sys-size-8);
+  margin-bottom: var(--sys-size-8);
 }
 
 .lighthouse-start-view .lighthouse-title {
@@ -48,14 +48,14 @@
 }
 
 .lighthouse-form-section {
-  padding: 8px;
+  padding: var(--sys-size-5);
   flex: 1 1;
 }
 
 .lighthouse-form-categories-fieldset {
   border: none;
   margin: 0;
-  padding: 8px;
+  padding: var(--sys-size-5);
 }
 
 .lighthouse-form-section-label {
@@ -65,15 +65,15 @@
 
 .lighthouse-form-section-label i span {
   position: relative;
-  top: -2px;
+  top: calc(-1 * var(--sys-size-2));
 }
 
 .lighthouse-form-section-label span.largeicon-checkmark {
-  top: -4px;
+  top: calc(-1 * var(--sys-size-3));
 }
 
 .lighthouse-form-section-label .lighthouse-learn-more {
-  margin: 20px;
+  margin: var(--sys-size-9);
 }
 
 .lighthouse-radio {
@@ -98,7 +98,7 @@
 }
 
 .lighthouse-start-button-container button {
-  margin: 16px auto;
+  margin: var(--sys-size-8) auto;
   font-family: var(--report-font-family);
   font-weight: 500;
   font-size: var(--font-size);
@@ -115,12 +115,12 @@
   }
 
   &:not(:has(devtools-checkbox)) {
-    margin-bottom: 6px;
+    margin-bottom: var(--sys-size-4);
   }
 }
 
 .lighthouse-launcher-row .dimmed {
-  padding-left: 22px;
+  padding-left: var(--sys-size-10);
 }
 
 .lighthouse-help-text {

package/front_end/panels/linear_memory_inspector/LinearMemoryInspectorPane.ts

@@ -36,8 +36,12 @@ let inspectorInstance: LinearMemoryInspectorPane;
 const MEMORY_INSPECTOR_EXPLANATION_URL =
     'https://developer.chrome.com/docs/devtools/memory-inspector' as Platform.DevToolsPath.UrlString;
 
-export class LinearMemoryInspectorPane extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
-    UI.Widget.VBox) {
+const LinearMemoryInspectorPaneBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class LinearMemoryInspectorPane extends LinearMemoryInspectorPaneBase {
   readonly #tabbedPane: UI.TabbedPane.TabbedPane;
 
   constructor() {

package/front_end/panels/linear_memory_inspector/components/LinearMemoryInspector.ts

@@ -242,8 +242,12 @@ function getSmallestEnclosingMemoryHighlight(highlightedMemoryAreas: HighlightIn
 
 export type View = typeof DEFAULT_VIEW;
 
-export class LinearMemoryInspector extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
-    UI.Widget.Widget) {
+const LinearMemoryInspectorBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.Widget> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.Widget,
+    );
+
+export class LinearMemoryInspector extends LinearMemoryInspectorBase {
   readonly #history = new Common.SimpleHistoryManager.SimpleHistoryManager(10);
 
   #memory = new Uint8Array();

package/front_end/panels/media/playerListView.css

@@ -10,11 +10,11 @@
 }
 
 li.storage-group-list-item {
-  padding: 10px 8px 6px;
+  padding: 10px var(--sys-size-5) var(--sys-size-4);
 }
 
 li.storage-group-list-item:not(:first-child) {
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 li.storage-group-list-item::before {
@@ -50,16 +50,16 @@ li.storage-group-list-item::before {
   display: inherit;
 
   & > devtools-icon {
-    height: 16px;
-    width: 16px;
+    height: var(--sys-size-8);
+    width: var(--sys-size-8);
   }
 }
 
 .player-entry-status-icon {
-  width: 28px;
-  min-width: 28px;
+  width: var(--sys-size-12);
+  min-width: var(--sys-size-12);
   height: 26px;
-  border-right: 1px solid var(--sys-color-divider);
+  border-right: var(--sys-size-1) solid var(--sys-color-divider);
   overflow: hidden;
 }
 
@@ -69,7 +69,7 @@ li.storage-group-list-item::before {
   min-width: 125px;
   text-overflow: ellipsis;
   padding: 0 10px;
-  border-right: 1px solid var(--sys-color-divider);
+  border-right: var(--sys-size-1) solid var(--sys-color-divider);
   overflow: hidden;
 }
 
@@ -84,5 +84,5 @@ li.storage-group-list-item::before {
   line-height: 27px;
   min-height: 27px;
   padding-left: 10px;
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }

package/front_end/panels/media/playerMessagesView.css

@@ -5,7 +5,7 @@
  */
 .media-messages-header {
   background-color: var(--sys-color-cdt-base-container);
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   min-height: 26px;
 }
 
@@ -26,19 +26,19 @@
   float: left;
   width: 18px;
   height: 100%;
-  padding-left: 2px;
+  padding-left: var(--sys-size-2);
 }
 
 .media-messages-message-container {
-  margin: 4px;
-  font-size: 14px;
+  margin: var(--sys-size-3);
+  font-size: var(--sys-typescale-body2-size);
   line-height: 18px;
-  padding: 4px;
+  padding: var(--sys-size-3);
   user-select: text;
 }
 
 .media-messages-message-container + .media-messages-message-container {
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
 
   &.media-message-warning,
   &.media-message-error {
@@ -68,9 +68,9 @@
 
 .status-error-box {
   font-family: var(--monospace-font-family);
-  border: 1px solid var(--sys-color-error-outline);
+  border: var(--sys-size-1) solid var(--sys-color-error-outline);
   border-radius: 5px;
-  padding: 4px;
+  padding: var(--sys-size-3);
 }
 
 .status-error-field-label {

package/front_end/panels/media/playerPropertiesView.css

@@ -5,13 +5,13 @@
  */
 
 .media-attributes-view {
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .media-property-renderer {
-  line-height: 20px;
-  min-height: 28px;
-  padding: 4px 10px;
+  line-height: var(--sys-size-9);
+  min-height: var(--sys-size-12);
+  padding: var(--sys-size-3) 10px;
   display: block;
   overflow: hidden;
 
@@ -29,7 +29,7 @@
 }
 
 .media-property-renderer:has(.json-view > .expanded) {
-  padding-bottom: 4px;
+  padding-bottom: var(--sys-size-3);
 }
 
 .media-property-renderer-hidden {
@@ -37,7 +37,7 @@
 }
 
 .media-property-renderer-title {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   float: left;
   width: 150px;
 }

package/front_end/panels/mobile_throttling/NetworkPanelIndicator.ts

@@ -19,7 +19,7 @@ const UIStrings = {
   /**
    * @description Icon title for warning indicator in the Network panel title.
    */
-  requestsMayBeBlocked: 'Requests may be blocked. See the Network request blocking panel',
+  requestsMayBeBlocked: 'Requests may be blocked. See the Request conditions panel',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/mobile_throttling/NetworkPanelIndicator.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/mobile_throttling/NetworkThrottlingSelector.ts

@@ -176,8 +176,12 @@ export function getRecommendedNetworkConditions(roundTripTimeMetricData?: CrUXMa
   return null;
 }
 
-export class NetworkThrottlingSelect extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
-    UI.Widget.Widget) {
+const NetworkThrottlingSelectBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.Widget> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.Widget,
+    );
+
+export class NetworkThrottlingSelect extends NetworkThrottlingSelectBase {
   readonly #settings: Common.Settings.Settings;
   #recommendedConditions: SDK.NetworkManager.Conditions|null = null;
   #jslogContext?: string;

package/front_end/panels/mobile_throttling/ThrottlingManager.ts

@@ -88,17 +88,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/mobile_throttling/ThrottlingMan
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let throttlingManagerInstance: ThrottlingManager;
 
-class PromiseQueue<T> {
-  #promise = Promise.resolve();
-
-  push(promise: Promise<T>): Promise<T> {
-    return new Promise(r => {
-      this.#promise = this.#promise.then(async () => r(await promise));
-    });
-  }
-}
-
-export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<ThrottlingManager.EventTypes> {
+export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<void> {
   private readonly cpuThrottlingControls: Set<UI.Toolbar.ToolbarComboBox>;
   private readonly cpuThrottlingOptions: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption[];
   private readonly customNetworkConditionsSetting: Common.Settings.Setting<SDK.NetworkManager.Conditions[]>;
@@ -111,7 +101,6 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
   #hardwareConcurrencyOverrideEnabled = false;
   #currentCPUThrottlingOption: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption =
       PanelsCommon.CPUThrottlingOption.NoThrottlingOption;
-  readonly #emulationQueue = new PromiseQueue<void>();
   get hardwareConcurrencyOverrideEnabled(): boolean {
     return this.#hardwareConcurrencyOverrideEnabled;
   }
@@ -302,19 +291,6 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
     };
   }
 
-  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);
@@ -408,8 +384,8 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
 }
 
 export interface SaveDataOverrideViewInput {
-  selectedIndex: number;
-  onSelect: (index: number) => void;
+  selectedOption: SDK.EmulationModel.DataSaverOverride;
+  onSelect: (selectedOption: SDK.EmulationModel.DataSaverOverride) => void;
 }
 
 export type SaveDataOverrideViewFunction =
@@ -418,48 +394,43 @@ export type SaveDataOverrideViewFunction =
 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)}}});
+    <option value=${SDK.EmulationModel.DataSaverOverride.UNSET} ?selected=${input.selectedOption === SDK.EmulationModel.DataSaverOverride.UNSET}>${i18nString(UIStrings.noSaveDataOverride)}</option>
+    <option value=${SDK.EmulationModel.DataSaverOverride.ENABLED} ?selected=${input.selectedOption === SDK.EmulationModel.DataSaverOverride.ENABLED}>${i18nString(UIStrings.saveDataOn)}</option>
+    <option value=${SDK.EmulationModel.DataSaverOverride.DISABLED} ?selected=${input.selectedOption === SDK.EmulationModel.DataSaverOverride.DISABLED}>${i18nString(UIStrings.saveDataOff)}</option>
+  `, target, {container: {listeners: {change: (e: Event) => input.onSelect((e.target as HTMLSelectElement).value as SDK.EmulationModel.DataSaverOverride)}}});
   // clang-format on
 };
 
-export class SaveDataOverrideSelect extends
-    Common.ObjectWrapper.eventMixin<ThrottlingManager.EventTypes, typeof UI.Widget.Widget<HTMLSelectElement>>(
-        UI.Widget.Widget) {
-  #selectedIndex = 0;
+export class SaveDataOverrideSelect extends UI.Widget.Widget<HTMLSelectElement> {
+  readonly #setting: Common.Settings.Setting<SDK.EmulationModel.DataSaverOverride>;
   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.#setting = Common.Settings.Settings.instance().resolve(SDK.SDKSettings.dataSaverSettingDescriptor);
     this.performUpdate();
   }
 
-  override performUpdate(): void {
-    this.#view(
-        {
-          selectedIndex: this.#selectedIndex,
-          onSelect: index => {
-            ThrottlingManager.instance().setSaveDataOverride(index);
-          },
-        },
-        undefined, this.contentElement);
+  override wasShown(): void {
+    super.wasShown();
+    this.#setting.addChangeListener(this.requestUpdate, this);
+    this.requestUpdate();
   }
-}
 
-export namespace ThrottlingManager {
-  export const enum Events {
-    SAVE_DATA_OVERRIDE_CHANGED = 'SaveDataOverrideChanged',
+  override willHide(): void {
+    super.willHide();
+    this.#setting.removeChangeListener(this.requestUpdate, this);
   }
 
-  export interface EventTypes {
-    [Events.SAVE_DATA_OVERRIDE_CHANGED]: number;
+  override performUpdate(): void {
+    this.#view({
+      selectedOption: this.#setting.get(),
+      onSelect: selectedOption => {
+        this.#setting.set(selectedOption);
+      },
+    },
+               undefined, this.contentElement);
   }
 }
 

package/front_end/panels/mobile_throttling/throttlingSettingsTab.css

@@ -28,7 +28,7 @@
 }
 
 .settings-container::-webkit-scrollbar-thumb {
-  border-radius: var( --sys-size-3);
+  border-radius: var(--sys-shape-corner-extra-small);
   background-color: var(--sys-color-primary);
 }
 
@@ -37,8 +37,8 @@
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-start;
-  gap: var( --sys-size-3);
-  padding: var( --sys-size-4);
+  gap: var(--sys-size-3);
+  padding: var(--sys-size-4);
   flex-shrink: 0;
   width: 74px;
 }
@@ -60,7 +60,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  flex-basis: var( --sys-size-24);
+  flex-basis: var(--sys-size-24);
   user-select: none;
   color: var(--sys-color-on-surface);
   text-align: center;
@@ -91,10 +91,10 @@
 }
 
 .conditions-list-separator {
-  flex: 0 0 1px;
+  flex: 0 0 var(--sys-size-1);
   background-color: var(--sys-color-divider);
   height: 30px;
-  margin: 0 4px;
+  margin: 0 var(--sys-size-3);
 }
 
 .conditions-list-separator-invisible {
@@ -118,7 +118,7 @@
 }
 
 .cpu-preset-section {
-  padding: 14px;
+  padding: var(--sys-size-7);
   display: flex;
   justify-content: space-between;
 }
@@ -129,7 +129,7 @@
 
 .cpu-preset-calibrate {
   flex-direction: column;
-  gap: 14px;
+  gap: var(--sys-size-7);
 }
 
 .cpu-preset-calibrate .button-container {
@@ -151,5 +151,5 @@
 
 .conditions-list-header {
   font-weight: bold;
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -1171,6 +1171,7 @@ export class NetworkRequestNode extends NetworkNode {
   override createCells(trElement: HTMLElement): void {
     this.initiatorCell = null;
 
+    trElement.setAttribute('data-network-request-id', this.requestInternal.requestId());
     trElement.classList.toggle('network-throttled-row', Boolean(this.throttlingConditions()?.urlPattern));
     trElement.classList.toggle('network-warning-row', this.isWarning());
     trElement.classList.toggle('network-error-row', this.isError());