chrome-devtools-frontend 1.0.1689415 → 1.0.1690531

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

@@ -290,151 +290,163 @@ 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',
+        ],
+      },
+      {
+        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/elementsTreeOutline.css

@@ -607,3 +607,7 @@ li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
 .tree-outline-disclosure li.in-clipboard .highlight {
   outline: 1px dotted var(--sys-color-divider);
 }
+
+.tree-outline-disclosure li.elements-tree-expand-all {
+  margin: var(--sys-size-2) 0;
+}

package/front_end/panels/emulation/DeviceModeView.ts

@@ -630,7 +630,12 @@ export interface RulerEventTypes {
   [RulerEvents.MARKER_SELECTED]: number;
 }
 
-export class Ruler extends Common.ObjectWrapper.eventMixin<RulerEventTypes, typeof UI.Widget.Widget>(UI.Widget.Widget) {
+const RulerBase: Common.ObjectWrapper.EventMixin<RulerEventTypes, typeof UI.Widget.Widget> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.Widget,
+    );
+
+export class Ruler extends RulerBase {
   #view: RulerView;
   #horizontal = true;
   #scale = 1;

package/front_end/panels/emulation/InspectedPagePlaceholder.ts

@@ -9,8 +9,12 @@ import inspectedPagePlaceholderStyles from './inspectedPagePlaceholder.css.js';
 
 let inspectedPagePlaceholderInstance: InspectedPagePlaceholder;
 
-export class InspectedPagePlaceholder extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
-    UI.Widget.Widget) {
+const InspectedPagePlaceholderBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.Widget> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.Widget,
+    );
+
+export class InspectedPagePlaceholder extends InspectedPagePlaceholderBase {
   constructor() {
     super({useShadowDom: true});
     this.registerRequiredCSS(inspectedPagePlaceholderStyles);

package/front_end/panels/emulation/MediaQueryInspector.ts

@@ -165,7 +165,8 @@ export class MediaQueryInspector extends UI.Widget.Widget<ShadowRoot> implements
   private cssModel?: SDK.CSSModel.CSSModel;
   private cachedQueryModels?: MediaQueryUIModel[];
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement,
+              view: (input: ViewInput, _output: object, target: DocumentFragment) => void = DEFAULT_VIEW) {
     super(element, {useShadowDom: 'pure'});
     this.view = view;
     this.#scale = 1;

package/front_end/panels/issues/AffectedLazyLoadImagesView.ts

@@ -44,7 +44,7 @@ export class AffectedLazyLoadImagesView extends AffectedResourcesView {
   readonly #view: View;
 
   constructor(parent: IssueView, issue: IssuesManager.IssueAggregator.AggregatedIssue, jslogContext: string,
-              view = DEFAULT_VIEW) {
+              view: View = DEFAULT_VIEW) {
     super(parent, issue, jslogContext);
     this.#view = view;
   }

package/front_end/panels/layer_viewer/LayerDetailsView.ts

@@ -280,8 +280,12 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: Docu
   // clang-format on
 };
 
-export class LayerDetailsView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget<ShadowRoot>>(
-    UI.Widget.Widget) implements LayerView {
+const LayerDetailsViewBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.Widget<ShadowRoot>> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.Widget,
+    );
+
+export class LayerDetailsView extends LayerDetailsViewBase implements LayerView {
   private readonly layerViewHost: LayerViewHost;
   private layerSnapshotMap: Map<SDK.LayerTreeBase.Layer, SnapshotSelection>;
   private selection: Selection|null;

package/front_end/panels/layer_viewer/LayerTreeOutline.ts

@@ -139,8 +139,13 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
   // clang-format on
 };
 
-export class LayerTreeOutline extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
-    UI.Widget.Widget) implements Common.EventTarget.EventTarget<EventTypes>, LayerView {
+const LayerTreeOutlineBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.Widget> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.Widget,
+    );
+
+export class LayerTreeOutline extends LayerTreeOutlineBase implements Common.EventTarget.EventTarget<EventTypes>,
+                                                                      LayerView {
   private layerViewHost: LayerViewHost;
   private layerTree?: SDK.LayerTreeBase.LayerTreeBase|null;
   private layerSnapshotMap?: Map<SDK.LayerTreeBase.Layer, SnapshotSelection>;

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -137,7 +137,14 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
   // clang-format onn
 };
 
-export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
+const Layers3DViewBase: Common.ObjectWrapper.EventMixin<
+  EventTypes,
+  typeof UI.Widget.VBox
+> = Common.ObjectWrapper.eventMixin(
+  UI.Widget.VBox,
+);
+
+export class Layers3DView extends Layers3DViewBase
     implements LayerView {
   private readonly layerViewHost: LayerViewHost;
   private transformController: TransformController;

package/front_end/panels/layer_viewer/PaintProfilerView.ts

@@ -239,8 +239,12 @@ const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement)
 
 type View = typeof DEFAULT_VIEW;
 
-export class PaintProfilerView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
-    UI.Widget.Widget) {
+const PaintProfilerViewBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.Widget> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.Widget,
+    );
+
+export class PaintProfilerView extends PaintProfilerViewBase {
   private canvasContainer?: HTMLElement;
   #selectionWindow?: PerfUI.OverviewGrid.Window;
   private readonly innerBarWidth: number;

package/front_end/panels/lighthouse/lighthousePanel.css

@@ -29,7 +29,7 @@ button.view-trace {
 .lighthouse-settings-pane {
   flex: none;
   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);
 }
 
 .lighthouse-settings-pane devtools-toolbar {
@@ -50,7 +50,7 @@ select.lighthouse-report {
 
 .lighthouse-toolbar-container > devtools-toolbar {
   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);
 }
 
 .lighthouse-toolbar-container > :first-child {
@@ -65,7 +65,7 @@ select.lighthouse-report {
   position: relative;
 
   :focus-visible {
-    outline: -webkit-focus-ring-color auto 1px;
+    outline: -webkit-focus-ring-color auto var(--sys-size-1);
   }
 
   .lh-tools__button {
@@ -79,7 +79,7 @@ select.lighthouse-report {
     }
 
     &.lh-active + .lh-tools__dropdown {
-      clip: rect(-8px, 204px, 270px, -10px);  /* stylelint-disable-line property-no-deprecated */
+      clip: rect(calc(-1 * var(--sys-size-5)), 204px, 270px, -10px);  /* stylelint-disable-line property-no-deprecated */
     }
   }
 
@@ -87,7 +87,7 @@ select.lighthouse-report {
     padding: var(--sys-size-5) 0;
     border-radius: var(--sys-shape-corner-small);
     box-shadow: var(--sys-elevation-level3);
-    top: 24px;
+    top: var(--sys-size-11);
 
     &:hover a:focus {
       background-color: transparent;

package/front_end/panels/lighthouse/lighthouseStartView.css

@@ -7,23 +7,23 @@
 
 .lighthouse-start-view {
   line-height: 18px;
-  padding: 24px;
+  padding: var(--sys-size-11);
   overflow: auto;
   height: 100%;
   /* for buttons */
   --legacy-accent-color: #0535c1;
   --legacy-accent-color-hover: #17b;
-  --font-size: 14px;
+  --font-size: var(--sys-typescale-body2-size);
   --report-font-family: roboto, helvetica, arial, sans-serif;
 }
 
 .lighthouse-start-view header {
   display: flex;
-  font-size: 18px;
+  font-size: var(--sys-typescale-headline3-size);
   flex-direction: row;
   align-items: center;
-  column-gap: 16px;
-  margin-bottom: 16px;
+  column-gap: var(--sys-size-8);
+  margin-bottom: var(--sys-size-8);
 }
 
 .lighthouse-start-view .lighthouse-title {
@@ -48,14 +48,14 @@
 }
 
 .lighthouse-form-section {
-  padding: 8px;
+  padding: var(--sys-size-5);
   flex: 1 1;
 }
 
 .lighthouse-form-categories-fieldset {
   border: none;
   margin: 0;
-  padding: 8px;
+  padding: var(--sys-size-5);
 }
 
 .lighthouse-form-section-label {
@@ -65,15 +65,15 @@
 
 .lighthouse-form-section-label i span {
   position: relative;
-  top: -2px;
+  top: calc(-1 * var(--sys-size-2));
 }
 
 .lighthouse-form-section-label span.largeicon-checkmark {
-  top: -4px;
+  top: calc(-1 * var(--sys-size-3));
 }
 
 .lighthouse-form-section-label .lighthouse-learn-more {
-  margin: 20px;
+  margin: var(--sys-size-9);
 }
 
 .lighthouse-radio {
@@ -98,7 +98,7 @@
 }
 
 .lighthouse-start-button-container button {
-  margin: 16px auto;
+  margin: var(--sys-size-8) auto;
   font-family: var(--report-font-family);
   font-weight: 500;
   font-size: var(--font-size);
@@ -115,12 +115,12 @@
   }
 
   &:not(:has(devtools-checkbox)) {
-    margin-bottom: 6px;
+    margin-bottom: var(--sys-size-4);
   }
 }
 
 .lighthouse-launcher-row .dimmed {
-  padding-left: 22px;
+  padding-left: var(--sys-size-10);
 }
 
 .lighthouse-help-text {

package/front_end/panels/linear_memory_inspector/LinearMemoryInspectorPane.ts

@@ -36,8 +36,12 @@ let inspectorInstance: LinearMemoryInspectorPane;
 const MEMORY_INSPECTOR_EXPLANATION_URL =
     'https://developer.chrome.com/docs/devtools/memory-inspector' as Platform.DevToolsPath.UrlString;
 
-export class LinearMemoryInspectorPane extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
-    UI.Widget.VBox) {
+const LinearMemoryInspectorPaneBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class LinearMemoryInspectorPane extends LinearMemoryInspectorPaneBase {
   readonly #tabbedPane: UI.TabbedPane.TabbedPane;
 
   constructor() {

package/front_end/panels/linear_memory_inspector/components/LinearMemoryInspector.ts

@@ -242,8 +242,12 @@ function getSmallestEnclosingMemoryHighlight(highlightedMemoryAreas: HighlightIn
 
 export type View = typeof DEFAULT_VIEW;
 
-export class LinearMemoryInspector extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
-    UI.Widget.Widget) {
+const LinearMemoryInspectorBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.Widget> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.Widget,
+    );
+
+export class LinearMemoryInspector extends LinearMemoryInspectorBase {
   readonly #history = new Common.SimpleHistoryManager.SimpleHistoryManager(10);
 
   #memory = new Uint8Array();

package/front_end/panels/linear_memory_inspector/components/linearMemoryInspector.css

@@ -22,7 +22,7 @@
     flex-direction: column;
     font-family: var(--monospace-font-family);
     font-size: var(--monospace-font-size);
-    padding: 9px 12px 9px 7px;
+    padding: 9px var(--sys-size-6) 9px 7px;
   }
 
   devtools-linear-memory-inspector-viewer {
@@ -30,7 +30,7 @@
   }
 
   .navigator-widget ~ devtools-linear-memory-inspector-viewer {
-    margin-top: 12px;
+    margin-top: var(--sys-size-6);
   }
 
   .value-interpreter {

package/front_end/panels/linear_memory_inspector/components/linearMemoryNavigator.css

@@ -5,7 +5,7 @@
  */
 
 .navigator {
-  min-height: 24px;
+  min-height: var(--sys-size-11);
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;

package/front_end/panels/linear_memory_inspector/components/linearMemoryValueInterpreter.css

@@ -11,7 +11,7 @@
   }
 
   .value-interpreter {
-    border: 1px solid var(--sys-color-divider);
+    border: var(--sys-size-1) solid var(--sys-color-divider);
     background-color: var(--sys-color-cdt-base-container);
     overflow: hidden;
     width: 400px;
@@ -29,8 +29,8 @@
 
   .settings-toolbar-button {
     padding: 0;
-    width: 20px;
-    height: 20px;
+    width: var(--sys-size-9);
+    height: var(--sys-size-9);
     border: none;
     outline: none;
     background-color: transparent;
@@ -42,8 +42,8 @@
 
   .divider {
     display: block;
-    height: 1px;
-    margin-bottom: 12px;
+    height: var(--sys-size-1);
+    margin-bottom: var(--sys-size-6);
     background-color: var(--sys-color-divider);
   }
 }