[Ad Tagging] Display 'Root Script Filterlist Rule' in DevTools Frontend

What: Display a 'Root Script Filterlist Rule' entry when applicable.

Why: This provides more devtools clarity and coverage of why frames
     are labeled as ads.

Screenshot: https://issues.chromium.org/421927612#attachment66387147

Sibling browser backend change: https://crrev.com/c/6598776

Bug: 421927612
Change-Id: I3075549a80ef35785bc6fe53268a9f5da0f305ce
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6614838
Commit-Queue: Yao Xiao <yaoxia@chromium.org>
Reviewed-by: Wolfgang Beyer <wolfi@chromium.org>
Reviewed-by: Danil Somsikov <dsv@chromium.org>

Author: yaoxiachromium

front_end/core/sdk/ResourceTreeModel.ts

@@ -783,9 +783,9 @@ export class ResourceTreeFrame {
     return this.#domainAndRegistryInternal;
   }
 
-  async getAdScriptAncestryIds(frameId: Protocol.Page.FrameId): Promise<Protocol.Page.AdScriptId[]|null> {
+  async getAdScriptAncestry(frameId: Protocol.Page.FrameId): Promise<Protocol.Page.AdScriptAncestry|null> {
     const res = await this.#model.agent.invoke_getAdScriptAncestry({frameId});
-    return res.adScriptAncestry?.ancestryChain || null;
+    return res.adScriptAncestry || null;
   }
 
   get securityOrigin(): string|null {

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

@@ -31,7 +31,7 @@ const makeFrame = (target: SDK.Target.Target) => {
     unreachableUrl: () => '',
     adFrameType: () => Protocol.Page.AdFrameType.None,
     adFrameStatus: () => undefined,
-    getAdScriptAncestryIds: () => null,
+    getAdScriptAncestry: () => null,
     resourceForURL: () => null,
     isSecureContext: () => true,
     isCrossOriginIsolated: () => true,
@@ -138,16 +138,19 @@ describeWithMockConnection('FrameDetailsView', () => {
     const frame = makeFrame(target);
     frame.adFrameType = () => Protocol.Page.AdFrameType.Root;
     frame.parentFrame = () => ({
-      getAdScriptAncestryIds: () => ([
-        {
-          scriptId: '123' as Protocol.Runtime.ScriptId,
-          debuggerId: '42' as Protocol.Runtime.UniqueDebuggerId,
-        },
-        {
-          scriptId: '456' as Protocol.Runtime.ScriptId,
-          debuggerId: '42' as Protocol.Runtime.UniqueDebuggerId,
-        }
-      ]),
+      getAdScriptAncestry: () => ({
+        ancestryChain: [
+          {
+            scriptId: '123' as Protocol.Runtime.ScriptId,
+            debuggerId: '42' as Protocol.Runtime.UniqueDebuggerId,
+          },
+          {
+            scriptId: '456' as Protocol.Runtime.ScriptId,
+            debuggerId: '42' as Protocol.Runtime.UniqueDebuggerId,
+          }
+        ],
+        rootScriptFilterlistRule: '/ad-script2.$script',
+      }),
     } as unknown as SDK.ResourceTreeModel.ResourceTreeFrame);
     const networkManager = target.model(SDK.NetworkManager.NetworkManager);
     assert.exists(networkManager);
@@ -183,6 +186,7 @@ describeWithMockConnection('FrameDetailsView', () => {
       'Frame Creation Stack Trace',
       'Ad Status',
       'Creator Ad Script Ancestry',
+      'Root Script Filterlist Rule',
       'Secure Context',
       'Cross-Origin Isolated',
       'Cross-Origin Embedder Policy (COEP)',
@@ -200,6 +204,7 @@ describeWithMockConnection('FrameDetailsView', () => {
       '',
       '',
       '',
+      '/ad-script2.$script',
       'Yes\xA0Localhost is always a secure context',
       'Yes',
       'None',

front_end/panels/application/components/FrameDetailsView.ts

@@ -252,6 +252,10 @@ const UIStrings = {
    *@description Label for the link(s) to the ad script(s) that led to this frame's creation.
    */
   creatorAdScriptAncestry: 'Creator Ad Script Ancestry',
+  /**
+   *@description Label for the filterlist rule that identified the root script in 'Creator Ad Script Ancestry' as an ad.
+   */
+  rootScriptFilterlistRule: 'Root Script Filterlist Rule',
   /**
    *@description Text describing the absence of a value.
    */
@@ -269,7 +273,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export interface FrameDetailsReportViewData {
   frame: SDK.ResourceTreeModel.ResourceTreeFrame;
   target?: SDK.Target.Target;
-  adScriptAncestryIds: Protocol.Page.AdScriptId[]|null;
+  adScriptAncestry: Protocol.Page.AdScriptAncestry|null;
 }
 
 export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
@@ -281,7 +285,7 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
   #permissionsPolicySectionData: PermissionsPolicySectionData = {policies: [], showDetails: false};
   #originTrialTreeView: OriginTrialTreeView = new OriginTrialTreeView();
   #linkifier = new Components.Linkifier.Linkifier();
-  #adScriptAncestryIds: Protocol.Page.AdScriptId[]|null = null;
+  #adScriptAncestry: Protocol.Page.AdScriptAncestry|null = null;
 
   constructor(frame: SDK.ResourceTreeModel.ResourceTreeFrame) {
     super();
@@ -295,15 +299,15 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
   }
 
   override async render(): Promise<void> {
-    const results = await this.#frame?.parentFrame()?.getAdScriptAncestryIds(this.#frame?.id);
-    if (Array.isArray(results) && results.length > 0) {
-      this.#adScriptAncestryIds = results;
+    const result = await this.#frame?.parentFrame()?.getAdScriptAncestry(this.#frame?.id);
+    if (result && result.ancestryChain.length > 0) {
+      this.#adScriptAncestry = result;
 
       // Obtain the Target associated with the first ad script, because in most scenarios all
       // scripts share the same debuggerId. However, discrepancies might arise when content scripts
       // from browser extensions are involved. We will monitor the debugging experiences and revisit
       // this approach if it proves problematic.
-      const firstScript = this.#adScriptAncestryIds[0];
+      const firstScript = this.#adScriptAncestry.ancestryChain[0];
       const debuggerModel = firstScript?.debuggerId ?
           await SDK.DebuggerModel.DebuggerModel.modelForDebuggerId(firstScript.debuggerId) :
           null;
@@ -600,11 +604,11 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
       return Lit.nothing;
     }
 
-    if (!this.#target || !this.#adScriptAncestryIds || this.#adScriptAncestryIds.length === 0) {
+    if (!this.#target || !this.#adScriptAncestry || this.#adScriptAncestry.ancestryChain.length === 0) {
       return Lit.nothing;
     }
 
-    const rows = this.#adScriptAncestryIds.map(adScriptId => {
+    const rows = this.#adScriptAncestry.ancestryChain.map(adScriptId => {
       const adScriptLinkElement = this.#linkifier.linkifyScriptLocation(
           this.#target,
           adScriptId.scriptId || null,
@@ -618,6 +622,8 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
       return html`<div>${adScriptLinkElement}</div>`;
     });
 
+    const shouldRenderFilterlistRule = (this.#adScriptAncestry.rootScriptFilterlistRule !== undefined);
+
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
@@ -627,6 +633,10 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
           {rows, title: i18nString(UIStrings.creatorAdScriptAncestry)} as ExpandableList.ExpandableList.ExpandableListData}>
         </devtools-expandable-list>
       </devtools-report-value>
+      ${shouldRenderFilterlistRule ? html`
+        <devtools-report-key>${i18nString(UIStrings.rootScriptFilterlistRule)}</devtools-report-key>
+        <devtools-report-value jslog=${VisualLogging.section('root-script-filterlist-rule')}>${this.#adScriptAncestry.rootScriptFilterlistRule}</devtools-report-value>
+      ` : Lit.nothing}
     `;
     // clang-format on
   }

front_end/ui/visual_logging/KnownContextValues.ts

@@ -2978,6 +2978,7 @@ export const knownContextValues = new Set([
   'right',
   'ro',
   'roboto',
+  'root-script-filterlist-rule',
   'rotate',
   'row-gap',
   'row-rule',

test/conductor/events.ts

@@ -39,8 +39,6 @@ const ALLOWED_ASSERTION_FAILURES = [
   // neterror.js started serving sourcemaps and we're requesting it unnecessarily.
   'Request Network.loadNetworkResource failed. {"code":-32602,"message":"Unsupported URL scheme"}',
   'Fetch API cannot load chrome-error://chromewebdata/neterror.rollup.js.map. URL scheme "chrome-error" is not supported.',
-  // crbug.com/413061397: Temporarily ignore until CfT roll includes https://crrev.com/c/6480657
-  'Request Page.getAdScriptAncestryIds failed. {"code":-32601,"message":"\'Page.getAdScriptAncestryIds\' wasn\'t found"}',
   'Request Storage.getAffectedUrlsForThirdPartyCookieMetadata failed. {"code":-32603,"message":"Internal error"}',
 ];