chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/scripts/ai_assistance/suite/upload_to_gcp.ts

@@ -0,0 +1,104 @@
+// 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 {execSync} from 'node:child_process';
+import crypto from 'node:crypto';
+import * as fs from 'node:fs/promises';
+import * as path from 'node:path';
+import {fileURLToPath} from 'node:url';
+
+const filename = fileURLToPath(import.meta.url);
+const dirname = path.dirname(filename);
+
+// the upload_to_google_storage_first_class.py script only lets you upload
+// folders in the immediate directory, so we run it from the `outputs`
+// directory. Remember that the outputs directory is nested and looks like
+// this:
+// scripts/ai_assistance/suite/outputs/outputs
+// We need to run the script from the first outputs directory, uploading the second.
+const CWD_TO_UPLOAD_FROM = path.join(dirname, 'outputs');
+
+const DEVTOOLS_ROOT = path.join(dirname, '..', '..', '..');
+
+const hash = await getDirectoryHash(path.join(CWD_TO_UPLOAD_FROM, 'outputs'));
+
+const output = execSync(
+    `upload_to_google_storage_first_class.py --bucket chrome-devtools-ai-evals --object-name ${hash} outputs`,
+    {cwd: CWD_TO_UPLOAD_FROM, encoding: 'utf8'});
+
+// The output contains some logs and then a JSON object that we want to use to
+// update our DEPS with the newest data.
+const jsonRegex = /{.*}/s;
+const jsonMatch = output.match(jsonRegex);
+if (!jsonMatch) {
+  console.error('ERROR: could not parse DEPs JSON out of upload response.');
+  process.exit(1);
+}
+
+console.log('Data uploaded to GCP bucket.');
+
+const data = JSON.parse(jsonMatch[0]) as {
+  path: {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    dep_type: 'gcs',
+    bucket: 'chrome-devtools-ai-evals',
+    objects: [{
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      object_name: string,
+      sha256sum: string,
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      size_bytes: number,
+      generation: number,
+    }],
+  },
+};
+
+// We now need to update the DEPs entry. We can use `gclient setdeps` which
+// expects a particular format (taken from the --help output):
+// If it is a GCS dependency, dep must be of the form path@object_name,sha256sum,size_bytes,generation
+const DEPS_PATH = 'scripts/ai_assistance/suite/outputs';
+const setDepInput = [...Object.values(data.path.objects[0])].join(',');
+
+execSync(`gclient setdep -r ${DEPS_PATH}@${setDepInput}`, {cwd: DEVTOOLS_ROOT, encoding: 'utf8', stdio: 'ignore'});
+
+console.log('DEPS file updated. You should commit this change.');
+
+/**
+ * Walks a directory and creates a hash of it based on the contents of all the
+ * files. Used to generate the name of the TAR file that gets put onto GCP. We
+ * do it like this to ensure we don't upload the same contents again.
+ */
+async function getDirectoryHash(directoryPath: string): Promise<string> {
+  const files: string[] = [];
+
+  async function walk(currentPath: string) {
+    const items = await fs.readdir(currentPath, {withFileTypes: true});
+
+    for (const item of items) {
+      const fullPath = path.join(currentPath, item.name);
+      if (item.isDirectory()) {
+        await walk(fullPath);
+      } else if (item.name.endsWith('.json')) {
+        files.push(fullPath);
+      }
+    }
+  }
+
+  await walk(directoryPath);
+  // Sort paths for a consistent hash
+  files.sort();
+
+  const hasher = crypto.createHash('sha256');
+  for (const filePath of files) {
+    // Get a hash of the file's content
+    const fileContent = await fs.readFile(filePath);
+    const fileHash = crypto.createHash('sha256').update(fileContent).digest('hex');
+
+    // Combine the relative path and file hash
+    const relativePath = path.relative(directoryPath, filePath);
+    hasher.update(`${relativePath}:${fileHash}`);
+  }
+
+  return hasher.digest('hex');
+}

package/scripts/ai_assistance/tsconfig.json

@@ -10,5 +10,5 @@
     "noEmit": true,
     "allowImportingTsExtensions": true,
   },
-  "include": ["auto-run/**/*"]
+  "include": ["auto-run/**/*", "suite/**/*"]
 }

package/scripts/ai_assistance/types.d.ts

@@ -2,9 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// We use ts-ignore here because the error is about the imported file not being
+// part of this project. We do not want to make it part of the project & start
+// pulling in half of DevTools, so we import the types but ignore the error.
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import type {AidaRequest} from '../../front_end/core/host/AidaClient.ts';
+import type {DoConversationRequest, DoConversationResponse} from '../../front_end/core/host/AidaClient.ts';
+
+export type {RpcGlobalId} from '../../front_end/core/host/AidaClient.ts';
 
 declare global {
   interface Window {
@@ -44,8 +49,8 @@ export interface ExecutedExample {
  * The result of making a single request to Aida.
  */
 export interface IndividualPromptRequestResponse {
-  request: AidaRequest|string;
-  response: string|object;
+  request: string|DoConversationRequest;
+  aidaResponse: string|DoConversationResponse;
   exampleId: string;
   /** Automatically computed score [0-1]. */
   score?: number;

package/scripts/build/assert_grd.py

@@ -42,7 +42,7 @@ def main(argv):
             print(
                 "File " + generated_file +
                 " is not listed in config/gni/devtools_grd_files.gni." +
-                " Either add the file to the grd_files_release_sources/grd_files_debug_sources,"
+                " Either add the file to the grd_files_bundled_sources/grd_files_unbundled_sources,"
                 + " or remove the generated file from an action.\n")
 
             return_code = 1

package/scripts/build/compress_files.js

@@ -17,8 +17,13 @@ async function readTextFile(filename) {
   return pfs.readFile(filename, 'utf8');
 }
 
-function fileExists(filename) {
-  return fs.existsSync(filename);
+async function fileExists(filename) {
+  try {
+    await pfs.access(filename);
+    return true;
+  } catch {
+    return false;
+  }
 }
 
 async function writeTextFile(filename, data) {
@@ -61,10 +66,10 @@ async function brotli(sourceData, compressedFilename) {
 async function compressFile(filename) {
   const compressedFilename = filename + '.compressed';
   const hashFilename = filename + '.hash';
-  const prevHash = fileExists(hashFilename) ? await readTextFile(hashFilename) : '';
+  const prevHash = await fileExists(hashFilename) ? await readTextFile(hashFilename) : '';
   const sourceData = await readBinaryFile(filename);
   const currHash = sha1(sourceData);
-  if (prevHash !== currHash) {
+  if (prevHash !== currHash || !await fileExists(compressedFilename)) {
     await writeTextFile(hashFilename, currHash);
     await brotli(sourceData, compressedFilename);
   }

package/scripts/build/cross_reference_ninja_and_tsc.js

@@ -15,8 +15,8 @@ const cwd = process.cwd();
 /**
  * Execs a command.
  *
- * @param {string} cmd
- * @return {string}
+ * @param cmd
+ * @returns
  */
 async function exec(cmd) {
   const env = process.env;
@@ -42,12 +42,12 @@ async function exec(cmd) {
 
 /**
  *
- * @param {string} buildDir
- * @param {string} gnTarget
+ * @param buildDir
+ * @param gnTarget
  */
 async function buildTargetInfo(buildDir, gnTarget) {
   /**
-   * @param {string} outputList
+   * @param outputList
    */
   const flattenOutput = outputList => {
     try {

package/scripts/build/devtools_plugin.js

@@ -31,8 +31,8 @@ const path = require('path');
  *
  * Now, the first path does *not* start with the second one, as expected.
  *
- * @param {string} file
- * @return {string}
+ * @param file
+ * @returns
  */
 function dirnameWithSeparator(file) {
   return path.dirname(file) + path.sep;
@@ -113,6 +113,13 @@ function devtoolsPlugin(source, importer) {
     };
   }
 
+  if (importedFileDirectory.includes(path.join('front_end', 'third_party', 'source-map-scopes-codec', 'package'))) {
+    return {
+      id: importedFilelocation,
+      external: false,
+    };
+  }
+
   const importedFileName = path.basename(importedFilelocation, '.js');
   const importedFileParentDirectory = path.basename(path.dirname(importedFilelocation));
   const isExternal = importedFileName === importedFileParentDirectory;

package/scripts/build/esbuild.js

@@ -48,6 +48,9 @@ esbuild
       sourcemap: useSourceMaps,
     })
     .catch(err => {
-      console.error('failed to run esbuild:', err);
+      console.error('Failed to run esbuild:', err);
+      console.error(
+          '\nIf error includes `Host version "X" does not match binary version "Y", you need to run `gclient sync`',
+      );
       process.exit(1);
     });

package/scripts/build/generate_html_entrypoint.js

@@ -9,10 +9,11 @@ const {hideBin} = require('yargs/helpers');
 
 const {writeIfChanged} = require('./ninja/write-if-changed.js');
 
-const {template, outDirectory, entrypoints} = yargs(
-                                                  hideBin(process.argv),
-                                                  )
-                                                  .argv;
+const {
+  template,
+  outDirectory,
+  entrypoints,
+} = yargs(hideBin(process.argv)).parseSync();
 
 if (!template) {
   throw new Error(

package/scripts/build/ninja/README.md

@@ -161,13 +161,13 @@ If you are adding a new file to the codebase, you must update this file else you
 
 ### Entrypoints
 
-All entrypoints are listed in `grd_files_release_sources` specified in `/config/gni/devtools_grd_files.gni`. If you create a new module and thus a new entrypoint, you must add it to this list.
+All entrypoints are listed in `grd_files_bundled_sources` specified in `/config/gni/devtools_grd_files.gni`. If you create a new module and thus a new entrypoint, you must add it to this list.
 
 > Rule: in both release and debug builds, entrypoints are always included in the GRD file.
 
 ### Module implementation files
 
-All implementation files for components are listed in `grd_files_debug_sources` specified in `/config/gni/devtools_grd_files.gni`. If you create a new file within a module, you must add it to this list.
+All implementation files for components are listed in `grd_files_unbundled_sources` specified in `/config/gni/devtools_grd_files.gni`. If you create a new file within a module, you must add it to this list.
 
 > Rule: the implementation files are only present in the GRD file in a debug build, because the release build bundles all files into the respective entrypoint.
 
@@ -188,4 +188,3 @@ Since GN has no notion of a "root" folder for DevTools, computation of sub-folde
 Additionally, GN is a [timestamp-based build system](https://gn.googlesource.com/gn/+/master/docs/reference.md#target-declarations-action_declare-a-target-that-runs-a-script-a-single-time-outputs) when checking for correctness.
 This means that you want to avoid writing to the file system if the content stays the same.
 For Node scripts, use the `writeIfChanged` function from [write-if-changed.js](./write-if-changed.js) to integrate nicely with GN.
-

package/scripts/build/ninja/bundle.gni

@@ -6,32 +6,15 @@ import("../../../scripts/build/typescript/typescript.gni")
 import("./node.gni")
 import("./vars.gni")
 
-declare_args() {
-  # If this is enabled, devtools build uses esbuild instead of rollup.js to
-  # bundle JavaScript files.
-  devtools_fast_bundle = devtools_skip_typecheck
-
-  # If this is enabled, we will emit source maps for the entrypoint bundles.
-  # Since we only bundle release builds, this flag can't be used with
-  # is_debug = true.
-  # Note that this flag works regardless of the devtools_skip_typecheck or
-  # devtools_fast_bundle GN arg. Both rollup.js or ESBuild will emit source
-  # maps if this flag is set.
-  devtools_release_sourcemaps = false
-}
-
-assert(!(devtools_fast_bundle && is_official_build),
-       "Official build should not bundle with esbuild")
-
-# Release source map implies release build.
-assert(!devtools_release_sourcemaps || !is_debug,
-       "Release source maps can only be enabled for release builds")
-
 template("bundle") {
   assert(defined(invoker.entrypoint),
          "You must define the 'entrypoint' for a bundle target")
 
-  if (devtools_fast_bundle) {
+  _fast_bundle = is_debug || devtools_skip_typecheck
+  assert(!is_official_build || !_fast_bundle,
+         "Fast bundling is disallowed for official builds.")
+
+  if (_fast_bundle) {
     node_action(target_name) {
       script = "scripts/build/esbuild.js"
       forward_variables_from(invoker,
@@ -57,12 +40,9 @@ template("bundle") {
       args = [
         rebase_path(invoker.entrypoint, root_build_dir),
         rebase_path(invoker.output_file_location, root_build_dir),
+        "--configSourcemaps"
       ]
 
-      if (devtools_release_sourcemaps) {
-        args += [ "--configSourcemaps" ]
-      }
-
       outputs = [ invoker.output_file_location ]
     }
   } else {
@@ -96,12 +76,9 @@ template("bundle") {
         rebase_path(invoker.entrypoint, root_build_dir),
         "--file",
         rebase_path(invoker.output_file_location, root_build_dir),
+        "--configSourcemaps",
       ]
 
-      if (devtools_release_sourcemaps) {
-        args += [ "--configSourcemaps" ]
-      }
-
       outputs = [ invoker.output_file_location ]
     }
   }

package/scripts/build/ninja/devtools_entrypoint.gni

@@ -30,10 +30,10 @@ template("devtools_entrypoint") {
 
   _is_web_worker = defined(invoker.is_web_worker) && invoker.is_web_worker
 
-  # In debug mode, the entrypoint is kept as-is. This means we only
-  # need to compile with TypeScript, which means it will fetch all
+  # If we don't bundle, the entrypoint is kept as-is. This means we only
+  # need to compile with TypeScript/esbuild, which means it will fetch all
   # of its files as separate network requests.
-  if (is_debug) {
+  if (!devtools_bundle) {
     _ts_library_target_name = _entrypoint_target_name + "-typescript"
 
     ts_library(_ts_library_target_name) {
@@ -47,7 +47,7 @@ template("devtools_entrypoint") {
 
     _devtools_entrypoint_deps += [ ":$_ts_library_target_name" ]
   } else {
-    # In release mode, we are running Rollup and thus bundle all
+    # Otherwise, we are running Rollup and thus bundle all
     # files in the (sub-)folder(s) into 1 file.
     #
     # To make sure that the build system can handle the Rollup

package/scripts/build/ninja/devtools_pre_built.gni

@@ -3,6 +3,7 @@
 # found in the LICENSE file.
 
 import("./node.gni")
+import("./vars.gni")
 
 template("devtools_pre_built") {
   node_action(target_name) {
@@ -39,7 +40,7 @@ template("devtools_pre_built") {
 
     data = _javascript_implementation_files + _javascript_map_files
 
-    if (invoker.sources_are_release || is_debug) {
+    if (invoker.sources_are_release || !devtools_bundle) {
       metadata = {
         grd_files = _javascript_implementation_files
       }

package/scripts/build/ninja/generate_css.gni

@@ -18,9 +18,11 @@ template("generate_css") {
     inputs +=
         [ devtools_location_prepend + "node_modules/cssnano/package.json" ]
 
+    _minify = is_debug
+
     args = [
       build_timestamp,
-      "$is_debug",
+      "$_minify",
       target_name,
       _src,
       _dest,
@@ -34,7 +36,7 @@ template("generate_css") {
 
     data = outputs
 
-    if (is_debug) {
+    if (!devtools_bundle) {
       metadata = {
         grd_files = outputs
       }

package/scripts/build/ninja/vars.gni

@@ -3,9 +3,13 @@
 # found in the LICENSE file.
 
 import("//build/config/devtools.gni")
+import("//build/toolchain/kythe.gni")
 
 declare_args() {
-  devtools_dcheck_always_on = is_debug
+  # Whether we bundle module entrypoints into a single file or not.
+  # The arg is declared here and not in "devtools_entrypoint.gni" because various
+  # templates need to read it, as it affects the "grd_files" metadata field.
+  devtools_bundle = !enable_kythe_annotations
 }
 
 # Introduce a new variable to make sure that string

package/scripts/build/ninja/write-if-changed.js

@@ -13,8 +13,8 @@ const fs = require('fs');
  * unchanged. This would preserve the original file timestamps and hence GN can correctly conclude
  * the file output hasn't changed.
  *
- * @param {string} generatedFileLocation Location to write to
- * @param {string} newContents The contents to write (or noop if unchanged with previous content)
+ * @param generatedFileLocation Location to write to
+ * @param newContents The contents to write (or noop if unchanged with previous content)
  */
 module.exports.writeIfChanged = (generatedFileLocation, newContents) => {
   if (fs.existsSync(generatedFileLocation)) {

package/scripts/build/typescript/ts_library.py

@@ -267,8 +267,14 @@ def main():
     ] or []
     if opts.test_only:
         tsconfig['compilerOptions']['types'] = [
-            "mocha", "chai", "sinon", "karma-chai-sinon"
+            "mocha", "chai", "sinon",
         ]
+        # We only want to add these types for Unit test
+        # Else we will get run time errors if we don't import chai
+        if runs_in_node_environment is False:
+            tsconfig['compilerOptions']['types'].append(
+                "karma-chai-sinon"
+            )
         # Required for sinon global access.
         tsconfig['compilerOptions']['allowUmdGlobalAccess'] = True
         if runs_in_node_environment:

package/scripts/build/typescript/typescript.gni

@@ -54,6 +54,7 @@ template("ts_library") {
                              "deps",
                              "public_deps",
                              "inputs",
+                             "data_deps",
                            ])
 
     inputs += [
@@ -244,7 +245,7 @@ template("ts_library") {
                              ])
     }
 
-    if (is_debug) {
+    if (!devtools_bundle) {
       metadata.grd_files = _javascript_implementation_files
     }
   }

package/scripts/component_server/server.js

@@ -9,7 +9,7 @@ const parseURL = require('url').parse;
 const yargs = require('yargs');
 const {hideBin} = require('yargs/helpers');
 
-const argv = yargs(hideBin(process.argv)).argv;
+const argv = yargs(hideBin(process.argv)).parseSync();
 const tracesMode = argv.traces || false;
 const serverPort = parseInt(process.env.PORT, 10) || (tracesMode ? 11010 : 8090);
 
@@ -291,8 +291,8 @@ async function checkFileExists(filePath) {
 }
 
 /**
- * @param {http.IncomingMessage} request
- * @param {http.ServerResponse} response
+ * @param request
+ * @param response
  */
 async function requestHandler(request, response) {
   const filePath = parseURL(request.url).pathname;
@@ -339,7 +339,8 @@ async function requestHandler(request, response) {
   } else if (tracesMode) {
     return handleTracesModeRequest(request, response, filePath);
   } else if (/ui\/components\/docs\/(.+)\/(.+)\.html/.test(filePath)) {
-    /** This conditional checks if we are viewing an individual example's HTML
+    /**
+     * This conditional checks if we are viewing an individual example's HTML
      *  file. e.g. localhost:8090/front_end/ui/components/docs/data_grid/basic.html For each
      *  example we inject themeColors.css into the page so all CSS variables
      *  that components use are available.
@@ -549,9 +550,9 @@ function createTracesIndexFile(traceFilenames) {
 }
 
 /**
- * @param {http.IncomingMessage} request
- * @param {http.ServerResponse} response
- * @param {string|null} filePath
+ * @param request
+ * @param response
+ * @param filePath
  */
 async function handleTracesModeRequest(request, response, filePath) {
   const traceFolder = path.resolve(