Prerender2Fallback: Show pipeline status in PreloadingGrid

If Prerender2FallbackPrefetchSpecRules is enabled, Chrome triggers
prefetch ahead of prerender and use prefetch's result for navigation if
prerender failed to prevent additional fetch.

This CL shows "Prefetch fallback ready" message on PreloadingGrid if
prefetch ahead of prerender is triggered and succeeded, and prerender
failed.

For this purpose, this CL introduces `PreloadPipeline` in
`PreloadingModel`.

demo: https://docs.google.com/document/d/13ttSjpkGn0HgnlsN-_3tnpUhOiPsTCHxHNzptrdkXgk/edit?tab=t.0#heading=h.vw5iwf1qq001

Bug: 364509578
Change-Id: I7c2d59b63075ff2139375de89ad40f10e29df152
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6068033
Reviewed-by: Domenic Denicola <[email protected]>
Reviewed-by: Danil Somsikov <[email protected]>
Commit-Queue: Ken Okada <[email protected]>

Author: kenoss

front_end/core/sdk/PreloadingModel.ts

@@ -166,6 +166,32 @@ export class PreloadingModel extends SDKModel<EventTypes> {
     return document.preloadingAttempts.getAllRepresentative(null, document.sources);
   }
 
+  // Precondition: `pipelineId` should exists.
+  // Postcondition: The return value is not empty.
+  private getPipelineById(pipelineId: Protocol.Preload.PreloadPipelineId):
+      Map<Protocol.Preload.SpeculationAction, PreloadingAttempt>|null {
+    const document = this.currentDocument();
+    if (document === null) {
+      return null;
+    }
+
+    return document.preloadingAttempts.getPipeline(pipelineId, document.sources);
+  }
+
+  // Returns attemtps that are sit in the same preload pipeline.
+  getPipeline(attempt: PreloadingAttempt): PreloadPipeline {
+    let pipelineNullable = null;
+    if (attempt.pipelineId !== null) {
+      pipelineNullable = this.getPipelineById(attempt.pipelineId);
+    }
+    if (pipelineNullable === null) {
+      const pipeline = new Map();
+      pipeline.set(attempt.action, attempt);
+      return new PreloadPipeline(pipeline);
+    }
+    return new PreloadPipeline(pipelineNullable);
+  }
+
   private onPrimaryPageChanged(
       event: Common.EventTarget.EventTargetEvent<{frame: ResourceTreeFrame, type: PrimaryPageChangeType}>): void {
     const {frame, type} = event.data;
@@ -501,6 +527,40 @@ function makePreloadingAttemptId(key: Protocol.Preload.PreloadingAttemptKey): Pr
   return `${key.loaderId}:${action}:${key.url}:${targetHint}`;
 }
 
+export class PreloadPipeline {
+  private inner: Map<Protocol.Preload.SpeculationAction, PreloadingAttempt>;
+
+  constructor(inner: Map<Protocol.Preload.SpeculationAction, PreloadingAttempt>) {
+    if (inner.size === 0) {
+      throw new Error('unreachable');
+    }
+
+    this.inner = inner;
+  }
+
+  static newFromAttemptsForTesting(attempts: PreloadingAttempt[]): PreloadPipeline {
+    const inner = new Map();
+    for (const attempt of attempts) {
+      inner.set(attempt.action, attempt);
+    }
+    return new PreloadPipeline(inner);
+  }
+
+  getOriginallyTriggered(): PreloadingAttempt {
+    const attempt = this.getPrerender() || this.getPrefetch();
+    assertNotNullOrUndefined(attempt);
+    return attempt;
+  }
+
+  getPrefetch(): PreloadingAttempt|null {
+    return this.inner.get(Protocol.Preload.SpeculationAction.Prefetch) || null;
+  }
+
+  getPrerender(): PreloadingAttempt|null {
+    return this.inner.get(Protocol.Preload.SpeculationAction.Prerender) || null;
+  }
+}
+
 class PreloadingAttemptRegistry {
   private map: Map<PreloadingAttemptId, PreloadingAttemptInternal> =
       new Map<PreloadingAttemptId, PreloadingAttemptInternal>();
@@ -582,6 +642,25 @@ class PreloadingAttemptRegistry {
         .filter(({value}) => this.isAttemptRepresentative(value));
   }
 
+  getPipeline(pipelineId: Protocol.Preload.PreloadPipelineId, sources: SourceRegistry):
+      Map<Protocol.Preload.SpeculationAction, PreloadingAttempt>|null {
+    const pipeline = this.pipelines.get(pipelineId);
+
+    if (pipeline === undefined || pipeline.size === 0) {
+      return null;
+    }
+
+    const map: {[key: PreloadingAttemptId]: PreloadingAttemptInternal} = {};
+    for (const [id, attempt] of this.map.entries()) {
+      map[id] = attempt;
+    }
+    return new Map(pipeline.entries().map(([action, id]) => {
+      const attempt = this.getById(id, sources);
+      assertNotNullOrUndefined(attempt);
+      return [action, attempt];
+    }));
+  }
+
   upsert(attempt: PreloadingAttemptInternal): void {
     const id = makePreloadingAttemptId(attempt.key);
 

front_end/panels/application/preloading/PreloadingView.ts

@@ -327,6 +327,8 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
 
 export class PreloadingAttemptView extends UI.Widget.VBox {
   private model: SDK.PreloadingModel.PreloadingModel;
+  // Note that we use id of (representative) preloading attempt while we show pipelines in grid.
+  // This is because `NOT_TRIGGERED` preloading attempts don't have pipeline id and we can use it.
   private focusedPreloadingAttemptId: SDK.PreloadingModel.PreloadingAttemptId|null = null;
 
   private readonly warningsContainer: HTMLDivElement;
@@ -438,13 +440,14 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
     const filteringRuleSetId = this.ruleSetSelector.getSelected();
     const rows = this.model.getRepresentativePreloadingAttempts(filteringRuleSetId).map(({id, value}) => {
       const attempt = value;
+      const pipeline = this.model.getPipeline(attempt);
       const ruleSets = attempt.ruleSetIds.flatMap(id => {
         const ruleSet = this.model.getRuleSetById(id);
         return ruleSet === null ? [] : [ruleSet];
       });
       return {
         id,
-        attempt,
+        pipeline,
         ruleSets,
       };
     });

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

@@ -36,7 +36,7 @@ describeWithEnvironment('PreloadingGrid', () => {
         {
           rows: [{
             id: 'id',
-            attempt: {
+            pipeline: SDK.PreloadingModel.PreloadPipeline.newFromAttemptsForTesting([{
               action: Protocol.Preload.SpeculationAction.Prefetch,
               key: {
                 loaderId: 'loaderId:1' as Protocol.Network.LoaderId,
@@ -49,7 +49,7 @@ describeWithEnvironment('PreloadingGrid', () => {
               requestId: 'requestId:1' as Protocol.Network.RequestId,
               ruleSetIds: ['ruleSetId:0.1'] as Protocol.Preload.RuleSetId[],
               nodeIds: [1] as Protocol.DOM.BackendNodeId[],
-            } as SDK.PreloadingModel.PreloadingAttempt,
+            }]),
             ruleSets: [
               {
                 id: 'ruleSetId:0.1' as Protocol.Preload.RuleSetId,
@@ -81,7 +81,7 @@ describeWithEnvironment('PreloadingGrid', () => {
         {
           rows: [{
             id: 'id',
-            attempt: {
+            pipeline: SDK.PreloadingModel.PreloadPipeline.newFromAttemptsForTesting([{
               action: Protocol.Preload.SpeculationAction.Prefetch,
               key: {
                 loaderId: 'loaderId:1' as Protocol.Network.LoaderId,
@@ -94,7 +94,7 @@ describeWithEnvironment('PreloadingGrid', () => {
               requestId: 'requestId:1' as Protocol.Network.RequestId,
               ruleSetIds: ['ruleSetId:0.1'] as Protocol.Preload.RuleSetId[],
               nodeIds: [1] as Protocol.DOM.BackendNodeId[],
-            } as SDK.PreloadingModel.PreloadingAttempt,
+            }]),
             ruleSets: [
               {
                 id: 'ruleSetId:0.1' as Protocol.Preload.RuleSetId,
@@ -126,7 +126,7 @@ describeWithEnvironment('PreloadingGrid', () => {
         {
           rows: [{
             id: 'id',
-            attempt: {
+            pipeline: SDK.PreloadingModel.PreloadPipeline.newFromAttemptsForTesting([{
               action: Protocol.Preload.SpeculationAction.Prefetch,
               key: {
                 loaderId: 'loaderId:1' as Protocol.Network.LoaderId,
@@ -139,7 +139,7 @@ describeWithEnvironment('PreloadingGrid', () => {
               requestId: 'requestId:1' as Protocol.Network.RequestId,
               ruleSetIds: ['ruleSetId:0.1'] as Protocol.Preload.RuleSetId[],
               nodeIds: [] as Protocol.DOM.BackendNodeId[],
-            } as SDK.PreloadingModel.PreloadingAttempt,
+            }]),
             ruleSets: [
               {
                 id: 'ruleSetId:0.1' as Protocol.Preload.RuleSetId,
@@ -173,7 +173,7 @@ describeWithEnvironment('PreloadingGrid', () => {
           rows: [
             {
               id: 'id',
-              attempt: {
+              pipeline: SDK.PreloadingModel.PreloadPipeline.newFromAttemptsForTesting([{
                 action: Protocol.Preload.SpeculationAction.Prefetch,
                 key: {
                   loaderId: 'loaderId:1' as Protocol.Network.LoaderId,
@@ -186,12 +186,12 @@ describeWithEnvironment('PreloadingGrid', () => {
                 requestId: 'requestId:1' as Protocol.Network.RequestId,
                 ruleSetIds: ['ruleSetId:0.1'] as Protocol.Preload.RuleSetId[],
                 nodeIds: [1] as Protocol.DOM.BackendNodeId[],
-              } as SDK.PreloadingModel.PreloadingAttempt,
+              }]),
               ruleSets: [],
             },
             {
               id: 'id',
-              attempt: {
+              pipeline: SDK.PreloadingModel.PreloadPipeline.newFromAttemptsForTesting([{
                 action: Protocol.Preload.SpeculationAction.Prefetch,
                 key: {
                   loaderId: 'loaderId:1' as Protocol.Network.LoaderId,
@@ -204,7 +204,7 @@ describeWithEnvironment('PreloadingGrid', () => {
                 requestId: 'requestId:2' as Protocol.Network.RequestId,
                 ruleSetIds: ['ruleSetId:0.2', 'ruleSetId:0.3'] as Protocol.Preload.RuleSetId[],
                 nodeIds: [1] as Protocol.DOM.BackendNodeId[],
-              } as SDK.PreloadingModel.PreloadingAttempt,
+              }]),
               ruleSets: [
                 {
                   id: 'ruleSetId:0.2' as Protocol.Preload.RuleSetId,
@@ -253,7 +253,7 @@ describeWithEnvironment('PreloadingGrid', () => {
         {
           rows: [{
             id: 'id',
-            attempt: {
+            pipeline: SDK.PreloadingModel.PreloadPipeline.newFromAttemptsForTesting([{
               action: Protocol.Preload.SpeculationAction.Prerender,
               key: {
                 loaderId: 'loaderId:1' as Protocol.Network.LoaderId,
@@ -265,10 +265,9 @@ describeWithEnvironment('PreloadingGrid', () => {
               prerenderStatus: Protocol.Preload.PrerenderFinalStatus.MojoBinderPolicy,
               disallowedMojoInterface: 'device.mojom.GamepadMonitor',
               mismatchedHeaders: null,
-              requestId: 'requestId:1' as Protocol.Network.RequestId,
               ruleSetIds: ['ruleSetId:0.1'] as Protocol.Preload.RuleSetId[],
               nodeIds: [1] as Protocol.DOM.BackendNodeId[],
-            } as SDK.PreloadingModel.PreloadingAttempt,
+            }]),
             ruleSets: [
               {
                 id: 'ruleSetId:0.1' as Protocol.Preload.RuleSetId,
@@ -306,4 +305,153 @@ describeWithEnvironment('PreloadingGrid', () => {
     const icon = div!.children[0];
     assert.include(icon.shadowRoot!.innerHTML, 'cross-circle-filled');
   });
+
+  it('shows a warning if a prerender fallbacks to prefetch', async () => {
+    const grid = 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: 'https://example.com/prerendered.html' as Platform.DevToolsPath.UrlString,
+                },
+                pipelineId: 'pipelineId:1' as Protocol.Preload.PreloadPipelineId,
+                status: SDK.PreloadingModel.PreloadingStatus.SUCCESS,
+                prefetchStatus: Protocol.Preload.PrefetchStatus.PrefetchResponseUsed,
+                requestId: 'requestId:1' as Protocol.Network.RequestId,
+                ruleSetIds: ['ruleSetId:0.1'] as Protocol.Preload.RuleSetId[],
+                nodeIds: [1] as Protocol.DOM.BackendNodeId[],
+              },
+              {
+                action: Protocol.Preload.SpeculationAction.Prerender,
+                key: {
+                  loaderId: 'loaderId:1' as Protocol.Network.LoaderId,
+                  action: Protocol.Preload.SpeculationAction.Prerender,
+                  url: 'https://example.com/prerendered.html' as Platform.DevToolsPath.UrlString,
+                },
+                pipelineId: 'pipelineId:1' as Protocol.Preload.PreloadPipelineId,
+                status: SDK.PreloadingModel.PreloadingStatus.FAILURE,
+                prerenderStatus: Protocol.Preload.PrerenderFinalStatus.MojoBinderPolicy,
+                disallowedMojoInterface: 'device.mojom.GamepadMonitor',
+                mismatchedHeaders: null,
+                ruleSetIds: ['ruleSetId:0.1'] as Protocol.Preload.RuleSetId[],
+                nodeIds: [1] as Protocol.DOM.BackendNodeId[],
+              },
+            ] as SDK.PreloadingModel.PreloadingAttempt[]),
+            ruleSets: [
+              {
+                id: 'ruleSetId:0.1' as Protocol.Preload.RuleSetId,
+                loaderId: 'loaderId:1' as Protocol.Network.LoaderId,
+                sourceText: `
+{
+  "prerender":[
+    {
+      "source": "list",
+      "urls": ["/prerendered.html"]
+    }
+  ]
+}
+`,
+              },
+            ],
+          }],
+          pageURL: 'https://example.com/' as Platform.DevToolsPath.UrlString,
+        },
+        ['URL', 'Action', 'Rule set', 'Status'],
+        [
+          [
+            '/prerendered.html',
+            'Prerender',
+            'example.com/',
+            'Prefetch fallback ready',
+          ],
+        ],
+    );
+
+    assert.isNotNull(grid.shadowRoot);
+    const cell = getCellByIndexes(grid.shadowRoot, {row: 1, column: 3});
+    const div = cell.querySelector('div');
+    assert.strictEqual(div!.getAttribute('style'), 'color:var(--sys-color-orange-bright);');
+    const icon = div!.children[0];
+    assert.include(icon.shadowRoot!.innerHTML, 'warning-filled');
+  });
+
+  it('shows failure if both prefetch and prerender failed', async () => {
+    const grid = 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: 'https://example.com/prerendered.html' as Platform.DevToolsPath.UrlString,
+                },
+                pipelineId: 'pipelineId:1' as Protocol.Preload.PreloadPipelineId,
+                status: SDK.PreloadingModel.PreloadingStatus.FAILURE,
+                prefetchStatus: Protocol.Preload.PrefetchStatus.PrefetchFailedNon2XX,
+                requestId: 'requestId:1' as Protocol.Network.RequestId,
+                ruleSetIds: ['ruleSetId:0.1'] as Protocol.Preload.RuleSetId[],
+                nodeIds: [1] as Protocol.DOM.BackendNodeId[],
+              },
+              {
+                action: Protocol.Preload.SpeculationAction.Prerender,
+                key: {
+                  loaderId: 'loaderId:1' as Protocol.Network.LoaderId,
+                  action: Protocol.Preload.SpeculationAction.Prerender,
+                  url: 'https://example.com/prerendered.html' as Platform.DevToolsPath.UrlString,
+                },
+                pipelineId: 'pipelineId:1' as Protocol.Preload.PreloadPipelineId,
+                status: SDK.PreloadingModel.PreloadingStatus.FAILURE,
+                prerenderStatus: Protocol.Preload.PrerenderFinalStatus.PrerenderFailedDuringPrefetch,
+                disallowedMojoInterface: null,
+                mismatchedHeaders: null,
+                ruleSetIds: ['ruleSetId:0.1'] as Protocol.Preload.RuleSetId[],
+                nodeIds: [1] as Protocol.DOM.BackendNodeId[],
+              },
+            ] as SDK.PreloadingModel.PreloadingAttempt[]),
+            ruleSets: [
+              {
+                id: 'ruleSetId:0.1' as Protocol.Preload.RuleSetId,
+                loaderId: 'loaderId:1' as Protocol.Network.LoaderId,
+                sourceText: `
+{
+  "prerender":[
+    {
+      "source": "list",
+      "urls": ["/prerendered.html"]
+    }
+  ]
+}
+`,
+              },
+            ],
+          }],
+          pageURL: 'https://example.com/' as Platform.DevToolsPath.UrlString,
+        },
+        ['URL', 'Action', 'Rule set', 'Status'],
+        [
+          [
+            '/prerendered.html',
+            'Prerender',
+            'example.com/',
+            // TODO(kenoss): Add string for Protocol.Preload.PrerenderFinalStatus.PrerenderFailedDuringPrefetch.
+            'Failure -',
+          ],
+        ],
+    );
+
+    assert.isNotNull(grid.shadowRoot);
+    const cell = getCellByIndexes(grid.shadowRoot, {row: 1, column: 3});
+    const div = cell.querySelector('div');
+    assert.strictEqual(div!.getAttribute('style'), 'color:var(--sys-color-error);');
+    const icon = div!.children[0];
+    assert.include(icon.shadowRoot!.innerHTML, 'cross-circle-filled');
+  });
 });