Prerender2Fallback: Show pipeline details in PreloadingDetailsReportView

kenoss · Devtools-frontend LUCI CQ · commit 56e03d44e004 · 2024-12-13T00:10:57.000-08:00
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 "(automatically fell back to prefetch)" if prefetch ahead of prerender is triggered and succeeded and prerender failed. demo: https://docs.google.com/document/d/13ttSjpkGn0HgnlsN-_3tnpUhOiPsTCHxHNzptrdkXgk/edit?tab=t.0#heading=h.vw5iwf1qq001 Bug: 364509578 Change-Id: Ica6c52051024f8ccb63e6db4ba8e5fbd6b0ef211 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6069240 Commit-Queue: Ken Okada <kenoss@chromium.org> Reviewed-by: Danil Somsikov <dsv@chromium.org>
diff --git a/front_end/core/sdk/PreloadingModel.ts b/front_end/core/sdk/PreloadingModel.ts
@@ -559,6 +559,27 @@ export class PreloadPipeline {
   getPrerender(): PreloadingAttempt|null {
     return this.inner.get(Protocol.Preload.SpeculationAction.Prerender) || null;
   }
+
+  // Returns attempts in the order: prefetch < prerender.
+  getAttempts(): PreloadingAttempt[] {
+    const ret = [];
+
+    const prefetch = this.getPrefetch();
+    if (prefetch !== null) {
+      ret.push(prefetch);
+    }
+
+    const prerender = this.getPrerender();
+    if (prerender !== null) {
+      ret.push(prerender);
+    }
+
+    if (ret.length === 0) {
+      throw new Error('unreachable');
+    }
+
+    return ret;
+  }
 }
 
 class PreloadingAttemptRegistry {
diff --git a/front_end/panels/application/preloading/PreloadingView.ts b/front_end/panels/application/preloading/PreloadingView.ts
@@ -425,18 +425,19 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
     if (preloadingAttempt === null) {
       this.preloadingDetails.data = null;
     } else {
+      const pipeline = this.model.getPipeline(preloadingAttempt);
       const ruleSets = preloadingAttempt.ruleSetIds.map(id => this.model.getRuleSetById(id)).filter(x => x !== null) as
           Protocol.Preload.RuleSet[];
       this.preloadingDetails.data = {
-        preloadingAttempt,
+        pipeline,
         ruleSets,
         pageURL: pageURL(),
       };
     }
   }
 
   render(): void {
-    // Update preloaidng grid
+    // Update preloading grid
     const filteringRuleSetId = this.ruleSetSelector.getSelected();
     const rows = this.model.getRepresentativePreloadingAttempts(filteringRuleSetId).map(({id, value}) => {
       const attempt = value;
diff --git a/front_end/panels/application/preloading/components/PreloadingDetailsReportView.test.ts b/front_end/panels/application/preloading/components/PreloadingDetailsReportView.test.ts
@@ -52,7 +52,76 @@ describeWithEnvironment('PreloadingDetailsReportView', () => {
   it('renders prerendering details', async () => {
     const url = 'https://example.com/prerendered.html' as Platform.DevToolsPath.UrlString;
     const data: PreloadingComponents.PreloadingDetailsReportView.PreloadingDetailsReportViewData = {
-      preloadingAttempt: {
+      pipeline: SDK.PreloadingModel.PreloadPipeline.newFromAttemptsForTesting([
+        {
+          action: Protocol.Preload.SpeculationAction.Prefetch,
+          key: {
+            loaderId: 'loaderId' as Protocol.Network.LoaderId,
+            action: Protocol.Preload.SpeculationAction.Prefetch,
+            url,
+            targetHint: undefined,
+          },
+          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'] as Protocol.Preload.RuleSetId[],
+          nodeIds: [1] as Protocol.DOM.BackendNodeId[],
+        },
+        {
+          action: Protocol.Preload.SpeculationAction.Prerender,
+          key: {
+            loaderId: 'loaderId' as Protocol.Network.LoaderId,
+            action: Protocol.Preload.SpeculationAction.Prerender,
+            url,
+            targetHint: undefined,
+          },
+          pipelineId: 'pipelineId:1' as Protocol.Preload.PreloadPipelineId,
+          status: SDK.PreloadingModel.PreloadingStatus.RUNNING,
+          prerenderStatus: null,
+          disallowedMojoInterface: null,
+          mismatchedHeaders: null,
+          ruleSetIds: ['ruleSetId'] as Protocol.Preload.RuleSetId[],
+          nodeIds: [1] as Protocol.DOM.BackendNodeId[],
+        },
+      ]),
+      ruleSets: [
+        {
+          id: 'ruleSetId' as Protocol.Preload.RuleSetId,
+          loaderId: 'loaderId' as Protocol.Network.LoaderId,
+          sourceText: `
+{
+  "prefetch": [
+    {
+      "source": "list",
+      "urls": ["/subresource.js"]
+    }
+  ]
+}
+`,
+        },
+      ],
+      pageURL: 'https://example.com/' as Platform.DevToolsPath.UrlString,
+    };
+
+    const component = await renderPreloadingDetailsReportView(data);
+    const report = getElementWithinComponent(component, 'devtools-report', ReportView.ReportView.Report);
+
+    const keys = getCleanTextContentFromElements(report, 'devtools-report-key');
+    const values = getCleanTextContentFromElements(report, 'devtools-report-value');
+    assert.deepEqual(zip2(keys, values), [
+      ['URL', url],
+      ['Action', 'Prerender'],
+      ['Status', 'Speculative load is running.'],
+      ['Rule set', 'example.com/'],
+    ]);
+  });
+
+  // Prerender2FallbackPrefetchSpecRules disabled case.
+  it('doesn\'t render (automatically fell back to prefetch) if prerender alone', async () => {
+    const url = 'https://example.com/prerendered.html' as Platform.DevToolsPath.UrlString;
+    const data: PreloadingComponents.PreloadingDetailsReportView.PreloadingDetailsReportViewData = {
+      pipeline: SDK.PreloadingModel.PreloadPipeline.newFromAttemptsForTesting([{
         action: Protocol.Preload.SpeculationAction.Prerender,
         key: {
           loaderId: 'loaderId' as Protocol.Network.LoaderId,
@@ -67,7 +136,7 @@ describeWithEnvironment('PreloadingDetailsReportView', () => {
         mismatchedHeaders: null,
         ruleSetIds: ['ruleSetId'] as Protocol.Preload.RuleSetId[],
         nodeIds: [1] as Protocol.DOM.BackendNodeId[],
-      },
+      }]),
       ruleSets: [
         {
           id: 'ruleSetId' as Protocol.Preload.RuleSetId,
@@ -105,22 +174,39 @@ describeWithEnvironment('PreloadingDetailsReportView', () => {
   it('renders prerendering details with cancelled reason', async () => {
     const url = 'https://example.com/prerendered.html' as Platform.DevToolsPath.UrlString;
     const data: PreloadingComponents.PreloadingDetailsReportView.PreloadingDetailsReportViewData = {
-      preloadingAttempt: {
-        action: Protocol.Preload.SpeculationAction.Prerender,
-        key: {
-          loaderId: 'loaderId' as Protocol.Network.LoaderId,
+      pipeline: SDK.PreloadingModel.PreloadPipeline.newFromAttemptsForTesting([
+        {
+          action: Protocol.Preload.SpeculationAction.Prefetch,
+          key: {
+            loaderId: 'loaderId' as Protocol.Network.LoaderId,
+            action: Protocol.Preload.SpeculationAction.Prefetch,
+            url,
+            targetHint: undefined,
+          },
+          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'] as Protocol.Preload.RuleSetId[],
+          nodeIds: [1] as Protocol.DOM.BackendNodeId[],
+        },
+        {
           action: Protocol.Preload.SpeculationAction.Prerender,
-          url,
-          targetHint: undefined,
+          key: {
+            loaderId: 'loaderId' as Protocol.Network.LoaderId,
+            action: Protocol.Preload.SpeculationAction.Prerender,
+            url,
+            targetHint: undefined,
+          },
+          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'] as Protocol.Preload.RuleSetId[],
+          nodeIds: [1] as Protocol.DOM.BackendNodeId[],
         },
-        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'] as Protocol.Preload.RuleSetId[],
-        nodeIds: [1] as Protocol.DOM.BackendNodeId[],
-      },
+      ]),
       ruleSets: [
         {
           id: 'ruleSetId' as Protocol.Preload.RuleSetId,
@@ -147,8 +233,8 @@ describeWithEnvironment('PreloadingDetailsReportView', () => {
     const values = getCleanTextContentFromElements(report, 'devtools-report-value');
     assert.deepEqual(zip2(keys, values), [
       ['URL', url],
-      ['Action', 'Prerender'],
-      ['Status', 'Speculative load failed.'],
+      ['Action', 'Prerender (automatically fell back to prefetch)'],
+      ['Status', 'Speculative load failed, but fallback to prefetch succeeded.'],
       [
         'Failure reason',
         'The prerendered page used a forbidden JavaScript API that is currently not supported. (Internal Mojo interface: device.mojom.GamepadMonitor)',
@@ -166,7 +252,7 @@ describeWithEnvironment('PreloadingDetailsReportView', () => {
 
     const url = 'https://example.com/prefetch.html' as Platform.DevToolsPath.UrlString;
     const data: PreloadingComponents.PreloadingDetailsReportView.PreloadingDetailsReportViewData = {
-      preloadingAttempt: {
+      pipeline: SDK.PreloadingModel.PreloadPipeline.newFromAttemptsForTesting([{
         action: Protocol.Preload.SpeculationAction.Prefetch,
         key: {
           loaderId: 'loaderId' as Protocol.Network.LoaderId,
@@ -180,7 +266,7 @@ describeWithEnvironment('PreloadingDetailsReportView', () => {
         requestId: 'requestId:1' as Protocol.Network.RequestId,
         ruleSetIds: ['ruleSetId'] as Protocol.Preload.RuleSetId[],
         nodeIds: [1] as Protocol.DOM.BackendNodeId[],
-      },
+      }]),
       ruleSets: [
         {
           id: 'ruleSetId' as Protocol.Preload.RuleSetId,
@@ -227,7 +313,7 @@ describeWithEnvironment('PreloadingDetailsReportView', () => {
 
     const url = 'https://example.com/prefetch.html' as Platform.DevToolsPath.UrlString;
     const data: PreloadingComponents.PreloadingDetailsReportView.PreloadingDetailsReportViewData = {
-      preloadingAttempt: {
+      pipeline: SDK.PreloadingModel.PreloadPipeline.newFromAttemptsForTesting([{
         action: Protocol.Preload.SpeculationAction.Prefetch,
         key: {
           loaderId: 'loaderId' as Protocol.Network.LoaderId,
@@ -241,7 +327,7 @@ describeWithEnvironment('PreloadingDetailsReportView', () => {
         requestId: 'requestId:1' as Protocol.Network.RequestId,
         ruleSetIds: ['ruleSetId'] as Protocol.Preload.RuleSetId[],
         nodeIds: [1] as Protocol.DOM.BackendNodeId[],
-      },
+      }]),
       ruleSets: [
         {
           id: 'ruleSetId' as Protocol.Preload.RuleSetId,
@@ -278,4 +364,6 @@ describeWithEnvironment('PreloadingDetailsReportView', () => {
       ['Rule set', 'example.com/speculation-rules.json'],
     ]);
   });
+
+  // TODO: Add test for pipeline
 });
diff --git a/front_end/panels/application/preloading/components/PreloadingDetailsReportView.ts b/front_end/panels/application/preloading/components/PreloadingDetailsReportView.ts
@@ -51,6 +51,10 @@ const UIStrings = {
    *@description Header of rule set
    */
   detailsRuleSet: 'Rule set',
+  /**
+   *@description Description: status
+   */
+  automaticallyFellBackToPrefetch: '(automatically fell back to prefetch)',
   /**
    *@description Description: status
    */
@@ -75,6 +79,10 @@ const UIStrings = {
    *@description Description: status
    */
   detailedStatusFailure: 'Speculative load failed.',
+  /**
+   *@description Description: status
+   */
+  detailedStatusFallbackToPrefetch: 'Speculative load failed, but fallback to prefetch succeeded.',
   /**
    *@description button: Contents of button to inspect prerendered page
    */
@@ -123,7 +131,7 @@ const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 export type PreloadingDetailsReportViewData = PreloadingDetailsReportViewDataInternal|null;
 interface PreloadingDetailsReportViewDataInternal {
-  preloadingAttempt: SDK.PreloadingModel.PreloadingAttempt;
+  pipeline: SDK.PreloadingModel.PreloadPipeline;
   ruleSets: Protocol.Preload.RuleSet[];
   pageURL: Platform.DevToolsPath.UrlString;
   requestResolver?: Logs.RequestResolver.RequestResolver;
@@ -158,24 +166,23 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
         return;
       }
 
-      const detailedStatus = PreloadingUIUtils.detailedStatus(this.#data.preloadingAttempt);
+      const pipeline = this.#data.pipeline;
       const pageURL = this.#data.pageURL;
+      const isFallbackToPrefetch = pipeline.getPrerender()?.status === SDK.PreloadingModel.PreloadingStatus.FAILURE &&
+          (pipeline.getPrefetch()?.status === SDK.PreloadingModel.PreloadingStatus.READY ||
+           pipeline.getPrefetch()?.status === SDK.PreloadingModel.PreloadingStatus.SUCCESS);
 
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       LitHtml.render(html`
-        <devtools-report .data=${{reportTitle: 'Speculative Loading Attempt'}}
-        jslog=${VisualLogging.section('preloading-details')}>
+        <devtools-report
+          .data=${{reportTitle: 'Speculative Loading Attempt'}}
+          jslog=${VisualLogging.section('preloading-details')}>
           <devtools-report-section-header>${i18nString(UIStrings.detailsDetailedInformation)}</devtools-report-section-header>
 
           ${this.#url()}
-          ${this.#action()}
-
-          <devtools-report-key>${i18nString(UIStrings.detailsStatus)}</devtools-report-key>
-          <devtools-report-value>
-            ${detailedStatus}
-          </devtools-report-value>
-
+          ${this.#action(isFallbackToPrefetch)}
+          ${this.#status(isFallbackToPrefetch)}
           ${this.#maybePrefetchFailureReason()}
           ${this.#maybePrerenderFailureReason()}
 
@@ -188,7 +195,7 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
 
   #url(): LitHtml.LitTemplate {
     assertNotNullOrUndefined(this.#data);
-    const attempt = this.#data.preloadingAttempt;
+    const attempt = this.#data.pipeline.getOriginallyTriggered();
 
     let value;
     if (attempt.action === Protocol.Preload.SpeculationAction.Prefetch && attempt.requestId !== undefined) {
@@ -230,11 +237,16 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
     // clang-format on
   }
 
-  #action(): LitHtml.LitTemplate {
+  #action(isFallbackToPrefetch: boolean): LitHtml.LitTemplate {
     assertNotNullOrUndefined(this.#data);
-    const attempt = this.#data.preloadingAttempt;
+    const attempt = this.#data.pipeline.getOriginallyTriggered();
 
-    const action = PreloadingString.capitalizedAction(this.#data.preloadingAttempt.action);
+    const action = PreloadingString.capitalizedAction(attempt.action);
+
+    let maybeFellback: LitHtml.LitTemplate = LitHtml.nothing;
+    if (isFallbackToPrefetch) {
+      maybeFellback = html`${i18nString(UIStrings.automaticallyFellBackToPrefetch)}`;
+    }
 
     let maybeInspectButton: LitHtml.LitTemplate = LitHtml.nothing;
     (() => {
@@ -281,16 +293,32 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
         <devtools-report-value>
           <div class="text-ellipsis" title="">
             ${action}
+            ${maybeFellback}
             ${maybeInspectButton}
           </div>
         </devtools-report-value>
     `;
     // clang-format on
   }
 
+  #status(isFallbackToPrefetch: boolean): LitHtml.LitTemplate {
+    assertNotNullOrUndefined(this.#data);
+    const attempt = this.#data.pipeline.getOriginallyTriggered();
+
+    const detailedStatus = isFallbackToPrefetch ? i18nString(UIStrings.detailedStatusFallbackToPrefetch) :
+                                                  PreloadingUIUtils.detailedStatus(attempt);
+
+    return html`
+        <devtools-report-key>${i18nString(UIStrings.detailsStatus)}</devtools-report-key>
+        <devtools-report-value>
+          ${detailedStatus}
+        </devtools-report-value>
+    `;
+  }
+
   #maybePrefetchFailureReason(): LitHtml.LitTemplate {
     assertNotNullOrUndefined(this.#data);
-    const attempt = this.#data.preloadingAttempt;
+    const attempt = this.#data.pipeline.getOriginallyTriggered();
 
     if (attempt.action !== Protocol.Preload.SpeculationAction.Prefetch) {
       return LitHtml.nothing;
@@ -311,7 +339,7 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
 
   #maybePrerenderFailureReason(): LitHtml.LitTemplate {
     assertNotNullOrUndefined(this.#data);
-    const attempt = this.#data.preloadingAttempt;
+    const attempt = this.#data.pipeline.getOriginallyTriggered();
 
     if (attempt.action !== Protocol.Preload.SpeculationAction.Prerender) {
       return LitHtml.nothing;
