chrome-devtools-frontend 1.0.1533544 → 1.0.1534717

package/docs/contributing/infrastructure.md

@@ -68,6 +68,27 @@ https://chromium.googlesource.com/chromium/tools/build/+/refs/heads/main/recipes
 and upload a CL for
 [`chromium/tools/build`](https://chromium.googlesource.com/chromium/tools/build/+/refs/heads/main).
 
+It's good practice to also manually test your recipes. You can test your recipe
+changes against a build that was performed with the same recipes. To do so
+follow these steps:
+- authenticate with `led auth-login`
+- select a particular build that ran with your target recipe ([example](https://ci.chromium.org/ui/p/devtools-frontend/builders/try/dtf_linux_dbg/14161))
+- got to Infra tab and collect the Buildbucket id (8700153319150087425 for the example above)
+- run `led get-build --real-build 8700153319150087425 | led edit-recipe-bundle | led edit-system -p 25 | led launch` while in your local recipe checkout
+- collect the output link to your test build and verify that you got the expected result
+
+## Pin older version of DevTools recipes to a branch
+
+Updating a recipe that depends on DevTools repo recent changes can break the
+build in beta/stable/extended branches. If those changes cannot be back-merged
+into the branches you can pin the older version of the recipe to the branches in
+infra/config.
+
+To do so update the `legacy_recipe` config in `definitions.star` with the number
+of the last branch you need the old version of the recipe to run on and with the
+revision hash of that version. Branches with number higher than the one you
+configured will run ToT recipe version. [Example](https://crrev.com/c/7003685)
+
 ## Updating test commands in the infrastructure
 
 The DevTools recipes are defined in
@@ -228,6 +249,17 @@ Below is a detailed description of what happens in such a build:
   - fail the builder if tests failed in the deflaking phase
   - otherwise report build as passing
 
+## Skip flake detection
+
+Test that are already flaky can end up being updated in CLs that do not deal
+with the original flakiness nor can be blamed for introducing or increasing the
+flakiness of the test. However CQ builder will fail in Flake Detection steps
+because they picked up the test as it was being touched.
+
+You can skip Flake Detection for your tests by adding the `Skip-Flake-Detection`
+CL footer (see example [CL](https://crrev.com/c/6994031)). Make sure you use the
+full path to your test.
+
 ### Common build failures
 
 The first place where a build usually fails is on `bot_update` and this usually

package/front_end/Images/src/justify-content-stretch.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.5 18V14H9V6H3.5V2H2V18H3.5Z" fill="black"/>
+<path d="M18 18V2H16.5V6H11V14H16.5V18H18Z" fill="black"/>
+</svg>

package/front_end/core/host/InspectorFrontendHost.ts

@@ -569,7 +569,7 @@ class InspectorFrontendAPIImpl {
   constructor() {
     for (const descriptor of EventDescriptors) {
       // @ts-expect-error Dispatcher magic
-      this[descriptor[1]] = this.dispatch.bind(this, descriptor[0], descriptor[2], descriptor[3]);
+      this[descriptor[0]] = this.dispatch.bind(this, descriptor[0], descriptor[1], descriptor[2]);
     }
   }
 

package/front_end/core/host/InspectorFrontendHostAPI.ts

@@ -6,6 +6,9 @@ import type * as Platform from '../../core/platform/platform.js';
 import type * as Common from '../common/common.js';
 import type * as Root from '../root/root.js';
 
+/**
+ * This values should match the one getting called from Chromium
+ */
 export enum Events {
   /* eslint-disable @typescript-eslint/naming-convention -- Accessed from web_tests */
   AppendedToURL = 'appendedToURL',
@@ -24,7 +27,7 @@ export enum Events {
   FileSystemsLoaded = 'fileSystemsLoaded',
   FileSystemRemoved = 'fileSystemRemoved',
   FileSystemAdded = 'fileSystemAdded',
-  FileSystemFilesChangedAddedRemoved = 'FileSystemFilesChangedAddedRemoved',
+  FileSystemFilesChangedAddedRemoved = 'fileSystemFilesChangedAddedRemoved',
   IndexingTotalWorkCalculated = 'indexingTotalWorkCalculated',
   IndexingWorked = 'indexingWorked',
   IndexingDone = 'indexingDone',
@@ -40,34 +43,34 @@ export enum Events {
 }
 
 export const EventDescriptors = [
-  [Events.AppendedToURL, 'appendedToURL', ['url']],
-  [Events.CanceledSaveURL, 'canceledSaveURL', ['url']],
-  [Events.ColorThemeChanged, 'colorThemeChanged', []],
-  [Events.ContextMenuCleared, 'contextMenuCleared', []],
-  [Events.ContextMenuItemSelected, 'contextMenuItemSelected', ['id']],
-  [Events.DeviceCountUpdated, 'deviceCountUpdated', ['count']],
-  [Events.DevicesDiscoveryConfigChanged, 'devicesDiscoveryConfigChanged', ['config']],
-  [Events.DevicesPortForwardingStatusChanged, 'devicesPortForwardingStatusChanged', ['status']],
-  [Events.DevicesUpdated, 'devicesUpdated', ['devices']],
-  [Events.DispatchMessage, 'dispatchMessage', ['messageObject']],
-  [Events.DispatchMessageChunk, 'dispatchMessageChunk', ['messageChunk', 'messageSize']],
-  [Events.EnterInspectElementMode, 'enterInspectElementMode', []],
-  [Events.EyeDropperPickedColor, 'eyeDropperPickedColor', ['color']],
-  [Events.FileSystemsLoaded, 'fileSystemsLoaded', ['fileSystems']],
-  [Events.FileSystemRemoved, 'fileSystemRemoved', ['fileSystemPath']],
-  [Events.FileSystemAdded, 'fileSystemAdded', ['errorMessage', 'fileSystem']],
-  [Events.FileSystemFilesChangedAddedRemoved, 'fileSystemFilesChangedAddedRemoved', ['changed', 'added', 'removed']],
-  [Events.IndexingTotalWorkCalculated, 'indexingTotalWorkCalculated', ['requestId', 'fileSystemPath', 'totalWork']],
-  [Events.IndexingWorked, 'indexingWorked', ['requestId', 'fileSystemPath', 'worked']],
-  [Events.IndexingDone, 'indexingDone', ['requestId', 'fileSystemPath']],
-  [Events.KeyEventUnhandled, 'keyEventUnhandled', ['event']],
-  [Events.ReloadInspectedPage, 'reloadInspectedPage', ['hard']],
-  [Events.RevealSourceLine, 'revealSourceLine', ['url', 'lineNumber', 'columnNumber']],
-  [Events.SavedURL, 'savedURL', ['url', 'fileSystemPath']],
-  [Events.SearchCompleted, 'searchCompleted', ['requestId', 'fileSystemPath', 'files']],
-  [Events.SetInspectedTabId, 'setInspectedTabId', ['tabId']],
-  [Events.SetUseSoftMenu, 'setUseSoftMenu', ['useSoftMenu']],
-  [Events.ShowPanel, 'showPanel', ['panelName']],
+  [Events.AppendedToURL, ['url']],
+  [Events.CanceledSaveURL, ['url']],
+  [Events.ColorThemeChanged, []],
+  [Events.ContextMenuCleared, []],
+  [Events.ContextMenuItemSelected, ['id']],
+  [Events.DeviceCountUpdated, ['count']],
+  [Events.DevicesDiscoveryConfigChanged, ['config']],
+  [Events.DevicesPortForwardingStatusChanged, ['status']],
+  [Events.DevicesUpdated, ['devices']],
+  [Events.DispatchMessage, ['messageObject']],
+  [Events.DispatchMessageChunk, ['messageChunk', 'messageSize']],
+  [Events.EnterInspectElementMode, []],
+  [Events.EyeDropperPickedColor, ['color']],
+  [Events.FileSystemsLoaded, ['fileSystems']],
+  [Events.FileSystemRemoved, ['fileSystemPath']],
+  [Events.FileSystemAdded, ['errorMessage', 'fileSystem']],
+  [Events.FileSystemFilesChangedAddedRemoved, ['changed', 'added', 'removed']],
+  [Events.IndexingTotalWorkCalculated, , ['requestId', 'fileSystemPath', 'totalWork']],
+  [Events.IndexingWorked, ['requestId', 'fileSystemPath', 'worked']],
+  [Events.IndexingDone, ['requestId', 'fileSystemPath']],
+  [Events.KeyEventUnhandled, ['event']],
+  [Events.ReloadInspectedPage, ['hard']],
+  [Events.RevealSourceLine, ['url', 'lineNumber', 'columnNumber']],
+  [Events.SavedURL, ['url', 'fileSystemPath']],
+  [Events.SearchCompleted, ['requestId', 'fileSystemPath', 'files']],
+  [Events.SetInspectedTabId, ['tabId']],
+  [Events.SetUseSoftMenu, ['useSoftMenu']],
+  [Events.ShowPanel, ['panelName']],
 ] as const;
 
 export interface DispatchMessageChunkEvent {
@@ -547,5 +550,6 @@ export const enum EnumeratedHistogram {
   LighthouseCategoryUsed = 'DevTools.LighthouseCategoryUsed',
   SwatchActivated = 'DevTools.SwatchActivated',
   AnimationPlaybackRateChanged = 'DevTools.AnimationPlaybackRateChanged',
+  BuiltInAiAvailability = 'DevTools.BuiltInAiAvailability',
   // LINT.ThenChange(/front_end/devtools_compatibility.js:EnumeratedHistogram)
 }

package/front_end/core/host/UserMetrics.ts

@@ -307,6 +307,16 @@ export class UserMetrics {
     InspectorFrontendHostInstance.recordCountHistogram(
         'DevTools.PerformanceAI.MainThreadActivityResponseSize', bytes, 0, 100_000, 100);
   }
+
+  builtInAiAvailability(availability: BuiltInAiAvailability): void {
+    InspectorFrontendHostInstance.recordEnumeratedHistogram(
+        EnumeratedHistogram.BuiltInAiAvailability, availability, BuiltInAiAvailability.MAX_VALUE);
+  }
+
+  consoleInsightTeaserGenerated(timeInMilliseconds: number): void {
+    InspectorFrontendHostInstance.recordPerformanceHistogram(
+        'DevTools.Insights.TeaserGenerationTime', timeInMilliseconds);
+  }
 }
 
 /**
@@ -1195,7 +1205,8 @@ export const enum SwatchType {
   LENGTH = 8,
   POSITION_TRY_LINK = 10,
   ATTR_LINK = 11,
-  MAX_VALUE = 12,
+  MASONRY = 12,
+  MAX_VALUE = 13,
 }
 
 export const enum BadgeType {
@@ -1228,3 +1239,17 @@ export const enum TimelineNavigationSetting {
   SWITCHED_TO_MODERN = 3,
   MAX_VALUE = 4,
 }
+
+export const enum BuiltInAiAvailability {
+  UNAVAILABLE_HAS_GPU = 0,
+  DOWNLOADABLE_HAS_GPU = 1,
+  DOWNLOADING_HAS_GPU = 2,
+  AVAILABLE_HAS_GPU = 3,
+  DISABLED_HAS_GPU = 4,
+  UNAVAILABLE_NO_GPU = 5,
+  DOWNLOADABLE_NO_GPU = 6,
+  DOWNLOADING_NO_GPU = 7,
+  AVAILABLE_NO_GPU = 8,
+  DISABLED_NO_GPU = 9,
+  MAX_VALUE = 10,
+}

package/front_end/core/protocol_client/CDPConnection.ts

@@ -0,0 +1,39 @@
+// 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.
+
+import type {ProtocolMapping} from '../../generated/protocol-mapping.js';
+
+/**
+ * Allows the sending and receiving of CDP commands and the notification of CDP events to observers.
+ *
+ * An instance of a CDPConnection "owns" the full transport channel and no other CDP traffic must
+ * be proxied over it. This is because each implementation needs to manage "message IDs", which
+ * would conflict with any other shared traffic.
+ */
+export interface CDPConnection {
+  send<T extends keyof ProtocolMapping.Commands>(
+      method: T, params: ProtocolMapping.Commands[T]['paramsType'][0],
+      sessionId: string|undefined): Promise<ProtocolMapping.Commands[T]['returnType']|{getError(): string}>;
+
+  observe(observer: CDPConnectionObserver): void;
+  unobserve(observer: CDPConnectionObserver): void;
+}
+
+export interface CDPConnectionObserver {
+  onEvent<T extends keyof ProtocolMapping.Events>(event: ProtocolMapping.Events[T]): void;
+  onDisconnect(reason: string): void;
+}
+
+/**
+ * The protocol monitor and test harness require inspection of raw CDP message traffic.
+ */
+export interface DebuggableCDPConnection extends CDPConnection {
+  observeMessages(observer: RawMessageObserver): void;
+  unobserveMessages(observer: RawMessageObserver): void;
+}
+
+export interface RawMessageObserver {
+  onMessageReceived(message: unknown): void;
+  onMessageSent(message: unknown): void;
+}

package/front_end/core/protocol_client/InspectorBackend.ts

@@ -75,7 +75,6 @@ interface CallbackWithDebugInfo {
 
 export class InspectorBackend {
   readonly agentPrototypes = new Map<ProtocolDomainName, AgentPrototype>();
-  #initialized = false;
   #eventParameterNamesForDomain = new Map<ProtocolDomainName, EventParameterNames>();
   readonly typeMap = new Map<QualifiedName, CommandParameter[]>();
   readonly enumMap = new Map<QualifiedName, Record<string, string>>();
@@ -114,10 +113,6 @@ export class InspectorBackend {
     console.warn(error + ': ' + JSON.stringify(messageObject));
   }
 
-  isInitialized(): boolean {
-    return this.#initialized;
-  }
-
   private agentPrototype(domain: ProtocolDomainName): AgentPrototype {
     let prototype = this.agentPrototypes.get(domain);
     if (!prototype) {
@@ -131,7 +126,6 @@ export class InspectorBackend {
       void {
     const [domain, command] = splitQualifiedName(method);
     this.agentPrototype(domain as ProtocolDomainName).registerCommand(command, parameters, replyArgs, description);
-    this.#initialized = true;
   }
 
   registerEnum(type: QualifiedName, values: Record<string, string>): void {
@@ -145,19 +139,16 @@ export class InspectorBackend {
     // @ts-expect-error globalThis global namespace pollution
     globalThis.Protocol[domain][name] = values;
     this.enumMap.set(type, values);
-    this.#initialized = true;
   }
 
   registerType(method: QualifiedName, parameters: CommandParameter[]): void {
     this.typeMap.set(method, parameters);
-    this.#initialized = true;
   }
 
   registerEvent(eventName: QualifiedName, params: string[]): void {
     const domain = eventName.split('.')[0];
     const eventParameterNames = this.getOrCreateEventParameterNamesForDomain(domain as ProtocolDomainName);
     eventParameterNames.set(eventName, params);
-    this.#initialized = true;
   }
 }
 
@@ -864,13 +855,11 @@ export class TargetBase {
  * of the invoke_enable, etc. methods that the front-end uses.
  */
 class AgentPrototype {
-  replyArgs: Record<string, string[]>;
   description = '';
   metadata: Record<string, {parameters: CommandParameter[], description: string, replyArgs: string[]}>;
   readonly domain: string;
   target!: TargetBase;
   constructor(domain: string) {
-    this.replyArgs = {};
     this.domain = domain;
     this.metadata = {};
   }
@@ -878,11 +867,6 @@ class AgentPrototype {
   registerCommand(
       methodName: UnqualifiedName, parameters: CommandParameter[], replyArgs: string[], description: string): void {
     const domainAndMethod = qualifyName(this.domain, methodName);
-    function sendMessagePromise(this: AgentPrototype, ...args: unknown[]): Promise<unknown> {
-      return AgentPrototype.prototype.sendMessageToBackendPromise.call(this, domainAndMethod, parameters, args);
-    }
-    // @ts-expect-error Method code generation
-    this[methodName] = sendMessagePromise;
     this.metadata[domainAndMethod] = {parameters, description, replyArgs};
 
     function invoke(this: AgentPrototype, request: Object|undefined = {}): Promise<Protocol.ProtocolResponseWithError> {
@@ -891,88 +875,6 @@ class AgentPrototype {
 
     // @ts-expect-error Method code generation
     this['invoke_' + methodName] = invoke;
-    this.replyArgs[domainAndMethod] = replyArgs;
-  }
-
-  private prepareParameters(
-      method: string, parameters: CommandParameter[], args: unknown[], errorCallback: (arg0: string) => void): Object
-      |null {
-    const params: Record<string, unknown> = {};
-    let hasParams = false;
-
-    for (const param of parameters) {
-      const paramName = param.name;
-      const typeName = param.type;
-      const optionalFlag = param.optional;
-
-      if (!args.length && !optionalFlag) {
-        errorCallback(
-            `Protocol Error: Invalid number of arguments for method '${method}' call. ` +
-            `It must have the following arguments ${JSON.stringify(parameters)}'.`);
-        return null;
-      }
-
-      const value = args.shift();
-      if (optionalFlag && typeof value === 'undefined') {
-        continue;
-      }
-      const expectedJSType = typeName === 'array' ? 'object' : typeName;
-      if (typeof value !== expectedJSType) {
-        errorCallback(
-            `Protocol Error: Invalid type of argument '${paramName}' for method '${method}' call. ` +
-            `It must be '${typeName}' but it is '${typeof value}'.`);
-        return null;
-      }
-
-      params[paramName] = value;
-      hasParams = true;
-    }
-
-    if (args.length) {
-      errorCallback(`Protocol Error: Extra ${args.length} arguments in a call to method '${method}'.`);
-      return null;
-    }
-
-    return hasParams ? params : null;
-  }
-
-  private sendMessageToBackendPromise(method: QualifiedName, parameters: CommandParameter[], args: unknown[]):
-      Promise<unknown> {
-    let errorMessage;
-    function onError(message: string): void {
-      console.error(message);
-      errorMessage = message;
-    }
-    const params = this.prepareParameters(method, parameters, args, onError);
-    if (errorMessage) {
-      return Promise.resolve(null);
-    }
-
-    return new Promise(resolve => {
-      // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const callback: Callback = (error: MessageError|null, result: any|null): void => {
-        if (error) {
-          if (!test.suppressRequestErrors && error.code !== DevToolsStubErrorCode && error.code !== GenericErrorCode &&
-              error.code !== ConnectionClosedErrorCode) {
-            console.error('Request ' + method + ' failed. ' + JSON.stringify(error));
-          }
-
-          resolve(null);
-          return;
-        }
-
-        const args = this.replyArgs[method];
-        resolve(result && args.length ? result[args[0]] : undefined);
-      };
-
-      const router = this.target.router();
-      if (!router) {
-        SessionRouter.dispatchConnectionError(callback, method);
-      } else {
-        router.sendMessage(this.target.sessionId, this.domain, method, params, callback);
-      }
-    });
   }
 
   private invoke(method: QualifiedName, request: Object|null): Promise<Protocol.ProtocolResponseWithError> {

package/front_end/core/root/Runtime.ts

@@ -521,6 +521,7 @@ interface DevToolsStartingStyleDebugging {
 
 interface AiPromptApi {
   enabled: boolean;
+  allowWithoutGpu: boolean;
 }
 
 interface DevToolsIndividualRequestThrottling {

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -24,7 +24,7 @@ import {
   CustomFunctionMatcher,
   defaultValueForCSSType,
   EnvFunctionMatcher,
-  FlexGridMatcher,
+  FlexGridMasonryMatcher,
   GridTemplateMatcher,
   LengthMatcher,
   LightDarkColorMatcher,
@@ -939,7 +939,7 @@ export class CSSMatchedStyles {
       new LinearGradientMatcher(),
       new AnchorFunctionMatcher(),
       new PositionAnchorMatcher(),
-      new FlexGridMatcher(),
+      new FlexGridMasonryMatcher(),
       new PositionTryMatcher(),
       new LengthMatcher(),
       new MathFunctionMatcher(),

package/front_end/core/sdk/CSSPropertyParserMatchers.ts

@@ -1072,21 +1072,28 @@ export class CustomFunctionMatcher extends matcherBase(CustomFunctionMatch) {
   }
 }
 
-export class FlexGridMatch implements Match {
-  constructor(readonly text: string, readonly node: CodeMirror.SyntaxNode, readonly isFlex: boolean) {
+export const enum LayoutType {
+  FLEX = 'flex',
+  GRID = 'grid',
+  MASONRY = 'masonry'
+}
+
+export class FlexGridMasonryMatch implements Match {
+  constructor(readonly text: string, readonly node: CodeMirror.SyntaxNode, readonly layoutType: LayoutType) {
   }
 }
 
 // clang-format off
-export class FlexGridMatcher extends matcherBase(FlexGridMatch) {
+export class FlexGridMasonryMatcher extends matcherBase(FlexGridMasonryMatch) {
   // clang-format on
   static readonly FLEX = ['flex', 'inline-flex', 'block flex', 'inline flex'];
   static readonly GRID = ['grid', 'inline-grid', 'block grid', 'inline grid'];
+  static readonly MASONRY = ['masonry', 'inline-masonry', 'block masonry', 'inline masonry'];
   override accepts(propertyName: string): boolean {
     return propertyName === 'display';
   }
 
-  override matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): FlexGridMatch|null {
+  override matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): FlexGridMasonryMatch|null {
     if (node.name !== 'Declaration') {
       return null;
     }
@@ -1098,11 +1105,14 @@ export class FlexGridMatcher extends matcherBase(FlexGridMatch) {
                        .map(node => matching.getComputedText(node).trim())
                        .filter(value => value);
     const text = values.join(' ');
-    if (FlexGridMatcher.FLEX.includes(text)) {
-      return new FlexGridMatch(matching.ast.text(node), node, true);
+    if (FlexGridMasonryMatcher.FLEX.includes(text)) {
+      return new FlexGridMasonryMatch(matching.ast.text(node), node, LayoutType.FLEX);
+    }
+    if (FlexGridMasonryMatcher.GRID.includes(text)) {
+      return new FlexGridMasonryMatch(matching.ast.text(node), node, LayoutType.GRID);
     }
-    if (FlexGridMatcher.GRID.includes(text)) {
-      return new FlexGridMatch(matching.ast.text(node), node, false);
+    if (FlexGridMasonryMatcher.MASONRY.includes(text)) {
+      return new FlexGridMasonryMatch(matching.ast.text(node), node, LayoutType.MASONRY);
     }
     return null;
   }

package/front_end/core/sdk/NetworkManager.ts

@@ -1520,22 +1520,6 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
     request.setTrustTokenOperationDoneEvent(event);
   }
 
-  subresourceWebBundleMetadataReceived(): void {
-    // TODO: remove implementation after deleting this methods from definition in Network.pdl
-  }
-
-  subresourceWebBundleMetadataError(): void {
-    // TODO: remove implementation after deleting this methods from definition in Network.pdl
-  }
-
-  subresourceWebBundleInnerResponseParsed(): void {
-    // TODO: remove implementation after deleting this methods from definition in Network.pdl
-  }
-
-  subresourceWebBundleInnerResponseError(): void {
-    // TODO: remove implementation after deleting this methods from definition in Network.pdl
-  }
-
   reportingApiReportAdded(data: Protocol.Network.ReportingApiReportAddedEvent): void {
     this.#manager.dispatchEventToListeners(Events.ReportingApiReportAdded, data.report);
   }

package/front_end/core/sdk/RehydratingConnection.ts

@@ -109,7 +109,7 @@ export class RehydratingConnection implements ProtocolClient.ConnectionTransport
     if (this.#rehydratingWindow.opener) {
       this.#rehydratingWindow.opener.postMessage({type: 'REHYDRATING_WINDOW_READY'});
     } else if (this.#rehydratingWindow !== window.top) {
-      this.#rehydratingWindow.parent.postMessage({type: 'REHYDRATING_IFRAME_READY'});
+      this.#rehydratingWindow.parent.postMessage({type: 'REHYDRATING_IFRAME_READY'}, '*');
     } else {
       this.#onConnectionLost(i18nString(UIStrings.noHostWindow));
     }