chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/panels/settings/emulation/components/UserAgentClientHintsForm.ts

@@ -8,7 +8,6 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import type * as Protocol from '../../../../generated/protocol.js';
 import * as Buttons from '../../../../ui/components/buttons/buttons.js';
-import type * as IconButton from '../../../../ui/components/icon_button/icon_button.js';
 import * as Input from '../../../../ui/components/input/input.js';
 import type * as UI from '../../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
@@ -205,7 +204,6 @@ const DEFAULT_METADATA = {
  * and network conditions panel. It is customizable through showMobileCheckbox and showSubmitButton.
  */
 export class UserAgentClientHintsForm extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-user-agent-client-hints-form`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #isFormOpened: boolean = false;
@@ -603,8 +601,11 @@ export class UserAgentClientHintsForm extends HTMLElement {
       })}
           />
           <devtools-icon
-            .data=${
-          {color: 'var(--icon-default)', iconName: 'bin', width: '16px', height: '16px'} as IconButton.Icon.IconData}
+            .data=${{
+      color:
+        'var(--icon-default)', iconName: 'bin', width: '16px', height: '16px',
+      }
+      }
             title=${i18nString(UIStrings.brandUserAgentDelete)}
             class="delete-icon"
             tabindex="0"
@@ -631,7 +632,11 @@ export class UserAgentClientHintsForm extends HTMLElement {
       >
         <devtools-icon
           aria-hidden="true"
-          .data=${{color: 'var(--icon-default)', iconName: 'plus', width: '16px'} as IconButton.Icon.IconData}
+          .data=${{
+    color:
+      'var(--icon-default)', iconName: 'plus', width: '16px',
+    }
+    }
         >
         </devtools-icon>
         ${i18nString(UIStrings.addBrand)}
@@ -702,8 +707,11 @@ export class UserAgentClientHintsForm extends HTMLElement {
       })}
           />
           <devtools-icon
-            .data=${
-          {color: 'var(--icon-default)', iconName: 'bin', width: '16px', height: '16px'} as IconButton.Icon.IconData}
+            .data=${{
+      color:
+        'var(--icon-default)', iconName: 'bin', width: '16px', height: '16px',
+      }
+      }
             title=${i18nString(UIStrings.brandFullVersionListDelete)}
             class="delete-icon"
             tabindex="0"
@@ -730,7 +738,11 @@ export class UserAgentClientHintsForm extends HTMLElement {
       >
         <devtools-icon
           aria-hidden="true"
-          .data=${{color: 'var(--icon-default)', iconName: 'plus', width: '16px'} as IconButton.Icon.IconData}
+          .data=${{
+    color:
+      'var(--icon-default)', iconName: 'plus', width: '16px',
+    }
+    }
         >
         </devtools-icon>
         ${i18nString(UIStrings.addBrand)}
@@ -782,7 +794,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
               color: 'var(--icon-default)',
               iconName: 'triangle-right',
               width: '14px',
-            } as IconButton.Icon.IconData}
+            }}
           ></devtools-icon>
           ${i18nString(UIStrings.title)}
           <devtools-icon
@@ -790,7 +802,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
               color: 'var(--icon-default)',
               iconName: 'info',
               width: '16px',
-            } as IconButton.Icon.IconData}
+            }}
             title=${i18nString(UIStrings.userAgentClientHintsInfo)}
             class='info-icon'
           ></devtools-icon>
@@ -822,8 +834,8 @@ export class UserAgentClientHintsForm extends HTMLElement {
         <div aria-live="polite" aria-label=${this.#useragentModifiedAriaMessage}></div>
       </section>
     `;
-    // clang-format on
-    LitHtml.render(output, this.#shadow, {host: this});
+              // clang-format on
+              LitHtml.render(output, this.#shadow, {host: this});
   }
 
   validate = (): UI.ListWidget.ValidatorResult => {

package/front_end/panels/settings/emulation/devicesSettingsTab.css

@@ -4,16 +4,17 @@
  * found in the LICENSE file.
  */
 
-.devices-settings-tab .settings-container-wrapper {
-  padding-top: 5px;
+.device-card-content {
+  padding-left: 0;
+  padding-right: 0;
 }
 
-.devices-settings-tab .settings-tab.settings-content {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  height: 100%;
-  margin: 0;
+.list {
+  border: none;
+}
+
+#custom-device-add-button {
+  padding: var(--sys-size-5) var(--sys-size-6);
 }
 
 .devices-settings-tab .devices-button-row {
@@ -31,8 +32,8 @@
 }
 
 .devices-list-item {
-  padding: 3px 5px;
-  height: 30px;
+  padding: var(--sys-size-3) var(--sys-size-6);
+  height: var(--sys-size-13);
   display: flex;
   align-items: center;
   flex: auto 1 1;

package/front_end/panels/settings/frameworkIgnoreListSettingsTab.css

@@ -4,62 +4,43 @@
  * found in the LICENSE file.
  */
 
-:host {
-  overflow: hidden;
-}
-
-.header {
-  padding: 0 0 6px;
-  border-bottom: 1px solid var(--sys-color-divider);
-  font-size: 18px;
-  font-weight: normal;
-  flex: none;
-}
-
-.intro {
-  margin-top: 10px;
-}
-
 .ignore-list-option {
   flex: none;
-  padding: 3px 6px;
-  min-height: 30px;
+  display: flex;
+  align-items: center;
+  height: var(--sys-size-13);
 }
 
 .ignore-list-option devtools-button {
+  cursor: pointer;
   position: relative;
   top: var(--sys-size-2);
   margin-left: var(--sys-size-2);
 }
 
-.ignore-list-option-group {
-  margin-top: 13px;
-  margin-bottom: 3px;
-  margin-left: 8px;
-  flex-shrink: 0;
-}
-
 .add-button {
-  margin: 10px 2px;
+  padding: var(--sys-size-5) var(--sys-size-6);
   align-self: flex-start;
   flex: none;
 }
 
 .ignore-list {
-  max-width: 500px;
   flex: 0 1 auto;
 }
 
-.ignore-list-global-enable {
-  padding: 3px 0;
-  color: var(--sys-color-token-subtle);
-  font-size: 120%;
-  margin-top: 17px;
+.enable-ignore-listing,
+.ignore-list-item,
+.general-exclusion-group {
+  padding-left: var(--sys-size-4);
+}
+
+.custom-exclusion-group {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .ignore-list-item {
-  padding: 3px 5px;
-  height: 30px;
+  height: var(--sys-size-13);
   display: flex;
   align-items: center;
   position: relative;
@@ -68,7 +49,6 @@
 
 .ignore-list-pattern {
   flex: auto;
-  min-width: 100px;
 }
 
 .ignore-list-item > [is="dt-checkbox"] {
@@ -97,13 +77,7 @@
   text-align: inherit;
 }
 
-.ignore-list-options {
-  margin-left: 22px;
-  display: flex;
-  flex-direction: column;
-}
-
-.ignore-list-options.ignore-listing-disabled {
+.ignore-listing-disabled .ignore-list-options {
   opacity: 30%;
 }
 

package/front_end/panels/settings/keybindsSettingsTab.css

@@ -4,71 +4,43 @@
  * found in the LICENSE file.
  */
 
-header {
-  padding: 0 0 6px;
-  border-bottom: 1px solid var(--sys-color-divider);
-  flex: none;
-  margin-bottom: 16px;
-}
-
-h1 {
-  font-size: 18px;
-  font-weight: normal;
-  padding-bottom: 3px;
-  margin: 0;
-}
-
-[role="list"] {
-  overflow: auto;
-
-  > * {
-    min-width: 300px;
-  }
+.shortcut-list {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .keybinds-key {
-  padding: 0.1em 0.6em;
-  border: 1px solid var(--sys-color-neutral-outline);
-  font-size: 11px;
-  background-color: var(--sys-color-neutral-container);
-  color: var(--sys-color-on-surface);
-  box-shadow: var(--box-shadow-outline-color);
-  border-radius: 3px;
-  display: inline-block;
-  margin: 0 0.1em;
-  text-shadow: 0 1px 0 var(--sys-color-cdt-base-container);
-  line-height: 1.5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--sys-size-11);
+  min-width: var(--sys-size-11);
+  font: var(--sys-typescale-body5-medium);
   white-space: nowrap;
+  border-radius: var(--sys-shape-corner-small);
+  background: var(--sys-color-tonal-container);
+  padding: 0 var(--sys-size-4);
 }
 
 .keybinds-list-item {
-  min-height: 30px;
+  margin: 0 var(--sys-size-6);
+  padding: var(--sys-size-4) 0;
   display: grid;
-  grid-template-rows: repeat(auto-fit, minmax(30px, auto));
+  grid-template-rows: 1fr;
   grid-template-columns: 1fr 30px 2fr 30px 30px;
-  flex: auto 1 1;
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .keybinds-list-item:focus-visible {
   background-color: var(--sys-color-tonal-container);
 }
 
-.keybinds-list-item:not(.keybinds-category-header) {
-  padding: 4px 0 4px 20px;
-  border-radius: 7px;
-}
-
-.keybinds-list-item:not(.keybinds-category-header):last-child {
-  margin-bottom: 5px;
-}
-
 .keybinds-list-item.keybinds-editing {
   background-color: var(--sys-color-neutral-container);
 }
 
 .keybinds-list-text.keybinds-action-name {
-  padding-top: 7px;
-  grid-row: 1 / 3;
+  grid-row: 1 / 1;
 }
 
 .keybinds-shortcut,
@@ -77,44 +49,21 @@ h1 {
   grid-column: 3 / span 1;
 }
 
-.keybinds-shortcut.devtools-link {
-  align-items: center;
-  margin-left: 3px;
-}
-
-.keybinds-shortcut .devtools-link {
-  padding: 4px 0;
-}
-
-.keybinds-info .devtools-link {
-  padding-top: 6px;
-}
-
 .keybinds-error {
   color: var(--sys-color-error);
 }
 
+.keybinds-shortcut {
+  gap: var(--sys-size-4);
+}
+
 .keybinds-list-item.keybinds-editing .keybinds-shortcut {
   display: flex;
 }
 
 .keybinds-modified {
   grid-column: 2 / span 1;
-  margin-top: 2px;
-}
-
-.keybinds-list-item button {
-  border: none;
-  padding: 0;
-  background: transparent;
-}
-
-.keybinds-list-item button:hover devtools-icon {
-  color: var(--icon-default-hover);
-}
-
-.keybinds-list-item button:focus-visible {
-  background-color: var(--sys-color-tonal-container);
+  margin-top: var(--sys-size-3);
 }
 
 .keybinds-list-item button[disabled] {
@@ -128,7 +77,7 @@ h1 {
 .keybinds-edit-button {
   display: none;
   grid-row: 1 / span 1;
-  grid-column: 4 / span 1;
+  grid-column: 5 / span 1;
 }
 
 .keybinds-list-item:not(.keybinds-editing):hover .keybinds-edit-button,
@@ -137,7 +86,9 @@ h1 {
 }
 
 .keybinds-list-text {
-  padding: 3px 0;
+  min-height: var(--sys-size-12);
+  display: flex;
+  align-items: center;
   user-select: none;
   color: var(--sys-color-on-surface);
   text-align: start;
@@ -146,35 +97,28 @@ h1 {
 }
 
 .keybinds-category-header {
-  font-weight: bold;
-  line-height: 30px;
+  display: flex;
+  align-items: center;
+  font: var(--sys-typescale-body4-bold);
+  height: var(--sys-size-13);
+  padding: var(--sys-size-4) var(--sys-size-7);
   white-space: nowrap;
 }
 
-.keybinds-category-header:not(:nth-child(2)) {
-  border-top: 1px solid var(--sys-color-divider);
+.keybinds-list-item-wrapper + .keybinds-header-wrapper {
+  margin-top: var(--sys-size-9);
 }
 
-.keybinds-list-item:not(.keybinds-category-header):hover,
-.keybinds-list-item:not(.keybinds-editing):focus-within {
+.keybinds-list-item-wrapper:has(:not(.keybinds-category-header):hover),
+.keybinds-list-item-wrapper:has(.keybinds-list-item:not(.keybinds-editing)):focus-within {
   background: var(--sys-color-state-hover-on-subtle);
 }
 
-.keybinds-set-select {
-  text-align: right;
-  margin-bottom: 16px;
-}
-
 .keybinds-set-select label p {
   display: inline;
   color: var(--sys-color-on-surface);
 }
 
-.keybinds-set-select select {
-  margin-left: 6px;
-  margin-top: 6px;
-}
-
 button.text-button {
   width: fit-content;
   align-self: flex-end;
@@ -184,6 +128,20 @@ button.text-button {
   margin: 0 2px;
 }
 
+.keybinds-set-select {
+  margin: 0;
+  padding: var(--sys-size-5) var(--sys-size-7);
+
+  & .settings-select {
+    display: flex;
+    justify-content: space-between;
+
+    & label {
+      padding: 0;
+    }
+  }
+}
+
 .keybinds-list-text:has(.keybinds-delete-button) {
   grid-column: 3 / -1;
 }
@@ -196,6 +154,7 @@ button.text-button {
 }
 
 .keybinds-footer {
+  padding: var(--sys-size-5) var(--sys-size-7);
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;

package/front_end/panels/settings/settingsScreen.css

@@ -17,54 +17,8 @@
   flex: auto;
 }
 
-.settings-container {
-  width: 100%;
-  column-width: 288px;
-}
-
-.settings-block {
-  display: block;
-  padding-bottom: 9px;
-  width: 288px;
-  break-inside: avoid;
-}
-
-.settings-tab.settings-container {
-  column-width: 308px;
-}
-
-.settings-tab .settings-block {
-  margin-left: 20px;
-}
-
-.settings-line {
-  padding-bottom: 5px;
-  margin-bottom: 5px;
-}
-
-.settings-key-cell {
-  display: inline-block;
-  width: 153px;
-  white-space: nowrap;
-  text-align: right;
-  vertical-align: middle;
-  padding-right: 6px;
-}
-
-.settings-cell {
-  display: inline-block;
-  width: 135px;
-  vertical-align: middle;
-}
-
-.settings-section-title {
-  font-size: 120%;
-  text-align: left;
-}
-
-.settings-combine-keys {
-  margin: 0 0.3em;
-  font-size: 9px;
+.settings-experiments-block {
+  padding: 0 var(--sys-size-6) var(--sys-size-5) var(--sys-size-4);
 }
 
 fieldset {
@@ -81,36 +35,20 @@ fieldset {
 
 label {
   padding-right: 8px;
-  padding-bottom: 8px;
 }
 
 .experiments-filter label {
   padding-bottom: 0;
 }
 
-.settings-tab p {
-  margin: 6px 0;
-}
-
-.settings-block p p {
-  padding-left: 30px;
-}
-
 .settings-select {
   align-items: center;
   display: grid;
+  row-gap: var(--sys-size-3);
 }
 
-.settings-experiments-warning-subsection-warning {
-  color: var(--sys-color-error);
-}
-
-.settings-experiments-warning-subsection-message {
-  color: inherit;
-}
-
-.settings-content input[type="checkbox"] {
-  margin: 1px 7px 1px 2px;
+div:has(.settings-select) + div:has(.settings-select) {
+  padding-top: var(--sys-size-5);
 }
 
 .settings-window-label-element {
@@ -133,71 +71,59 @@ label {
   }
 }
 
-.settings-container-wrapper {
-  position: absolute;
-  top: 31px;
-  left: 0;
-  right: 0;
-  bottom: 0;
+.settings-card-container-wrapper {
+  scrollbar-gutter: stable;
+  padding-bottom: var(--sys-size-8);
   overflow: auto;
-  padding-top: 9px;
-  border-top: 1px solid var(--sys-color-divider);
-}
-
-.settings-tab.settings-content {
-  margin: 0;
-  padding: 0;
+  position: absolute;
+  inset: var(--sys-size-8) 0 0;
 }
 
-.settings-tab-container {
-  flex: auto;
-  overflow: hidden;
+.settings-card-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sys-size-9);
 }
 
-.settings-tab-container header {
-  padding: 0 0 6px;
-}
+.settings-multicolumn-card-container {
+  column-width: var(--sys-size-32);
+  column-gap: var(--sys-size-11);
 
-#experiments-tab-content .settings-container {
-  column-width: auto;
-}
+  > * + * {
+    margin-top: var(--sys-size-8);
+  }
 
-#experiments-tab-content .settings-block {
-  width: auto;
-  margin-left: 0;
-  margin-right: 10px;
+  > devtools-button {
+    margin-left: var(--sys-size-5);
+  }
 }
 
-.settings-tab-container header > h1 {
-  font-size: 18px;
-  font-weight: normal;
-  margin: 0;
-  padding-bottom: 3px;
-  white-space: nowrap;
+.settings-card-container-wrapper select {
+  margin-left: 10px;
+  width: var(--sys-size-28);
 }
 
-.settings-tab .settings-section-title {
-  margin-left: -20px;
-  color: var(--sys-color-on-surface-subtle);
-}
-
-.settings-tab select {
-  margin-left: 10px;
-  width: 80%;
+.settings-card-container-wrapper setting-checkbox { /* stylelint-disable-line selector-type-no-unknown */
+  min-height: var(--sys-size-13);
+  position: relative;
+  left: calc(var(--sys-size-4) * -1);
 }
 
 .settings-experiment {
+  margin: 0;
+  min-height: var(--sys-size-13);
   display: grid;
   grid-template-columns: auto min-content auto 1fr;
-}
 
-.settings-experiment .devtools-link {
-  display: flex !important; /* stylelint-disable-line declaration-no-important */
-  align-items: center;
+  & .devtools-link {
+    display: flex !important; /* stylelint-disable-line declaration-no-important */
+    align-items: center;
+  }
 }
 
-.settings-experiment .devtools-link:has(.link-icon) {
-  outline-offset: 0;
+devtools-button.link-icon {
+  cursor: pointer;
 }
 
 .experiment-label {

package/front_end/panels/sources/AddSourceMapURLDialog.ts

@@ -31,7 +31,7 @@ export class AddDebugInfoURLDialog extends UI.Widget.HBox {
   private constructor(
       label: Platform.UIString.LocalizedString, jslogContext: string,
       callback: (arg0: Platform.DevToolsPath.UrlString) => void) {
-    super(/* isWebComponent */ true);
+    super(/* useShadowDom */ true);
 
     this.contentElement.createChild('label').textContent = label;
 

package/front_end/panels/sources/CSSPlugin.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import {assertNotNullOrUndefined} from '../../core/platform/platform.js';
@@ -258,7 +257,6 @@ function createCSSTooltip(active: ActiveTooltip): CodeMirror.Tooltip {
         spectrum.addEventListener(ColorPicker.Spectrum.Events.SIZE_CHANGED, () => view.requestMeasure());
         spectrum.setColor(active.color);
         widget = spectrum;
-        Host.userMetrics.colorPickerOpenedFrom(Host.UserMetrics.ColorPickerOpenedFrom.SOURCES_PANEL);
       } else {
         const spectrum = new InlineEditor.BezierEditor.BezierEditor(active.curve);
         widget = spectrum;