chrome-devtools-frontend 1.0.1657110 → 1.0.1660788

package/front_end/panels/application/OpenedWindowDetailsView.ts

@@ -131,7 +131,7 @@ async function maybeCreateLinkToElementsPanel(
     }
   });
   linkElement.addEventListener('mouseleave', () => {
-    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
+    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
   });
   return linkElement;
 }

package/front_end/panels/application/ResourcesPanel.ts

@@ -9,6 +9,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {ApplicationPanelSidebar, StorageCategoryView} from './ApplicationPanelSidebar.js';
@@ -135,8 +136,14 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
     this.storageViewToolbar.classList.toggle('hidden', true);
     if (view instanceof UI.View.SimpleView) {
       void view.toolbarItems().then(items => {
-        items.map(item => this.storageViewToolbar.appendToolbarItem(item));
-        this.storageViewToolbar.classList.toggle('hidden', !items.length);
+        if (Array.isArray(items)) {
+          items.map(item => this.storageViewToolbar.appendToolbarItem(item));
+          this.storageViewToolbar.classList.toggle('hidden', !items.length);
+        } else {
+          // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+          render(items, this.storageViewToolbar);
+          this.storageViewToolbar.classList.toggle('hidden', false);
+        }
       });
     }
   }

package/front_end/panels/application/ServiceWorkersView.ts

@@ -3,6 +3,9 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
+import '../../ui/components/report_view/report_view.js';
+import '../../ui/kit/kit.js';
+
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -10,10 +13,9 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 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 {Directives, 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';
 
@@ -180,6 +182,10 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/ServiceWorkersView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {until} = Directives;
+const {widget} = UI.Widget;
+const {bindToSetting} = UI.UIUtils;
+
 let throttleDisabledForDebugging = false;
 export const setThrottleDisabledForDebugging = (enable: boolean): void => {
   throttleDisabledForDebugging = enable;
@@ -188,7 +194,6 @@ export const setThrottleDisabledForDebugging = (enable: boolean): void => {
 export class ServiceWorkersView extends UI.Widget.VBox implements
     SDK.TargetManager.SDKModelObserver<SDK.ServiceWorkerManager.ServiceWorkerManager> {
   currentWorkersView: UI.ReportView.ReportView;
-  private readonly toolbar: UI.Toolbar.Toolbar;
   private readonly sections: Map<SDK.ServiceWorkerManager.ServiceWorkerRegistration, Section>;
   private manager: SDK.ServiceWorkerManager.ServiceWorkerManager|null;
   private securityOriginManager: SDK.SecurityOriginManager.SecurityOriginManager|null;
@@ -212,8 +217,6 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
     this.currentWorkersView.element.classList.add('service-workers-this-origin');
     this.currentWorkersView.element.setAttribute('jslog', `${VisualLogging.section('this-origin')}`);
 
-    this.toolbar = this.currentWorkersView.createToolbar();
-
     this.sections = new Map();
 
     this.manager = null;
@@ -230,34 +233,44 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
   }
 
   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.
-    const othersView = new UI.ReportView.ReportView();
-    othersView.setHeaderVisible(false);
-    othersView.show(othersDiv);
-    const othersSection = othersView.appendSection(i18nString(UIStrings.serviceWorkersFromOtherOrigins));
-    const othersSectionRow = othersSection.appendRow();
-    const seeOthers = Link.create('chrome://serviceworker-internals', i18nString(UIStrings.seeAllRegistrations),
-                                  undefined, 'view-all', 0, /* allowPrivileged=*/ true);
-    othersSectionRow.appendChild(seeOthers);
+    // clang-format off
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(html`<div class="service-workers-other-origin"
+                     jslog=${VisualLogging.section('other-origin')}>
+      <devtools-report>
+        <devtools-report-section-header>
+           ${i18nString(UIStrings.serviceWorkersFromOtherOrigins)}
+        </devtools-report-section-header>
+        <devtools-report-section>
+           <devtools-link href="chrome://serviceworker-internals"
+                          jslogcontext="view-all"
+                          .allowPrivileged=${true}>
+             ${i18nString(UIStrings.seeAllRegistrations)}
+           </devtools-link>
+        </devtools-report-section>
+      </devtools-report>
+    </div>`, this.contentElement);
+    // clang-format on
   }
-
   private setupToolbar(): void {
-    this.toolbar.appendToolbarItem(
-        MobileThrottling.ThrottlingManager.throttlingManager().createOfflineToolbarCheckbox());
     const updateOnReloadSetting =
         Common.Settings.Settings.instance().createSetting('service-worker-update-on-reload', false);
-    updateOnReloadSetting.setTitle(i18nString(UIStrings.updateOnReload));
-    const forceUpdate =
-        new UI.Toolbar.ToolbarSettingCheckbox(updateOnReloadSetting, i18nString(UIStrings.onPageReloadForceTheService));
-    this.toolbar.appendToolbarItem(forceUpdate);
     const bypassServiceWorkerSetting =
         Common.Settings.Settings.instance().createSetting('bypass-service-worker', false);
-    bypassServiceWorkerSetting.setTitle(i18nString(UIStrings.bypassForNetwork));
-    const fallbackToNetwork = new UI.Toolbar.ToolbarSettingCheckbox(
-        bypassServiceWorkerSetting, i18nString(UIStrings.bypassTheServiceWorkerAndLoad));
-    this.toolbar.appendToolbarItem(fallbackToNetwork);
+    // clang-format off
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(html`<devtools-toolbar class="service-worker-toolbar">
+      ${MobileThrottling.ThrottlingManager.throttlingManager().createOfflineToolbarCheckbox().element}
+      <devtools-checkbox title=${i18nString(UIStrings.onPageReloadForceTheService)}
+                         ${bindToSetting(updateOnReloadSetting)}>
+        ${i18nString(UIStrings.updateOnReload)}
+      </devtools-checkbox>
+      <devtools-checkbox title=${i18nString(UIStrings.bypassTheServiceWorkerAndLoad)}
+                         ${bindToSetting(bypassServiceWorkerSetting)}>
+        ${i18nString(UIStrings.bypassForNetwork)}
+       </devtools-checkbox>
+    </devtools-toolbar>`, this.currentWorkersView.getHeaderElement() as HTMLElement);
+    // clang-format on
   }
 
   modelAdded(serviceWorkerManager: SDK.ServiceWorkerManager.ServiceWorkerManager): void {
@@ -451,7 +464,7 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
   }
 }
 
-export class Section {
+export class Section extends UI.Widget.VBox {
   private manager: SDK.ServiceWorkerManager.ServiceWorkerManager;
   section: UI.ReportView.Section;
   registration: SDK.ServiceWorkerManager.ServiceWorkerRegistration;
@@ -460,20 +473,12 @@ export class Section {
   private readonly syncTagNameSetting: Common.Settings.Setting<string>;
   private readonly periodicSyncTagNameSetting: Common.Settings.Setting<string>;
   private readonly updateCycleView: ServiceWorkerUpdateCycleView;
-  private readonly routerView: ApplicationComponents.ServiceWorkerRouterView.ServiceWorkerRouterView;
-  private readonly networkRequests: Buttons.Button.Button;
-  private readonly updateButton: Buttons.Button.Button;
-  private readonly deleteButton: Buttons.Button.Button;
-  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?: HTMLElement;
-  private routerField?: HTMLElement;
 
   constructor(manager: SDK.ServiceWorkerManager.ServiceWorkerManager, section: UI.ReportView.Section,
               registration: SDK.ServiceWorkerManager.ServiceWorkerRegistration) {
+    super();
     this.manager = manager;
     this.section = section;
     this.registration = registration;
@@ -486,76 +491,76 @@ export class Section {
         Common.Settings.Settings.instance().createLocalSetting('periodic-sync-tag-name', 'test-tag-from-devtools');
 
     this.updateCycleView = new ServiceWorkerUpdateCycleView(registration);
-    this.routerView = new ApplicationComponents.ServiceWorkerRouterView.ServiceWorkerRouterView();
-    this.networkRequests = new Buttons.Button.Button();
-    this.networkRequests.data = {
-      variant: Buttons.Button.Variant.TEXT,
-      title: i18nString(UIStrings.networkRequests),
-      jslogContext: 'show-network-requests',
-    };
-    this.networkRequests.textContent = i18nString(UIStrings.networkRequests);
-    this.networkRequests.addEventListener('click', this.networkRequestsClicked.bind(this));
-    this.section.appendButtonToHeader(this.networkRequests);
-    this.updateButton = UI.UIUtils.createTextButton(
-        i18nString(UIStrings.update), this.updateButtonClicked.bind(this),
-        {variant: Buttons.Button.Variant.TEXT, title: i18nString(UIStrings.update), jslogContext: 'update'});
-    this.section.appendButtonToHeader(this.updateButton);
-    this.deleteButton =
-        UI.UIUtils.createTextButton(i18nString(UIStrings.unregister), this.unregisterButtonClicked.bind(this), {
-          variant: Buttons.Button.Variant.TEXT,
-          title: i18nString(UIStrings.unregisterServiceWorker),
-          jslogContext: 'unregister',
-        });
-    this.section.appendButtonToHeader(this.deleteButton);
-
-    // Preserve the order.
-    this.sourceField = this.section.appendField(i18nString(UIStrings.source));
-    this.statusField = this.section.appendField(i18nString(UIStrings.status));
-    this.clientsField = this.section.appendField(i18nString(UIStrings.clients));
-
-    UI.DOMUtilities.appendStyle(this.section.getFieldElement(), serviceWorkersViewStyles,
-                                serviceWorkerUpdateCycleViewStyles);
-    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();
+
+    this.registerRequiredCSS(serviceWorkersViewStyles, serviceWorkerUpdateCycleViewStyles);
+    this.show(this.section.getFieldElement());
 
     this.clientInfoCache = new Map();
     this.throttler = new Common.Throttler.Throttler(500);
   }
 
-  private createSyncNotificationField(label: string, initialValue: string, placeholder: string,
-                                      callback: (arg0: string) => void, jslogContext: string): void {
-    const fieldElement = this.section.appendField(label);
+  private renderHeaderButtons(): LitTemplate {
+    // clang-format off
 
+    return html`
+      <devtools-button .data=${{
+            variant: Buttons.Button.Variant.TEXT,
+            title: i18nString(UIStrings.networkRequests),
+            jslogContext: 'show-network-requests'
+          } as Buttons.Button.ButtonData}
+          .disabled=${this.registration.isDeleted}
+          @click=${this.networkRequestsClicked.bind(this)}>
+        ${i18nString(UIStrings.networkRequests)}
+      </devtools-button>
+      <devtools-button .data=${{
+            variant: Buttons.Button.Variant.TEXT,
+            title: i18nString(UIStrings.update),
+            jslogContext: 'update'
+          } as Buttons.Button.ButtonData}
+          .disabled=${this.registration.isDeleted}
+          @click=${this.updateButtonClicked.bind(this)}>
+        ${i18nString(UIStrings.update)}
+      </devtools-button>
+      <devtools-button .data=${{
+            variant: Buttons.Button.Variant.TEXT,
+            title: i18nString(UIStrings.unregisterServiceWorker),
+            jslogContext: 'unregister'
+          } as Buttons.Button.ButtonData}
+          .disabled=${this.registration.isDeleted}
+          @click=${this.unregisterButtonClicked.bind(this)}>
+        ${i18nString(UIStrings.unregister)}
+      </devtools-button>`;
+    // clang-format on
+  }
+
+  private renderSyncNotificationField(label: string, initialValue: string, placeholder: string,
+                                      callback: (arg0: string) => void, jslogContext: string): LitTemplate {
     // 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);
+    return html`
+      <div class="report-field">
+      <div class="report-field-name">${label}</div>
+        <div class="report-field-value">
+        <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>
+        </div>
+      </div>`;
     // clang-format on
   }
 
@@ -564,7 +569,10 @@ export class Section {
       void this.performUpdate();
       return;
     }
-    void this.throttler.schedule(this.performUpdate.bind(this));
+    void this.throttler.schedule(() => {
+      this.requestUpdate();
+      return this.updateComplete;
+    });
   }
 
   private renderVersion(icon: string, label: string, content: LitTemplate = nothing): LitTemplate {
@@ -580,32 +588,43 @@ export class Section {
     // 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') as HTMLElement;
-      const info = this.clientInfoCache.get(client);
-      if (info) {
-        // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-        render(this.renderClientInfo(info), clientLabelText);
-      }
-      void this.manager.target()
-          .targetAgent()
-          .invoke_getTargetInfo({targetId: client})
-          .then(this.onClientInfo.bind(this, clientLabelText));
+  private renderClientsField(version?: SDK.ServiceWorkerManager.ServiceWorkerVersion): LitTemplate {
+    if (!version?.controlledClients?.length) {
+      return html`<div class="report-field">
+        <div class="report-field-name">${i18nString(UIStrings.clients)}</div>
+        <div class="report-field-value"></div>
+      </div>`;
     }
+    // clang-format off
+    return html`<div class="report-field">
+        <div class="report-field-name">${i18nString(UIStrings.clients)}</div>
+        <div class="report-field-value">
+        ${version.controlledClients.map(client => html`
+          <div class="service-worker-client">
+            ${until(this.renderClientInfo(client))}
+         </div>`)}
+      </div>
+    </div>`;
+    // clang-format on
   }
 
-  private updateSourceField(version: SDK.ServiceWorkerManager.ServiceWorkerVersion): void {
+  private renderSourceField(version?: SDK.ServiceWorkerManager.ServiceWorkerVersion): LitTemplate {
+    if (!version) {
+      return html`<div class="report-field">
+        <div class="report-field-name">${i18nString(UIStrings.source)}</div>
+        <div class="report-field-value"></div>
+      </div>`;
+    }
     const fileName = Common.ParsedURL.ParsedURL.extractName(version.scriptURL);
     // 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`
+
+    return html`<div class="report-field">
+      <div class="report-field-name">${i18nString(UIStrings.source)}</div>
+      <div class="report-field-value">
+        <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"
@@ -615,24 +634,88 @@ export class Section {
               </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}
       </div>
-      ${version.scriptResponseTime !== undefined ? html`
-        <div class="report-field-value-subtitle">
-          ${i18nString(UIStrings.receivedS, {PH1: new Date(version.scriptResponseTime * 1000).toLocaleString()})}
+    </div>`;
+    // clang-format on
+  }
+
+  private renderStatusField(active?: SDK.ServiceWorkerManager.ServiceWorkerVersion,
+                            waiting?: SDK.ServiceWorkerManager.ServiceWorkerVersion,
+                            installing?: SDK.ServiceWorkerManager.ServiceWorkerVersion,
+                            redundant?: SDK.ServiceWorkerManager.ServiceWorkerVersion): LitTemplate {
+    // clang-format off
+
+    return html`<div class="report-field">
+      <div class="report-field-name">${i18nString(UIStrings.status)}</div>
+      <div class="report-field-value">
+        <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>
-      ` : nothing}
-    `, this.sourceField);
+      </div>
+    </div>`;
     // clang-format on
   }
 
-  private performUpdate(): Promise<void> {
+  override performUpdate(): Promise<void> {
     const fingerprint = this.registration.fingerprint();
     if (fingerprint === this.fingerprint) {
       return Promise.resolve();
     }
     this.fingerprint = fingerprint;
 
-    this.section.setHeaderButtonsState(this.registration.isDeleted);
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(this.renderHeaderButtons(), this.section.getHeaderElement());
 
     const versions = this.registration.versionsByMode();
     const scopeURL = this.registration.scopeURL;
@@ -647,66 +730,20 @@ export class Section {
     // 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);
+           ${this.renderSourceField(active ?? redundant)}
+           ${this.renderStatusField(active, waiting, installing, redundant)}
+           ${this.renderClientsField(active ?? redundant)}
+           ${this.renderSyncNotificationField(i18nString(UIStrings.pushString), this.pushNotificationDataSetting.get(),
+                                     i18nString(UIStrings.pushData), this.push.bind(this), 'push-message')}
+           ${this.renderSyncNotificationField(i18nString(UIStrings.syncString), this.syncTagNameSetting.get(),
+                                     i18nString(UIStrings.syncTag), this.sync.bind(this), 'sync-tag')}
+           ${this.renderSyncNotificationField(i18nString(UIStrings.periodicSync), this.periodicSyncTagNameSetting.get(),
+                                     i18nString(UIStrings.periodicSyncTag), tag => this.periodicSync(tag),
+                                     'periodic-sync-tag')}
+           ${this.renderUpdateCycleField()}
+           ${this.renderRouterField()}
+    `, this.contentElement);
     // clang-format on
-
-    if (active) {
-      this.updateSourceField(active);
-      this.updateClientsField(active);
-      this.maybeCreateRouterField();
-    } else if (redundant) {
-      this.updateSourceField(redundant);
-      this.updateClientsField(redundant);
-    }
-
     this.updateCycleView.refresh();
 
     return Promise.resolve();
@@ -716,29 +753,33 @@ export class Section {
     this.manager.deleteRegistration(this.registration.id);
   }
 
-  private createUpdateCycleField(): void {
-    this.updateCycleField = this.section.appendField(i18nString(UIStrings.updateCycle));
-    this.updateCycleField.appendChild(this.updateCycleView.tableElement);
+  private renderUpdateCycleField(): LitTemplate {
+    return html`
+      <div class="report-field">
+        <div class="report-field-name">${i18nString(UIStrings.updateCycle)}</div>
+        <div class="report-field-value">
+          ${this.updateCycleView.tableElement}
+        </div>
+      </div>`;
   }
 
-  private maybeCreateRouterField(): void {
+  private renderRouterField(): LitTemplate {
     const versions = this.registration.versionsByMode();
     const active = versions.get(SDK.ServiceWorkerManager.ServiceWorkerVersion.Modes.ACTIVE);
     const title = i18nString(UIStrings.routers);
     if (active?.routerRules && active.routerRules.length > 0) {
       // If there is at least one registered rule in the active version, append the router filed.
-      if (!this.routerField) {
-        this.routerField = this.section.appendField(title);
-      }
-      if (!this.routerField.lastElementChild) {
-        this.routerView.show(this.routerField);
-      }
-      this.routerView.rules = active.routerRules;
-    } else {
-      // If no active worker or no registered rules, remove the field.
-      this.section.removeField(title);
-      this.routerField = undefined;
+      // clang-format off
+      return html`
+        <div class="report-field">
+          <div class="report-field-name">${title}</div>
+          <div class="report-field-value">
+            ${widget(ApplicationComponents.ServiceWorkerRouterView.ServiceWorkerRouterView, { rules: active.routerRules })}
+          </div>
+        </div>`;
+      // clang-format on
     }
+    return nothing;
   }
 
   private updateButtonClicked(): void {
@@ -771,17 +812,17 @@ export class Section {
     void this.manager.dispatchPeriodicSyncEvent(this.registration.id, tag);
   }
 
-  private onClientInfo(element: HTMLElement, targetInfoResponse: Protocol.Target.GetTargetInfoResponse): void {
-    const targetInfo = targetInfoResponse.targetInfo;
+  private async renderClientInfo(clientId: Protocol.Target.TargetID): Promise<LitTemplate|typeof nothing> {
+    let targetInfo = this.clientInfoCache.get(clientId);
     if (!targetInfo) {
-      return;
+      const response = await this.manager.target().targetAgent().invoke_getTargetInfo({targetId: clientId});
+      if (!response.targetInfo) {
+        return nothing;
+      }
+      targetInfo = response.targetInfo;
+      this.clientInfoCache.set(clientId, targetInfo);
     }
-    this.clientInfoCache.set(targetInfo.targetId, targetInfo);
-    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-    render(this.renderClientInfo(targetInfo), element);
-  }
 
-  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">