chrome-devtools-frontend 1.0.1656291 → 1.0.1656897

package/front_end/core/sdk/DOMModel.ts

@@ -40,14 +40,14 @@ import * as Common from '../common/common.js';
 import * as Platform from '../platform/platform.js';
 
 import {CSSModel} from './CSSModel.js';
-import {FrameManager} from './FrameManager.js';
+import type {FrameManager} from './FrameManager.js';
 import {OverlayModel} from './OverlayModel.js';
 import {RemoteObject} from './RemoteObject.js';
 import {Events as ResourceTreeModelEvents, type ResourceTreeFrame, ResourceTreeModel} from './ResourceTreeModel.js';
 import {RuntimeModel} from './RuntimeModel.js';
 import {SDKModel} from './SDKModel.js';
 import {Capability, type Target} from './Target.js';
-import {TargetManager} from './TargetManager.js';
+import type {TargetManager} from './TargetManager.js';
 
 /** Keep this list in sync with https://w3c.github.io/aria/#state_prop_def **/
 export const ARIA_ATTRIBUTES = new Set<string>([
@@ -129,6 +129,7 @@ export interface DOMNodeEventTypes {
 
 export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventTypes> {
   #domModel: DOMModel;
+  readonly #frameManager: FrameManager;
   #agent: ProtocolProxyApi.DOMApi;
   ownerDocument!: DOMDocument|null;
   #isInShadowTree!: boolean;
@@ -194,6 +195,7 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
   constructor(domModel: DOMModel) {
     super();
     this.#domModel = domModel;
+    this.#frameManager = domModel.target().targetManager().getFrameManager();
     this.#agent = this.#domModel.getAgent();
   }
 
@@ -313,7 +315,7 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
   }
 
   private async requestChildDocument(frameId: Protocol.Page.FrameId, notInTarget: Target): Promise<DOMDocument|null> {
-    const frame = await FrameManager.instance().getOrWaitForFrame(frameId, notInTarget);
+    const frame = await this.#frameManager.getOrWaitForFrame(frameId, notInTarget);
     const childModel = frame.resourceTreeModel()?.target().model(DOMModel);
     return await (childModel?.requestDocument() || null);
   }
@@ -341,7 +343,7 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
       return undefined;
     }
 
-    const frame = FrameManager.instance().getFrame(this.#frameOwnerFrameId);
+    const frame = this.#frameManager.getFrame(this.#frameOwnerFrameId);
     if (frame && frame.adFrameType() !== Protocol.Page.AdFrameType.None) {
       // The frame is ad-related, but provenance information is unavailable.
       return {};
@@ -1478,7 +1480,7 @@ export class DOMModel extends SDKModel<EventTypes> {
     return this.target().model(OverlayModel) as OverlayModel;
   }
 
-  static cancelSearch(targetManager: TargetManager = TargetManager.instance()): void {
+  static cancelSearch(targetManager: TargetManager): void {
     for (const domModel of targetManager.models(DOMModel)) {
       domModel.cancelSearch();
     }

package/front_end/core/sdk/SourceMapCache.ts

@@ -8,15 +8,13 @@ import type {DebugId, SourceMapV3} from './SourceMap.js';
 
 /** A thin wrapper around the Cache API to store source map JSONs keyed on Debug IDs */
 export class SourceMapCache {
-  static readonly #INSTANCE = new SourceMapCache('devtools-source-map-cache');
-
-  static instance(): SourceMapCache {
+  static create(): SourceMapCache {
     if (typeof window === 'undefined') {
       // TODO(crbug.com/451502260): Move this behind a `HostRuntime` interface.
       return IN_MEMORY_INSTANCE as unknown as
           SourceMapCache;  // TS doesn't like that our in-memory class doesn't have the same private fields.
     }
-    return this.#INSTANCE;
+    return new SourceMapCache('devtools-source-map-cache');
   }
 
   static createForTest(name: string): SourceMapCache {

package/front_end/core/sdk/SourceMapManager.ts

@@ -22,6 +22,7 @@ export class SourceMapManager<T extends FrameAssociated> extends Common.ObjectWr
   readonly #clientData = new Map<T, ClientData>();
   readonly #sourceMaps = new Map<SourceMap, T>();
   #attachingClient: T|null = null;
+  readonly #sourceMapCache = SourceMapCache.create();
 
   constructor(target: Target, factory?: SourceMapFactory<T>) {
     super();
@@ -118,7 +119,7 @@ export class SourceMapManager<T extends FrameAssociated> extends Common.ObjectWr
           //     SourceMapManager in their respective constructors.
           const resourceLoader = this.#target.targetManager().context.get(PageResourceLoader);
           clientData.sourceMapPromise =
-              loadSourceMap(resourceLoader, sourceMapURL, client.debugId(), initiator)
+              loadSourceMap(resourceLoader, this.#sourceMapCache, sourceMapURL, client.debugId(), initiator)
                   .then(
                       payload => {
                         const sourceMap = this.#factory(sourceURL, sourceMapURL, payload, client);
@@ -185,14 +186,14 @@ export class SourceMapManager<T extends FrameAssociated> extends Common.ObjectWr
   }
 }
 
-async function loadSourceMap(
-    resourceLoader: ResourceLoader, url: Platform.DevToolsPath.UrlString, debugId: DebugId|null,
-    initiator: PageResourceLoadInitiator): Promise<SourceMapV3> {
+async function loadSourceMap(resourceLoader: ResourceLoader, sourceMapCache: SourceMapCache,
+                             url: Platform.DevToolsPath.UrlString, debugId: DebugId|null,
+                             initiator: PageResourceLoadInitiator): Promise<SourceMapV3> {
   try {
     if (debugId) {
       const securityOrigin = initiator.initiatorUrl ? Common.ParsedURL.ParsedURL.extractOrigin(initiator.initiatorUrl) :
                                                       Platform.DevToolsPath.EmptyUrlString;
-      const cachedSourceMap = await SourceMapCache.instance().get(debugId, securityOrigin);
+      const cachedSourceMap = await sourceMapCache.get(debugId, securityOrigin);
       if (cachedSourceMap) {
         return cachedSourceMap;
       }
@@ -204,7 +205,7 @@ async function loadSourceMap(
       // In case something goes wrong with updating the cache, we still want to use the source map.
       const securityOrigin = initiator.initiatorUrl ? Common.ParsedURL.ParsedURL.extractOrigin(initiator.initiatorUrl) :
                                                       Platform.DevToolsPath.EmptyUrlString;
-      await SourceMapCache.instance().set(sourceMap.debugId as DebugId, securityOrigin, sourceMap).catch();
+      await sourceMapCache.set(sourceMap.debugId as DebugId, securityOrigin, sourceMap).catch();
     }
     return sourceMap;
   } catch (cause) {
@@ -216,7 +217,7 @@ export async function tryLoadSourceMap(
     resourceLoader: ResourceLoader, url: Platform.DevToolsPath.UrlString,
     initiator: PageResourceLoadInitiator): Promise<SourceMapV3|null> {
   try {
-    return await loadSourceMap(resourceLoader, url, null, initiator);
+    return await loadSourceMap(resourceLoader, SourceMapCache.create(), url, null, initiator);
   } catch (cause) {
     console.error(cause);
     return null;

package/front_end/entrypoints/main/SimpleApp.ts

@@ -13,20 +13,7 @@ export class SimpleApp implements UI.App.App {
   }
 }
 
-let simpleAppProviderInstance: SimpleAppProvider;
-
 export class SimpleAppProvider implements UI.AppProvider.AppProvider {
-  static instance(opts: {
-    forceNew: boolean|null,
-  } = {forceNew: null}): SimpleAppProvider {
-    const {forceNew} = opts;
-    if (!simpleAppProviderInstance || forceNew) {
-      simpleAppProviderInstance = new SimpleAppProvider();
-    }
-
-    return simpleAppProviderInstance;
-  }
-
   createApp(): UI.App.App {
     return new SimpleApp();
   }

package/front_end/entrypoints/main/main-meta.ts

@@ -949,7 +949,7 @@ UI.Toolbar.registerToolbarItem({
 UI.AppProvider.registerAppProvider({
   async loadAppProvider() {
     const Main = await loadMainModule();
-    return Main.SimpleApp.SimpleAppProvider.instance();
+    return new Main.SimpleApp.SimpleAppProvider();
   },
   order: 10,
 });

package/front_end/foundation/Universe.ts

@@ -9,6 +9,7 @@ import * as SDK from '../core/sdk/sdk.js';
 import * as AutofillManager from '../models/autofill_manager/autofill_manager.js';
 import * as Bindings from '../models/bindings/bindings.js';
 import * as Breakpoints from '../models/breakpoints/breakpoints.js';
+import * as CrUXManager from '../models/crux-manager/crux-manager.js';
 import * as JavaScriptMetadata from '../models/javascript_metadata/javascript_metadata.js';
 import * as Logs from '../models/logs/logs.js';
 import * as Persistence from '../models/persistence/persistence.js';
@@ -80,6 +81,9 @@ export class Universe {
     const domDebuggerManager = new SDK.DOMDebuggerModel.DOMDebuggerManager(targetManager);
     context.set(SDK.DOMDebuggerModel.DOMDebuggerManager, domDebuggerManager);
 
+    const cruxManager = new CrUXManager.CrUXManager(targetManager, settings);
+    context.set(CrUXManager.CrUXManager, cruxManager);
+
     const workspace = new Workspace.Workspace.WorkspaceImpl();
     context.set(Workspace.Workspace.WorkspaceImpl, workspace);
 
@@ -152,6 +156,10 @@ export class Universe {
     return this.context.get(SDK.CPUThrottlingManager.CPUThrottlingManager);
   }
 
+  get cruxManager(): CrUXManager.CrUXManager {
+    return this.context.get(CrUXManager.CrUXManager);
+  }
+
   get domDebuggerManager(): SDK.DOMDebuggerModel.DOMDebuggerManager {
     return this.context.get(SDK.DOMDebuggerModel.DOMDebuggerManager);
   }
@@ -179,4 +187,8 @@ export class Universe {
   get settings(): Common.Settings.Settings {
     return this.context.get(Common.Settings.Settings);
   }
+
+  get targetManager(): SDK.TargetManager.TargetManager {
+    return this.context.get(SDK.TargetManager.TargetManager);
+  }
 }

package/front_end/generated/InspectorBackendCommands.ts

@@ -510,8 +510,8 @@ inspectorBackend.registerCommand("DeviceOrientation.clearDeviceOrientationOverri
 inspectorBackend.registerCommand("DeviceOrientation.setDeviceOrientationOverride", [{"name": "alpha", "type": "number", "optional": false, "description": "Mock alpha", "typeRef": null}, {"name": "beta", "type": "number", "optional": false, "description": "Mock beta", "typeRef": null}, {"name": "gamma", "type": "number", "optional": false, "description": "Mock gamma", "typeRef": null}], [], "Overrides the Device Orientation.");
 
 // DigitalCredentials.
-inspectorBackend.registerEnum("DigitalCredentials.VirtualWalletBehavior", {Respond: "respond", Decline: "decline", Wait: "wait", Clear: "clear"});
-inspectorBackend.registerCommand("DigitalCredentials.setVirtualWalletBehavior", [{"name": "behavior", "type": "string", "optional": false, "description": "The behavior of the virtual wallet.", "typeRef": "DigitalCredentials.VirtualWalletBehavior"}, {"name": "protocol", "type": "string", "optional": true, "description": "The protocol identifier (e.g. \\\"openid4vp\\\"). Required when |behavior| is \\\"respond\\\", forbidden otherwise.", "typeRef": null}, {"name": "response", "type": "object", "optional": true, "description": "The response data object returned by the wallet. Required when |behavior| is \\\"respond\\\", forbidden otherwise.", "typeRef": null}], [], "Sets the behavior of the virtual wallet for digital credential requests issued from this frame.");
+inspectorBackend.registerEnum("DigitalCredentials.VirtualWalletAction", {Respond: "respond", Decline: "decline", Wait: "wait", Clear: "clear"});
+inspectorBackend.registerCommand("DigitalCredentials.setVirtualWalletBehavior", [{"name": "action", "type": "string", "optional": false, "description": "The action of the virtual wallet.", "typeRef": "DigitalCredentials.VirtualWalletAction"}, {"name": "protocol", "type": "string", "optional": true, "description": "The protocol identifier (e.g. \\\"openid4vp\\\"). Required when |action| is \\\"respond\\\", forbidden otherwise.", "typeRef": null}, {"name": "response", "type": "object", "optional": true, "description": "The response data object returned by the wallet. Required when |action| is \\\"respond\\\", forbidden otherwise.", "typeRef": null}], [], "Sets the behavior of the virtual wallet for digital credential requests issued from this frame.");
 
 // Emulation.
 inspectorBackend.registerEnum("Emulation.ScreenOrientationType", {PortraitPrimary: "portraitPrimary", PortraitSecondary: "portraitSecondary", LandscapePrimary: "landscapePrimary", LandscapeSecondary: "landscapeSecondary"});

package/front_end/generated/protocol.ts

@@ -7018,7 +7018,7 @@ export namespace DigitalCredentials {
   /**
    * The type of virtual wallet action.
    */
-  export const enum VirtualWalletBehavior {
+  export const enum VirtualWalletAction {
     Respond = 'respond',
     Decline = 'decline',
     Wait = 'wait',
@@ -7027,17 +7027,17 @@ export namespace DigitalCredentials {
 
   export interface SetVirtualWalletBehaviorRequest {
     /**
-     * The behavior of the virtual wallet.
+     * The action of the virtual wallet.
      */
-    behavior: VirtualWalletBehavior;
+    action: VirtualWalletAction;
     /**
-     * The protocol identifier (e.g. "openid4vp"). Required when |behavior| is
+     * The protocol identifier (e.g. "openid4vp"). Required when |action| is
      * "respond", forbidden otherwise.
      */
     protocol?: string;
     /**
      * The response data object returned by the wallet.
-     * Required when |behavior| is "respond", forbidden otherwise.
+     * Required when |action| is "respond", forbidden otherwise.
      */
     response?: any;
   }

package/front_end/models/crux-manager/CrUXManager.ts

@@ -102,8 +102,6 @@ export interface ConfigSetting {
   originMappings?: OriginMapping[];
 }
 
-let cruxManagerInstance: CrUXManager;
-
 /** TODO: Potentially support `TABLET`. Tablet field data will always be `null` until then. **/
 export const DEVICE_SCOPE_LIST: DeviceScope[] = ['ALL', 'DESKTOP', 'PHONE'];
 
@@ -128,11 +126,13 @@ export class CrUXManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   #configSetting: Common.Settings.Setting<ConfigSetting>;
   #endpoint = DEFAULT_ENDPOINT;
   #pageResult?: PageResult;
+  readonly #targetManager: SDK.TargetManager.TargetManager;
   fieldDeviceOption: DeviceOption = 'AUTO';
   fieldPageScope: PageScope = 'url';
 
-  private constructor() {
+  constructor(targetManager: SDK.TargetManager.TargetManager, settings: Common.Settings.Settings) {
     super();
+    this.#targetManager = targetManager;
 
     /**
      * In an incognito or guest window - which is called an "OffTheRecord"
@@ -149,7 +149,7 @@ export class CrUXManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     const storageTypeForConsent =
         useSessionStorage ? Common.Settings.SettingStorageType.SESSION : Common.Settings.SettingStorageType.GLOBAL;
 
-    this.#configSetting = Common.Settings.Settings.instance().createSetting<ConfigSetting>(
+    this.#configSetting = settings.createSetting<ConfigSetting>(
         'field-data', {enabled: false, override: '', originMappings: [], overrideEnabled: false},
         storageTypeForConsent);
 
@@ -157,18 +157,23 @@ export class CrUXManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
       void this.refresh();
     });
 
-    SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated, this.#onFrameNavigated,
-        this);
+    this.#targetManager.addModelListener(SDK.ResourceTreeModel.ResourceTreeModel,
+                                         SDK.ResourceTreeModel.Events.FrameNavigated, this.#onFrameNavigated, this);
   }
 
   static instance(opts: {forceNew: boolean|null} = {forceNew: null}): CrUXManager {
     const {forceNew} = opts;
-    if (!cruxManagerInstance || forceNew) {
-      cruxManagerInstance = new CrUXManager();
+    if (!Root.DevToolsContext.globalInstance().has(CrUXManager) || forceNew) {
+      Root.DevToolsContext.globalInstance().set(
+          CrUXManager,
+          new CrUXManager(SDK.TargetManager.TargetManager.instance(), Common.Settings.Settings.instance()));
     }
 
-    return cruxManagerInstance;
+    return Root.DevToolsContext.globalInstance().get(CrUXManager);
+  }
+
+  static removeInstance(): void {
+    Root.DevToolsContext.globalInstance().delete(CrUXManager);
   }
 
   /** The most recent page result from the CrUX service. */
@@ -264,7 +269,7 @@ export class CrUXManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   }
 
   async #getInspectedURL(): Promise<string> {
-    const targetManager = SDK.TargetManager.TargetManager.instance();
+    const targetManager = this.#targetManager;
     let inspectedURL = targetManager.inspectedURL();
     if (!inspectedURL) {
       inspectedURL = await new Promise(resolve => {

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';
 
@@ -273,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),
     ]);
   }
 
@@ -331,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);
     }
 
@@ -399,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;
@@ -426,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 {
@@ -468,9 +472,8 @@ export class Section {
   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;
@@ -509,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();
 
@@ -525,26 +526,34 @@ 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 {
@@ -555,13 +564,17 @@ export class Section {
     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 {
@@ -571,7 +584,8 @@ export class Section {
       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()
@@ -581,31 +595,31 @@ 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()});
-    }
+    // 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> {
@@ -627,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();
@@ -753,30 +774,34 @@ export class Section {
       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: HTMLElement, 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 {

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);
+}

package/front_end/panels/elements/ElementsPanel.ts

@@ -214,13 +214,25 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   private cssStyleTrackerByCSSModel: Map<SDK.CSSModel.CSSModel, SDK.CSSModel.CSSPropertyTracker>;
   #domTreeWidget: DOMTreeWidget;
   #computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel;
+  readonly #targetManager: SDK.TargetManager.TargetManager;
+  readonly #settings: Common.Settings.Settings;
+
+  get settings(): Common.Settings.Settings {
+    return this.#settings;
+  }
+
+  get targetManager(): SDK.TargetManager.TargetManager {
+    return this.#targetManager;
+  }
 
   getTreeOutlineForTesting(): ElementsTreeOutline|undefined {
     return this.#domTreeWidget.getTreeOutlineForTesting();
   }
 
-  constructor() {
+  constructor(targetManager?: SDK.TargetManager.TargetManager, settings?: Common.Settings.Settings) {
     super('elements');
+    this.#targetManager = targetManager ?? SDK.TargetManager.TargetManager.instance();
+    this.#settings = settings ?? Common.Settings.Settings.instance();
     this.registerRequiredCSS(elementsPanelStyles);
 
     this.splitWidget = new UI.SplitWidget.SplitWidget(true, true, 'elements-panel-split-view-state', 325, 325);
@@ -251,12 +263,10 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.domTreeContainer.id = 'elements-content';
     this.domTreeContainer.tabIndex = -1;
     // FIXME: crbug.com/425984
-    if (Common.Settings.Settings.instance().moduleSetting('dom-word-wrap').get()) {
+    if (this.#settings.moduleSetting('dom-word-wrap').get()) {
       this.domTreeContainer.classList.add('elements-wrap');
     }
-    Common.Settings.Settings.instance()
-        .moduleSetting('dom-word-wrap')
-        .addChangeListener(this.domWordWrapSettingChanged.bind(this));
+    this.#settings.moduleSetting('dom-word-wrap').addChangeListener(this.domWordWrapSettingChanged.bind(this));
 
     crumbsContainer.id = 'elements-crumbs';
     this.accessibilityTreeView = new AccessibilityTreeView(new TreeOutline.TreeOutline.TreeOutline<AXTreeNodeData>());
@@ -286,9 +296,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     this.metricsWidget = new MetricsSidebarPane(this.#computedStyleModel);
 
-    Common.Settings.Settings.instance()
-        .moduleSetting('sidebar-position')
-        .addChangeListener(this.updateSidebarPosition.bind(this));
+    this.#settings.moduleSetting('sidebar-position').addChangeListener(this.updateSidebarPosition.bind(this));
     this.updateSidebarPosition();
 
     this.cssStyleTrackerByCSSModel = new Map();
@@ -296,8 +304,8 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     this.pendingNodeReveal = false;
 
-    this.adornerManager = new ElementsComponents.AdornerManager.AdornerManager(
-        Common.Settings.Settings.instance().moduleSetting('adorner-settings'));
+    this.adornerManager =
+        new ElementsComponents.AdornerManager.AdornerManager(this.#settings.moduleSetting('adorner-settings'));
     this.adornersByName = new Map();
 
     this.#domTreeWidget = new DOMTreeWidget();
@@ -306,14 +314,12 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.#domTreeWidget.onSelectedNodeChanged = this.selectedNodeChanged.bind(this);
     this.#domTreeWidget.onElementsTreeUpdated = this.updateBreadcrumbIfNeeded.bind(this);
     this.#domTreeWidget.onDocumentUpdated = this.documentUpdated.bind(this);
-    this.#domTreeWidget.setWordWrap(Common.Settings.Settings.instance().moduleSetting('dom-word-wrap').get());
-
-    SDK.TargetManager.TargetManager.instance().observeModels(SDK.DOMModel.DOMModel, this, {scoped: true});
-    SDK.TargetManager.TargetManager.instance().addEventListener(
-        SDK.TargetManager.Events.NAME_CHANGED, event => this.targetNameChanged(event.data));
-    Common.Settings.Settings.instance()
-        .moduleSetting('show-ua-shadow-dom')
-        .addChangeListener(this.showUAShadowDOMChanged.bind(this));
+    this.#domTreeWidget.setWordWrap(this.#settings.moduleSetting('dom-word-wrap').get());
+
+    this.#targetManager.observeModels(SDK.DOMModel.DOMModel, this, {scoped: true});
+    this.#targetManager.addEventListener(SDK.TargetManager.Events.NAME_CHANGED,
+                                         event => this.targetNameChanged(event.data));
+    this.#settings.moduleSetting('show-ua-shadow-dom').addChangeListener(this.showUAShadowDOMChanged.bind(this));
     PanelCommon.ExtensionServer.ExtensionServer.instance().addEventListener(
         PanelCommon.ExtensionServer.Events.SidebarPaneAdded, this.extensionSidebarPaneAdded, this);
   }
@@ -378,10 +384,12 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
   static instance(opts: {
     forceNew: boolean|null,
+    targetManager?: SDK.TargetManager.TargetManager,
+    settings?: Common.Settings.Settings,
   }|undefined = {forceNew: null}): ElementsPanel {
-    const {forceNew} = opts;
+    const {forceNew, targetManager, settings} = opts || {};
     if (!elementsPanelInstance || forceNew) {
-      elementsPanelInstance = new ElementsPanel();
+      elementsPanelInstance = new ElementsPanel(targetManager, settings);
     }
 
     return elementsPanelInstance;
@@ -734,7 +742,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.currentSearchResultIndex = -1;
     delete this.searchResults;
 
-    SDK.DOMModel.DOMModel.cancelSearch();
+    SDK.DOMModel.DOMModel.cancelSearch(this.#targetManager);
   }
 
   performSearch(searchConfig: UI.SearchableView.SearchConfig, shouldJump: boolean, jumpBackwards?: boolean): void {
@@ -753,8 +761,8 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     this.searchConfig = searchConfig;
 
-    const showUAShadowDOM = Common.Settings.Settings.instance().moduleSetting('show-ua-shadow-dom').get();
-    const domModels = SDK.TargetManager.TargetManager.instance().models(SDK.DOMModel.DOMModel, {scoped: true});
+    const showUAShadowDOM = this.#settings.moduleSetting('show-ua-shadow-dom').get();
+    const domModels = this.#targetManager.models(SDK.DOMModel.DOMModel, {scoped: true});
     const promises = domModels.map(domModel => domModel.performSearch(whitespaceTrimmedQuery, showUAShadowDOM));
     void Promise.all(promises).then(resultCounts => {
       this.searchResults = [];
@@ -952,9 +960,8 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     const {showPanel = true, focusNode = false, highlightInOverlay = true} = opts ?? {};
     this.omitDefaultSelection = true;
 
-    const node = Common.Settings.Settings.instance().moduleSetting('show-ua-shadow-dom').get() ?
-        nodeToReveal :
-        this.leaveUserAgentShadowDOM(nodeToReveal);
+    const node = this.#settings.moduleSetting('show-ua-shadow-dom').get() ? nodeToReveal :
+                                                                            this.leaveUserAgentShadowDOM(nodeToReveal);
     if (highlightInOverlay) {
       node.highlightForTwoSeconds();
     }
@@ -1167,7 +1174,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
       return;
     }  // We can't reparent extension iframes.
 
-    const position = Common.Settings.Settings.instance().moduleSetting('sidebar-position').get();
+    const position = this.#settings.moduleSetting('sidebar-position').get();
     let splitMode = SplitMode.HORIZONTAL;
     if (position === 'right' || (position === 'auto' && this.splitWidget.element.offsetWidth > 680)) {
       splitMode = SplitMode.VERTICAL;
@@ -1508,7 +1515,7 @@ export class ElementsActionDelegate implements UI.ActionRegistration.ActionDeleg
         ElementsPanel.instance().toggleAccessibilityTree();
         return true;
       case 'elements.toggle-word-wrap': {
-        const setting = Common.Settings.Settings.instance().moduleSetting<boolean>('dom-word-wrap');
+        const setting = ElementsPanel.instance().settings.moduleSetting<boolean>('dom-word-wrap');
         setting.set(!setting.get());
         return true;
       }

package/front_end/panels/elements/elements-meta.ts

@@ -186,9 +186,10 @@ UI.ViewManager.registerViewExtension({
   order: 10,
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
   hasToolbar: false,
-  async loadView() {
+  async loadView(universe) {
     const Elements = await loadElementsModule();
-    return Elements.ElementsPanel.ElementsPanel.instance();
+    const {targetManager, settings} = universe;
+    return Elements.ElementsPanel.ElementsPanel.instance({forceNew: null, targetManager, settings});
   },
 });
 

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: 0ace4caef4948b4cbf54725b4133cb02bd286e24
+Revision: 53dca21fdb660ead59f15a05a34d6fe08bd1dd35
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/package.json

@@ -92,5 +92,5 @@
     "webidl2": "24.5.0",
     "yargs": "17.7.2"
   },
-  "version": "1.0.1656291"
+  "version": "1.0.1656897"
 }