chrome-devtools-frontend 1.0.1689415 → 1.0.1690116

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/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/network/NetworkLogView.ts

@@ -553,8 +553,13 @@ const enum FetchStyle {
   NODE_JS = 1,
 }
 
-export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
-    implements SDK.TargetManager.SDKModelObserver<SDK.NetworkManager.NetworkManager>, NetworkLogViewInterface {
+const NetworkLogViewBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class NetworkLogView extends NetworkLogViewBase implements
+    SDK.TargetManager.SDKModelObserver<SDK.NetworkManager.NetworkManager>, NetworkLogViewInterface {
   private readonly networkInvertFilterSetting: Common.Settings.Setting<boolean>;
   private readonly networkHideDataURLSetting: Common.Settings.Setting<boolean>;
   private readonly networkHideChromeExtensions: Common.Settings.Setting<boolean>;
@@ -1146,7 +1151,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
         jslogContext: actionName,
         variant: Buttons.Button.Variant.TONAL,
       });
-      this.recordingHint.contentElement.appendChild(button);
+      this.recordingHint.element.appendChild(button);
     }
 
     this.recordingHint.show(this.element);

package/front_end/panels/network/components/RequestHeadersView.css

@@ -21,6 +21,11 @@
   background-color: var(--sys-color-state-header-hover);
 }
 
+.header:focus-visible {
+  outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+  outline-offset: calc(-1 * var(--sys-size-2));
+}
+
 details[open] .header-count {
   display: none;
 }

package/front_end/panels/network/networkLogView.css

@@ -416,6 +416,10 @@ td.time-column {
   z-index: 1;
 }
 
+.empty-widget-container devtools-button {
+  margin-top: var(--sys-size-7);
+}
+
 @media (forced-colors: active) {
   .initiator-column .devtools-link {
     color: linktext;

package/front_end/panels/network/requestInitiatorViewTree.css

@@ -24,6 +24,8 @@
 
 .request-initiator-view-section-title:focus-visible {
   background-color: var(--sys-color-state-focus-highlight);
+  outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+  outline-offset: calc(-1 * var(--sys-size-2));
 }
 
 @media (forced-colors: active) {

package/front_end/panels/performance_monitor/performanceMonitor.css

@@ -46,14 +46,14 @@
   display: flex;
   flex: initial;
   flex-direction: column;
-  padding: 6px 0;
+  padding: var(--sys-size-4) 0;
   overflow: hidden auto;
 }
 
 .perfmon-chart-container {
   display: flex;
   flex: 1 1;
-  border-left: 1px solid var(--sys-color-divider);
+  border-left: var(--sys-size-1) solid var(--sys-color-divider);
   overflow-y: auto;
 }
 
@@ -63,7 +63,7 @@
 
 .perfmon-indicator {
   padding: 3px 9px;
-  margin: -1px 0;
+  margin: calc(-1 * var(--sys-size-1)) 0;
   display: flex;
   flex-shrink: 0;
   width: 210px;

package/front_end/panels/profiler/HeapDetachedElementsView.ts

@@ -91,8 +91,13 @@ export class DetachedElementsProfileView extends UI.View.SimpleView implements D
   }
 }
 
-export class DetachedElementsProfileType extends
-    Common.ObjectWrapper.eventMixin<DetachedElementsProfileType.EventTypes, typeof ProfileType>(ProfileType) {
+const DetachedElementsProfileTypeBase:
+    Common.ObjectWrapper.EventMixin<DetachedElementsProfileType.EventTypes, typeof ProfileType> =
+    Common.ObjectWrapper.eventMixin(
+        ProfileType,
+    );
+
+export class DetachedElementsProfileType extends DetachedElementsProfileTypeBase {
   constructor(typeId?: string, description?: string) {
     super(
         typeId || i18nString(UIStrings.detachedElementsTitle),

package/front_end/panels/profiler/HeapProfileView.ts

@@ -924,8 +924,13 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
   }
 }
 
-export class SamplingHeapProfileTypeBase extends
-    Common.ObjectWrapper.eventMixin<SamplingHeapProfileType.EventTypes, typeof ProfileType>(ProfileType) {
+const SamplingHeapProfileTypeBaseBase:
+    Common.ObjectWrapper.EventMixin<SamplingHeapProfileType.EventTypes, typeof ProfileType> =
+    Common.ObjectWrapper.eventMixin(
+        ProfileType,
+    );
+
+export class SamplingHeapProfileTypeBase extends SamplingHeapProfileTypeBaseBase {
   recording: boolean;
   clearedDuringRecording: boolean;
 

package/front_end/panels/profiler/HeapSnapshotDataGrids.ts

@@ -122,11 +122,15 @@ const str_ = i18n.i18n.registerUIStrings('panels/profiler/HeapSnapshotDataGrids.
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const adjacencyMap = new WeakMap<DataGrid.DataGrid.DataGridNode<HeapSnapshotGridNode>, HeapSnapshotGridNode[]>();
 
-class HeapSnapshotSortableDataGridBase extends DataGrid.DataGrid.DataGridImpl<HeapSnapshotGridNode> {}
+class HeapSnapshotSortableDataGridRawBase extends DataGrid.DataGrid.DataGridImpl<HeapSnapshotGridNode> {}
 
-export class HeapSnapshotSortableDataGrid extends Common.ObjectWrapper
-                                                      .eventMixin<EventTypes, typeof HeapSnapshotSortableDataGridBase>(
-                                                          HeapSnapshotSortableDataGridBase) {
+const HeapSnapshotSortableDataGridBase:
+    Common.ObjectWrapper.EventMixin<EventTypes, typeof HeapSnapshotSortableDataGridRawBase> =
+    Common.ObjectWrapper.eventMixin(
+        HeapSnapshotSortableDataGridRawBase,
+    );
+
+export class HeapSnapshotSortableDataGrid extends HeapSnapshotSortableDataGridBase {
   snapshot: HeapSnapshotModel.HeapSnapshotProxy.HeapSnapshotProxy|null = null;
   override selectedNode: HeapSnapshotGridNode|null = null;
   readonly heapProfilerModelInternal: SDK.HeapProfilerModel.HeapProfilerModel|null;

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -129,11 +129,15 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/profiler/HeapSnapshotGridNodes.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-class HeapSnapshotGridNodeBase extends DataGrid.DataGrid.DataGridNode<HeapSnapshotGridNode> {}
+class HeapSnapshotGridNodeRawBase extends DataGrid.DataGrid.DataGridNode<HeapSnapshotGridNode> {}
 
-export class HeapSnapshotGridNode extends
-    Common.ObjectWrapper.eventMixin<HeapSnapshotGridNode.EventTypes, typeof HeapSnapshotGridNodeBase>(
-        HeapSnapshotGridNodeBase) {
+const HeapSnapshotGridNodeBase:
+    Common.ObjectWrapper.EventMixin<HeapSnapshotGridNode.EventTypes, typeof HeapSnapshotGridNodeRawBase> =
+    Common.ObjectWrapper.eventMixin(
+        HeapSnapshotGridNodeRawBase,
+    );
+
+export class HeapSnapshotGridNode extends HeapSnapshotGridNodeBase {
   dataGridInternal: HeapSnapshotSortableDataGrid;
   instanceCount = 0;
   readonly savedChildren = new Map<number, HeapSnapshotGridNode>();

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -1391,9 +1391,14 @@ export class StatisticsPerspective extends Perspective {
   }
 }
 
-export class HeapSnapshotProfileType extends
-    Common.ObjectWrapper.eventMixin<HeapSnapshotProfileTypeEventTypes, typeof ProfileType>(ProfileType)
-        implements SDK.TargetManager.SDKModelObserver<SDK.HeapProfilerModel.HeapProfilerModel> {
+const HeapSnapshotProfileTypeBase:
+    Common.ObjectWrapper.EventMixin<HeapSnapshotProfileTypeEventTypes, typeof ProfileType> =
+    Common.ObjectWrapper.eventMixin(
+        ProfileType,
+    );
+
+export class HeapSnapshotProfileType extends HeapSnapshotProfileTypeBase implements
+    SDK.TargetManager.SDKModelObserver<SDK.HeapProfilerModel.HeapProfilerModel> {
   customContentInternal: UI.UIUtils.CheckboxLabel|null;
   constructor(id?: string, title?: string) {
     super(id || HeapSnapshotProfileType.TypeId, title || i18nString(UIStrings.heapSnapshot));
@@ -1531,9 +1536,13 @@ export interface HeapSnapshotProfileTypeEventTypes {
   [HeapSnapshotProfileTypeEvents.SNAPSHOT_RECEIVED]: ProfileHeader;
 }
 
-export class TrackingHeapSnapshotProfileType extends
-    Common.ObjectWrapper.eventMixin<TrackingHeapSnapshotProfileTypeEventTypes, typeof HeapSnapshotProfileType>(
-        HeapSnapshotProfileType) {
+const TrackingHeapSnapshotProfileTypeBase:
+    Common.ObjectWrapper.EventMixin<TrackingHeapSnapshotProfileTypeEventTypes, typeof HeapSnapshotProfileType> =
+    Common.ObjectWrapper.eventMixin(
+        HeapSnapshotProfileType,
+    );
+
+export class TrackingHeapSnapshotProfileType extends TrackingHeapSnapshotProfileTypeBase {
   readonly recordAllocationStacksSettingInternal: Common.Settings.Setting<boolean>;
   override customContentInternal: UI.UIUtils.CheckboxLabel|null;
   recording: boolean;

package/front_end/panels/profiler/HeapTimelineOverview.ts

@@ -12,8 +12,12 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-export class HeapTimelineOverview extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
-    UI.Widget.VBox) {
+const HeapTimelineOverviewBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class HeapTimelineOverview extends HeapTimelineOverviewBase {
   readonly overviewCalculator: OverviewCalculator;
   overviewContainer: HTMLElement;
   overviewGrid: PerfUI.OverviewGrid.OverviewGrid;

package/front_end/panels/profiler/ProfileFlameChartDataProvider.ts

@@ -131,9 +131,12 @@ export class ProfileFlameChartDataProvider implements PerfUI.FlameChart.FlameCha
   }
 }
 
-export class ProfileFlameChart extends
-    Common.ObjectWrapper.eventMixin<PerfUI.FlameChart.EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
-        implements UI.SearchableView.Searchable {
+const ProfileFlameChartBase: Common.ObjectWrapper.EventMixin<PerfUI.FlameChart.EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class ProfileFlameChart extends ProfileFlameChartBase implements UI.SearchableView.Searchable {
   readonly searchableView: UI.SearchableView.SearchableView;
   readonly overviewPane: OverviewPane;
   readonly mainPane: PerfUI.FlameChart.FlameChart;
@@ -311,8 +314,12 @@ export class OverviewCalculator implements NetworkTimeCalculator.Calculator {
   }
 }
 
-export class OverviewPane extends Common.ObjectWrapper.eventMixin<OverviewPaneEventTypes, typeof UI.Widget.VBox>(
-    UI.Widget.VBox) implements PerfUI.FlameChart.FlameChartDelegate {
+const OverviewPaneBase: Common.ObjectWrapper.EventMixin<OverviewPaneEventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class OverviewPane extends OverviewPaneBase implements PerfUI.FlameChart.FlameChartDelegate {
   overviewContainer: HTMLElement;
   readonly overviewCalculator: OverviewCalculator;
   readonly overviewGrid: PerfUI.OverviewGrid.OverviewGrid;

package/front_end/panels/profiler/ProfileLauncherView.ts

@@ -133,8 +133,12 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 };
 // clang-format on
 
-export class ProfileLauncherView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
-    UI.Widget.VBox) {
+const ProfileLauncherViewBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class ProfileLauncherView extends ProfileLauncherViewBase {
   readonly panel: ProfilesPanel;
   readonly selectedProfileTypeSetting: Common.Settings.Setting<string>;
   readonly #view: View;

package/front_end/panels/profiler/profilesPanel.css

@@ -26,7 +26,6 @@
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
-/* Profiler Style */
 
 #profile-views {
   flex: auto;
@@ -61,7 +60,7 @@
 
 .profiles-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);
   flex-shrink: 0;
 }
 
@@ -95,8 +94,8 @@
 }
 
 .profile-warn-marker {
-  vertical-align: -1px;
-  margin-right: 2px;
+  vertical-align: calc(-1 * var(--sys-size-1));
+  margin-right: var(--sys-size-2);
 }
 
 .cpu-profile-flame-chart-overview-container {
@@ -104,17 +103,17 @@
   position: absolute;
   top: 0;
   width: 100%;
-  height: 80px;
+  height: var(--sys-size-19);
 }
 
 #cpu-profile-flame-chart-overview-container {
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   overflow: hidden;
 }
 
 .cpu-profile-flame-chart-overview-canvas {
   position: absolute;
-  inset: 20px 0 0;
+  inset: var(--sys-size-9) 0 0;
 }
 
 #cpu-profile-flame-chart-overview-grid .resources-dividers-label-bar {
@@ -122,7 +121,7 @@
 }
 
 .cpu-profile-flame-chart-overview-pane {
-  flex: 0 0 80px !important; /* stylelint-disable-line declaration-no-important */
+  flex: 0 0 var(--sys-size-19) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .profile-text-view {
@@ -139,7 +138,7 @@
   justify-content: center;
   align-items: center;
   overflow: auto;
-  font-size: 16px;
+  font-size: var(--sys-typescale-body1-size);
   color: var(--sys-color-token-subtle);
   padding: 50px;
 }

package/front_end/panels/profiler/profilesSidebarTree.css

@@ -13,8 +13,8 @@
 
 /* Icon-related changes */
 li .icon {
-  width: 20px;
-  height: 20px;
+  width: var(--sys-size-9);
+  height: var(--sys-size-9);
   margin-right: var(--sys-size-6);
   flex: none;
 }
@@ -32,8 +32,8 @@ li .icon {
 }
 
 li.small .icon {
-  width: 16px;
-  height: 16px;
+  width: var(--sys-size-8);
+  height: var(--sys-size-8);
 }
 
 li.wait .icon {
@@ -86,13 +86,13 @@ ol.tree-outline {
   }
 
   & .selection {
-    border-radius: 0 100px 100px 0;
+    border-radius: 0 var(--sys-shape-corner-full) var(--sys-shape-corner-full) 0;
   }
 }
 
 .tree-outline .profile-launcher-view-tree-item,
 .tree-outline li.profiles-tree-section + .children > li {
-  border-radius: 0 100px 100px 0;
+  border-radius: 0 var(--sys-shape-corner-full) var(--sys-shape-corner-full) 0;
   position: relative;
 
   &.selected {
@@ -121,7 +121,7 @@ ol.tree-outline {
   }
 
   &:focus-visible {
-    box-shadow: inset 0 0 0 2px var(--sys-color-state-focus-ring);
+    box-shadow: inset 0 0 0 var(--sys-size-2) var(--sys-color-state-focus-ring);
   }
 }
 
@@ -146,17 +146,17 @@ ol.tree-outline {
 /* Generic items styling */
 
 li.wait .spinner::before {
-  --dimension: 20px;
+  --dimension: var(--sys-size-9);
 
   margin: 0;
 }
 
 li.wait.small .spinner::before {
-  --dimension: 14px;
+  --dimension: var(--sys-size-7);
   --clip-size: 9px;
-  --override-spinner-size: 2px;
+  --override-spinner-size: var(--sys-size-2);
 
-  margin: 1px;
+  margin: var(--sys-size-1);
 }
 
 li.wait.selected .spinner::before {
@@ -174,7 +174,7 @@ li.wait.selected .spinner::before {
 }
 
 li.small {
-  height: 20px;
+  height: var(--sys-size-9);
 }
 
 li .titles {
@@ -199,7 +199,7 @@ li .titles > .title-container .title.editing {
 }
 
 li.small .titles {
-  top: 2px;
+  top: var(--sys-size-2);
   line-height: normal;
 }
 

package/front_end/panels/protocol_monitor/JSONEditor.css

@@ -23,7 +23,7 @@
 
 .warning-icon {
   margin-left: -18px;
-  margin-right: 4px;
+  margin-right: var(--sys-size-3);
 }
 
 .row {
@@ -104,5 +104,5 @@ ul {
 }
 
 .protocol-monitor-sidebar-toolbar {
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
 }

package/front_end/panels/protocol_monitor/JSONEditor.ts

@@ -177,7 +177,12 @@ export interface EventTypes {
   [Events.SUBMIT_EDITOR]: Command;
 }
 
-export class JSONEditor extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox) {
+const JSONEditorBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class JSONEditor extends JSONEditorBase {
   #metadataByCommand = new Map<string, {parameters: Parameter[], description: string, replyArgs: string[]}>();
   #typesByName = new Map<string, Parameter[]>();
   #enumsByName = new Map<string, Record<string, string>>();

package/front_end/panels/protocol_monitor/protocolMonitor.css

@@ -5,11 +5,11 @@
  */
 @scope to (devtools-widget > *) {
   .protocol-monitor-toolbar {
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   }
 
   .protocol-monitor-bottom-toolbar {
-    border-top: 1px solid var(--sys-color-divider);
+    border-top: var(--sys-size-1) solid var(--sys-color-divider);
   }
 
   .target-selector {

package/front_end/panels/sources/SourcesView.ts

@@ -117,8 +117,13 @@ export const DEFAULT_VIEW: View = (input, output, target): void => {
   // clang-format on
 };
 
-export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
-    implements UI.SearchableView.Searchable, UI.SearchableView.Replaceable {
+const SourcesViewBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class SourcesView extends SourcesViewBase implements UI.SearchableView.Searchable,
+                                                            UI.SearchableView.Replaceable {
   #searchableView!: UI.SearchableView.SearchableView;
   editorContainer?: TabbedEditorContainer;
   #uiSourceCodes = new Set<Workspace.UISourceCode.UISourceCode>();