chrome-devtools-frontend 1.0.1689415 → 1.0.1690116

package/front_end/panels/elements/PropertyRenderer.ts

@@ -39,22 +39,24 @@ function mergeWithSpacing(nodes: Node[], merge: Node[]): Node[] {
   return result;
 }
 
+export type RendererBase<MatchT extends SDK.CSSPropertyParser.Match> = abstract new () => MatchRenderer<MatchT>;
+
 export interface MatchRenderer<MatchT extends SDK.CSSPropertyParser.Match> {
   readonly matchType: Platform.Constructor.Constructor<MatchT>;
   render(match: MatchT, context: RenderingContext): Node[];
 }
 
 // A mixin to automatically expose the match type on specific renrerers
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+
 export function rendererBase<MatchT extends SDK.CSSPropertyParser.Match>(
-    matchT: Platform.Constructor.Constructor<MatchT>) {
-  abstract class RendererBase implements MatchRenderer<MatchT> {
+    matchT: Platform.Constructor.Constructor<MatchT>): RendererBase<MatchT> {
+  abstract class RendererBaseClass implements MatchRenderer<MatchT> {
     readonly matchType = matchT;
     render(_match: MatchT, _context: RenderingContext): Node[] {
       return [];
     }
   }
-  return RendererBase;
+  return RendererBaseClass;
 }
 
 /**
@@ -347,14 +349,13 @@ export class TracingContext {
 }
 
 export class RenderingContext {
-  constructor(
-      readonly ast: SDK.CSSPropertyParser.SyntaxTree, readonly property: SDK.CSSProperty.CSSProperty|null,
-      readonly renderers:
-          Map<Platform.Constructor.Constructor<SDK.CSSPropertyParser.Match>,
-              MatchRenderer<SDK.CSSPropertyParser.Match>>,
-      readonly matchedResult: SDK.CSSPropertyParser.BottomUpTreeMatching,
-      readonly cssControls?: SDK.CSSPropertyParser.CSSControlMap, readonly options: {readonly?: boolean} = {},
-      readonly tracing?: TracingContext, readonly signal?: AbortSignal) {
+  constructor(readonly ast: SDK.CSSPropertyParser.SyntaxTree, readonly property: SDK.CSSProperty.CSSProperty|null,
+              readonly renderers: Map<Platform.Constructor.Constructor<SDK.CSSPropertyParser.Match>,
+                                      MatchRenderer<SDK.CSSPropertyParser.Match>>,
+              readonly matchedResult: SDK.CSSPropertyParser.BottomUpTreeMatching,
+              readonly cssControls?: SDK.CSSPropertyParser.CSSControlMap|undefined,
+              readonly options: {readonly?: boolean} = {}, readonly tracing?: TracingContext|undefined,
+              readonly signal?: AbortSignal|undefined) {
   }
 
   addControl(cssType: string, control: HTMLElement): void {
@@ -530,8 +531,10 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
   }
 }
 
+const URLRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.URLMatch> =
+    rendererBase(SDK.CSSPropertyParserMatchers.URLMatch);
 // clang-format off
-export class URLRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.URLMatch) {
+export class URLRenderer extends URLRendererBase {
   // clang-format on
   constructor(private readonly rule: SDK.CSSRule.CSSRule|null, private readonly node: SDK.DOMModel.DOMNode|null) {
     super();
@@ -564,8 +567,10 @@ export class URLRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.URLM
   }
 }
 
+const StringRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.StringMatch> =
+    rendererBase(SDK.CSSPropertyParserMatchers.StringMatch);
 // clang-format off
-export class StringRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.StringMatch) {
+export class StringRenderer extends StringRendererBase {
   // clang-format on
   override render(match: SDK.CSSPropertyParserMatchers.StringMatch): Node[] {
     const element = document.createElement('span');
@@ -575,8 +580,10 @@ export class StringRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.S
   }
 }
 
+const BinOpRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.BinOpMatch> =
+    rendererBase(SDK.CSSPropertyParserMatchers.BinOpMatch);
 // clang-format off
-export class BinOpRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.BinOpMatch) {
+export class BinOpRenderer extends BinOpRendererBase {
   // clang-format on
   override render(match: SDK.CSSPropertyParserMatchers.BinOpMatch, context: RenderingContext): Node[] {
     const [lhs, binop, rhs] = SDK.CSSPropertyParser.ASTUtils.children(match.node).map(child => {

package/front_end/panels/elements/StandaloneStylesContainer.ts

@@ -47,8 +47,12 @@ export interface EventTypes {
   [Events.STYLES_UPDATE_COMPLETED]: void;
 }
 
-export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
-    UI.Widget.VBox) implements StylesContainer {
+const StandaloneStylesContainerBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class StandaloneStylesContainer extends StandaloneStylesContainerBase implements StylesContainer {
   activeCSSAngle: InlineEditor.CSSAngle.CSSAngle|null = null;
   isEditingStyle = false;
   readonly sectionByElement = new WeakMap<Node, StylePropertiesSection>();

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -38,6 +38,7 @@ import {
   type MatchRenderer,
   Renderer,
   rendererBase,
+  type RendererBase,
   RenderingContext,
   StringRenderer,
   type TracingContext,
@@ -171,8 +172,10 @@ interface StylePropertyTreeElementParams {
   newProperty: boolean;
 }
 
+const EnvFunctionRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.EnvFunctionMatch> =
+    rendererBase(SDK.CSSPropertyParserMatchers.EnvFunctionMatch);
 // clang-format off
-export class EnvFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.EnvFunctionMatch) {
+export class EnvFunctionRenderer extends EnvFunctionRendererBase {
   // clang-format on
   constructor(
       readonly treeElement: StylePropertyTreeElement|null,
@@ -208,8 +211,10 @@ export class EnvFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatch
     return [span];
   }
 }
+const FlexGridRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.FlexGridGridLanesMatch> =
+    rendererBase(SDK.CSSPropertyParserMatchers.FlexGridGridLanesMatch);
 // clang-format off
-export class FlexGridRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.FlexGridGridLanesMatch) {
+export class FlexGridRenderer extends FlexGridRendererBase {
   // clang-format on
   readonly #treeElement: StylePropertyTreeElement|null;
   readonly #stylesContainer: StylesContainer;
@@ -278,8 +283,10 @@ export class FlexGridRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
   }
 }
 
+const CSSWideKeywordRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.CSSWideKeywordMatch> =
+    rendererBase(SDK.CSSPropertyParserMatchers.CSSWideKeywordMatch);
 // clang-format off
-export class CSSWideKeywordRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.CSSWideKeywordMatch) {
+export class CSSWideKeywordRenderer extends CSSWideKeywordRendererBase {
   // clang-format on
   readonly #treeElement: StylePropertyTreeElement|null;
   readonly #stylesContainer: StylesContainer;
@@ -331,8 +338,10 @@ export function handleVarDefinitionActivate(variable: string|SDK.CSSMatchedStyle
   }
 }
 
+const VariableRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.VariableMatch> =
+    rendererBase(SDK.CSSPropertyParserMatchers.VariableMatch);
 // clang-format off
-export class VariableRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.VariableMatch) {
+export class VariableRenderer extends VariableRendererBase {
   // clang-format on
   readonly #stylesContainer: StylesContainer;
   readonly #treeElement: StylePropertyTreeElement|null;
@@ -434,8 +443,10 @@ export class VariableRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
   }
 }
 
+const VariableNameRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.VariableNameMatch> =
+    rendererBase(SDK.CSSPropertyParserMatchers.VariableNameMatch);
 // clang-format off
-export class VariableNameRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.VariableNameMatch) {
+export class VariableNameRenderer extends VariableNameRendererBase {
   // clang-format on
   readonly #stylesContainer: StylesContainer;
   readonly #treeElement: StylePropertyTreeElement|null;
@@ -489,8 +500,10 @@ export class VariableNameRenderer extends rendererBase(SDK.CSSPropertyParserMatc
   }
 }
 
+const AttributeRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.AttributeMatch> =
+    rendererBase(SDK.CSSPropertyParserMatchers.AttributeMatch);
 // clang-format off
-export class AttributeRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.AttributeMatch) {
+export class AttributeRenderer extends AttributeRendererBase {
   // clang-format on
   readonly #stylesContainer: StylesContainer;
   readonly #treeElement: StylePropertyTreeElement|null;
@@ -606,8 +619,10 @@ export class AttributeRenderer extends rendererBase(SDK.CSSPropertyParserMatcher
   }
 }
 
+const LinearGradientRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.LinearGradientMatch> =
+    rendererBase(SDK.CSSPropertyParserMatchers.LinearGradientMatch);
 // clang-format off
-export class LinearGradientRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.LinearGradientMatch) {
+export class LinearGradientRenderer extends LinearGradientRendererBase {
   // clang-format on
   override render(match: SDK.CSSPropertyParserMatchers.LinearGradientMatch, context: RenderingContext): Node[] {
     const children = ASTUtils.children(match.node);
@@ -632,8 +647,10 @@ export class LinearGradientRenderer extends rendererBase(SDK.CSSPropertyParserMa
   }
 }
 
+const RelativeColorChannelRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.RelativeColorChannelMatch> =
+    rendererBase(SDK.CSSPropertyParserMatchers.RelativeColorChannelMatch);
 // clang-format off
-export class RelativeColorChannelRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.RelativeColorChannelMatch) {
+export class RelativeColorChannelRenderer extends RelativeColorChannelRendererBase {
   // clang-format on
   readonly #treeElement: StylePropertyTreeElement|null;
   constructor(treeElement: StylePropertyTreeElement|null) {
@@ -677,8 +694,10 @@ export class RelativeColorChannelRenderer extends rendererBase(SDK.CSSPropertyPa
   }
 }
 
+const ColorRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.ColorMatch> =
+    rendererBase(SDK.CSSPropertyParserMatchers.ColorMatch);
 // clang-format off
-export class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.ColorMatch) {
+export class ColorRenderer extends ColorRendererBase {
   // clang-format on
   readonly #treeElement: StylePropertyTreeElement|null;
   readonly #stylesContainer: StylesContainer;
@@ -836,8 +855,10 @@ export class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.Co
   }
 }
 
+const LightDarkColorRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.LightDarkColorMatch> =
+    rendererBase(SDK.CSSPropertyParserMatchers.LightDarkColorMatch);
 // clang-format off
-export class LightDarkColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.LightDarkColorMatch) {
+export class LightDarkColorRenderer extends LightDarkColorRendererBase {
   // clang-format on
   readonly #treeElement: StylePropertyTreeElement|null;
   readonly #stylesContainer: StylesContainer;
@@ -941,8 +962,10 @@ export class LightDarkColorRenderer extends rendererBase(SDK.CSSPropertyParserMa
   }
 }
 
+const ColorMixRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.ColorMixMatch> =
+    rendererBase(SDK.CSSPropertyParserMatchers.ColorMixMatch);
 // clang-format off
-export class ColorMixRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.ColorMixMatch) {
+export class ColorMixRenderer extends ColorMixRendererBase {
   // clang-format on
   readonly #stylesContainer: StylesContainer;
   readonly #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
@@ -1088,8 +1111,10 @@ export class ColorMixRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
   }
 }
 
+const ContrastColorRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.ContrastColorMatch> =
+    rendererBase(SDK.CSSPropertyParserMatchers.ContrastColorMatch);
 // clang-format off
-export class ContrastColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.ContrastColorMatch) {
+export class ContrastColorRenderer extends ContrastColorRendererBase {
   // clang-format on
   readonly #treeElement: StylePropertyTreeElement|null;
   readonly #stylesContainer: StylesContainer;
@@ -1128,8 +1153,10 @@ export class ContrastColorRenderer extends rendererBase(SDK.CSSPropertyParserMat
   }
 }
 
+const AngleRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.AngleMatch> =
+    rendererBase(SDK.CSSPropertyParserMatchers.AngleMatch);
 // clang-format off
-export class AngleRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.AngleMatch) {
+export class AngleRenderer extends AngleRendererBase {
   // clang-format on
   readonly #treeElement: StylePropertyTreeElement|null;
   constructor(treeElement: StylePropertyTreeElement|null) {
@@ -1188,8 +1215,10 @@ export class AngleRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.An
   }
 }
 
+const LinkableNameRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.LinkableNameMatch> =
+    rendererBase(SDK.CSSPropertyParserMatchers.LinkableNameMatch);
 // clang-format off
-export class LinkableNameRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.LinkableNameMatch) {
+export class LinkableNameRenderer extends LinkableNameRendererBase {
   // clang-format on
   readonly #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
   readonly #stylesContainer: StylesContainer;
@@ -1292,8 +1321,10 @@ export class LinkableNameRenderer extends rendererBase(SDK.CSSPropertyParserMatc
   }
 }
 
+const BezierRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.BezierMatch> =
+    rendererBase(SDK.CSSPropertyParserMatchers.BezierMatch);
 // clang-format off
-export class BezierRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.BezierMatch) {
+export class BezierRenderer extends BezierRendererBase {
   // clang-format on
   readonly #treeElement: StylePropertyTreeElement|null;
   constructor(treeElement: StylePropertyTreeElement|null) {
@@ -1326,8 +1357,10 @@ export class BezierRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.B
   }
 }
 
+const AutoBaseRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.AutoBaseMatch> =
+    rendererBase(SDK.CSSPropertyParserMatchers.AutoBaseMatch);
 // clang-format off
-export class AutoBaseRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.AutoBaseMatch) {
+export class AutoBaseRenderer extends AutoBaseRendererBase {
   readonly #computedStyleExtraFields : Protocol.CSS.ComputedStyleExtraFields|null;
   // clang-format on
 
@@ -1528,8 +1561,10 @@ export class ShadowModel implements InlineEditor.CSSShadowEditor.CSSShadowModel
   }
 }
 
+const ShadowRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.ShadowMatch> =
+    rendererBase(SDK.CSSPropertyParserMatchers.ShadowMatch);
 // clang-format off
-export class ShadowRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.ShadowMatch) {
+export class ShadowRenderer extends ShadowRendererBase {
   readonly #treeElement: StylePropertyTreeElement|null;
   // clang-format on
   constructor(treeElement: StylePropertyTreeElement|null) {
@@ -1669,8 +1704,10 @@ export class ShadowRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.S
   }
 }
 
+const GridTemplateRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.GridTemplateMatch> =
+    rendererBase(SDK.CSSPropertyParserMatchers.GridTemplateMatch);
 // clang-format off
-export class GridTemplateRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.GridTemplateMatch) {
+export class GridTemplateRenderer extends GridTemplateRendererBase {
   // clang-format on
   override render(match: SDK.CSSPropertyParserMatchers.GridTemplateMatch, context: RenderingContext): Node[] {
     if (match.lines.length <= 1) {
@@ -1694,7 +1731,7 @@ export class GridTemplateRenderer extends rendererBase(SDK.CSSPropertyParserMatc
   }
 }
 
-export const SHORTHANDS_FOR_PERCENTAGES = new Set([
+export const SHORTHANDS_FOR_PERCENTAGES: Set<string> = new Set([
   'inset',
   'inset-block',
   'inset-inline',
@@ -1726,8 +1763,10 @@ async function resolveValues(
       (await stylesContainer.cssModel()?.resolveValues(undefined, nodeId, ...values));
 }
 
+const LengthRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.LengthMatch> =
+    rendererBase(SDK.CSSPropertyParserMatchers.LengthMatch);
 // clang-format off
-export class LengthRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.LengthMatch) {
+export class LengthRenderer extends LengthRendererBase {
   // clang-format on
   readonly #stylesContainer: StylesContainer;
   readonly #treeElement: StylePropertyTreeElement|null;
@@ -1802,8 +1841,10 @@ export class LengthRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.L
   }
 }
 
+const BaseFunctionRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.BaseFunctionMatch<string>> =
+    rendererBase(SDK.CSSPropertyParserMatchers.BaseFunctionMatch);
 // clang-format off
-export class BaseFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.BaseFunctionMatch) {
+export class BaseFunctionRenderer extends BaseFunctionRendererBase {
   // clang-format on
   readonly #stylesContainer: StylesContainer;
   readonly #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
@@ -1912,15 +1953,19 @@ export class BaseFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatc
 }
 
 export class MathFunctionRenderer extends BaseFunctionRenderer {
-  override readonly matchType = SDK.CSSPropertyParserMatchers.MathFunctionMatch;
+  override readonly matchType: typeof SDK.CSSPropertyParserMatchers.MathFunctionMatch =
+      SDK.CSSPropertyParserMatchers.MathFunctionMatch;
 }
 
 export class CustomFunctionRenderer extends BaseFunctionRenderer {
-  override readonly matchType = SDK.CSSPropertyParserMatchers.CustomFunctionMatch;
+  override readonly matchType: typeof SDK.CSSPropertyParserMatchers.CustomFunctionMatch =
+      SDK.CSSPropertyParserMatchers.CustomFunctionMatch;
 }
 
+const AnchorFunctionRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.AnchorFunctionMatch> =
+    rendererBase(SDK.CSSPropertyParserMatchers.AnchorFunctionMatch);
 // clang-format off
-export class AnchorFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.AnchorFunctionMatch) {
+export class AnchorFunctionRenderer extends AnchorFunctionRendererBase {
   // clang-format on
   readonly #stylesContainer: StylesContainer;
 
@@ -2015,8 +2060,10 @@ export class AnchorFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMa
   }
 }
 
+const PositionAnchorRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.PositionAnchorMatch> =
+    rendererBase(SDK.CSSPropertyParserMatchers.PositionAnchorMatch);
 // clang-format off
-export class PositionAnchorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.PositionAnchorMatch) {
+export class PositionAnchorRenderer extends PositionAnchorRendererBase {
   readonly #stylesContainer: StylesContainer;
   // clang-format on
 
@@ -2032,8 +2079,10 @@ export class PositionAnchorRenderer extends rendererBase(SDK.CSSPropertyParserMa
   }
 }
 
+const PositionTryRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.PositionTryMatch> =
+    rendererBase(SDK.CSSPropertyParserMatchers.PositionTryMatch);
 // clang-format off
-export class PositionTryRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.PositionTryMatch) {
+export class PositionTryRenderer extends PositionTryRendererBase {
   readonly #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
   // clang-format on
 

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -182,8 +182,12 @@ const DISCLAIMER_TOOLTIP_ID = 'styles-ai-code-completion-disclaimer-tooltip';
 const SPINNER_TOOLTIP_ID = 'styles-ai-code-completion-spinner-tooltip';
 const CITATIONS_TOOLTIP_ID = 'styles-ai-code-completion-citations-tooltip';
 
-export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventTypes, typeof ElementsSidebarPane>(
-    ElementsSidebarPane) implements StylesContainer {
+const StylesSidebarPaneBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof ElementsSidebarPane> =
+    Common.ObjectWrapper.eventMixin(
+        ElementsSidebarPane,
+    );
+
+export class StylesSidebarPane extends StylesSidebarPaneBase implements StylesContainer {
   private matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null = null;
   private currentToolbarPane: UI.Widget.Widget|null = null;
   private animatedToolbarPane: UI.Widget.Widget|null = null;

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/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 {