chrome-devtools-frontend 1.0.1656897 → 1.0.1657855

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 (113) hide show
  1. package/.agents/skills/devtools-ux-writing-refactor/SKILL.md +125 -0
  2. package/.agents/skills/repro-flaky-tests/SKILL.md +53 -0
  3. package/AUTHORS +2 -0
  4. package/docs/get_the_code.md +6 -6
  5. package/front_end/Images/src/ads.svg +1 -0
  6. package/front_end/Tests.js +1 -1
  7. package/front_end/core/common/ResourceType.ts +19 -19
  8. package/front_end/core/common/Revealer.ts +15 -15
  9. package/front_end/core/common/SettingRegistration.ts +19 -19
  10. package/front_end/core/common/Settings.ts +0 -8
  11. package/front_end/core/host/Platform.ts +4 -0
  12. package/front_end/core/sdk/CSSMetadata.ts +121 -16
  13. package/front_end/core/sdk/CSSModel.ts +3 -0
  14. package/front_end/core/sdk/DOMModel.ts +37 -8
  15. package/front_end/core/sdk/DebuggerModel.ts +5 -4
  16. package/front_end/core/sdk/EmulationModel.ts +6 -4
  17. package/front_end/core/sdk/NetworkManager.ts +22 -17
  18. package/front_end/core/sdk/RuntimeModel.ts +1 -1
  19. package/front_end/core/sdk/TargetManager.ts +10 -0
  20. package/front_end/design_system_tokens.css +6 -0
  21. package/front_end/entrypoints/devtools_app/devtools_app.ts +1 -1
  22. package/front_end/entrypoints/formatter_worker/CSSFormatter.ts +13 -4
  23. package/front_end/entrypoints/formatter_worker/FormatterWorker.ts +23 -4
  24. package/front_end/entrypoints/formatter_worker/HTMLFormatter.ts +7 -6
  25. package/front_end/entrypoints/inspector_main/InspectorMain.ts +1 -11
  26. package/front_end/entrypoints/inspector_main/inspector_main-meta.ts +1 -1
  27. package/front_end/entrypoints/main/GlobalAiButton.ts +29 -35
  28. package/front_end/entrypoints/main/MainImpl.ts +7 -34
  29. package/front_end/entrypoints/main/main-meta.ts +9 -9
  30. package/front_end/entrypoints/node_app/app/NodeConnectionsPanel.ts +7 -8
  31. package/front_end/entrypoints/node_app/app/NodeMain.ts +3 -3
  32. package/front_end/entrypoints/node_app/node_app.ts +7 -7
  33. package/front_end/foundation/Universe.ts +60 -1
  34. package/front_end/generated/InspectorBackendCommands.ts +1 -1
  35. package/front_end/generated/protocol.ts +4 -0
  36. package/front_end/models/ai_assistance/AiUtils.ts +6 -6
  37. package/front_end/models/bindings/CSSWorkspaceBinding.ts +8 -5
  38. package/front_end/models/bindings/DebuggerLanguagePlugins.ts +13 -15
  39. package/front_end/models/bindings/DebuggerWorkspaceBinding.ts +6 -3
  40. package/front_end/models/bindings/FileUtils.ts +11 -12
  41. package/front_end/models/emulation/DeviceModeModel.ts +56 -37
  42. package/front_end/models/emulation/EmulatedDevices.ts +3 -3
  43. package/front_end/models/live-metrics/LiveMetrics.ts +47 -23
  44. package/front_end/models/project_settings/ProjectSettingsModel.ts +2 -37
  45. package/front_end/models/workspace/FileManager.ts +9 -6
  46. package/front_end/models/workspace_diff/WorkspaceDiff.ts +23 -12
  47. package/front_end/panels/ai_assistance/AiAssistancePanel.ts +2 -1
  48. package/front_end/panels/application/ApplicationPanelSidebar.ts +9 -1
  49. package/front_end/panels/application/BackgroundServiceView.ts +2 -1
  50. package/front_end/panels/application/IndexedDBViews.ts +52 -23
  51. package/front_end/panels/application/ServiceWorkersView.ts +9 -20
  52. package/front_end/panels/application/components/AdsView.ts +1 -1
  53. package/front_end/panels/application/components/StorageMetadataView.ts +7 -2
  54. package/front_end/panels/application/resourcesSidebar.css +5 -0
  55. package/front_end/panels/common/BadgeNotification.ts +1 -1
  56. package/front_end/panels/console/ConsoleContextSelector.ts +3 -3
  57. package/front_end/panels/console/ConsoleInsightTeaser.ts +2 -1
  58. package/front_end/panels/console/ConsolePinPane.ts +10 -10
  59. package/front_end/panels/console/ConsolePrompt.ts +4 -4
  60. package/front_end/panels/console/ConsoleSidebar.ts +7 -7
  61. package/front_end/panels/console/ConsoleView.ts +44 -43
  62. package/front_end/panels/console/ConsoleViewMessage.ts +40 -40
  63. package/front_end/panels/console/console-meta.ts +34 -34
  64. package/front_end/panels/coverage/CoverageView.ts +1 -1
  65. package/front_end/panels/developer_resources/DeveloperResourcesListView.ts +19 -20
  66. package/front_end/panels/developer_resources/DeveloperResourcesView.ts +6 -8
  67. package/front_end/panels/developer_resources/developer_resources-meta.ts +2 -2
  68. package/front_end/panels/elements/ElementsTreeElement.ts +253 -144
  69. package/front_end/panels/elements/ElementsTreeOutline.ts +3 -2
  70. package/front_end/panels/elements/components/AdornerManager.ts +1 -0
  71. package/front_end/panels/emulation/DeviceModeToolbar.ts +19 -19
  72. package/front_end/panels/explain/components/ConsoleInsight.ts +2 -1
  73. package/front_end/panels/media/EventDisplayTable.ts +2 -2
  74. package/front_end/panels/media/EventTimelineView.ts +4 -4
  75. package/front_end/panels/media/MainView.ts +4 -4
  76. package/front_end/panels/media/PlayerDetailView.ts +5 -5
  77. package/front_end/panels/media/PlayerListView.ts +1 -1
  78. package/front_end/panels/media/PlayerMessagesView.ts +12 -12
  79. package/front_end/panels/media/PlayerPropertiesView.ts +17 -17
  80. package/front_end/panels/mobile_throttling/NetworkThrottlingSelector.ts +13 -12
  81. package/front_end/panels/mobile_throttling/ThrottlingManager.ts +8 -7
  82. package/front_end/panels/mobile_throttling/ThrottlingSettingsTab.ts +6 -7
  83. package/front_end/panels/mobile_throttling/mobile_throttling-meta.ts +3 -2
  84. package/front_end/panels/network/NetworkLogView.ts +2 -1
  85. package/front_end/panels/network/NetworkWaterfallColumn.ts +1 -3
  86. package/front_end/panels/network/RequestConditionsDrawer.ts +2 -2
  87. package/front_end/panels/network/networkPanel.css +1 -0
  88. package/front_end/panels/network/networkTimingTable.css +1 -1
  89. package/front_end/panels/profiler/HeapSnapshotView.ts +2 -1
  90. package/front_end/panels/profiler/ProfileView.ts +2 -1
  91. package/front_end/panels/protocol_monitor/JSONEditor.ts +10 -10
  92. package/front_end/panels/protocol_monitor/ProtocolMonitor.ts +28 -32
  93. package/front_end/panels/protocol_monitor/protocol_monitor-meta.ts +1 -1
  94. package/front_end/panels/recorder/RecorderController.ts +1 -0
  95. package/front_end/panels/recorder/RecorderEvents.ts +8 -0
  96. package/front_end/panels/settings/components/SyncSection.ts +2 -1
  97. package/front_end/panels/timeline/AppenderUtils.ts +12 -4
  98. package/front_end/panels/timeline/ThreadAppender.ts +3 -3
  99. package/front_end/panels/timeline/TimelinePanel.ts +5 -5
  100. package/front_end/panels/timeline/timelineFlameChartView.css +2 -1
  101. package/front_end/panels/webauthn/WebauthnPane.ts +10 -10
  102. package/front_end/third_party/chromium/README.chromium +1 -1
  103. package/front_end/third_party/chromium/ahem/ahem.js +792 -0
  104. package/front_end/tsconfig.json +7 -1
  105. package/front_end/ui/components/dialogs/shortcutDialog.css +15 -12
  106. package/front_end/ui/legacy/ActionRegistration.ts +1 -1
  107. package/front_end/ui/legacy/InspectorView.ts +1 -1
  108. package/front_end/ui/legacy/Treeoutline.ts +15 -0
  109. package/front_end/ui/legacy/components/perf_ui/FlameChart.ts +109 -23
  110. package/front_end/ui/legacy/components/source_frame/SourceFrame.ts +5 -0
  111. package/front_end/ui/legacy/theme_support/ThemeSupport.ts +2 -2
  112. package/front_end/ui/visual_logging/KnownContextValues.ts +4 -0
  113. package/package.json +1 -1
@@ -10,7 +10,7 @@ import type * as Console from './console.js';
10
10
 
11
11
  const UIStrings = {
12
12
  /**
13
- * @description Title of the Console tool
13
+ * @description Title of the Console tool.
14
14
  */
15
15
  console: 'Console',
16
16
  /**
@@ -22,61 +22,61 @@ const UIStrings = {
22
22
  */
23
23
  toggleConsole: 'Toggle Console',
24
24
  /**
25
- * @description Text to clear the console
25
+ * @description Text to clear the console.
26
26
  */
27
27
  clearConsole: 'Clear console',
28
28
  /**
29
- * @description Title of an action in the console tool to clear
29
+ * @description Title of an action in the Console tool to clear.
30
30
  */
31
31
  clearConsoleHistory: 'Clear console history',
32
32
  /**
33
- * @description Title of an action in the console tool to create pin. A live expression is code that the user can enter into the console and it will be pinned in the UI. Live expressions are constantly evaluated as the user interacts with the console (hence 'live').
33
+ * @description Title of an action in the Console tool to create pin. A live expression is code that the user can enter into the Console and it will be pinned in the UI. Live expressions are constantly evaluated as the user interacts with the Console (hence 'live').
34
34
  */
35
35
  createLiveExpression: 'Create live expression',
36
36
  /**
37
- * @description Title of a setting under the Console category that can be invoked through the Command Menu
37
+ * @description Title of a setting under the Console category that can be invoked through the command menu.
38
38
  */
39
39
  networkMessages: 'Network messages',
40
40
  /**
41
- * @description Title of an option under the Console category that can be invoked through the Command Menu
41
+ * @description Title of an option under the Console category that can be invoked through the command menu.
42
42
  */
43
43
  hideNetworkMessages: 'Hide network messages',
44
44
  /**
45
- * @description Title of an option under the Console category that can be invoked through the Command Menu
45
+ * @description Title of an option under the Console category that can be invoked through the command menu.
46
46
  */
47
47
  showNetworkMessages: 'Show network messages',
48
48
  /**
49
- * @description Alternative title text of a setting in Console View of the Console panel
49
+ * @description Alternative title text of a setting in Console view of the Console panel.
50
50
  */
51
51
  selectedContextOnly: 'Selected context only',
52
52
  /**
53
- * @description Tooltip text that appears on the setting when hovering over it in Console View of the Console panel
53
+ * @description Tooltip text that appears on the setting when hovering over it in Console view of the Console panel.
54
54
  */
55
55
  onlyShowMessagesFromTheCurrent: 'Only show messages from the current context (`top`, `iframe`, `worker`, extension)',
56
56
  /**
57
- * @description Title of a setting under the Console category that can be invoked through the Command Menu
57
+ * @description Title of a setting under the Console category that can be invoked through the command menu.
58
58
  */
59
59
  showMessagesFromAllContexts: 'Show messages from all contexts',
60
60
  /**
61
- * @description Title of a setting under the Console category
61
+ * @description Title of a setting under the Console category.
62
62
  */
63
63
  timestamps: 'Timestamps',
64
64
  /**
65
- * @description Title of an option under the Console category that can be invoked through the Command Menu
65
+ * @description Title of an option under the Console category that can be invoked through the command menu.
66
66
  */
67
67
  showTimestamps: 'Show timestamps',
68
68
  /**
69
- * @description Title of an option under the Console category that can be invoked through the Command Menu
69
+ * @description Title of an option under the Console category that can be invoked through the command menu.
70
70
  */
71
71
  hideTimestamps: 'Hide timestamps',
72
72
  /**
73
- * @description Title of a setting under the Console category that can be invoked through the Command Menu
73
+ * @description Title of a setting under the Console category that can be invoked through the command menu.
74
74
  */
75
75
  autocompleteFromHistory: 'Autocomplete from history',
76
76
  /**
77
- * @description Title of a setting under the Console category that can be invoked through the Command Menu
77
+ * @description Title of a setting under the Console category that can be invoked through the command menu.
78
78
  */
79
- doNotAutocompleteFromHistory: 'Do not autocomplete from history',
79
+ doNotAutocompleteFromHistory: 'Don’t autocomplete from history',
80
80
  /**
81
81
  * @description Title of a setting under the Console category that controls whether to accept autocompletion with Enter.
82
82
  */
@@ -84,51 +84,51 @@ const UIStrings = {
84
84
  /**
85
85
  * @description Title of a setting under the Console category that controls whether to accept autocompletion with Enter.
86
86
  */
87
- doNotAutocompleteOnEnter: 'Do not accept autocomplete suggestion on Enter',
87
+ doNotAutocompleteOnEnter: 'Don’t accept autocomplete suggestion on Enter',
88
88
  /**
89
- * @description Title of a setting under the Console category that can be invoked through the Command Menu
89
+ * @description Title of a setting under the Console category that can be invoked through the command menu.
90
90
  */
91
91
  groupSimilarMessages: 'Group similar messages',
92
92
  /**
93
- * @description Title of a setting under the Console category that can be invoked through the Command Menu
93
+ * @description Title of a setting under the Console category that can be invoked through the command menu.
94
94
  */
95
- doNotGroupSimilarMessages: 'Don\'t group similar messages',
95
+ doNotGroupSimilarMessages: 'Dont group similar messages',
96
96
  /**
97
- * @description Title of a setting under the Console category in Settings
97
+ * @description Title of a setting under the Console category in Settings.
98
98
  */
99
99
  corsErrorsInConsole: 'CORS errors in console',
100
100
  /**
101
- * @description Title of an option under the Console category that can be invoked through the Command Menu
101
+ * @description Title of an option under the Console category that can be invoked through the command menu.
102
102
  */
103
103
  showCorsErrorsInConsole: 'Show CORS errors in console',
104
104
  /**
105
- * @description Title of an option under the Console category that can be invoked through the Command Menu
105
+ * @description Title of an option under the Console category that can be invoked through the command menu.
106
106
  */
107
- doNotShowCorsErrorsIn: 'Don\'t show CORS errors in console',
107
+ doNotShowCorsErrorsIn: 'Dont show CORS errors in console',
108
108
  /**
109
- * @description Title of a setting under the Console category in Settings
109
+ * @description Title of a setting under the Console category in Settings.
110
110
  */
111
111
  eagerEvaluation: 'Eager evaluation',
112
112
  /**
113
- * @description Title of a setting under the Console category that can be invoked through the Command Menu
113
+ * @description Title of a setting under the Console category that can be invoked through the command menu.
114
114
  */
115
- eagerlyEvaluateConsolePromptText: 'Eagerly evaluate console prompt text',
115
+ eagerlyEvaluateConsolePromptText: 'Eagerly evaluate Console prompt text',
116
116
  /**
117
- * @description Title of a setting under the Console category that can be invoked through the Command Menu
117
+ * @description Title of a setting under the Console category that can be invoked through the command menu.
118
118
  */
119
- doNotEagerlyEvaluateConsole: 'Do not eagerly evaluate console prompt text',
119
+ doNotEagerlyEvaluateConsole: 'Don’t eagerly evaluate Console prompt text',
120
120
  /**
121
- * @description Allows code that is executed in the console to do things that usually are only allowed if triggered by a user action
121
+ * @description Allows code that is executed in the Console to do things that usually are only allowed if triggered by a user action.
122
122
  */
123
123
  evaluateTriggersUserActivation: 'Treat code evaluation as user action',
124
124
  /**
125
- * @description Title of a setting under the Console category that can be invoked through the Command Menu
125
+ * @description Title of a setting under the Console category that can be invoked through the command menu.
126
126
  */
127
127
  treatEvaluationAsUserActivation: 'Treat evaluation as user activation',
128
128
  /**
129
- * @description Title of a setting under the Console category that can be invoked through the Command Menu
129
+ * @description Title of a setting under the Console category that can be invoked through the command menu.
130
130
  */
131
- doNotTreatEvaluationAsUser: 'Do not treat evaluation as user activation',
131
+ doNotTreatEvaluationAsUser: 'Don’t treat evaluation as user activation',
132
132
  /**
133
133
  * @description Title of a setting under the Console category in Settings that controls whether `console.trace()` messages appear expanded by default.
134
134
  */
@@ -136,7 +136,7 @@ const UIStrings = {
136
136
  /**
137
137
  * @description Title of a setting under the Console category in Settings that controls whether `console.trace()` messages appear collapsed by default.
138
138
  */
139
- collapseConsoleTraceMessagesByDefault: 'Do not automatically expand `console.trace()` messages',
139
+ collapseConsoleTraceMessagesByDefault: 'Don’t automatically expand `console.trace()` messages',
140
140
  /**
141
141
  * @description Title of a setting under the Console category in Settings that controls whether AI summaries should
142
142
  * be shown for console warnings/errors.
@@ -636,7 +636,7 @@ export class CoverageView extends UI.Widget.VBox<ShadowRoot> {
636
636
  }
637
637
 
638
638
  async exportReport(): Promise<void> {
639
- const fos = new Bindings.FileUtils.FileOutputStream();
639
+ const fos = new Bindings.FileUtils.FileOutputStream(Workspace.FileManager.FileManager.instance());
640
640
  const fileName =
641
641
  `Coverage-${Platform.DateUtilities.toISO8601Compact(new Date())}.json` as Platform.DevToolsPath.RawPathString;
642
642
  const accepted = await fos.open(fileName);
@@ -18,64 +18,63 @@ import developerResourcesListViewStyles from './developerResourcesListView.css.j
18
18
 
19
19
  const UIStrings = {
20
20
  /**
21
- * @description Text for the status of something
21
+ * @description Column header in the Developer resources panel showing the load status (pending, success, or failure) of a resource.
22
22
  */
23
23
  status: 'Status',
24
24
  /**
25
- * @description Text for web URLs
25
+ * @description Column header in the Developer resources panel showing the URL of the developer resource.
26
26
  */
27
27
  url: 'URL',
28
28
  /**
29
- * @description Text for the initiator of something
29
+ * @description Column header in the Developer resources panel showing the initiator (such as an extension or script) that requested the resource.
30
30
  */
31
31
  initiator: 'Initiator',
32
32
  /**
33
- * @description Text in Coverage List View of the Coverage tab
33
+ * @description Column header in the Developer resources panel showing the total size of a resource in bytes.
34
34
  */
35
- totalBytes: 'Total Bytes',
35
+ totalBytes: 'Total bytes',
36
36
  /**
37
- * @description Column header. The column contains the time it took to load a resource.
37
+ * @description Column header in the Developer resources panel showing the time it took to load a resource.
38
38
  */
39
39
  duration: 'Duration',
40
40
  /**
41
- * @description Text for errors
41
+ * @description Column header in the Developer resources panel showing the error message when loading a resource fails.
42
42
  */
43
43
  error: 'Error',
44
44
  /**
45
- * @description Title for the Developer resources tab
45
+ * @description Accessible name for the data grid in the Developer resources panel.
46
46
  */
47
47
  developerResources: 'Developer resources',
48
48
  /**
49
- * @description Text for a context menu entry
49
+ * @description Context menu item in the Developer resources panel for copying the selected resource's URL to the clipboard.
50
50
  */
51
51
  copyUrl: 'Copy URL',
52
52
  /**
53
- * @description Text for a context menu entry. Command to copy a URL to the clipboard. The initiator
54
- * of a request is the entity that caused this request to be sent.
53
+ * @description Context menu item in the Developer resources panel for copying the initiator's URL to the clipboard. The initiator of a request is the entity that caused this request to be sent.
55
54
  */
56
55
  copyInitiatorUrl: 'Copy initiator URL',
57
56
  /**
58
- * @description Text for the status column of a list view
57
+ * @description Status text in the Developer resources panel indicating that a resource is currently loading.
59
58
  */
60
- pending: 'pending',
59
+ pending: 'Pending',
61
60
  /**
62
- * @description Text for the status column of a list view
61
+ * @description Status text in the Developer resources panel indicating that a resource loaded successfully.
63
62
  */
64
- success: 'success',
63
+ success: 'Success',
65
64
  /**
66
- * @description Text for the status column of a list view
65
+ * @description Status text in the Developer resources panel indicating that a resource failed to load.
67
66
  */
68
- failure: 'failure',
67
+ failure: 'Failure',
69
68
  /**
70
- * @description Accessible text for the value in bytes in memory allocation.
69
+ * @description Accessible label in the Developer resources panel for the size of a resource in bytes.
71
70
  */
72
71
  sBytes: '{n, plural, =1 {# byte} other {# bytes}}',
73
72
  /**
74
- * @description Number of resource(s) match
73
+ * @description Screen reader announcement in the Developer resources panel indicating how many resources match the current text filter.
75
74
  */
76
75
  numberOfResourceMatch: '{n, plural, =1 {# resource matches} other {# resources match}}',
77
76
  /**
78
- * @description No resource matches
77
+ * @description Screen reader announcement in the Developer resources panel when no resources match the current text filter.
79
78
  */
80
79
  noResourceMatches: 'No resource matches',
81
80
  } as const;
@@ -21,31 +21,29 @@ const {bindToSetting} = UI.UIUtils;
21
21
 
22
22
  const UIStrings = {
23
23
  /**
24
- * @description Placeholder for a search field in a toolbar
24
+ * @description Placeholder text for the text filter input field in the toolbar of the Developer resources panel.
25
25
  */
26
26
  filterByText: 'Filter by URL and error',
27
27
  /**
28
- * @description Tooltip for a checkbox in the toolbar of the developer resources view. The
28
+ * @description Tooltip for a checkbox in the toolbar of the Developer resources panel. The
29
29
  * inspected target is the webpage that DevTools is debugging/inspecting/attached to.
30
30
  */
31
- loadHttpsDeveloperResources:
32
- 'Load `HTTP(S)` developer resources through the website you inspect, not through DevTools',
31
+ loadHttpsDeveloperResources: 'Load HTTP(S) developer resources through the website you inspect, not through DevTools',
33
32
  /**
34
- * @description Text for a checkbox in the toolbar of the developer resources view. The target is
33
+ * @description Text for a checkbox in the toolbar of the Developer resources panel. The target is
35
34
  * the webpage that DevTools is debugging/inspecting/attached to. This setting makes it so
36
35
  * developer resources are requested from the webpage itself, and not from the DevTools
37
36
  * application.
38
37
  */
39
38
  enableLoadingThroughTarget: 'Load through website',
40
39
  /**
41
- * @description Text for resources load status
40
+ * @description Status bar message in the Developer resources panel showing the total number of resources and how many are currently loading.
42
41
  * @example {1} PH1
43
42
  * @example {1} PH2
44
43
  */
45
44
  resourcesCurrentlyLoading: '{PH1} resources, {PH2} currently loading',
46
45
  /**
47
- * @description Status text that appears to tell the developer how many resources were loaded in
48
- * total. Resources are files related to the webpage.
46
+ * @description Status bar message in the Developer resources panel showing the total number of loaded resources. Resources are files related to the webpage.
49
47
  */
50
48
  resources: '{n, plural, =1 {# resource} other {# resources}}',
51
49
  } as const;
@@ -11,11 +11,11 @@ import type * as DeveloperResources from './developer_resources.js';
11
11
 
12
12
  const UIStrings = {
13
13
  /**
14
- * @description Title for developer resources panel
14
+ * @description Title for the Developer resources panel.
15
15
  */
16
16
  developerResources: 'Developer resources',
17
17
  /**
18
- * @description Command for showing the developer resources panel
18
+ * @description Command for showing the Developer resources panel.
19
19
  */
20
20
  showDeveloperResources: 'Show Developer resources',
21
21
  } as const;