chrome-devtools-frontend 1.0.963415 → 1.0.965113

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -165,12 +165,14 @@ const UIStrings = {
   newStyleRule: 'New Style Rule',
   /**
   *@description Text that is announced by the screen reader when the user focuses on an input field for entering the name of a CSS property in the Styles panel
+  *@example {margin} PH1
   */
-  cssPropertyName: '`CSS` property name',
+  cssPropertyName: '`CSS` property name: {PH1}',
   /**
   *@description Text that is announced by the screen reader when the user focuses on an input field for entering the value of a CSS property in the Styles panel
+  *@example {10px} PH1
   */
-  cssPropertyValue: '`CSS` property value',
+  cssPropertyValue: '`CSS` property value: {PH1}',
   /**
   *@description Text that is announced by the screen reader when the user focuses on an input field for editing the name of a CSS selector in the Styles panel
   */
@@ -3091,7 +3093,7 @@ export class StylesSidebarPropertyRenderer {
 
   renderName(): Element {
     const nameElement = document.createElement('span');
-    UI.ARIAUtils.setAccessibleName(nameElement, i18nString(UIStrings.cssPropertyName));
+    UI.ARIAUtils.setAccessibleName(nameElement, i18nString(UIStrings.cssPropertyName, {PH1: this.propertyName}));
     nameElement.className = 'webkit-css-property';
     nameElement.textContent = this.propertyName;
     nameElement.normalize();
@@ -3100,7 +3102,7 @@ export class StylesSidebarPropertyRenderer {
 
   renderValue(): Element {
     const valueElement = document.createElement('span');
-    UI.ARIAUtils.setAccessibleName(valueElement, i18nString(UIStrings.cssPropertyValue));
+    UI.ARIAUtils.setAccessibleName(valueElement, i18nString(UIStrings.cssPropertyValue, {PH1: this.propertyValue}));
     valueElement.className = 'value';
     if (!this.propertyValue) {
       return valueElement;

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -364,9 +364,16 @@ export class UISourceCodeFrame extends
     this.unloadUISourceCode();
     this.persistenceBinding = binding;
     this.initializeUISourceCode();
+    this.reloadMessages();
     this.reloadPlugins();
   }
 
+  private reloadMessages(): void {
+    const messages = [...this.allMessages()];
+    const {editor} = this.textEditor;
+    editor.dispatch({effects: setRowMessages.of(RowMessages.create(messages))});
+  }
+
   private updateStyle(): void {
     this.setEditable(this.canEditSourceInternal());
   }

package/front_end/ui/legacy/components/inline_editor/cssLength.css

@@ -23,6 +23,7 @@
   cursor: pointer;
   opacity: 0%;
   width: 0.8em;
+  background-color: var(--color-background);
 }
 
 .icon {

package/front_end/ui/legacy/themeColors.css

@@ -260,7 +260,7 @@
   --color-error-background: hsl(0deg 100% 8%);
   --color-checkbox-accent-color: rgb(255 165 0);
   /* Colors for styling inputs */
-  --color-input-outline: rgb(189 193 198);
+  --color-input-outline: rgb(60 64 67);
   --color-input-outline-active: rgb(138 180 248);
   --color-input-outline-error: rgb(242 139 130);
   --color-input-outline-disabled: rgba(189 193 198 / 20%);

package/package.json

@@ -53,5 +53,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.963415"
+  "version": "1.0.965113"
 }

package/scripts/build/devtools_plugin.js

@@ -0,0 +1,103 @@
+// Copyright 2022 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.
+
+// @ts-check
+
+const path = require('path');
+
+/**
+ * `path.dirname` does not include trailing slashes. If we would always
+ * use `path.dirname` and then later perform comparisons on the paths that
+ * it returns, we could run into false positives. For example, given the
+ * the following two paths:
+ *
+ *     front_end/timeline_model/TimelineModel.js
+ *     front_end/timeline/Timeline.js
+ *
+ * And that would have the following values for `path.dirname`:
+ *
+ *     front_end/timeline_model
+ *     front_end/timeline
+ *
+ * If we would do a simple `.startswith` on the `path.dirname` of both of
+ * these paths, then the first path would start with the dirname of the
+ * second. However, they *are* part of different folders. To fix that problem,
+ * we need to force a path separator after each folder. That makes sure we
+ * and up with the following comparison of path dirnames:
+ *
+ *     front_end/timeline_model/
+ *     front_end/timeline/
+ *
+ * Now, the first path does *not* start with the second one, as expected.
+ *
+ * @param {string} file
+ * @return {string}
+ */
+function dirnameWithSeparator(file) {
+  return path.dirname(file) + path.sep;
+}
+
+function devtoolsPlugin(source, importer) {
+  if (!importer) {
+    return null;
+  }
+  const currentDirectory = path.normalize(dirnameWithSeparator(importer));
+  const importedFilelocation = path.normalize(path.join(currentDirectory, source));
+  const importedFileDirectory = dirnameWithSeparator(importedFilelocation);
+
+  // Generated files are part of other directories, as they are only imported once
+  if (path.basename(importedFileDirectory) === 'generated') {
+    return null;
+  }
+
+  // An import is considered external (and therefore a separate
+  // bundle) if its filename matches its immediate parent's folder
+  // name (without the extension). For example:
+  // import * as Components from './components/components.js' = external
+  // import * as UI from '../ui/ui.js' = external
+  // import * as LitHtml from '../third_party/lit-html/lit-html.js' = external
+  // import {DataGrid} from './components/DataGrid.js' = not external
+  // import * as Components from './components/foo.js' = not external
+
+  // Note that we can't do a simple check for only `third_party`, as in Chromium
+  // our full path is `third_party/devtools-frontend/src/`, which thus *always*
+  // includes third_party. It also not possible to use the current directory
+  // as a check for the import, as the import will be different in Chromium and
+  // would therefore not match the path of `__dirname`.
+  // These should be removed because the new heuristic _should_ deal with these
+  // e.g. it'll pick up third_party/lit-html/lit-html.js is its own entrypoint
+
+  // Puppeteer has dynamic imports in its build gated on an ifNode
+  // flag, but our Rollup config doesn't know about that and tries
+  // to parse dynamic import('fs'). Let's ignore Puppeteer for now.
+  // The long term plan is probably for Puppeteer to ship a web
+  // bundle anyway. See go/pptr-agnostify for details.
+  if (importedFileDirectory.includes(path.join('front_end', 'third_party', 'puppeteer'))) {
+    return null;
+  }
+
+  // The CodeMirror addons look like bundles (addon/comment/comment.js) but are not.
+  if (importedFileDirectory.includes(path.join('front_end', 'third_party', 'codemirror', 'package'))) {
+    return null;
+  }
+
+  // The LightHouse bundle shouldn't be processed by `terser` again, as it is uniquely built
+  if (importedFilelocation.includes(path.join('front_end', 'third_party', 'lighthouse', 'lighthouse-dt-bundle.js'))) {
+    return {
+      id: importedFilelocation,
+      external: true,
+    };
+  }
+
+  const importedFileName = path.basename(importedFilelocation, '.js');
+  const importedFileParentDirectory = path.basename(path.dirname(importedFilelocation));
+  const isExternal = importedFileName === importedFileParentDirectory;
+
+  return {
+    id: importedFilelocation,
+    external: isExternal,
+  };
+}
+
+module.exports = {devtoolsPlugin};

package/scripts/build/ninja/{rollup.gni → bundle.gni}

@@ -5,9 +5,9 @@
 import("./node.gni")
 import("./vars.gni")
 
-template("rollup") {
+template("bundle") {
   assert(defined(invoker.entrypoint),
-         "You must define the 'entrypoint' for a rollup target")
+         "You must define the 'entrypoint' for a bundle target")
 
   node_action(target_name) {
     script = "node_modules/rollup/dist/bin/rollup"

package/scripts/build/ninja/devtools_entrypoint.gni

@@ -4,9 +4,9 @@
 
 import("//build/toolchain/rbe.gni")
 import("../../../third_party/typescript/typescript.gni")
+import("./bundle.gni")
 import("./copy.gni")
 import("./node.gni")
-import("./rollup.gni")
 import("./vars.gni")
 
 # This defines an entrypoint for DevTools, which uses Rollup
@@ -19,7 +19,7 @@ import("./vars.gni")
 #    import in `core/root/Runtime.js`.
 template("devtools_entrypoint") {
   assert(defined(invoker.entrypoint),
-         "You must define the 'entrypoint' for a rollup target")
+         "You must define the 'entrypoint' for a bundle target")
 
   _entrypoint_target_name = "devtools_entrypoint-" + target_name
 
@@ -79,7 +79,7 @@ template("devtools_entrypoint") {
     # make sure that the GN dependency graph correctly corresponds
     # to that. Therefore, the graph looks like so:
     #
-    #   copy -> ts_library -> fix-tsconfig -> rollup
+    #   copy -> ts_library -> fix-tsconfig -> bundle
     #
     _entrypoint_output_file_name = get_path_info(invoker.entrypoint, "name")
     _output_file_name =
@@ -88,7 +88,7 @@ template("devtools_entrypoint") {
     _prebundle_output_file_name = "$_output_file_name.js"
 
     _copy_target_name = _entrypoint_target_name + "-copy"
-    _rollup_target_name = _entrypoint_target_name + "-rollup"
+    _bundle_target_name = _entrypoint_target_name + "-bundle"
     _prebundle_target_name = _entrypoint_target_name + "-tsconfig"
 
     node_action(_copy_target_name) {
@@ -127,12 +127,12 @@ template("devtools_entrypoint") {
       }
     }
 
-    rollup(_rollup_target_name) {
+    bundle(_bundle_target_name) {
       entrypoint = _prebundle_output_file_name
 
       output_file_location = _entrypoint_gen_file_location
 
-      # Since rollup bundles both the entrypoint and the files it imports,
+      # Since bundles both the entrypoint and the files it imports,
       # we have to make sure that, when you change a file it imports, we
       # retrigger Rollup. Since the `invoker.deps` is a reference to the
       # `ts_library` that compiles all of the files it imports, we have to
@@ -161,8 +161,8 @@ template("devtools_entrypoint") {
         ]
 
         public_deps = [
+          ":$_bundle_target_name",
           ":$_prebundle_target_name",
-          ":$_rollup_target_name",
         ]
 
         outputs = [ "$target_gen_dir/$_entrypoint_output_file_name.d.ts" ]
@@ -171,8 +171,8 @@ template("devtools_entrypoint") {
       _devtools_entrypoint_deps += [ ":$_generated_declaration_target_name" ]
     } else {
       _devtools_entrypoint_deps += [
+        ":$_bundle_target_name",
         ":$_prebundle_target_name",
-        ":$_rollup_target_name",
       ]
     }
   }

package/scripts/build/rollup.config.js

@@ -5,41 +5,10 @@
 // @ts-check
 
 import {defaultStrategy} from 'minify-html-literals/src/strategy';  // eslint-disable-line rulesdir/es_modules_import
-import * as path from 'path';
 import minifyHTML from 'rollup-plugin-minify-html-template-literals';
 import {terser} from 'rollup-plugin-terser';
 
-/**
- * `path.dirname` does not include trailing slashes. If we would always
- * use `path.dirname` and then later perform comparisons on the paths that
- * it returns, we could run into false positives. For example, given the
- * the following two paths:
- *
- *     front_end/timeline_model/TimelineModel.js
- *     front_end/timeline/Timeline.js
- *
- * And that would have the following values for `path.dirname`:
- *
- *     front_end/timeline_model
- *     front_end/timeline
- *
- * If we would do a simple `.startswith` on the `path.dirname` of both of
- * these paths, then the first path would start with the dirname of the
- * second. However, they *are* part of different folders. To fix that problem,
- * we need to force a path separator after each folder. That makes sure we
- * and up with the following comparison of path dirnames:
- *
- *     front_end/timeline_model/
- *     front_end/timeline/
- *
- * Now, the first path does *not* start with the second one, as expected.
- *
- * @param {string} file
- * @return {string}
- */
-function dirnameWithSeparator(file) {
-  return path.dirname(file) + path.sep;
-}
+const devtools_plugin = require('./devtools_plugin.js');
 
 /**
  * @type {import("minify-html-literals").Strategy<import("html-minifier").Options, unknown>}
@@ -91,67 +60,8 @@ export default commandLineArgs => ({
     {
       name: 'devtools-plugin',
       resolveId(source, importer) {
-        if (!importer) {
-          return null;
-        }
-        const currentDirectory = path.normalize(dirnameWithSeparator(importer));
-        const importedFilelocation = path.normalize(path.join(currentDirectory, source));
-        const importedFileDirectory = dirnameWithSeparator(importedFilelocation);
-
-        // Generated files are part of other directories, as they are only imported once
-        if (path.basename(importedFileDirectory) === 'generated') {
-          return null;
-        }
-
-        // An import is considered external (and therefore a separate
-        // bundle) if its filename matches its immediate parent's folder
-        // name (without the extension). For example:
-        // import * as Components from './components/components.js' = external
-        // import * as UI from '../ui/ui.js' = external
-        // import * as LitHtml from '../third_party/lit-html/lit-html.js' = external
-        // import {DataGrid} from './components/DataGrid.js' = not external
-        // import * as Components from './components/foo.js' = not external
-
-        // Note that we can't do a simple check for only `third_party`, as in Chromium
-        // our full path is `third_party/devtools-frontend/src/`, which thus *always*
-        // includes third_party. It also not possible to use the current directory
-        // as a check for the import, as the import will be different in Chromium and
-        // would therefore not match the path of `__dirname`.
-        // These should be removed because the new heuristic _should_ deal with these
-        // e.g. it'll pick up third_party/lit-html/lit-html.js is its own entrypoint
-
-        // Puppeteer has dynamic imports in its build gated on an ifNode
-        // flag, but our Rollup config doesn't know about that and tries
-        // to parse dynamic import('fs'). Let's ignore Puppeteer for now.
-        // The long term plan is probably for Puppeteer to ship a web
-        // bundle anyway. See go/pptr-agnostify for details.
-        if (importedFileDirectory.includes(path.join('front_end', 'third_party', 'puppeteer'))) {
-          return null;
-        }
-
-        // The CodeMirror addons look like bundles (addon/comment/comment.js) but are not.
-        if (importedFileDirectory.includes(path.join('front_end', 'third_party', 'codemirror', 'package'))) {
-          return null;
-        }
-
-        // The LightHouse bundle shouldn't be processed by `terser` again, as it is uniquely built
-        if (importedFilelocation.includes(
-                path.join('front_end', 'third_party', 'lighthouse', 'lighthouse-dt-bundle.js'))) {
-          return {
-            id: importedFilelocation,
-            external: true,
-          };
-        }
-
-        const importedFileName = path.basename(importedFilelocation, '.js');
-        const importedFileParentDirectory = path.basename(path.dirname(importedFilelocation));
-        const isExternal = importedFileName === importedFileParentDirectory;
-
-        return {
-          id: importedFilelocation,
-          external: isExternal,
-        };
-      }
+        return devtools_plugin.devtoolsPlugin(source, importer);
+      },
     },
   ]
 });

package/scripts/devtools_paths.js

@@ -59,8 +59,9 @@ function isInChromiumDirectory() {
   }
 
   const normalizedPath = PATH_TO_EXECUTED_FILE.split(path.sep).join('/');
-  const isInChromium = normalizedPath.includes('chromium/src/third_party/devtools-frontend');
-  const potentialChromiumDir = PATH_TO_EXECUTED_FILE.substring(0, PATH_TO_EXECUTED_FILE.indexOf('chromium') + 8);
+  const devtoolsPath = 'src/third_party/devtools-frontend';
+  const isInChromium = normalizedPath.includes(devtoolsPath);
+  const potentialChromiumDir = PATH_TO_EXECUTED_FILE.substring(0, PATH_TO_EXECUTED_FILE.indexOf(devtoolsPath));
   const result = {isInChromium, chromiumDirectory: potentialChromiumDir};
   _lookUpCaches.set('chromium', result);
   return result;

package/scripts/javascript_natives/helpers.js

@@ -0,0 +1,211 @@
+// Copyright 2021 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.
+
+// @ts-check
+
+import * as fs from 'fs';
+import * as path from 'path';
+import {fileURLToPath} from 'url';
+
+/** @type {Map<string, Map<string, string[][]>>} */
+const methods = new Map();
+
+export function clearState() {
+  methods.clear();
+}
+
+export function parseTSFunction(func, node) {
+  if (!func.name.escapedText) {
+    return;
+  }
+
+  const args = func.parameters
+                   .map(p => {
+                     let text = p.name.escapedText;
+                     if (p.questionToken) {
+                       text = '?' + text;
+                     }
+                     if (p.dotDotDotToken) {
+                       text = '...' + text;
+                     }
+                     return text;
+                   })
+                   .filter(x => x !== 'this');
+  storeMethod(node.name.text, func.name.escapedText, args);
+}
+
+/**
+ * @param {WebIDL2.IDLRootType} thing
+ * */
+export function walkRoot(thing) {
+  switch (thing.type) {
+    case 'interface':
+      walkInterface(thing);
+      break;
+    case 'interface mixin':
+    case 'namespace':
+      walkMembers(thing);
+      break;
+  }
+}
+
+/**
+ * @param {WebIDL2.InterfaceType} thing
+ * */
+function walkInterface(thing) {
+  thing.members.forEach(member => {
+    switch (member.type) {
+      case 'constructor':
+        storeMethod('Window', thing.name, member.arguments.map(argName));
+        break;
+      case 'operation':
+        handleOperation(member);
+    }
+  });
+  const namedConstructor = thing.extAttrs.find(extAttr => extAttr.name === 'NamedConstructor');
+  if (namedConstructor && namedConstructor.arguments) {
+    storeMethod('Window', namedConstructor.rhs.value, namedConstructor.arguments.map(argName));
+  }
+}
+
+/**
+ * @param {WebIDL2.NamespaceType | WebIDL2.InterfaceMixinType} thing
+ * */
+function walkMembers(thing) {
+  thing.members.forEach(member => {
+    if (member.type === 'operation') {
+      handleOperation(member);
+    }
+  });
+}
+
+/**
+ * @param {WebIDL2.OperationMemberType} member
+ * */
+function handleOperation(member) {
+  storeMethod(
+      member.special === 'static' ? (parent.name + 'Constructor') : member.parent.name, member.name,
+      member.arguments.map(argName));
+}
+
+/**
+ * @param {WebIDL2.Argument} a
+ * */
+function argName(a) {
+  let name = a.name;
+  if (a.optional) {
+    name = '?' + name;
+  }
+  if (a.variadic) {
+    name = '...' + name;
+  }
+  return name;
+}
+
+/**
+ * @param {string} parent
+ * @param {string} name
+ * @param {Array<string>} args
+ * */
+function storeMethod(parent, name, args) {
+  if (!methods.has(name)) {
+    methods.set(name, new Map());
+  }
+  const method = methods.get(name);
+  if (!method.has(parent)) {
+    method.set(parent, []);
+  }
+  method.get(parent).push(args);
+}
+
+export function postProcess(dryRun = false) {
+  for (const name of methods.keys()) {
+    // We use the set jsonParents to track the set of different signatures across parent for this function name.
+    // If all signatures are identical, we leave out the parent and emit a single NativeFunction entry without receiver.
+    const jsonParents = new Set();
+    for (const [parent, signatures] of methods.get(name)) {
+      signatures.sort((a, b) => a.length - b.length);
+      const filteredSignatures = [];
+      for (const signature of signatures) {
+        const smallerIndex = filteredSignatures.findIndex(smaller => startsTheSame(smaller, signature));
+        if (smallerIndex !== -1) {
+          filteredSignatures[smallerIndex] = (signature.map((arg, index) => {
+            const otherArg = filteredSignatures[smallerIndex][index];
+            if (otherArg) {
+              return otherArg.length > arg.length ? otherArg : arg;
+            }
+            if (arg.startsWith('?') || arg.startsWith('...')) {
+              return arg;
+            }
+            return '?' + arg;
+          }));
+        } else {
+          filteredSignatures.push(signature);
+        }
+      }
+
+      function startsTheSame(smaller, bigger) {
+        for (let i = 0; i < smaller.length; i++) {
+          const withoutQuestion = str => /[\?]?(.*)/.exec(str)[1];
+          if (withoutQuestion(smaller[i]) !== withoutQuestion(bigger[i])) {
+            return false;
+          }
+        }
+        return true;
+      }
+
+      methods.get(name).set(parent, filteredSignatures);
+      jsonParents.add(JSON.stringify(filteredSignatures));
+    }
+    // If all parents had the same signature for this name, we put a `*` as parent for this entry.
+    if (jsonParents.size === 1) {
+      methods.set(name, new Map([['*', JSON.parse(jsonParents.values().next().value)]]));
+    }
+    for (const [parent, signatures] of methods.get(name)) {
+      if (signatures.length === 1 && !signatures[0].length) {
+        methods.get(name).delete(parent);
+      }
+    }
+    if (methods.get(name).size === 0) {
+      methods.delete(name);
+    }
+  }
+  const functions = [];
+  for (const [name, method] of methods) {
+    if (method.has('*')) {
+      // All parents had the same signature so we emit an entry without receiver.
+      functions.push({name, signatures: method.get('*')});
+    } else {
+      for (const [parent, signatures] of method) {
+        if (parent.endsWith('Constructor')) {
+          functions.push(
+              {name, signatures, static: true, receiver: parent.substring(0, parent.length - 'Constructor'.length)});
+        } else {
+          functions.push({name, signatures, receiver: parent});
+        }
+      }
+    }
+  }
+  const output = `export const NativeFunctions = [\n${
+      functions
+          .map(
+              entry =>
+                  `  {\n${Object.entries(entry).map(kv => `    ${kv[0]}: ${JSON.stringify(kv[1])}`).join(',\n')}\n  }`)
+          .join(',\n')}\n];`;
+
+  if (dryRun) {
+    return output;
+  }
+
+  fs.writeFileSync(
+      (new URL('../../front_end/models/javascript_metadata/NativeFunctions.js', import.meta.url)).pathname,
+      `// Copyright 2020 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.
+// Generated from ${
+          path.relative(path.join(fileURLToPath(import.meta.url), '..', '..'), fileURLToPath(import.meta.url))}
+
+${output}
+`);
+}