chrome-devtools-frontend 1.0.1547147 → 1.0.1548870

package/front_end/models/ai_assistance/BuiltInAi.ts

@@ -6,15 +6,12 @@ import * as Host from '../../core/host/host.js';
 import * as Root from '../../core/root/root.js';
 
 let builtInAiInstance: BuiltInAi|undefined;
-let availability: LanguageModelAvailability|undefined;
-let hasGpu: boolean|undefined;
-let isFirstRun = true;
 
 export interface LanguageModel {
   promptStreaming: (arg0: string, opts?: {
     signal?: AbortSignal,
   }) => AsyncGenerator<string>;
-  clone: () => LanguageModel;
+  clone: () => Promise<LanguageModel>;
   destroy: () => void;
 }
 
@@ -27,155 +24,112 @@ export const enum LanguageModelAvailability {
 }
 
 export class BuiltInAi {
-  #consoleInsightsSession: LanguageModel;
+  #availability: LanguageModelAvailability|null = null;
+  #hasGpu: boolean;
+  #consoleInsightsSession?: LanguageModel;
+  initDoneForTesting: Promise<void>;
 
-  static async getLanguageModelAvailability(): Promise<LanguageModelAvailability> {
+  static instance(): BuiltInAi {
+    if (builtInAiInstance === undefined) {
+      builtInAiInstance = new BuiltInAi();
+    }
+    return builtInAiInstance;
+  }
+
+  constructor() {
+    this.#hasGpu = this.#isGpuAvailable();
+    this.initDoneForTesting =
+        this.getLanguageModelAvailability().then(() => this.initialize()).then(() => this.#sendAvailabilityMetrics());
+  }
+
+  async getLanguageModelAvailability(): Promise<LanguageModelAvailability> {
     if (!Root.Runtime.hostConfig.devToolsAiPromptApi?.enabled) {
-      return LanguageModelAvailability.DISABLED;
+      this.#availability = LanguageModelAvailability.DISABLED;
+      return this.#availability;
     }
     try {
       // @ts-expect-error
-      availability = await window.LanguageModel.availability({expectedOutputs: [{type: 'text', languages: ['en']}]}) as
-          LanguageModelAvailability;
-      return availability;
+      this.#availability = await window.LanguageModel.availability(
+                               {expectedOutputs: [{type: 'text', languages: ['en']}]}) as LanguageModelAvailability;
     } catch {
-      return LanguageModelAvailability.UNAVAILABLE;
+      this.#availability = LanguageModelAvailability.UNAVAILABLE;
     }
+    return this.#availability;
   }
 
-  static cachedIsAvailable(): boolean {
-    return availability === LanguageModelAvailability.AVAILABLE &&
-        (hasGpu || Boolean(Root.Runtime.hostConfig.devToolsAiPromptApi?.allowWithoutGpu));
-  }
-
-  static isGpuAvailable(): boolean {
-    const hasGpuHelper = (): boolean => {
-      const canvas = document.createElement('canvas');
-      try {
-        const webgl = canvas.getContext('webgl');
-        if (!webgl) {
-          return false;
-        }
-        const debugInfo = webgl.getExtension('WEBGL_debug_renderer_info');
-        if (!debugInfo) {
-          return false;
-        }
-        const renderer = webgl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
-        if (renderer.includes('SwiftShader')) {
-          return false;
-        }
-      } catch {
+  #isGpuAvailable(): boolean {
+    const canvas = document.createElement('canvas');
+    try {
+      const webgl = canvas.getContext('webgl');
+      if (!webgl) {
         return false;
       }
-      return true;
-    };
-
-    if (hasGpu !== undefined) {
-      return hasGpu;
+      const debugInfo = webgl.getExtension('WEBGL_debug_renderer_info');
+      if (!debugInfo) {
+        return false;
+      }
+      const renderer = webgl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
+      if (renderer.includes('SwiftShader')) {
+        return false;
+      }
+    } catch {
+      return false;
     }
-    hasGpu = hasGpuHelper();
-    return hasGpu;
+    return true;
   }
 
-  private constructor(consoleInsightsSession: LanguageModel) {
-    this.#consoleInsightsSession = consoleInsightsSession;
+  hasSession(): boolean {
+    return Boolean(this.#consoleInsightsSession);
   }
 
-  static async instance(): Promise<BuiltInAi|undefined> {
-    if (builtInAiInstance === undefined) {
-      if (isFirstRun) {
-        const languageModelAvailability = await BuiltInAi.getLanguageModelAvailability();
-        const hasGpu = BuiltInAi.isGpuAvailable();
-        if (hasGpu) {
-          switch (languageModelAvailability) {
-            case LanguageModelAvailability.UNAVAILABLE:
-              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.UNAVAILABLE_HAS_GPU);
-              break;
-            case LanguageModelAvailability.DOWNLOADABLE:
-              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DOWNLOADABLE_HAS_GPU);
-              break;
-            case LanguageModelAvailability.DOWNLOADING:
-              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DOWNLOADING_HAS_GPU);
-              break;
-            case LanguageModelAvailability.AVAILABLE:
-              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.AVAILABLE_HAS_GPU);
-              break;
-            case LanguageModelAvailability.DISABLED:
-              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DISABLED_HAS_GPU);
-              break;
-          }
-        } else {
-          switch (languageModelAvailability) {
-            case LanguageModelAvailability.UNAVAILABLE:
-              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.UNAVAILABLE_NO_GPU);
-              break;
-            case LanguageModelAvailability.DOWNLOADABLE:
-              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DOWNLOADABLE_NO_GPU);
-              break;
-            case LanguageModelAvailability.DOWNLOADING:
-              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DOWNLOADING_NO_GPU);
-              break;
-            case LanguageModelAvailability.AVAILABLE:
-              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.AVAILABLE_NO_GPU);
-              break;
-            case LanguageModelAvailability.DISABLED:
-              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DISABLED_NO_GPU);
-              break;
-          }
-        }
-        isFirstRun = false;
-        if (!Root.Runtime.hostConfig.devToolsAiPromptApi?.allowWithoutGpu && !hasGpu) {
-          return undefined;
-        }
-        if (languageModelAvailability !== LanguageModelAvailability.AVAILABLE) {
-          return undefined;
-        }
-      } else {
-        if (!Root.Runtime.hostConfig.devToolsAiPromptApi?.allowWithoutGpu && !BuiltInAi.isGpuAvailable()) {
-          return undefined;
-        }
-        if ((await BuiltInAi.getLanguageModelAvailability()) !== LanguageModelAvailability.AVAILABLE) {
-          return undefined;
-        }
-      }
+  async initialize(): Promise<void> {
+    if (!Root.Runtime.hostConfig.devToolsAiPromptApi?.allowWithoutGpu && !this.#hasGpu) {
+      return;
+    }
+    if (this.#availability !== LanguageModelAvailability.AVAILABLE) {
+      return;
+    }
+    await this.#createSession();
+  }
+
+  async #createSession(): Promise<void> {
+    try {
+      // @ts-expect-error
+      this.#consoleInsightsSession = await window.LanguageModel.create({
+        initialPrompts: [{
+          role: 'system',
+          content: `
+You are an expert web developer. Your goal is to help a human web developer who
+is using Chrome DevTools to debug a web site or web app. The Chrome DevTools
+console is showing a message which is either an error or a warning. Please help
+the user understand the problematic console message.
 
-      try {
-        // @ts-expect-error
-        const consoleInsightsSession = await window.LanguageModel.create({
-          initialPrompts: [{
-            role: 'system',
-            content: `
-  You are an expert web developer. Your goal is to help a human web developer who
-  is using Chrome DevTools to debug a web site or web app. The Chrome DevTools
-  console is showing a message which is either an error or a warning. Please help
-  the user understand the problematic console message.
-
-  Your instructions are as follows:
-    - Explain the reason why the error or warning is showing up.
-    - The explanation has a maximum length of 200 characters. Anything beyond this
-      length will be cut off. Make sure that your explanation is at most 200 characters long.
-    - Your explanation should not end in the middle of a sentence.
-    - Your explanation should consist of a single paragraph only. Do not include any
-      headings or code blocks. Only write a single paragraph of text.
-    - Your response should be concise and to the point. Avoid lengthy explanations
-      or unnecessary details.
-            `
-          }],
-          expectedInputs: [{
-            type: 'text',
-            languages: ['en'],
-          }],
-          expectedOutputs: [{
-            type: 'text',
-            languages: ['en'],
-          }],
-        }) as LanguageModel;
-        builtInAiInstance = new BuiltInAi(consoleInsightsSession);
-      } catch {
-        return undefined;
+Your instructions are as follows:
+  - Explain the reason why the error or warning is showing up.
+  - The explanation has a maximum length of 200 characters. Anything beyond this
+    length will be cut off. Make sure that your explanation is at most 200 characters long.
+  - Your explanation should not end in the middle of a sentence.
+  - Your explanation should consist of a single paragraph only. Do not include any
+    headings or code blocks. Only write a single paragraph of text.
+  - Your response should be concise and to the point. Avoid lengthy explanations
+    or unnecessary details.
+          `
+        }],
+        expectedInputs: [{
+          type: 'text',
+          languages: ['en'],
+        }],
+        expectedOutputs: [{
+          type: 'text',
+          languages: ['en'],
+        }],
+      });
+      if (this.#availability !== LanguageModelAvailability.AVAILABLE) {
+        void this.getLanguageModelAvailability();
       }
+    } catch (e) {
+      console.error('Error when creating LanguageModel session', e.message);
     }
-    return builtInAiInstance;
   }
 
   static removeInstance(): void {
@@ -183,6 +137,9 @@ export class BuiltInAi {
   }
 
   async * getConsoleInsight(prompt: string, abortController: AbortController): AsyncGenerator<string> {
+    if (!this.#consoleInsightsSession) {
+      return;
+    }
     // Clone the session to start a fresh conversation for each answer. Otherwise
     // previous dialog would pollute the context resulting in worse answers.
     let session: LanguageModel|null = null;
@@ -200,4 +157,44 @@ export class BuiltInAi {
       }
     }
   }
+
+  #sendAvailabilityMetrics(): void {
+    if (this.#hasGpu) {
+      switch (this.#availability) {
+        case LanguageModelAvailability.UNAVAILABLE:
+          Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.UNAVAILABLE_HAS_GPU);
+          break;
+        case LanguageModelAvailability.DOWNLOADABLE:
+          Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DOWNLOADABLE_HAS_GPU);
+          break;
+        case LanguageModelAvailability.DOWNLOADING:
+          Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DOWNLOADING_HAS_GPU);
+          break;
+        case LanguageModelAvailability.AVAILABLE:
+          Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.AVAILABLE_HAS_GPU);
+          break;
+        case LanguageModelAvailability.DISABLED:
+          Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DISABLED_HAS_GPU);
+          break;
+      }
+    } else {
+      switch (this.#availability) {
+        case LanguageModelAvailability.UNAVAILABLE:
+          Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.UNAVAILABLE_NO_GPU);
+          break;
+        case LanguageModelAvailability.DOWNLOADABLE:
+          Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DOWNLOADABLE_NO_GPU);
+          break;
+        case LanguageModelAvailability.DOWNLOADING:
+          Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DOWNLOADING_NO_GPU);
+          break;
+        case LanguageModelAvailability.AVAILABLE:
+          Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.AVAILABLE_NO_GPU);
+          break;
+        case LanguageModelAvailability.DISABLED:
+          Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DISABLED_NO_GPU);
+          break;
+      }
+    }
+  }
 }

package/front_end/models/ai_assistance/ChangeManager.ts

@@ -35,6 +35,15 @@ export class ChangeManager {
   readonly #stylesheetChanges = new Map<Protocol.CSS.StyleSheetId, Change[]>();
   readonly #backupStylesheetChanges = new Map<Protocol.CSS.StyleSheetId, Change[]>();
 
+  constructor() {
+    SDK.TargetManager.TargetManager.instance().addModelListener(
+        SDK.ResourceTreeModel.ResourceTreeModel,
+        SDK.ResourceTreeModel.Events.PrimaryPageChanged,
+        this.clear,
+        this,
+    );
+  }
+
   async stashChanges(): Promise<void> {
     for (const [cssModel, stylesheetMap] of this.#cssModelToStylesheetId.entries()) {
       const stylesheetIds = Array.from(stylesheetMap.values());

package/front_end/models/ai_assistance/ConversationHandler.ts

@@ -17,16 +17,14 @@ import {
   type ResponseData,
   ResponseType
 } from './agents/AiAgent.js';
-import {FileAgent} from './agents/FileAgent.js';
 import {NetworkAgent, RequestContext} from './agents/NetworkAgent.js';
-import {PerformanceAgent, type PerformanceTraceContext} from './agents/PerformanceAgent.js';
+import type {PerformanceTraceContext} from './agents/PerformanceAgent.js';
 import {NodeContext, StylingAgent} from './agents/StylingAgent.js';
 import {AiConversation} from './AiConversation.js';
 import {
   ConversationType,
 } from './AiHistoryStorage.js';
 import {getDisabledReasons} from './AiUtils.js';
-import type {ChangeManager} from './ChangeManager.js';
 
 interface ExternalStylingRequestParameters {
   conversationType: ConversationType.STYLING;
@@ -43,7 +41,6 @@ interface ExternalNetworkRequestParameters {
 export interface ExternalPerformanceAIConversationData {
   conversationHandler: ConversationHandler;
   conversation: AiConversation;
-  agent: AiAgent<unknown>;
   selected: PerformanceTraceContext;
 }
 
@@ -122,9 +119,7 @@ export class ConversationHandler extends Common.ObjectWrapper.ObjectWrapper<Even
       aidaClient: Host.AidaClient.AidaClient, aidaAvailability?: Host.AidaClient.AidaAccessPreconditions) {
     super();
     this.#aidaClient = aidaClient;
-    if (aidaAvailability) {
-      this.#aidaAvailability = aidaAvailability;
-    }
+    this.#aidaAvailability = aidaAvailability;
     this.#aiAssistanceEnabledSetting = this.#getAiAssistanceEnabledSetting();
   }
 
@@ -144,6 +139,10 @@ export class ConversationHandler extends Common.ObjectWrapper.ObjectWrapper<Even
     conversationHandlerInstance = undefined;
   }
 
+  get aidaClient(): Host.AidaClient.AidaClient {
+    return this.#aidaClient;
+  }
+
   #getAiAssistanceEnabledSetting(): Common.Settings.Setting<boolean>|undefined {
     try {
       return Common.Settings.moduleSetting('ai-assistance-enabled') as Common.Settings.Setting<boolean>;
@@ -207,8 +206,9 @@ export class ConversationHandler extends Common.ObjectWrapper.ObjectWrapper<Even
 
   async *
       handleConversationWithHistory(
-          items: AsyncIterable<ResponseData, void, void>, conversation: AiConversation|undefined):
-          AsyncGenerator<ResponseData, void, void> {
+          items: AsyncIterable<ResponseData, void, void>,
+          conversation: AiConversation|undefined,
+          ): AsyncGenerator<ResponseData, void, void> {
     for await (const data of items) {
       // We don't want to save partial responses to the conversation history.
       if (data.type !== ResponseType.ANSWER || data.complete) {
@@ -230,22 +230,22 @@ export class ConversationHandler extends Common.ObjectWrapper.ObjectWrapper<Even
         [],
         aiAgent.id,
         /* isReadOnly */ true,
+        this.#aidaClient,
+        undefined,
         /* isExternal */ true,
     );
-    return yield* this.#doExternalConversation({conversation, aiAgent, prompt, selected});
+    return yield* this.#doExternalConversation({conversation, prompt, selected});
   }
 
   async * #doExternalConversation(opts: {
     conversation: AiConversation,
-    aiAgent: AiAgent<unknown>,
     prompt: string,
     selected: NodeContext|PerformanceTraceContext|RequestContext|null,
   }): AsyncGenerator<ExternalRequestResponse, ExternalRequestResponse> {
-    const {conversation, aiAgent, prompt, selected} = opts;
-    const generator = aiAgent.run(prompt, {selected});
-    const generatorWithHistory = this.handleConversationWithHistory(generator, conversation);
+    const {conversation, prompt, selected} = opts;
+    const generator = conversation.run(prompt, {selected});
     const devToolsLogs: object[] = [];
-    for await (const data of generatorWithHistory) {
+    for await (const data of generator) {
       if (data.type !== ResponseType.ANSWER || data.complete) {
         devToolsLogs.push(data);
       }
@@ -274,7 +274,10 @@ export class ConversationHandler extends Common.ObjectWrapper.ObjectWrapper<Even
 
   async #handleExternalStylingConversation(prompt: string, selector = 'body'):
       Promise<AsyncGenerator<ExternalRequestResponse, ExternalRequestResponse>> {
-    const stylingAgent = this.createAgent(ConversationType.STYLING);
+    const stylingAgent = new StylingAgent({
+      aidaClient: this.#aidaClient,
+      serverSideLoggingEnabled: isAiAssistanceServerSideLoggingEnabled(),
+    });
     const node = await inspectElementBySelector(selector);
     if (node) {
       await node.setAsInspectedNode();
@@ -292,7 +295,6 @@ export class ConversationHandler extends Common.ObjectWrapper.ObjectWrapper<Even
       Promise<AsyncGenerator<ExternalRequestResponse, ExternalRequestResponse>> {
     return this.#doExternalConversation({
       conversation: data.conversation,
-      aiAgent: data.agent,
       prompt,
       selected: data.selected,
     });
@@ -300,7 +302,10 @@ export class ConversationHandler extends Common.ObjectWrapper.ObjectWrapper<Even
 
   async #handleExternalNetworkConversation(prompt: string, requestUrl: string):
       Promise<AsyncGenerator<ExternalRequestResponse, ExternalRequestResponse>> {
-    const networkAgent = this.createAgent(ConversationType.NETWORK);
+    const networkAgent = new NetworkAgent({
+      aidaClient: this.#aidaClient,
+      serverSideLoggingEnabled: isAiAssistanceServerSideLoggingEnabled(),
+    });
     const request = await inspectNetworkRequestByUrl(requestUrl);
     if (!request) {
       return this.#generateErrorResponse(`Can't find request with the given selector ${requestUrl}`);
@@ -316,36 +321,6 @@ export class ConversationHandler extends Common.ObjectWrapper.ObjectWrapper<Even
       selected: new RequestContext(request, calculator),
     });
   }
-
-  createAgent(conversationType: ConversationType, changeManager?: ChangeManager): AiAgent<unknown> {
-    const options = {
-      aidaClient: this.#aidaClient,
-      serverSideLoggingEnabled: isAiAssistanceServerSideLoggingEnabled(),
-    };
-    let agent: AiAgent<unknown>;
-    switch (conversationType) {
-      case ConversationType.STYLING: {
-        agent = new StylingAgent({
-          ...options,
-          changeManager,
-        });
-        break;
-      }
-      case ConversationType.NETWORK: {
-        agent = new NetworkAgent(options);
-        break;
-      }
-      case ConversationType.FILE: {
-        agent = new FileAgent(options);
-        break;
-      }
-      case ConversationType.PERFORMANCE: {
-        agent = new PerformanceAgent(options);
-        break;
-      }
-    }
-    return agent;
-  }
 }
 
 export const enum ConversationHandlerEvents {

package/front_end/models/ai_assistance/agents/AiAgent.ts

@@ -486,11 +486,14 @@ export abstract class AiAgent<T> {
   }
 
   async *
-      run(initialQuery: string, options: {
-        selected: ConversationContext<T>|null,
-        signal?: AbortSignal,
-      },
-          multimodalInput?: MultimodalInput): AsyncGenerator<ResponseData, void, void> {
+      run(
+          initialQuery: string,
+          options: {
+            selected: ConversationContext<T>|null,
+            signal?: AbortSignal,
+          },
+          multimodalInput?: MultimodalInput,
+          ): AsyncGenerator<ResponseData, void, void> {
     await options.selected?.refresh();
 
     if (options.selected) {

package/front_end/models/ai_assistance/agents/StylingAgent.ts

@@ -276,12 +276,6 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
     this.#createExtensionScope = opts.createExtensionScope ?? ((changes: ChangeManager) => {
                                    return new ExtensionScope(changes, this.id, this.context?.getItem() ?? null);
                                  });
-    SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.ResourceTreeModel.ResourceTreeModel,
-        SDK.ResourceTreeModel.Events.PrimaryPageChanged,
-        this.onPrimaryPageChanged,
-        this,
-    );
 
     this.declareFunction<{
       elements: string[],
@@ -418,10 +412,6 @@ const data = {
     });
   }
 
-  onPrimaryPageChanged(): void {
-    void this.#changes.clear();
-  }
-
   async generateObservation(
       action: string,
       {

package/front_end/models/formatter/FormatterWorkerPool.ts

@@ -2,7 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Common from '../../core/common/common.js';
+import type * as PlatformApi from '../../core/platform/api/api.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as FormatterActions from '../../entrypoints/formatter_worker/FormatterActions.js';  // eslint-disable-line @devtools/es-modules-import
 
 export {DefinitionKind, ScopeKind, type ScopeTreeNode} from '../../entrypoints/formatter_worker/FormatterActions.js';
@@ -11,7 +12,7 @@ let formatterWorkerPoolInstance: FormatterWorkerPool|undefined;
 
 export class FormatterWorkerPool {
   private taskQueue: Task[];
-  private workerTasks: Map<Common.Worker.WorkerWrapper, Task|null>;
+  private workerTasks: Map<PlatformApi.HostRuntime.Worker, Task|null>;
 
   constructor() {
     this.taskQueue = [];
@@ -42,9 +43,9 @@ export class FormatterWorkerPool {
     formatterWorkerPoolInstance = undefined;
   }
 
-  private createWorker(): Common.Worker.WorkerWrapper {
-    const worker = Common.Worker.WorkerWrapper.fromURL(
-        new URL('../../entrypoints/formatter_worker/formatter_worker-entrypoint.js', import.meta.url));
+  private createWorker(): PlatformApi.HostRuntime.Worker {
+    const worker = Platform.HostRuntime.HOST_RUNTIME.createWorker(
+        new URL('../../entrypoints/formatter_worker/formatter_worker-entrypoint.js', import.meta.url).toString());
     worker.onmessage = this.onWorkerMessage.bind(this, worker);
     worker.onerror = this.onWorkerError.bind(this, worker);
     return worker;
@@ -72,7 +73,8 @@ export class FormatterWorkerPool {
     }
   }
 
-  private onWorkerMessage(worker: Common.Worker.WorkerWrapper, event: MessageEvent): void {
+  private onWorkerMessage(worker: PlatformApi.HostRuntime.Worker, event: PlatformApi.HostRuntime.WorkerMessageEvent):
+      void {
     const task = this.workerTasks.get(worker);
     if (!task) {
       return;
@@ -87,7 +89,7 @@ export class FormatterWorkerPool {
     task.callback(event.data ? event.data : null);
   }
 
-  private onWorkerError(worker: Common.Worker.WorkerWrapper, event: Event): void {
+  private onWorkerError(worker: PlatformApi.HostRuntime.Worker, event: Event): void {
     console.error(event);
     const task = this.workerTasks.get(worker);
     worker.terminate();

package/front_end/models/har/Importer.ts

@@ -248,7 +248,7 @@ export class Importer {
       }
     }
 
-    if (pageLoad && pageLoad.mainRequest === request) {
+    if (pageLoad?.mainRequest === request) {
       return Common.ResourceType.resourceTypes.Document;
     }
 

package/front_end/models/issues_manager/ContrastCheckTrigger.ts

@@ -71,7 +71,7 @@ export class ContrastCheckTrigger {
     // Otherwise, it should be triggered when the page load event fires.
     const response = await frame.resourceTreeModel().target().runtimeAgent().invoke_evaluate(
         {expression: 'document.readyState', returnByValue: true});
-    if (response.result && response.result.value === 'complete') {
+    if (response.result?.value === 'complete') {
       this.#checkContrast(frame.resourceTreeModel());
     }
   }

package/front_end/models/persistence/AutomaticFileSystemManager.ts

@@ -155,7 +155,7 @@ export class AutomaticFileSystemManager extends Common.ObjectWrapper.ObjectWrapp
     let automaticFileSystem = this.#automaticFileSystem;
     if (projectSettings.workspace) {
       const {root, uuid} = projectSettings.workspace;
-      if (automaticFileSystem === null || automaticFileSystem.root !== root || automaticFileSystem.uuid !== uuid) {
+      if (automaticFileSystem?.root !== root || automaticFileSystem.uuid !== uuid) {
         automaticFileSystem = Object.freeze({root, uuid, state: 'disconnected'});
       }
     } else if (automaticFileSystem !== null) {

package/front_end/panels/accessibility/AccessibilityNodeView.ts

@@ -327,7 +327,7 @@ export class AXNodePropertyTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   appendRelatedNodeListValueElement(value: Protocol.Accessibility.AXValue): void {
-    if (value.relatedNodes && value.relatedNodes.length === 1 && !value.value) {
+    if (value.relatedNodes?.length === 1 && !value.value) {
       this.appendRelatedNodeInline(value.relatedNodes[0]);
       return;
     }