chrome-devtools-frontend 1.0.1555174 → 1.0.1556696

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

@@ -5,6 +5,7 @@
 
 import '../../../../ui/components/report_view/report_view.js';
 import '../../../../ui/components/request_link_icon/request_link_icon.js';
+import '../../../../ui/legacy/components/utils/utils.js';
 
 import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
@@ -14,8 +15,6 @@ import * as SDK from '../../../../core/sdk/sdk.js';
 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 RenderCoordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
@@ -156,284 +155,278 @@ interface PreloadingDetailsReportViewDataInternal {
   requestResolver?: Logs.RequestResolver.RequestResolver;
 }
 
-export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #data: PreloadingDetailsReportViewData = null;
-
-  set data(data: PreloadingDetailsReportViewData) {
-    this.#data = data;
-    void this.#render();
-  }
+export interface ViewInput {
+  data: PreloadingDetailsReportViewData;
+  onRevealRuleSet: (ruleSet: Protocol.Preload.RuleSet) => void;
+}
+export type ViewOutput = unknown;
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
 
-  async #render(): Promise<void> {
-    await RenderCoordinator.write('PreloadingDetailsReportView render', () => {
-      if (this.#data === null) {
-        // Disabled until https://crbug.com/1079231 is fixed.
-        // clang-format off
-        Lit.render(html`
-          <style>${preloadingDetailsReportViewStyles}</style>
-          <style>${UI.inspectorCommonStyles}</style>
-          <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;
-      }
+function url(data: PreloadingDetailsReportViewDataInternal): Lit.LitTemplate {
+  const attempt = data.pipeline.getOriginallyTriggered();
 
-      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
-      Lit.render(html`
-        <style>${preloadingDetailsReportViewStyles}</style>
-        <style>${UI.inspectorCommonStyles}</style>
-        <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(isFallbackToPrefetch)}
-          ${this.#status(isFallbackToPrefetch)}
-          ${this.#targetHint()}
-          ${this.#maybePrefetchFailureReason()}
-          ${this.#maybePrerenderFailureReason()}
-
-          ${this.#data.ruleSets.map(ruleSet => this.#renderRuleSet(ruleSet, pageURL))}
-        </devtools-report>
-      `, this.#shadow, {host: this});
-      // clang-format on
-    });
-  }
-
-  #url(): Lit.LitTemplate {
-    assertNotNullOrUndefined(this.#data);
-    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 &&
-        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,
-                requestResolver: this.#data.requestResolver || new Logs.RequestResolver.RequestResolver(),
-                displayURL: true,
-                urlToDisplay: url,
-              }
-            }
-          >
-          </devtools-request-link-icon>
-      `;
-    } else {
-      // Disabled until https://crbug.com/1079231 is fixed.
-      // clang-format off
-      value = html`
-          <div class="text-ellipsis" title=${attempt.key.url}>${attempt.key.url}</div>
-      `;
-      // clang-format on
-    }
+  const prefetchStatus = data.pipeline.getPrefetch()?.status;
 
+  let value;
+  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
-    return html`
-        <devtools-report-key>${i18n.i18n.lockedString('URL')}</devtools-report-key>
-        <devtools-report-value>
-          ${value}
-        </devtools-report-value>
+    const {requestId, key: {url}} = attempt;
+    const affectedRequest: {requestId?: Protocol.Network.RequestId, url?: string} = {requestId, url};
+    value = html`
+        <devtools-request-link-icon
+          .data=${
+            {
+              affectedRequest,
+              requestResolver: data.requestResolver || new Logs.RequestResolver.RequestResolver(),
+              displayURL: true,
+              urlToDisplay: url,
+            }
+          }
+        >
+        </devtools-request-link-icon>
     `;
-    // clang-format on
+  } else {
+    value = html`<div class="text-ellipsis" title=${attempt.key.url}>${attempt.key.url}</div>`;
   }
 
-  #isPrerenderLike(speculationAction: Protocol.Preload.SpeculationAction): boolean {
-    return [
-      Protocol.Preload.SpeculationAction.Prerender, Protocol.Preload.SpeculationAction.PrerenderUntilScript
-    ].includes(speculationAction);
-  }
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
+  return html`
+      <devtools-report-key>${i18n.i18n.lockedString('URL')}</devtools-report-key>
+      <devtools-report-value>
+        ${value}
+      </devtools-report-value>
+  `;
+  // clang-format on
+}
 
-  #action(isFallbackToPrefetch: boolean): Lit.LitTemplate {
-    assertNotNullOrUndefined(this.#data);
-    const attempt = this.#data.pipeline.getOriginallyTriggered();
+function isPrerenderLike(speculationAction: Protocol.Preload.SpeculationAction): boolean {
+  return [
+    Protocol.Preload.SpeculationAction.Prerender, Protocol.Preload.SpeculationAction.PrerenderUntilScript
+  ].includes(speculationAction);
+}
 
-    const action = PreloadingString.capitalizedAction(attempt.action);
+function action(data: PreloadingDetailsReportViewDataInternal, isFallbackToPrefetch: boolean): Lit.LitTemplate {
+  const attempt = data.pipeline.getOriginallyTriggered();
 
-    let maybeFallback: Lit.LitTemplate = Lit.nothing;
-    if (isFallbackToPrefetch) {
-      maybeFallback = html`${i18nString(UIStrings.automaticallyFellBackToPrefetch)}`;
+  const action = PreloadingString.capitalizedAction(attempt.action);
+
+  let maybeFallback: Lit.LitTemplate = Lit.nothing;
+  if (isFallbackToPrefetch) {
+    maybeFallback = html`${i18nString(UIStrings.automaticallyFellBackToPrefetch)}`;
+  }
+
+  let maybeInspectButton: Lit.LitTemplate = Lit.nothing;
+  (() => {
+    if (!isPrerenderLike(attempt.action)) {
+      return;
     }
 
-    let maybeInspectButton: Lit.LitTemplate = Lit.nothing;
-    (() => {
-      if (!this.#isPrerenderLike(attempt.action)) {
-        return;
-      }
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    if (target === null) {
+      return;
+    }
+
+    const prerenderTarget = SDK.TargetManager.TargetManager.instance().targets().find(
+        child => child.targetInfo()?.subtype === 'prerender' && child.inspectedURL() === attempt.key.url);
 
-      const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-      if (target === null) {
+    const disabled = (prerenderTarget === undefined);
+    const inspect = (): void => {
+      if (prerenderTarget === undefined) {
         return;
       }
-
-      const prerenderTarget = SDK.TargetManager.TargetManager.instance().targets().find(
-          child => child.targetInfo()?.subtype === 'prerender' && child.inspectedURL() === attempt.key.url);
-
-      const disabled = (prerenderTarget === undefined);
-      const inspect = (): void => {
-        if (prerenderTarget === undefined) {
-          return;
-        }
-        UI.Context.Context.instance().setFlavor(SDK.Target.Target, prerenderTarget);
-      };
-      // Disabled until https://crbug.com/1079231 is fixed.
-      // clang-format off
-      maybeInspectButton = html`
-          <devtools-button
-            @click=${inspect}
-            .title=${i18nString(UIStrings.buttonClickToInspect)}
-            .size=${Buttons.Button.Size.SMALL}
-            .variant=${Buttons.Button.Variant.OUTLINED}
-            .disabled=${disabled}
-            jslog=${VisualLogging.action('inspect-prerendered-page').track({click: true})}
-          >
-            ${i18nString(UIStrings.buttonInspect)}
-          </devtools-button>
-      `;
-      // clang-format on
-    })();
-
+      UI.Context.Context.instance().setFlavor(SDK.Target.Target, prerenderTarget);
+    };
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return html`
-        <devtools-report-key>${i18nString(UIStrings.detailsAction)}</devtools-report-key>
-        <devtools-report-value>
-          <div class="text-ellipsis" title="">
-            ${action} ${maybeFallback} ${maybeInspectButton}
-          </div>
-        </devtools-report-value>
+    maybeInspectButton = html`
+        <devtools-button
+          @click=${inspect}
+          .title=${i18nString(UIStrings.buttonClickToInspect)}
+          .size=${Buttons.Button.Size.SMALL}
+          .variant=${Buttons.Button.Variant.OUTLINED}
+          .disabled=${disabled}
+          jslog=${VisualLogging.action('inspect-prerendered-page').track({click: true})}
+        >
+          ${i18nString(UIStrings.buttonInspect)}
+        </devtools-button>
     `;
     // clang-format on
-  }
+  })();
 
-  #status(isFallbackToPrefetch: boolean): Lit.LitTemplate {
-    assertNotNullOrUndefined(this.#data);
-    const attempt = this.#data.pipeline.getOriginallyTriggered();
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
+  return html`
+      <devtools-report-key>${i18nString(UIStrings.detailsAction)}</devtools-report-key>
+      <devtools-report-value>
+        <div class="text-ellipsis" title="">
+          ${action} ${maybeFallback} ${maybeInspectButton}
+        </div>
+      </devtools-report-value>
+  `;
+  // clang-format on
+}
 
-    const detailedStatus = isFallbackToPrefetch ? i18nString(UIStrings.detailedStatusFallbackToPrefetch) :
-                                                  PreloadingUIUtils.detailedStatus(attempt);
+function status(data: PreloadingDetailsReportViewDataInternal, isFallbackToPrefetch: boolean): Lit.LitTemplate {
+  const attempt = data.pipeline.getOriginallyTriggered();
 
-    return html`
-        <devtools-report-key>${i18nString(UIStrings.detailsStatus)}</devtools-report-key>
-        <devtools-report-value>
-          ${detailedStatus}
-        </devtools-report-value>
-    `;
-  }
+  const detailedStatus = isFallbackToPrefetch ? i18nString(UIStrings.detailedStatusFallbackToPrefetch) :
+                                                PreloadingUIUtils.detailedStatus(attempt);
 
-  #maybePrefetchFailureReason(): Lit.LitTemplate {
-    assertNotNullOrUndefined(this.#data);
-    const attempt = this.#data.pipeline.getOriginallyTriggered();
+  return html`
+      <devtools-report-key>${i18nString(UIStrings.detailsStatus)}</devtools-report-key>
+      <devtools-report-value>
+        ${detailedStatus}
+      </devtools-report-value>
+  `;
+}
 
-    if (attempt.action !== Protocol.Preload.SpeculationAction.Prefetch) {
-      return Lit.nothing;
-    }
+function maybePrefetchFailureReason(data: PreloadingDetailsReportViewDataInternal): Lit.LitTemplate {
+  const attempt = data.pipeline.getOriginallyTriggered();
 
-    const failureDescription = prefetchFailureReason(attempt);
-    if (failureDescription === null) {
-      return Lit.nothing;
-    }
+  if (attempt.action !== Protocol.Preload.SpeculationAction.Prefetch) {
+    return Lit.nothing;
+  }
 
-    return html`
-        <devtools-report-key>${i18nString(UIStrings.detailsFailureReason)}</devtools-report-key>
-        <devtools-report-value>
-          ${failureDescription}
-        </devtools-report-value>
-    `;
+  const failureDescription = prefetchFailureReason(attempt);
+  if (failureDescription === null) {
+    return Lit.nothing;
   }
 
-  #targetHint(): Lit.LitTemplate {
-    assertNotNullOrUndefined(this.#data);
-    const attempt = this.#data.pipeline.getOriginallyTriggered();
-    const hasTargetHint = this.#isPrerenderLike(attempt.action) && attempt.key.targetHint !== undefined;
-    if (!hasTargetHint) {
-      return Lit.nothing;
-    }
+  return html`
+      <devtools-report-key>${i18nString(UIStrings.detailsFailureReason)}</devtools-report-key>
+      <devtools-report-value>
+        ${failureDescription}
+      </devtools-report-value>
+  `;
+}
 
-    return html`
-        <devtools-report-key>${i18nString(UIStrings.detailsTargetHint)}</devtools-report-key>
-        <devtools-report-value>
-          ${PreloadingUIUtils.detailedTargetHint(attempt.key)}
-        </devtools-report-value>
-    `;
+function targetHint(data: PreloadingDetailsReportViewDataInternal): Lit.LitTemplate {
+  const attempt = data.pipeline.getOriginallyTriggered();
+  const hasTargetHint = isPrerenderLike(attempt.action) && attempt.key.targetHint !== undefined;
+  if (!hasTargetHint) {
+    return Lit.nothing;
   }
 
-  #maybePrerenderFailureReason(): Lit.LitTemplate {
-    assertNotNullOrUndefined(this.#data);
-    const attempt = this.#data.pipeline.getOriginallyTriggered();
+  return html`
+      <devtools-report-key>${i18nString(UIStrings.detailsTargetHint)}</devtools-report-key>
+      <devtools-report-value>
+        ${PreloadingUIUtils.detailedTargetHint(attempt.key)}
+      </devtools-report-value>
+  `;
+}
 
-    if (!this.#isPrerenderLike(attempt.action)) {
-      return Lit.nothing;
-    }
+function maybePrerenderFailureReason(data: PreloadingDetailsReportViewDataInternal): Lit.LitTemplate {
+  const attempt = data.pipeline.getOriginallyTriggered();
 
-    const failureReason = prerenderFailureReason(
-        attempt as SDK.PreloadingModel.PrerenderAttempt | SDK.PreloadingModel.PrerenderUntilScriptAttempt);
-    if (failureReason === null) {
-      return Lit.nothing;
-    }
+  if (!isPrerenderLike(attempt.action)) {
+    return Lit.nothing;
+  }
 
-    return html`
-        <devtools-report-key>${i18nString(UIStrings.detailsFailureReason)}</devtools-report-key>
-        <devtools-report-value>
-          ${failureReason}
-        </devtools-report-value>
-    `;
+  const failureReason = prerenderFailureReason(
+      attempt as SDK.PreloadingModel.PrerenderAttempt | SDK.PreloadingModel.PrerenderUntilScriptAttempt);
+  if (failureReason === null) {
+    return Lit.nothing;
   }
 
-  #renderRuleSet(ruleSet: Protocol.Preload.RuleSet, pageURL: Platform.DevToolsPath.UrlString): Lit.LitTemplate {
-    const revealRuleSetView = (): void => {
-      void Common.Revealer.reveal(new PreloadingHelper.PreloadingForward.RuleSetView(ruleSet.id));
-    };
-    const location = ruleSetLocationShort(ruleSet, pageURL);
+  return html`
+      <devtools-report-key>${i18nString(UIStrings.detailsFailureReason)}</devtools-report-key>
+      <devtools-report-value>
+        ${failureReason}
+      </devtools-report-value>
+  `;
+}
 
+const DEFAULT_VIEW: View = ({data, onRevealRuleSet}, _, target) => {
+  if (data === null) {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return html`
-      <devtools-report-key>${i18nString(UIStrings.detailsRuleSet)}</devtools-report-key>
-      <devtools-report-value>
-        <div class="text-ellipsis" title="">
-          <button class="link" role="link"
-            @click=${revealRuleSetView}
-            title=${i18nString(UIStrings.buttonClickToRevealRuleSet)}
-            style=${Lit.Directives.styleMap({
-              color: 'var(--sys-color-primary)',
-              'text-decoration': 'underline',
-            })}
-            jslog=${VisualLogging.action('reveal-rule-set').track({click: true})}
-          >
-            ${location}
-          </button>
-        </div>
-      </devtools-report-value>
-    `;
+    Lit.render(html`
+      <style>${preloadingDetailsReportViewStyles}</style>
+      <style>${UI.inspectorCommonStyles}</style>
+      <div class="empty-state">
+        <span class="empty-state-header">${i18nString(UIStrings.noElementSelected)}</span>
+        <span class="empty-state-description">${i18nString(UIStrings.selectAnElementForMoreDetails)}</span>
+      </div>
+    `, target, {host: target});
     // clang-format on
+    return;
   }
-}
 
-customElements.define('devtools-resources-preloading-details-report-view', PreloadingDetailsReportView);
+  const pipeline = data.pipeline;
+  const pageURL = 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
+  Lit.render(html`
+    <style>${preloadingDetailsReportViewStyles}</style>
+    <style>${UI.inspectorCommonStyles}</style>
+    <devtools-report
+      .data=${{reportTitle: 'Speculative Loading Attempt'}}
+      jslog=${VisualLogging.section('preloading-details')}>
+      <devtools-report-section-header>${i18nString(UIStrings.detailsDetailedInformation)}</devtools-report-section-header>
+
+      ${url(data)}
+      ${action(data, isFallbackToPrefetch)}
+      ${status(data, isFallbackToPrefetch)}
+      ${targetHint(data)}
+      ${maybePrefetchFailureReason(data)}
+      ${maybePrerenderFailureReason(data)}
+
+      ${data.ruleSets.map(ruleSet => {
+        const location = ruleSetLocationShort(ruleSet, pageURL);
+        return html`
+          <devtools-report-key>${i18nString(UIStrings.detailsRuleSet)}</devtools-report-key>
+          <devtools-report-value>
+            <div class="text-ellipsis" title="">
+              <button class="link" role="link"
+                @click=${() => onRevealRuleSet(ruleSet)}
+                title=${i18nString(UIStrings.buttonClickToRevealRuleSet)}
+                style=${Lit.Directives.styleMap({
+                  color: 'var(--sys-color-primary)',
+                  'text-decoration': 'underline',
+                })}
+                jslog=${VisualLogging.action('reveal-rule-set').track({click: true})}
+              >
+                ${location}
+              </button>
+            </div>
+          </devtools-report-value>
+        `;
+      })}
+    </devtools-report>
+  `, target, {host: target});
+  // clang-format on
+};
+export class PreloadingDetailsReportView extends UI.Widget.VBox {
+  #view: View;
+  #data: PreloadingDetailsReportViewData = null;
+
+  constructor(view: View = DEFAULT_VIEW) {
+    super();
+    this.#view = view;
+  }
+
+  set data(data: PreloadingDetailsReportViewData) {
+    this.#data = data;
+    this.requestUpdate();
+  }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-resources-preloading-details-report-view': PreloadingDetailsReportView;
+  override performUpdate(): void {
+    this.#view(
+        {
+          data: this.#data,
+          onRevealRuleSet: (ruleSet: Protocol.Preload.RuleSet) => {
+            void Common.Revealer.reveal(new PreloadingHelper.PreloadingForward.RuleSetView(ruleSet.id));
+          },
+        },
+        undefined,
+        this.contentElement,
+    );
   }
 }