chrome-devtools-frontend 1.0.1652307 → 1.0.1656291

package/front_end/panels/layer_viewer/LayerTreeOutline.ts

@@ -2,12 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/* eslint-disable @devtools/no-imperative-dom-api */
-
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html, render} from '../../ui/lit/lit.js';
 
 import layerTreeOutlineStyles from './layerTreeOutline.css.js';
 import {
@@ -41,21 +40,49 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/layer_viewer/LayerTreeOutline.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class LayerTreeOutline extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.TreeOutline.TreeOutline>(
-    UI.TreeOutline.TreeOutline) implements Common.EventTarget.EventTarget<EventTypes>, LayerView {
+
+export interface ViewInput {
+  treeOutlineElement: HTMLElement;
+  layerCount: number;
+  totalLayerMemory: number;
+}
+export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+
+const DEFAULT_VIEW: View = (input, _output, target) => {
+  render(html`
+    <style>${layerTreeOutlineStyles}</style>
+    <div class="vbox layer-tree-wrapper">
+      <div style="flex-grow: 1; overflow: auto; display: flex;">
+        ${input.treeOutlineElement}
+      </div>
+      <div class="hbox layer-summary">
+        <span class="layer-count">${i18nString(UIStrings.layerCount, {
+           PH1: input.layerCount
+         })}</span>
+        <span>${i18n.ByteUtilities.bytesToString(input.totalLayerMemory)}</span>
+      </div>
+    </div>
+  `,
+         target);
+};
+
+export class LayerTreeOutline extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
+    UI.Widget.Widget) implements Common.EventTarget.EventTarget<EventTypes>, LayerView {
   private layerViewHost: LayerViewHost;
   private treeOutline: UI.TreeOutline.TreeOutlineInShadow;
   private lastHoveredNode: LayerTreeElement|null;
-  private layerCountElement: HTMLSpanElement;
-  private layerMemoryElement: HTMLSpanElement;
-  override element: HTMLElement;
   private layerTree?: SDK.LayerTreeBase.LayerTreeBase|null;
   private layerSnapshotMap?: Map<SDK.LayerTreeBase.Layer, SnapshotSelection>;
 
-  constructor(layerViewHost: LayerViewHost) {
+  #view: View;
+  #layerCount = 0;
+  #totalLayerMemory = 0;
+
+  constructor(layerViewHost: LayerViewHost, view: View = DEFAULT_VIEW) {
     super();
     this.layerViewHost = layerViewHost;
     this.layerViewHost.registerView(this);
+    this.#view = view;
 
     this.treeOutline = new UI.TreeOutline.TreeOutlineInShadow();
     this.treeOutline.element.classList.add('layer-tree', 'overflow-auto');
@@ -66,24 +93,23 @@ export class LayerTreeOutline extends Common.ObjectWrapper.eventMixin<EventTypes
 
     this.lastHoveredNode = null;
 
-    const summaryElement = document.createElement('div');
-    summaryElement.classList.add('hbox', 'layer-summary');
-    this.layerCountElement = document.createElement('span');
-    this.layerCountElement.classList.add('layer-count');
-    this.layerMemoryElement = document.createElement('span');
-    summaryElement.appendChild(this.layerCountElement);
-    summaryElement.appendChild(this.layerMemoryElement);
-
-    const wrapperElement = document.createElement('div');
-    wrapperElement.classList.add('vbox', 'layer-tree-wrapper');
-    wrapperElement.appendChild(this.treeOutline.element);
-    wrapperElement.appendChild(summaryElement);
-    this.element = wrapperElement;
-    UI.DOMUtilities.appendStyle(this.element, layerTreeOutlineStyles);
-
     this.layerViewHost.showInternalLayersSetting().addChangeListener(this.update, this);
   }
 
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    this.#view({
+      treeOutlineElement: this.treeOutline.element,
+      layerCount: this.#layerCount,
+      totalLayerMemory: this.#totalLayerMemory,
+    },
+               {}, this.contentElement);
+  }
+
   override focus(): void {
     this.treeOutline.focus();
   }
@@ -121,7 +147,7 @@ export class LayerTreeOutline extends Common.ObjectWrapper.eventMixin<EventTypes
 
   private update(): void {
     const showInternalLayers = this.layerViewHost.showInternalLayersSetting().get();
-    const seenLayers = new Map<SDK.LayerTreeBase.Layer, boolean>();
+    const seenLayers = new Set<SDK.LayerTreeBase.Layer>();
     let root: (SDK.LayerTreeBase.Layer|null)|null = null;
     if (this.layerTree) {
       if (!showInternalLayers) {
@@ -135,58 +161,81 @@ export class LayerTreeOutline extends Common.ObjectWrapper.eventMixin<EventTypes
     let layerCount = 0;
     let totalLayerMemory = 0;
 
-    function updateLayer(this: LayerTreeOutline, layer: SDK.LayerTreeBase.Layer): void {
-      if (!layer.drawsContent() && !showInternalLayers) {
-        return;
-      }
-      if (seenLayers.get(layer)) {
-        console.assert(false, 'Duplicate layer: ' + layer.id());
-      }
-      seenLayers.set(layer, true);
+    const childrenMap = new Map<SDK.LayerTreeBase.Layer, SDK.LayerTreeBase.Layer[]>();
 
-      layerCount++;
-      totalLayerMemory += layer.gpuMemoryUsage();
+    if (this.layerTree && root) {
+      const buildTree = (layer: SDK.LayerTreeBase.Layer): void => {
+        if (!layer.drawsContent() && !showInternalLayers) {
+          return;
+        }
 
-      let node: LayerTreeElement|null = layerToTreeElement.get(layer) || null;
-      let parentLayer = layer.parent();
-      // Skip till nearest visible ancestor.
-      while (parentLayer && parentLayer !== root && !parentLayer.drawsContent() && !showInternalLayers) {
-        parentLayer = parentLayer.parent();
-      }
-      const parent =
-          layer === root ? this.treeOutline.rootElement() : parentLayer && layerToTreeElement.get(parentLayer);
-      if (!parent) {
-        console.assert(false, 'Parent is not in the tree');
-        return;
-      }
-      if (!node) {
-        node = new LayerTreeElement(this, layer);
-        parent.appendChild(node);
-        // Expand all new non-content layers to expose content layers better.
-        if (!layer.drawsContent()) {
-          node.expand();
+        layerCount++;
+        totalLayerMemory += layer.gpuMemoryUsage();
+
+        if (layer === root) {
+          return;
         }
-      } else {
-        if (node.parent !== parent) {
-          const oldSelection = this.treeOutline.selectedTreeElement;
-          if (node.parent) {
-            node.parent.removeChild(node);
-          }
-          parent.appendChild(node);
-          if (oldSelection && oldSelection !== this.treeOutline.selectedTreeElement) {
-            oldSelection.select();
+
+        let parentLayer = layer.parent();
+        // Skip till nearest visible ancestor.
+        while (parentLayer && parentLayer !== root && !parentLayer.drawsContent() && !showInternalLayers) {
+          parentLayer = parentLayer.parent();
+        }
+
+        if (parentLayer) {
+          let children = childrenMap.get(parentLayer);
+          if (!children) {
+            children = [];
+            childrenMap.set(parentLayer, children);
           }
+          children.push(layer);
+        } else {
+          console.assert(false, 'Internal error: multiple root layers');
         }
-        node.update();
-      }
+      };
+
+      this.layerTree.forEachLayer(buildTree, root);
     }
-    if (root && this.layerTree) {
-      this.layerTree.forEachLayer(updateLayer.bind(this), root);
+
+    const syncNode =
+        (layer: SDK.LayerTreeBase.Layer, parent: UI.TreeOutline.TreeOutline|UI.TreeOutline.TreeElement): void => {
+          seenLayers.add(layer);
+          let node: LayerTreeElement|null = layerToTreeElement.get(layer) || null;
+          if (!node) {
+            node = new LayerTreeElement(this, layer);
+            parent.appendChild(node);
+            // Expand all new non-content layers to expose content layers better.
+            if (!layer.drawsContent()) {
+              node.expand();
+            }
+          } else {
+            if (node.parent !== parent) {
+              const oldSelection = this.treeOutline.selectedTreeElement;
+              if (node.parent) {
+                node.parent.removeChild(node);
+              }
+              parent.appendChild(node);
+              if (oldSelection && oldSelection !== this.treeOutline.selectedTreeElement) {
+                oldSelection.select();
+              }
+            }
+            node.update();
+          }
+
+          const children = childrenMap.get(layer) || [];
+          for (const child of children) {
+            syncNode(child, node);
+          }
+        };
+
+    if (root && (root.drawsContent() || showInternalLayers)) {
+      syncNode(root, this.treeOutline.rootElement());
     }
+
     // Clean up layers that don't exist anymore from tree.
     const rootElement = this.treeOutline.rootElement();
     for (let node = rootElement.firstChild(); node instanceof LayerTreeElement && !node.root;) {
-      if (seenLayers.get(node.layer)) {
+      if (seenLayers.has(node.layer)) {
         node = node.traverseNextTreeElement(false);
       } else {
         const nextNode = node.nextSibling || node.parent;
@@ -209,8 +258,9 @@ export class LayerTreeOutline extends Common.ObjectWrapper.eventMixin<EventTypes
       }
     }
 
-    this.layerCountElement.textContent = i18nString(UIStrings.layerCount, {PH1: layerCount});
-    this.layerMemoryElement.textContent = i18n.ByteUtilities.bytesToString(totalLayerMemory);
+    this.#layerCount = layerCount;
+    this.#totalLayerMemory = totalLayerMemory;
+    this.requestUpdate();
   }
 
   private onMouseMove(event: MouseEvent): void {

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -120,7 +120,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         uiI18n.getFormatLocalizedString(
           str_, UIStrings.checkSForPossibleReasons,
           {
-            PH1: Link.create('about:gpu', undefined, undefined, 'about-gpu')
+            PH1: Link.create('chrome://gpu', undefined, undefined, 'about-gpu', 0, true)
           }
         )
       ],

package/front_end/panels/layer_viewer/layerTreeOutline.css

@@ -4,19 +4,26 @@
  * found in the LICENSE file.
  */
 
-.layer-summary {
-  border-top: 1px solid var(--sys-color-divider);
-  justify-content: space-between;
-  padding: 4px 10px;
-  flex-shrink: 0;
-}
+@scope to (devtools-widget > *) {
+  .layer-summary {
+    border-top: 1px solid var(--sys-color-divider);
+    justify-content: space-between;
+    padding: 4px 10px;
+    flex-shrink: 0;
+  }
 
-.layer-count {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+  .layer-count {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .layer-tree-wrapper {
+    height: 100%;
+    flex-grow: 1;
+  }
 
-.layer-tree-wrapper {
-  flex-grow: 1;
+  .layer-tree {
+    flex-grow: 1;
+  }
 }

package/front_end/panels/layers/LayersPanel.ts

@@ -47,7 +47,7 @@ export class LayersPanel extends UI.Panel.PanelWithSidebar implements SDK.Target
     this.layerTreeOutline = new LayerViewer.LayerTreeOutline.LayerTreeOutline(this.layerViewHost);
     this.layerTreeOutline.addEventListener(
         LayerViewer.LayerTreeOutline.Events.PAINT_PROFILER_REQUESTED, this.onPaintProfileRequested, this);
-    this.panelSidebarElement().appendChild(this.layerTreeOutline.element);
+    this.layerTreeOutline.show(this.panelSidebarElement());
     this.setDefaultFocusedElement(this.layerTreeOutline.element);
 
     this.rightSplitWidget = new UI.SplitWidget.SplitWidget(false, true, 'layer-details-split-view-state');

package/front_end/panels/mobile_throttling/CalibrationController.ts

@@ -4,6 +4,7 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as PanelsCommon from '../common/common.js';
 
 const UIStrings = {
   /**
@@ -55,7 +56,7 @@ export class CalibrationController {
   #runtimeModel!: SDK.RuntimeModel.RuntimeModel;
   #emulationModel!: SDK.EmulationModel.EmulationModel;
   #originalUrl!: string;
-  #result?: SDK.CPUThrottlingManager.CalibratedCPUThrottling;
+  #result?: PanelsCommon.CPUThrottlingOption.CalibratedCPUThrottling;
   #state: 'idle'|'running'|'aborting' = 'idle';
 
   /**
@@ -220,14 +221,14 @@ export class CalibrationController {
       if (actualScore < midScore) {
         if (actualScore < lowScore) {
           this.#result = {
-            low: SDK.CPUThrottlingManager.CalibrationError.DEVICE_TOO_WEAK,
-            mid: SDK.CPUThrottlingManager.CalibrationError.DEVICE_TOO_WEAK,
+            low: PanelsCommon.CPUThrottlingOption.CalibrationError.DEVICE_TOO_WEAK,
+            mid: PanelsCommon.CPUThrottlingOption.CalibrationError.DEVICE_TOO_WEAK,
           };
           return;
         }
 
         // Can still emulate the low-end device.
-        this.#result = {mid: SDK.CPUThrottlingManager.CalibrationError.DEVICE_TOO_WEAK};
+        this.#result = {mid: PanelsCommon.CPUThrottlingOption.CalibrationError.DEVICE_TOO_WEAK};
         isHalfwayDone = true;
       }
     }
@@ -258,7 +259,7 @@ export class CalibrationController {
     }
   }
 
-  result(): SDK.CPUThrottlingManager.CalibratedCPUThrottling|undefined {
+  result(): PanelsCommon.CPUThrottlingOption.CalibratedCPUThrottling|undefined {
     return this.#result;
   }
 

package/front_end/panels/mobile_throttling/MobileThrottlingSelector.ts

@@ -70,7 +70,7 @@ export class MobileThrottlingSelector {
     this.populateOptions();
 
     const networkConditions = SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions();
-    const cpuThrottlingOption = SDK.CPUThrottlingManager.CPUThrottlingManager.instance().cpuThrottlingOption();
+    const cpuThrottlingOption = throttlingManager().cpuThrottlingOption();
     for (let index = 0; index < this.options.length; ++index) {
       const option = this.options[index];
       if (option && 'network' in option && option.network === networkConditions &&

package/front_end/panels/mobile_throttling/ThrottlingManager.ts

@@ -11,6 +11,7 @@ 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 * as PanelsCommon from '../common/common.js';
 
 import {MobileThrottlingSelector} from './MobileThrottlingSelector.js';
 import {
@@ -22,7 +23,7 @@ import {
 
 export interface CPUThrottlingSelectorWrapper {
   control: UI.Toolbar.ToolbarComboBox;
-  updateRecommendedOption(recommendedOption: SDK.CPUThrottlingManager.CPUThrottlingOption|null): void;
+  updateRecommendedOption(recommendedOption: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption|null): void;
 }
 
 const UIStrings = {
@@ -109,15 +110,17 @@ class PromiseQueue<T> {
 
 export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<ThrottlingManager.EventTypes> {
   private readonly cpuThrottlingControls: Set<UI.Toolbar.ToolbarComboBox>;
-  private readonly cpuThrottlingOptions: SDK.CPUThrottlingManager.CPUThrottlingOption[];
+  private readonly cpuThrottlingOptions: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption[];
   private readonly customNetworkConditionsSetting: Common.Settings.Setting<SDK.NetworkManager.Conditions[]>;
   private readonly currentNetworkThrottlingConditionKeySetting:
       Common.Settings.Setting<SDK.NetworkManager.ThrottlingConditionKey>;
   private readonly calibratedCpuThrottlingSetting:
-      Common.Settings.Setting<SDK.CPUThrottlingManager.CalibratedCPUThrottling>;
+      Common.Settings.Setting<PanelsCommon.CPUThrottlingOption.CalibratedCPUThrottling>;
   private lastNetworkThrottlingConditions!: SDK.NetworkManager.Conditions;
   private readonly cpuThrottlingManager: SDK.CPUThrottlingManager.CPUThrottlingManager;
   #hardwareConcurrencyOverrideEnabled = false;
+  #currentCPUThrottlingOption: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption =
+      PanelsCommon.CPUThrottlingOption.NoThrottlingOption;
   readonly #emulationQueue = new PromiseQueue<void>();
   get hardwareConcurrencyOverrideEnabled(): boolean {
     return this.#hardwareConcurrencyOverrideEnabled;
@@ -136,8 +139,9 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
     this.currentNetworkThrottlingConditionKeySetting = SDK.NetworkManager.activeNetworkThrottlingKeySetting();
 
     this.calibratedCpuThrottlingSetting =
-        Common.Settings.Settings.instance().createSetting<SDK.CPUThrottlingManager.CalibratedCPUThrottling>(
+        Common.Settings.Settings.instance().createSetting<PanelsCommon.CPUThrottlingOption.CalibratedCPUThrottling>(
             'calibrated-cpu-throttling', {}, Common.Settings.SettingStorageType.GLOBAL);
+    this.calibratedCpuThrottlingSetting.addChangeListener(this.onCalibratedSettingChanged, this);
 
     SDK.NetworkManager.MultitargetNetworkManager.instance().addEventListener(
         SDK.NetworkManager.MultitargetNetworkManager.Events.CONDITIONS_CHANGED, () => {
@@ -250,23 +254,46 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
 
   private updatePanelIcon(): void {
     const warnings = [];
-    if (this.cpuThrottlingManager.cpuThrottlingRate() !== SDK.CPUThrottlingManager.CPUThrottlingRates.NO_THROTTLING) {
+    if (this.cpuThrottlingManager.cpuThrottlingRate() !==
+        PanelsCommon.CPUThrottlingOption.CPUThrottlingRates.NO_THROTTLING) {
       warnings.push(i18nString(UIStrings.cpuThrottlingIsEnabled));
     }
     UI.InspectorView.InspectorView.instance().setPanelWarnings('timeline', warnings);
   }
 
-  setCPUThrottlingOption(option: SDK.CPUThrottlingManager.CPUThrottlingOption): void {
-    // This will transitively call onCPUThrottlingRateChangedOnSDK.
-    this.cpuThrottlingManager.setCPUThrottlingOption(option);
+  cpuThrottlingOption(): PanelsCommon.CPUThrottlingOption.CPUThrottlingOption {
+    return this.#currentCPUThrottlingOption;
+  }
+
+  setCPUThrottlingOption(option: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption): void {
+    if (this.#currentCPUThrottlingOption === option) {
+      return;
+    }
+    this.#currentCPUThrottlingOption = option;
+    this.cpuThrottlingManager.setCPUThrottlingRate(option.rate());
+  }
+
+  private onCalibratedSettingChanged(): void {
+    if (!this.#currentCPUThrottlingOption.calibratedDeviceType) {
+      return;
+    }
+    const rate = this.#currentCPUThrottlingOption.rate();
+    if (rate === 0) {
+      this.setCPUThrottlingOption(PanelsCommon.CPUThrottlingOption.NoThrottlingOption);
+      return;
+    }
+    this.cpuThrottlingManager.setCPUThrottlingRate(rate);
   }
 
   onCPUThrottlingRateChangedOnSDK(rate: number): void {
-    if (rate !== SDK.CPUThrottlingManager.CPUThrottlingRates.NO_THROTTLING) {
+    if (rate !== PanelsCommon.CPUThrottlingOption.CPUThrottlingRates.NO_THROTTLING) {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.CpuThrottlingEnabled);
     }
 
-    const index = this.cpuThrottlingOptions.indexOf(this.cpuThrottlingManager.cpuThrottlingOption());
+    const option = PanelsCommon.CPUThrottlingOption.determineOptionFromRate(rate, this.#currentCPUThrottlingOption);
+    this.#currentCPUThrottlingOption = option;
+
+    const index = this.cpuThrottlingOptions.indexOf(option);
     for (const control of this.cpuThrottlingControls) {
       control.setSelectedIndex(index);
     }
@@ -282,7 +309,7 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
 
     const optionSelected = (): void => {
       if (control.selectedIndex() === control.options().length - 1) {
-        const index = this.cpuThrottlingOptions.indexOf(this.cpuThrottlingManager.cpuThrottlingOption());
+        const index = this.cpuThrottlingOptions.indexOf(this.#currentCPUThrottlingOption);
         control.setSelectedIndex(index);
         void Common.Revealer.reveal(this.calibratedCpuThrottlingSetting);
       } else {
@@ -293,7 +320,7 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
     const control =
         new UI.Toolbar.ToolbarComboBox(optionSelected, i18nString(UIStrings.cpuThrottling), '', 'cpu-throttling');
     this.cpuThrottlingControls.add(control);
-    const currentOption = this.cpuThrottlingManager.cpuThrottlingOption();
+    const currentOption = this.#currentCPUThrottlingOption;
 
     const optionEls: HTMLOptionElement[] = [];
     const options = this.cpuThrottlingOptions;
@@ -317,7 +344,7 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
 
     return {
       control,
-      updateRecommendedOption(recommendedOption: SDK.CPUThrottlingManager.CPUThrottlingOption|null) {
+      updateRecommendedOption(recommendedOption: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption|null) {
         for (let i = 0; i < optionEls.length - 1; i++) {
           const option = options[i];
           optionEls[i].text = option === recommendedOption ?

package/front_end/panels/mobile_throttling/ThrottlingPresets.ts

@@ -4,6 +4,7 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as PanelsCommon from '../common/common.js';
 
 const UIStrings = {
   /**
@@ -61,7 +62,7 @@ export class ThrottlingPresets {
       title,
       description: i18nString(UIStrings.noThrottling),
       network: SDK.NetworkManager.NoThrottlingConditions,
-      cpuThrottlingOption: SDK.CPUThrottlingManager.NoThrottlingOption,
+      cpuThrottlingOption: PanelsCommon.CPUThrottlingOption.NoThrottlingOption,
       jslogContext: 'no-throttling',
     };
   }
@@ -74,15 +75,16 @@ export class ThrottlingPresets {
       title,
       description: i18nString(UIStrings.noInternetConnectivity),
       network: SDK.NetworkManager.OfflineConditions,
-      cpuThrottlingOption: SDK.CPUThrottlingManager.NoThrottlingOption,
+      cpuThrottlingOption: PanelsCommon.CPUThrottlingOption.NoThrottlingOption,
       jslogContext: 'offline',
     };
   }
 
   static getLowEndMobileConditions(): Conditions {
-    const useCalibrated = SDK.CPUThrottlingManager.CalibratedLowTierMobileThrottlingOption.rate() !== 0;
-    const cpuThrottlingOption = useCalibrated ? SDK.CPUThrottlingManager.CalibratedLowTierMobileThrottlingOption :
-                                                SDK.CPUThrottlingManager.LowTierThrottlingOption;
+    const useCalibrated = PanelsCommon.CPUThrottlingOption.CalibratedLowTierMobileThrottlingOption.rate() !== 0;
+    const cpuThrottlingOption = useCalibrated ?
+        PanelsCommon.CPUThrottlingOption.CalibratedLowTierMobileThrottlingOption :
+        PanelsCommon.CPUThrottlingOption.LowTierThrottlingOption;
     const description = useCalibrated ?
         i18nString(UIStrings.slowGXCpuSlowdownCalibrated, {PH1: cpuThrottlingOption.rate()}) :
         i18nString(UIStrings.slowGXCpuSlowdown);
@@ -97,9 +99,10 @@ export class ThrottlingPresets {
   }
 
   static getMidTierMobileConditions(): Conditions {
-    const useCalibrated = SDK.CPUThrottlingManager.CalibratedMidTierMobileThrottlingOption.rate() !== 0;
-    const cpuThrottlingOption = useCalibrated ? SDK.CPUThrottlingManager.CalibratedMidTierMobileThrottlingOption :
-                                                SDK.CPUThrottlingManager.MidTierThrottlingOption;
+    const useCalibrated = PanelsCommon.CPUThrottlingOption.CalibratedMidTierMobileThrottlingOption.rate() !== 0;
+    const cpuThrottlingOption = useCalibrated ?
+        PanelsCommon.CPUThrottlingOption.CalibratedMidTierMobileThrottlingOption :
+        PanelsCommon.CPUThrottlingOption.MidTierThrottlingOption;
     const description = useCalibrated ?
         i18nString(UIStrings.fastGXCpuSlowdownCalibrated, {PH1: cpuThrottlingOption.rate()}) :
         i18nString(UIStrings.fastGXCpuSlowdown);
@@ -142,14 +145,7 @@ export class ThrottlingPresets {
     SDK.NetworkManager.OfflineConditions,
   ];
 
-  static cpuThrottlingPresets: SDK.CPUThrottlingManager.CPUThrottlingOption[] = [
-    SDK.CPUThrottlingManager.NoThrottlingOption,
-    SDK.CPUThrottlingManager.MidTierThrottlingOption,
-    SDK.CPUThrottlingManager.LowTierThrottlingOption,
-    SDK.CPUThrottlingManager.ExtraSlowThrottlingOption,
-    SDK.CPUThrottlingManager.CalibratedLowTierMobileThrottlingOption,
-    SDK.CPUThrottlingManager.CalibratedMidTierMobileThrottlingOption,
-  ];
+  static cpuThrottlingPresets = PanelsCommon.CPUThrottlingOption.cpuThrottlingPresets;
 }
 
 // @ts-expect-error exported for Tests.js
@@ -161,7 +157,7 @@ export interface Conditions {
   title: string;
   description: string;
   network: SDK.NetworkManager.Conditions;
-  cpuThrottlingOption: SDK.CPUThrottlingManager.CPUThrottlingOption;
+  cpuThrottlingOption: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption;
   jslogContext?: string;
 }