chrome-devtools-frontend 1.0.1683520 → 1.0.1689415

package/front_end/panels/elements/classesPaneWidget.css

@@ -6,8 +6,8 @@
 
 .styles-element-classes-pane {
   background-color: var(--sys-color-cdt-base-container);
-  border-bottom: 1px solid var(--sys-color-divider);
-  padding: 6px 2px 2px;
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+  padding: var(--sys-size-4) var(--sys-size-2) var(--sys-size-2);
 }
 
 .styles-element-classes-container {
@@ -21,15 +21,15 @@
 }
 
 .styles-element-classes-pane .title-container {
-  padding-bottom: 2px;
+  padding-bottom: var(--sys-size-2);
 }
 
 .styles-element-classes-pane .new-class-input {
   padding-left: 3px;
   padding-right: 3px;
   overflow: hidden;
-  border: 1px solid var(--sys-color-neutral-outline);
-  border-radius: 4px;
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+  border-radius: var(--sys-shape-corner-extra-small);
   line-height: 15px;
   margin-left: 3px;
   width: calc(100% - 7px);
@@ -37,6 +37,6 @@
   cursor: text;
 
   &:hover {
-    box-shadow: 0 0 0 1px var(--ref-palette-neutral90);
+    box-shadow: 0 0 0 var(--sys-size-1) var(--ref-palette-neutral90);
   }
 }

package/front_end/panels/elements/components/stylePropertyEditor.css

@@ -11,7 +11,7 @@
 .row {
   padding: 0;
   color: var(--sys-color-on-surface);
-  padding-bottom: 16px;
+  padding-bottom: var(--sys-size-8);
 }
 
 .row:last-child {
@@ -19,7 +19,7 @@
 }
 
 .property {
-  padding-bottom: 4px;
+  padding-bottom: var(--sys-size-3);
   white-space: nowrap;
 }
 
@@ -49,12 +49,12 @@
 }
 
 .button {
-  border: 1px solid var(--sys-color-neutral-outline);
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
   background-color: var(--sys-color-cdt-base-container);
-  width: 24px;
-  height: 24px;
-  min-width: 24px;
-  min-height: 24px;
+  width: var(--sys-size-11);
+  height: var(--sys-size-11);
+  min-width: var(--sys-size-11);
+  min-height: var(--sys-size-11);
   padding: 0;
   margin: 0;
   display: flex;

package/front_end/panels/elements/computedStyleWidget.css

@@ -6,7 +6,7 @@
 
 @scope to (devtools-widget > *) {
   .styles-sidebar-pane-toolbar {
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
     flex-shrink: 0;
   }
 

package/front_end/panels/elements/elementStatePaneWidget.css

@@ -6,22 +6,22 @@
 @scope to (devtools-widget > *) {
   .styles-element-state-pane {
     overflow: hidden;
-    padding-left: 2px;
+    padding-left: var(--sys-size-2);
     background-color: var(--sys-color-cdt-base-container);
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
     margin-top: 0;
-    padding-bottom: 2px;
+    padding-bottom: var(--sys-size-2);
   }
 
   .styles-element-state-pane > .page-state-checkbox {
-    margin-block: 6px;
+    margin-block: var(--sys-size-4);
     display: flex;
     align-items: center;
-    gap: 2px;
+    gap: var(--sys-size-2);
   }
 
   .styles-element-state-pane .section-header {
-    margin: 8px 4px 6px;
+    margin: var(--sys-size-5) var(--sys-size-3) var(--sys-size-4);
     color: var(--color-text-secondary);
   }
 
@@ -36,14 +36,14 @@
 
   .pseudo-states-container {
     display: grid;
-    column-gap: 12px;
+    column-gap: var(--sys-size-6);
     grid-template-columns: repeat(2, 1fr);
     grid-auto-flow: row;
   }
 
   .pseudo-states-container.specific-pseudo-states {
     grid-template-columns: repeat(2, 1fr);
-    margin-bottom: 4px;
+    margin-bottom: var(--sys-size-3);
   }
 
   .force-specific-element-header:focus {

package/front_end/panels/elements/elements-meta.ts

@@ -225,6 +225,10 @@ const UIStrings = {
    * @description Whether CSS rules that do not apply active styles in the Styles tab are collapsed by default.
    */
   collapseNonContributingCSSRules: 'Collapse non-contributing CSS rules',
+  /**
+   * @description Title of a setting under the Elements category in Settings.
+   */
+  showInactiveCSSRules: 'Show inactive CSS rules',
   /**
    * @description Title of a setting in the Event listeners tab.
    */
@@ -642,6 +646,16 @@ Common.Settings.registerSettingExtension({
   defaultValue: false,
 });
 
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.ELEMENTS,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  order: 8,
+  title: i18nLazyString(UIStrings.showInactiveCSSRules),
+  settingName: 'show-inactive-css-rules',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+});
+
 Common.Settings.registerSettingExtension({
   settingName: 'show-event-listeners-for-ancestors',
   settingType: Common.Settings.SettingType.BOOLEAN,

package/front_end/panels/elements/elementsPanel.css

@@ -37,7 +37,7 @@
 
 #elements-content {
   overflow: auto;
-  padding: 2px 0 0;
+  padding: var(--sys-size-2) 0 0;
   height: 100%;
 }
 
@@ -47,7 +47,7 @@
 }
 
 .style-panes-wrapper:not(.computed-styles-pane-wrapper) > div:not(:last-child) {
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .style-panes-wrapper > div:has(+ .ai-code-completion-summary-toolbar-container) {
@@ -71,14 +71,14 @@
 
 #elements-crumbs {
   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);
   overflow: hidden;
   width: 100%;
 }
 
 devtools-adorner-settings-pane {
   margin-bottom: 10px;
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   overflow: auto;
 }
 

package/front_end/panels/elements/elementsTreeOutline.css

@@ -8,12 +8,12 @@
   box-shadow: var(--drop-shadow);
   background-color: var(--sys-color-cdt-base-container);
   text-overflow: clip !important; /* stylelint-disable-line declaration-no-important */
-  padding-left: 2px;
-  margin-left: -2px;
-  padding-right: 2px;
-  margin-right: -2px;
-  margin-bottom: -1px;
-  padding-bottom: 1px;
+  padding-left: var(--sys-size-2);
+  margin-left: calc(-1 * var(--sys-size-2));
+  padding-right: var(--sys-size-2);
+  margin-right: calc(-1 * var(--sys-size-2));
+  margin-bottom: calc(-1 * var(--sys-size-1));
+  padding-bottom: var(--sys-size-1);
   opacity: 100% !important; /* stylelint-disable-line declaration-no-important */
 }
 
@@ -47,7 +47,7 @@
 }
 
 .adorner-with-icon *:not(:last-child) {
-  margin-right: 2px;
+  margin-right: var(--sys-size-2);
 }
 
 .elements-disclosure {
@@ -56,10 +56,17 @@
   line-height: normal;
 }
 
+.elements-disclosure devtools-tree {
+  width: 100%;
+  min-width: 100%;
+  min-height: 100%;
+  display: inline-block;
+}
+
 .elements-disclosure li {
   /** Keep margin-left & padding-left in sync with ElementsTreeElements.updateDecorations **/
-  padding: 1px 0 0 14px;
-  margin-left: -2px;
+  padding: var(--sys-size-1) 0 0 var(--sys-size-7);
+  margin-left: calc(-1 * var(--sys-size-2));
   word-break: normal;
   position: relative;
   min-height: 15px;
@@ -81,7 +88,7 @@
 
 .elements-disclosure li.parent:not(.always-parent) {
   /** Keep it in sync with ElementsTreeElements.updateDecorations **/
-  margin-left: -12px;
+  margin-left: calc(-1 * var(--sys-size-6));
 }
 
 .elements-disclosure li .ai-button-container {
@@ -90,7 +97,7 @@
   overflow: visible;
   max-height: var(--sys-size-6);
   vertical-align: top;
-  margin-top: -1px;
+  margin-top: calc(-1 * var(--sys-size-1));
   position: absolute;
   right: var(--sys-size-3);
   bottom: 5px;
@@ -118,8 +125,8 @@
   box-sizing: border-box;
   user-select: none;
   mask-image: var(--image-file-arrow-collapse);
-  height: 14px;
-  width: 14px;
+  height: var(--sys-size-7);
+  width: var(--sys-size-7);
   content: "\A0\A0";
   color: transparent;
   text-shadow: none;
@@ -142,8 +149,8 @@
 
 .elements-disclosure li.elements-drag-over .selection {
   display: block;
-  margin-top: -2px;
-  border-top: 2px solid var(--sys-color-primary);
+  margin-top: calc(-1 * var(--sys-size-2));
+  border-top: var(--sys-size-2) solid var(--sys-color-primary);
 }
 
 .elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) .selection {
@@ -159,13 +166,13 @@
 }
 
 .elements-disclosure li .webkit-html-tag.close {
-  margin-left: -12px;
+  margin-left: calc(-1 * var(--sys-size-6));
 }
 
 .elements-disclosure .elements-tree-outline.hide-selection-when-blurred .selected:focus-visible .highlight > * {
   background: var(--sys-color-state-focus-highlight);
-  border-radius: 2px;
-  outline: 2px solid var(--sys-color-state-focus-ring);
+  border-radius: var(--sys-size-2);
+  outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
 }
 
 .elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.selected:focus .selection {
@@ -175,7 +182,7 @@
 .elements-disclosure ol {
   list-style-type: none;
   /** Keep it in sync with ElementsTreeElements.updateDecorations **/
-  padding-inline-start: 12px;
+  padding-inline-start: var(--sys-size-6);
   margin: 0;
 }
 
@@ -193,11 +200,11 @@
   margin: 0;
   min-width: 100%;
   min-height: 100%;
-  padding-left: 2px;
+  padding-left: var(--sys-size-2);
 }
 
 .elements-disclosure li.in-clipboard .highlight {
-  outline: 1px dotted var(--sys-color-divider);
+  outline: var(--sys-size-1) dotted var(--sys-color-divider);
 }
 
 .elements-tree-outline ol.shadow-root-deep {
@@ -206,7 +213,7 @@
 
 .elements-tree-editor {
   box-shadow: var(--drop-shadow);
-  margin-right: 4px;
+  margin-right: var(--sys-size-3);
 }
 
 button,
@@ -220,7 +227,7 @@ select {
   height: 9px;
   width: 9px;
   border-radius: 5px;
-  border: 1px solid var(--decoration-color); /* stylelint-disable-line plugin/use_theme_colors */
+  border: var(--sys-size-1) solid var(--decoration-color); /* stylelint-disable-line plugin/use_theme_colors */
   background-color: var(--decoration-color); /* stylelint-disable-line plugin/use_theme_colors */
 }
 
@@ -228,14 +235,14 @@ select {
   display: flex;
   position: absolute;
   top: 0;
-  left: 1px;
+  left: var(--sys-size-1);
   width: 15px;
   height: 15px;
   align-items: center;
 }
 
 .elements-gutter-decoration + .elements-gutter-decoration {
-  margin-left: -6px;
+  margin-left: calc(-1 * var(--sys-size-4));
 }
 
 .elements-gutter-decoration.elements-has-decorated-children {
@@ -243,8 +250,8 @@ select {
 }
 
 .add-attribute {
-  margin-left: 1px;
-  margin-right: 1px;
+  margin-left: var(--sys-size-1);
+  margin-right: var(--sys-size-1);
   white-space: nowrap;
 }
 
@@ -290,7 +297,7 @@ select {
 
 .dom-update-highlight {
   animation: dom-update-highlight-animation 1.4s 1 cubic-bezier(0, 0, 0.2, 1);
-  border-radius: 2px;
+  border-radius: var(--sys-size-2);
 }
 
 :host-context(.theme-with-dark-background) .dom-update-highlight {
@@ -298,7 +305,7 @@ select {
 }
 
 .elements-disclosure.single-node li {
-  padding-left: 2px;
+  padding-left: var(--sys-size-2);
 }
 
 .elements-tree-shortcut-title,
@@ -323,9 +330,9 @@ select {
   display: block;
   visibility: hidden;
   position: relative;
-  left: -1px;
-  width: 16px;
-  height: 16px;
+  left: calc(-1 * var(--sys-size-1));
+  width: var(--sys-size-8);
+  height: var(--sys-size-8);
 }
 
 .elements-disclosure li.selected .gutter-container:not(.has-decorations) > devtools-icon {
@@ -369,7 +376,7 @@ li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
   .elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.selected:focus .selection {
     forced-color-adjust: none;
     background: canvas !important; /* stylelint-disable-line declaration-no-important */
-    border: 1px solid Highlight !important; /* stylelint-disable-line declaration-no-important */
+    border: var(--sys-size-1) solid Highlight !important; /* stylelint-disable-line declaration-no-important */
   }
 
   .gutter-container > devtools-icon {
@@ -382,7 +389,7 @@ li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
   background-image: var(--image-file-errorWave);
   background-repeat: repeat-x;
   background-position: bottom;
-  padding-bottom: 1px;
+  padding-bottom: var(--sys-size-1);
 }
 
 /* Ad Provenance Tooltip */
@@ -392,7 +399,7 @@ li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
 
 .ad-provenance-tooltip-title {
   color: var(--sys-color-on-surface-subtle);
-  margin-top: 4px;
+  margin-top: var(--sys-size-3);
 }
 
 .ad-provenance-tooltip-title:first-child {
@@ -400,7 +407,7 @@ li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
 }
 
 .ad-provenance-tooltip-content {
-  padding-left: 16px;
+  padding-left: var(--sys-size-8);
 }
 
 .elements-disclosure.elements-tree-truncated {
@@ -414,8 +421,8 @@ li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
   color: var(--sys-color-primary);
   cursor: pointer;
   display: block;
-  font-size: 12px;
-  padding: 4px 12px;
+  font-size: var(--sys-typescale-body4-size);
+  padding: var(--sys-size-3) var(--sys-size-6);
   text-align: center;
   width: 100%;
 }
@@ -423,3 +430,180 @@ li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
 .elements-tree-show-all.hidden {
   display: none;
 }
+
+/* Declarative View Styles (<devtools-tree>) */
+.tree-outline-disclosure {
+  min-width: 100%;
+  min-height: 100%;
+}
+
+.tree-outline-disclosure ol.tree-outline {
+  position: relative;
+  margin: 0;
+  min-width: 100%;
+  min-height: 100%;
+  padding: 0 0 0 2px;
+}
+
+.tree-outline-disclosure li {
+  padding: 1px 0 0 14px;
+  margin-left: -2px;
+  word-break: normal;
+  position: relative;
+  min-height: 15px;
+  line-height: 1.36;
+  min-width: 200px;
+  text-overflow: clip;
+}
+
+.tree-outline-disclosure li:not(.parent) {
+  display: block;
+}
+
+.tree-outline-disclosure li:not(.parent)::before {
+  display: none;
+  content: none;
+}
+
+.tree-outline-disclosure li.parent {
+  display: flex;
+  align-items: center;
+}
+
+.tree-outline-disclosure li.parent:not(.always-parent) {
+  margin-left: -12px;
+}
+
+.tree-outline-disclosure li.parent:not(.always-parent)::before {
+  box-sizing: border-box;
+  user-select: none;
+  mask-image: var(--image-file-arrow-collapse);
+  height: 14px;
+  width: 14px;
+  content: "\A0\A0";
+  color: transparent;
+  text-shadow: none;
+  margin: 0 var(--sys-size-2) 0 -3px;
+  background-color: var(--icon-default);
+}
+
+.tree-outline-disclosure li.parent.expanded::before {
+  mask-image: var(--image-file-arrow-drop-down);
+}
+
+.tree-outline-disclosure devtools-widget,
+.tree-outline-disclosure devtools-widget > div,
+.tree-outline-disclosure .tree-element-title {
+  display: contents;
+}
+
+.tree-outline-disclosure li .webkit-html-tag.close {
+  margin-left: -12px;
+}
+
+.tree-outline-disclosure .gutter-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 15px;
+  height: 15px;
+  z-index: 1;
+}
+
+.tree-outline-disclosure li.selected .gutter-container:not(.has-decorations) > devtools-icon {
+  visibility: visible;
+}
+
+.tree-outline-disclosure li::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  left: calc(var(--indent) * -1);
+  width: var(--indent);
+}
+
+.tree-outline-disclosure li .ai-button-container {
+  display: none;
+  margin-left: 1ch;
+  overflow: visible;
+  max-height: var(--sys-size-6);
+  vertical-align: top;
+  margin-top: -1px;
+  position: absolute;
+  right: var(--sys-size-3);
+  bottom: 5px;
+  z-index: 999;
+}
+
+.tree-outline-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.hovered .ai-button-container {
+  display: inline-flex;
+}
+
+.tree-outline-disclosure li .selected-hint::before {
+  font-style: italic;
+  content: " == $0";
+  opacity: 0%;
+  position: absolute;
+  white-space: pre;
+}
+
+.tree-outline-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.selected .selected-hint::before {
+  position: static;
+  opacity: 60%;
+}
+
+.tree-outline-disclosure li .selection {
+  display: none;
+  z-index: -1;
+}
+
+.tree-outline-disclosure li.selected .selection {
+  display: block;
+}
+
+.tree-outline-disclosure li.elements-drag-over .selection {
+  display: block;
+  margin-top: -2px;
+  border-top: 2px solid var(--sys-color-primary);
+}
+
+.tree-outline-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) .selection {
+  background-color: var(--sys-color-neutral-container);
+}
+
+.tree-outline-disclosure li.hovered:not(.selected) .selection {
+  display: block;
+  left: 3px;
+  right: 3px;
+  background-color: var(--sys-color-state-hover-on-subtle);
+  border-radius: 5px;
+}
+
+.tree-outline-disclosure .elements-tree-outline.hide-selection-when-blurred .selected:focus-visible .highlight > * {
+  background: var(--sys-color-state-focus-highlight);
+  border-radius: 2px;
+  outline: 2px solid var(--sys-color-state-focus-ring);
+}
+
+.tree-outline-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.selected:focus .selection {
+  background-color: var(--sys-color-tonal-container);
+}
+
+.tree-outline-disclosure ol {
+  list-style-type: none;
+  padding-inline-start: 12px;
+  margin: 0;
+}
+
+.tree-outline-disclosure ol.children {
+  display: none;
+  min-width: 100%;
+}
+
+.tree-outline-disclosure ol.children.expanded {
+  display: inline-block;
+}
+
+.tree-outline-disclosure li.in-clipboard .highlight {
+  outline: 1px dotted var(--sys-color-divider);
+}

package/front_end/panels/elements/layersWidget.css

@@ -6,14 +6,14 @@
 
 .layers-widget {
   overflow: hidden;
-  padding-left: 2px;
+  padding-left: var(--sys-size-2);
   background-color: var(--sys-color-cdt-base-container);
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   margin-top: 0;
-  padding-bottom: 2px;
+  padding-bottom: var(--sys-size-2);
 }
 
 .layers-widget > .layers-widget-title {
   font-weight: bold;
-  margin: 8px 4px 6px;
+  margin: var(--sys-size-5) var(--sys-size-3) var(--sys-size-4);
 }