chrome-devtools-frontend 1.0.1654411 → 1.0.1656897

package/front_end/panels/application/FrameDetailsView.ts

@@ -21,6 +21,7 @@ import * as CspEvaluator from '../../third_party/csp_evaluator/csp_evaluator.js'
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import type * as ExpandableList from '../../ui/components/expandable_list/expandable_list.js';
 import type * as ReportView from '../../ui/components/report_view/report_view.js';
+import * as UIHelpers from '../../ui/helpers/helpers.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
@@ -680,7 +681,7 @@ function renderSingleCSP(cspInfo: Protocol.Network.ContentSecurityPolicyStatus,
             .accessibleLabel=${i18nString(UIStrings.learnMore)}
             .variant=${Buttons.Button.Variant.ICON}
             .size=${Buttons.Button.Size.SMALL}
-            @click=${()=> {window.location.href = 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only';}}
+            @click=${()=> {UIHelpers.openInNewTab('https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only');}}
             jslog=${VisualLogging.link('learn-more.csp-report-only').track({click: true})}
             ></devtools-button>`}
       </devtools-report-key>

package/front_end/panels/application/ServiceWorkersView.ts

@@ -13,6 +13,7 @@ import * as Buttons from '../../ui/components/buttons/buttons.js';
 import {Link} from '../../ui/kit/kit.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
 
@@ -220,6 +221,15 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
 
     this.sectionToRegistration = new WeakMap();
 
+    this.createOthersOriginView();
+    this.setupToolbar();
+
+    this.eventListeners = new Map();
+    SDK.TargetManager.TargetManager.instance().observeModels(SDK.ServiceWorkerManager.ServiceWorkerManager, this);
+    this.updateListVisibility();
+  }
+
+  private createOthersOriginView(): void {
     const othersDiv = this.contentElement.createChild('div', 'service-workers-other-origin');
     othersDiv.setAttribute('jslog', `${VisualLogging.section('other-origin')}`);
     // TODO(crbug.com/1156978): Replace UI.ReportView.ReportView with ReportView.ts web component.
@@ -231,7 +241,9 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
     const seeOthers = Link.create('chrome://serviceworker-internals', i18nString(UIStrings.seeAllRegistrations),
                                   undefined, 'view-all', 0, /* allowPrivileged=*/ true);
     othersSectionRow.appendChild(seeOthers);
+  }
 
+  private setupToolbar(): void {
     this.toolbar.appendToolbarItem(
         MobileThrottling.ThrottlingManager.throttlingManager().createOfflineToolbarCheckbox());
     const updateOnReloadSetting =
@@ -246,10 +258,6 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
     const fallbackToNetwork = new UI.Toolbar.ToolbarSettingCheckbox(
         bypassServiceWorkerSetting, i18nString(UIStrings.bypassTheServiceWorkerAndLoad));
     this.toolbar.appendToolbarItem(fallbackToNetwork);
-
-    this.eventListeners = new Map();
-    SDK.TargetManager.TargetManager.instance().observeModels(SDK.ServiceWorkerManager.ServiceWorkerManager, this);
-    this.updateListVisibility();
   }
 
   modelAdded(serviceWorkerManager: SDK.ServiceWorkerManager.ServiceWorkerManager): void {
@@ -266,14 +274,14 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
     }
 
     this.eventListeners.set(serviceWorkerManager, [
-      this.manager.addEventListener(
-          SDK.ServiceWorkerManager.Events.REGISTRATION_UPDATED, this.registrationUpdated, this),
-      this.manager.addEventListener(
-          SDK.ServiceWorkerManager.Events.REGISTRATION_DELETED, this.registrationDeleted, this),
-      this.securityOriginManager.addEventListener(
-          SDK.SecurityOriginManager.Events.SecurityOriginAdded, this.updateSectionVisibility, this),
-      this.securityOriginManager.addEventListener(
-          SDK.SecurityOriginManager.Events.SecurityOriginRemoved, this.updateSectionVisibility, this),
+      this.manager.addEventListener(SDK.ServiceWorkerManager.Events.REGISTRATION_UPDATED, this.registrationUpdated,
+                                    this),
+      this.manager.addEventListener(SDK.ServiceWorkerManager.Events.REGISTRATION_DELETED, this.registrationDeleted,
+                                    this),
+      this.securityOriginManager.addEventListener(SDK.SecurityOriginManager.Events.SecurityOriginAdded,
+                                                  this.updateSectionVisibility, this),
+      this.securityOriginManager.addEventListener(SDK.SecurityOriginManager.Events.SecurityOriginRemoved,
+                                                  this.updateSectionVisibility, this),
     ]);
   }
 
@@ -324,7 +332,7 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
 
     for (const section of movedSections) {
       const registration = section.registration;
-      this.removeRegistrationFromList(registration);
+      this.removeRegistrationFromList(registration, true);
       this.updateRegistration(registration, true);
     }
 
@@ -392,8 +400,8 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
     return null;
   }
 
-  private updateRegistration(registration: SDK.ServiceWorkerManager.ServiceWorkerRegistration, skipUpdate?: boolean):
-      void {
+  private updateRegistration(registration: SDK.ServiceWorkerManager.ServiceWorkerRegistration,
+                             skipUpdate?: boolean): void {
     let section = this.sections.get(registration);
     if (!section) {
       const title = registration.scopeURL;
@@ -419,13 +427,16 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
     this.removeRegistrationFromList(event.data);
   }
 
-  private removeRegistrationFromList(registration: SDK.ServiceWorkerManager.ServiceWorkerRegistration): void {
+  private removeRegistrationFromList(registration: SDK.ServiceWorkerManager.ServiceWorkerRegistration,
+                                     skipVisibilityUpdate = false): void {
     const section = this.sections.get(registration);
     if (section) {
       section.section.detach();
     }
     this.sections.delete(registration);
-    this.updateSectionVisibility();
+    if (!skipVisibilityUpdate) {
+      this.updateSectionVisibility();
+    }
   }
 
   private isRegistrationVisible(registration: SDK.ServiceWorkerManager.ServiceWorkerRegistration): boolean {
@@ -453,17 +464,16 @@ export class Section {
   private readonly networkRequests: Buttons.Button.Button;
   private readonly updateButton: Buttons.Button.Button;
   private readonly deleteButton: Buttons.Button.Button;
-  private sourceField: Element;
-  private readonly statusField: Element;
-  private readonly clientsField: Element;
+  private sourceField: HTMLElement;
+  private readonly statusField: HTMLElement;
+  private readonly clientsField: HTMLElement;
   private readonly clientInfoCache: Map<string, Protocol.Target.TargetInfo>;
   private readonly throttler: Common.Throttler.Throttler;
-  private updateCycleField?: Element;
-  private routerField?: Element;
+  private updateCycleField?: HTMLElement;
+  private routerField?: HTMLElement;
 
-  constructor(
-      manager: SDK.ServiceWorkerManager.ServiceWorkerManager, section: UI.ReportView.Section,
-      registration: SDK.ServiceWorkerManager.ServiceWorkerRegistration) {
+  constructor(manager: SDK.ServiceWorkerManager.ServiceWorkerManager, section: UI.ReportView.Section,
+              registration: SDK.ServiceWorkerManager.ServiceWorkerRegistration) {
     this.manager = manager;
     this.section = section;
     this.registration = registration;
@@ -502,15 +512,13 @@ export class Section {
     this.sourceField = this.wrapWidget(this.section.appendField(i18nString(UIStrings.source)));
     this.statusField = this.wrapWidget(this.section.appendField(i18nString(UIStrings.status)));
     this.clientsField = this.wrapWidget(this.section.appendField(i18nString(UIStrings.clients)));
-    this.createSyncNotificationField(
-        i18nString(UIStrings.pushString), this.pushNotificationDataSetting.get(), i18nString(UIStrings.pushData),
-        this.push.bind(this), 'push-message');
-    this.createSyncNotificationField(
-        i18nString(UIStrings.syncString), this.syncTagNameSetting.get(), i18nString(UIStrings.syncTag),
-        this.sync.bind(this), 'sync-tag');
-    this.createSyncNotificationField(
-        i18nString(UIStrings.periodicSync), this.periodicSyncTagNameSetting.get(),
-        i18nString(UIStrings.periodicSyncTag), tag => this.periodicSync(tag), 'periodic-sync-tag');
+    this.createSyncNotificationField(i18nString(UIStrings.pushString), this.pushNotificationDataSetting.get(),
+                                     i18nString(UIStrings.pushData), this.push.bind(this), 'push-message');
+    this.createSyncNotificationField(i18nString(UIStrings.syncString), this.syncTagNameSetting.get(),
+                                     i18nString(UIStrings.syncTag), this.sync.bind(this), 'sync-tag');
+    this.createSyncNotificationField(i18nString(UIStrings.periodicSync), this.periodicSyncTagNameSetting.get(),
+                                     i18nString(UIStrings.periodicSyncTag), tag => this.periodicSync(tag),
+                                     'periodic-sync-tag');
     this.createUpdateCycleField();
     this.maybeCreateRouterField();
 
@@ -518,53 +526,66 @@ export class Section {
     this.throttler = new Common.Throttler.Throttler(500);
   }
 
-  private createSyncNotificationField(
-      label: string, initialValue: string, placeholder: string, callback: (arg0: string) => void,
-      jslogContext: string): void {
-    const form =
-        this.wrapWidget(this.section.appendField(label)).createChild('form', 'service-worker-editor-with-button');
-    const editor = UI.UIUtils.createInput('source-code service-worker-notification-editor');
-    editor.setAttribute('jslog', `${VisualLogging.textField().track({change: true}).context(jslogContext)}`);
-    form.appendChild(editor);
-    const button = UI.UIUtils.createTextButton(label, undefined, {jslogContext});
-    button.type = 'submit';
-    form.appendChild(button);
-
-    editor.value = initialValue;
-    editor.placeholder = placeholder;
-    UI.ARIAUtils.setLabel(editor, label);
-
-    form.addEventListener('submit', (e: Event) => {
-      callback(editor.value || '');
-      e.consume(true);
-    });
+  private createSyncNotificationField(label: string, initialValue: string, placeholder: string,
+                                      callback: (arg0: string) => void, jslogContext: string): void {
+    const fieldElement = this.wrapWidget(this.section.appendField(label));
+
+    // clang-format off
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(html`
+      <form class="service-worker-editor-with-button" @submit=${(e: Event) => {
+        const {editor} = e.target as HTMLFormElement;
+        callback(editor.value || '');
+        e.consume(true);
+      }}>
+        <input name="editor" class="source-code service-worker-notification-editor harmony-input" type="text"
+          .value=${initialValue}
+          placeholder=${placeholder}
+          aria-label=${label}
+          .spellcheck=${false}
+          jslog=${VisualLogging.textField().track({change: true}).context(jslogContext)}
+        >
+        <devtools-button .data=${{
+            type: 'submit',
+            variant: Buttons.Button.Variant.OUTLINED,
+            jslogContext} as Buttons.Button.ButtonData}>
+          ${label}
+        </devtools-button>
+      </form>
+    `, fieldElement);
+    // clang-format on
   }
 
   scheduleUpdate(): void {
     if (throttleDisabledForDebugging) {
-      void this.update();
+      void this.performUpdate();
       return;
     }
-    void this.throttler.schedule(this.update.bind(this));
+    void this.throttler.schedule(this.performUpdate.bind(this));
   }
 
-  private addVersion(versionsStack: Element, icon: string, label: string): Element {
-    const installingEntry = versionsStack.createChild('div', 'service-worker-version');
-    installingEntry.createChild('div', icon);
-    const statusString = installingEntry.createChild('span', 'service-worker-version-string');
-    statusString.textContent = label;
-    UI.ARIAUtils.markAsAlert(statusString);
-    return installingEntry;
+  private renderVersion(icon: string, label: string, content: LitTemplate = nothing): LitTemplate {
+    // clang-format off
+    return html`
+      <div class="service-worker-version">
+        <div class=${icon}></div>
+        <span class="service-worker-version-string" role="alert" aria-live="polite">
+          ${label}
+        </span>
+        ${content}
+      </div>`;
+    // clang-format on
   }
 
   private updateClientsField(version: SDK.ServiceWorkerManager.ServiceWorkerVersion): void {
     this.clientsField.removeChildren();
     this.section.setFieldVisible(i18nString(UIStrings.clients), Boolean(version.controlledClients.length));
     for (const client of version.controlledClients) {
-      const clientLabelText = this.clientsField.createChild('div', 'service-worker-client');
+      const clientLabelText = this.clientsField.createChild('div', 'service-worker-client') as HTMLElement;
       const info = this.clientInfoCache.get(client);
       if (info) {
-        this.updateClientInfo(clientLabelText, info);
+        // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+        render(this.renderClientInfo(info), clientLabelText);
       }
       void this.manager.target()
           .targetAgent()
@@ -574,34 +595,34 @@ export class Section {
   }
 
   private updateSourceField(version: SDK.ServiceWorkerManager.ServiceWorkerVersion): void {
-    this.sourceField.removeChildren();
     const fileName = Common.ParsedURL.ParsedURL.extractName(version.scriptURL);
-    const name = this.sourceField.createChild('div', 'report-field-value-filename');
-    const link = Components.Linkifier.Linkifier.linkifyURL(
-        version.scriptURL, ({text: fileName} as Components.Linkifier.LinkifyURLOptions));
-    link.tabIndex = 0;
-    link.setAttribute('jslog', `${VisualLogging.link('source-location').track({click: true})}`);
-    name.appendChild(link);
-    if (this.registration.errors.length) {
-      const errorsLabel = UI.UIUtils.createIconLabel({
-        title: String(this.registration.errors.length),
-        iconName: 'cross-circle-filled',
-        color: 'var(--icon-error)',
-      });
-      errorsLabel.classList.add('devtools-link', 'link');
-      errorsLabel.tabIndex = 0;
-      UI.ARIAUtils.setLabel(
-          errorsLabel, i18nString(UIStrings.sRegistrationErrors, {PH1: this.registration.errors.length}));
-      self.onInvokeElement(errorsLabel, () => Common.Console.Console.instance().show());
-      name.appendChild(errorsLabel);
-    }
-    if (version.scriptResponseTime !== undefined) {
-      this.sourceField.createChild('div', 'report-field-value-subtitle').textContent =
-          i18nString(UIStrings.receivedS, {PH1: new Date(version.scriptResponseTime * 1000).toLocaleString()});
-    }
-  }
-
-  private update(): Promise<void> {
+    // clang-format off
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(html`
+      <div class="report-field-value-filename">
+        ${Components.Linkifier.Linkifier.renderLinkifiedUrl(version.scriptURL, {
+          text: fileName, tabStop: true, jslogContext: 'source-location'})}
+        ${this.registration.errors.length ? html`
+            <button
+                class="devtools-link link"
+                tabindex="0"
+                aria-label=${i18nString(UIStrings.sRegistrationErrors, {PH1: this.registration.errors.length})}
+                @click=${() => Common.Console.Console.instance().show()}>
+              <devtools-icon name="cross-circle-filled" class="error-icon">
+              </devtools-icon>
+              ${this.registration.errors.length}
+            </button>` : nothing}
+      </div>
+      ${version.scriptResponseTime !== undefined ? html`
+        <div class="report-field-value-subtitle">
+          ${i18nString(UIStrings.receivedS, {PH1: new Date(version.scriptResponseTime * 1000).toLocaleString()})}
+        </div>
+      ` : nothing}
+    `, this.sourceField);
+    // clang-format on
+  }
+
+  private performUpdate(): Promise<void> {
     const fingerprint = this.registration.fingerprint();
     if (fingerprint === this.fingerprint) {
       return Promise.resolve();
@@ -620,62 +641,69 @@ export class Section {
     const installing = versions.get(SDK.ServiceWorkerManager.ServiceWorkerVersion.Modes.INSTALLING);
     const redundant = versions.get(SDK.ServiceWorkerManager.ServiceWorkerVersion.Modes.REDUNDANT);
 
-    this.statusField.removeChildren();
-    const versionsStack = this.statusField.createChild('div', 'service-worker-version-stack');
-    versionsStack.createChild('div', 'service-worker-version-stack-bar');
+    // clang-format off
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(html`
+      <div class="service-worker-version-stack">
+        <div class="service-worker-version-stack-bar"></div>
+        ${active ? this.renderVersion(
+            'service-worker-active-circle',
+            i18nString(UIStrings.sActivatedAndIsS, {
+              PH1: active.id,
+              PH2: SDK.ServiceWorkerManager.ServiceWorkerVersion.RunningStatus[active.currentState.runningStatus](),
+            }),
+            active.isRunning() || active.isStarting() ? html`
+              <devtools-button .data=${{jslogContext: 'stop', variant: Buttons.Button.Variant.OUTLINED} as Buttons.Button.ButtonData}
+                              @click=${this.stopButtonClicked.bind(this, active.id)}>
+                  ${i18nString(UIStrings.stopString)}
+              </devtools-button>`
+            : active.isStartable() ? html`
+              <devtools-button .data=${{jslogContext: 'start', variant: Buttons.Button.Variant.OUTLINED} as Buttons.Button.ButtonData}
+                              @click=${this.startButtonClicked.bind(this)}>
+                  ${i18nString(UIStrings.startString)}
+              </devtools-button>`
+            : nothing)
+        : redundant ? this.renderVersion(
+            'service-worker-redundant-circle',
+            i18nString(UIStrings.sIsRedundant, {PH1: redundant.id}))
+        : nothing}
+        ${waiting ? this.renderVersion(
+            'service-worker-waiting-circle',
+            i18nString(UIStrings.sWaitingToActivate, {PH1: waiting.id}), html`
+              <devtools-button .data=${{
+                    jslogContext: 'skip-waiting',
+                    title: i18n.i18n.lockedString('skipWaiting'),
+                    variant: Buttons.Button.Variant.OUTLINED} as Buttons.Button.ButtonData}
+                  @click=${this.skipButtonClicked.bind(this)}>
+                ${i18n.i18n.lockedString('skipWaiting')}
+              </devtools-button>
+              ${waiting.scriptResponseTime !== undefined ? html`
+                <div class="service-worker-subtitle">
+                  ${i18nString(UIStrings.receivedS, {PH1: new Date(waiting.scriptResponseTime * 1000).toLocaleString()})}
+                </div>
+              ` : nothing}
+          `,
+        ) : nothing}
+        ${installing ? this.renderVersion(
+          'service-worker-installing-circle',
+          i18nString(UIStrings.sTryingToInstall, {PH1: installing.id}),
+          installing.scriptResponseTime !== undefined ? html`
+            <div class="service-worker-subtitle">
+              ${i18nString(UIStrings.receivedS, {PH1: new Date(installing.scriptResponseTime * 1000).toLocaleString()})}
+            </div>` : nothing) : nothing}
+      </div>
+    `, this.statusField);
+    // clang-format on
 
     if (active) {
       this.updateSourceField(active);
-      const localizedRunningStatus =
-          SDK.ServiceWorkerManager.ServiceWorkerVersion.RunningStatus[active.currentState.runningStatus]();
-      // TODO(l10n): Don't concatenate strings here.
-      const activeEntry = this.addVersion(
-          versionsStack, 'service-worker-active-circle',
-          i18nString(UIStrings.sActivatedAndIsS, {PH1: active.id, PH2: localizedRunningStatus}));
-
-      if (active.isRunning() || active.isStarting()) {
-        const stopButton = UI.UIUtils.createTextButton(
-            i18nString(UIStrings.stopString), this.stopButtonClicked.bind(this, active.id), {jslogContext: 'stop'});
-        activeEntry.appendChild(stopButton);
-      } else if (active.isStartable()) {
-        const startButton = UI.UIUtils.createTextButton(
-            i18nString(UIStrings.startString), this.startButtonClicked.bind(this), {jslogContext: 'start'});
-        activeEntry.appendChild(startButton);
-      }
       this.updateClientsField(active);
       this.maybeCreateRouterField();
     } else if (redundant) {
       this.updateSourceField(redundant);
-      this.addVersion(
-          versionsStack, 'service-worker-redundant-circle', i18nString(UIStrings.sIsRedundant, {PH1: redundant.id}));
       this.updateClientsField(redundant);
     }
 
-    if (waiting) {
-      const waitingEntry = this.addVersion(
-          versionsStack, 'service-worker-waiting-circle', i18nString(UIStrings.sWaitingToActivate, {PH1: waiting.id}));
-      const skipWaitingButton =
-          UI.UIUtils.createTextButton(i18n.i18n.lockedString('skipWaiting'), this.skipButtonClicked.bind(this), {
-            title: i18n.i18n.lockedString('skipWaiting'),
-            jslogContext: 'skip-waiting',
-          });
-      waitingEntry.appendChild(skipWaitingButton);
-      if (waiting.scriptResponseTime !== undefined) {
-        waitingEntry.createChild('div', 'service-worker-subtitle').textContent =
-            i18nString(UIStrings.receivedS, {PH1: new Date(waiting.scriptResponseTime * 1000).toLocaleString()});
-      }
-    }
-    if (installing) {
-      const installingEntry = this.addVersion(
-          versionsStack, 'service-worker-installing-circle',
-          i18nString(UIStrings.sTryingToInstall, {PH1: installing.id}));
-      if (installing.scriptResponseTime !== undefined) {
-        installingEntry.createChild('div', 'service-worker-subtitle').textContent = i18nString(UIStrings.receivedS, {
-          PH1: new Date(installing.scriptResponseTime * 1000).toLocaleString(),
-        });
-      }
-    }
-
     this.updateCycleView.refresh();
 
     return Promise.resolve();
@@ -740,36 +768,40 @@ export class Section {
     void this.manager.dispatchPeriodicSyncEvent(this.registration.id, tag);
   }
 
-  private onClientInfo(element: Element, targetInfoResponse: Protocol.Target.GetTargetInfoResponse): void {
+  private onClientInfo(element: HTMLElement, targetInfoResponse: Protocol.Target.GetTargetInfoResponse): void {
     const targetInfo = targetInfoResponse.targetInfo;
     if (!targetInfo) {
       return;
     }
     this.clientInfoCache.set(targetInfo.targetId, targetInfo);
-    this.updateClientInfo(element, targetInfo);
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(this.renderClientInfo(targetInfo), element);
   }
 
-  private updateClientInfo(element: Element, targetInfo: Protocol.Target.TargetInfo): void {
-    if (targetInfo.type !== 'page' && targetInfo.type === 'iframe') {
-      const clientString = element.createChild('span', 'service-worker-client-string');
-      UI.UIUtils.createTextChild(clientString, i18nString(UIStrings.workerS, {PH1: targetInfo.url}));
-      return;
+  private renderClientInfo(targetInfo: Protocol.Target.TargetInfo): LitTemplate {
+    if (targetInfo.type !== 'page' && targetInfo.type !== 'iframe') {
+      // clang-format off
+      return html`<span class="service-worker-client-string">
+        ${i18nString(UIStrings.workerS, {PH1: targetInfo.url})}
+      </span>`;
+      // clang-format on
     }
-    element.removeChildren();
-    const clientString = element.createChild('span', 'service-worker-client-string');
-    UI.UIUtils.createTextChild(clientString, targetInfo.url);
-
-    const focusButton = new Buttons.Button.Button();
-    focusButton.data = {
-      iconName: 'select-element',
-      variant: Buttons.Button.Variant.ICON,
-      size: Buttons.Button.Size.SMALL,
-      title: i18nString(UIStrings.focus),
-      jslogContext: 'client-focus',
-    };
-    focusButton.className = 'service-worker-client-focus-link';
-    focusButton.addEventListener('click', this.activateTarget.bind(this, targetInfo.targetId));
-    element.appendChild(focusButton);
+
+    // clang-format off
+    return html`
+      <span class="service-worker-client-string">${targetInfo.url}</span>
+      <devtools-button
+        .data=${{
+          iconName: 'select-element',
+          variant: Buttons.Button.Variant.ICON,
+          size: Buttons.Button.Size.SMALL,
+          title: i18nString(UIStrings.focus),
+          jslogContext: 'client-focus',
+        } as Buttons.Button.ButtonData}
+        class="service-worker-client-focus-link"
+        @click=${this.activateTarget.bind(this, targetInfo.targetId)}
+      ></devtools-button>`;
+    // clang-format on
   }
 
   private activateTarget(targetId: Protocol.Target.TargetID): void {
@@ -788,7 +820,7 @@ export class Section {
     void this.manager.stopWorker(versionId);
   }
 
-  private wrapWidget(container: Element): Element {
+  private wrapWidget(container: Element): HTMLElement {
     const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(container, {
       cssFile: [
         serviceWorkersViewStyles,

package/front_end/panels/application/serviceWorkersView.css

@@ -154,3 +154,11 @@ button.link {
 button.link:focus-visible {
   background-color: inherit;
 }
+
+devtools-icon.error-icon {
+  color: var(--sys-color-error-bright);
+  height: var(--sys-size-7);
+  margin-right: var(--sys-size-2);
+  vertical-align: bottom;
+  width: var(--sys-size-7);
+}