[SDK] Use context-based settings in OverlayModel

Bug: 493760728
Change-Id: I2ad020276f49f51dc92f3ae57dc23517f4f2d858
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7693616
Commit-Queue: Simon Zünd <szuend@chromium.org>
Reviewed-by: Kim-Anh Tran <kimanh@chromium.org>

Author: szuend

front_end/core/sdk/OverlayModel.ts

@@ -97,10 +97,10 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
     target.registerOverlayDispatcher(this);
     this.overlayAgent = target.overlayAgent();
 
+    const settings = this.target().targetManager().settings;
     this.#debuggerModel = target.model(DebuggerModel);
     if (this.#debuggerModel) {
-      Common.Settings.Settings.instance()
-          .moduleSetting('disable-paused-state-overlay')
+      settings.moduleSetting('disable-paused-state-overlay')
           .addChangeListener(this.updatePausedInDebuggerMessage, this);
       this.#debuggerModel.addEventListener(
           DebuggerModelEvents.DebuggerPaused, this.updatePausedInDebuggerMessage, this);
@@ -114,21 +114,19 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
     this.#defaultHighlighter = new DefaultHighlighter(this);
     this.#highlighter = this.#defaultHighlighter;
 
-    this.#showPaintRectsSetting = Common.Settings.Settings.instance().moduleSetting<boolean>('show-paint-rects');
-    this.#showLayoutShiftRegionsSetting =
-        Common.Settings.Settings.instance().moduleSetting<boolean>('show-layout-shift-regions');
-    this.#showAdHighlightsSetting = Common.Settings.Settings.instance().moduleSetting<boolean>('show-ad-highlights');
-    this.#showDebugBordersSetting = Common.Settings.Settings.instance().moduleSetting<boolean>('show-debug-borders');
-    this.#showFPSCounterSetting = Common.Settings.Settings.instance().moduleSetting<boolean>('show-fps-counter');
-    this.#showScrollBottleneckRectsSetting =
-        Common.Settings.Settings.instance().moduleSetting<boolean>('show-scroll-bottleneck-rects');
+    this.#showPaintRectsSetting = settings.moduleSetting<boolean>('show-paint-rects');
+    this.#showLayoutShiftRegionsSetting = settings.moduleSetting<boolean>('show-layout-shift-regions');
+    this.#showAdHighlightsSetting = settings.moduleSetting<boolean>('show-ad-highlights');
+    this.#showDebugBordersSetting = settings.moduleSetting<boolean>('show-debug-borders');
+    this.#showFPSCounterSetting = settings.moduleSetting<boolean>('show-fps-counter');
+    this.#showScrollBottleneckRectsSetting = settings.moduleSetting<boolean>('show-scroll-bottleneck-rects');
 
     if (!target.suspended()) {
       void this.overlayAgent.invoke_enable();
       void this.wireAgentToSettings();
     }
 
-    this.#persistentHighlighter = new OverlayPersistentHighlighter(this, {
+    this.#persistentHighlighter = new OverlayPersistentHighlighter(this, settings, {
       onGridOverlayStateChanged: ({nodeId, enabled}) => {
         this.#domModel.nodeForId(nodeId)?.dispatchEventToListeners(DOMNodeEvents.GRID_OVERLAY_STATE_CHANGED, {enabled});
         this.dispatchEventToListeners(Events.PERSISTENT_GRID_OVERLAY_STATE_CHANGED, {nodeId, enabled});
@@ -291,8 +289,9 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
     if (this.target().suspended()) {
       return;
     }
+    const settings = this.target().targetManager().settings;
     const message = this.#debuggerModel && this.#debuggerModel.isPaused() &&
-            !Common.Settings.Settings.instance().moduleSetting('disable-paused-state-overlay').get() ?
+            !settings.moduleSetting('disable-paused-state-overlay').get() ?
         i18nString(UIStrings.pausedInDebugger) :
         undefined;
     void this.overlayAgent.invoke_setPausedInDebuggerMessage({message});
@@ -524,7 +523,8 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
 
   private buildHighlightConfig(mode: string|undefined = 'all', showDetailedToolip: boolean|undefined = false):
       Protocol.Overlay.HighlightConfig {
-    const showRulers = Common.Settings.Settings.instance().moduleSetting('show-metrics-rulers').get();
+    const settings = this.target().targetManager().settings;
+    const showRulers = settings.moduleSetting('show-metrics-rulers').get();
     const highlightConfig: Protocol.Overlay.HighlightConfig = {
       showInfo: mode === 'all' || mode === 'container-outline',
       showRulers,

front_end/core/sdk/OverlayPersistentHighlighter.test.ts

@@ -95,7 +95,8 @@ describeWithEnvironment('OverlayPersistentHighlighter', () => {
       }),
     });
 
-    highlighter = new SDK.OverlayPersistentHighlighter.OverlayPersistentHighlighter(mockOverlayModel, stubbedCallbacks);
+    highlighter = new SDK.OverlayPersistentHighlighter.OverlayPersistentHighlighter(
+        mockOverlayModel, Common.Settings.Settings.instance(), stubbedCallbacks);
     resetSavedSetting();
   });
 

front_end/core/sdk/OverlayPersistentHighlighter.ts

@@ -33,9 +33,7 @@ export interface PersistentHighlighterCallbacks {
 export class OverlayPersistentHighlighter {
   readonly #model: OverlayModel;
   readonly #colors = new Map<Protocol.DOM.NodeId, Common.Color.Color>();
-  readonly #persistentHighlightSetting =
-      Common.Settings.Settings.instance().createLocalSetting<PersistentHighlightSettingItem[]>(
-          'persistent-highlight-setting', []);
+  readonly #persistentHighlightSetting: Common.Settings.Setting<PersistentHighlightSettingItem[]>;
   #gridHighlights = new Map<Protocol.DOM.NodeId, Protocol.Overlay.GridHighlightConfig>();
   #scrollSnapHighlights = new Map<Protocol.DOM.NodeId, Protocol.Overlay.ScrollSnapContainerHighlightConfig>();
   #flexHighlights = new Map<Protocol.DOM.NodeId, Protocol.Overlay.FlexContainerHighlightConfig>();
@@ -47,18 +45,23 @@ export class OverlayPersistentHighlighter {
   /**
    * @see `front_end/core/sdk/sdk-meta.ts`
    */
-  readonly #showGridLineLabelsSetting =
-      Common.Settings.Settings.instance().moduleSetting<string>('show-grid-line-labels');
-  readonly #extendGridLinesSetting = Common.Settings.Settings.instance().moduleSetting<boolean>('extend-grid-lines');
-  readonly #showGridAreasSetting = Common.Settings.Settings.instance().moduleSetting<boolean>('show-grid-areas');
-  readonly #showGridTrackSizesSetting =
-      Common.Settings.Settings.instance().moduleSetting<boolean>('show-grid-track-sizes');
+  readonly #showGridLineLabelsSetting: Common.Settings.Setting<string>;
+  readonly #extendGridLinesSetting: Common.Settings.Setting<boolean>;
+  readonly #showGridAreasSetting: Common.Settings.Setting<boolean>;
+  readonly #showGridTrackSizesSetting: Common.Settings.Setting<boolean>;
 
   readonly #callbacks: PersistentHighlighterCallbacks;
-  constructor(model: OverlayModel, callbacks: PersistentHighlighterCallbacks) {
+  constructor(model: OverlayModel, settings: Common.Settings.Settings, callbacks: PersistentHighlighterCallbacks) {
     this.#model = model;
     this.#callbacks = callbacks;
 
+    this.#persistentHighlightSetting =
+        settings.createLocalSetting<PersistentHighlightSettingItem[]>('persistent-highlight-setting', []);
+    this.#showGridLineLabelsSetting = settings.moduleSetting<string>('show-grid-line-labels');
+    this.#extendGridLinesSetting = settings.moduleSetting<boolean>('extend-grid-lines');
+    this.#showGridAreasSetting = settings.moduleSetting<boolean>('show-grid-areas');
+    this.#showGridTrackSizesSetting = settings.moduleSetting<boolean>('show-grid-track-sizes');
+
     this.#showGridLineLabelsSetting.addChangeListener(this.onSettingChange, this);
     this.#extendGridLinesSetting.addChangeListener(this.onSettingChange, this);
     this.#showGridAreasSetting.addChangeListener(this.onSettingChange, this);