chrome-devtools-frontend 1.0.1690116 → 1.0.1695017

package/front_end/panels/elements/MetricsSidebarPane.ts

@@ -193,7 +193,7 @@ export class MetricsSidebarPane extends ElementsSidebarPane<ShadowRoot> {
   private isEditingMetrics?: boolean;
   private view: View;
 
-  constructor(computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel, view = DEFAULT_VIEW) {
+  constructor(computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel, view: View = DEFAULT_VIEW) {
     super(computedStyleModel, {useShadowDom: 'pure'});
     this.registerRequiredCSS(metricsSidebarPaneStyles);
 

package/front_end/panels/elements/PropertyNameCategories.ts

@@ -17,7 +17,7 @@ export const enum Category {
   OTHER = 'Other',
 }
 
-export const DefaultCategoryOrder = [
+export const DefaultCategoryOrder: Category[] = [
   Category.LAYOUT,
   Category.TEXT,
   Category.APPEARANCE,

package/front_end/panels/elements/ShortcutTreeElement.ts

@@ -89,7 +89,8 @@ export class ShortcutTreeElement extends UI.TreeOutline.TreeElement {
   #hovered?: boolean;
   #view: typeof DEFAULT_VIEW;
 
-  constructor(nodeShortcut: SDK.DOMModel.DOMNodeShortcut, view = DEFAULT_VIEW) {
+  constructor(nodeShortcut: SDK.DOMModel.DOMNodeShortcut,
+              view: (input: ViewInput, _output: undefined, target: HTMLElement) => void = DEFAULT_VIEW) {
     super('');
     this.nodeShortcut = nodeShortcut;
     this.#view = view;
@@ -130,6 +131,10 @@ export class ShortcutTreeElement extends UI.TreeOutline.TreeElement {
     this.setLeftIndentOverlay();
   }
 
+  override ensureSelection(): void {
+    // Selection element is rendered in DEFAULT_VIEW.
+  }
+
   override onselect(selectedByUser?: boolean): boolean {
     if (!selectedByUser) {
       return true;

package/front_end/panels/elements/StandaloneStylesContainer.ts

@@ -55,7 +55,7 @@ const StandaloneStylesContainerBase: Common.ObjectWrapper.EventMixin<EventTypes,
 export class StandaloneStylesContainer extends StandaloneStylesContainerBase implements StylesContainer {
   activeCSSAngle: InlineEditor.CSSAngle.CSSAngle|null = null;
   isEditingStyle = false;
-  readonly sectionByElement = new WeakMap<Node, StylePropertiesSection>();
+  readonly sectionByElement: WeakMap<Node, StylePropertiesSection> = new WeakMap<Node, StylePropertiesSection>();
   // TODO: Reference the MAX_LINK_LENGTH from StylesSidebarPane at a later stage, when we have a reference to it.
   readonly linkifier: Components.Linkifier.Linkifier =
       new Components.Linkifier.Linkifier(23, /* useLinkDecorator */ true);

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -191,7 +191,7 @@ export class StylePropertiesSection {
   readonly #specificityTooltips: HTMLSpanElement;
   static #nextSpecificityTooltipId = 0;
   static #nextSectionTooltipIdPrefix = 0;
-  readonly sectionTooltipIdPrefix = StylePropertiesSection.#nextSectionTooltipIdPrefix++;
+  readonly sectionTooltipIdPrefix: number = StylePropertiesSection.#nextSectionTooltipIdPrefix++;
 
   private ghostStyleTreeElements: GhostStylePropertyTreeElement[] = [];
   #activeAiSuggestion?: ActiveAiSuggestion;
@@ -734,7 +734,7 @@ export class StylePropertiesSection {
     if (this.hoverTimer) {
       clearTimeout(this.hoverTimer);
     }
-    const selectorList = constructResolvedSelector(rule, nestingIndex);
+    const selectorList = rule.constructResolvedSelector(nestingIndex);
     if (!selectorList) {
       return;
     }
@@ -2330,36 +2330,3 @@ export class HighlightPseudoStylePropertiesSection extends StylePropertiesSectio
 interface TreeElementParent {
   appendChild(child: UI.TreeOutline.TreeElement): void;
 }
-
-export function constructResolvedSelector(rule: SDK.CSSRule.CSSRule|null, nestingIndex?: number): string|undefined {
-  if (!(rule instanceof SDK.CSSRule.CSSStyleRule)) {
-    return undefined;
-  }
-
-  const nestingSelectors = rule.nestingSelectors;
-  if (!nestingSelectors) {
-    return nestingIndex === undefined ? rule.selectorText() : undefined;
-  }
-
-  if (nestingIndex !== undefined && (nestingIndex < 0 || nestingIndex >= nestingSelectors.length)) {
-    return undefined;
-  }
-
-  const selectorText = nestingIndex !== undefined ? nestingSelectors[nestingIndex] : rule.selectorText();
-
-  const parentIndex = nestingIndex !== undefined ? nestingIndex + 1 : 0;
-  const parentSelector = constructResolvedSelector(rule, parentIndex);
-
-  if (!parentSelector) {
-    return selectorText;
-  }
-
-  // Strip pseudo-elements (e.g. ::before) because pseudo-elements are invalid inside CSS :is(...).
-  const sanitizedParent = parentSelector.replace(/::[a-zA-Z-]+/g, '').trim();
-
-  if (selectorText.includes('&')) {
-    return selectorText.replaceAll('&', `:is(${sanitizedParent})`);
-  }
-
-  return `:is(${sanitizedParent}) ${selectorText.trim()}`;
-}

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -199,9 +199,10 @@ export class StylesSidebarPane extends StylesSidebarPaneBase implements StylesCo
   private visibleSections: number|null = null;
   private noMatchesElement: HTMLElement;
   private sectionsContainer: UI.Widget.Widget;
-  sectionByElement = new WeakMap<Node, StylePropertiesSection>();
+  sectionByElement: WeakMap<Node, StylePropertiesSection> = new WeakMap<Node, StylePropertiesSection>();
   readonly #swatchPopoverHelper = new InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper();
-  readonly linkifier = new Components.Linkifier.Linkifier(MAX_LINK_LENGTH, /* useLinkDecorator */ true);
+  readonly linkifier: Components.Linkifier.Linkifier =
+      new Components.Linkifier.Linkifier(MAX_LINK_LENGTH, /* useLinkDecorator */ true);
 
   private readonly decorator: StylePropertyHighlighter;
 

package/front_end/panels/elements/components/CSSPropertyIconResolver.ts

@@ -313,20 +313,20 @@ function gridAlignSelfIcon(iconName: string): (parentStyles: ComputedStyles) =>
   return getIcon;
 }
 
-export function rotateFlexWrapIcon(iconName: string, direction: PhysicalDirection): IconInfo {
+export function rotateFlexWrapIcon(iconName: string, direction: PhysicalDirection, reverse = false): IconInfo {
   return {
     iconName,
     rotate: direction === PhysicalDirection.BOTTOM_TO_TOP || direction === PhysicalDirection.TOP_TO_BOTTOM ? 90 : 0,
     scaleX: 1,
-    scaleY: 1,
+    scaleY: reverse ? -1 : 1,
   };
 }
 
-function flexWrapIcon(iconName: string): (styles: ComputedStyles) => IconInfo {
+function flexWrapIcon(iconName: string, reverse = false): (styles: ComputedStyles) => IconInfo {
   function getIcon(computedStyles: ComputedStyles): IconInfo {
     const directions = getPhysicalDirections(computedStyles);
     const computedFlexDirection = computedStyles.get('flex-direction') || 'row';
-    return rotateFlexWrapIcon(iconName, directions[computedFlexDirection]);
+    return rotateFlexWrapIcon(iconName, directions[computedFlexDirection], reverse);
   }
   return getIcon;
 }
@@ -374,6 +374,7 @@ const flexContainerIcons = new Map([
   ['align-content: baseline', baselineIcon],
   ['flex-wrap: wrap', flexWrapIcon('flex-wrap')],
   ['flex-wrap: nowrap', flexWrapIcon('flex-no-wrap')],
+  ['flex-wrap: wrap-reverse', flexWrapIcon('flex-wrap', /* reverse */ true)],
 ]);
 
 const flexItemIcons = new Map([

package/front_end/panels/elements/components/StylePropertyEditor.ts

@@ -290,151 +290,164 @@ declare global {
   }
 }
 
-export const FlexboxEditableProperties = [
-  {
-    propertyName: 'flex-direction',
-    propertyValues: [
-      'row',
-      'column',
-      'row-reverse',
-      'column-reverse',
-    ],
-  },
-  {
-    propertyName: 'flex-wrap',
-    propertyValues: [
-      'nowrap',
-      'wrap',
-    ],
-  },
-  {
-    propertyName: 'align-content',
-    propertyValues: [
-      'center',
-      'flex-start',
-      'flex-end',
-      'space-around',
-      'space-between',
-      'stretch',
-    ],
-  },
-  {
-    propertyName: 'justify-content',
-    propertyValues: [
-      'center',
-      'flex-start',
-      'flex-end',
-      'space-between',
-      'space-around',
-      'space-evenly',
-    ],
-  },
-  {
-    propertyName: 'align-items',
-    propertyValues: [
-      'center',
-      'flex-start',
-      'flex-end',
-      'stretch',
-      'baseline',
-    ],
-  },
-];
-
-export const GridEditableProperties = [
-  {
-    propertyName: 'grid-auto-flow',
-    propertyValues: [
-      'row',
-      'column',
-    ],
-  },
-  {
-    propertyName: 'align-content',
-    propertyValues: [
-      'center',
-      'start',
-      'end',
-      'space-between',
-      'space-around',
-      'space-evenly',
-      'stretch',
-    ],
-  },
-  {
-    propertyName: 'justify-content',
-    propertyValues: [
-      'center',
-      'start',
-      'end',
-      'space-between',
-      'space-around',
-      'space-evenly',
-      'stretch',
-    ],
-  },
-  {
-    propertyName: 'align-items',
-    propertyValues: [
-      'center',
-      'start',
-      'end',
-      'stretch',
-      'baseline',
-    ],
-  },
-  {
-    propertyName: 'justify-items',
-    propertyValues: [
-      'center',
-      'start',
-      'end',
-      'stretch',
-    ],
-  },
-];
-
-export const GridLanesEditableProperties = [
-  {
-    propertyName: 'align-content',
-    propertyValues: [
-      'center',
-      'start',
-      'end',
-      'space-between',
-      'space-around',
-      'space-evenly',
-      'stretch',
-    ],
-  },
-  {
-    propertyName: 'justify-content',
-    propertyValues: [
-      'center',
-      'start',
-      'end',
-      'space-between',
-      'space-around',
-      'space-evenly',
-      'stretch',
-    ],
-  },
-  {
-    propertyName: 'align-items',
-    propertyValues: [
-      'center',
-      'start',
-      'end',
-      'stretch',
-    ],
-  },
-  {
-    propertyName: 'justify-items',
-    propertyValues: [
-      'center',
-      'start',
-      'end',
-      'stretch',
-    ],
-  },
-];
+export const FlexboxEditableProperties: Array<{
+  propertyName: string,
+  propertyValues: string[],
+}> =
+    [
+      {
+        propertyName: 'flex-direction',
+        propertyValues: [
+          'row',
+          'column',
+          'row-reverse',
+          'column-reverse',
+        ],
+      },
+      {
+        propertyName: 'flex-wrap',
+        propertyValues: [
+          'nowrap',
+          'wrap',
+          'wrap-reverse',
+        ],
+      },
+      {
+        propertyName: 'align-content',
+        propertyValues: [
+          'center',
+          'flex-start',
+          'flex-end',
+          'space-around',
+          'space-between',
+          'stretch',
+        ],
+      },
+      {
+        propertyName: 'justify-content',
+        propertyValues: [
+          'center',
+          'flex-start',
+          'flex-end',
+          'space-between',
+          'space-around',
+          'space-evenly',
+        ],
+      },
+      {
+        propertyName: 'align-items',
+        propertyValues: [
+          'center',
+          'flex-start',
+          'flex-end',
+          'stretch',
+          'baseline',
+        ],
+      },
+    ];
+
+export const GridEditableProperties: Array<{
+  propertyName: string,
+  propertyValues: string[],
+}> =
+    [
+      {
+        propertyName: 'grid-auto-flow',
+        propertyValues: [
+          'row',
+          'column',
+        ],
+      },
+      {
+        propertyName: 'align-content',
+        propertyValues: [
+          'center',
+          'start',
+          'end',
+          'space-between',
+          'space-around',
+          'space-evenly',
+          'stretch',
+        ],
+      },
+      {
+        propertyName: 'justify-content',
+        propertyValues: [
+          'center',
+          'start',
+          'end',
+          'space-between',
+          'space-around',
+          'space-evenly',
+          'stretch',
+        ],
+      },
+      {
+        propertyName: 'align-items',
+        propertyValues: [
+          'center',
+          'start',
+          'end',
+          'stretch',
+          'baseline',
+        ],
+      },
+      {
+        propertyName: 'justify-items',
+        propertyValues: [
+          'center',
+          'start',
+          'end',
+          'stretch',
+        ],
+      },
+    ];
+
+export const GridLanesEditableProperties: Array<{
+  propertyName: string,
+  propertyValues: string[],
+}> =
+    [
+      {
+        propertyName: 'align-content',
+        propertyValues: [
+          'center',
+          'start',
+          'end',
+          'space-between',
+          'space-around',
+          'space-evenly',
+          'stretch',
+        ],
+      },
+      {
+        propertyName: 'justify-content',
+        propertyValues: [
+          'center',
+          'start',
+          'end',
+          'space-between',
+          'space-around',
+          'space-evenly',
+          'stretch',
+        ],
+      },
+      {
+        propertyName: 'align-items',
+        propertyValues: [
+          'center',
+          'start',
+          'end',
+          'stretch',
+        ],
+      },
+      {
+        propertyName: 'justify-items',
+        propertyValues: [
+          'center',
+          'start',
+          'end',
+          'stretch',
+        ],
+      },
+    ];

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

@@ -12,20 +12,20 @@
 }
 
 .computed-style-property {
-  --goto-size: 16px;
+  --goto-size: var(--sys-size-8);
 
   font-family: var(--monospace-font-family);
   font-size: var(--monospace-font-size);
-  min-height: 16px;
+  min-height: var(--sys-size-8);
   box-sizing: border-box;
-  padding-top: 2px;
+  padding-top: var(--sys-size-2);
   white-space: var(--override-computed-style-property-white-space, nowrap);
   user-select: text;
 }
 
 .computed-style-property:hover {
   background-color: var(--sys-color-state-hover-on-subtle);
-  cursor: text;
+  cursor: var(--override-cursor, text);
 }
 
 .computed-style-property.inherited {
@@ -59,7 +59,7 @@
   position: absolute;
   width: var(--goto-size);
   height: var(--goto-size);
-  margin: -1px 0 0 calc(-1 * var(--goto-size));
+  margin: calc(-1 * var(--sys-size-1)) 0 0 calc(-1 * var(--goto-size));
   mask: var(--image-file-goto-filled) center / contain no-repeat;
   background-color: var(--sys-color-primary-bright);
 }

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

@@ -11,26 +11,26 @@
 }
 
 .computed-style-trace {
-  margin-left: 16px;
+  margin-left: var(--sys-size-8);
   font-family: var(--monospace-font-family);
   font-size: var(--monospace-font-size);
 }
 
 .computed-style-trace:hover {
   background-color: var(--sys-color-state-hover-on-subtle);
-  cursor: text;
+  cursor: var(--override-cursor, text);
 }
 
 .goto {
   /* TODO: reuse with ComputedStyleProperty */
-  --size: 16px;
+  --size: var(--sys-size-8);
 
   display: none;
   cursor: pointer;
   position: absolute;
   width: var(--size);
   height: var(--size);
-  margin: -1px 0 0 calc(-1 * var(--size));
+  margin: calc(-1 * var(--sys-size-1)) 0 0 calc(-1 * var(--size));
   mask: var(--image-file-goto-filled) center / contain no-repeat;
   background-color: var(--sys-color-primary-bright);
 }
@@ -47,7 +47,7 @@
 }
 
 .trace-value {
-  margin-left: 16px;
+  margin-left: var(--sys-size-8);
 }
 
 .computed-style-trace.inactive slot[name="trace-value"] {

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

@@ -14,7 +14,7 @@ code {
 }
 
 .hint-popup-possible-fix {
-  margin-top: 8px;
+  margin-top: var(--sys-size-5);
 }
 
 .clickable {

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

@@ -6,12 +6,12 @@
 
 .docs-popup-wrapper {
   max-width: 420px;
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   line-height: 1.4;
 }
 
 .docs-popup-section {
-  margin-top: 8px;
+  margin-top: var(--sys-size-5);
 }
 
 .clickable {
@@ -34,7 +34,7 @@
 #baseline {
   display: inline-flex;
   align-items: flex-start;
-  gap: 4px;
+  gap: var(--sys-size-3);
 }
 
 #baseline-icon {

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

@@ -6,7 +6,7 @@
 
 .registered-property-popup-wrapper {
   max-width: 232px;
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   line-height: 1.4;
   word-break: break-all;
 }
@@ -17,12 +17,12 @@
 }
 
 .divider {
-  margin: 8px -7px;
-  border: 1px solid var(--sys-color-divider);
+  margin: var(--sys-size-5) -7px;
+  border: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .registered-property-links {
-  margin-top: 8px;
+  margin-top: var(--sys-size-5);
 }
 
 .clickable {

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

@@ -54,8 +54,8 @@
   text-align: center;
   background-color: var(--sys-color-cdt-base-container);
   color: var(--sys-color-token-subtle);
-  margin: 1px;
-  outline: 1px solid var(--sys-color-neutral-outline);
+  margin: var(--sys-size-1);
+  outline: var(--sys-size-1) solid var(--sys-color-neutral-outline);
 }
 
 .overflow.hidden {
@@ -89,5 +89,5 @@
 }
 
 .crumb:focus {
-  outline: var(--sys-color-primary) auto 1px;
+  outline: var(--sys-color-primary) auto var(--sys-size-1);
 }

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

@@ -18,10 +18,10 @@
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
-  width: 14px;
+  width: var(--sys-size-7);
   height: 10px;
-  margin: 0 2px;
-  border: 1px solid var(--override-adorner-border-color, var(--sys-color-tonal-outline));
+  margin: 0 var(--sys-size-2);
+  border: var(--sys-size-1) solid var(--override-adorner-border-color, var(--sys-color-tonal-outline));
   border-radius: 10px;
   background: var(--override-adorner-background-color, var(--sys-color-cdt-base-container));
   padding: 0;
@@ -48,7 +48,7 @@
 }
 
 .expand-button devtools-icon {
-  width: 14px;
-  height: 14px;
+  width: var(--sys-size-7);
+  height: var(--sys-size-7);
   color: var(--sys-color-primary);
 }

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

@@ -19,8 +19,8 @@
 
 .axis-icon {
   margin-left: 0.4em;
-  width: 16px;
-  height: 12px;
+  width: var(--sys-size-8);
+  height: var(--sys-size-6);
   vertical-align: text-top;
 }