chrome-devtools-frontend 1.0.1667564 → 1.0.1669021

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

@@ -1,7 +1,6 @@
 // Copyright 2022 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../../ui/components/report_view/report_view.js';
 import '../../../../ui/components/request_link_icon/request_link_icon.js';
@@ -14,8 +13,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';
@@ -168,82 +165,56 @@ 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;
+export interface ViewInput {
+  data: PreloadingDetailsReportViewData;
+}
 
-  set data(data: PreloadingDetailsReportViewData) {
-    this.#data = data;
-    void this.#render();
+const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
+  if (input.data === null) {
+    // 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>
+    `, target);
+    // clang-format on
+    return;
   }
 
-  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;
-      }
-
-      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);
+  const pipeline = input.data.pipeline;
+  const pageURL = input.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.#formSubmission()}
-          ${this.#maybePrefetchFailureReason()}
-          ${this.#maybePrerenderFailureReason()}
-
-          ${this.#data.ruleSets.map(ruleSet => this.#renderRuleSet(ruleSet, pageURL))}
-        </devtools-report>
-      `, this.#shadow, {host: this});
-      // clang-format on
-    });
-  }
+  const isPrerenderLike = (speculationAction: Protocol.Preload.SpeculationAction): boolean => {
+    return [
+      Protocol.Preload.SpeculationAction.Prerender,
+      Protocol.Preload.SpeculationAction.PrerenderUntilScript,
+    ].includes(speculationAction);
+  };
 
-  #url(): Lit.LitTemplate {
-    assertNotNullOrUndefined(this.#data);
-    const attempt = this.#data.pipeline.getOriginallyTriggered();
+  const url = (): Lit.LitTemplate => {
+    assertNotNullOrUndefined(input.data);
+    const attempt = input.data.pipeline.getOriginallyTriggered();
 
-    const prefetchStatus = this.#data.pipeline.getPrefetch()?.status;
+    const prefetchStatus = input.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};
+      // clang-format off
       value = html`
           <devtools-request-link-icon
             .data=${
               {
                 affectedRequest,
-                requestResolver: this.#data.requestResolver || new Logs.RequestResolver.RequestResolver(Logs.NetworkLog.NetworkLog.instance()),
+                requestResolver: input.data.requestResolver || new Logs.RequestResolver.RequestResolver(Logs.NetworkLog.NetworkLog.instance()),
                 displayURL: true,
                 urlToDisplay: url,
               }
@@ -251,36 +222,24 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
           >
           </devtools-request-link-icon>
       `;
+      // clang-format on
     } 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
     }
 
-    // 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
-  }
-
-  #isPrerenderLike(speculationAction: Protocol.Preload.SpeculationAction): boolean {
-    return [
-      Protocol.Preload.SpeculationAction.Prerender,
-      Protocol.Preload.SpeculationAction.PrerenderUntilScript,
-    ].includes(speculationAction);
-  }
+  };
 
-  #action(isFallbackToPrefetch: boolean): Lit.LitTemplate {
-    assertNotNullOrUndefined(this.#data);
-    const attempt = this.#data.pipeline.getOriginallyTriggered();
+  const action = (isFallbackToPrefetch: boolean): Lit.LitTemplate => {
+    assertNotNullOrUndefined(input.data);
+    const attempt = input.data.pipeline.getOriginallyTriggered();
 
     const action = PreloadingString.capitalizedAction(attempt.action);
 
@@ -291,7 +250,7 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
 
     let maybeInspectButton: Lit.LitTemplate = Lit.nothing;
     (() => {
-      if (!this.#isPrerenderLike(attempt.action)) {
+      if (!isPrerenderLike(attempt.action)) {
         return;
       }
 
@@ -310,8 +269,6 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
         }
         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}
@@ -324,11 +281,8 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
             ${i18nString(UIStrings.buttonInspect)}
           </devtools-button>
       `;
-      // clang-format on
     })();
 
-    // 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>
@@ -337,12 +291,11 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
           </div>
         </devtools-report-value>
     `;
-    // clang-format on
-  }
+  };
 
-  #status(isFallbackToPrefetch: boolean): Lit.LitTemplate {
-    assertNotNullOrUndefined(this.#data);
-    const attempt = this.#data.pipeline.getOriginallyTriggered();
+  const status = (isFallbackToPrefetch: boolean): Lit.LitTemplate => {
+    assertNotNullOrUndefined(input.data);
+    const attempt = input.data.pipeline.getOriginallyTriggered();
 
     const detailedStatus = isFallbackToPrefetch ? i18nString(UIStrings.detailedStatusFallbackToPrefetch) :
                                                   PreloadingUIUtils.detailedStatus(attempt);
@@ -353,11 +306,11 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
           ${detailedStatus}
         </devtools-report-value>
     `;
-  }
+  };
 
-  #maybePrefetchFailureReason(): Lit.LitTemplate {
-    assertNotNullOrUndefined(this.#data);
-    const attempt = this.#data.pipeline.getOriginallyTriggered();
+  const maybePrefetchFailureReason = (): Lit.LitTemplate => {
+    assertNotNullOrUndefined(input.data);
+    const attempt = input.data.pipeline.getOriginallyTriggered();
 
     if (attempt.action !== Protocol.Preload.SpeculationAction.Prefetch) {
       return Lit.nothing;
@@ -377,12 +330,12 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
           ${failureDescription}
         </devtools-report-value>
     `;
-  }
+  };
 
-  #targetHint(): Lit.LitTemplate {
-    assertNotNullOrUndefined(this.#data);
-    const attempt = this.#data.pipeline.getOriginallyTriggered();
-    const hasTargetHint = this.#isPrerenderLike(attempt.action) && attempt.key.targetHint !== undefined;
+  const targetHint = (): Lit.LitTemplate => {
+    assertNotNullOrUndefined(input.data);
+    const attempt = input.data.pipeline.getOriginallyTriggered();
+    const hasTargetHint = isPrerenderLike(attempt.action) && attempt.key.targetHint !== undefined;
     if (!hasTargetHint) {
       return Lit.nothing;
     }
@@ -393,13 +346,13 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
           ${PreloadingUIUtils.detailedTargetHint(attempt.key)}
         </devtools-report-value>
     `;
-  }
+  };
 
-  #formSubmission(): Lit.LitTemplate {
-    assertNotNullOrUndefined(this.#data);
-    const attempt = this.#data.pipeline.getOriginallyTriggered();
+  const formSubmission = (): Lit.LitTemplate => {
+    assertNotNullOrUndefined(input.data);
+    const attempt = input.data.pipeline.getOriginallyTriggered();
     const hasFormSubmission = attempt.key.formSubmission !== undefined;
-    if (!hasFormSubmission || !this.#isPrerenderLike(attempt.action)) {
+    if (!hasFormSubmission || !isPrerenderLike(attempt.action)) {
       return Lit.nothing;
     }
 
@@ -409,13 +362,13 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
           ${attempt.key.formSubmission ? i18nString(UIStrings.yes) : i18nString(UIStrings.no)}
         </devtools-report-value>
     `;
-  }
+  };
 
-  #maybePrerenderFailureReason(): Lit.LitTemplate {
-    assertNotNullOrUndefined(this.#data);
-    const attempt = this.#data.pipeline.getOriginallyTriggered();
+  const maybePrerenderFailureReason = (): Lit.LitTemplate => {
+    assertNotNullOrUndefined(input.data);
+    const attempt = input.data.pipeline.getOriginallyTriggered();
 
-    if (!this.#isPrerenderLike(attempt.action)) {
+    if (!isPrerenderLike(attempt.action)) {
       return Lit.nothing;
     }
 
@@ -434,16 +387,15 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
           ${failureReason}
         </devtools-report-value>
     `;
-  }
+  };
 
-  #renderRuleSet(ruleSet: Protocol.Preload.RuleSet, pageURL: Platform.DevToolsPath.UrlString): Lit.LitTemplate {
+  const 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);
 
-    // 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>
@@ -462,14 +414,54 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
         </div>
       </devtools-report-value>
     `;
-    // clang-format on
+  };
+
+  // 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()}
+      ${action(isFallbackToPrefetch)}
+      ${status(isFallbackToPrefetch)}
+      ${targetHint()}
+      ${formSubmission()}
+      ${maybePrefetchFailureReason()}
+      ${maybePrerenderFailureReason()}
+
+      ${input.data.ruleSets.map(ruleSet => renderRuleSet(ruleSet, pageURL))}
+    </devtools-report>
+  `, target);
+  // clang-format on
+};
+
+export class PreloadingDetailsReportView extends UI.Widget.VBox {
+  #data: PreloadingDetailsReportViewData = null;
+  #view: typeof DEFAULT_VIEW;
+
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
   }
-}
 
-customElements.define('devtools-resources-preloading-details-report-view', PreloadingDetailsReportView);
+  set data(data: PreloadingDetailsReportViewData) {
+    this.#data = data;
+    this.requestUpdate();
+  }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-resources-preloading-details-report-view': PreloadingDetailsReportView;
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    const viewInput = {
+      data: this.#data,
+    };
+    this.#view(viewInput, undefined, this.contentElement);
   }
 }

package/front_end/panels/application/preloading/components/preloadingDetailsReportView.css

@@ -3,32 +3,30 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
-:host {
-  display: flex;
-  height: 100%;
-}
 
-devtools-report {
-  flex-grow: 1;
-}
+@scope to (devtools-widget > *) {
+  devtools-report {
+    flex-grow: 1;
 
-button.link {
-  color: var(--sys-color-primary);
-  text-decoration: underline;
-  padding: 0;
-  border: none;
-  background: none;
-  font-family: inherit;
-  font-size: inherit;
-  height: 16px;
-}
+    button.link {
+      color: var(--sys-color-primary);
+      text-decoration: underline;
+      padding: 0;
+      border: none;
+      background: none;
+      font-family: inherit;
+      font-size: inherit;
+      height: 16px;
+    }
 
-button.link devtools-icon {
-  vertical-align: sub;
-}
+    button.link devtools-icon {
+      vertical-align: sub;
+    }
+  }
 
-.link {
-  color: var(--sys-color-primary);
-  text-decoration: underline;
-  cursor: pointer;
+  .link {
+    color: var(--sys-color-primary);
+    text-decoration: underline;
+    cursor: pointer;
+  }
 }

package/front_end/panels/application/serviceWorkerUpdateCycleView.css

@@ -3,107 +3,110 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
-.resource-service-worker-update-view {
-  display: block;
-  margin: 6px;
-  color: var(--sys-color-on-surface-subtle);
-  overflow: auto;
-}
-
-.service-worker-update-timing-table {
-  border: 1px solid var(--sys-color-divider);
-  border-spacing: 0;
-  padding-left: 10px;
-  padding-right: 10px;
-  line-height: initial;
-  table-layout: auto;
-  overflow: hidden;
-}
-
-.service-worker-update-timing-row {
-  position: relative;
-  height: 20px;
-  overflow: hidden;
-  min-width: 80px;
-}
-
-.service-worker-update-timing-bar {
-  position: absolute;
-  min-width: 1px;
-  top: 0;
-  bottom: 0;
-}
-
-.service-worker-update-timing-bar-clickable::before {
-  user-select: none;
-  mask-image: var(--image-file-triangle-right);
-  float: left;
-  width: 14px;
-  height: 14px;
-  margin-right: 2px;
-  content: "";
-  position: relative;
-  background-color: var(--icon-default);
-  transition: transform 200ms;
-}
-
-.service-worker-update-timing-bar-clickable {
-  position: relative;
-  left: -12px;
-}
-
-.service-worker-update-timing-bar-clickable:focus-visible {
-  background-color: var(--sys-color-state-focus-highlight);
-}
-
-.service-worker-update-timing-bar-clickable[aria-checked="true"]::before {
-  transform: rotate(90deg);
-}
-
-.service-worker-update-timing-bar-details-collapsed {
-  display: none;
-}
-
-.service-worker-update-timing-bar-details-expanded {
-  display: table-row;
-}
-
-.service-worker-update-timing-bar-details:focus-visible {
-  background-color: var(--sys-color-state-focus-highlight);
-}
-
-.service-worker-update-timing-bar.activate {
-  top: 5px;
-  height: 10px;
-  background-color: var(--sys-color-yellow-bright);
-}
-
-.service-worker-update-timing-bar.wait {
-  top: 5px;
-  height: 10px;
-  background-color: var(--sys-color-purple-bright);
-}
-
-.service-worker-update-timing-bar.install {
-  top: 5px;
-  height: 10px;
-  background-color: var(--sys-color-cyan-bright);
-}
-
-.service-worker-update-timing-table > tr > td {
-  padding: 4px 0;
-  padding-right: 10px;
-}
-
-table.service-worker-update-timing-table > tr.service-worker-update-timing-table-header > td {
-  border-top: 5px solid transparent;
-  color: var(--sys-color-token-subtle);
-}
-
-table.service-worker-update-timing-table > tr.service-worker-update-timing-bar-details > td:first-child {
-  padding-left: 12px;
-}
 
-table.service-worker-update-timing-table > tr.service-worker-update-timeline > td:first-child {
-  padding-left: 12px;
+@scope to (devtools-widget > *) {
+  .resource-service-worker-update-view {
+    display: block;
+    margin: 6px;
+    color: var(--sys-color-on-surface-subtle);
+    overflow: auto;
+  }
+
+  .service-worker-update-timing-table {
+    border: 1px solid var(--sys-color-divider);
+    border-spacing: 0;
+    padding-left: 10px;
+    padding-right: 10px;
+    line-height: initial;
+    table-layout: auto;
+    overflow: hidden;
+  }
+
+  .service-worker-update-timing-row {
+    position: relative;
+    height: 20px;
+    overflow: hidden;
+    min-width: 80px;
+  }
+
+  .service-worker-update-timing-bar {
+    position: absolute;
+    min-width: 1px;
+    top: 0;
+    bottom: 0;
+  }
+
+  .service-worker-update-timing-bar-clickable::before {
+    user-select: none;
+    mask-image: var(--image-file-triangle-right);
+    float: left;
+    width: 14px;
+    height: 14px;
+    margin-right: 2px;
+    content: "";
+    position: relative;
+    background-color: var(--icon-default);
+    transition: transform 200ms;
+  }
+
+  .service-worker-update-timing-bar-clickable {
+    position: relative;
+    left: -12px;
+  }
+
+  .service-worker-update-timing-bar-clickable:focus-visible {
+    background-color: var(--sys-color-state-focus-highlight);
+  }
+
+  .service-worker-update-timing-bar-clickable[aria-checked="true"]::before {
+    transform: rotate(90deg);
+  }
+
+  .service-worker-update-timing-bar-details-collapsed {
+    display: none;
+  }
+
+  .service-worker-update-timing-bar-details-expanded {
+    display: table-row;
+  }
+
+  .service-worker-update-timing-bar-details:focus-visible {
+    background-color: var(--sys-color-state-focus-highlight);
+  }
+
+  .service-worker-update-timing-bar.activate {
+    top: 5px;
+    height: 10px;
+    background-color: var(--sys-color-yellow-bright);
+  }
+
+  .service-worker-update-timing-bar.wait {
+    top: 5px;
+    height: 10px;
+    background-color: var(--sys-color-purple-bright);
+  }
+
+  .service-worker-update-timing-bar.install {
+    top: 5px;
+    height: 10px;
+    background-color: var(--sys-color-cyan-bright);
+  }
+
+  .service-worker-update-timing-table > tbody > tr > td {
+    padding: 4px 0;
+    padding-right: 10px;
+  }
+
+  table.service-worker-update-timing-table > tbody > tr.service-worker-update-timing-table-header > td {
+    border-top: 5px solid transparent;
+    color: var(--sys-color-token-subtle);
+  }
+
+  table.service-worker-update-timing-table > tbody > tr.service-worker-update-timing-bar-details > td:first-child {
+    padding-left: 12px;
+  }
+
+  table.service-worker-update-timing-table > tbody > tr.service-worker-update-timeline > td:first-child {
+    padding-left: 12px;
+  }
 }