chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

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

@@ -32,6 +32,10 @@ const UIStrings = {
    *@description Column header: Status of preloading attempt
    */
   status: 'Status',
+  /**
+   *@description Status: Prerender failed, but prefetch is available
+   */
+  prefetchFallbackReady: 'Prefetch fallback ready',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/preloading/components/PreloadingGrid.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -45,7 +49,7 @@ export interface PreloadingGridData {
 
 export interface PreloadingGridRow {
   id: string;
-  attempt: SDK.PreloadingModel.PreloadingAttempt;
+  pipeline: SDK.PreloadingModel.PreloadPipeline;
   ruleSets: Protocol.Preload.RuleSet[];
 }
 
@@ -120,67 +124,86 @@ export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableCompone
   }
 
   #buildReportRows(): DataGrid.DataGridUtils.Row[] {
-    function statusRenderer(statusString: string, status: SDK.PreloadingModel.PreloadingStatus): LitHtml.LitTemplate {
-      if (status !== SDK.PreloadingModel.PreloadingStatus.FAILURE) {
-        return html`<div>${statusString}</div>`;
+    function statusRenderer(statusString: string, pipeline: SDK.PreloadingModel.PreloadPipeline): LitHtml.LitTemplate {
+      function render(color: string, iconName: string|null, message: string): LitHtml.LitTemplate {
+        const styleColor = {
+          color: `var(${color})`,
+        };
+        let icon;
+        if (iconName !== null) {
+          // Disabled until https://crbug.com/1079231 is fixed.
+          // clang-format off
+          icon = html`
+            <devtools-icon
+              .data=${{
+                iconName,
+                width: '16px',
+                height: '16px',
+                ...styleColor,
+              }}
+              style=${LitHtml.Directives.styleMap({
+                'vertical-align': 'sub',
+              })}
+            >
+            </devtools-icon>
+          `;
+          // clang-format on
+        }
+        // Disabled until https://crbug.com/1079231 is fixed.
+        // clang-format off
+        return html`
+          <div style=${LitHtml.Directives.styleMap(styleColor)}>
+            ${icon} ${message}
+          </div>
+        `;
+        // clang-format on
+      }
+
+      if (pipeline.getPrerender()?.status === SDK.PreloadingModel.PreloadingStatus.FAILURE &&
+          (pipeline.getPrefetch()?.status === SDK.PreloadingModel.PreloadingStatus.READY ||
+           pipeline.getPrefetch()?.status === SDK.PreloadingModel.PreloadingStatus.SUCCESS)) {
+        return render('--sys-color-orange-bright', 'warning-filled', i18nString(UIStrings.prefetchFallbackReady));
+      }
+
+      if (pipeline.getOriginallyTriggered().status === SDK.PreloadingModel.PreloadingStatus.FAILURE) {
+        return render('--sys-color-error', 'cross-circle-filled', statusString);
       }
 
-      // Disabled until https://crbug.com/1079231 is fixed.
-      // clang-format off
-      return html`
-        <div
-          style=${LitHtml.Directives.styleMap({
-            color: 'var(--sys-color-error)',
-          })}
-        >
-          <devtools-icon
-            .data=${{
-              iconName: 'cross-circle-filled',
-              color: 'var(--sys-color-error)',
-              width: '16px',
-              height: '16px',
-            }}
-            style=${LitHtml.Directives.styleMap({
-              'vertical-align': 'sub',
-            })}
-          >
-          </devtools-icon>
-          ${statusString}
-        </div>
-      `;
-              // clang-format on
+      return render('--sys-color-on-surface', null, statusString);
     }
 
     assertNotNullOrUndefined(this.#data);
 
     const pageURL = this.#data.pageURL;
     const securityOrigin = pageURL === '' ? null : (new Common.ParsedURL.ParsedURL(pageURL)).securityOrigin();
-    return this.#data.rows.map(
-        row => ({
-          cells: [
-            {columnId: 'id', value: row.id},
-            {
-              columnId: 'url',
-              value: this.#urlShort(row, securityOrigin),
-              title: row.attempt.key.url,
-            },
-            {columnId: 'action', value: PreloadingString.capitalizedAction(row.attempt.action)},
-            {
-              columnId: 'rule-set',
-              value: row.ruleSets.length === 0 ? '' : PreloadingString.ruleSetLocationShort(row.ruleSets[0], pageURL),
-            },
-            {
-              columnId: 'status',
-              value: PreloadingString.composedStatus(row.attempt),
-              renderer: status => statusRenderer(status as string, row.attempt.status),
-            },
-          ],
-        }));
+    return this.#data.rows.map(row => {
+      const attempt = row.pipeline.getOriginallyTriggered();
+      return {
+        cells: [
+          {columnId: 'id', value: row.id},
+          {
+            columnId: 'url',
+            value: this.#urlShort(row, securityOrigin),
+            title: attempt.key.url,
+          },
+          {columnId: 'action', value: PreloadingString.capitalizedAction(attempt.action)},
+          {
+            columnId: 'rule-set',
+            value: row.ruleSets.length === 0 ? '' : PreloadingString.ruleSetLocationShort(row.ruleSets[0], pageURL),
+          },
+          {
+            columnId: 'status',
+            value: PreloadingString.composedStatus(attempt),
+            renderer: status => statusRenderer(status as string, row.pipeline),
+          },
+        ],
+      };
+    });
   }
 
   // Shorten URL if a preloading attempt is same-origin.
   #urlShort(row: PreloadingGridRow, securityOrigin: string|null): string {
-    const url = row.attempt.key.url;
+    const url = row.pipeline.getOriginallyTriggered().key.url;
     return securityOrigin && url.startsWith(securityOrigin) ? url.slice(securityOrigin.length) : url;
   }
 }

package/front_end/panels/application/preloading/components/PreloadingMismatchedHeadersGrid.test.ts

@@ -10,18 +10,16 @@ import {
   renderElementIntoDOM,
 } from '../../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js';
-import * as Coordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
 
 import * as PreloadingComponents from './components.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 async function renderPreloadingMismatchedHeadersGrid(data: SDK.PreloadingModel.PrerenderAttempt): Promise<HTMLElement> {
   const component = new PreloadingComponents.PreloadingMismatchedHeadersGrid.PreloadingMismatchedHeadersGrid();
   component.data = data;
   renderElementIntoDOM(component);
   assert.isNotNull(component.shadowRoot);
-  await coordinator.done();
+  await RenderCoordinator.done();
 
   return component;
 }
@@ -35,6 +33,7 @@ async function testPreloadingMismatchedHeadersGrid(
       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.ActivationNavigationParameterMismatch,
     disallowedMojoInterface: null,

package/front_end/panels/application/preloading/components/RuleSetDetailsView.test.ts

@@ -7,13 +7,11 @@ import {
   renderElementIntoDOM,
 } from '../../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js';
-import * as Coordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
 import type * as TextEditor from '../../../../ui/components/text_editor/text_editor.js';
 
 import * as PreloadingComponents from './components.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 async function renderRuleSetDetailsView(
     data: PreloadingComponents.RuleSetDetailsView.RuleSetDetailsViewData,
     shouldPrettyPrint: boolean): Promise<HTMLElement> {
@@ -22,7 +20,7 @@ async function renderRuleSetDetailsView(
   component.data = data;
   renderElementIntoDOM(component);
   assert.isNotNull(component.shadowRoot);
-  await coordinator.done();
+  await RenderCoordinator.done();
 
   return component;
 }
@@ -32,7 +30,6 @@ describeWithEnvironment('RuleSetDetailsView', () => {
     const data = null;
 
     const component = await renderRuleSetDetailsView(data, false);
-    await coordinator.done({waitForWork: true});
     assert.isNotNull(component.shadowRoot);
     assert.strictEqual(component.shadowRoot.textContent, '');
   });
@@ -54,8 +51,7 @@ describeWithEnvironment('RuleSetDetailsView', () => {
       backendNodeId: 1 as Protocol.DOM.BackendNodeId,
     };
     const component = await renderRuleSetDetailsView(data, false);
-    await coordinator.done({waitForWork: true});
-    assert.deepEqual(component.shadowRoot?.getElementById('error-message-text')?.textContent, undefined);
+    assert.isUndefined(component.shadowRoot?.getElementById('error-message-text')?.textContent);
 
     const textEditor = component.shadowRoot?.querySelector('devtools-text-editor') as TextEditor.TextEditor.TextEditor;
     assert.strictEqual(textEditor.state.doc.toString(), data.sourceText);
@@ -79,13 +75,12 @@ describeWithEnvironment('RuleSetDetailsView', () => {
       requestId: 'reqeustId' as Protocol.Network.RequestId,
     };
     const component = await renderRuleSetDetailsView(data, false);
-    await coordinator.done({waitForWork: true});
-    assert.deepEqual(component.shadowRoot?.getElementById('error-message-text')?.textContent, undefined);
+    assert.isUndefined(component.shadowRoot?.getElementById('error-message-text')?.textContent);
     const textEditor = component.shadowRoot?.querySelector('devtools-text-editor') as TextEditor.TextEditor.TextEditor;
     assert.strictEqual(textEditor.state.doc.toString(), data.sourceText);
   });
 
-  it('renders invalid rule set', async () => {
+  it('renders invalid rule set, broken JSON', async () => {
     const data: Protocol.Preload.RuleSet = {
       id: 'ruleSetId:1' as Protocol.Preload.RuleSetId,
       loaderId: 'loaderId:1' as Protocol.Network.LoaderId,
@@ -100,14 +95,13 @@ describeWithEnvironment('RuleSetDetailsView', () => {
       errorMessage: 'Line: 6, column: 1, Syntax error.',
     };
     const component = await renderRuleSetDetailsView(data, false);
-    await coordinator.done({waitForWork: true});
     assert.deepEqual(
         component.shadowRoot?.getElementById('error-message-text')?.textContent, 'Line: 6, column: 1, Syntax error.');
     const textEditor = component.shadowRoot?.querySelector('devtools-text-editor') as TextEditor.TextEditor.TextEditor;
     assert.strictEqual(textEditor.state.doc.toString(), data.sourceText);
   });
 
-  it('renders invalid rule set', async () => {
+  it('renders invalid rule set, lacking `urls`', async () => {
     const data: Protocol.Preload.RuleSet = {
       id: 'ruleSetId:1' as Protocol.Preload.RuleSetId,
       loaderId: 'loaderId:1' as Protocol.Network.LoaderId,
@@ -125,7 +119,6 @@ describeWithEnvironment('RuleSetDetailsView', () => {
       errorMessage: 'A list rule must have a "urls" array.',
     };
     const component = await renderRuleSetDetailsView(data, false);
-    await coordinator.done({waitForWork: true});
     assert.deepEqual(
         component.shadowRoot?.getElementById('error-message-text')?.textContent,
         'A list rule must have a "urls" array.');
@@ -141,8 +134,7 @@ describeWithEnvironment('RuleSetDetailsView', () => {
       backendNodeId: 1 as Protocol.DOM.BackendNodeId,
     };
     const component = await renderRuleSetDetailsView(data, true);
-    await coordinator.done({waitForWork: true});
-    assert.deepEqual(component.shadowRoot?.getElementById('error-message-text')?.textContent, undefined);
+    assert.isUndefined(component.shadowRoot?.getElementById('error-message-text')?.textContent);
 
     const textEditor = component.shadowRoot?.querySelector('devtools-text-editor') as TextEditor.TextEditor.TextEditor;
     // Formatted sourceText should be different from the data.sourceText in this case.

package/front_end/panels/application/preloading/components/RuleSetDetailsView.ts

@@ -9,7 +9,7 @@ import * as Formatter from '../../../../models/formatter/formatter.js';
 import * as CodeMirror from '../../../../third_party/codemirror.next/codemirror.next.js';
 import * as CodeHighlighter from '../../../../ui/components/code_highlighter/code_highlighter.js';
 import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import * as Coordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
 import * as TextEditor from '../../../../ui/components/text_editor/text_editor.js';
 import type * as UI from '../../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
@@ -20,7 +20,6 @@ const {html} = LitHtml;
 
 type RuleSet = Protocol.Preload.RuleSet;
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 const codeMirrorJsonType = await CodeHighlighter.CodeHighlighter.languageFromMIME('application/json');
 
 export type RuleSetDetailsViewData = RuleSet|null;
@@ -45,14 +44,14 @@ export class RuleSetDetailsView extends LegacyWrapper.LegacyWrapper.WrappableCom
   }
 
   async #render(): Promise<void> {
-    const sourceText = await this.#getSourceText();
-
-    await coordinator.write('RuleSetDetailsView render', () => {
+    await RenderCoordinator.write('RuleSetDetailsView render', async () => {
       if (this.#data === null) {
         LitHtml.render(LitHtml.nothing, this.#shadow, {host: this});
         return;
       }
 
+      const sourceText = await this.#getSourceText();
+
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       LitHtml.render(html`

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

@@ -8,19 +8,17 @@ import {assertGridContents} from '../../../../testing/DataGridHelpers.js';
 import {renderElementIntoDOM} from '../../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js';
 import type * as DataGrid from '../../../../ui/components/data_grid/data_grid.js';
-import * as Coordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
 
 import * as PreloadingComponents from './components.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 async function assertRenderResult(
     rowsInput: PreloadingComponents.RuleSetGrid.RuleSetGridData, headerExpected: string[],
     rowsExpected: string[][]): Promise<DataGrid.DataGrid.DataGrid> {
   const component = new PreloadingComponents.RuleSetGrid.RuleSetGrid();
   component.update(rowsInput);
   renderElementIntoDOM(component);
-  await coordinator.done();
+  await RenderCoordinator.done();
 
   return assertGridContents(
       component,