chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

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);
 }

package/front_end/panels/elements/layoutPane.css

@@ -7,12 +7,12 @@
 @scope to (devtools-widget > *) {
   * {
     box-sizing: border-box;
-    font-size: 12px;
+    font-size: var(--sys-typescale-body4-size);
   }
 
   .header {
     background-color: var(--sys-color-surface2);
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
     line-height: 1.6;
     overflow: hidden;
     padding: 0 5px;
@@ -21,7 +21,7 @@
 
   .header::marker {
     color: var(--sys-color-on-surface-subtle);
-    font-size: 11px;
+    font-size: var(--sys-typescale-body5-size);
     line-height: 1;
   }
 
@@ -30,13 +30,13 @@
   }
 
   .content-section {
-    padding: 16px;
-    border-bottom: 1px solid var(--sys-color-divider);
+    padding: var(--sys-size-8);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
     overflow-x: hidden;
   }
 
   .content-section-title {
-    font-size: 12px;
+    font-size: var(--sys-typescale-body4-size);
     font-weight: 500;
     line-height: 1.1;
     margin: 0;
@@ -57,12 +57,12 @@
   devtools-checkbox {
     /* Allows label text to get ellipsed */
     flex-shrink: unset;
-    margin: 0 6px 0 0;
+    margin: 0 var(--sys-size-4) 0 0;
     padding: 0;
   }
 
   .select-settings {
-    margin-top: 16px;
+    margin-top: var(--sys-size-8);
     width: fit-content;
   }
 
@@ -72,22 +72,22 @@
   }
 
   .select-label span {
-    margin-bottom: 4px;
+    margin-bottom: var(--sys-size-3);
   }
 
   .elements {
-    margin-top: 12px;
+    margin-top: var(--sys-size-6);
     color: var(--sys-color-token-tag);
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
-    gap: 8px;
+    gap: var(--sys-size-5);
   }
 
   .element {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 8px;
+    gap: var(--sys-size-5);
   }
 
   .show-element {
@@ -104,7 +104,7 @@
   }
 
   .color-picker-label {
-    border: 1px solid var(--sys-color-neutral-outline);
+    border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
     cursor: default;
     display: inline-block;
     flex: none;
@@ -113,9 +113,9 @@
     position: relative;
 
     &:focus-within {
-      outline: 2px solid var(--sys-color-state-focus-ring);
-      outline-offset: 2px;
-      border-radius: 2px;
+      outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+      outline-offset: var(--sys-size-2);
+      border-radius: var(--sys-size-2);
     }
   }
   /* We set dimensions for the invisible input to support quick highlight a11y feature
@@ -128,12 +128,12 @@
 
   .color-picker-label:hover,
   .color-picker-label:focus {
-    border: 1px solid var(--sys-color-outline);
+    border: var(--sys-size-1) solid var(--sys-color-outline);
     transform: scale(1.2);
   }
 
   .node-text-container {
-    line-height: 16px;
+    line-height: var(--sys-typescale-body4-line-height);
     padding: 0 0.5ex;
     border-radius: 5px;
   }

package/front_end/panels/elements/metricsSidebarPane.css

@@ -4,7 +4,7 @@
  * found in the LICENSE file.
  */
 .metrics {
-  padding: 8px;
+  padding: var(--sys-size-5);
   font-size: 10px;
   text-align: center;
   white-space: nowrap;
@@ -42,14 +42,14 @@
 .metrics .label {
   position: absolute;
   font-size: 10px;
-  left: 4px;
+  left: var(--sys-size-3);
 }
 
 .metrics .position {
   /* This border is different from the ones displayed between the box-model
   regions because it is displayed against the pane background, so needs to be
   visible in both light and dark theme. We therefore use a theme variable. */
-  border: 1px var(--sys-color-token-subtle) dotted;
+  border: var(--sys-size-1) var(--sys-color-token-subtle) dotted;
   background-color: var(--sys-color-cdt-base-container);
   display: inline-block;
   text-align: center;
@@ -59,34 +59,34 @@
 }
 
 .metrics .margin {
-  border: 1px dashed var(--override-box-model-separator-color);
+  border: var(--sys-size-1) dashed var(--override-box-model-separator-color);
   background-color: var(--sys-color-cdt-base-container);
   display: inline-block;
   text-align: center;
   vertical-align: middle;
-  padding: 3px 6px;
+  padding: 3px var(--sys-size-4);
   margin: 3px;
   position: relative;
 }
 
 .metrics .border {
-  border: 1px solid var(--override-box-model-separator-color);
+  border: var(--sys-size-1) solid var(--override-box-model-separator-color);
   background-color: var(--sys-color-cdt-base-container);
   display: inline-block;
   text-align: center;
   vertical-align: middle;
-  padding: 3px 6px;
+  padding: 3px var(--sys-size-4);
   margin: 3px;
   position: relative;
 }
 
 .metrics .padding {
-  border: 1px dashed var(--override-box-model-separator-color);
+  border: var(--sys-size-1) dashed var(--override-box-model-separator-color);
   background-color: var(--sys-color-cdt-base-container);
   display: inline-block;
   text-align: center;
   vertical-align: middle;
-  padding: 3px 6px;
+  padding: 3px var(--sys-size-4);
   margin: 3px;
   position: relative;
   min-width: 120px;
@@ -94,14 +94,14 @@
 
 .metrics .content {
   position: static;
-  border: 1px solid var(--override-box-model-separator-color);
+  border: var(--sys-size-1) solid var(--override-box-model-separator-color);
   background-color: var(--sys-color-cdt-base-container);
   display: inline-block;
   text-align: center;
   vertical-align: middle;
   padding: 3px;
   margin: 3px;
-  min-width: 80px;
+  min-width: var(--sys-size-19);
   overflow: visible;
 }
 

package/front_end/panels/elements/platformFontsWidget.css

@@ -19,13 +19,13 @@
 
   .title {
     padding: 0 5px;
-    border-top: 1px solid;
-    border-bottom: 1px solid;
+    border-top: var(--sys-size-1) solid;
+    border-bottom: var(--sys-size-1) solid;
     border-color: var(--sys-color-divider);
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    height: 24px;
+    height: var(--sys-size-11);
     background-color: var(--sys-color-surface2);
     display: flex;
     align-items: center;
@@ -35,11 +35,11 @@
     padding: 5px 1em;
 
     div {
-      margin-bottom: 2px;
+      margin-bottom: var(--sys-size-2);
     }
 
     &:not(:last-child) {
-      border-bottom: 1px solid var(--sys-color-divider);
+      border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
     }
   }
 }

package/front_end/panels/elements/propertiesWidget.css

@@ -5,12 +5,12 @@
  */
 
 .properties-widget-section {
-  padding: 2px 0 2px 5px;
+  padding: var(--sys-size-2) 0 var(--sys-size-2) 5px;
   flex: none;
 }
 
 .properties-widget-toolbar {
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   flex-shrink: 0;
 }