chrome-devtools-frontend 1.0.1516909 → 1.0.1519267

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 (162) hide show
  1. package/config/owner/COMMON_OWNERS +2 -2
  2. package/docs/checklist/README.md +2 -2
  3. package/docs/checklist/javascript.md +1 -1
  4. package/docs/contributing/README.md +1 -1
  5. package/docs/contributing/settings-experiments-features.md +9 -8
  6. package/docs/cookbook/devtools_on_devtools.md +2 -2
  7. package/docs/cookbook/localization.md +10 -10
  8. package/docs/devtools-protocol.md +9 -8
  9. package/docs/ecosystem/automatic_workspace_folders.md +3 -3
  10. package/docs/get_the_code.md +0 -2
  11. package/docs/styleguide/ux/components.md +166 -85
  12. package/docs/styleguide/ux/numbers.md +3 -4
  13. package/eslint.config.mjs +1 -0
  14. package/front_end/core/common/README.md +13 -12
  15. package/front_end/core/host/GdpClient.ts +16 -1
  16. package/front_end/core/host/UserMetrics.ts +4 -2
  17. package/front_end/core/root/Runtime.ts +13 -0
  18. package/front_end/core/sdk/CSSMatchedStyles.ts +5 -1
  19. package/front_end/core/sdk/EnhancedTracesParser.ts +5 -5
  20. package/front_end/core/sdk/RehydratingConnection.snapshot.txt +211 -0
  21. package/front_end/core/sdk/TargetManager.ts +4 -0
  22. package/front_end/entrypoints/main/MainImpl.ts +6 -3
  23. package/front_end/generated/InspectorBackendCommands.js +10 -7
  24. package/front_end/generated/SupportedCSSProperties.js +40 -11
  25. package/front_end/generated/protocol-mapping.d.ts +16 -1
  26. package/front_end/generated/protocol-proxy-api.d.ts +13 -1
  27. package/front_end/generated/protocol.ts +95 -0
  28. package/front_end/models/ai_assistance/agents/AiAgent.ts +57 -10
  29. package/front_end/models/ai_assistance/agents/PerformanceAgent.ts +119 -51
  30. package/front_end/models/ai_assistance/agents/StylingAgent.ts +0 -31
  31. package/front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.snapshot.txt +14 -181
  32. package/front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.ts +19 -315
  33. package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.snapshot.txt +224 -50
  34. package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.ts +310 -11
  35. package/front_end/models/ai_assistance/performance/AIContext.ts +15 -2
  36. package/front_end/models/ai_code_completion/AiCodeCompletion.ts +22 -11
  37. package/front_end/models/badges/AiExplorerBadge.ts +19 -3
  38. package/front_end/models/badges/Badge.ts +10 -3
  39. package/front_end/models/badges/CodeWhispererBadge.ts +3 -4
  40. package/front_end/models/badges/DOMDetectiveBadge.ts +1 -0
  41. package/front_end/models/badges/SpeedsterBadge.ts +1 -0
  42. package/front_end/models/badges/StarterBadge.ts +3 -2
  43. package/front_end/models/badges/UserBadges.ts +21 -3
  44. package/front_end/models/badges/badges.ts +1 -0
  45. package/front_end/models/javascript_metadata/NativeFunctions.js +2 -2
  46. package/front_end/models/trace/EventsSerializer.ts +4 -3
  47. package/front_end/models/trace/README.md +28 -1
  48. package/front_end/models/trace/handlers/UserInteractionsHandler.ts +101 -73
  49. package/front_end/models/trace/handlers/UserTimingsHandler.ts +1 -1
  50. package/front_end/models/trace/helpers/Timing.ts +1 -1
  51. package/front_end/models/trace/helpers/Trace.ts +99 -43
  52. package/front_end/models/trace/types/TraceEvents.ts +9 -0
  53. package/front_end/panels/accessibility/ARIAAttributesView.ts +113 -191
  54. package/front_end/panels/accessibility/AccessibilityNodeView.ts +9 -9
  55. package/front_end/panels/accessibility/AccessibilitySubPane.ts +6 -4
  56. package/front_end/panels/accessibility/accessibilityProperties.css +2 -0
  57. package/front_end/panels/ai_assistance/AiAssistancePanel.ts +20 -3
  58. package/front_end/panels/ai_assistance/components/ChatView.ts +9 -10
  59. package/front_end/panels/ai_assistance/components/PerformanceAgentMarkdownRenderer.ts +44 -0
  60. package/front_end/panels/application/components/BounceTrackingMitigationsView.ts +2 -2
  61. package/front_end/panels/common/AiCodeCompletionDisclaimer.ts +32 -9
  62. package/front_end/panels/common/AiCodeCompletionSummaryToolbar.ts +7 -1
  63. package/front_end/panels/common/BadgeNotification.ts +21 -5
  64. package/front_end/panels/common/GdpSignUpDialog.ts +20 -12
  65. package/front_end/panels/console/ConsolePrompt.ts +1 -1
  66. package/front_end/panels/console/ConsoleView.ts +6 -2
  67. package/front_end/panels/css_overview/CSSOverviewCompletedView.ts +5 -5
  68. package/front_end/panels/elements/ElementsPanel.ts +4 -0
  69. package/front_end/panels/elements/ElementsTreeElement.ts +18 -0
  70. package/front_end/panels/elements/ElementsTreeOutline.ts +13 -0
  71. package/front_end/panels/elements/StylePropertyTreeElement.ts +21 -6
  72. package/front_end/panels/media/TickingFlameChart.ts +1 -1
  73. package/front_end/panels/profiler/HeapSnapshotView.ts +34 -19
  74. package/front_end/panels/recorder/components/RecordingView.ts +2 -2
  75. package/front_end/panels/search/SearchResultsPane.ts +167 -152
  76. package/front_end/panels/search/SearchView.ts +36 -26
  77. package/front_end/panels/search/searchResultsPane.css +9 -0
  78. package/front_end/panels/security/CookieControlsView.ts +2 -1
  79. package/front_end/panels/settings/AISettingsTab.ts +6 -3
  80. package/front_end/panels/settings/components/SyncSection.ts +39 -17
  81. package/front_end/panels/settings/emulation/components/UserAgentClientHintsForm.ts +1 -1
  82. package/front_end/panels/sources/AiCodeCompletionPlugin.ts +9 -1
  83. package/front_end/panels/sources/SourcesPanel.ts +4 -1
  84. package/front_end/panels/sources/sourcesView.css +6 -1
  85. package/front_end/panels/timeline/AppenderUtils.ts +2 -2
  86. package/front_end/panels/timeline/ExtensionTrackAppender.ts +13 -4
  87. package/front_end/panels/timeline/GPUTrackAppender.ts +2 -1
  88. package/front_end/panels/timeline/InteractionsTrackAppender.ts +5 -1
  89. package/front_end/panels/timeline/LayoutShiftsTrackAppender.ts +2 -1
  90. package/front_end/panels/timeline/ThreadAppender.ts +12 -3
  91. package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts +9 -4
  92. package/front_end/panels/timeline/TimelinePanel.ts +3 -2
  93. package/front_end/panels/timeline/TimelineUIUtils.ts +5 -4
  94. package/front_end/panels/timeline/TimingsTrackAppender.ts +6 -1
  95. package/front_end/panels/timeline/components/CPUThrottlingSelector.ts +95 -82
  96. package/front_end/panels/timeline/components/LayoutShiftDetails.ts +1 -1
  97. package/front_end/panels/timeline/components/LiveMetricsView.ts +2 -2
  98. package/front_end/panels/timeline/components/NetworkRequestDetails.ts +1 -1
  99. package/front_end/panels/timeline/components/RelatedInsightChips.ts +1 -1
  100. package/front_end/panels/timeline/components/SidebarSingleInsightSet.ts +1 -1
  101. package/front_end/panels/timeline/components/cpuThrottlingSelector.css +17 -15
  102. package/front_end/panels/timeline/components/insights/BaseInsightComponent.ts +3 -0
  103. package/front_end/third_party/chromium/README.chromium +1 -1
  104. package/front_end/third_party/codemirror.next/chunk/codemirror.js +1 -1
  105. package/front_end/third_party/codemirror.next/chunk/codemirror.js.map +1 -1
  106. package/front_end/third_party/codemirror.next/codemirror.next.d.ts +6 -9
  107. package/front_end/third_party/codemirror.next/package.json +2 -1
  108. package/front_end/third_party/diff/README.chromium +1 -0
  109. package/front_end/third_party/puppeteer/README.chromium +2 -2
  110. package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/bidi/core/Realm.d.ts +2 -2
  111. package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/generated/injected.d.ts +1 -1
  112. package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/generated/injected.js +1 -1
  113. package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/generated/version.d.ts +1 -1
  114. package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/generated/version.js +1 -1
  115. package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/injected/injected.d.ts +1 -1
  116. package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/node/ChromeLauncher.d.ts.map +1 -1
  117. package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/node/ChromeLauncher.js +1 -0
  118. package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/node/ChromeLauncher.js.map +1 -1
  119. package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/revisions.d.ts +3 -3
  120. package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/revisions.js +3 -3
  121. package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/revisions.js.map +1 -1
  122. package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/util/Function.d.ts.map +1 -1
  123. package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/util/Function.js +16 -25
  124. package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/util/Function.js.map +1 -1
  125. package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/util/Mutex.d.ts +2 -2
  126. package/front_end/third_party/puppeteer/package/lib/es5-iife/puppeteer-core-browser.js +19 -28
  127. package/front_end/third_party/puppeteer/package/lib/esm/puppeteer/generated/injected.d.ts +1 -1
  128. package/front_end/third_party/puppeteer/package/lib/esm/puppeteer/generated/injected.js +1 -1
  129. package/front_end/third_party/puppeteer/package/lib/esm/puppeteer/generated/version.d.ts +1 -1
  130. package/front_end/third_party/puppeteer/package/lib/esm/puppeteer/generated/version.js +1 -1
  131. package/front_end/third_party/puppeteer/package/lib/esm/puppeteer/node/ChromeLauncher.d.ts.map +1 -1
  132. package/front_end/third_party/puppeteer/package/lib/esm/puppeteer/node/ChromeLauncher.js +1 -0
  133. package/front_end/third_party/puppeteer/package/lib/esm/puppeteer/node/ChromeLauncher.js.map +1 -1
  134. package/front_end/third_party/puppeteer/package/lib/esm/puppeteer/revisions.d.ts +3 -3
  135. package/front_end/third_party/puppeteer/package/lib/esm/puppeteer/revisions.js +3 -3
  136. package/front_end/third_party/puppeteer/package/lib/esm/puppeteer/revisions.js.map +1 -1
  137. package/front_end/third_party/puppeteer/package/lib/esm/puppeteer/util/Function.d.ts.map +1 -1
  138. package/front_end/third_party/puppeteer/package/lib/esm/puppeteer/util/Function.js +16 -25
  139. package/front_end/third_party/puppeteer/package/lib/esm/puppeteer/util/Function.js.map +1 -1
  140. package/front_end/third_party/puppeteer/package/package.json +10 -3
  141. package/front_end/third_party/puppeteer/package/src/generated/injected.ts +1 -1
  142. package/front_end/third_party/puppeteer/package/src/generated/version.ts +1 -1
  143. package/front_end/third_party/puppeteer/package/src/node/ChromeLauncher.ts +1 -0
  144. package/front_end/third_party/puppeteer/package/src/revisions.ts +3 -3
  145. package/front_end/third_party/puppeteer/package/src/util/Function.ts +22 -30
  146. package/front_end/ui/components/dialogs/Dialog.ts +1 -1
  147. package/front_end/ui/components/markdown_view/MarkdownImage.ts +4 -5
  148. package/front_end/ui/components/switch/SwitchImpl.ts +12 -1
  149. package/front_end/ui/components/text_editor/config.ts +22 -9
  150. package/front_end/ui/components/tooltips/Tooltip.ts +70 -31
  151. package/front_end/ui/legacy/README.md +33 -24
  152. package/front_end/ui/legacy/SearchableView.ts +19 -26
  153. package/front_end/ui/legacy/TextPrompt.ts +166 -1
  154. package/front_end/ui/legacy/Treeoutline.ts +19 -3
  155. package/front_end/ui/legacy/UIUtils.ts +15 -2
  156. package/front_end/ui/legacy/XElement.ts +0 -43
  157. package/front_end/ui/legacy/components/perf_ui/FlameChart.ts +20 -4
  158. package/front_end/ui/legacy/components/source_frame/XMLView.ts +12 -11
  159. package/front_end/ui/lit/i18n-template.ts +5 -2
  160. package/front_end/ui/visual_logging/KnownContextValues.ts +23 -6
  161. package/front_end/ui/visual_logging/README.md +43 -27
  162. package/package.json +1 -1
@@ -16,15 +16,15 @@ kprokopenko@chromium.org
16
16
  leese@chromium.org
17
17
  mathias@chromium.org
18
18
  nancyly@chromium.org
19
- nechaev@chromium.org
20
19
  nharshunova@chromium.org
20
+ nroscino@chromium.org
21
21
  nvitkov@chromium.org
22
22
  paulirish@chromium.org
23
23
  petermueller@chromium.org
24
24
  pfaffe@chromium.org
25
25
  piotrpaulski@chromium.org
26
26
  sadym@chromium.org
27
- samiyac@chromium.org
27
+ samiyac@google.com
28
28
  szuend@chromium.org
29
29
  victorporof@chromium.org
30
30
  wolfi@chromium.org
@@ -46,7 +46,7 @@ in the Elements tab looks alright and works as expected (typically, this require
46
46
 
47
47
  Verify that the new properties show up in the DevTools Console autocomplete functionality (typically, this requires no additional implementation effort).
48
48
  To enable argument hints for new or changed parameterized functions, run
49
- ```
49
+ ```bash
50
50
  devtools-frontend/src/scripts/deps/roll_deps.py
51
51
  ```
52
52
  to re-generate `devtools-frontend/src/front_end/models/javascript\_metadata/NativeFunctions.js` ([Example CL](http://crrev.com/c/3432787)).
@@ -88,7 +88,7 @@ Example for `:target`: [Chromium back-end CL](https://chromium-review.googlesour
88
88
 
89
89
  To recognize new CSS properties/values in the DevTools Styles panel’s autocomplete functionality, roll
90
90
  [Chromium’s `css_properties.json5`](https://source.chromium.org/chromium/chromium/src/+/main:third\_party/blink/renderer/core/css/css_properties.json5;drc=be2c473625b9c28a4ff6735547cb0c1b6743f4ae) into the `devtools-frontend` repository by running
91
- ```
91
+ ```bash
92
92
  devtools-frontend/src/scripts/deps/roll_deps.py
93
93
  ```
94
94
  see this [example CL](https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2972583).
@@ -306,7 +306,7 @@ NLFs that contain control flow (e.g branches, loops, etc.).
306
306
 
307
307
  Run `d8` with `--lcov` and check whether the produced coverage information is correct. E.g. like this:
308
308
 
309
- ```
309
+ ```bash
310
310
  ./d8 --lcov=cov.info test.js
311
311
  genhtml cov.info -o coverage
312
312
  ```
@@ -187,7 +187,7 @@ Once you’re done preparing your patch, it’s time to upload your changes.
187
187
 
188
188
  After that, you are ready to start the patch upload:
189
189
 
190
- ```
190
+ ```bash
191
191
  # upload your patch to codereview…
192
192
  git cl upload
193
193
  ```
@@ -49,13 +49,13 @@ const base::FeatureParam<double> kDevToolsNewFeatureDoubleParam{
49
49
 
50
50
  Start Chrome via command line including flags:
51
51
 
52
- ```
52
+ ```bash
53
53
  out/Default/chrome --enable-features=DevToolsNewFeature
54
54
  ```
55
55
 
56
56
  You can even pass additional feature parameters:
57
57
 
58
- ```
58
+ ```bash
59
59
  out/Default/chrome --enable-features="DevToolsNewFeature:string_param/foo/double_param/0.5"
60
60
  ```
61
61
 
@@ -113,7 +113,8 @@ In DevTools, you need to register the experiment. This is done in
113
113
  Root.Runtime.experiments.register(
114
114
  'yourExperimentNameHere',
115
115
  'User facing short description of experiment here',
116
- false);
116
+ false,
117
+ );
117
118
  ```
118
119
 
119
120
  The first argument is the experiment's label, and **this must match the label
@@ -134,9 +135,9 @@ documentation and a way to provide feedback:
134
135
  Root.Runtime.experiments.register(
135
136
  'jsProfilerTemporarilyEnable',
136
137
  'Enable JavaScript Profiler temporarily',
137
- /* unstable= */ false,
138
- /* documentation */ 'https://goo.gle/js-profiler-deprecation',
139
- /* feedback */ 'https://crbug.com/1354548'
138
+ /* unstable= */ false,
139
+ /* documentation */ 'https://goo.gle/js-profiler-deprecation',
140
+ /* feedback */ 'https://crbug.com/1354548',
140
141
  );
141
142
  ```
142
143
 
@@ -149,7 +150,7 @@ Once the experiment is registered, you can check if it is enabled and use this
149
150
  to run certain code blocks conditionally:
150
151
 
151
152
  ```ts
152
- if(Root.Runtime.experiments.isEnabled('yourExperimentNameHere')) {
153
- // Experiment code here
153
+ if (Root.Runtime.experiments.isEnabled('yourExperimentNameHere')) {
154
+ // Experiment code here
154
155
  }
155
156
  ```
@@ -43,7 +43,7 @@ set up your Chrome or Chromium instance for earlier versions of M-136 and M-135.
43
43
 
44
44
  Then in your `devtools-frontend` checkout, use
45
45
 
46
- ```
46
+ ```bash
47
47
  ./third_party/chrome/chrome-linux/chrome \
48
48
  --disable-infobars \
49
49
  --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end)
@@ -51,7 +51,7 @@ Then in your `devtools-frontend` checkout, use
51
51
 
52
52
  on Linux or
53
53
 
54
- ```
54
+ ```bash
55
55
  ./third_party/chrome/chrome-mac/Google\ Chrome\ for\ Testing.app/Contents/MacOS/Google\ Chrome\ for\ Testing \
56
56
  --disable-infobars \
57
57
  --disable-features=MediaRouter \
@@ -15,7 +15,7 @@ Before proceeding, make sure you know the different
15
15
 
16
16
  Code example:
17
17
 
18
- ```js
18
+ ```ts
19
19
  import * as i18n from '../i18n/i18n.js';
20
20
 
21
21
  // at the top of example.js file, after import statements
@@ -57,7 +57,7 @@ console.log(message2);
57
57
  to it. If there isn't `UIStrings = {}` in the file, create one and add your
58
58
  string, also register the new UIStrings into the `en-US.json` by adding:
59
59
 
60
- ```js
60
+ ```ts
61
61
  // Filename should be relative to front_end folder
62
62
  const str_ = i18n.i18n.registerUIStrings('<filename>', UIStrings);
63
63
  const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -145,7 +145,7 @@ The basic API to make a string (with or without placeholder) localizable. The
145
145
  first argument is the string reference in `UIStrings` The second argument is an
146
146
  object for placeholders (if any)
147
147
 
148
- ```js
148
+ ```ts
149
149
  // at the top of example.js file, after import statements
150
150
 
151
151
  const UIStrings = {
@@ -172,7 +172,7 @@ locale, which are not available until after DevTools has finished starting up.
172
172
  Calls to `i18nString` in the module scope will therefore fail when the module is
173
173
  imported.
174
174
 
175
- ```js
175
+ ```ts
176
176
  // Fails because i18nString runs at module-import time.
177
177
  Common.Settings.registerSettingExtension({
178
178
  category: Common.Settings.SettingCategory.CONSOLE,
@@ -188,7 +188,7 @@ function notTopLevel() {
188
188
  closure that returns a `LocalizedString`. It can be used in top-level calls;
189
189
  just make sure use-sites know it's a function now.
190
190
 
191
- ```js
191
+ ```ts
192
192
  // Works because i18nLazyString defers the loading of the translated string until later.
193
193
  Common.Settings.registerSettingExtension({
194
194
  category: Common.Settings.SettingCategory.CONSOLE,
@@ -207,7 +207,7 @@ This call returns a **span element**, not a string. It is used when you want to
207
207
  construct a DOM element with a localizable string, or localizable content that
208
208
  contains some other DOM element.
209
209
 
210
- ```js
210
+ ```ts
211
211
  // Create the string in UIString
212
212
  /**
213
213
  *@description Message in Coverage View of the Coverage tab
@@ -228,7 +228,7 @@ This call is a named cast. Use it in places where a localized string is expected
228
228
  but the term you want to use does not require translation. Instead of locking
229
229
  the whole phrase or using a placeholder-only phrase, use `lockedString`.
230
230
 
231
- ```js
231
+ ```ts
232
232
  someFunctionRequiringALocalizedString(i18n.i18n.lockedString('HTTP'));
233
233
  ```
234
234
 
@@ -240,7 +240,7 @@ languages!
240
240
 
241
241
  **Good description**:
242
242
 
243
- ```js
243
+ ```ts
244
244
  const UIStrings = {
245
245
  /**
246
246
  * @description Tooltip text that appears when hovering over the 'Focusable' attribute name under the Computed Properties section in the Accessibility pane of the Elements pane.
@@ -251,7 +251,7 @@ const UIStrings = {
251
251
 
252
252
  **Bad description**:
253
253
 
254
- ```js
254
+ ```ts
255
255
  const UIStrings = {
256
256
  /**
257
257
  * @description Elements pane 'Focusable' tooltip.
@@ -289,7 +289,7 @@ const UIStrings = {
289
289
  Any text within the backticks will not be translated. For example, if the
290
290
  'robots.txt' in string 'Requesting for robots.txt …' should not be translated:
291
291
 
292
- ```js
292
+ ```ts
293
293
  // in example.js file
294
294
 
295
295
  import * as i18n from '../i18n/i18n.js';
@@ -73,9 +73,9 @@ Open the file
73
73
  `third_party/blink/renderer/core/inspector/inspector_protocol_config.json` and
74
74
  under `protocol.options`, add your new domain:
75
75
 
76
- ```
76
+ ```json
77
77
  {
78
- "domain": "YourNewDomain"
78
+ "domain": "YourNewDomain"
79
79
  }
80
80
  ```
81
81
 
@@ -85,7 +85,7 @@ Build chromium as you normally would.
85
85
  #### 1.6- See the newly generated protocol C++ files
86
86
  Your new domain files should be generated in this folder:
87
87
 
88
- ```
88
+ ```bash
89
89
  src/out/Default/gen/third_party/blink/renderer/core/inspector/protocol/your_new_domain.cc
90
90
  src/out/Default/gen/third_party/blink/renderer/core/inspector/protocol/your_new_domain.h
91
91
  ```
@@ -94,7 +94,7 @@ src/out/Default/gen/third_party/blink/renderer/core/inspector/protocol/your_new_
94
94
 
95
95
  Open the file `devtools-frontend/front_end/core/protocol_client/InspectorBackend.ts` and add a new method to expose your Agent.
96
96
 
97
- ```
97
+ ```ts
98
98
  youNewDomainAgent(): ProtocolProxyApi.YourNewAgentApi {
99
99
  return this.getAgent('YourNewAgent');
100
100
  }
@@ -112,13 +112,14 @@ outputs = [
112
112
  ...
113
113
  "inspector/protocol/your_new_domain.cc",
114
114
  "inspector/protocol/your_new_domain.h",
115
+ ]
115
116
  ```
116
117
 
117
118
  ### 2- Sync the browser_protocol files and generate the protocol resources
118
119
  As mentioned before, there are many browser_protocol files. To synchronize the
119
120
  modifications, run this command from your Chrome DevTools repository:
120
121
 
121
- ```
122
+ ```bash
122
123
  scripts/deps/roll_deps.py ~/chromium/src .
123
124
  ```
124
125
 
@@ -132,7 +133,7 @@ Chrome DevTools repository.
132
133
  The Agent class should inherit the newly created protocol
133
134
  `protocol::YourNewDomainAgent::Metainfo`
134
135
 
135
- ```
136
+ ```cpp
136
137
  class MODULES_EXPORT YourNewDomainAgent final : public InspectorBaseAgent<protocol::YourNewDomainAgent::Metainfo> {
137
138
  ```
138
139
 
@@ -141,7 +142,7 @@ The Agent must be registered with the Session. To do so, go to the file
141
142
  `third_party/blink/renderer/modules/modules_initializer.cc` and append it to the
142
143
  session in this method:
143
144
 
144
- ```
145
+ ```cpp
145
146
  void ModulesInitializer::InitInspectorAgentSession {
146
147
 
147
148
  session->CreateAndAppend<YourNewAgent>...
@@ -151,7 +152,7 @@ session->CreateAndAppend<YourNewAgent>...
151
152
  In the TypeScript class, your agent can now be accessible directly from the
152
153
  target. With the target, you can simply access your agent like this:
153
154
 
154
- ```
155
+ ```ts
155
156
  initialize(target: SDK.Target.Target) {
156
157
  target.yourNewDomainAgent();
157
158
  }
@@ -54,7 +54,7 @@ workspace folders, it has to contain a `workspace` object with two properties:
54
54
 
55
55
  An example `com.chrome.devtools.json` would look like this:
56
56
 
57
- ```
57
+ ```json
58
58
  {
59
59
  "workspace": {
60
60
  "root": "/Users/foobar/Projects/my-awesome-web-project",
@@ -81,7 +81,7 @@ turn on two feature flags in `about:flags`:
81
81
  Instead of enabling the feature via `about:flags`, you can instead also enable
82
82
  them from the command line:
83
83
 
84
- ```
84
+ ```bash
85
85
  google-chrome-canary --enable-features=DevToolsWellKnown,DevToolsAutomaticFileSystems
86
86
  ```
87
87
 
@@ -99,7 +99,7 @@ need to do is to create a `.well-known/appspecific` folder and place a
99
99
  and you're directly serving the artifacts for your project from its source
100
100
  directory in `/Users/foo/bar`, then you could can accomplish the setup via:
101
101
 
102
- ```
102
+ ```bash
103
103
  cd /Users/foo/bar
104
104
  mkdir -p .well-known/appspecific
105
105
  echo "{\"workspace\":{\"root\":\"${PWD}\",\"uuid\":\"`npx --package uuid uuid v4`\"}}" > .well-known/appspecific/com.chrome.devtools.json
@@ -59,7 +59,6 @@ gn gen out/fast-build --args="devtools_skip_typecheck=true devtools_bundle=false
59
59
  and use `npm run build -- -t fast-build` to build this target (you can of course
60
60
  also just change the `Default` target to skip bundling and type checking).
61
61
 
62
-
63
62
  ### Rebuilding automatically
64
63
 
65
64
  You can use
@@ -176,7 +175,6 @@ npm start -- --verbose
176
175
  to enable verbose logging, which among other things, also prints all output from Chrome to the terminal, which is
177
176
  otherwise suppressed.
178
177
 
179
-
180
178
  ##### Controlling the feature set
181
179
 
182
180
  By default `npm start` will enable a bunch of experimental features (related to DevTools) that are considered ready for teamfood.