chrome-devtools-frontend 1.0.961907 → 1.0.964440

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/.eslintignore +5 -4
  2. package/AUTHORS +1 -0
  3. package/config/gni/devtools_grd_files.gni +1 -1
  4. package/docs/resource_management.md +119 -0
  5. package/docs/workflows.md +7 -0
  6. package/front_end/core/common/ParsedURL.ts +12 -10
  7. package/front_end/core/host/UserMetrics.ts +2 -1
  8. package/front_end/core/i18n/locales/en-US.json +2 -2
  9. package/front_end/core/i18n/locales/en-XL.json +2 -2
  10. package/front_end/core/protocol_client/InspectorBackend.ts +7 -7
  11. package/front_end/core/root/Runtime.ts +2 -0
  12. package/front_end/core/sdk/CSSProperty.ts +22 -110
  13. package/front_end/core/sdk/DOMModel.ts +2 -2
  14. package/front_end/core/sdk/DebuggerModel.ts +1 -1
  15. package/front_end/entrypoints/main/MainImpl.ts +7 -2
  16. package/front_end/generated/InspectorBackendCommands.js +8 -4
  17. package/front_end/generated/protocol-mapping.d.ts +12 -1
  18. package/front_end/generated/protocol-proxy-api.d.ts +11 -1
  19. package/front_end/generated/protocol-tsconfig.json +2 -2
  20. package/front_end/generated/protocol.ts +16787 -0
  21. package/front_end/models/javascript_metadata/NativeFunctions.js +7480 -4147
  22. package/front_end/models/persistence/IsolatedFileSystem.ts +3 -2
  23. package/front_end/models/persistence/PersistenceActions.ts +2 -2
  24. package/front_end/models/text_utils/text_utils-legacy.ts +0 -5
  25. package/front_end/models/text_utils/text_utils.ts +0 -2
  26. package/front_end/models/workspace/UISourceCode.ts +4 -5
  27. package/front_end/panels/animation/AnimationUI.ts +2 -1
  28. package/front_end/panels/application/AppManifestView.ts +7 -1
  29. package/front_end/panels/application/components/BackForwardCacheStrings.ts +1 -1
  30. package/front_end/panels/application/components/FrameDetailsView.ts +1 -0
  31. package/front_end/panels/elements/StylePropertyTreeElement.ts +13 -0
  32. package/front_end/panels/elements/StylesSidebarPane.ts +73 -4
  33. package/front_end/panels/elements/stylesSectionTree.css +28 -0
  34. package/front_end/panels/media/PlayerListView.ts +2 -0
  35. package/front_end/panels/media/playerListView.css +3 -0
  36. package/front_end/panels/sensors/sensors-meta.ts +2 -2
  37. package/front_end/panels/sources/NavigatorView.ts +1 -1
  38. package/front_end/ui/components/diff_view/DiffView.ts +2 -2
  39. package/front_end/ui/components/docs/icon_button/basic.ts +1 -1
  40. package/front_end/ui/components/icon_button/IconButton.ts +1 -1
  41. package/front_end/ui/legacy/GlassPane.ts +2 -0
  42. package/front_end/ui/legacy/components/inline_editor/cssLength.css +1 -0
  43. package/front_end/ui/legacy/softDropDownButton.css +2 -0
  44. package/front_end/ui/legacy/themeColors.css +3 -1
  45. package/front_end/ui/legacy/toolbar.css +6 -0
  46. package/package.json +1 -1
  47. package/scripts/build/devtools_plugin.js +103 -0
  48. package/scripts/build/ninja/{rollup.gni → bundle.gni} +2 -2
  49. package/scripts/build/ninja/devtools_entrypoint.gni +32 -24
  50. package/scripts/build/rollup.config.js +3 -93
  51. package/scripts/devtools_paths.js +3 -2
  52. package/scripts/devtools_paths.py +4 -0
  53. package/scripts/javascript_natives/helpers.js +211 -0
  54. package/scripts/javascript_natives/index.js +57 -194
  55. package/scripts/javascript_natives/package.json +8 -3
  56. package/scripts/javascript_natives/test.d.ts +9 -0
  57. package/scripts/javascript_natives/tests.js +195 -0
  58. package/scripts/protocol_typescript/protocol_dts_generator.ts +4 -9
  59. package/scripts/whitespaces.txt +1 -0
  60. package/front_end/generated/protocol.d.ts +0 -16771
  61. package/front_end/models/text_utils/CodeMirrorUtils.ts +0 -77
@@ -4,9 +4,9 @@
4
4
 
5
5
  import("//build/toolchain/rbe.gni")
6
6
  import("../../../third_party/typescript/typescript.gni")
7
+ import("./bundle.gni")
7
8
  import("./copy.gni")
8
9
  import("./node.gni")
9
- import("./rollup.gni")
10
10
  import("./vars.gni")
11
11
 
12
12
  # This defines an entrypoint for DevTools, which uses Rollup
@@ -19,7 +19,7 @@ import("./vars.gni")
19
19
  # import in `core/root/Runtime.js`.
20
20
  template("devtools_entrypoint") {
21
21
  assert(defined(invoker.entrypoint),
22
- "You must define the 'entrypoint' for a rollup target")
22
+ "You must define the 'entrypoint' for a bundle target")
23
23
 
24
24
  _entrypoint_target_name = "devtools_entrypoint-" + target_name
25
25
 
@@ -79,7 +79,7 @@ template("devtools_entrypoint") {
79
79
  # make sure that the GN dependency graph correctly corresponds
80
80
  # to that. Therefore, the graph looks like so:
81
81
  #
82
- # copy -> ts_library -> fix-tsconfig -> rollup
82
+ # copy -> ts_library -> fix-tsconfig -> bundle
83
83
  #
84
84
  _entrypoint_output_file_name = get_path_info(invoker.entrypoint, "name")
85
85
  _output_file_name =
@@ -88,10 +88,8 @@ template("devtools_entrypoint") {
88
88
  _prebundle_output_file_name = "$_output_file_name.js"
89
89
 
90
90
  _copy_target_name = _entrypoint_target_name + "-copy"
91
- _rollup_target_name = _entrypoint_target_name + "-rollup"
91
+ _bundle_target_name = _entrypoint_target_name + "-bundle"
92
92
  _prebundle_target_name = _entrypoint_target_name + "-tsconfig"
93
- _generated_declaration_target_name =
94
- _entrypoint_target_name + "-generate-declaration"
95
93
 
96
94
  node_action(_copy_target_name) {
97
95
  script = "scripts/build/ninja/copy-file.js"
@@ -129,12 +127,12 @@ template("devtools_entrypoint") {
129
127
  }
130
128
  }
131
129
 
132
- rollup(_rollup_target_name) {
130
+ bundle(_bundle_target_name) {
133
131
  entrypoint = _prebundle_output_file_name
134
132
 
135
133
  output_file_location = _entrypoint_gen_file_location
136
134
 
137
- # Since rollup bundles both the entrypoint and the files it imports,
135
+ # Since bundles both the entrypoint and the files it imports,
138
136
  # we have to make sure that, when you change a file it imports, we
139
137
  # retrigger Rollup. Since the `invoker.deps` is a reference to the
140
138
  # `ts_library` that compiles all of the files it imports, we have to
@@ -146,27 +144,37 @@ template("devtools_entrypoint") {
146
144
  public_deps = [ ":$_prebundle_target_name" ] + invoker.deps
147
145
  }
148
146
 
149
- # TypeScript requires a `module.d.ts` that describes
150
- # the public API of the `module.js` entrypoint. To do so, we copy
151
- # the generated `prebundle.d.ts` over, as the public API for a
152
- # rolled up bundle remains the same.
153
- node_action(_generated_declaration_target_name) {
154
- script = "scripts/build/ninja/generate-declaration.js"
147
+ if (!devtools_skip_typecheck) {
148
+ _generated_declaration_target_name =
149
+ _entrypoint_target_name + "-generate-declaration"
155
150
 
156
- args = [
157
- rebase_path(target_gen_dir, root_build_dir),
158
- invoker.entrypoint,
159
- ]
151
+ # TypeScript requires a `module.d.ts` that describes
152
+ # the public API of the `module.js` entrypoint. To do so, we copy
153
+ # the generated `prebundle.d.ts` over, as the public API for a
154
+ # rolled up bundle remains the same.
155
+ node_action(_generated_declaration_target_name) {
156
+ script = "scripts/build/ninja/generate-declaration.js"
157
+
158
+ args = [
159
+ rebase_path(target_gen_dir, root_build_dir),
160
+ invoker.entrypoint,
161
+ ]
160
162
 
161
- public_deps = [
163
+ public_deps = [
164
+ ":$_bundle_target_name",
165
+ ":$_prebundle_target_name",
166
+ ]
167
+
168
+ outputs = [ "$target_gen_dir/$_entrypoint_output_file_name.d.ts" ]
169
+ }
170
+
171
+ _devtools_entrypoint_deps += [ ":$_generated_declaration_target_name" ]
172
+ } else {
173
+ _devtools_entrypoint_deps += [
174
+ ":$_bundle_target_name",
162
175
  ":$_prebundle_target_name",
163
- ":$_rollup_target_name",
164
176
  ]
165
-
166
- outputs = [ "$target_gen_dir/$_entrypoint_output_file_name.d.ts" ]
167
177
  }
168
-
169
- _devtools_entrypoint_deps += [ ":$_generated_declaration_target_name" ]
170
178
  }
171
179
 
172
180
  # Because we change the filename before rolling up the bundle,
@@ -5,41 +5,10 @@
5
5
  // @ts-check
6
6
 
7
7
  import {defaultStrategy} from 'minify-html-literals/src/strategy'; // eslint-disable-line rulesdir/es_modules_import
8
- import * as path from 'path';
9
8
  import minifyHTML from 'rollup-plugin-minify-html-template-literals';
10
9
  import {terser} from 'rollup-plugin-terser';
11
10
 
12
- /**
13
- * `path.dirname` does not include trailing slashes. If we would always
14
- * use `path.dirname` and then later perform comparisons on the paths that
15
- * it returns, we could run into false positives. For example, given the
16
- * the following two paths:
17
- *
18
- * front_end/timeline_model/TimelineModel.js
19
- * front_end/timeline/Timeline.js
20
- *
21
- * And that would have the following values for `path.dirname`:
22
- *
23
- * front_end/timeline_model
24
- * front_end/timeline
25
- *
26
- * If we would do a simple `.startswith` on the `path.dirname` of both of
27
- * these paths, then the first path would start with the dirname of the
28
- * second. However, they *are* part of different folders. To fix that problem,
29
- * we need to force a path separator after each folder. That makes sure we
30
- * and up with the following comparison of path dirnames:
31
- *
32
- * front_end/timeline_model/
33
- * front_end/timeline/
34
- *
35
- * Now, the first path does *not* start with the second one, as expected.
36
- *
37
- * @param {string} file
38
- * @return {string}
39
- */
40
- function dirnameWithSeparator(file) {
41
- return path.dirname(file) + path.sep;
42
- }
11
+ const devtools_plugin = require('./devtools_plugin.js');
43
12
 
44
13
  /**
45
14
  * @type {import("minify-html-literals").Strategy<import("html-minifier").Options, unknown>}
@@ -91,67 +60,8 @@ export default commandLineArgs => ({
91
60
  {
92
61
  name: 'devtools-plugin',
93
62
  resolveId(source, importer) {
94
- if (!importer) {
95
- return null;
96
- }
97
- const currentDirectory = path.normalize(dirnameWithSeparator(importer));
98
- const importedFilelocation = path.normalize(path.join(currentDirectory, source));
99
- const importedFileDirectory = dirnameWithSeparator(importedFilelocation);
100
-
101
- // Generated files are part of other directories, as they are only imported once
102
- if (path.basename(importedFileDirectory) === 'generated') {
103
- return null;
104
- }
105
-
106
- // An import is considered external (and therefore a separate
107
- // bundle) if its filename matches its immediate parent's folder
108
- // name (without the extension). For example:
109
- // import * as Components from './components/components.js' = external
110
- // import * as UI from '../ui/ui.js' = external
111
- // import * as LitHtml from '../third_party/lit-html/lit-html.js' = external
112
- // import {DataGrid} from './components/DataGrid.js' = not external
113
- // import * as Components from './components/foo.js' = not external
114
-
115
- // Note that we can't do a simple check for only `third_party`, as in Chromium
116
- // our full path is `third_party/devtools-frontend/src/`, which thus *always*
117
- // includes third_party. It also not possible to use the current directory
118
- // as a check for the import, as the import will be different in Chromium and
119
- // would therefore not match the path of `__dirname`.
120
- // These should be removed because the new heuristic _should_ deal with these
121
- // e.g. it'll pick up third_party/lit-html/lit-html.js is its own entrypoint
122
-
123
- // Puppeteer has dynamic imports in its build gated on an ifNode
124
- // flag, but our Rollup config doesn't know about that and tries
125
- // to parse dynamic import('fs'). Let's ignore Puppeteer for now.
126
- // The long term plan is probably for Puppeteer to ship a web
127
- // bundle anyway. See go/pptr-agnostify for details.
128
- if (importedFileDirectory.includes(path.join('front_end', 'third_party', 'puppeteer'))) {
129
- return null;
130
- }
131
-
132
- // The CodeMirror addons look like bundles (addon/comment/comment.js) but are not.
133
- if (importedFileDirectory.includes(path.join('front_end', 'third_party', 'codemirror', 'package'))) {
134
- return null;
135
- }
136
-
137
- // The LightHouse bundle shouldn't be processed by `terser` again, as it is uniquely built
138
- if (importedFilelocation.includes(
139
- path.join('front_end', 'third_party', 'lighthouse', 'lighthouse-dt-bundle.js'))) {
140
- return {
141
- id: importedFilelocation,
142
- external: true,
143
- };
144
- }
145
-
146
- const importedFileName = path.basename(importedFilelocation, '.js');
147
- const importedFileParentDirectory = path.basename(path.dirname(importedFilelocation));
148
- const isExternal = importedFileName === importedFileParentDirectory;
149
-
150
- return {
151
- id: importedFilelocation,
152
- external: isExternal,
153
- };
154
- }
63
+ return devtools_plugin.devtoolsPlugin(source, importer);
64
+ },
155
65
  },
156
66
  ]
157
67
  });
@@ -59,8 +59,9 @@ function isInChromiumDirectory() {
59
59
  }
60
60
 
61
61
  const normalizedPath = PATH_TO_EXECUTED_FILE.split(path.sep).join('/');
62
- const isInChromium = normalizedPath.includes('chromium/src/third_party/devtools-frontend');
63
- const potentialChromiumDir = PATH_TO_EXECUTED_FILE.substring(0, PATH_TO_EXECUTED_FILE.indexOf('chromium') + 8);
62
+ const devtoolsPath = 'src/third_party/devtools-frontend';
63
+ const isInChromium = normalizedPath.includes(devtoolsPath);
64
+ const potentialChromiumDir = PATH_TO_EXECUTED_FILE.substring(0, PATH_TO_EXECUTED_FILE.indexOf(devtoolsPath));
64
65
  const result = {isInChromium, chromiumDirectory: potentialChromiumDir};
65
66
  _lookUpCaches.set('chromium', result);
66
67
  return result;
@@ -75,6 +75,10 @@ def hosted_mode_script_path():
75
75
  return path.join(devtools_root_path(), 'scripts', 'hosted_mode', 'server.js')
76
76
 
77
77
 
78
+ def esbuild_path():
79
+ return path.join(devtools_root_path(), 'third_party', 'esbuild', 'esbuild')
80
+
81
+
78
82
  def downloaded_chrome_binary_path():
79
83
  return path.abspath(path.join(
80
84
  *{
@@ -0,0 +1,211 @@
1
+ // Copyright 2021 The Chromium Authors. All rights reserved.
2
+ // Use of this source code is governed by a BSD-style license that can be
3
+ // found in the LICENSE file.
4
+
5
+ // @ts-check
6
+
7
+ import * as fs from 'fs';
8
+ import * as path from 'path';
9
+ import {fileURLToPath} from 'url';
10
+
11
+ /** @type {Map<string, Map<string, string[][]>>} */
12
+ const methods = new Map();
13
+
14
+ export function clearState() {
15
+ methods.clear();
16
+ }
17
+
18
+ export function parseTSFunction(func, node) {
19
+ if (!func.name.escapedText) {
20
+ return;
21
+ }
22
+
23
+ const args = func.parameters
24
+ .map(p => {
25
+ let text = p.name.escapedText;
26
+ if (p.questionToken) {
27
+ text = '?' + text;
28
+ }
29
+ if (p.dotDotDotToken) {
30
+ text = '...' + text;
31
+ }
32
+ return text;
33
+ })
34
+ .filter(x => x !== 'this');
35
+ storeMethod(node.name.text, func.name.escapedText, args);
36
+ }
37
+
38
+ /**
39
+ * @param {WebIDL2.IDLRootType} thing
40
+ * */
41
+ export function walkRoot(thing) {
42
+ switch (thing.type) {
43
+ case 'interface':
44
+ walkInterface(thing);
45
+ break;
46
+ case 'interface mixin':
47
+ case 'namespace':
48
+ walkMembers(thing);
49
+ break;
50
+ }
51
+ }
52
+
53
+ /**
54
+ * @param {WebIDL2.InterfaceType} thing
55
+ * */
56
+ function walkInterface(thing) {
57
+ thing.members.forEach(member => {
58
+ switch (member.type) {
59
+ case 'constructor':
60
+ storeMethod('Window', thing.name, member.arguments.map(argName));
61
+ break;
62
+ case 'operation':
63
+ handleOperation(member);
64
+ }
65
+ });
66
+ const namedConstructor = thing.extAttrs.find(extAttr => extAttr.name === 'NamedConstructor');
67
+ if (namedConstructor && namedConstructor.arguments) {
68
+ storeMethod('Window', namedConstructor.rhs.value, namedConstructor.arguments.map(argName));
69
+ }
70
+ }
71
+
72
+ /**
73
+ * @param {WebIDL2.NamespaceType | WebIDL2.InterfaceMixinType} thing
74
+ * */
75
+ function walkMembers(thing) {
76
+ thing.members.forEach(member => {
77
+ if (member.type === 'operation') {
78
+ handleOperation(member);
79
+ }
80
+ });
81
+ }
82
+
83
+ /**
84
+ * @param {WebIDL2.OperationMemberType} member
85
+ * */
86
+ function handleOperation(member) {
87
+ storeMethod(
88
+ member.special === 'static' ? (parent.name + 'Constructor') : member.parent.name, member.name,
89
+ member.arguments.map(argName));
90
+ }
91
+
92
+ /**
93
+ * @param {WebIDL2.Argument} a
94
+ * */
95
+ function argName(a) {
96
+ let name = a.name;
97
+ if (a.optional) {
98
+ name = '?' + name;
99
+ }
100
+ if (a.variadic) {
101
+ name = '...' + name;
102
+ }
103
+ return name;
104
+ }
105
+
106
+ /**
107
+ * @param {string} parent
108
+ * @param {string} name
109
+ * @param {Array<string>} args
110
+ * */
111
+ function storeMethod(parent, name, args) {
112
+ if (!methods.has(name)) {
113
+ methods.set(name, new Map());
114
+ }
115
+ const method = methods.get(name);
116
+ if (!method.has(parent)) {
117
+ method.set(parent, []);
118
+ }
119
+ method.get(parent).push(args);
120
+ }
121
+
122
+ export function postProcess(dryRun = false) {
123
+ for (const name of methods.keys()) {
124
+ // We use the set jsonParents to track the set of different signatures across parent for this function name.
125
+ // If all signatures are identical, we leave out the parent and emit a single NativeFunction entry without receiver.
126
+ const jsonParents = new Set();
127
+ for (const [parent, signatures] of methods.get(name)) {
128
+ signatures.sort((a, b) => a.length - b.length);
129
+ const filteredSignatures = [];
130
+ for (const signature of signatures) {
131
+ const smallerIndex = filteredSignatures.findIndex(smaller => startsTheSame(smaller, signature));
132
+ if (smallerIndex !== -1) {
133
+ filteredSignatures[smallerIndex] = (signature.map((arg, index) => {
134
+ const otherArg = filteredSignatures[smallerIndex][index];
135
+ if (otherArg) {
136
+ return otherArg.length > arg.length ? otherArg : arg;
137
+ }
138
+ if (arg.startsWith('?') || arg.startsWith('...')) {
139
+ return arg;
140
+ }
141
+ return '?' + arg;
142
+ }));
143
+ } else {
144
+ filteredSignatures.push(signature);
145
+ }
146
+ }
147
+
148
+ function startsTheSame(smaller, bigger) {
149
+ for (let i = 0; i < smaller.length; i++) {
150
+ const withoutQuestion = str => /[\?]?(.*)/.exec(str)[1];
151
+ if (withoutQuestion(smaller[i]) !== withoutQuestion(bigger[i])) {
152
+ return false;
153
+ }
154
+ }
155
+ return true;
156
+ }
157
+
158
+ methods.get(name).set(parent, filteredSignatures);
159
+ jsonParents.add(JSON.stringify(filteredSignatures));
160
+ }
161
+ // If all parents had the same signature for this name, we put a `*` as parent for this entry.
162
+ if (jsonParents.size === 1) {
163
+ methods.set(name, new Map([['*', JSON.parse(jsonParents.values().next().value)]]));
164
+ }
165
+ for (const [parent, signatures] of methods.get(name)) {
166
+ if (signatures.length === 1 && !signatures[0].length) {
167
+ methods.get(name).delete(parent);
168
+ }
169
+ }
170
+ if (methods.get(name).size === 0) {
171
+ methods.delete(name);
172
+ }
173
+ }
174
+ const functions = [];
175
+ for (const [name, method] of methods) {
176
+ if (method.has('*')) {
177
+ // All parents had the same signature so we emit an entry without receiver.
178
+ functions.push({name, signatures: method.get('*')});
179
+ } else {
180
+ for (const [parent, signatures] of method) {
181
+ if (parent.endsWith('Constructor')) {
182
+ functions.push(
183
+ {name, signatures, static: true, receiver: parent.substring(0, parent.length - 'Constructor'.length)});
184
+ } else {
185
+ functions.push({name, signatures, receiver: parent});
186
+ }
187
+ }
188
+ }
189
+ }
190
+ const output = `export const NativeFunctions = [\n${
191
+ functions
192
+ .map(
193
+ entry =>
194
+ ` {\n${Object.entries(entry).map(kv => ` ${kv[0]}: ${JSON.stringify(kv[1])}`).join(',\n')}\n }`)
195
+ .join(',\n')}\n];`;
196
+
197
+ if (dryRun) {
198
+ return output;
199
+ }
200
+
201
+ fs.writeFileSync(
202
+ (new URL('../../front_end/models/javascript_metadata/NativeFunctions.js', import.meta.url)).pathname,
203
+ `// Copyright 2020 The Chromium Authors. All rights reserved.
204
+ // Use of this source code is governed by a BSD-style license that can be
205
+ // found in the LICENSE file.
206
+ // Generated from ${
207
+ path.relative(path.join(fileURLToPath(import.meta.url), '..', '..'), fileURLToPath(import.meta.url))}
208
+
209
+ ${output}
210
+ `);
211
+ }