chrome-devtools-frontend 1.0.1017091 → 1.0.1018017

package/front_end/core/i18n/locales/en-US.json

@@ -3035,6 +3035,9 @@
   "panels/application/components/FrameDetailsView.ts | creationStackTraceExplanation": {
     "message": "This frame was created programmatically. The stack trace shows where this happened."
   },
+  "panels/application/components/FrameDetailsView.ts | creatorAdScript": {
+    "message": "Creator Ad Script"
+  },
   "panels/application/components/FrameDetailsView.ts | crossoriginIsolated": {
     "message": "Cross-Origin Isolated"
   },
@@ -4892,12 +4895,6 @@
   "panels/elements/ElementsTreeElement.ts | enableScrollSnap": {
     "message": "Enable scroll-snap overlay"
   },
-  "panels/elements/ElementsTreeElement.ts | enterIsolationMode": {
-    "message": "Enter Isolation Mode"
-  },
-  "panels/elements/ElementsTreeElement.ts | exitIsolationMode": {
-    "message": "Exit Isolation Mode"
-  },
   "panels/elements/ElementsTreeElement.ts | expandRecursively": {
     "message": "Expand recursively"
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -3035,6 +3035,9 @@
   "panels/application/components/FrameDetailsView.ts | creationStackTraceExplanation": {
     "message": "T̂h́îś f̂ŕâḿê ẃâś ĉŕêát̂éd̂ ṕr̂óĝŕâḿm̂át̂íĉál̂ĺŷ. T́ĥé stack trace ŝh́ôẃŝ ẃĥér̂é t̂h́îś ĥáp̂ṕêńêd́."
   },
+  "panels/application/components/FrameDetailsView.ts | creatorAdScript": {
+    "message": "Ĉŕêát̂ór̂ Ád̂ Śĉŕîṕt̂"
+  },
   "panels/application/components/FrameDetailsView.ts | crossoriginIsolated": {
     "message": "Ĉŕôśŝ-Ór̂íĝín̂ Íŝól̂át̂éd̂"
   },
@@ -4892,12 +4895,6 @@
   "panels/elements/ElementsTreeElement.ts | enableScrollSnap": {
     "message": "Êńâb́l̂é ŝćr̂ól̂ĺ-ŝńâṕ ôv́êŕl̂áŷ"
   },
-  "panels/elements/ElementsTreeElement.ts | enterIsolationMode": {
-    "message": "Êńt̂ér̂ Íŝól̂át̂íôń M̂ód̂é"
-  },
-  "panels/elements/ElementsTreeElement.ts | exitIsolationMode": {
-    "message": "Êx́ît́ Îśôĺât́îón̂ Ḿôd́ê"
-  },
   "panels/elements/ElementsTreeElement.ts | expandRecursively": {
     "message": "Êx́p̂án̂d́ r̂éĉúr̂śîv́êĺŷ"
   },

package/front_end/core/sdk/DebuggerModel.ts

@@ -230,6 +230,10 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     return Boolean(this.#debuggerEnabledInternal);
   }
 
+  debuggerId(): string|null {
+    return this.#debuggerId;
+  }
+
   private async enableDebugger(): Promise<void> {
     if (this.#debuggerEnabledInternal) {
       return;

package/front_end/core/sdk/FrameManager.ts

@@ -28,8 +28,12 @@ export class FrameManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   }>;
   readonly #framesForTarget: Map<Protocol.Target.TargetID|'main', Set<Protocol.Page.FrameId>>;
   #topFrame: ResourceTreeFrame|null;
-  #creationStackTraceDataForTransferringFrame:
-      Map<string, {creationStackTrace: Protocol.Runtime.StackTrace | null, creationStackTraceTarget: Target}>;
+  #transferringFramesDataCache: Map<string, {
+    creationStackTrace?: Protocol.Runtime.StackTrace,
+    creationStackTraceTarget?: Target,
+    adScriptId?: Protocol.Runtime.ScriptId,
+    debuggerId?: Protocol.Runtime.UniqueDebuggerId,
+  }>;
   #awaitedFrames: Map<string, {notInTarget?: Target, resolve: (frame: ResourceTreeFrame) => void}[]> = new Map();
 
   constructor() {
@@ -46,7 +50,7 @@ export class FrameManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     this.#framesForTarget = new Map();
 
     this.#topFrame = null;
-    this.#creationStackTraceDataForTransferringFrame = new Map();
+    this.#transferringFramesDataCache = new Map();
   }
 
   static instance({forceNew}: {
@@ -94,19 +98,30 @@ export class FrameManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     const frameData = this.#frames.get(frame.id);
     // If the frame is already in the map, increase its count, otherwise add it to the map.
     if (frameData) {
-      // In order to not lose frame creation stack trace information during
-      // an OOPIF transfer we need to copy it to the new frame
+      // In order to not lose the following attributes of a frame during
+      // an OOPIF transfer we need to copy them to the new frame
       frame.setCreationStackTrace(frameData.frame.getCreationStackTraceData());
+      frame.setAdScriptId(frameData.frame.getAdScriptId());
+      frame.setDebuggerId(frameData.frame.getDebuggerId());
       this.#frames.set(frame.id, {frame, count: frameData.count + 1});
     } else {
       // If the transferring frame's detached event is received before its frame added
-      // event in the new target, the persisted frame creation stacktrace is reassigned.
-      const traceData = this.#creationStackTraceDataForTransferringFrame.get(frame.id);
-      if (traceData && traceData.creationStackTrace) {
-        frame.setCreationStackTrace(traceData);
+      // event in the new target, the frame's cached attributes are reassigned.
+      const cachedFrameAttributes = this.#transferringFramesDataCache.get(frame.id);
+      if (cachedFrameAttributes?.creationStackTrace && cachedFrameAttributes?.creationStackTraceTarget) {
+        frame.setCreationStackTrace({
+          creationStackTrace: cachedFrameAttributes.creationStackTrace,
+          creationStackTraceTarget: cachedFrameAttributes.creationStackTraceTarget,
+        });
+      }
+      if (cachedFrameAttributes?.adScriptId) {
+        frame.setAdScriptId(cachedFrameAttributes.adScriptId);
+      }
+      if (cachedFrameAttributes?.debuggerId) {
+        frame.setDebuggerId(cachedFrameAttributes.debuggerId);
       }
       this.#frames.set(frame.id, {frame, count: 1});
-      this.#creationStackTraceDataForTransferringFrame.delete(frame.id);
+      this.#transferringFramesDataCache.delete(frame.id);
     }
     this.resetTopFrame();
 
@@ -126,13 +141,19 @@ export class FrameManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     this.decreaseOrRemoveFrame(frame.id);
 
     // If the transferring frame's detached event is received before its frame
-    // added event in the new target, we persist the frame creation stacktrace here
-    // so that later on the frame added event in the new target it can be reassigned.
+    // added event in the new target, we persist some attributes of the frame here
+    // so that later on the frame added event in the new target they can be reassigned.
     if (isSwap && !this.#frames.get(frame.id)) {
       const traceData = frame.getCreationStackTraceData();
-      if (traceData.creationStackTrace) {
-        this.#creationStackTraceDataForTransferringFrame.set(frame.id, traceData);
-      }
+      const adScriptId = frame.getAdScriptId();
+      const debuggerId = frame.getDebuggerId();
+      const cachedFrameAttributes = {
+        ...(traceData.creationStackTrace && {creationStackTrace: traceData.creationStackTrace}),
+        ...(traceData.creationStackTrace && {creationStackTraceTarget: traceData.creationStackTraceTarget}),
+        ...(adScriptId && {adScriptId}),
+        ...(debuggerId && {debuggerId}),
+      };
+      this.#transferringFramesDataCache.set(frame.id, cachedFrameAttributes);
     }
 
     // Remove the frameId from the target's set of frameIds.

package/front_end/core/sdk/ResourceTreeModel.ts

@@ -182,7 +182,7 @@ export class ResourceTreeModel extends SDKModel<EventTypes> {
 
   frameAttached(
       frameId: Protocol.Page.FrameId, parentFrameId: Protocol.Page.FrameId|null,
-      stackTrace?: Protocol.Runtime.StackTrace): ResourceTreeFrame|null {
+      stackTrace?: Protocol.Runtime.StackTrace, adScriptId?: Protocol.Page.AdScriptId): ResourceTreeFrame|null {
     const sameTargetParentFrame = parentFrameId ? (this.framesInternal.get(parentFrameId) || null) : null;
     // Do nothing unless cached resource tree is processed - it will overwrite everything.
     if (!this.#cachedResourcesProcessed && sameTargetParentFrame) {
@@ -192,7 +192,8 @@ export class ResourceTreeModel extends SDKModel<EventTypes> {
       return null;
     }
 
-    const frame = new ResourceTreeFrame(this, sameTargetParentFrame, frameId, null, stackTrace || null);
+    const frame =
+        new ResourceTreeFrame(this, sameTargetParentFrame, frameId, null, stackTrace || null, adScriptId || null);
     if (parentFrameId && !sameTargetParentFrame) {
       frame.crossTargetParentFrameId = parentFrameId;
     }
@@ -348,7 +349,7 @@ export class ResourceTreeModel extends SDKModel<EventTypes> {
   private addFramesRecursively(
       sameTargetParentFrame: ResourceTreeFrame|null, frameTreePayload: Protocol.Page.FrameResourceTree): void {
     const framePayload = frameTreePayload.frame;
-    const frame = new ResourceTreeFrame(this, sameTargetParentFrame, framePayload.id, framePayload, null);
+    const frame = new ResourceTreeFrame(this, sameTargetParentFrame, framePayload.id, framePayload, null, null);
     if (!sameTargetParentFrame && framePayload.parentId) {
       frame.crossTargetParentFrameId = framePayload.parentId;
     }
@@ -681,6 +682,8 @@ export class ResourceTreeFrame {
   #creationStackTrace: Protocol.Runtime.StackTrace|null;
   #creationStackTraceTarget: Target|null;
   #childFramesInternal: Set<ResourceTreeFrame>;
+  #adScriptId: Protocol.Runtime.ScriptId|null;
+  #debuggerId: Protocol.Runtime.UniqueDebuggerId|null;
   resourcesMap: Map<Platform.DevToolsPath.UrlString, Resource>;
   backForwardCacheDetails: {
     restoredFromCache: boolean|undefined,
@@ -695,7 +698,8 @@ export class ResourceTreeFrame {
 
   constructor(
       model: ResourceTreeModel, parentFrame: ResourceTreeFrame|null, frameId: Protocol.Page.FrameId,
-      payload: Protocol.Page.Frame|null, creationStackTrace: Protocol.Runtime.StackTrace|null) {
+      payload: Protocol.Page.Frame|null, creationStackTrace: Protocol.Runtime.StackTrace|null,
+      adScriptId: Protocol.Page.AdScriptId|null) {
     this.#model = model;
     this.#sameTargetParentFrameInternal = parentFrame;
     this.#idInternal = frameId;
@@ -717,6 +721,9 @@ export class ResourceTreeFrame {
     this.#creationStackTrace = creationStackTrace;
     this.#creationStackTraceTarget = null;
 
+    this.#adScriptId = adScriptId?.scriptId || null;
+    this.#debuggerId = adScriptId?.debuggerId || null;
+
     this.#childFramesInternal = new Set();
 
     this.resourcesMap = new Map();
@@ -801,6 +808,22 @@ export class ResourceTreeFrame {
     return this.#domainAndRegistryInternal;
   }
 
+  getAdScriptId(): Protocol.Runtime.ScriptId|null {
+    return this.#adScriptId;
+  }
+
+  setAdScriptId(adScriptId: Protocol.Runtime.ScriptId|null): void {
+    this.#adScriptId = adScriptId;
+  }
+
+  getDebuggerId(): Protocol.Runtime.UniqueDebuggerId|null {
+    return this.#debuggerId;
+  }
+
+  setDebuggerId(debuggerId: Protocol.Runtime.UniqueDebuggerId|null): void {
+    this.#debuggerId = debuggerId;
+  }
+
   get securityOrigin(): string|null {
     return this.#securityOriginInternal;
   }
@@ -1087,8 +1110,8 @@ export class PageDispatcher implements ProtocolProxyApi.PageDispatcher {
     this.#resourceTreeModel.dispatchEventToListeners(Events.LifecycleEvent, {frameId, name});
   }
 
-  frameAttached({frameId, parentFrameId, stack}: Protocol.Page.FrameAttachedEvent): void {
-    this.#resourceTreeModel.frameAttached(frameId, parentFrameId, stack);
+  frameAttached({frameId, parentFrameId, stack, adScriptId}: Protocol.Page.FrameAttachedEvent): void {
+    this.#resourceTreeModel.frameAttached(frameId, parentFrameId, stack, adScriptId);
   }
 
   frameNavigated({frame, type}: Protocol.Page.FrameNavigatedEvent): void {

package/front_end/core/sdk/SourceMap.ts

@@ -451,11 +451,10 @@ export class TextSourceMap implements SourceMap {
       if (url === this.#compiledURLInternal && source) {
         url = Common.ParsedURL.ParsedURL.concatenate(url, '? [sm]');
       }
-      if (this.#sourceInfos.has(url)) {
-        continue;
-      }
-      this.#sourceInfos.set(url, new TextSourceMap.SourceInfo(source ?? null));
       sourcesList.push(url);
+      if (!this.#sourceInfos.has(url)) {
+        this.#sourceInfos.set(url, new TextSourceMap.SourceInfo(source ?? null));
+      }
     }
     sourceMapToSourceList.set(sourceMap, sourcesList);
   }

package/front_end/models/issues_manager/DeprecationIssue.ts

@@ -253,7 +253,8 @@ const UIStrings = {
    */
   rtcpMuxPolicyNegotiate: 'The `rtcpMuxPolicy` option is deprecated and will be removed.',
   /**
-   * @description TODO(crbug.com/1318878): Description needed for translation
+   * @description A deprecation warning shown in the DevTools Issues tab. The placeholder is always the noun
+   * "SharedArrayBuffer" which refers to a JavaScript construct.
    */
   sharedArrayBufferConstructedWithoutIsolation:
       '`SharedArrayBuffer` will require cross-origin isolation. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details.',
@@ -265,7 +266,9 @@ const UIStrings = {
   textToSpeech_DisallowedByAutoplay:
       '`speechSynthesis.speak()` without user activation is deprecated and will be removed.',
   /**
-   * @description TODO(crbug.com/1318879): Description needed for translation
+   * @description A deprecation warning shown in the DevTools Issues tab. The placeholder is always the noun
+   * "SharedArrayBuffer" which refers to a JavaScript construct. "Extensions" refers to Chrome extensions. The warning is shown
+   * when Chrome Extensions attempt to use "SharedArrayBuffer"s under insecure circumstances.
    */
   v8SharedArrayBufferConstructedInExtensionWithoutIsolation:
       'Extensions should opt into cross-origin isolation to continue using `SharedArrayBuffer`. See https://developer.chrome.com/docs/extensions/mv3/cross-origin-isolation/.',

package/front_end/models/timeline_model/TimelineModel.ts

@@ -181,7 +181,7 @@ export class TimelineModelImpl {
       case RecordType.MarkLoad:
       case RecordType.MarkLCPCandidate:
       case RecordType.MarkLCPInvalidate:
-        return Boolean(event.args['data']['isMainFrame']);
+        return Boolean(event.args['data']['isOutermostMainFrame'] ?? event.args['data']['isMainFrame']);
       default:
         return false;
     }
@@ -203,11 +203,13 @@ export class TimelineModelImpl {
   }
 
   isLCPCandidateEvent(event: SDK.TracingModel.Event): boolean {
-    return event.name === RecordType.MarkLCPCandidate && Boolean(event.args['data']['isMainFrame']);
+    return event.name === RecordType.MarkLCPCandidate &&
+        Boolean(event.args['data']['isOutermostMainFrame'] ?? event.args['data']['isMainFrame']);
   }
 
   isLCPInvalidateEvent(event: SDK.TracingModel.Event): boolean {
-    return event.name === RecordType.MarkLCPInvalidate && Boolean(event.args['data']['isMainFrame']);
+    return event.name === RecordType.MarkLCPInvalidate &&
+        Boolean(event.args['data']['isOutermostMainFrame'] ?? event.args['data']['isMainFrame']);
   }
 
   isFCPEvent(event: SDK.TracingModel.Event): boolean {
@@ -1133,7 +1135,7 @@ export class TimelineModelImpl {
           break;
         }
         const frameId = TimelineModelImpl.eventFrameId(event);
-        const isMainFrame = Boolean(eventData['isMainFrame']);
+        const isOutermostMainFrame = Boolean(eventData['isOutermostMainFrame'] ?? eventData['isMainFrame']);
         const pageFrame = frameId ? this.pageFrames.get(frameId) : null;
         if (pageFrame) {
           pageFrame.update(event.startTime, eventData);
@@ -1144,13 +1146,13 @@ export class TimelineModelImpl {
             if (eventData['page'] && eventData['page'] !== this.legacyCurrentPage) {
               return false;
             }
-          } else if (isMainFrame) {
+          } else if (isOutermostMainFrame) {
             return false;
           } else if (!this.addPageFrame(event, eventData)) {
             return false;
           }
         }
-        if (isMainFrame && frameId) {
+        if (isOutermostMainFrame && frameId) {
           const frame = this.pageFrames.get(frameId);
           if (frame) {
             this.mainFrame = frame;

package/front_end/panels/application/components/FrameDetailsView.ts

@@ -10,7 +10,7 @@ import * as Bindings from '../../../models/bindings/bindings.js';
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as NetworkForward from '../../../panels/network/forward/forward.js';
-import type * as Platform from '../../../core/platform/platform.js';
+import * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
@@ -248,6 +248,10 @@ const UIStrings = {
   *@description Label for subtitle of frame details view
   */
   prerenderingStatus: 'Prerendering Status',
+  /**
+  *@description Label for a link to an ad script, which created the current iframe.
+  */
+  creatorAdScript: 'Creator Ad Script',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/FrameDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -266,7 +270,10 @@ export class FrameDetailsView extends UI.ThrottledWidget.ThrottledWidget {
   }
 
   async doUpdate(): Promise<void> {
-    this.#reportView.data = {frame: this.#frame};
+    const debuggerId = this.#frame?.getDebuggerId();
+    const debuggerModel = debuggerId ? await SDK.DebuggerModel.DebuggerModel.modelForDebuggerId(debuggerId) : null;
+    const target = debuggerModel?.target();
+    this.#reportView.data = {frame: this.#frame, target};
   }
 }
 
@@ -274,16 +281,19 @@ const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 export interface FrameDetailsReportViewData {
   frame: SDK.ResourceTreeModel.ResourceTreeFrame;
+  target?: SDK.Target.Target;
 }
 
 export class FrameDetailsReportView extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-resources-frame-details-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #frame?: SDK.ResourceTreeModel.ResourceTreeFrame;
+  #target?: SDK.Target.Target;
   #protocolMonitorExperimentEnabled = false;
   #permissionsPolicies: Promise<Protocol.Page.PermissionsPolicyFeatureState[]|null>|null = null;
   #permissionsPolicySectionData: PermissionsPolicySectionData = {policies: [], showDetails: false};
   #originTrialTreeView: OriginTrialTreeView = new OriginTrialTreeView();
+  #linkifier = new Components.Linkifier.Linkifier();
 
   connectedCallback(): void {
     this.#protocolMonitorExperimentEnabled = Root.Runtime.experiments.isEnabled('protocolMonitor');
@@ -292,6 +302,7 @@ export class FrameDetailsReportView extends HTMLElement {
 
   set data(data: FrameDetailsReportViewData) {
     this.#frame = data.frame;
+    this.#target = data.target;
     if (!this.#permissionsPolicies && this.#frame) {
       this.#permissionsPolicies = this.#frame.getPermissionsPolicyState();
     }
@@ -573,14 +584,29 @@ export class FrameDetailsReportView extends HTMLElement {
     for (const explanation of this.#frame.adFrameStatus()?.explanations || []) {
       rows.push(LitHtml.html`<div>${this.#getAdFrameExplanationString(explanation)}</div>`);
     }
+
+    const adScriptLinkElement = this.#target ?
+        this.#linkifier.linkifyScriptLocation(
+            this.#target, this.#frame.getAdScriptId(), Platform.DevToolsPath.EmptyUrlString, undefined, undefined) :
+        null;
+
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
     return LitHtml.html`
       <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.adStatus)}</${
         ReportView.ReportView.ReportKey.litTagName}>
       <${ReportView.ReportView.ReportValue.litTagName}>
-         <${ExpandableList.ExpandableList.ExpandableList.litTagName} .data=${
-        {rows} as ExpandableList.ExpandableList.ExpandableListData}></${
+        <${ExpandableList.ExpandableList.ExpandableList.litTagName} .data=${
+          {rows} as ExpandableList.ExpandableList.ExpandableListData}></${
         ExpandableList.ExpandableList.ExpandableList.litTagName}></${ReportView.ReportView.ReportValue.litTagName}>
-      `;
+      ${this.#target ? LitHtml.html`
+        <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.creatorAdScript)}</${
+          ReportView.ReportView.ReportKey.litTagName}>
+        <${ReportView.ReportView.ReportValue.litTagName} class="ad-script-link">${adScriptLinkElement}</${
+          ReportView.ReportView.ReportValue.litTagName}>
+      ` : LitHtml.nothing}
+    `;
+    // clang-format on
   }
 
   #renderIsolationSection(): LitHtml.LitTemplate {

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -88,14 +88,6 @@ const UIStrings = {
   */
   scrollIntoView: 'Scroll into view',
   /**
-  *@description Text to enter Isolation Mode, a mode with focus on a single element and interactive resizing
-  */
-  enterIsolationMode: 'Enter Isolation Mode',
-  /**
-  *@description Text to exit Isolation Mode, a mode with focus on a single element and interactive resizing
-  */
-  exitIsolationMode: 'Exit Isolation Mode',
-  /**
   *@description A context menu item in the Elements Tree Element of the Elements panel
   */
   editText: 'Edit text',
@@ -682,17 +674,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     contextMenu.viewSection().appendItem(i18nString(UIStrings.focus), async () => {
       await this.nodeInternal.focus();
     });
-
-    const overlayModel = this.nodeInternal.domModel().overlayModel();
-    if (overlayModel.isHighlightedIsolatedElementInPersistentOverlay(this.nodeInternal.id)) {
-      contextMenu.viewSection().appendItem(i18nString(UIStrings.exitIsolationMode), () => {
-        overlayModel.hideIsolatedElementInPersistentOverlay(this.nodeInternal.id);
-      });
-    } else {
-      contextMenu.viewSection().appendItem(i18nString(UIStrings.enterIsolationMode), () => {
-        overlayModel.highlightIsolatedElementInPersistentOverlay(this.nodeInternal.id);
-      });
-    }
   }
 
   populateScrollIntoView(contextMenu: UI.ContextMenu.ContextMenu): void {

package/front_end/panels/performance_monitor/PerformanceMonitor.ts

@@ -116,6 +116,13 @@ export class PerformanceMonitorImpl extends UI.Widget.HBox implements
     }
     this.registerCSSFiles([performanceMonitorStyles]);
     this.controlPane.instantiateMetricData();
+    const themeSupport = ThemeSupport.ThemeSupport.instance();
+    themeSupport.addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
+      // instantiateMetricData sets the colors for the metrics, which we need
+      // to re-evaluate when the theme changes before re-drawing the canvas.
+      this.controlPane.instantiateMetricData();
+      this.draw();
+    });
     SDK.TargetManager.TargetManager.instance().addEventListener(
         SDK.TargetManager.Events.SuspendStateChanged, this.suspendStateChanged, this);
     void this.model.enable();

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1017091"
+  "version": "1.0.1018017"
 }