chrome-devtools-frontend 1.0.1386602 → 1.0.1418433

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

@@ -14,21 +14,37 @@ import * as Protocol from '../../../../generated/protocol.js';
 import * as Logs from '../../../../models/logs/logs.js';
 import * as Buttons from '../../../../ui/components/buttons/buttons.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';
+// eslint-disable-next-line rulesdir/es-modules-import
+import inspectorCommonStylesRaw from '../../../../ui/legacy/inspectorCommon.css.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
-import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
+import * as Lit from '../../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
 import * as PreloadingHelper from '../helper/helper.js';
 
-import preloadingDetailsReportViewStyles from './preloadingDetailsReportView.css.js';
+import preloadingDetailsReportViewStylesRaw from './preloadingDetailsReportView.css.js';
 import * as PreloadingString from './PreloadingString.js';
 import {prefetchFailureReason, prerenderFailureReason, ruleSetLocationShort} from './PreloadingString.js';
 
-const {html} = LitHtml;
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const preloadingDetailsReportViewStyles = new CSSStyleSheet();
+preloadingDetailsReportViewStyles.replaceSync(preloadingDetailsReportViewStylesRaw.cssContent);
+
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const inspectorCommonStyles = new CSSStyleSheet();
+inspectorCommonStyles.replaceSync(inspectorCommonStylesRaw.cssContent);
+
+const {html} = Lit;
 
 const UIStrings = {
   /**
-   *@description Text in PreloadingDetailsReportView of the Application panel
+   *@description Text in PreloadingDetailsReportView of the Application panel if no element is selected. An element here is an item in a
+   * table of target URLs and additional prefetching states. https://developer.chrome.com/docs/devtools/application/debugging-speculation-rules
+   */
+  noElementSelected: 'No element selected',
+  /**
+   *@description Text in PreloadingDetailsReportView of the Application panel to prompt user to select an element in a table. An element here is an item in a
+   * table of target URLs and additional prefetching states. https://developer.chrome.com/docs/devtools/application/debugging-speculation-rules
    */
   selectAnElementForMoreDetails: 'Select an element for more details',
   /**
@@ -51,6 +67,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 +95,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
    */
@@ -119,11 +143,9 @@ class PreloadingUIUtils {
   }
 }
 
-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;
@@ -134,7 +156,7 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
   #data: PreloadingDetailsReportViewData = null;
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [preloadingDetailsReportViewStyles];
+    this.#shadow.adoptedStyleSheets = [preloadingDetailsReportViewStyles, inspectorCommonStyles];
   }
 
   set data(data: PreloadingDetailsReportViewData) {
@@ -143,39 +165,37 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
   }
 
   async #render(): Promise<void> {
-    await coordinator.write('PreloadingDetailsReportView render', () => {
+    await RenderCoordinator.write('PreloadingDetailsReportView render', () => {
       if (this.#data === null) {
         // Disabled until https://crbug.com/1079231 is fixed.
         // clang-format off
-        LitHtml.render(html`
-          <div class="preloading-noselected">
-            <div>
-              <p>${i18nString(UIStrings.selectAnElementForMoreDetails)}</p>
-            </div>
+        Lit.render(html`
+          <div class="empty-state">
+            <span class="empty-state-header">${i18nString(UIStrings.noElementSelected)}</span>
+            <span class="empty-state-description">${i18nString(UIStrings.selectAnElementForMoreDetails)}</span>
           </div>
         `, this.#shadow, {host: this});
         // clang-format on
         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')}>
+      Lit.render(html`
+        <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()}
 
@@ -186,25 +206,27 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
     });
   }
 
-  #url(): LitHtml.LitTemplate {
+  #url(): Lit.LitTemplate {
     assertNotNullOrUndefined(this.#data);
-    const attempt = this.#data.preloadingAttempt;
+    const attempt = this.#data.pipeline.getOriginallyTriggered();
+
+    const prefetchStatus = this.#data.pipeline.getPrefetch()?.status;
 
     let value;
-    if (attempt.action === Protocol.Preload.SpeculationAction.Prefetch && attempt.requestId !== undefined) {
+    if (attempt.action === Protocol.Preload.SpeculationAction.Prefetch && attempt.requestId !== undefined &&
+        prefetchStatus !== SDK.PreloadingModel.PreloadingStatus.NOT_TRIGGERED) {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
+      const {requestId, key: {url}} = attempt;
+      const affectedRequest: {requestId?: Protocol.Network.RequestId, url?: string} = {requestId, url};
       value = html`
           <devtools-request-link-icon
             .data=${
               {
-                affectedRequest: {
-                  requestId: attempt.requestId,
-                  url: attempt.key.url,
-                },
+                affectedRequest,
                 requestResolver: this.#data.requestResolver || new Logs.RequestResolver.RequestResolver(),
                 displayURL: true,
-                urlToDisplay: attempt.key.url,
+                urlToDisplay: url,
               }
             }
           >
@@ -230,13 +252,18 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
     // clang-format on
   }
 
-  #action(): LitHtml.LitTemplate {
+  #action(isFallbackToPrefetch: boolean): Lit.LitTemplate {
     assertNotNullOrUndefined(this.#data);
-    const attempt = this.#data.preloadingAttempt;
+    const attempt = this.#data.pipeline.getOriginallyTriggered();
+
+    const action = PreloadingString.capitalizedAction(attempt.action);
 
-    const action = PreloadingString.capitalizedAction(this.#data.preloadingAttempt.action);
+    let maybeFellback: Lit.LitTemplate = Lit.nothing;
+    if (isFallbackToPrefetch) {
+      maybeFellback = html`${i18nString(UIStrings.automaticallyFellBackToPrefetch)}`;
+    }
 
-    let maybeInspectButton: LitHtml.LitTemplate = LitHtml.nothing;
+    let maybeInspectButton: Lit.LitTemplate = Lit.nothing;
     (() => {
       if (attempt.action !== Protocol.Preload.SpeculationAction.Prerender) {
         return;
@@ -281,6 +308,7 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
         <devtools-report-value>
           <div class="text-ellipsis" title="">
             ${action}
+            ${maybeFellback}
             ${maybeInspectButton}
           </div>
         </devtools-report-value>
@@ -288,17 +316,32 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
     // clang-format on
   }
 
-  #maybePrefetchFailureReason(): LitHtml.LitTemplate {
+  #status(isFallbackToPrefetch: boolean): Lit.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(): Lit.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;
+      return Lit.nothing;
     }
 
     const failureDescription = prefetchFailureReason(attempt);
     if (failureDescription === null) {
-      return LitHtml.nothing;
+      return Lit.nothing;
     }
 
     return html`
@@ -309,17 +352,17 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
     `;
   }
 
-  #maybePrerenderFailureReason(): LitHtml.LitTemplate {
+  #maybePrerenderFailureReason(): Lit.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;
+      return Lit.nothing;
     }
 
     const failureReason = prerenderFailureReason(attempt);
     if (failureReason === null) {
-      return LitHtml.nothing;
+      return Lit.nothing;
     }
 
     return html`
@@ -330,7 +373,7 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
     `;
   }
 
-  #renderRuleSet(ruleSet: Protocol.Preload.RuleSet, pageURL: Platform.DevToolsPath.UrlString): LitHtml.LitTemplate {
+  #renderRuleSet(ruleSet: Protocol.Preload.RuleSet, pageURL: Platform.DevToolsPath.UrlString): Lit.LitTemplate {
     const revealRuleSetView = (): void => {
       void Common.Revealer.reveal(new PreloadingHelper.PreloadingForward.RuleSetView(ruleSet.id));
     };
@@ -345,7 +388,7 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
           <button class="link" role="link"
             @click=${revealRuleSetView}
             title=${i18nString(UIStrings.buttonClickToRevealRuleSet)}
-            style=${LitHtml.Directives.styleMap({
+            style=${Lit.Directives.styleMap({
               color: 'var(--sys-color-primary)',
               'text-decoration': 'underline',
             })}

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

@@ -7,18 +7,22 @@ import '../../../../ui/components/report_view/report_view.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as Platform from '../../../../core/platform/platform.js';
 import type * as Protocol from '../../../../generated/protocol.js';
+import * as Buttons from '../../../../ui/components/buttons/buttons.js';
 import * as ChromeLink from '../../../../ui/components/chrome_link/chrome_link.js';
 import * as Dialogs from '../../../../ui/components/dialogs/dialogs.js';
-import * as IconButton from '../../../../ui/components/icon_button/icon_button.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 UI from '../../../../ui/legacy/legacy.js';
-import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
+import * as Lit from '../../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
 
-import preloadingDisabledInfobarStyles from './preloadingDisabledInfobar.css.js';
+import preloadingDisabledInfobarStylesRaw from './preloadingDisabledInfobar.css.js';
 
-const {html} = LitHtml;
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const preloadingDisabledInfobarStyles = new CSSStyleSheet();
+preloadingDisabledInfobarStyles.replaceSync(preloadingDisabledInfobarStylesRaw.cssContent);
+
+const {html} = Lit;
 
 const UIStrings = {
   /**
@@ -96,8 +100,6 @@ const str_ =
     i18n.i18n.registerUIStrings('panels/application/preloading/components/PreloadingDisabledInfobar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
 
   readonly #shadow = this.attachShadow({mode: 'open'});
@@ -120,12 +122,12 @@ export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.Wrapp
   }
 
   async #render(): Promise<void> {
-    await coordinator.write('PreloadingDisabledInfobar render', () => {
-      LitHtml.render(this.#renderInternal(), this.#shadow, {host: this});
+    await RenderCoordinator.write('PreloadingDisabledInfobar render', () => {
+      Lit.render(this.#renderInternal(), this.#shadow, {host: this});
     });
   }
 
-  #renderInternal(): LitHtml.LitTemplate {
+  #renderInternal(): Lit.LitTemplate {
     const forceEnabled =
         this.#data.disabledByHoldbackPrefetchSpeculationRules || this.#data.disabledByHoldbackPrerenderSpeculationRules;
     const disabled =
@@ -137,7 +139,7 @@ export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.Wrapp
     } else if (forceEnabled) {
       header = i18nString(UIStrings.infobarPreloadingIsForceEnabled);
     } else {
-      return LitHtml.nothing;
+      return Lit.nothing;
     }
 
     // Disabled until https://crbug.com/1079231 is fixed.
@@ -148,30 +150,27 @@ export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.Wrapp
           ${header}
         </span>
 
-        <devtools-icon-dialog
+        <devtools-button-dialog
           .data=${{
-            iconData: {
-              iconName: 'info',
-              color: 'var(--icon-default-hover)',
-              width: '16px',
-              height: '16px',
-            },
+            iconName: 'info',
+            variant: Buttons.Button.Variant.ICON,
             closeButton: true,
             position: Dialogs.Dialog.DialogVerticalPosition.AUTO,
             horizontalAlignment: Dialogs.Dialog.DialogHorizontalAlignment.AUTO,
             closeOnESC: true,
             closeOnScroll: false,
-          }}
+            dialogTitle: i18nString(UIStrings.titleReasonsPreventingPreloading),
+          } as Dialogs.ButtonDialog.ButtonDialogData}
           jslog=${VisualLogging.dialog('preloading-disabled').track({resize: true, keydown: 'Escape'})}
         >
           ${this.#dialogContents()}
-        </devtools-icon-dialog>
+        </devtools-button-dialog>
       </div>
     `;
-            // clang-format on
+    // clang-format on
   }
 
-  #dialogContents(): LitHtml.LitTemplate {
+  #dialogContents(): Lit.LitTemplate {
     const LINK = 'https://developer.chrome.com/blog/prerender-pages/';
 
     const learnMoreLink =
@@ -179,26 +178,16 @@ export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.Wrapp
     const iconLink = UI.Fragment.html`
       <x-link class="icon-link devtools-link" tabindex="0" href="${LINK}"></x-link>
     ` as UI.XLink.XLink;
-    const iconLinkIcon = new IconButton.Icon.Icon();
-    iconLinkIcon
-        .data = {iconName: 'open-externally', color: 'var(--icon-default-hover)', width: '16px', height: '16px'};
-    iconLink.append(iconLinkIcon);
 
     return html`
       <div id='contents'>
-        <div id='title'>${i18nString(UIStrings.titleReasonsPreventingPreloading)}</div>
-
         <devtools-report>
           ${this.#maybeDisalebByPreference()}
           ${this.#maybeDisalebByDataSaver()}
           ${this.#maybeDisalebByBatterySaver()}
           ${this.#maybeDisalebByHoldbackPrefetchSpeculationRules()}
           ${this.#maybeDisalebByHoldbackPrerenderSpeculationRules()}
-
-          <devtools-report-divider>
-          </devtools-report-divider>
         </devtools-report>
-
         <div id='footer'>
           ${learnMoreLink}
           ${iconLink}
@@ -207,9 +196,9 @@ export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.Wrapp
     `;
   }
 
-  #maybeKeyValue(shouldShow: boolean, header: string, description: string|Element): LitHtml.LitTemplate {
+  #maybeKeyValue(shouldShow: boolean, header: string, description: string|Element): Lit.LitTemplate {
     if (!shouldShow) {
-      return LitHtml.nothing;
+      return Lit.nothing;
     }
 
     return html`
@@ -222,7 +211,7 @@ export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.Wrapp
     `;
   }
 
-  #maybeDisalebByPreference(): LitHtml.LitTemplate {
+  #maybeDisalebByPreference(): Lit.LitTemplate {
     const preloadingSettingLink = new ChromeLink.ChromeLink.ChromeLink();
     preloadingSettingLink.href = 'chrome://settings/performance' as Platform.DevToolsPath.UrlString;
     preloadingSettingLink.textContent = i18nString(UIStrings.preloadingPagesSettings);
@@ -235,26 +224,26 @@ export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.Wrapp
         this.#data.disabledByPreference, i18nString(UIStrings.headerDisabledByPreference), description);
   }
 
-  #maybeDisalebByDataSaver(): LitHtml.LitTemplate {
+  #maybeDisalebByDataSaver(): Lit.LitTemplate {
     return this.#maybeKeyValue(
         this.#data.disabledByDataSaver, i18nString(UIStrings.headerDisabledByDataSaver),
         i18nString(UIStrings.descriptionDisabledByDataSaver));
   }
 
-  #maybeDisalebByBatterySaver(): LitHtml.LitTemplate {
+  #maybeDisalebByBatterySaver(): Lit.LitTemplate {
     return this.#maybeKeyValue(
         this.#data.disabledByBatterySaver, i18nString(UIStrings.headerDisabledByBatterySaver),
         i18nString(UIStrings.descriptionDisabledByBatterySaver));
   }
 
-  #maybeDisalebByHoldbackPrefetchSpeculationRules(): LitHtml.LitTemplate {
+  #maybeDisalebByHoldbackPrefetchSpeculationRules(): Lit.LitTemplate {
     return this.#maybeKeyValue(
         this.#data.disabledByHoldbackPrefetchSpeculationRules,
         i18nString(UIStrings.headerDisabledByHoldbackPrefetchSpeculationRules),
         i18nString(UIStrings.descriptionDisabledByHoldbackPrefetchSpeculationRules));
   }
 
-  #maybeDisalebByHoldbackPrerenderSpeculationRules(): LitHtml.LitTemplate {
+  #maybeDisalebByHoldbackPrerenderSpeculationRules(): Lit.LitTemplate {
     return this.#maybeKeyValue(
         this.#data.disabledByHoldbackPrerenderSpeculationRules,
         i18nString(UIStrings.headerDisabledByHoldbackPrerenderSpeculationRules),