chrome-devtools-frontend 1.0.1571007 → 1.0.1572937

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

@@ -5,7 +5,6 @@
 
 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';
@@ -15,6 +14,8 @@ 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';
@@ -155,278 +156,284 @@ interface PreloadingDetailsReportViewDataInternal {
   requestResolver?: Logs.RequestResolver.RequestResolver;
 }
 
-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;
+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();
+  }
 
-function url(data: PreloadingDetailsReportViewDataInternal): Lit.LitTemplate {
-  const attempt = data.pipeline.getOriginallyTriggered();
+  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 prefetchStatus = data.pipeline.getPrefetch()?.status;
+      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
+    }
 
-  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: data.requestResolver || new Logs.RequestResolver.RequestResolver(),
-              displayURL: true,
-              urlToDisplay: url,
-            }
-          }
-        >
-        </devtools-request-link-icon>
+    return html`
+        <devtools-report-key>${i18n.i18n.lockedString('URL')}</devtools-report-key>
+        <devtools-report-value>
+          ${value}
+        </devtools-report-value>
     `;
-  } else {
-    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
-}
-
-function isPrerenderLike(speculationAction: Protocol.Preload.SpeculationAction): boolean {
-  return [
-    Protocol.Preload.SpeculationAction.Prerender, Protocol.Preload.SpeculationAction.PrerenderUntilScript
-  ].includes(speculationAction);
-}
-
-function action(data: PreloadingDetailsReportViewDataInternal, isFallbackToPrefetch: boolean): Lit.LitTemplate {
-  const attempt = data.pipeline.getOriginallyTriggered();
-
-  const action = PreloadingString.capitalizedAction(attempt.action);
-
-  let maybeFallback: Lit.LitTemplate = Lit.nothing;
-  if (isFallbackToPrefetch) {
-    maybeFallback = html`${i18nString(UIStrings.automaticallyFellBackToPrefetch)}`;
+  #isPrerenderLike(speculationAction: Protocol.Preload.SpeculationAction): boolean {
+    return [
+      Protocol.Preload.SpeculationAction.Prerender, Protocol.Preload.SpeculationAction.PrerenderUntilScript
+    ].includes(speculationAction);
   }
 
-  let maybeInspectButton: Lit.LitTemplate = Lit.nothing;
-  (() => {
-    if (!isPrerenderLike(attempt.action)) {
-      return;
-    }
+  #action(isFallbackToPrefetch: boolean): Lit.LitTemplate {
+    assertNotNullOrUndefined(this.#data);
+    const attempt = this.#data.pipeline.getOriginallyTriggered();
+
+    const action = PreloadingString.capitalizedAction(attempt.action);
 
-    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-    if (target === null) {
-      return;
+    let maybeFallback: Lit.LitTemplate = Lit.nothing;
+    if (isFallbackToPrefetch) {
+      maybeFallback = html`${i18nString(UIStrings.automaticallyFellBackToPrefetch)}`;
     }
 
-    const prerenderTarget = SDK.TargetManager.TargetManager.instance().targets().find(
-        child => child.targetInfo()?.subtype === 'prerender' && child.inspectedURL() === attempt.key.url);
+    let maybeInspectButton: Lit.LitTemplate = Lit.nothing;
+    (() => {
+      if (!this.#isPrerenderLike(attempt.action)) {
+        return;
+      }
 
-    const disabled = (prerenderTarget === undefined);
-    const inspect = (): void => {
-      if (prerenderTarget === undefined) {
+      const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+      if (target === null) {
         return;
       }
-      UI.Context.Context.instance().setFlavor(SDK.Target.Target, prerenderTarget);
-    };
+
+      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
+    })();
+
     // 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>
+    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
-  })();
+  }
 
-  // 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
-}
+  #status(isFallbackToPrefetch: boolean): Lit.LitTemplate {
+    assertNotNullOrUndefined(this.#data);
+    const attempt = this.#data.pipeline.getOriginallyTriggered();
 
-function status(data: PreloadingDetailsReportViewDataInternal, isFallbackToPrefetch: boolean): Lit.LitTemplate {
-  const attempt = data.pipeline.getOriginallyTriggered();
+    const detailedStatus = isFallbackToPrefetch ? i18nString(UIStrings.detailedStatusFallbackToPrefetch) :
+                                                  PreloadingUIUtils.detailedStatus(attempt);
 
-  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>
+    `;
+  }
 
-  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.pipeline.getOriginallyTriggered();
 
-function maybePrefetchFailureReason(data: PreloadingDetailsReportViewDataInternal): Lit.LitTemplate {
-  const attempt = data.pipeline.getOriginallyTriggered();
+    if (attempt.action !== Protocol.Preload.SpeculationAction.Prefetch) {
+      return Lit.nothing;
+    }
 
-  if (attempt.action !== Protocol.Preload.SpeculationAction.Prefetch) {
-    return Lit.nothing;
-  }
+    const failureDescription = prefetchFailureReason(attempt);
+    if (failureDescription === null) {
+      return Lit.nothing;
+    }
 
-  const failureDescription = prefetchFailureReason(attempt);
-  if (failureDescription === null) {
-    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.detailsFailureReason)}</devtools-report-key>
-      <devtools-report-value>
-        ${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;
+    if (!hasTargetHint) {
+      return Lit.nothing;
+    }
 
-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;
+    return html`
+        <devtools-report-key>${i18nString(UIStrings.detailsTargetHint)}</devtools-report-key>
+        <devtools-report-value>
+          ${PreloadingUIUtils.detailedTargetHint(attempt.key)}
+        </devtools-report-value>
+    `;
   }
 
-  return html`
-      <devtools-report-key>${i18nString(UIStrings.detailsTargetHint)}</devtools-report-key>
-      <devtools-report-value>
-        ${PreloadingUIUtils.detailedTargetHint(attempt.key)}
-      </devtools-report-value>
-  `;
-}
+  #maybePrerenderFailureReason(): Lit.LitTemplate {
+    assertNotNullOrUndefined(this.#data);
+    const attempt = this.#data.pipeline.getOriginallyTriggered();
 
-function maybePrerenderFailureReason(data: PreloadingDetailsReportViewDataInternal): Lit.LitTemplate {
-  const attempt = data.pipeline.getOriginallyTriggered();
+    if (!this.#isPrerenderLike(attempt.action)) {
+      return Lit.nothing;
+    }
 
-  if (!isPrerenderLike(attempt.action)) {
-    return Lit.nothing;
-  }
+    const failureReason = prerenderFailureReason(
+        attempt as SDK.PreloadingModel.PrerenderAttempt | SDK.PreloadingModel.PrerenderUntilScriptAttempt);
+    if (failureReason === null) {
+      return Lit.nothing;
+    }
 
-  const failureReason = prerenderFailureReason(
-      attempt as SDK.PreloadingModel.PrerenderAttempt | SDK.PreloadingModel.PrerenderUntilScriptAttempt);
-  if (failureReason === null) {
-    return Lit.nothing;
+    return html`
+        <devtools-report-key>${i18nString(UIStrings.detailsFailureReason)}</devtools-report-key>
+        <devtools-report-value>
+          ${failureReason}
+        </devtools-report-value>
+    `;
   }
 
-  return html`
-      <devtools-report-key>${i18nString(UIStrings.detailsFailureReason)}</devtools-report-key>
-      <devtools-report-value>
-        ${failureReason}
-      </devtools-report-value>
-  `;
-}
+  #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);
 
-const DEFAULT_VIEW: View = ({data, onRevealRuleSet}, _, target) => {
-  if (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>
-    `, target, {host: target});
+    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>
+    `;
     // clang-format on
-    return;
-  }
-
-  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();
-  }
+customElements.define('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,
-    );
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-resources-preloading-details-report-view': PreloadingDetailsReportView;
   }
 }

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

@@ -62,7 +62,7 @@ export interface ViewInput {
 type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
 
 export const PRELOADING_GRID_DEFAULT_VIEW: View = (input, _output, target): void => {
-  if (!input.rows || input.pageURL === undefined) {
+  if (!input.rows || !input.pageURL) {
     render(nothing, target);
     return;
   }
@@ -116,7 +116,8 @@ export const PRELOADING_GRID_DEFAULT_VIEW: View = (input, _output, target): void
       </devtools-data-grid>
     </div>
   `, target);
-};  // clang-format on
+  // clang-format on
+};
 
 /** Grid component to show prerendering attempts. **/
 export class PreloadingGrid extends UI.Widget.VBox {

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

@@ -259,13 +259,11 @@ function renderMismatchedSections(data: MismatchedData): LitTemplate {
       ${i18nString(UIStrings.currentURL)}
     </devtools-report-section-header>
     <devtools-report-section>
-      <x-link
+      <devtools-link
         class="link devtools-link"
         href=${data.pageURL}
-        jslog=${VisualLogging.link()
-                .track({ click: true, keydown: 'Enter|Space' })
-                .context('current-url')}
-      >${data.pageURL}</x-link>
+        .jslogContext=${'current-url'}
+      >${data.pageURL}</devtools-link>
     </devtools-report-section>
 
     <devtools-report-section-header>
@@ -411,13 +409,11 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
       <devtools-report-divider></devtools-report-divider>
 
       <devtools-report-section>
-        <x-link
+        <devtools-link
           class="link devtools-link"
           href=${'https://developer.chrome.com/blog/prerender-pages/'}
-          jslog=${VisualLogging.link()
-                  .track({ click: true, keydown: 'Enter|Space' })
-                  .context('learn-more')}
-        >${i18nString(UIStrings.learnMore)}</x-link>
+          .jslogContext=${'learn-more'}
+        >${i18nString(UIStrings.learnMore)}</devtools-link>
       </devtools-report-section>
     </devtools-report>`, target);
   // clang-format on

package/front_end/panels/application/resourcesSidebar.css

@@ -56,3 +56,11 @@ devtools-icon.navigator-font-tree-item {
 .window-closed .tree-element-title {
   text-decoration: line-through;
 }
+
+.device-bound-session-terminated {
+  text-decoration: line-through;
+}
+
+.no-device-bound-session {
+  font-style: italic;
+}

package/front_end/panels/autofill/AutofillView.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../ui/kit/kit.js';
 import '../../ui/components/adorners/adorners.js';
 import '../../ui/legacy/components/data_grid/data_grid.js';
 
@@ -237,14 +238,14 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
                 jslog=${VisualLogging.toggle(input.autoOpenViewSetting.name).track({ change: true })}>
               ${i18nString(UIStrings.autoShow)}
             </devtools-checkbox>
-            <x-link href=${AUTOFILL_FEEDBACK_URL} class="feedback link" jslog=${VisualLogging.link('feedback').track({click: true})}>${i18nString(UIStrings.sendFeedback)}</x-link>
+            <devtools-link href=${AUTOFILL_FEEDBACK_URL} class="feedback link" .jslogContext=${'feedback'}>${i18nString(UIStrings.sendFeedback)}</devtools-link>
           </div>
           <div class="placeholder-container" jslog=${VisualLogging.pane('autofill-empty')}>
             <div class="empty-state">
               <span class="empty-state-header">${i18nString(UIStrings.noAutofill)}</span>
               <div class="empty-state-description">
                 <span>${i18nString(UIStrings.toStartDebugging)}</span>
-                <x-link href=${AUTOFILL_INFO_URL} class="link" jslog=${VisualLogging.link('learn-more').track({click: true})}>${i18nString(UIStrings.learnMore)}</x-link>
+                <devtools-link href=${AUTOFILL_INFO_URL} class="link" .jslogContext=${'learn-more'}>${i18nString(UIStrings.learnMore)}</devtools-link>
               </div>
             </div>
           </div>
@@ -279,7 +280,7 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
                   ${i18nString(UIStrings.autoShow)}
                 </devtools-checkbox>
               </div>
-              <x-link href=${AUTOFILL_FEEDBACK_URL} class="feedback link" jslog=${VisualLogging.link('feedback').track({click: true})}>${i18nString(UIStrings.sendFeedback)}</x-link>
+              <devtools-link href=${AUTOFILL_FEEDBACK_URL} class="feedback link" .jslogContext=${'feedback'}>${i18nString(UIStrings.sendFeedback)}</devtools-link>
             </div>
             ${renderAddress()}
           </div>