chrome-devtools-frontend 1.0.1017408 → 1.0.1018151

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"
   },

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̂"
   },

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/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/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/front_end/ui/components/panel_feedback/PreviewToggle.ts

@@ -67,11 +67,18 @@ export class PreviewToggle extends HTMLElement {
 
   #render(): void {
     const checked = Root.Runtime.experiments.isEnabled(this.#experiment);
+    const hasLink = Boolean(this.#feedbackURL) || Boolean(this.#learnMoreURL);
+
+    const containerClasses = LitHtml.Directives.classMap({
+      'container': true,
+      'has-link': hasLink,
+    });
+
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(
       html`
-      <div class="container">
+      <div class=${containerClasses}>
         <div class="checkbox-line">
           <label class="experiment-preview">
             <input type="checkbox" ?checked=${checked} @change=${this.#checkboxChanged} aria-label=${this.#name}/>

package/front_end/ui/components/panel_feedback/previewToggle.css

@@ -33,6 +33,12 @@
   padding: 4px;
 }
 
+.container.has-link {
+  /* For x-link outline not to paint over the helper text
+  we need to have 2 * <padding>px additional line height */
+  line-height: calc(1em + 8px);
+}
+
 .x-link {
   color: var(--color-primary);
   text-decoration-line: underline;

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.1017408"
+  "version": "1.0.1018151"
 }