chrome-devtools-frontend 1.0.1683520 → 1.0.1689415

package/front_end/ui/legacy/components/perf_ui/PieChart.ts

@@ -11,7 +11,7 @@ import pieChartStyles from './pieChart.css.js';
 
 const UIStrings = {
   /**
-   * @description Text for sum
+   * @description Label for the total sum in a pie chart legend.
    */
   total: 'Total',
 } as const;

package/front_end/ui/legacy/components/perf_ui/TimelineOverviewPane.ts

@@ -311,10 +311,6 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
     this.windowStartTime = startTime;
     this.windowEndTime = endTime;
     this.updateWindow();
-    this.dispatchEventToListeners(Events.OVERVIEW_PANE_WINDOW_CHANGED, {
-      startTime: Trace.Types.Timing.Milli(startTime),
-      endTime: Trace.Types.Timing.Milli(endTime),
-    });
   }
 
   private updateWindow(): void {

package/front_end/ui/legacy/components/perf_ui/chartViewport.css

@@ -11,7 +11,7 @@
   bottom: 0;
   overflow-x: hidden;
   z-index: 200;
-  padding-left: 1px;
+  padding-left: var(--sys-size-1);
 }
 
 .chart-viewport-v-scroll.always-show-scrollbar {
@@ -20,13 +20,13 @@
 /* force non overlay scrollbars for Mac */
 
 :host-context(.platform-mac) .chart-viewport-v-scroll {
-  right: 2px;
+  right: var(--sys-size-2);
   top: 3px;
   bottom: 3px;
 }
 
 :host-context(.platform-mac) ::-webkit-scrollbar {
-  width: 8px;
+  width: var(--sys-size-5);
 }
 
 :host-context(.platform-mac) ::-webkit-scrollbar-thumb {
@@ -56,7 +56,7 @@
   z-index: 100;
   background-color: var(--sys-color-state-ripple-primary);
   border-color: var(--sys-color-primary);
-  border-width: 0 1px;
+  border-width: 0 var(--sys-size-1);
   border-style: solid;
   pointer-events: none;
   top: 0;

package/front_end/ui/legacy/components/perf_ui/filmStripView.css

@@ -12,7 +12,7 @@
 
 .film-strip-view .frame .time {
   font-size: 10px;
-  margin-top: 2px;
+  margin-top: var(--sys-size-2);
 }
 
 .film-strip-view .gray-info-message {
@@ -25,19 +25,19 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 4px;
+  padding: var(--sys-size-3);
   flex: none;
   cursor: pointer;
 }
 
 .film-strip-view .frame .thumbnail {
-  min-width: 24px;
+  min-width: var(--sys-size-11);
   display: flex;
   flex-direction: row;
   align-items: center;
   pointer-events: none;
-  margin: 4px 0 2px;
-  border: 2px solid transparent;
+  margin: var(--sys-size-3) 0 var(--sys-size-2);
+  border: var(--sys-size-2) solid transparent;
 }
 
 .film-strip-view .frame:hover .thumbnail,
@@ -48,7 +48,7 @@
 .film-strip-view .frame .thumbnail img {
   height: auto;
   width: auto;
-  max-width: 80px;
+  max-width: var(--sys-size-19);
   max-height: 50px;
   pointer-events: none;
   box-shadow: 0 0 3px var(--box-shadow-outline-color);

package/front_end/ui/legacy/components/perf_ui/flameChart.css

@@ -16,17 +16,17 @@
 
 .flame-chart-marker-highlight-element {
   position: absolute;
-  top: 1px;
+  top: var(--sys-size-1);
   height: 18px;
-  width: 6px;
+  width: var(--sys-size-4);
   margin: 0 -3px;
   content: "";
   display: block;
 }
 
 .flame-chart-canvas:focus-visible {
-  border-top: 1px solid var(--sys-color-state-focus-ring);
-  border-bottom: 1px solid var(--sys-color-state-focus-ring);
+  border-top: var(--sys-size-1) solid var(--sys-color-state-focus-ring);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-state-focus-ring);
 }
 
 .flame-chart-highlight-element {
@@ -44,7 +44,7 @@
 .flame-chart-selected-element {
   position: absolute;
   pointer-events: none;
-  outline: 2px solid var(--sys-color-primary);
+  outline: var(--sys-size-2) solid var(--sys-color-primary);
   background-color: var(--sys-color-state-ripple-primary);
 }
 
@@ -53,7 +53,7 @@
   top: 0;
   bottom: 0;
   z-index: 100;
-  width: 2px;
+  width: var(--sys-size-2);
   background-color: var(--ref-palette-pink50);
   pointer-events: none;
 }
@@ -64,7 +64,7 @@
   contain: content;
   background-color: var(--sys-color-cdt-base-container);
   pointer-events: none;
-  padding: 4px 8px;
+  padding: var(--sys-size-3) var(--sys-size-5);
   white-space: nowrap;
   max-width: 80%;
   box-shadow: var(--drop-shadow);

package/front_end/ui/legacy/components/perf_ui/overviewGrid.css

@@ -20,7 +20,7 @@
   width: 10px;
   margin-left: -5px; /* half width (incl the border) */
   background-color: var(--sys-color-tonal-container);
-  border: 1px solid var(--sys-color-tonal-outline);
+  border: var(--sys-size-1) solid var(--sys-color-tonal-outline);
   z-index: 500;
   border-radius: 3px;
 }
@@ -29,13 +29,13 @@
 .overview-grid-window-resizer::before,
 .overview-grid-window-resizer::after {
   content: "";
-  width: 1px;
+  width: var(--sys-size-1);
   background: var(--sys-color-primary);
   height: 7px;
   position: absolute;
-  left: 2px;
+  left: var(--sys-size-2);
   top: 5px;
-  border-radius: 1px;
+  border-radius: var(--sys-size-1);
 }
 
 .overview-grid-window-resizer::after {
@@ -48,7 +48,7 @@
 
 .overview-grid-cursor-area {
   position: absolute;
-  inset: 20px 0 0;
+  inset: var(--sys-size-9) 0 0;
   z-index: 500;
   cursor: text;
 }
@@ -57,7 +57,7 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  width: 2px;
+  width: var(--sys-size-2);
   background-color: var(--sys-color-primary);
   z-index: 500;
   pointer-events: none;
@@ -73,7 +73,7 @@
   height: 100%;
   z-index: 300;
   pointer-events: none;
-  border: 2px none var(--sys-color-tonal-outline);
+  border: var(--sys-size-2) none var(--sys-color-tonal-outline);
 }
 
 .window-curtain-left {
@@ -107,7 +107,7 @@
 .create-breadcrumb-button-container.with-screenshots {
   /* We have more room when screenshots are enabled,
    * so push the button down slightly */
-  top: 20px;
+  top: var(--sys-size-9);
 }
 
 .create-breadcrumb-button {
@@ -116,9 +116,9 @@
   align-items: center;
   background: var(--sys-color-cdt-base-container);
   box-shadow: var(--drop-shadow-depth-3);
-  border-radius: 50px;
-  padding: 1px 6px;
-  gap: 2px;
+  border-radius: var(--sys-shape-corner-full);
+  padding: var(--sys-size-1) var(--sys-size-4);
+  gap: var(--sys-size-2);
 }
 
 .create-breadcrumb-button:active {

package/front_end/ui/legacy/components/perf_ui/perf_ui-meta.ts

@@ -10,21 +10,19 @@ import type * as PerfUI from './perf_ui.js';
 
 const UIStrings = {
   /**
-   * @description Title of a setting under the Performance category in Settings.
-   * Selected navigation allows switching between 2 different sets of shortcuts
-   * and actions (like zoom on scroll or crtl/cmd + scroll) for navigating the performance panel.
+   * @description Title of a setting under the Performance category in Settings to select the navigation style for the Performance panel.
    */
   flamechartSelectedNavigation: 'Flamechart navigation:',
   /**
-   * @description Modern navigation option in the Performance Panel.
+   * @description Setting option for modern flame chart navigation in the Performance panel.
    */
   modern: 'Modern',
   /**
-   * @description Classic navigation option in the Performance Panel.
+   * @description Setting option for classic flame chart navigation in the Performance panel.
    */
   classic: 'Classic',
   /**
-   * @description Title of an action in the components tool to collect garbage
+   * @description Action title to trigger garbage collection.
    */
   collectGarbage: 'Collect garbage',
 } as const;

package/front_end/ui/legacy/components/perf_ui/pieChart.css

@@ -28,7 +28,7 @@
 
 .pie-chart-total {
   margin: auto;
-  padding: 2px 5px;
+  padding: var(--sys-size-2) 5px;
   pointer-events: auto;
 }
 
@@ -53,7 +53,7 @@
 }
 
 .pie-chart-legend-row {
-  margin: 5px 2px 5px auto;
+  margin: 5px var(--sys-size-2) 5px auto;
   padding-right: 25px;
 }
 
@@ -62,17 +62,17 @@
 }
 
 .pie-chart-legend-row:focus-visible {
-  box-shadow: 0 0 0 2px var(--sys-color-state-focus-ring) !important; /* stylelint-disable-line declaration-no-important */
+  box-shadow: 0 0 0 var(--sys-size-2) var(--sys-color-state-focus-ring) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .pie-chart-swatch {
   display: inline-block;
   width: 11px;
   height: 11px;
-  margin: 0 6px;
-  top: 1px;
+  margin: 0 var(--sys-size-4);
+  top: var(--sys-size-1);
   position: relative;
-  border: 1px solid var(--sys-color-neutral-outline);
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
 }
 
 .pie-chart-name {

package/front_end/ui/legacy/components/perf_ui/timelineGrid.css

@@ -26,7 +26,7 @@
   left: 0;
   right: 0;
   background-clip: padding-box;
-  height: 20px;
+  height: var(--sys-size-9);
   z-index: 200;
   pointer-events: none;
   overflow: hidden;
@@ -34,7 +34,7 @@
 
 .resources-divider {
   position: absolute;
-  width: 1px;
+  width: var(--sys-size-1);
   top: 0;
   bottom: 0;
   background-color: var(--sys-color-divider);
@@ -42,7 +42,7 @@
 
 .resources-event-divider {
   position: absolute;
-  width: 1px;
+  width: var(--sys-size-1);
   top: 0;
   bottom: 0;
   z-index: 300;
@@ -50,7 +50,7 @@
 
 .resources-divider-label {
   position: absolute;
-  top: 4px;
+  top: var(--sys-size-3);
   right: 3px;
   font-size: 80%;
   white-space: nowrap;
@@ -58,6 +58,6 @@
 }
 
 .timeline-grid-header {
-  height: 20px;
+  height: var(--sys-size-9);
   pointer-events: none;
 }

package/front_end/ui/legacy/components/quick_open/filteredListWidget.css

@@ -8,7 +8,7 @@
   display: flex;
   flex-direction: column;
   flex: auto;
-  border: 1px solid transparent;
+  border: var(--sys-size-1) solid transparent;
 }
 
 .hbox {
@@ -110,14 +110,14 @@ devtools-text-prompt {
 }
 
 .filtered-list-widget-item .deprecated-tag {
-  font-size: 11px;
+  font-size: var(--sys-typescale-body5-size);
   color: var(--sys-color-token-subtle);
 }
 
 .not-found-text {
   height: 34px;
   line-height: 34px;
-  padding-left: 8px;
+  padding-left: var(--sys-size-5);
   font-style: italic;
   color: var(--sys-color-state-disabled);
   background: var(--sys-color-state-disabled-container);

package/front_end/ui/legacy/components/source_frame/FontView.ts

@@ -41,11 +41,11 @@ import fontViewStyles from './fontView.css.js';
 
 const UIStrings = {
   /**
-   * @description Text that appears on a button for the font resource type filter.
+   * @description Title of the font view tab in the Sources panel.
    */
   font: 'Font',
   /**
-   * @description Aria accessible name in Font View of the Sources panel
+   * @description Accessible name for the font preview in the font view of the Sources panel.
    * @example {https://example.com} PH1
    */
   previewOfFontFromS: 'Preview of font from {PH1}',

package/front_end/ui/legacy/components/source_frame/ImageView.ts

@@ -45,46 +45,46 @@ import imageViewStyles from './imageView.css.js';
 
 const UIStrings = {
   /**
-   * @description Text in Image View of the Sources panel
+   * @description Title of the image view tab in the Sources panel.
    */
   image: 'Image',
   /**
-   * @description Text that appears when user drag and drop something (for example, a file) in Image View of the Sources panel
+   * @description Drop target message shown when dragging a file into the image view of the Sources panel.
    */
   dropImageFileHere: 'Drop image file here',
   /**
-   * @description Text to indicate the source of an image
-   * @example {example.com} PH1
+   * @description Alt text for the image preview in the image view of the Sources panel.
+   * @example {https://example.com} PH1
    */
   imageFromS: 'Image from {PH1}',
   /**
-   * @description Text in Image View of the Sources panel
-   * @example {2} PH1
-   * @example {2} PH2
+   * @description Dimensions label in the toolbar of the image view showing width and height in pixels.
+   * @example {200} PH1
+   * @example {100} PH2
    */
   dD: '{PH1} × {PH2}',
   /**
-   * @description A context menu item in the Image View of the Sources panel
+   * @description Context menu item in the image view of the Sources panel to copy the image URL.
    */
   copyImageUrl: 'Copy image URL',
   /**
-   * @description A context menu item in the Image View of the Sources panel
+   * @description Context menu item in the image view of the Sources panel to copy the image as a data URI.
    */
   copyImageAsDataUri: 'Copy image as data URI',
   /**
-   * @description A context menu item in the Image View of the Sources panel
+   * @description Context menu item in the image view of the Sources panel to open the image in a new tab.
    */
   openImageInNewTab: 'Open image in new tab',
   /**
-   * @description A context menu item in the Image Preview
+   * @description Context menu item in the image view of the Sources panel to save the image.
    */
   saveImageAs: 'Save image as…',
   /**
-   * @description The default file name when downloading a file
+   * @description Default file name used when saving an image with a data URI.
    */
   download: 'download',
   /**
-   * @description Text indicating an image is too large to display and offering to open it in a new tab
+   * @description Link text shown in the image view of the Sources panel when an image is too large to display.
    */
   thisImageIsTooBig: 'This image is too big to display in DevTools. Click here to open it in a new tab.',
 } as const;

package/front_end/ui/legacy/components/source_frame/JSONView.ts

@@ -14,7 +14,7 @@ import jsonViewStyles from './jsonView.css.js';
 
 const UIStrings = {
   /**
-   * @description Text to find an item
+   * @description Placeholder text for the search input in the json view.
    */
   find: 'Find',
 } as const;

package/front_end/ui/legacy/components/source_frame/PreviewFactory.ts

@@ -16,11 +16,11 @@ import {XMLView} from './XMLView.js';
 
 const UIStrings = {
   /**
-   * @description Text in Preview Factory of the Sources panel if the data to preview can't be shown due to an error
+   * @description Text shown in the empty widget when data fails to load in the preview factory of the Sources panel.
    */
   failedToLoadData: 'Failed to load data',
   /**
-   * @description Text in Preview Factory of the Sources panel if there's no data to preview
+   * @description Text shown in the empty widget when there is no content to preview in the preview factory of the Sources panel.
    */
   nothingToPreview: 'Nothing to preview',
 } as const;

package/front_end/ui/legacy/components/source_frame/ResourceSourceFrame.ts

@@ -37,7 +37,7 @@ import '../../legacy.js';
 import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as TextUtils from '../../../../core/text_utils/text_utils.js';
-import * as FormatterActions from '../../../../entrypoints/formatter_worker/FormatterActions.js';  // eslint-disable-line @devtools/es-modules-import
+import * as FormatterActions from '../../../../entrypoints/formatter_actions/formatter_actions.js';
 import {render} from '../../../../ui/lit/lit.js';
 import * as UI from '../../legacy.js';
 
@@ -46,7 +46,7 @@ import {type RevealPosition, SourceFrameImpl, type SourceFrameOptions} from './S
 
 const UIStrings = {
   /**
-   * @description Text to find an item
+   * @description Placeholder text for the search input in the resource source frame.
    */
   find: 'Find',
 } as const;

package/front_end/ui/legacy/components/source_frame/SourceFrame.ts

@@ -20,62 +20,60 @@ import * as UI from '../../legacy.js';
 
 const UIStrings = {
   /**
-   * @description Text for the source of something
+   * @description Title of the source frame view tab.
    */
   source: 'Source',
   /**
-   * @description Text to pretty print a file
+   * @description Tooltip text for the pretty print button in the toolbar.
    */
   prettyPrint: 'Pretty print',
   /**
-   * @description Text when something is loading
+   * @description Tooltip text for the progress indicator while content is loading in the source frame.
    */
   loading: 'Loading…',
   /**
-   * @description Text when a file is currently being pretty printed/formatted in the editor
+   * @description Placeholder text shown in the editor while formatting content.
    */
   formatting: 'Formatting…',
   /**
-   * @description Shown at the bottom of the Sources panel when the user has made multiple
-   * simultaneous text selections in the text editor.
+   * @description Status bar text in the source frame showing the number of active selection regions.
    * @example {2} PH1
    */
   dSelectionRegions: '{PH1} selection regions',
   /**
-   * @description Position indicator in Source Frame of the Sources panel. The placeholder is a
-   * hexadecimal number value, which is why it is prefixed with '0x'.
+   * @description Status bar text in the source frame showing the current bytecode offset position. The placeholder is a hexadecimal number value, which is why it is prefixed with '0x'.
    * @example {abc} PH1
    */
   bytecodePositionXs: 'Bytecode position `0x`{PH1}',
   /**
-   * @description Text in Source Frame of the Sources panel
+   * @description Status bar text in the source frame showing the cursor line and column position.
    * @example {2} PH1
    * @example {2} PH2
    */
-  lineSColumnS: 'Line {PH1}, Column {PH2}',
+  lineSColumnS: 'Line {PH1}, column {PH2}',
   /**
-   * @description Text in Source Frame of the Sources panel
+   * @description Status bar text in the source frame showing the number of characters selected.
    * @example {2} PH1
    */
   dCharactersSelected: '{PH1} characters selected',
   /**
-   * @description Text in Source Frame of the Sources panel
+   * @description Status bar text in the source frame showing the number of lines and characters selected.
    * @example {2} PH1
    * @example {2} PH2
    */
   dLinesDCharactersSelected: '{PH1} lines, {PH2} characters selected',
   /**
-   * @description Headline of warning shown to users when pasting text/code into DevTools.
+   * @description Title of warning dialog shown to users when pasting code into DevTools.
    */
   doYouTrustThisCode: 'Do you trust this code?',
   /**
-   * @description Warning shown to users when pasting text/code into DevTools. IMPORTANT: keep double quotes around PH1 and do not use single quotes.
+   * @description Warning message shown to users when pasting code into DevTools. IMPORTANT: keep double quotes around PH1 and do not use single quotes.
    * @example {allow pasting} PH1
    */
   doNotPaste:
-      'Don’t paste code you do not understand or have not reviewed yourself into DevTools. This could allow attackers to steal your identity or take control of your computer. Please type "{PH1}" below to allow pasting.',
+      'Don’t paste code you don’t understand or haven’t reviewed yourself into DevTools. This could allow attackers to steal your identity or take control of your computer. Type "{PH1}" below to allow pasting.',
   /**
-   * @description Text a user needs to type in order to confirm that they are aware of the danger of pasting code into the DevTools console.
+   * @description Text the user needs to type to confirm they want to paste code into DevTools.
    */
   allowPasting: 'allow pasting',
   /**
@@ -84,8 +82,7 @@ const UIStrings = {
    */
   typeAllowPasting: 'Type "{PH1}"',
   /**
-   * @description Error message shown when the user tries to open a file that contains non-readable data. "Editor" refers to
-   * a text editor.
+   * @description Error message shown in the text editor when binary data cannot be displayed.
    */
   binaryContentError:
       'Editor can’t show binary data. Use the Response tab in the Network panel to inspect this resource.',

package/front_end/ui/legacy/components/source_frame/XMLView.ts

@@ -15,7 +15,7 @@ import xmlViewStyles from './xmlView.css.js';
 
 const UIStrings = {
   /**
-   * @description Text to find an item
+   * @description Placeholder text for the search input in the xml view.
    */
   find: 'Find',
 } as const;

package/front_end/ui/legacy/components/source_frame/imageView.css

@@ -9,7 +9,7 @@
 }
 
 .image-view > .image {
-  padding: 20px 20px 10px;
+  padding: var(--sys-size-9) var(--sys-size-9) 10px;
   text-align: center;
 }
 

package/front_end/ui/legacy/components/source_frame/jsonView.css

@@ -5,7 +5,7 @@
  */
 
 .json-view {
-  padding: 2px 6px;
+  padding: var(--sys-size-2) var(--sys-size-4);
   overflow: auto;
 }
 

package/front_end/ui/legacy/components/source_frame/resourceSourceFrame.css

@@ -10,5 +10,5 @@
 
 devtools-toolbar {
   background-color: var(--sys-color-cdt-base-container);
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
 }

package/front_end/ui/legacy/components/source_frame/source_frame-meta.ts

@@ -7,39 +7,39 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 
 const UIStrings = {
   /**
-   * @description Title of a setting under the Sources category in Settings
+   * @description Title of a setting under the Sources category in settings.
    */
-  defaultIndentation: 'Default indentation:',
+  defaultIndentation: 'Default indentation',
   /**
-   * @description Title of a setting under the Sources category that can be invoked through the Command Menu
+   * @description Title of a setting under the Sources category that can be invoked through the command menu.
    */
   setIndentationToSpaces: 'Set indentation to 2 spaces',
   /**
-   * @description A drop-down menu option to set indentation to 2 spaces
+   * @description Option in a dropdown menu to set indentation to 2 spaces.
    */
   Spaces: '2 spaces',
   /**
-   * @description Title of a setting under the Sources category that can be invoked through the Command Menu
+   * @description Title of a setting under the Sources category that can be invoked through the command menu.
    */
   setIndentationToFSpaces: 'Set indentation to 4 spaces',
   /**
-   * @description A drop-down menu option to set indentation to 4 spaces
+   * @description Option in a dropdown menu to set indentation to 4 spaces.
    */
   fSpaces: '4 spaces',
   /**
-   * @description Title of a setting under the Sources category that can be invoked through the Command Menu
+   * @description Title of a setting under the Sources category that can be invoked through the command menu.
    */
   setIndentationToESpaces: 'Set indentation to 8 spaces',
   /**
-   * @description A drop-down menu option to set indentation to 8 spaces
+   * @description Option in a dropdown menu to set indentation to 8 spaces.
    */
   eSpaces: '8 spaces',
   /**
-   * @description Title of a setting under the Sources category that can be invoked through the Command Menu
+   * @description Title of a setting under the Sources category that can be invoked through the command menu.
    */
   setIndentationToTabCharacter: 'Set indentation to tab character',
   /**
-   * @description A drop-down menu option to set indentation to tab character
+   * @description Option in a dropdown menu to set indentation to tab character.
    */
   tabCharacter: 'Tab character',
 } as const;