chrome-devtools-frontend 1.0.1534251 → 1.0.1535712

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/docs/contributing/issues.md

@@ -61,53 +61,29 @@ Tracker]. This section provides an overview of the Chromium DevTools specifics.
 ### Issue types
 
 [crbug] supports a wide range of different issue types, with ambiguous semantics.
-For Chromium DevTools we explicitly limit the set of types we use and give them
-well-defined semantics:
+For the Chromium DevTools component tree ([Chromium>Platform>DevTools]) we
+explicitly limit the set of types we use and give them well-defined semantics:
 
 | Issue Type           | Meaning                                    |
 | -------------------- | ------------------------------------------ |
 | **Bug**              | The behavior does not match what is supposed to occur or what is documented. The product does not work as expected. |
 | **Feature Request**  | The product works as intended but could be improved. |
 | **Internal Cleanup** | This is typically a maintenance issue. The issue has no effect on the behavior of a product, but addressing it may allow more intuitive interaction. |
-| **Vulnerability**    | Security vulnerabilities subject to the handling outlined in Google's [Vulnerability Priority Guidelines](http://go/vulnerability-slo). |
 | **Privacy Issue**    | Privacy issues subject to the handling outlined in Google's [Privacy Issue Bugs](http://go/pib-slo). |
 | **Task**             | A small unit of work.                      |
-| **Project**          | A goal-driven effort with a finite start and end, focused on creating a unique product, service, or result. |
-| **Feature**          | A collection of work that provides a specific value to the user. |
-
-The first 6 (**Bug** to **Task**) are used for day-to-day work and for issues
-reported by users. The last 2 (**Project** and **Feature**) are used to organize
-the other types of issues for the purpose of planning (ahead). We explicitly
-don't use Customer Issue, Process, Milestone, Epic, and Story within Chrome DevTools.
-
-*** promo
-**BEST PRACTICE:** Limit the nesting of **Project** and **Feature** to the bare
-minimum needed, and use **Task** for small chunks of work.
-***
-
-### Parent-Child Relationships and Blocking
-
-*** note
-**TL;DR:**
-
--  Prefer parent-child relationships to split work into smaller chunks.
--  Prefer blocking to express dependencies between independent / adjacent
-issues.
-***
+| **Vulnerability**    | Security vulnerabilities subject to the handling outlined in Google's [Vulnerability Priority Guidelines](http://go/vulnerability-slo). |
 
-When splitting up work into smaller chunks or when scoping a project that
-encompasses multiple bugs or feature requests, favor to express this via a
-parent-child relationship. Consider the example of a CSS Nesting:
+These are used to track day-to-day work, primarily issues reported by users. We
+explicitly don't use the Customer Issue, Process, and Story types, because the
+former is already sufficiently covered with **Bug**, **Privacy Issue** and
+**Vulnerability**, while the latter two are basically just special sub types of
+**Task** and this fine-grained distinction would add more confusion than good.
+Any use of the disallowed issue types will be corrected automatically by the
+[Blunderbuss](http://go/blunderbuss) bot.
 
-1.  This should start with an issue of type Feature which is about adding CSS
-    Nesting support to Chromium DevTools.
-1.  This Feature has child issues of type Task, which are concerned with adding
-    CSS Nesting support to the various parts of DevTools involved, for example
-    the CDP (Chrome DevTools Protocol), the Elements panel, the Sources panel,
-    and so forth.
-1.  Over the course of the project there'll likely also be Feature Requests and
-    Bugs from internal and external developers, which should also be parented
-    under the CSS Nesting Feature issue.
+We also explicitly disallow goal-type issues in the [Chromium>Platform>DevTools]
+component tree. Check out [go/chrome-tooling/project-management] for guidance
+how to manage goals using **Feature** and **Project** (_Googlers-only_).
 
 ### Priorities
 
@@ -265,6 +241,8 @@ refreshed every 2-4 hours, to see SLO compliance for a given lead.
   [Chrome SLO Policy]: https://b.corp.google.com/slos/1834
   [go/chrome-slo]: http://go/chrome-slo
   [go/chrome-release-slos]: http://go/chrome-release-slos
+  [go/chrome-tooling/project-management]: http://go/chrome-tooling/project-management
   [Buganizer SLO Compliance]: go/b-slo-compliance
   [TaskFlow]: http://go/chrome-devtools:taskflow
   [TaskFlow Inbox]: http://go/chrome-devtools:taskflow/inbox
+  [Chromium>Platform>DevTools]: https://issues.chromium.org/components/1457055

package/eslint.config.mjs

@@ -84,6 +84,7 @@ export default defineConfig([
 
     linterOptions: {
       reportUnusedDisableDirectives: 'error',
+      reportUnusedInlineConfigs: 'error',
     },
 
     rules: {

package/front_end/core/host/InspectorFrontendHost.ts

@@ -600,6 +600,7 @@ class InspectorFrontendAPIImpl {
     resourceLoaderStreamWrite(id, chunk);
   }
 }
+
 /**
  * Used in `front_end/devtools_compatibility.js` to verify that calls from there
  * are valid.
@@ -607,6 +608,7 @@ class InspectorFrontendAPIImpl {
 export type InspectorFrontendAPIImplMethods = keyof InspectorFrontendAPIImpl;
 
 (function(): void {
+
 function initializeInspectorFrontendHost(): void {
   if (!InspectorFrontendHostInstance) {
     // Instantiate stub for web-hosted mode if necessary.

package/front_end/core/host/InspectorFrontendHostAPI.ts

@@ -550,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);
+  }
 }
 
 /**
@@ -513,7 +523,11 @@ export enum Action {
   AiCodeCompletionError = 188,
   AttributeLinkClicked = 189,
   InsightRequestedViaTeaser = 190,
-  MAX_VALUE = 191,
+  InsightTeaserGenerationStarted = 191,
+  InsightTeaserGenerationCompleted = 192,
+  InsightTeaserGenerationAborted = 193,
+  InsightTeaserGenerationErrored = 194,
+  MAX_VALUE = 195,
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 
@@ -1229,3 +1243,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

@@ -4,6 +4,55 @@
 
 import type {ProtocolMapping} from '../../generated/protocol-mapping.js';
 
+export type CommandParams<T extends keyof ProtocolMapping.Commands> = ProtocolMapping.Commands[T]['paramsType'][0];
+export type CommandResult<T extends keyof ProtocolMapping.Commands> = ProtocolMapping.Commands[T]['returnType'];
+export type EventParams<T extends keyof ProtocolMapping.Events> = ProtocolMapping.Events[T];
+
+export interface CDPBaseMessage {
+  sessionId?: string;
+}
+
+export interface CDPCommandRequest<T extends keyof ProtocolMapping.Commands> extends CDPBaseMessage {
+  id: number;
+  method: T;
+  params: CommandParams<T>;
+}
+
+export interface CDPCommandResponse<T extends keyof ProtocolMapping.Commands> extends CDPBaseMessage {
+  id: number;
+  result: CommandResult<T>;
+}
+
+export interface CDPEvent<T extends keyof ProtocolMapping.Events> extends CDPBaseMessage {
+  method: T;
+  params: EventParams<T>;
+}
+
+/**
+ * Keep this in sync with https://source.chromium.org/chromium/chromium/src/+/main:third_party/inspector_protocol/crdtp/dispatch.h.
+ */
+export const enum CDPErrorStatus {
+  PARSE_ERROR = -32700,
+  INVALID_REQUEST = -32600,
+  METHOD_NOT_FOUND = -32601,
+  INVALID_PARAMS = -32602,
+  INTERNAL_ERROR = -32603,
+  SERVER_ERROR = -32000,
+  SESSION_NOT_FOUND = SERVER_ERROR - 1,
+}
+
+export interface CDPError extends CDPBaseMessage {
+  id?: number;
+  error: {
+    code: CDPErrorStatus,
+    message: string,
+    data?: string,
+  };
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type CDPMessage = CDPCommandRequest<any>|CDPCommandResponse<any>|CDPEvent<any>|CDPError;
+
 /**
  * Allows the sending and receiving of CDP commands and the notification of CDP events to observers.
  *
@@ -12,9 +61,8 @@ import type {ProtocolMapping} from '../../generated/protocol-mapping.js';
  * 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}>;
+  send<T extends keyof ProtocolMapping.Commands>(method: T, params: CommandParams<T>, sessionId: string|undefined):
+      Promise<CommandResult<T>|{getError(): string}>;
 
   observe(observer: CDPConnectionObserver): void;
   unobserve(observer: CDPConnectionObserver): void;
@@ -34,6 +82,6 @@ export interface DebuggableCDPConnection extends CDPConnection {
 }
 
 export interface RawMessageObserver {
-  onMessageReceived(message: unknown): void;
-  onMessageSent(message: unknown): void;
+  onMessageReceived(message: CDPMessage): void;
+  onMessageSent(message: CDPMessage): void;
 }

package/front_end/core/protocol_client/InspectorBackend.ts

@@ -855,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 = {};
   }
@@ -869,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> {
@@ -882,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/protocol_client/protocol_client.ts

@@ -2,11 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as CDPConnection from './CDPConnection.js';
 import * as ConnectionTransport from './ConnectionTransport.js';
 import * as InspectorBackend from './InspectorBackend.js';
 import * as NodeURL from './NodeURL.js';
 
 export {
+  CDPConnection,
   ConnectionTransport,
   InspectorBackend,
   NodeURL,

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