chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

package/front_end/ui/legacy/components/color_picker/spectrum.css

@@ -23,7 +23,7 @@
   position: relative;
   width: 232px;
   height: 127px;
-  border-radius: 2px 2px 0 0;
+  border-radius: var(--sys-size-2) var(--sys-size-2) 0 0;
   overflow: hidden;
   flex: none;
   touch-action: none;
@@ -35,10 +35,10 @@
 }
 
 .spectrum-dragger {
-  border-radius: 12px;
-  height: 12px;
-  width: 12px;
-  border: 1px solid var(--sys-color-surface);
+  border-radius: var(--sys-shape-corner-medium-small);
+  height: var(--sys-size-6);
+  width: var(--sys-size-6);
+  border: var(--sys-size-1) solid var(--sys-color-surface);
   cursor: move;
   z-index: 1;
   position: absolute;
@@ -50,7 +50,7 @@
 
 .spectrum-slider {
   position: absolute;
-  top: -1px;
+  top: calc(-1 * var(--sys-size-1));
   cursor: ew-resize;
   width: 13px;
   height: 13px;
@@ -60,7 +60,7 @@
 }
 
 .spectrum-color:focus .spectrum-dragger {
-  border: 1px solid var(--sys-color-state-focus-ring);
+  border: var(--sys-size-1) solid var(--sys-color-state-focus-ring);
 }
 
 .spectrum-tools {
@@ -71,7 +71,7 @@
 }
 
 .spectrum-hue {
-  top: 16px;
+  top: var(--sys-size-8);
   /* stylelint-disable-next-line plugin/use_theme_colors */
   background: linear-gradient(to left in hsl longer hue, #f00 0 100%);
 }
@@ -91,7 +91,7 @@
 
 .spectrum-alpha-background {
   height: 100%;
-  border-radius: 2px;
+  border-radius: var(--sys-size-2);
 }
 
 .spectrum-hue,
@@ -100,16 +100,16 @@
   left: 86px;
   width: 130px;
   height: 11px;
-  border-radius: 2px;
+  border-radius: var(--sys-size-2);
   touch-action: none;
 }
 
 .spectrum-hue:focus-visible .spectrum-slider,
 .spectrum-alpha:focus-visible .spectrum-slider {
-  border: 1px solid var(--sys-color-state-focus-ring);
-  width: 14px;
-  height: 14px;
-  border-radius: 14px;
+  border: var(--sys-size-1) solid var(--sys-color-state-focus-ring);
+  width: var(--sys-size-7);
+  height: var(--sys-size-7);
+  border-radius: var(--sys-size-7);
 }
 
 .spectrum-sat,
@@ -130,9 +130,9 @@
   width: 100%;
   height: 83px;
   top: 0;
-  font-size: 13px;
+  font-size: var(--sys-typescale-body3-size);
   color: var(--sys-color-on-surface);
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
   line-height: initial;
   overflow: hidden;
   flex: none;
@@ -145,8 +145,8 @@
 
 .spectrum-contrast-details devtools-toolbar.expand {
   position: absolute;
-  right: 6px;
-  top: 6px;
+  right: var(--sys-size-4);
+  top: var(--sys-size-4);
   margin: 0;
 }
 
@@ -160,7 +160,7 @@
 
 .spectrum-contrast-details .expanded-details {
   display: flex;
-  margin: 12px 12px 0 4px;
+  margin: var(--sys-size-6) var(--sys-size-6) 0 var(--sys-size-3);
 }
 
 .spectrum-contrast-details.collapsed .expanded-details {
@@ -189,13 +189,13 @@
 
 .contrast-fix-button {
   cursor: pointer;
-  font-size: 13px;
+  font-size: var(--sys-typescale-body3-size);
   padding: 0;
   margin: 0 0 0 10px;
   background: 0;
-  width: 12px;
-  height: 12px;
-  border: 1px solid var(--sys-color-neutral-outline);
+  width: var(--sys-size-6);
+  height: var(--sys-size-6);
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
   display: inline-block;
   position: relative;
 }
@@ -210,12 +210,12 @@
   left: 5.5px;
   top: 3.5px;
   background-color: var(--sys-color-cdt-base-container);
-  border-radius: 50%;
+  border-radius: var(--sys-shape-corner-full);
 }
 
 .contrast-fix-button:hover,
 .contrast-fix-button:focus {
-  border: 1px solid var(--sys-color-state-focus-ring);
+  border: var(--sys-size-1) solid var(--sys-color-state-focus-ring);
   transform: scale(1.2);
 }
 
@@ -230,20 +230,20 @@
 .spectrum-contrast-details .background-color {
   position: absolute;
   flex: none;
-  right: 12px;
+  right: var(--sys-size-6);
 }
 
 .spectrum-eye-dropper {
-  width: 32px;
-  height: 24px;
+  width: var(--sys-size-13);
+  height: var(--sys-size-11);
   position: relative;
-  left: 8px;
+  left: var(--sys-size-5);
   top: 17px;
   cursor: pointer;
 }
 
 .spectrum-contrast-details .spectrum-eye-dropper {
-  top: 2px;
+  top: var(--sys-size-2);
   right: 34px;
   position: absolute;
   left: auto;
@@ -300,14 +300,14 @@ devtools-icon.check-double {
 }
 
 .swatch {
-  width: 32px;
-  height: 32px;
+  width: var(--sys-size-13);
+  height: var(--sys-size-13);
   margin: 0;
   position: absolute;
   top: 15px;
-  left: 44px;
+  left: var(--sys-size-15);
   background-image: var(--image-file-checker);
-  border-radius: 16px;
+  border-radius: var(--sys-shape-corner-medium);
 }
 
 .swatch-inner,
@@ -316,17 +316,17 @@ devtools-icon.check-double {
   width: 100%;
   height: 100%;
   display: inline-block;
-  border-radius: 16px;
+  border-radius: var(--sys-shape-corner-medium);
 }
 
 .swatch-inner-white {
-  border: 1px solid var(--sys-color-neutral-outline);
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
 }
 
 .swatch-overlay {
   cursor: pointer;
   opacity: 0%;
-  padding: 4px;
+  padding: var(--sys-size-3);
 }
 
 .swatch-overlay:hover,
@@ -341,35 +341,35 @@ devtools-icon.check-double {
 
 devtools-icon.copy-color-icon {
   color: var(--sys-color-cdt-base-container);
-  margin-top: 2px;
-  margin-left: 2px;
+  margin-top: var(--sys-size-2);
+  margin-left: var(--sys-size-2);
 }
 
 .spectrum-text {
   position: absolute;
   top: 60px;
-  left: 16px;
+  left: var(--sys-size-8);
 }
 
 .spectrum-text-value {
   display: inline-block;
-  width: 40px;
+  width: var(--sys-size-14);
   overflow: hidden;
   text-align: center;
-  margin-right: 6px;
-  line-height: 20px;
+  margin-right: var(--sys-size-4);
+  line-height: var(--sys-size-9);
   padding: 0;
   color: var(--sys-color-on-surface);
-  border: 1px solid var(--sys-color-neutral-outline);
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
   white-space: nowrap;
 }
 
 .spectrum-text-label {
   letter-spacing: 39.5px;
-  margin-top: 8px;
+  margin-top: var(--sys-size-5);
   display: block;
   color: var(--sys-color-state-disabled);
-  margin-left: 16px;
+  margin-left: var(--sys-size-8);
   width: 174px;
 }
 
@@ -384,10 +384,10 @@ devtools-icon.copy-color-icon {
 }
 
 .spectrum-switcher {
-  border-radius: 2px;
-  height: 20px;
-  width: 20px;
-  padding: 2px;
+  border-radius: var(--sys-size-2);
+  height: var(--sys-size-9);
+  width: var(--sys-size-9);
+  padding: var(--sys-size-2);
   border: none;
   background: none;
   margin: 0;
@@ -408,10 +408,10 @@ devtools-icon.copy-color-icon {
 }
 
 .spectrum-palette-container {
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
   position: relative;
   width: 100%;
-  padding: 6px 24px 6px 6px;
+  padding: var(--sys-size-4) var(--sys-size-11) var(--sys-size-4) var(--sys-size-4);
   display: flex;
   flex-wrap: wrap;
 }
@@ -423,15 +423,15 @@ devtools-icon.copy-color-icon {
 }
 
 .spectrum-palette-color {
-  width: 12px;
-  height: 12px;
-  flex: 0 0 12px;
-  border-radius: 2px;
-  margin: 6px;
+  width: var(--sys-size-6);
+  height: var(--sys-size-6);
+  flex: 0 0 var(--sys-size-6);
+  border-radius: var(--sys-size-2);
+  margin: var(--sys-size-4);
   cursor: pointer;
   position: relative;
-  border: 1px solid var(--sys-color-divider);
-  background-position: -1px !important; /* stylelint-disable-line declaration-no-important */
+  border: var(--sys-size-1) solid var(--sys-color-divider);
+  background-position: calc(-1 * var(--sys-size-1)) !important; /* stylelint-disable-line declaration-no-important */
   z-index: 14;
 }
 
@@ -442,7 +442,7 @@ devtools-icon.copy-color-icon {
   top: -5px;
   left: 3px;
   border: 0;
-  border-radius: 1px;
+  border-radius: var(--sys-size-1);
   width: 11px;
   height: 11px;
 }
@@ -460,20 +460,20 @@ devtools-icon.copy-color-icon {
   > .spectrum-palette-color-shadow:first-child {
   opacity: 60%;
   top: -3px;
-  left: 1px;
+  left: var(--sys-size-1);
 }
 
 .palette-color-shades {
   position: absolute;
   background-color: var(--sys-color-cdt-base-container);
   height: 228px;
-  width: 28px;
+  width: var(--sys-size-12);
   box-shadow: var(--drop-shadow);
   z-index: 14;
-  border-radius: 2px;
+  border-radius: var(--sys-size-2);
   transform-origin: 0 228px;
-  margin-top: 16px;
-  margin-left: -8px;
+  margin-top: var(--sys-size-8);
+  margin-left: calc(-1 * var(--sys-size-5));
 }
 
 .spectrum-palette > .spectrum-palette-color.spectrum-shades-shown {
@@ -481,9 +481,9 @@ devtools-icon.copy-color-icon {
 }
 
 .palette-color-shades > .spectrum-palette-color {
-  margin: 8px 0 0;
-  margin-left: 8px;
-  width: 12px;
+  margin: var(--sys-size-5) 0 0;
+  margin-left: var(--sys-size-5);
+  width: var(--sys-size-6);
 }
 
 .spectrum-palette > .spectrum-palette-color {
@@ -493,7 +493,7 @@ devtools-icon.copy-color-icon {
 }
 
 .palette-preview > .spectrum-palette-color {
-  margin-top: 1px;
+  margin-top: var(--sys-size-1);
 }
 
 .spectrum-palette > .spectrum-palette-color.empty-color {
@@ -501,7 +501,7 @@ devtools-icon.copy-color-icon {
 }
 
 .spectrum-palette-color:not(.has-material-shades):focus {
-  border: 1px solid var(--sys-color-state-focus-ring);
+  border: var(--sys-size-1) solid var(--sys-color-state-focus-ring);
   transform: scale(1.4);
 }
 
@@ -513,7 +513,7 @@ devtools-icon.copy-color-icon {
 
 .add-color-toolbar {
   margin-left: -3px;
-  margin-top: -1px;
+  margin-top: calc(-1 * var(--sys-size-1));
 }
 
 .spectrum-palette-switcher {
@@ -532,7 +532,7 @@ devtools-icon.copy-color-icon {
   background-color: var(--sys-color-cdt-base-container);
   z-index: 14;
   transition: transform 200ms cubic-bezier(0, 0, 0.2, 1), visibility 0s 200ms;
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
   visibility: hidden;
 }
 
@@ -544,23 +544,23 @@ devtools-icon.copy-color-icon {
 
 .palette-panel > devtools-toolbar {
   position: absolute;
-  right: 6px;
-  top: 6px;
+  right: var(--sys-size-4);
+  top: var(--sys-size-4);
 }
 
 .palette-panel > div {
   flex: 0 0 38px;
-  border-bottom: 1px solid var(--sys-color-divider);
-  padding: 12px;
-  line-height: 14px;
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+  padding: var(--sys-size-6);
+  line-height: var(--sys-size-7);
   color: var(--sys-color-on-surface);
 }
 
 .palette-panel > div.palette-title {
-  font-size: 14px;
-  line-height: 16px;
+  font-size: var(--sys-typescale-body2-size);
+  line-height: var(--sys-size-8);
   color: var(--sys-color-on-surface);
-  flex-basis: 40px;
+  flex-basis: var(--sys-size-14);
 }
 
 div.palette-preview {
@@ -616,9 +616,9 @@ div.palette-preview {
   width: 36px;
   display: flex;
   align-items: center;
-  padding-left: 4px;
-  bottom: 2px;
-  border-bottom-right-radius: 2px;
+  padding-left: var(--sys-size-3);
+  bottom: var(--sys-size-2);
+  border-bottom-right-radius: var(--sys-size-2);
 }
 
 @keyframes showDeleteToolbar {
@@ -661,17 +661,17 @@ div.palette-preview {
 
 .background-color .text-preview {
   color: var(--sys-color-inverse-surface);
-  font-size: 16px;
+  font-size: var(--sys-typescale-body1-size);
   position: relative;
-  padding-bottom: 2px;
+  padding-bottom: var(--sys-size-2);
 }
 
 .swatch.contrast devtools-icon {
-  margin: -2px;
+  margin: calc(-1 * var(--sys-size-2));
 }
 
 .no-contrast-info-available {
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
   position: relative;
   width: 100%;
   padding: 10px;
@@ -682,7 +682,7 @@ div.palette-preview {
 
 @media (forced-colors: active) {
   :host {
-    border: 1px solid canvastext !important; /* stylelint-disable-line declaration-no-important */
+    border: var(--sys-size-1) solid canvastext !important; /* stylelint-disable-line declaration-no-important */
   }
 
   .spectrum-color {
@@ -711,7 +711,7 @@ div.palette-preview {
   .swatch-inner,
   .swatch-overlay,
   .swatch-inner-white {
-    border: 1px solid ButtonText;
+    border: var(--sys-size-1) solid ButtonText;
   }
 
   .swatch-overlay:hover,
@@ -722,6 +722,6 @@ div.palette-preview {
   .spectrum-slider {
     forced-color-adjust: none;
     background-color: ButtonText !important; /* stylelint-disable-line declaration-no-important */
-    box-shadow: 0 1px 4px 0 ButtonFace !important; /* stylelint-disable-line declaration-no-important */
+    box-shadow: 0 var(--sys-size-1) var(--sys-size-3) 0 ButtonFace !important; /* stylelint-disable-line declaration-no-important */
   }
 }

package/front_end/ui/legacy/components/cookie_table/cookiesTable.css

@@ -9,5 +9,5 @@
 }
 
 .cookies-table devtools-icon {
-  margin-right: 4px;
+  margin-right: var(--sys-size-3);
 }

package/front_end/ui/legacy/components/data_grid/DataGrid.ts

@@ -40,84 +40,82 @@ export {dataGridStyles};
 
 const UIStrings = {
   /**
-   * @description Accessible text label for expandible nodes in datagrids
+   * @description Accessible text label for expanded rows in a datagrid. Lowercase because it is inserted into the middle of another sentence.
    */
   expanded: 'expanded',
   /**
-   * @description accessible name for expandible nodes in datagrids
+   * @description Accessible text label for collapsed rows in a datagrid. Lowercase because it is inserted into the middle of another sentence.
    */
   collapsed: 'collapsed',
   /**
-   * @description Accessible text for datagrid
+   * @description Accessible text for a row in a datagrid announced by screen readers.
    * @example {Coverage grid} PH1
    * @example {expanded} PH2
    */
-  sRowS: '{PH1} Row {PH2}',
+  sRowS: '{PH1} row {PH2}',
   /**
-   * @description Number of rows in a grid
+   * @description Accessible text indicating the number of rows in a datagrid. Lowercase because it is inserted into the middle of another sentence.
    * @example {1} PH1
    */
-  rowsS: 'Rows: {PH1}',
+  rowsS: 'rows: {PH1}',
   /**
-   * @description Default Accessible Text for a Datagrid. This text is read to the user by a
-   * screenreader when they navigate to a table structure. The placeholders tell the user something
-   * brief about the table contents i.e. the topic and how much data is in it.
+   * @description Accessible text for a datagrid announced by screen readers when focusing the table without a selected row.
    * @example {Network} PH1
-   * @example {Rows: 27} PH2
+   * @example {rows: 27} PH2
    */
   sSUseTheUpAndDownArrowKeysTo:
-      '{PH1} {PH2}, use the up and down arrow keys to navigate and interact with the rows of the table; Use browse mode to read cell by cell.',
+      '{PH1} {PH2}, use the up and down arrow keys to navigate and interact with the rows of the table; use browse mode to read cell by cell.',
   /**
-   * @description A context menu item in the Data Grid of a data grid
+   * @description Context menu item label to sort the rows of a datagrid by a column.
    */
   sortByString: 'Sort by',
   /**
-   * @description A context menu item in data grids to reset the columns to their default weight
+   * @description Context menu item label in a datagrid to reset column widths to their default values.
    */
   resetColumns: 'Reset columns',
   /**
-   * @description A context menu item in data grids to list header options.
+   * @description Context menu submenu label in a datagrid containing column header options.
    */
   headerOptions: 'Header options',
   /**
-   * @description Text to refresh the page
+   * @description Context menu item label in a datagrid to refresh the table contents.
    */
   refresh: 'Refresh',
   /**
-   * @description A context menu item in the Data Grid of a data grid
+   * @description Context menu item label in a datagrid to add a new row.
    */
   addNew: 'Add new',
   /**
-   * @description A context menu item in the Data Grid of a data grid
+   * @description Context menu item label in a datagrid to edit a specific column value in a row.
    * @example {pattern} PH1
    */
   editS: 'Edit "{PH1}"',
   /**
-   * @description Text to delete something
+   * @description Context menu item label in a datagrid to delete a selected row.
    */
   delete: 'Delete',
   /**
-   * @description Depth of a node in the datagrid
+   * @description Accessible text indicating the depth level of a row in a hierarchical datagrid.
    * @example {1} PH1
    */
-  levelS: 'level {PH1}',
+  levelS: 'Level {PH1}',
   /**
-   * @description Text exposed to screen readers on checked items.
+   * @description Accessible text announced by screen readers for checked boolean cells in a datagrid.
    */
-  checked: 'checked',
+  checked: 'Checked',
   /**
-   * @description Accessible text indicating an empty row is created.
+   * @description Accessible text announced by screen readers when a new editable empty row is added to a datagrid.
    */
-  emptyRowCreated: 'An empty table row has been created. You may double click or use context menu to edit.',
+  emptyRowCreated: 'An empty table row was added. Double-click or use the context menu to edit.',
   /**
-   * @description Text for screen reader to announce when focusing on a sortable column in data grid.
+   * @description Accessible text announced by screen readers when focusing on a sortable column header in a datagrid.
    * @example {ascending} PH1
    */
-  enterToSort: 'Column sort state: {PH1}. Press enter to apply sorting filter',
+  enterToSort: 'Column sort state: {PH1}. Press enter to sort.',
   /**
-   * @description Label for sortable column headers.
+   * @description Accessible label for sortable column headers in a datagrid.
    */
-  sortableColumn: 'Sortable column. Press enter to apply sorting filter',
+  sortableColumn: 'Sortable column. Press enter to sort.',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/data_grid/DataGrid.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/ui/legacy/components/data_grid/ShowMoreDataGridNode.ts

@@ -11,21 +11,17 @@ import {DataGridNode} from './DataGrid.js';
 
 const UIStrings = {
   /**
-   * @description Shown in a table when there are too many results to show directly. The user can
-   * click this button to show more results. This will result in the UI showing X more results before
-   * the current position.
+   * @description Button label in a datagrid to show more rows before the current position.
    * @example {5} PH1
    */
   showDBefore: 'Show {PH1} before',
   /**
-   * @description Shown in a table when there are too many results to show directly. The user can
-   * click this button to show more results. This will result in the UI showing X more results after
-   * the current position.
+   * @description Button label in a datagrid to show more rows after the current position.
    * @example {5} PH1
    */
   showDAfter: 'Show {PH1} after',
   /**
-   * @description In a data grid, for a list of items with omitted items, display all omitted items
+   * @description Button label in a datagrid to show all remaining hidden rows.
    * @example {50} PH1
    */
   showAllD: 'Show all {PH1}',