preload: Replace ruleset url with ruleset tags if tag is present

Before changes:
https://drive.google.com/file/d/1NrrEedeW6eUdY_pQZGgpFi_47Z3FgvTl/view?usp=sharing
(dropdown)
https://drive.google.com/file/d/1XeIE6wboWZ2XMhODL0o7XXbI1uBLME6T/view?usp=sharing
https://drive.google.com/file/d/19QDG_9mt2PnGsdaXz7TE7jt2CFout9aK/view?usp=sharing

Updated tab:
https://drive.google.com/file/d/1zPPP7YM6Do2jcF8M3af8LscHO0jK7BhH/view?usp=sharing
(dropdown)
https://drive.google.com/file/d/1z8vnJkPHYzfi4OGltNbDKwIGvlMBksyp/view?usp=sharing
https://drive.google.com/file/d/1t0mK1rIp18gwCu-ndsQ4qSDOG7lYNas6/view?usp=sharing

Test site: https://prerender2-eventtesting.glitch.me/

Bug: 393408589
Change-Id: Id6e18ba6c9ad70215f348b177ff1b3bd1f5fa54c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6427702
Reviewed-by: Domenic Denicola <domenic@chromium.org>
Reviewed-by: Ken Okada <kenoss@chromium.org>
Commit-Queue: Huanpo Lin <robertlin@chromium.org>
Reviewed-by: Danil Somsikov <dsv@chromium.org>

Author: Robert Lin

front_end/panels/application/preloading/PreloadingView.ts

@@ -677,6 +677,12 @@ class PreloadingRuleSetSelector implements
     if (ruleSet === null) {
       return i18n.i18n.lockedString('Internal error');
     }
+
+    // TODO(https://crbug.com/393408589): Use `PreloadingString.ruleSetTagOrLocationShort` to reduce code redundancy.
+    const sourceJson = JSON.parse(ruleSet['sourceText']);
+    if ('tag' in sourceJson) {
+      return '"' + sourceJson['tag'] + '"';
+    }
     return PreloadingUIUtils.ruleSetLocationShort(ruleSet, pageURL());
   }
 

front_end/panels/application/preloading/components/PreloadingGrid.test.ts

@@ -78,6 +78,50 @@ describeWithEnvironment('PreloadingGrid', () => {
     );
   });
 
+  it('renders tag instead of url correctly', async () => {
+    await assertRenderResult(
+        {
+          rows: [{
+            id: 'id',
+            pipeline: SDK.PreloadingModel.PreloadPipeline.newFromAttemptsForTesting([{
+              action: Protocol.Preload.SpeculationAction.Prefetch,
+              key: {
+                loaderId: 'loaderId:1' as Protocol.Network.LoaderId,
+                action: Protocol.Preload.SpeculationAction.Prefetch,
+                url: urlString`https://example.com/prefetched.html`,
+              },
+              pipelineId: 'pipelineId:1' as Protocol.Preload.PreloadPipelineId,
+              status: SDK.PreloadingModel.PreloadingStatus.RUNNING,
+              prefetchStatus: null,
+              requestId: 'requestId:1' as Protocol.Network.RequestId,
+              ruleSetIds: ['ruleSetId:0.1'] as Protocol.Preload.RuleSetId[],
+              nodeIds: [1] as Protocol.DOM.BackendNodeId[],
+            }]),
+            ruleSets: [{
+              id: 'ruleSetId:0.1' as Protocol.Preload.RuleSetId,
+              loaderId: 'loaderId:1' as Protocol.Network.LoaderId,
+              sourceText: `
+{
+  "tag": "tag1",
+  "prefetch":[
+    {
+      "source": "list",
+      "urls": ["/prefetched.html"]
+    }
+  ]
+}
+`,
+            }],
+          }],
+          pageURL: urlString`https://example.com/`,
+        },
+        ['URL', 'Action', 'Rule set', 'Status'],
+        [
+          ['/prefetched.html', 'Prefetch', '\"tag1"', 'Running'],
+        ],
+    );
+  });
+
   it('shows full URL for cross-origin preloading', async () => {
     await assertRenderResult(
         {

front_end/panels/application/preloading/components/PreloadingGrid.ts

@@ -16,7 +16,7 @@ import type * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
 import preloadingGridStyles from './preloadingGrid.css.js';
-import {capitalizedAction, composedStatus, ruleSetLocationShort} from './PreloadingString.js';
+import {capitalizedAction, composedStatus, ruleSetTagOrLocationShort} from './PreloadingString.js';
 
 const {PreloadingStatus} = SDK.PreloadingModel;
 
@@ -100,7 +100,7 @@ export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableCompone
               return html`<tr data-id=${row.id}>
                 <td title=${attempt.key.url}>${this.#urlShort(row, securityOrigin)}</td>
                 <td>${capitalizedAction(attempt.action)}</td>
-                <td>${row.ruleSets.length === 0 ? '' : ruleSetLocationShort(row.ruleSets[0], pageURL)}</td>
+                <td>${row.ruleSets.length === 0 ? '' : ruleSetTagOrLocationShort(row.ruleSets[0], pageURL)}</td>
                 <td>
                   <div style=${styleMap({color: hasWarning ? 'var(--sys-color-orange-bright)'
                                                 : hasError   ? 'var(--sys-color-error)'

front_end/panels/application/preloading/components/PreloadingString.ts

@@ -728,6 +728,17 @@ export function ruleSetLocationShort(
   return Bindings.ResourceUtils.displayNameForURL(url);
 }
 
+export function ruleSetTagOrLocationShort(
+    ruleSet: Protocol.Preload.RuleSet, pageURL: Platform.DevToolsPath.UrlString): string {
+  if (!ruleSet.errorMessage) {
+    const parsedRuleset = JSON.parse(ruleSet['sourceText']);
+    if ('tag' in parsedRuleset) {
+      return '"' + parsedRuleset['tag'] + '"';
+    }
+  }
+  return ruleSetLocationShort(ruleSet, pageURL);
+}
+
 export function capitalizedAction(action: Protocol.Preload.SpeculationAction): Common.UIString.LocalizedString {
   // Use "prefetch"/"prerender" as is in SpeculationRules.
   switch (action) {

front_end/panels/application/preloading/components/RuleSetGrid.test.ts

@@ -61,6 +61,36 @@ describeWithEnvironment('RuleSetGrid', () => {
     );
   });
 
+  it('renders tag instead of url correctly', async () => {
+    await assertRenderResult(
+        {
+          rows: [{
+            ruleSet: {
+              id: 'ruleSetId:0.1' as Protocol.Preload.RuleSetId,
+              loaderId: 'loaderId:1' as Protocol.Network.LoaderId,
+              sourceText: `
+{
+  "tag": "tag1",
+  "prefetch":[
+    {
+      "source": "list",
+      "urls": ["/prefetched.html"]
+    }
+  ]
+}
+`,
+            },
+            preloadsStatusSummary: '1 Not triggered, 2 Ready, 3 Failure',
+          }],
+          pageURL: urlString`https://example.com/`,
+        },
+        ['Rule set', 'Status'],
+        [
+          ['\"tag1\"', '1 Not triggered, 2 Ready, 3 Failure'],
+        ],
+    );
+  });
+
   it('shows short url for out-of-document speculation rules', async () => {
     await assertRenderResult(
         {

front_end/panels/application/preloading/components/RuleSetGrid.ts

@@ -139,7 +139,7 @@ export class RuleSetGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<
                 </th>
               </tr>
               ${rows.map(({ruleSet, preloadsStatusSummary}) => {
-                const location = PreloadingString.ruleSetLocationShort(ruleSet, pageURL);
+                const location = PreloadingString.ruleSetTagOrLocationShort(ruleSet, pageURL);
                 const revealInElements = ruleSet.backendNodeId !== undefined;
                 const revealInNetwork = ruleSet.url !== undefined && ruleSet.requestId;
                 return html`