npm - chrome-devtools-frontend - Versions diffs - 1.0.1386602 → 1.0.1402249 - Mend

chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

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 (1404) hide show

package/.git-blame-ignore-revs CHANGED Viewed

@@ -349,3 +349,6 @@ aaf6c64ae8d791f878599bf2cea8a9b1e6a5001c
 # Always add braces to single-line if-statements (https://crrev.com/c/1821526)
 1d6e57a0e314d709029cac52b98898b828f45a12
+# [AI Assistance] Renames and refactorings (https://crrev.com/c/6080811)
+786bd4290956c5b8560a03cf73d860572559e382

package/.stylelintrc.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "extends": "stylelint-config-standard",
   "plugins": [
-    "./scripts/stylelint_rules/lib/use_theme_colors.js"
+    "./scripts/stylelint_rules/lib/use_theme_colors.mjs"
   ],
   "rules": {
     "plugin/use_theme_colors": true,
@@ -11,7 +11,6 @@
     "comment-empty-line-before": null,
     "declaration-no-important": true,
     "color-named": "never",
-    "max-empty-lines": 1,
     "selector-type-no-unknown": [
       true,
       {
@@ -21,7 +20,6 @@
         ]
       }
     ],
-    "max-line-length": null,
     "selector-class-pattern": null,
     "keyframes-name-pattern": null,
     "selector-no-vendor-prefix": null,

package/AUTHORS CHANGED Viewed

@@ -44,8 +44,8 @@ Jacky Hu <flameddd@gmail.com>
 Jake Mulhern <mulherje@gmail.com>
 Jan Keitel <jan.keitel@gmail.com>
 Jeffrey Chen <jeffreyca16@gmail.com>
-Jesper van den Ende <jespertheend@gmail.com>
 Jerome Vouillon <jerome.vouillon@gmail.com>
+Jesper van den Ende <jespertheend@gmail.com>
 Jithil p Ponnan <jithil.p@gmail.com>
 Juba Borgohain <chromiumjuba@gmail.com>
 Julian Geppert <spctstr@gmail.com>
@@ -72,8 +72,10 @@ Rajasekar Murugan <rajasekar89be@gmail.com>
 Ross Wollman <ross.wollman@gmail.com>
 Royi Hagigi <rhagigi@gmail.com>
 Ryan Puhalovich <reanpuhalovich@gmail.com>
+Satvic Dhawan <satvicdhawan14@gmail.com>
 Sebastian Markbåge <sebastian@calyptus.eu>
 Serg Kryvonos <sergeikrivonos@gmail.com>
+Sergio Avalos <sergio.avalos@gmail.com>
 Simon Siefke <simon.siefke@gmail.com>
 Stephen Tsoi-A-Sue <stsoiasue@gmail.com>
 Sunnylost <sunnylost@gmail.com>

package/config/gni/devtools_grd_files.gni CHANGED Viewed

@@ -85,6 +85,7 @@ grd_files_release_sources = [
   "front_end/Images/colon.svg",
   "front_end/Images/color-picker-filled.svg",
   "front_end/Images/color-picker.svg",
+  "front_end/Images/compress.svg",
   "front_end/Images/console-conditional-breakpoint.svg",
   "front_end/Images/console-logpoint.svg",
   "front_end/Images/cookie.svg",
@@ -101,6 +102,8 @@ grd_files_release_sources = [
   "front_end/Images/deployed.svg",
   "front_end/Images/device-fold.svg",
   "front_end/Images/devices.svg",
+  "front_end/Images/devtools-thumbnail.svg",
+  "front_end/Images/devtools-tips.svg",
   "front_end/Images/devtools.svg",
   "front_end/Images/dock-bottom.svg",
   "front_end/Images/dock-left.svg",
@@ -273,7 +276,7 @@ grd_files_release_sources = [
   "front_end/Images/warning-filled.svg",
   "front_end/Images/warning.svg",
   "front_end/Images/watch.svg",
-  "front_end/Images/whatsnew.avif",
+  "front_end/Images/whatsnew.svg",
   "front_end/Images/width.svg",
   "front_end/Images/zoom-in.svg",
   "front_end/Tests.js",
@@ -545,6 +548,8 @@ grd_files_release_sources = [
   "front_end/node_app.html",
   "front_end/panels/accessibility/accessibility-meta.js",
   "front_end/panels/accessibility/accessibility.js",
+  "front_end/panels/ai_assistance/ai_assistance-meta.js",
+  "front_end/panels/ai_assistance/ai_assistance.js",
   "front_end/panels/animation/animation-meta.js",
   "front_end/panels/animation/animation.js",
   "front_end/panels/application/application-meta.js",
@@ -578,8 +583,6 @@ grd_files_release_sources = [
   "front_end/panels/event_listeners/event_listeners.js",
   "front_end/panels/explain/explain-meta.js",
   "front_end/panels/explain/explain.js",
-  "front_end/panels/freestyler/freestyler-meta.js",
-  "front_end/panels/freestyler/freestyler.js",
   "front_end/panels/issues/components/components.js",
   "front_end/panels/issues/issues-meta.js",
   "front_end/panels/issues/issues.js",
@@ -653,7 +656,6 @@ grd_files_release_sources = [
   "front_end/panels/webauthn/webauthn-meta.js",
   "front_end/panels/webauthn/webauthn.js",
   "front_end/panels/whats_new/resources/WNDT.md",
-  "front_end/panels/whats_new/resources/whatsnew.avif",
   "front_end/panels/whats_new/whats_new-meta.js",
   "front_end/panels/whats_new/whats_new.js",
   "front_end/rehydrated_devtools_app.html",
@@ -761,6 +763,7 @@ grd_files_debug_sources = [
   "front_end/core/common/JavaScriptMetaData.js",
   "front_end/core/common/Lazy.js",
   "front_end/core/common/Linkifier.js",
+  "front_end/core/common/MapWithDefault.js",
   "front_end/core/common/Mutex.js",
   "front_end/core/common/Object.js",
   "front_end/core/common/ParsedURL.js",
@@ -1045,14 +1048,17 @@ grd_files_debug_sources = [
   "front_end/models/trace/extras/FilmStrip.js",
   "front_end/models/trace/extras/MainThreadActivity.js",
   "front_end/models/trace/extras/Metadata.js",
+  "front_end/models/trace/extras/StackTraceForEvent.js",
   "front_end/models/trace/extras/ThirdParties.js",
   "front_end/models/trace/extras/TimelineJSProfile.js",
   "front_end/models/trace/extras/TraceFilter.js",
   "front_end/models/trace/extras/TraceTree.js",
-  "front_end/models/trace/extras/URLForEntry.js",
+  "front_end/models/trace/handlers/AnimationFramesHandler.js",
   "front_end/models/trace/handlers/AnimationHandler.js",
+  "front_end/models/trace/handlers/AsyncJSCallsHandler.js",
   "front_end/models/trace/handlers/AuctionWorkletsHandler.js",
   "front_end/models/trace/handlers/ExtensionTraceDataHandler.js",
+  "front_end/models/trace/handlers/FlowsHandler.js",
   "front_end/models/trace/handlers/FramesHandler.js",
   "front_end/models/trace/handlers/GPUHandler.js",
   "front_end/models/trace/handlers/ImagePaintingHandler.js",
@@ -1078,6 +1084,7 @@ grd_files_debug_sources = [
   "front_end/models/trace/handlers/UserTimingsHandler.js",
   "front_end/models/trace/handlers/WarningsHandler.js",
   "front_end/models/trace/handlers/WorkersHandler.js",
+  "front_end/models/trace/handlers/helpers.js",
   "front_end/models/trace/handlers/types.js",
   "front_end/models/trace/helpers/Extensions.js",
   "front_end/models/trace/helpers/Network.js",
@@ -1088,6 +1095,7 @@ grd_files_debug_sources = [
   "front_end/models/trace/helpers/TreeHelpers.js",
   "front_end/models/trace/insights/CLSCulprits.js",
   "front_end/models/trace/insights/Common.js",
+  "front_end/models/trace/insights/DOMSize.js",
   "front_end/models/trace/insights/DocumentLatency.js",
   "front_end/models/trace/insights/FontDisplay.js",
   "front_end/models/trace/insights/ImageDelivery.js",
@@ -1097,6 +1105,7 @@ grd_files_debug_sources = [
   "front_end/models/trace/insights/Models.js",
   "front_end/models/trace/insights/RenderBlocking.js",
   "front_end/models/trace/insights/SlowCSSSelector.js",
+  "front_end/models/trace/insights/Statistics.js",
   "front_end/models/trace/insights/ThirdParties.js",
   "front_end/models/trace/insights/Viewport.js",
   "front_end/models/trace/insights/types.js",
@@ -1144,6 +1153,22 @@ grd_files_debug_sources = [
   "front_end/panels/accessibility/accessibilityNode.css.js",
   "front_end/panels/accessibility/accessibilityProperties.css.js",
   "front_end/panels/accessibility/axBreadcrumbs.css.js",
+  "front_end/panels/ai_assistance/AiAssistancePanel.js",
+  "front_end/panels/ai_assistance/AiHistoryStorage.js",
+  "front_end/panels/ai_assistance/ChangeManager.js",
+  "front_end/panels/ai_assistance/EvaluateAction.js",
+  "front_end/panels/ai_assistance/ExtensionScope.js",
+  "front_end/panels/ai_assistance/agents/AiAgent.js",
+  "front_end/panels/ai_assistance/agents/FileAgent.js",
+  "front_end/panels/ai_assistance/agents/NetworkAgent.js",
+  "front_end/panels/ai_assistance/agents/PatchAgent.js",
+  "front_end/panels/ai_assistance/agents/PerformanceAgent.js",
+  "front_end/panels/ai_assistance/agents/StylingAgent.js",
+  "front_end/panels/ai_assistance/aiAssistancePanel.css.js",
+  "front_end/panels/ai_assistance/components/ChatView.js",
+  "front_end/panels/ai_assistance/components/UserActionRow.js",
+  "front_end/panels/ai_assistance/components/chatView.css.js",
+  "front_end/panels/ai_assistance/components/userActionRow.css.js",
   "front_end/panels/animation/AnimationGroupPreviewUI.js",
   "front_end/panels/animation/AnimationScreenshotPopover.js",
   "front_end/panels/animation/AnimationTimeline.js",
@@ -1346,7 +1371,6 @@ grd_files_debug_sources = [
   "front_end/panels/elements/classesPaneWidget.css.js",
   "front_end/panels/elements/components/AccessibilityTreeNode.js",
   "front_end/panels/elements/components/AdornerManager.js",
-  "front_end/panels/elements/components/AdornerSettingsPane.js",
   "front_end/panels/elements/components/AnchorFunctionLinkSwatch.js",
   "front_end/panels/elements/components/CSSHintDetailsView.js",
   "front_end/panels/elements/components/CSSPropertyDocsView.js",
@@ -1364,7 +1388,6 @@ grd_files_debug_sources = [
   "front_end/panels/elements/components/QueryContainer.js",
   "front_end/panels/elements/components/StylePropertyEditor.js",
   "front_end/panels/elements/components/accessibilityTreeNode.css.js",
-  "front_end/panels/elements/components/adornerSettingsPane.css.js",
   "front_end/panels/elements/components/anchorFunctionLinkSwatch.css.js",
   "front_end/panels/elements/components/computedStyleProperty.css.js",
   "front_end/panels/elements/components/computedStyleTrace.css.js",
@@ -1408,21 +1431,6 @@ grd_files_debug_sources = [
   "front_end/panels/explain/components/ConsoleInsight.js",
   "front_end/panels/explain/components/consoleInsight.css.js",
   "front_end/panels/explain/components/consoleInsightSourcesList.css.js",
-  "front_end/panels/freestyler/AiAgent.js",
-  "front_end/panels/freestyler/AiHistoryStorage.js",
-  "front_end/panels/freestyler/ChangeManager.js",
-  "front_end/panels/freestyler/DrJonesFileAgent.js",
-  "front_end/panels/freestyler/DrJonesNetworkAgent.js",
-  "front_end/panels/freestyler/DrJonesPerformanceAgent.js",
-  "front_end/panels/freestyler/ExtensionScope.js",
-  "front_end/panels/freestyler/FreestylerAgent.js",
-  "front_end/panels/freestyler/FreestylerEvaluateAction.js",
-  "front_end/panels/freestyler/FreestylerPanel.js",
-  "front_end/panels/freestyler/components/FreestylerChatUi.js",
-  "front_end/panels/freestyler/components/UserActionRow.js",
-  "front_end/panels/freestyler/components/freestylerChatUi.css.js",
-  "front_end/panels/freestyler/components/userActionRow.css.js",
-  "front_end/panels/freestyler/freestylerPanel.css.js",
   "front_end/panels/issues/AffectedBlockedByResponseView.js",
   "front_end/panels/issues/AffectedCookiesView.js",
   "front_end/panels/issues/AffectedDirectivesView.js",
@@ -1779,7 +1787,6 @@ grd_files_debug_sources = [
   "front_end/panels/timeline/EntriesFilter.js",
   "front_end/panels/timeline/EventsSerializer.js",
   "front_end/panels/timeline/EventsTimelineTreeView.js",
-  "front_end/panels/timeline/ExtensionDataGatherer.js",
   "front_end/panels/timeline/ExtensionTrackAppender.js",
   "front_end/panels/timeline/FreshRecording.js",
   "front_end/panels/timeline/GPUTrackAppender.js",
@@ -1801,7 +1808,6 @@ grd_files_debug_sources = [
   "front_end/panels/timeline/TimelineFlameChartNetworkDataProvider.js",
   "front_end/panels/timeline/TimelineFlameChartView.js",
   "front_end/panels/timeline/TimelineHistoryManager.js",
-  "front_end/panels/timeline/TimelineLandingPage.js",
   "front_end/panels/timeline/TimelineLayersView.js",
   "front_end/panels/timeline/TimelineLoader.js",
   "front_end/panels/timeline/TimelineMiniMap.js",
@@ -1819,6 +1825,7 @@ grd_files_debug_sources = [
   "front_end/panels/timeline/components/CPUThrottlingSelector.js",
   "front_end/panels/timeline/components/DetailsView.js",
   "front_end/panels/timeline/components/FieldSettingsDialog.js",
+  "front_end/panels/timeline/components/IgnoreListSetting.js",
   "front_end/panels/timeline/components/InteractionBreakdown.js",
   "front_end/panels/timeline/components/LayoutShiftDetails.js",
   "front_end/panels/timeline/components/LiveMetricsView.js",
@@ -1827,6 +1834,7 @@ grd_files_debug_sources = [
   "front_end/panels/timeline/components/NetworkRequestDetails.js",
   "front_end/panels/timeline/components/NetworkRequestTooltip.js",
   "front_end/panels/timeline/components/NetworkThrottlingSelector.js",
+  "front_end/panels/timeline/components/OriginMap.js",
   "front_end/panels/timeline/components/RelatedInsightChips.js",
   "front_end/panels/timeline/components/Sidebar.js",
   "front_end/panels/timeline/components/SidebarAnnotationsTab.js",
@@ -1837,8 +1845,10 @@ grd_files_debug_sources = [
   "front_end/panels/timeline/components/breadcrumbsUI.css.js",
   "front_end/panels/timeline/components/cpuThrottlingSelector.css.js",
   "front_end/panels/timeline/components/fieldSettingsDialog.css.js",
+  "front_end/panels/timeline/components/ignoreListSetting.css.js",
   "front_end/panels/timeline/components/insights/BaseInsightComponent.js",
   "front_end/panels/timeline/components/insights/CLSCulprits.js",
+  "front_end/panels/timeline/components/insights/DOMSize.js",
   "front_end/panels/timeline/components/insights/DocumentLatency.js",
   "front_end/panels/timeline/components/insights/EventRef.js",
   "front_end/panels/timeline/components/insights/FontDisplay.js",
@@ -1865,6 +1875,7 @@ grd_files_debug_sources = [
   "front_end/panels/timeline/components/networkRequestDetails.css.js",
   "front_end/panels/timeline/components/networkRequestTooltip.css.js",
   "front_end/panels/timeline/components/networkThrottlingSelector.css.js",
+  "front_end/panels/timeline/components/originMap.css.js",
   "front_end/panels/timeline/components/relatedInsightChips.css.js",
   "front_end/panels/timeline/components/sidebarAnnotationsTab.css.js",
   "front_end/panels/timeline/components/sidebarInsightsTab.css.js",
@@ -1889,6 +1900,7 @@ grd_files_debug_sources = [
   "front_end/panels/timeline/timelinePanel.css.js",
   "front_end/panels/timeline/timelineStatusDialog.css.js",
   "front_end/panels/timeline/utils/AICallTree.js",
+  "front_end/panels/timeline/utils/EntityMapper.js",
   "front_end/panels/timeline/utils/EntryName.js",
   "front_end/panels/timeline/utils/EntryStyles.js",
   "front_end/panels/timeline/utils/Helpers.js",
@@ -1949,6 +1961,7 @@ grd_files_debug_sources = [
   "front_end/third_party/lit/lib/directive.js",
   "front_end/third_party/lit/lib/directives.js",
   "front_end/third_party/lit/lib/lit.js",
+  "front_end/third_party/lit/lib/static-html.js",
   "front_end/third_party/marked/package/lib/marked.esm.js",
   "front_end/third_party/puppeteer-replay/package/lib/main.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/api/Browser.js",
@@ -2190,11 +2203,9 @@ grd_files_debug_sources = [
   "front_end/ui/components/data_grid/dataGridController.css.js",
   "front_end/ui/components/dialogs/ButtonDialog.js",
   "front_end/ui/components/dialogs/Dialog.js",
-  "front_end/ui/components/dialogs/IconDialog.js",
   "front_end/ui/components/dialogs/ShortcutDialog.js",
   "front_end/ui/components/dialogs/buttonDialog.css.js",
   "front_end/ui/components/dialogs/dialog.css.js",
-  "front_end/ui/components/dialogs/iconDialog.css.js",
   "front_end/ui/components/dialogs/shortcutDialog.css.js",
   "front_end/ui/components/diff_view/DiffView.js",
   "front_end/ui/components/diff_view/diffView.css.js",
@@ -2250,7 +2261,6 @@ grd_files_debug_sources = [
   "front_end/ui/components/panel_feedback/previewToggle.css.js",
   "front_end/ui/components/panel_introduction_steps/PanelIntroductionSteps.js",
   "front_end/ui/components/panel_introduction_steps/panelIntroductionSteps.css.js",
-  "front_end/ui/components/render_coordinator/RenderCoordinator.js",
   "front_end/ui/components/report_view/ReportView.js",
   "front_end/ui/components/report_view/report.css.js",
   "front_end/ui/components/report_view/reportKey.css.js",
@@ -2305,7 +2315,6 @@ grd_files_debug_sources = [
   "front_end/ui/legacy/Fragment.js",
   "front_end/ui/legacy/Geometry.js",
   "front_end/ui/legacy/GlassPane.js",
-  "front_end/ui/legacy/HistoryInput.js",
   "front_end/ui/legacy/Infobar.js",
   "front_end/ui/legacy/InplaceEditor.js",
   "front_end/ui/legacy/InspectorView.js",
@@ -2469,12 +2478,10 @@ grd_files_debug_sources = [
   "front_end/ui/legacy/listWidget.css.legacy.js",
   "front_end/ui/legacy/popover.css.legacy.js",
   "front_end/ui/legacy/progressIndicator.css.legacy.js",
-  "front_end/ui/legacy/radioButton.css.legacy.js",
   "front_end/ui/legacy/remoteDebuggingTerminatedScreen.css.legacy.js",
   "front_end/ui/legacy/reportView.css.legacy.js",
   "front_end/ui/legacy/rootView.css.legacy.js",
   "front_end/ui/legacy/searchableView.css.legacy.js",
-  "front_end/ui/legacy/slider.css.legacy.js",
   "front_end/ui/legacy/smallBubble.css.legacy.js",
   "front_end/ui/legacy/softContextMenu.css.legacy.js",
   "front_end/ui/legacy/softDropDown.css.legacy.js",
@@ -2491,7 +2498,7 @@ grd_files_debug_sources = [
   "front_end/ui/legacy/toolbar.css.legacy.js",
   "front_end/ui/legacy/treeoutline.css.legacy.js",
   "front_end/ui/legacy/viewContainers.css.legacy.js",
-  "front_end/ui/lit-html/static.js",
+  "front_end/ui/lit-html/i18n-template.js",
   "front_end/ui/visual_logging/Debugging.js",
   "front_end/ui/visual_logging/DomState.js",
   "front_end/ui/visual_logging/KnownContextValues.js",

package/config/gni/devtools_image_files.gni CHANGED Viewed

@@ -18,7 +18,6 @@ devtools_image_files = [
   "toolbarResizerVertical.png",
   "touchCursor_2x.png",
   "touchCursor.png",
-  "whatsnew.avif",
 ]
 devtools_svg_sources = [
@@ -89,6 +88,7 @@ devtools_svg_sources = [
   "colon.svg",
   "color-picker-filled.svg",
   "color-picker.svg",
+  "compress.svg",
   "console-conditional-breakpoint.svg",
   "console-logpoint.svg",
   "cookie.svg",
@@ -104,6 +104,8 @@ devtools_svg_sources = [
   "deployed.svg",
   "device-fold.svg",
   "devices.svg",
+  "devtools-thumbnail.svg",
+  "devtools-tips.svg",
   "devtools.svg",
   "dock-bottom.svg",
   "dock-left.svg",
@@ -269,6 +271,7 @@ devtools_svg_sources = [
   "warning-filled.svg",
   "warning.svg",
   "watch.svg",
+  "whatsnew.svg",
   "width.svg",
   "zoom-in.svg",
 ]

package/docs/README.md CHANGED Viewed

@@ -52,6 +52,7 @@ below.**
 ### Policies
 *   [Chromium DevTools Slow-Close Policy](./policy/slow-close.md)
+*   [DevTools Page Zoom Accessibility Policy](./policy/gar-page-zoom-policy.md)
 ### Useful Commands

package/docs/contributing/issues.md CHANGED Viewed

@@ -130,7 +130,7 @@ The following components in [crbug] are owned by the Chrome DevTools team.
 | ------------------------------------------ | ------------------------------------------------------------- |
 | `Chromium>Platform>DevTools`               | Issues that don't fit any specific category                   |
 | `Chromium>Platform>DevTools>Accessibility` | DevTools' accessibility                                       |
-| `Chromium>Platform>DevTools>AI`            | Console Insights and Freestyler panel                         |
+| `Chromium>Platform>DevTools>AI`            | Console Insights and AI Assistance panel                      |
 | `Chromium>Platform>DevTools>Animations`    | Animations panel                                              |
 | `Chromium>Platform>DevTools>Application`   | Application panel                                             |
 | `Chromium>Platform>DevTools>Console`       | Console panel                                                 |

package/docs/policy/README.md CHANGED Viewed

@@ -4,3 +4,4 @@ This folder contains the policies relevant to the development of the Chromium
 DevTools.
 1. [Chromium DevTools Slow-Close Policy](./slow-close.md)
+2. [DevTools Page Zoom Accessibility Policy](./gar-page-zoom-policy.md)

package/docs/policy/gar-page-zoom-policy.md ADDED Viewed

@@ -0,0 +1,43 @@
+# DevTools Page Zoom Accessibility Policy
+Chrome DevTools needs to fulfill the Google Accessibility Rating (GAR) criteria.
+GAR Web’s page zoom criteria state: “Confirm the application is also usable […]
+with page zoom enabled by 200% at a browser resolution of 1024x768 pixels. This
+width is the equivalent to resizing a browser window to 512 pixels…”
+It is unclear what exactly this means for DevTools: DevTools can be opened as
+part of the main Chrome window (docked view) or as a separate standalone window
+(undocked view). In both cases the overall DevTools window/panel is resizable,
+and it contains sub-panels which are themselves resizable.
+Docked DevTools, with top and bottom panel, top panel split vertically: <br>
+![Docked DevTools with multiple panels](./images/docked-devtools.webp) <br>
+Undocked DevTools, zoom factor 200%, with top and bottom panel, top panel
+split horizontally: <br>
+![Undocked DevTools with multiple panels](./images/undocked-devtools.png) <br>
+As can be seen in the second screenshot above, with multiple panels open at the
+same time, there is not much space left for each panel.
+Because of the panels’ resizability, we need to establish minimum panel sizes
+for GAR zoom testing. We have therefore agreed on the following criteria for
+a11y testing of DevTools with Page Zoom:
+* DevTools should be opened in a separate window (=undocked view), with a
+  resolution of 1024x768 pixels and a zoom factor of 200%.
+* When testing a panel in the top drawer (Elements panel, Network panel,
+  Performance panel,…), the whole 1024x768 pixel window should be available for
+  the panel. Bottom drawer panels should be closed by pressing ‘Esc’.
+* When testing a panel in the bottom drawer, the panel should not be smaller
+  than half the size of the overall DevTools window (i.e. a height of 384 pixels
+  at 200% zoom).
+Undocked DevTools, 1024x768 pixels, zoom factor 200%, ready for page zoom a11y
+testing of the bottom panel: <br>
+![DevTools page zoom a11y testing](./images/devtools-gar-testing.png) <br>
+## References
+[Supported viewport sizes and zoom levels in Chrome DevTools](https://goo.gle/smoldevtools)

package/docs/policy/images/devtools-gar-testing.png ADDED Viewed

Binary file

package/docs/policy/images/docked-devtools.webp ADDED Viewed

Binary file

package/docs/policy/images/undocked-devtools.png ADDED Viewed

Binary file

package/docs/styleguide/ux/components.md CHANGED Viewed

@@ -74,30 +74,27 @@ space.
 ###### Primary button
-Usage within HTML environment:
-```html
-<devtools-button
-      class="some-class"
-      .variant=${Buttons.Button.Variant.PRIMARY}
-                 .title=${i18nString(UIStrings.someString)}
-      .jslogContext=${'some-context')
-      @click=${handleClick()}
-      )></devtools-button>
+Usage with lit-html:
+```js
+html`<devtools-button class="some-class"
+                      .variant=${Buttons.Button.Variant.PRIMARY}
+                      .title=${i18nString(UIStrings.someString)}
+                      .jslogContext=${'some-context')}
+                      @click=${onClick})></devtools-button>`
 ```
-Usage within Typescript environment (mostly when working with legacy code):
-```ts
-  const button = new Buttons.Button.Button();
-  button.data = {
-      variant: Buttons.Button.Variant.PRIMARY,
-      title: i18nString(UIStrings.someString),
-      jslogContext: 'some-context',
-    };
-  button.classList.add(‘some-class’);
-  button.addEventListener(‘click’, () => handleClick());
+Usage with the imperative API:
+```js
+const button = new Buttons.Button.Button();
+button.data = {
+    variant: Buttons.Button.Variant.PRIMARY,
+    title: i18nString(UIStrings.someString),
+    jslogContext: 'some-context',
+  };
+button.classList.add('some-class');
+button.addEventListener('click', event => onClick(event));
 ```
 #### Design guidelines
@@ -139,3 +136,82 @@ Usage within Typescript environment (mostly when working with legacy code):
   * [Buttons](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit?node-id=481-2167&m=dev)
   * [Icon
     buttons](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit?node-id=571-616&m=dev)
+## Radio Buttons
+![Radio Button component](images/radio-buttons-variations.png)
+### Usage
+#### Developer guidelines
+##### Dos and Don'ts
+###### Do
+  * Use [`<input type="radio">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio)
+    nested within a [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)
+    for radio buttons, together with core styles.
+###### Don'ts
+  * Override the default colors.
+##### Developer examples
+###### Primary button
+Usage with lit-html:
+```js
+const jslog = VisualLogging.toggle().track({change: true}).context(jslogContext);
+html`<label><input type="radio" name=${name} jslog=${jslog}>${title}</label>`
+```
+Usage with the imperative API:
+```js
+const {label, radio} = UI.UItils.createRadioButton(name, title, jslogContext);
+radio.addEventListener('change', event => onChange(event))
+```
+## Sliders
+![Slider component](images/sliders-variations.png)
+### Usage
+#### Developer guidelines
+##### Dos and Don'ts
+###### Do
+  * Use [`<input type="range">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)
+    for sliders, together with core styles.
+###### Don'ts
+  * Override the default colors.
+##### Developer examples
+###### Primary button
+Usage with lit-html:
+```js
+html`<input type="range"
+            min=${min}
+            max=${max}
+            tabindex=${tabIndex}
+            @change=${onChange}>`
+```
+Usage with the imperative API:
+```js
+const slider = UI.UItils.createSlider(min, max, tabIndex);
+slider.addEventListener('change', event => onChange(event))
+```

package/docs/styleguide/ux/images/radio-buttons-variations.png ADDED Viewed

Binary file

package/docs/styleguide/ux/images/sliders-variations.png ADDED Viewed

Binary file

package/docs/styleguide/ux/styles.md CHANGED Viewed

@@ -8,12 +8,12 @@ We define three sets of color token types, **reference/palette tokens**,
 **system tokens**, and **application tokens**.
 [**Reference or palette
-tokens**](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/tokens.css)
+tokens**](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/ui/legacy/tokens.css)
 (e.g. `--ref-palette-X`) are a set of base colors that get updated on [Chrome
 color theme change](###) and should not be directly used.
 [**System
-tokens**](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/themeColors.css)
+tokens**](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/ui/legacy/themeColors.css)
 (e.g. `--sys-color-X`) are a set of semantic tokens (use is often clear from
 name e.g. `--sys-color-error-container`). They reference palette tokens and
 incorporate light / dark mode switches and should be used in the code directly.
@@ -21,7 +21,7 @@ You can view all system tokens in their light and dark variant when running the
 component server with `npm run components-server` under *Theme Colors*.
 [**Application
-tokens**](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/applicationColorTokens.css)
+tokens**](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/ui/legacy/applicationColorTokens.css)
 (e.g. `--app-color-X`) reference palette tokens, and add more semantic meaning
 and handle exception cases, where system tokens are not enough. Should be
 defined for both light and dark modes. An example CL that adds application
@@ -51,7 +51,7 @@ Chrome's theming differentiates between two *default* color schemes (a blue
 **default** and a **grey default**), and a number of **accent** color schemes
 (blue, purple, yellow, and so on). In DevTools, the default schemes are defined
 as `baseline-grayscale` and `baseline-default` css classes in
-[themeColors.css](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/themeColors.css).
+[themeColors.css](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/ui/legacy/themeColors.css).
 The accent color schemes don't require extra color definitions and will adapt
 with the reference colors.
@@ -317,10 +317,32 @@ example CL that adds application tokens can be found
 ### Resources
   * [Reference color
-    tokens](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/tokens.css)
+    tokens](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/ui/legacy/tokens.css)
   * [System color
-    tokens](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/themeColors.css)
+    tokens](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/ui/legacy/themeColors.css)
   * [Application color
-    tokens](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/applicationColorTokens.css)
+    tokens](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/ui/legacy/applicationColorTokens.css)
   * [Color definitions in the CDT
     Figma](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit?node-id=337-5217&m=dev)
+## Sizes
+[**System
+tokens**](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/ui/legacy/designTokens.css)
+include a set of tokens to be used for sizes, ranging from `--sys-size-1` (which
+corresponds to a single pixel) to `--sys-size-41` (which corresponds to the HD
+resolution width).
+### Usage
+#### Negative sizes
+Sometimes you might need to negate a size, for example to make up for some
+padding or margins. Use the pattern
+```css
+calc(-1 * var(--sys-size-X));
+```
+and try to avoid other patterns (like `calc(0px - var(...))`) that have a
+similar effect.