chrome-devtools-frontend 1.0.1538310 → 1.0.1539728

package/front_end/entrypoints/lighthouse_worker/LighthouseWorkerService.ts

@@ -2,8 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as ProtocolClient from '../../core/protocol_client/protocol_client.js';
 import * as Root from '../../core/root/root.js';
-import type * as SDK from '../../core/sdk/sdk.js';
 import * as PuppeteerService from '../../services/puppeteer/puppeteer.js';
 import * as ThirdPartyWeb from '../../third_party/third-party-web/third-party-web.js';
 
@@ -12,19 +12,12 @@ function disableLoggingForTest(): void {
 }
 
 /**
- * ConnectionProxy is a SDK interface, but the implementation has no knowledge it's a parallelConnection.
- * The CDP traffic is smuggled back and forth by the system described in LighthouseProtocolService
+ * WorkerConnectionTransport is a DevTools `ConnectionTransport` implementation that talks
+ * CDP via web worker postMessage. The system is described in LighthouseProtocolService.
  */
-class ConnectionProxy implements SDK.Connections.ParallelConnectionInterface {
-  sessionId: string;
-  onMessage: ((arg0: Object) => void)|null;
-  onDisconnect: ((arg0: string) => void)|null;
-
-  constructor(sessionId: string) {
-    this.sessionId = sessionId;
-    this.onMessage = null;
-    this.onDisconnect = null;
-  }
+class WorkerConnectionTransport implements ProtocolClient.ConnectionTransport.ConnectionTransport {
+  onMessage: ((arg0: Object) => void)|null = null;
+  onDisconnect: ((arg0: string) => void)|null = null;
 
   setOnMessage(onMessage: (arg0: Object|string) => void): void {
     this.onMessage = onMessage;
@@ -34,14 +27,6 @@ class ConnectionProxy implements SDK.Connections.ParallelConnectionInterface {
     this.onDisconnect = onDisconnect;
   }
 
-  getOnDisconnect(): (((arg0: string) => void)|null) {
-    return this.onDisconnect;
-  }
-
-  getSessionId(): string {
-    return this.sessionId;
-  }
-
   sendRawMessage(message: string): void {
     notifyFrontendViaWorkerMessage('sendProtocolMessage', {message});
   }
@@ -53,7 +38,7 @@ class ConnectionProxy implements SDK.Connections.ParallelConnectionInterface {
   }
 }
 
-let cdpConnection: ConnectionProxy|undefined;
+let cdpTransport: WorkerConnectionTransport|undefined;
 let endTimespan: (() => unknown)|undefined;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -98,11 +83,15 @@ async function invokeLH(action: string, args: any): Promise<unknown> {
     self.thirdPartyWeb.provideThirdPartyWeb(ThirdPartyWeb.ThirdPartyWeb);
 
     const {rootTargetId, mainSessionId} = args;
-    cdpConnection = new ConnectionProxy(mainSessionId);
+    cdpTransport = new WorkerConnectionTransport();
+    // TODO(crbug.com/453469270): Use "DevToolsCDPConnection" once we split SessionRouter into
+    //                            a connection handling part and a session handling part.
+    const connection = new ProtocolClient.InspectorBackend.SessionRouter(cdpTransport);
     puppeteerHandle =
         await PuppeteerService.PuppeteerConnection.PuppeteerConnectionHelper.connectPuppeteerToConnectionViaTab({
-          connection: cdpConnection,
-          rootTargetId,
+          connection,
+          targetId: rootTargetId,
+          sessionId: mainSessionId,
           // Lighthouse can only audit normal pages.
           isPageTargetCallback: targetInfo => targetInfo.type === 'page',
         });
@@ -212,7 +201,7 @@ async function onFrontendMessage(event: MessageEvent): Promise<void> {
       break;
     }
     case 'dispatchProtocolMessage': {
-      cdpConnection?.onMessage?.(messageFromFrontend.args.message);
+      cdpTransport?.onMessage?.(messageFromFrontend.args.message);
       break;
     }
     default: {

package/front_end/entrypoints/node_app/{NodeConnectionsPanel.ts → app/NodeConnectionsPanel.ts}

@@ -3,12 +3,12 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
-import type * as Common from '../../core/common/common.js';
-import * as Host from '../../core/host/host.js';
-import * as i18n from '../../core/i18n/i18n.js';
-import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as uiI18n from '../../ui/i18n/i18n.js';
-import * as UI from '../../ui/legacy/legacy.js';
+import type * as Common from '../../../core/common/common.js';
+import * as Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
+import * as uiI18n from '../../../ui/i18n/i18n.js';
+import * as UI from '../../../ui/legacy/legacy.js';
 
 import nodeConnectionsPanelStyles from './nodeConnectionsPanel.css.js';
 
@@ -36,10 +36,10 @@ const UIStrings = {
    */
   networkAddressEgLocalhost: 'Network address (e.g. localhost:9229)',
 } as const;
-const str_ = i18n.i18n.registerUIStrings('entrypoints/node_app/NodeConnectionsPanel.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('entrypoints/node_app/app/NodeConnectionsPanel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const nodejsIconUrl = new URL('../../Images/node-stack-icon.svg', import.meta.url).toString();
+const nodejsIconUrl = new URL('../../../Images/node-stack-icon.svg', import.meta.url).toString();
 
 export class NodeConnectionsPanel extends UI.Panel.Panel {
   #config!: Adb.Config;

package/front_end/entrypoints/node_app/{NodeMain.ts → app/NodeMain.ts}

@@ -2,15 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Common from '../../core/common/common.js';
-import * as Host from '../../core/host/host.js';
-import * as i18n from '../../core/i18n/i18n.js';
-import type * as Platform from '../../core/platform/platform.js';
-import type * as ProtocolClient from '../../core/protocol_client/protocol_client.js';
-import * as SDK from '../../core/sdk/sdk.js';
-import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
-import type * as Protocol from '../../generated/protocol.js';
-import * as Components from '../../ui/legacy/components/utils/utils.js';
+import type * as Common from '../../../core/common/common.js';
+import * as Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import type * as Platform from '../../../core/platform/platform.js';
+import type * as ProtocolClient from '../../../core/protocol_client/protocol_client.js';
+import * as SDK from '../../../core/sdk/sdk.js';
+import type * as ProtocolProxyApi from '../../../generated/protocol-proxy-api.js';
+import type * as Protocol from '../../../generated/protocol.js';
+import * as Components from '../../../ui/legacy/components/utils/utils.js';
 
 const UIStrings = {
   /**
@@ -28,7 +28,7 @@ const UIStrings = {
    */
   NodejsTitleS: 'DevTools - Node.js: {PH1}',
 } as const;
-const str_ = i18n.i18n.registerUIStrings('entrypoints/node_app/NodeMain.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('entrypoints/node_app/app/NodeMain.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let nodeMainImplInstance: NodeMainImpl;
 
@@ -119,7 +119,7 @@ export class NodeChildTargetManager extends SDK.SDKModel.SDKModel<void> implemen
       const connection = new NodeConnection(this.#targetAgent, sessionId);
       this.#childConnections.set(sessionId, connection);
       target = this.#targetManager.createTarget(
-          targetInfo.targetId, name, SDK.Target.Type.NODE, this.#parentTarget, undefined, undefined, connection);
+          targetInfo.targetId, name, SDK.Target.Type.NODE, null, undefined, undefined, connection);
     }
     this.#childTargets.set(sessionId, target);
     void target.runtimeAgent().invoke_runIfWaitingForDebugger();

package/front_end/entrypoints/node_app/app/app.ts

@@ -0,0 +1,6 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+export * as NodeConnectionsPanel from './NodeConnectionsPanel.js';
+export * as NodeMain from './NodeMain.js';

package/front_end/entrypoints/node_app/node_app.ts

@@ -13,8 +13,10 @@ import type * as Sources from '../../panels/sources/sources.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Main from '../main/main.js';
 
-import {NodeConnectionsPanel} from './NodeConnectionsPanel.js';  // eslint-disable-line @devtools/es-modules-import
-import {NodeMainImpl} from './NodeMain.js';                      // eslint-disable-line @devtools/es-modules-import
+import * as App from './app/app.js';
+
+const {NodeConnectionsPanel} = App.NodeConnectionsPanel;
+const {NodeMainImpl} = App.NodeMain;
 
 const UIStrings = {
   /**

package/front_end/generated/{InspectorBackendCommands.js → InspectorBackendCommands.ts}

@@ -3,41 +3,23 @@
 // found in the LICENSE file.
 // File is generated by scripts/build/code_generator_frontend.py
 
-/**
- * @typedef {{
- *  registerCommand: function(
- *      string&any,
- *      !Array.<!{
- *          name: string,
- *          type: string,
- *          optional: boolean,
- *          description: string,
- *          typeRef: string | null
- *      }>,
- *      !Array.<string>,
- *      string
- *  ): void,
- *  registerEnum: function(string&any, !Object<string, string>): void,
- *  registerEvent: function(string&any, !Array<string>): void,
- *  registerType: function(
- *      string&any,
- *      !Array.<!{
- *          name: string,
- *          type: string,
- *          optional: boolean,
- *          description: string,
- *          typeRef: string | null
- *      }>
- *  ): void,
- * }}
- */
-// @ts-expect-error typedef
-export let InspectorBackendAPI;
 
-/**
- * @param {!InspectorBackendAPI} inspectorBackend
- */
-export function registerCommands(inspectorBackend) {
+export interface CommandParameter {
+  name: string;
+  type: string;
+  optional: boolean;
+  description: string;
+  typeRef: string|null;
+}
+
+export interface InspectorBackendAPI {
+  registerCommand(command: string, parameters: CommandParameter[], replayArgs: string[], description: string): void;
+  registerEnum(type: string, values: Record<string, string>): void;
+  registerEvent(event: string, params: string[]): void;
+  registerType(type: string, parameters: CommandParameter[]): void;
+}
+
+export function registerCommands(inspectorBackend: InspectorBackendAPI): void {
 
 
 // Accessibility.

package/front_end/models/trace/handlers/NetworkRequestsHandler.ts

@@ -32,6 +32,7 @@ export interface TraceEventsForNetworkRequest {
   resourceFinish?: Types.Events.ResourceFinish;
   receivedData?: Types.Events.ResourceReceivedData[];
   resourceMarkAsCached?: Types.Events.ResourceMarkAsCached;
+  preloadRenderBlockingStatusChange?: Types.Events.PreloadRenderBlockingStatusChangeEvent[];
 }
 
 export interface WebSocketTraceDataForFrame {
@@ -164,6 +165,10 @@ export function handleEvent(event: Types.Events.Event): void {
     return;
   }
 
+  if (Types.Events.isPreloadRenderBlockingStatusChangeEvent(event)) {
+    storeTraceEventWithRequestId(event.args.data.requestId, 'preloadRenderBlockingStatusChange', [event]);
+  }
+
   if (Types.Events.isWebSocketCreate(event) || Types.Events.isWebSocketInfo(event) ||
       Types.Events.isWebSocketTransfer(event)) {
     const identifier = event.args.data.identifier;
@@ -487,13 +492,24 @@ export async function finalize(): Promise<void> {
         Types.Timing.Micro(0);
 
     // Finally get some of the general data from the trace events.
-    const {frame, url, renderBlocking} = finalSendRequest.args.data;
+    const {frame, url, renderBlocking: sendRequestIsRenderBlocking} = finalSendRequest.args.data;
     const {encodedDataLength, decodedBodyLength} =
         request.resourceFinish ? request.resourceFinish.args.data : {encodedDataLength: 0, decodedBodyLength: 0};
     const parsedUrl = new URL(url);
     const isHttps = parsedUrl.protocol === 'https:';
     const requestingFrameUrl =
         Helpers.Trace.activeURLForFrameAtTime(frame, finalSendRequest.ts, rendererProcessesByFrame) || '';
+
+    // A resource that is preloaded (and not marked as render blocking) can
+    // become render blocked later via a PreloadRenderBlockingStatusChange. In
+    // this case, we take the render blocking value of the last
+    // PreloadRenderBlockingStatusChange for this request.
+    const preloadRenderBlockingStatusChange =
+        request.preloadRenderBlockingStatusChange?.at(-1)?.args.data.renderBlocking;
+
+    // In the event the property isn't set, assume non-blocking.
+    const isRenderBlocking = preloadRenderBlockingStatusChange ?? sendRequestIsRenderBlocking ?? 'non_blocking';
+
     // Construct a synthetic trace event for this network request.
     const networkEvent =
         Helpers.SyntheticEvents.SyntheticEventsManager.registerSyntheticEvent<Types.Events.SyntheticNetworkRequest>({
@@ -535,8 +551,7 @@ export async function finalize(): Promise<void> {
               initialPriority,
               protocol: request.receiveResponse?.args.data.protocol ?? 'unknown',
               redirects,
-              // In the event the property isn't set, assume non-blocking.
-              renderBlocking: renderBlocking ?? 'non_blocking',
+              renderBlocking: isRenderBlocking,
               requestId,
               requestingFrameUrl,
               requestMethod: finalSendRequest.args.data.requestMethod,

package/front_end/models/trace/types/TraceEvents.ts

@@ -3142,6 +3142,8 @@ export const enum Name {
   USER_TIMING_MEASURE = 'UserTiming::Measure',
 
   LINK_PRECONNECT = 'LinkPreconnect',
+
+  PRELOAD_RENDER_BLOCKING_STATUS_CHANGE = 'PreloadRenderBlockingStatusChange',
 }
 
 /**
@@ -3275,3 +3277,20 @@ export function isAnyScriptSourceEvent(event: Event): event is RundownScriptSour
     RundownScriptStub {
   return event.cat === 'disabled-by-default-devtools.v8-source-rundown-sources';
 }
+
+export interface PreloadRenderBlockingStatusChangeEvent extends Instant {
+  name: Name.PRELOAD_RENDER_BLOCKING_STATUS_CHANGE;
+  cat: 'devtools.timeline';
+  args: Args&{
+    data: {
+      requestId: string,
+      url: string,
+      renderBlocking?: RenderBlocking,
+    },
+  };
+}
+
+export function isPreloadRenderBlockingStatusChangeEvent(event: Event):
+    event is PreloadRenderBlockingStatusChangeEvent {
+  return event.name === Name.PRELOAD_RENDER_BLOCKING_STATUS_CHANGE;
+}

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -32,9 +32,9 @@ import {
   type ImageInputData,
   type ModelChatMessage,
   type Props as ChatViewProps,
-  State as ChatViewState,
   type Step
 } from './components/ChatView.js';
+import {DisabledWidget} from './components/DisabledWidget.js';
 import {ExploreWidget} from './components/ExploreWidget.js';
 import {MarkdownRendererWithCodeBlock} from './components/MarkdownRendererWithCodeBlock.js';
 import {PerformanceAgentMarkdownRenderer} from './components/PerformanceAgentMarkdownRenderer.js';
@@ -296,7 +296,17 @@ interface ToolbarViewInput {
   showActiveConversationActions: boolean;
 }
 
-export type ViewInput = ChatViewProps&ToolbarViewInput;
+export const enum ViewState {
+  DISABLED_VIEW = 'disabled-view',
+  CHAT_VIEW = 'chat-view',
+  EXPLORE_VIEW = 'explore-view'
+}
+
+interface PanelViewProps {
+  state: ViewState;
+}
+
+export type ViewInput = ChatViewProps&ToolbarViewInput&PanelViewProps;
 export interface PanelViewOutput {
   chatView?: ChatView;
 }
@@ -375,28 +385,41 @@ function toolbarView(input: ToolbarViewInput): Lit.LitTemplate {
 
 function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElement): void {
   // clang-format off
+  function renderState(): Lit.TemplateResult {
+    switch (input.state) {
+      case ViewState.CHAT_VIEW:
+        return html`<devtools-ai-chat-view
+          .props=${input}
+          ${Lit.Directives.ref((el: Element | undefined) => {
+            if (!el || !(el instanceof ChatView)) {
+              return;
+            }
+
+            output.chatView = el;
+          })}
+        ></devtools-ai-chat-view>`;
+      case ViewState.EXPLORE_VIEW:
+        return html`<devtools-widget
+          class="fill-panel"
+          .widgetConfig=${UI.Widget.widgetConfig(ExploreWidget)}
+        ></devtools-widget>`;
+
+      case ViewState.DISABLED_VIEW:
+        return html`<devtools-widget
+          class="fill-panel"
+          .widgetConfig=${UI.Widget.widgetConfig(DisabledWidget, {
+            aidaAvailability: input.aidaAvailability,
+          })}
+        ></devtools-widget>`;
+    }
+  }
+
   Lit.render(
     html`
       ${toolbarView(input)}
-      <div class="ai-assistance-view-container">
-        ${input.state !== ChatViewState.EXPLORE_VIEW
-          ? html` <devtools-ai-chat-view
-              .props=${input}
-              ${Lit.Directives.ref((el: Element | undefined) => {
-                if (!el || !(el instanceof ChatView)) {
-                  return;
-                }
-
-                output.chatView = el;
-              })}
-            ></devtools-ai-chat-view>`
-          : html`<devtools-widget
-              class="explore"
-              .widgetConfig=${UI.Widget.widgetConfig(ExploreWidget)}
-            ></devtools-widget>`}
-      </div>
+      <div class="ai-assistance-view-container">${renderState()}</div>
     `,
-    target,
+    target
   );
   // clang-format on
 }
@@ -528,19 +551,19 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         AiAssistanceModel.AiHistoryStorage.Events.HISTORY_DELETED, this.#onHistoryDeleted, this);
   }
 
-  #getChatUiState(): ChatViewState {
+  #getChatUiState(): ViewState {
     const blockedByAge = Root.Runtime.hostConfig.aidaAvailability?.blockedByAge === true;
 
     if (this.#aidaAvailability !== Host.AidaClient.AidaAccessPreconditions.AVAILABLE ||
         !this.#aiAssistanceEnabledSetting?.getIfNotDisabled() || blockedByAge) {
-      return ChatViewState.DISABLED_VIEW;
+      return ViewState.DISABLED_VIEW;
     }
 
     if (this.#conversation?.type) {
-      return ChatViewState.CHAT_VIEW;
+      return ViewState.CHAT_VIEW;
     }
 
-    return ChatViewState.EXPLORE_VIEW;
+    return ViewState.EXPLORE_VIEW;
   }
 
   #getAiAssistanceEnabledSetting(): Common.Settings.Setting<boolean>|undefined {
@@ -982,7 +1005,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
   #getChatInputPlaceholder(): Platform.UIString.LocalizedString {
     const state = this.#getChatUiState();
-    if (state === ChatViewState.DISABLED_VIEW || !this.#conversation) {
+    if (state === ViewState.DISABLED_VIEW || !this.#conversation) {
       return i18nString(UIStrings.followTheSteps);
     }
 
@@ -1015,7 +1038,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
   #getDisclaimerText(): Platform.UIString.LocalizedString {
     const state = this.#getChatUiState();
-    if (state === ChatViewState.DISABLED_VIEW || !this.#conversation || this.#conversation.isReadOnly) {
+    if (state === ViewState.DISABLED_VIEW || !this.#conversation || this.#conversation.isReadOnly) {
       return i18nString(UIStrings.inputDisclaimerForEmptyState);
     }
 

package/front_end/panels/ai_assistance/aiAssistancePanel.css

@@ -20,7 +20,7 @@
   align-items: center;
   overflow: hidden;
 
-  & .explore {
+  & .fill-panel {
     width: 100%;
     height: 100%;
     display: flex;

package/front_end/panels/ai_assistance/ai_assistance.ts

@@ -9,3 +9,4 @@ export * from './SelectWorkspaceDialog.js';
 export * as UserActionRow from './components/UserActionRow.js';
 export * as ExploreWidget from './components/ExploreWidget.js';
 export * as PatchWidget from './PatchWidget.js';
+export * as DisabledWidget from './components/DisabledWidget.js';