chrome-devtools-frontend 1.0.1548870 → 1.0.1549484
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.
- package/docs/contributing/settings-experiments-features.md +35 -0
- package/docs/styleguide/ux/patterns.md +27 -0
- package/eslint.config.mjs +1 -0
- package/front_end/Tests.js +2 -0
- package/front_end/core/host/InspectorFrontendHost.ts +26 -558
- package/front_end/core/host/InspectorFrontendHostAPI.ts +6 -3
- package/front_end/core/host/InspectorFrontendHostStub.ts +558 -0
- package/front_end/core/host/ResourceLoader.ts +9 -23
- package/front_end/core/host/UserMetrics.ts +4 -4
- package/front_end/core/root/DevToolsContext.ts +4 -0
- package/front_end/core/root/Runtime.ts +10 -0
- package/front_end/core/sdk/CSSMatchedStyles.ts +2 -2
- package/front_end/core/sdk/CSSModel.ts +24 -24
- package/front_end/core/sdk/CSSPropertyParserMatchers.ts +11 -11
- package/front_end/core/sdk/CSSQuery.ts +1 -1
- package/front_end/core/sdk/CSSRule.ts +2 -2
- package/front_end/core/sdk/CSSStyleDeclaration.ts +1 -1
- package/front_end/core/sdk/CSSStyleSheetHeader.ts +1 -1
- package/front_end/core/sdk/DOMModel.ts +3 -0
- package/front_end/core/sdk/NetworkManager.ts +29 -31
- package/front_end/core/sdk/NetworkRequest.ts +4 -0
- package/front_end/core/sdk/OverlayModel.ts +2 -2
- package/front_end/core/sdk/PageResourceLoader.ts +63 -37
- package/front_end/core/sdk/SourceMap.ts +6 -0
- package/front_end/core/sdk/SourceMapCache.ts +21 -0
- package/front_end/core/sdk/SourceMapManager.ts +7 -6
- package/front_end/core/sdk/SourceMapScopesInfo.ts +6 -2
- package/front_end/core/sdk/TargetManager.ts +14 -2
- package/front_end/core/sdk/sdk-meta.ts +13 -0
- package/front_end/entrypoints/formatter_worker/FormatterActions.ts +1 -0
- package/front_end/entrypoints/formatter_worker/ScopeParser.ts +1 -1
- package/front_end/entrypoints/main/MainImpl.ts +13 -3
- package/front_end/foundation/Universe.ts +1 -1
- package/front_end/generated/Deprecation.ts +18 -4
- package/front_end/generated/InspectorBackendCommands.ts +33 -31
- package/front_end/generated/SupportedCSSProperties.js +41 -41
- package/front_end/generated/protocol-mapping.d.ts +12 -0
- package/front_end/generated/protocol-proxy-api.d.ts +11 -0
- package/front_end/generated/protocol.ts +70 -35
- package/front_end/models/ai_assistance/AiConversation.ts +5 -4
- package/front_end/models/ai_assistance/ChangeManager.ts +4 -4
- package/front_end/models/ai_assistance/ConversationHandler.ts +0 -15
- package/front_end/models/ai_assistance/agents/AiAgent.ts +9 -6
- package/front_end/models/ai_assistance/agents/PerformanceAgent.ts +135 -3
- package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.ts +24 -0
- package/front_end/models/bindings/CompilerScriptMapping.ts +43 -0
- package/front_end/models/bindings/DebuggerWorkspaceBinding.ts +19 -0
- package/front_end/models/bindings/ResourceMapping.ts +73 -0
- package/front_end/models/bindings/ResourceScriptMapping.ts +50 -0
- package/front_end/models/issues_manager/GenericIssue.ts +17 -0
- package/front_end/models/issues_manager/descriptions/genericNavigationEntryMarkedSkippable.md +7 -0
- package/front_end/models/javascript_metadata/NativeFunctions.js +7 -3
- package/front_end/models/source_map_scopes/FunctionCodeResolver.snapshot.txt +98 -0
- package/front_end/models/source_map_scopes/FunctionCodeResolver.ts +270 -0
- package/front_end/models/source_map_scopes/source_map_scopes.ts +2 -0
- package/front_end/models/workspace/UISourceCode.ts +51 -44
- package/front_end/panels/ai_assistance/AiAssistancePanel.ts +76 -34
- package/front_end/panels/ai_assistance/aiAssistancePanel.css +1 -0
- package/front_end/panels/ai_assistance/components/ChatView.ts +23 -11
- package/front_end/panels/application/AppManifestView.ts +3 -2
- package/front_end/panels/application/FrameDetailsView.ts +5 -6
- package/front_end/panels/application/ServiceWorkersView.ts +2 -2
- package/front_end/panels/application/TrustTokensTreeElement.ts +2 -6
- package/front_end/panels/application/components/PermissionsPolicySection.ts +201 -157
- package/front_end/panels/application/components/ProtocolHandlersView.ts +117 -80
- package/front_end/panels/application/components/ServiceWorkerRouterView.ts +47 -41
- package/front_end/panels/application/components/StorageMetadataView.ts +31 -34
- package/front_end/panels/application/components/TrustTokensView.ts +76 -68
- package/front_end/panels/console/ConsoleView.ts +3 -2
- package/front_end/panels/console/ConsoleViewMessage.ts +6 -4
- package/front_end/panels/console/console-meta.ts +0 -13
- package/front_end/panels/developer_resources/DeveloperResourcesView.ts +3 -1
- package/front_end/panels/elements/CSSRuleValidator.ts +7 -7
- package/front_end/panels/elements/CSSRuleValidatorHelper.ts +2 -2
- package/front_end/panels/elements/ElementsTreeElement.ts +16 -13
- package/front_end/panels/elements/ElementsTreeOutline.ts +2 -1
- package/front_end/panels/elements/LayoutPane.ts +12 -10
- package/front_end/panels/elements/StylePropertyTreeElement.ts +12 -12
- package/front_end/panels/elements/components/AdornerManager.ts +3 -3
- package/front_end/panels/elements/components/StylePropertyEditor.ts +6 -6
- package/front_end/panels/linear_memory_inspector/components/LinearMemoryHighlightChipList.ts +27 -49
- package/front_end/panels/linear_memory_inspector/components/LinearMemoryInspector.ts +15 -11
- package/front_end/panels/media/PlayerListView.ts +100 -73
- package/front_end/panels/media/playerListView.css +5 -0
- package/front_end/panels/mobile_throttling/ThrottlingSettingsTab.ts +3 -3
- package/front_end/panels/network/RequestConditionsDrawer.ts +5 -5
- package/front_end/panels/network/components/DirectSocketConnectionView.ts +17 -0
- package/front_end/panels/network/resourceChunkView.css +4 -0
- package/front_end/panels/security/CookieControlsView.ts +1 -1
- package/front_end/panels/sensors/LocationsSettingsTab.ts +1 -1
- package/front_end/panels/settings/FrameworkIgnoreListSettingsTab.ts +1 -1
- package/front_end/panels/settings/KeybindsSettingsTab.ts +1 -1
- package/front_end/panels/settings/SettingsScreen.ts +6 -6
- package/front_end/panels/settings/WorkspaceSettingsTab.ts +1 -1
- package/front_end/panels/settings/emulation/DevicesSettingsTab.ts +1 -1
- package/front_end/panels/snippets/SnippetsQuickOpen.ts +4 -2
- package/front_end/panels/sources/CSSPlugin.ts +1 -1
- package/front_end/panels/sources/FilteredUISourceCodeListProvider.ts +13 -5
- package/front_end/panels/sources/GoToLineQuickOpen.ts +4 -2
- package/front_end/panels/sources/NavigatorView.ts +2 -2
- package/front_end/panels/sources/OpenFileQuickOpen.ts +7 -8
- package/front_end/panels/sources/OutlineQuickOpen.ts +6 -3
- package/front_end/panels/sources/ProfilePlugin.ts +21 -12
- package/front_end/panels/sources/UISourceCodeFrame.ts +0 -1
- package/front_end/panels/sources/filteredUISourceCodeListProvider.css +41 -0
- package/front_end/panels/timeline/TimelinePanel.ts +17 -18
- package/front_end/panels/timeline/TimelineSelectorStatsView.ts +3 -3
- package/front_end/panels/timeline/components/insights/SlowCSSSelector.ts +2 -2
- package/front_end/panels/timeline/docs/flame_chart_migration.md +11 -16
- package/front_end/panels/utils/utils.ts +17 -3
- package/front_end/panels/whats_new/ReleaseNoteText.ts +10 -20
- package/front_end/panels/whats_new/resources/WNDT.md +8 -8
- package/front_end/third_party/chromium/README.chromium +1 -1
- package/front_end/third_party/puppeteer/third_party/mitt/README.chromium +1 -0
- package/front_end/third_party/puppeteer/third_party/parsel/README.chromium +1 -0
- package/front_end/third_party/puppeteer/third_party/rxjs/README.chromium +1 -0
- package/front_end/ui/components/adorners/Adorner.ts +1 -1
- package/front_end/ui/components/annotations/AnnotationRepository.ts +98 -0
- package/front_end/ui/components/annotations/AnnotationType.ts +10 -0
- package/front_end/ui/components/annotations/annotations.ts +6 -0
- package/front_end/ui/components/buttons/Button.ts +1 -1
- package/front_end/ui/components/buttons/FloatingButton.ts +1 -1
- package/front_end/ui/components/chrome_link/ChromeLink.ts +1 -1
- package/front_end/ui/components/dialogs/ButtonDialog.ts +1 -1
- package/front_end/ui/components/dialogs/Dialog.ts +1 -1
- package/front_end/ui/components/dialogs/ShortcutDialog.ts +1 -0
- package/front_end/ui/components/diff_view/DiffView.ts +1 -1
- package/front_end/ui/components/expandable_list/ExpandableList.ts +1 -1
- package/front_end/ui/components/highlighting/HighlightElement.ts +1 -0
- package/front_end/ui/components/highlighting/MarkupHighlight.ts +162 -0
- package/front_end/ui/components/highlighting/highlighting.ts +7 -0
- package/front_end/ui/components/icon_button/FileSourceIcon.ts +1 -1
- package/front_end/ui/components/icon_button/Icon.ts +4 -2
- package/front_end/ui/components/icon_button/IconButton.ts +1 -1
- package/front_end/ui/components/issue_counter/IssueCounter.ts +1 -1
- package/front_end/ui/components/issue_counter/IssueLinkIcon.ts +1 -1
- package/front_end/ui/components/legacy_wrapper/LegacyWrapper.ts +1 -1
- package/front_end/ui/components/linkifier/LinkifierImpl.ts +1 -1
- package/front_end/ui/components/list/List.ts +184 -0
- package/front_end/ui/components/list/list.css +90 -0
- package/front_end/ui/components/{cards/cards.ts → list/lists.ts} +3 -3
- package/front_end/ui/components/markdown_view/CodeBlock.ts +1 -1
- package/front_end/ui/components/markdown_view/MarkdownImage.ts +1 -1
- package/front_end/ui/components/markdown_view/MarkdownLink.ts +1 -1
- package/front_end/ui/components/markdown_view/MarkdownView.ts +1 -1
- package/front_end/ui/components/menus/Menu.ts +1 -1
- package/front_end/ui/components/menus/SelectMenu.ts +1 -1
- package/front_end/ui/components/node_text/NodeText.ts +1 -1
- package/front_end/ui/components/panel_feedback/FeedbackButton.ts +1 -1
- package/front_end/ui/components/panel_feedback/PanelFeedback.ts +1 -1
- package/front_end/ui/components/panel_feedback/PreviewToggle.ts +1 -1
- package/front_end/ui/components/panel_introduction_steps/PanelIntroductionSteps.ts +1 -1
- package/front_end/ui/components/report_view/ReportView.ts +1 -1
- package/front_end/ui/components/request_link_icon/RequestLinkIcon.ts +1 -1
- package/front_end/ui/components/settings/SettingCheckbox.ts +1 -1
- package/front_end/ui/components/settings/SettingDeprecationWarning.ts +1 -1
- package/front_end/ui/components/snackbars/Snackbar.ts +1 -1
- package/front_end/ui/components/spinners/Spinner.ts +1 -1
- package/front_end/ui/components/srgb_overlay/SrgbOverlay.ts +1 -1
- package/front_end/ui/components/suggestion_input/SuggestionInput.ts +1 -0
- package/front_end/ui/components/survey_link/SurveyLink.ts +1 -1
- package/front_end/ui/components/switch/SwitchImpl.ts +1 -1
- package/front_end/ui/components/text_editor/TextEditor.ts +1 -0
- package/front_end/ui/components/text_prompt/TextPrompt.ts +1 -1
- package/front_end/ui/components/tooltips/Tooltip.ts +1 -1
- package/front_end/ui/components/tree_outline/TreeOutline.ts +1 -1
- package/front_end/ui/kit/kit.ts +5 -0
- package/front_end/ui/legacy/TabbedPane.ts +98 -0
- package/front_end/ui/legacy/UIUtils.ts +0 -184
- package/front_end/ui/legacy/ViewManager.ts +23 -8
- package/front_end/ui/legacy/ViewRegistration.ts +21 -22
- package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts +5 -4
- package/front_end/ui/legacy/components/perf_ui/LineLevelProfile.ts +73 -35
- package/front_end/ui/legacy/components/perf_ui/LiveHeapProfile.ts +11 -2
- package/front_end/ui/legacy/components/quick_open/CommandMenu.ts +12 -13
- package/front_end/ui/legacy/components/quick_open/FilteredListWidget.ts +7 -16
- package/front_end/ui/legacy/components/quick_open/HelpQuickOpen.ts +5 -6
- package/front_end/ui/legacy/components/quick_open/filteredListWidget.css +18 -65
- package/front_end/ui/legacy/components/source_frame/JSONView.ts +2 -1
- package/front_end/ui/legacy/tabbedPane.css +10 -0
- package/front_end/ui/visual_logging/KnownContextValues.ts +3 -0
- package/inspector_overlay/README.md +3 -3
- package/mcp/HostBindings.ts +310 -0
- package/mcp/mcp.ts +17 -0
- package/mcp/tsconfig.json +6 -1
- package/package.json +26 -24
- /package/front_end/ui/{components → kit}/cards/Card.ts +0 -0
- /package/front_end/ui/{components → kit}/cards/card.css +0 -0
|
@@ -154,3 +154,38 @@ if (Root.Runtime.experiments.isEnabled('yourExperimentNameHere')) {
|
|
|
154
154
|
// Experiment code here
|
|
155
155
|
}
|
|
156
156
|
```
|
|
157
|
+
|
|
158
|
+
## A/B Testing with Finch and `base::Feature`
|
|
159
|
+
|
|
160
|
+
`base::Feature` flags can be used with Finch to conduct A/B testing by toggling feature flags for a defined percentage of users. A/B testing can be a good way of testing the waters. However, since the time to get meaningful metrics may take a long time, it shouldn't be used to get feedback on options quickly.
|
|
161
|
+
|
|
162
|
+
### Advantages and Disadvantages
|
|
163
|
+
|
|
164
|
+
#### Advantages
|
|
165
|
+
|
|
166
|
+
* **Straightforward Setup**: Finch configuration for A/B testing is simple, with reusable templates. Upcoming [automation tools](http://go/finch-automation-doc) will make this even easier.
|
|
167
|
+
* **Integrated Dashboard**: UMA-based Finch dashboards are available for monitoring experiments and tracking UMA histograms.
|
|
168
|
+
* **Flexible Rollout**: Rollout percentages can be dynamically managed.
|
|
169
|
+
|
|
170
|
+
#### Disadvantages
|
|
171
|
+
|
|
172
|
+
* **Time-to-Meaningful Metrics**: It can take a long time to gather enough data from users, which may delay releases. This is especially true when waiting for features to reach the Stable channel.
|
|
173
|
+
* **Deployment Restrictions**: Finch changes are subject to freezes (e.g., around holidays) and cannot be deployed on weekends.
|
|
174
|
+
* **Potential Rollout Latency**: Rollouts can take from 1-2 days to several weeks to reach all users.
|
|
175
|
+
* **Launch Coordination**: A/B testing on Beta and Stable channels requires coordination with the formal launch process.
|
|
176
|
+
|
|
177
|
+
### General Information
|
|
178
|
+
|
|
179
|
+
#### Deployment Cycle of Finch changes: How and when do Finch changes propagate to the user?
|
|
180
|
+
|
|
181
|
+
1. A Finch CL is pushed to servers.
|
|
182
|
+
2. The client pulls the configuration (usually within hours).
|
|
183
|
+
3. The change is applied after a Chrome restart (which can take days).
|
|
184
|
+
|
|
185
|
+
#### Querying Visual Logging Data for Experiments
|
|
186
|
+
|
|
187
|
+
To query VE (Visual Logging) data for your experiment, you will need the decimal hashes of your study and study groups.
|
|
188
|
+
|
|
189
|
+
* **Finding Field Trial Hashes**: Use the [go/finch-hashes](http://go/finch-hashes) tool.
|
|
190
|
+
* **Study Name/ID (`name_id`)**: This is your study name plus the `StructuredMetrics` suffix (e.g., `DevToolsAiSubmenuPromptsStructuredMetrics`).
|
|
191
|
+
* **Experiment Group ID (`group_id`)**: This is the experiment group name plus the `StructuredMetrics` suffix (e.g., `LaunchStructuredMetrics`).
|
|
@@ -4,6 +4,33 @@ There are some common UX patterns in DevTools, such as linking from one place to
|
|
|
4
4
|
|
|
5
5
|
Please also note that while some patterns can be summarized into a [component](components.md), this guide focuses more on the end-user experience than the actual implementation.
|
|
6
6
|
|
|
7
|
+
## Feature promotion
|
|
8
|
+
|
|
9
|
+
### What can they do?
|
|
10
|
+
|
|
11
|
+
Feature promotion helps users discover new or existing features that might be buried in the UI.
|
|
12
|
+
|
|
13
|
+
### When should you use them?
|
|
14
|
+
|
|
15
|
+
When you want to increase the discoverability of a feature, especially if it's new or underused.
|
|
16
|
+
|
|
17
|
+
### Common patterns and their implementations
|
|
18
|
+
|
|
19
|
+
#### New Badges
|
|
20
|
+
|
|
21
|
+
A "new" badge, can be attached to UI elements to indicate a new or updated feature. This has been shown to significantly increase discoverability.
|
|
22
|
+
|
|
23
|
+
#### Avoid nested interactions
|
|
24
|
+
|
|
25
|
+
Discovery of features can be hard due to nested interactions. Try to (potentially temporarily) lift them to increase the chances for users to interact with them. For example, ..
|
|
26
|
+
|
|
27
|
+
- ..by moving a feature from a nested menu (like "More tools") to the main menu.
|
|
28
|
+
- ..by temporarily highlighting a feature by default at the top of the command menu, which would otherwise be buried in the long search list.
|
|
29
|
+
|
|
30
|
+
### Things to consider
|
|
31
|
+
|
|
32
|
+
While effective, feature promotion should be used judiciously. Overusing badges can lead to visual noise, and constantly changing the UI can be confusing for users.
|
|
33
|
+
|
|
7
34
|
## Overlays
|
|
8
35
|
|
|
9
36
|
Overlays are visual aids that are superimposed on the webpage you're inspecting. These overlays provide extra information or highlight specific aspects of the page to help you with debugging and development.
|
package/eslint.config.mjs
CHANGED
|
@@ -663,6 +663,7 @@ export default defineConfig([
|
|
|
663
663
|
'@devtools/jslog-context-list': 'error',
|
|
664
664
|
'@devtools/es-modules-import': 'error',
|
|
665
665
|
'@devtools/html-tagged-template': 'error',
|
|
666
|
+
'@devtools/enforce-ui-kit-named-import': 'error',
|
|
666
667
|
'@devtools/enforce-custom-element-definitions-location': [
|
|
667
668
|
'error',
|
|
668
669
|
{
|
package/front_end/Tests.js
CHANGED
|
@@ -858,6 +858,7 @@
|
|
|
858
858
|
// See crbug.com/747724
|
|
859
859
|
TestSuite.prototype.testOfflineNetworkConditions = async function() {
|
|
860
860
|
const test = this;
|
|
861
|
+
SDK.NetworkManager.MultitargetNetworkManager.instance().requestConditions.conditionsEnabled = true;
|
|
861
862
|
SDK.NetworkManager.MultitargetNetworkManager.instance().setNetworkConditions(SDK.NetworkManager.OfflineConditions);
|
|
862
863
|
|
|
863
864
|
function finishRequest(request) {
|
|
@@ -1342,6 +1343,7 @@
|
|
|
1342
1343
|
};
|
|
1343
1344
|
|
|
1344
1345
|
TestSuite.prototype.testExtensionWebSocketOfflineNetworkConditions = async function(websocketPort) {
|
|
1346
|
+
SDK.NetworkManager.MultitargetNetworkManager.instance().requestConditions.conditionsEnabled = true;
|
|
1345
1347
|
SDK.NetworkManager.MultitargetNetworkManager.instance().setNetworkConditions(SDK.NetworkManager.OfflineConditions);
|
|
1346
1348
|
|
|
1347
1349
|
// TODO(crbug.com/1263900): Currently we don't send loadingFailed for web sockets.
|