[npm] Port npm start to JavaScript.

There's no point in writing this one script in Python. It's much better
to have it in JavaScript, just like `npm run build`.

Bug: 404192426
Change-Id: Ic19eaeb5b1d97ca750ae4253963b8434072d00fd
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6387801
Auto-Submit: Benedikt Meurer <[email protected]>
Commit-Queue: Benedikt Meurer <[email protected]>
Reviewed-by: Nikolay Vitkov <[email protected]>

Author: bmeurer

docs/get_the_code.md

@@ -150,13 +150,13 @@ source files for changes while Chrome is running and automatically trigger a reb
 By default, `npm start` will automatically open DevTools for every new tab, you can use
 
 ```bash
-npm start -- --no-auto-open-devtools-for-tabs
+npm start -- --no-open
 ```
 
 to disable this behavior. You can also use
 
 ```bash
-npm start -- --canary
+npm start -- --browser=canary
 ```
 
 to run in Chrome Canary instead of Chrome for Testing; this requires you to install Chrome Canary manually first

package.json

@@ -28,7 +28,7 @@
     "lint": "vpython3 third_party/node/node.py --output scripts/test/run_lint_check.mjs",
     "prebuild": "gn gen out/Default",
     "rdb": "rdb stream -new -realm chrome:public --",
-    "start": "vpython3 scripts/run_start.py",
+    "start": "vpython3 third_party/node/node.py --output scripts/run_start.mjs",
     "webtest": "vpython3 third_party/node/node.py --output scripts/npm_test.js",
     "watch": "vpython3 third_party/node/node.py --output scripts/watch_build.js",
     "test": "vpython3 third_party/node/node.py --output scripts/run_on_target.mjs gen/test/run.js"

scripts/devtools_paths.js

@@ -170,6 +170,7 @@ module.exports = {
   mochaExecutablePath,
   nodeModulesPath,
   nodePath,
+  rootPath,
   stylelintExecutablePath,
   thirdPartyPath,
   tsconfigJsonPath,

scripts/run_build.mjs

@@ -36,7 +36,7 @@ const {target, watch, skipInitialBuild} = argv;
 const cwd = process.cwd();
 const {env} = process;
 
-// Create and initiative the `out/<target>` directory as needed.
+// Create and initialize the `out/<target>` directory as needed.
 const outDir = path.join('out', target);
 if (!fs.existsSync(outDir)) {
   const gnExe = path.join(cwd, 'third_party', 'depot_tools', 'gn');

scripts/run_start.mjs

@@ -0,0 +1,139 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import childProcess from 'node:child_process';
+import path from 'node:path';
+import yargs from 'yargs';
+import {hideBin} from 'yargs/helpers';
+
+import {downloadedChromeBinaryPath, rootPath} from './devtools_paths.js';
+
+// The list of features that are enabled by default.
+const ENABLE_FEATURES = [
+  'DevToolsAutomaticFileSystems',
+  'DevToolsCssValueTracing',
+  'DevToolsFreeStyler:patching/true,user_tier/TESTERS',
+  'DevToolsWellKnown',
+];
+
+// The list of features that are disabled by default.
+const DISABLE_FEATURES = [];
+if (process.platform === 'darwin') {
+  DISABLE_FEATURES.push('MediaRouter');
+}
+
+const argv = yargs(hideBin(process.argv))
+                 .option('browser', {
+                   type: 'string',
+                   choices: ['cft', 'canary'],
+                   default: 'cft',
+                   description: 'Launch in the specified browser',
+                 })
+                 .option('open', {
+                   type: 'boolean',
+                   default: true,
+                   description: 'Automatically open DevTools for new tabs',
+                 })
+                 .option('target', {
+                   alias: 't',
+                   type: 'string',
+                   default: 'Default',
+                   description: 'Specify the target build subdirectory under //out',
+                 })
+                 .option('verbose', {
+                   type: 'boolean',
+                   default: false,
+                   description: 'Enable verbose logging',
+                 })
+                 .usage('npm start -- [options] [urls...]')
+                 .help('help')
+                 .version(false)
+                 .parseSync();
+
+const {browser, target, open, verbose} = argv;
+const cwd = process.cwd();
+const {env} = process;
+const runBuildPath = path.join(import.meta.dirname, 'run_build.mjs');
+
+function findBrowserBinary() {
+  if (browser === 'canary') {
+    const binary = ({
+      linux: path.join('/usr', 'bin', 'google-chrome-canary'),
+      darwin: path.join('/Applications', 'Google Chrome Canary.app', 'Contents', 'MacOS', 'Google Chrome Canary'),
+    })[process.platform];
+    if (verbose) {
+      console.debug('Located Chrome Canary binary in %s.', binary);
+    }
+    return binary;
+  }
+  const binary = downloadedChromeBinaryPath();
+  if (verbose) {
+    console.debug('Located Chrome for Testing binary in %s.', binary);
+  }
+  return binary;
+}
+
+// Perform the initial build.
+childProcess.spawnSync(
+    process.argv[0],
+    [
+      runBuildPath,
+      `--target=${target}`,
+    ],
+    {cwd, env, stdio: 'inherit'},
+);
+
+// Launch Chrome with our custom DevTools front-end.
+function start() {
+  const binary = findBrowserBinary();
+  const args = [];
+
+  // Custom flags for CfT.
+  if (browser === 'cft') {
+    args.push('--disable-infobars');
+  }
+
+  // Custom flags for macOS.
+  if (process.platform === 'darwin') {
+    args.push('--use-mock-keychain');
+  }
+
+  // Disable/Enable experimental features.
+  args.push(`--disable-features=${DISABLE_FEATURES.join(',')}`);
+  args.push(`--enable-features=${ENABLE_FEATURES.join(',')}`);
+
+  // Open with our freshly built DevTools front-end.
+  const customDevToolsFrontEndPath = path.join(rootPath(), 'out', target, 'gen', 'front_end');
+  args.push(`--custom-devtools-frontend=file://${customDevToolsFrontEndPath}`);
+
+  // Chrome flags and URLs.
+  if (open) {
+    args.push('--auto-open-devtools-for-tabs');
+  }
+  args.push(...argv._);
+
+  // Launch Chrome.
+  if (verbose) {
+    console.debug('Launch Chrome: %s %s', binary, args.join(' '));
+  }
+  childProcess.spawnSync(binary, args, {cwd, env, stdio: 'inherit'});
+}
+
+// Run build watcher in the background to automatically rebuild
+// devtools-frontend whenever there are changes detected.
+const watcher = childProcess.spawn(
+    process.argv[0],
+    [
+      runBuildPath,
+      '--skip-initial-build',
+      `--target=${target}`,
+      '--watch',
+    ],
+    {cwd, env, stdio: 'inherit'});
+try {
+  // Launch chrome.
+  start();
+} finally {
+  watcher.kill();
+}