chrome-devtools-frontend 1.0.1690116 → 1.0.1695017

package/front_end/panels/common/CPUThrottlingOption.ts

@@ -66,10 +66,14 @@ function makeFixedPresetThrottlingOption(rate: CPUThrottlingRates): CPUThrottlin
   };
 }
 
-export const NoThrottlingOption = makeFixedPresetThrottlingOption(CPUThrottlingRates.NO_THROTTLING);
-export const MidTierThrottlingOption = makeFixedPresetThrottlingOption(CPUThrottlingRates.MID_TIER_MOBILE);
-export const LowTierThrottlingOption = makeFixedPresetThrottlingOption(CPUThrottlingRates.LOW_TIER_MOBILE);
-export const ExtraSlowThrottlingOption = makeFixedPresetThrottlingOption(CPUThrottlingRates.EXTRA_SLOW);
+export const NoThrottlingOption: CPUThrottlingOption =
+    makeFixedPresetThrottlingOption(CPUThrottlingRates.NO_THROTTLING);
+export const MidTierThrottlingOption: CPUThrottlingOption =
+    makeFixedPresetThrottlingOption(CPUThrottlingRates.MID_TIER_MOBILE);
+export const LowTierThrottlingOption: CPUThrottlingOption =
+    makeFixedPresetThrottlingOption(CPUThrottlingRates.LOW_TIER_MOBILE);
+export const ExtraSlowThrottlingOption: CPUThrottlingOption =
+    makeFixedPresetThrottlingOption(CPUThrottlingRates.EXTRA_SLOW);
 
 function makeCalibratedThrottlingOption(calibratedDeviceType: CalibratedDeviceType): CPUThrottlingOption {
   const getSettingValue = (): number|CalibrationError|null => {
@@ -109,8 +113,10 @@ function makeCalibratedThrottlingOption(calibratedDeviceType: CalibratedDeviceTy
   };
 }
 
-export const CalibratedLowTierMobileThrottlingOption = makeCalibratedThrottlingOption('low-tier-mobile');
-export const CalibratedMidTierMobileThrottlingOption = makeCalibratedThrottlingOption('mid-tier-mobile');
+export const CalibratedLowTierMobileThrottlingOption: CPUThrottlingOption =
+    makeCalibratedThrottlingOption('low-tier-mobile');
+export const CalibratedMidTierMobileThrottlingOption: CPUThrottlingOption =
+    makeCalibratedThrottlingOption('mid-tier-mobile');
 
 export function calibrationErrorToString(error: CalibrationError): string {
   if (error === CalibrationError.DEVICE_TOO_WEAK) {

package/front_end/panels/common/DOMLinkifier.ts

@@ -91,7 +91,7 @@ export class DOMNodeLink extends UI.Widget.Widget {
   #options: Options|undefined = undefined;
   #view: View;
 
-  constructor(element?: HTMLElement, node?: SDK.DOMModel.DOMNode, options?: Options, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, node?: SDK.DOMModel.DOMNode, options?: Options, view: View = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
     this.element.classList.remove('vbox');
     this.#node = node;

package/front_end/panels/common/ExtensionView.ts

@@ -41,7 +41,8 @@ export class ExtensionView extends UI.Widget.Widget {
   #frameIndex?: number;
 
   #view: typeof DEFAULT_VIEW;
-  constructor(server: ExtensionServer, id: string, src: string, className: string, view = DEFAULT_VIEW) {
+  constructor(server: ExtensionServer, id: string, src: string, className: string,
+              view: (input: ViewInput, output: ViewOutput, target: HTMLElement) => void = DEFAULT_VIEW) {
     super();
     this.#view = view;
     this.#server = server;

package/front_end/panels/console/ConsoleContextSelector.ts

@@ -232,18 +232,25 @@ export class ConsoleContextSelector implements SDK.TargetManager.SDKModelObserve
       return i18nString(UIStrings.extension);
     }
     const sameTargetParentFrame = frame?.sameTargetParentFrame();
+    const executionContextOrigin =
+        executionContext.origin ? SDK.SecurityOrigin.SecurityOrigin.create(executionContext.origin) : null;
     // TODO(crbug.com/1159332): Understand why condition involves the sameTargetParentFrame.
-    if (!frame || !sameTargetParentFrame || sameTargetParentFrame.securityOrigin !== executionContext.origin) {
+    if (!frame || !sameTargetParentFrame ||
+        !sameTargetParentFrame.securityOrigin().isSameOriginWith(executionContextOrigin)) {
       const url = Common.ParsedURL.ParsedURL.fromString(executionContext.origin);
       if (url) {
         return url.domain();
       }
     }
 
-    if (frame?.securityOrigin) {
-      const domain = new Common.ParsedURL.ParsedURL(frame.securityOrigin).domain();
-      if (domain) {
-        return domain;
+    if (frame) {
+      const origin = frame.securityOrigin();
+      if (!origin.isOpaque()) {
+        const domain =
+            Common.ParsedURL.ParsedURL.fromString(origin.siteId() as Platform.DevToolsPath.UrlString)?.domain();
+        if (domain) {
+          return domain;
+        }
       }
     }
     return 'IFrame';

package/front_end/panels/console/ConsolePinPane.ts

@@ -109,7 +109,8 @@ export class ConsolePinPane extends UI.Widget.VBox {
   readonly #pinModel: ConsolePinModel;
   readonly #focusOut: () => void;
 
-  constructor(focusOut: () => void, view = DEFAULT_PANE_VIEW) {
+  constructor(focusOut: () => void,
+              view: (input: PaneViewInput, _output: object, target: HTMLElement) => void = DEFAULT_PANE_VIEW) {
     super({useShadowDom: true});
     this.#focusOut = focusOut;
     this.#view = view;
@@ -294,7 +295,8 @@ export class ConsolePinPresenter extends UI.Widget.Widget {
   #deletePinIcon!: Buttons.Button.Button;
   readonly #selfXssWarningDisabledSetting: Common.Settings.Setting<boolean>;
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement,
+              view: (input: ViewInput, output: ViewOutput, target: HTMLElement) => void = DEFAULT_VIEW) {
     super(element);
     this.#view = view;
 

package/front_end/panels/console/ConsoleSidebar.ts

@@ -117,7 +117,11 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 };
 
 export class ConsoleFilterGroup {
-  readonly urlGroups = new Map<string|null, {filter: ConsoleFilter, url: string|null, count: number}>();
+  readonly urlGroups: Map<string|null, {
+    filter: ConsoleFilter,
+    url: string|null,
+    count: number,
+  }> = new Map<string|null, {filter: ConsoleFilter, url: string|null, count: number}>();
   messageCount = 0;
   readonly name: GroupName;
   readonly filter: ConsoleFilter;
@@ -190,7 +194,7 @@ export class ConsoleSidebar extends ConsoleSidebarBase {
       Common.Settings.Settings.instance().createSetting<string|null>('console.sidebar-selected-filter', null);
   #selectedFilter = this.#groups.find(group => group.name === this.#selectedFilterSetting.get())?.filter;
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {
       useShadowDom: 'pure',
     });

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -288,7 +288,7 @@ const hoverButtonObserver = new IntersectionObserver(results => {
   }
 });
 
-function appendOrShow(parent: Element, child: DocumentFragment|UI.Widget.Widget): void {
+function appendOrShow(parent: Element, child: DocumentFragment|UI.Widget.AnyWidget|HTMLElement): void {
   if (child instanceof UI.Widget.Widget) {
     child.show(parent, null, /* suppressOprhanWidgetError=*/ true);
   } else {
@@ -795,7 +795,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       if (shouldFormatMessage && parameters[i].type === 'string') {
         appendOrShow(formattedResult, this.linkifyStringAsFragment(parameters[i].description || ''));
       } else {
-        formattedResult.appendChild(this.formatParameter(parameters[i], false, true));
+        appendOrShow(formattedResult, this.formatParameter(parameters[i], false, true));
       }
       if (i < parameters.length - 1) {
         UI.UIUtils.createTextChild(formattedResult, ' ');
@@ -804,10 +804,12 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return formattedResult;
   }
 
-  protected formatParameter(
-      output: SDK.RemoteObject.RemoteObject, forceObjectFormat?: boolean, includePreview?: boolean): HTMLElement {
+  protected formatParameter(output: SDK.RemoteObject.RemoteObject, forceObjectFormat?: boolean,
+                            includePreview?: boolean): HTMLElement|UI.Widget.AnyWidget {
     if (output.customPreview()) {
-      return new ObjectUI.CustomPreviewComponent.CustomPreviewComponent(output).element as HTMLElement;
+      const component = new ObjectUI.CustomPreviewComponent.CustomPreviewComponent();
+      component.object = output;
+      return component;
     }
 
     const outputType = forceObjectFormat ? 'object' : (output.subtype || output.type);
@@ -1185,11 +1187,13 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     for (const token of tokens) {
       switch (token.type) {
         case 'generic': {
-          formattedResult.append(this.formatParameter(token.value, true /* force */, false /* includePreview */));
+          appendOrShow(formattedResult,
+                       this.formatParameter(token.value, true /* force */, false /* includePreview */));
           break;
         }
         case 'optimal': {
-          formattedResult.append(this.formatParameter(token.value, false /* force */, true /* includePreview */));
+          appendOrShow(formattedResult,
+                       this.formatParameter(token.value, false /* force */, true /* includePreview */));
           break;
         }
         case 'string': {
@@ -2271,7 +2275,7 @@ export class ConsoleTableMessageView extends ConsoleViewMessage {
         formattedResult.classList.add('console-message-text');
         const tableElement = formattedResult.createChild('div', 'console-message-formatted-table');
         const dataGridContainer = tableElement.createChild('span');
-        tableElement.appendChild(this.formatParameter(actualTable, true, false));
+        appendOrShow(tableElement, this.formatParameter(actualTable, true, false));
         const shadowRoot = dataGridContainer.attachShadow({mode: 'open'});
         const dataGridWidget = this.dataGrid.asWidget();
         dataGridWidget.markAsRoot();

package/front_end/panels/console/PromptBuilder.ts

@@ -203,7 +203,7 @@ export function lineWhitespace(line: string): string|null {
 
 export function formatRelatedCode(
     {text, columnNumber, lineNumber}: {text: string, columnNumber: number, lineNumber: number},
-    maxCodeSize = MAX_CODE_SIZE): string {
+    maxCodeSize: number = MAX_CODE_SIZE): string {
   const lines = text.split('\n');
   if (lines[lineNumber].length >= maxCodeSize / 2) {
     const start = Math.max(columnNumber - maxCodeSize / 2, 0);

package/front_end/panels/coverage/CoverageListView.ts

@@ -189,7 +189,7 @@ export class CoverageListView extends UI.Widget.VBox {
   #expandedUrls = new Set<Platform.DevToolsPath.UrlString>();
   #view: View;
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {useShadowDom: true, delegatesFocus: true});
     this.#view = view;
     this.#highlightRegExp = null;

package/front_end/panels/coverage/CoverageModel.ts

@@ -690,7 +690,8 @@ export class URLCoverageInfo extends Common.ObjectWrapper.ObjectWrapper<URLCover
   #usedSize: number;
   #type!: CoverageType;
   #isContentScript: boolean;
-  sourcesURLCoverageInfo = new Map<Platform.DevToolsPath.UrlString, SourceURLCoverageInfo>();
+  sourcesURLCoverageInfo: Map<Platform.DevToolsPath.UrlString, SourceURLCoverageInfo> =
+      new Map<Platform.DevToolsPath.UrlString, SourceURLCoverageInfo>();
   sourceSegments: SourceSegment[]|undefined;
 
   constructor(url: Platform.DevToolsPath.UrlString) {
@@ -938,9 +939,10 @@ export class CoverageInfo {
   private coverageType: CoverageType;
   private segments: CoverageSegment[];
   private generatedUrlCoverageInfo: URLCoverageInfo;
-  sourceUsedSizeMap = new Map<Platform.DevToolsPath.UrlString, number>();
-  sourceDeltaMap = new Map<Platform.DevToolsPath.UrlString, number>();
-  sourceUsedRangeMap = new Map<Platform.DevToolsPath.UrlString, RangeOffset[]>();
+  sourceUsedSizeMap: Map<Platform.DevToolsPath.UrlString, number> = new Map<Platform.DevToolsPath.UrlString, number>();
+  sourceDeltaMap: Map<Platform.DevToolsPath.UrlString, number> = new Map<Platform.DevToolsPath.UrlString, number>();
+  sourceUsedRangeMap: Map<Platform.DevToolsPath.UrlString, RangeOffset[]> =
+      new Map<Platform.DevToolsPath.UrlString, RangeOffset[]>();
 
   constructor(
       contentProvider: TextUtils.ContentProvider.ContentProvider, size: number, lineOffset: number,

package/front_end/panels/coverage/coverageView.css

@@ -10,7 +10,7 @@
 
 .coverage-toolbar-container {
   display: flex;
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   flex: 0 0 auto;
 }
 
@@ -20,7 +20,7 @@
 
 .coverage-toolbar-summary {
   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);
   padding-left: 5px;
   flex: 0 0 19px;
   display: flex;
@@ -28,7 +28,7 @@
 }
 
 .coverage-toolbar-summary .coverage-message {
-  padding-top: 2px;
+  padding-top: var(--sys-size-2);
   padding-left: 1ex;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -45,7 +45,7 @@
 .prerender-page {
   justify-content: center;
   align-items: center;
-  padding: 20px;
+  padding: var(--sys-size-9);
 }
 
 .bfcache-page .message,
@@ -56,14 +56,14 @@
 
 .inline-button {
   display: inline-flex;
-  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);
   position: relative;
   vertical-align: sub;
-  margin: 2px;
+  margin: var(--sys-size-2);
   background-color: var(--sys-color-cdt-base-container);
   justify-content: center;
-  width: 28px;
+  width: var(--sys-size-12);
 }
 
 .inline-button:hover {

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -219,7 +219,7 @@ export interface OverviewData {
 }
 
 export type FontInfo = Map<string, Map<string, Map<string, number[]>>>;
-interface FontMetric {
+export interface FontMetric {
   label: string;
   values: Array<{title: string, nodes: number[]}>;
 }
@@ -236,7 +236,7 @@ function getBorderString(color: Common.Color.Color): string {
   return `1px solid hsl(${h}deg ${s}% ${l}%)`;
 }
 
-interface ViewInput {
+export interface ViewInput {
   elementCount: number;
   backgroundColors: string[];
   textColors: string[];
@@ -253,7 +253,7 @@ interface ViewInput {
   onReset: () => void;
 }
 
-interface ViewOutput {
+export interface ViewOutput {
   revealSection: Map<string, (setFocus: boolean) => void>;
   closeAllTabs: () => void;
   addTab: (id: string, tabTitle: string, view: UI.Widget.Widget, jslogContext: string) => void;
@@ -261,7 +261,7 @@ interface ViewOutput {
 
 const formatter = new Intl.NumberFormat('en-US');
 
-type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
 
 export const DEFAULT_VIEW: View = (input, output, target) => {
   function revealSection(section: Element|undefined, setFocus: boolean): void {
@@ -428,14 +428,13 @@ function renderFontMetrics(font: string, fontMetricInfo: FontMetric[]): Template
       ${fontMetricInfo.map(({label, values}) => html`
         <div>
           <h3>${label}</h3>
-          ${renderGroup(values, 'font-info', `${font}/${label}`)}
+          ${renderGroup(values, 'font-info', `${font}/${label}`, label)}
         </div>`)}
     </div>`;
 }
 
-function renderGroup(
-    values: Array<{title: string, nodes: Array<number|UnusedDeclaration|Protocol.CSS.CSSMedia>}>, type: string,
-    path = ''): TemplateResult {
+function renderGroup(values: Array<{title: string, nodes: Array<number|UnusedDeclaration|Protocol.CSS.CSSMedia>}>,
+                     type: string, path = '', groupLabel = ''): TemplateResult {
   const total = values.reduce((prev, curr) => prev + curr.nodes.length, 0);
 
   // clang-format off
@@ -449,7 +448,7 @@ function renderGroup(
             <div class="title">${title}</div>
             <button data-type=${type} data-path=${path} data-label=${title}
             jslog=${VisualLogging.action().track({click: true}).context(`css-overview.${type}`)}
-            aria-label=${`${title}: ${itemLabel}`}>
+            aria-label=${`${groupLabel ? `${groupLabel}, ` : ''}${title}: ${itemLabel}`}>
               <div class="details">${itemLabel}</div>
               <div class="bar-container">
                 <div class="bar" style=${styleMap({width})}></div>
@@ -541,7 +540,7 @@ function renderColor(section: string, color: string): LitTemplate {
   // clang-format on
 }
 
-type PopulateNodesEvent = {
+export type PopulateNodesEvent = {
   type: 'contrast',
   key: string,
   section: string|undefined,
@@ -583,7 +582,7 @@ export class CSSOverviewCompletedView extends UI.Widget.VBox {
     addTab: (_id, _tabTitle, _view, _jslogContext) => {},
   };
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
     this.#view = view;
     this.registerRequiredCSS(cssOverviewCompletedViewStyles);
@@ -879,10 +878,10 @@ export class CSSOverviewCompletedView extends UI.Widget.VBox {
     this.requestUpdate();
   }
 
-  static readonly pushedNodes = new Set<Protocol.DOM.BackendNodeId>();
+  static readonly pushedNodes: Set<Protocol.DOM.BackendNodeId> = new Set<Protocol.DOM.BackendNodeId>();
 }
 
-interface ElementDetailsViewInput {
+export interface ElementDetailsViewInput {
   items: Array<{
     data: PopulateNodesEventNodeTypes,
     link?: LitTemplate,
@@ -890,7 +889,7 @@ interface ElementDetailsViewInput {
   }>;
   visibility: Set<string>;
 }
-type ElementDetailsViewFunction = (input: ElementDetailsViewInput, output: object, target: HTMLElement) => void;
+export type ElementDetailsViewFunction = (input: ElementDetailsViewInput, output: object, target: HTMLElement) => void;
 
 export const ELEMENT_DETAILS_DEFAULT_VIEW: ElementDetailsViewFunction = (input, _output, target) => {
   const {items, visibility} = input;

package/front_end/panels/css_overview/CSSOverviewPanel.ts

@@ -16,7 +16,7 @@ import type {UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
 
 const {widget} = UI.Widget;
 
-interface ViewInput {
+export interface ViewInput {
   state: 'start'|'processing'|'completed';
   onStartCapture: () => void;
   onCancel: () => void;
@@ -25,7 +25,7 @@ interface ViewInput {
   target?: SDK.Target.Target;
 }
 
-type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
 export const DEFAULT_VIEW: View = (input, _output, target) => {
   render(
@@ -55,7 +55,7 @@ export class CSSOverviewPanel extends UI.Panel.Panel implements SDK.TargetManage
   #state!: 'start'|'processing'|'completed';
   #view: View;
 
-  constructor(view = DEFAULT_VIEW) {
+  constructor(view: View = DEFAULT_VIEW) {
     super('css-overview');
     this.#currentUrl = SDK.TargetManager.TargetManager.instance().inspectedURL();
     SDK.TargetManager.TargetManager.instance().addEventListener(

package/front_end/panels/css_overview/CSSOverviewProcessingView.ts

@@ -18,11 +18,11 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/css_overview/CSSOverviewProcessingView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-interface ViewInput {
+export interface ViewInput {
   onCancel: () => void;
 }
 
-type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
 export const DEFAULT_VIEW: View = (input, _output, target) => {
   // clang-format off

package/front_end/panels/css_overview/CSSOverviewSidebarPanel.ts

@@ -27,14 +27,14 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/css_overview/CSSOverviewSidebarPanel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-interface ViewInput {
+export interface ViewInput {
   items: Array<{name: string, id: string}>;
   selectedId?: string;
   onReset: () => void;
   onItemClick: (id: string) => void;
   onItemKeyDown: (id: string, key: string) => void;
 }
-type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
 export const DEFAULT_VIEW: View = (input, _output, target) => {
   const onClick = (event: Event): void => {
@@ -94,7 +94,7 @@ export class CSSOverviewSidebarPanel extends UI.Widget.VBox {
   #onItemSelected = (_id: string, _shouldFocus: boolean): void => {};
   #onReset = (): void => {};
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {useShadowDom: true, delegatesFocus: true});
     this.#view = view;
   }

package/front_end/panels/css_overview/CSSOverviewStartView.ts

@@ -46,11 +46,11 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const FEEDBACK_LINK = 'https://g.co/devtools/css-overview-feedback' as Platform.DevToolsPath.UrlString;
 const DOC_LINK = 'https://developer.chrome.com/docs/devtools/css-overview' as Platform.DevToolsPath.UrlString;
 
-interface ViewInput {
+export interface ViewInput {
   onStartCapture: () => void;
 }
 
-type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
 const DEFAULT_VIEW: View = (input, output, target) => {
   // Disabled until https://crbug.com/1079231 is fixed.
@@ -93,7 +93,7 @@ export class CSSOverviewStartView extends UI.Widget.Widget {
   #view: View;
   onStartCapture = (): void => {};
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {useShadowDom: true, delegatesFocus: true});
     this.#view = view;
     this.performUpdate();

package/front_end/panels/developer_resources/DeveloperResourcesListView.ts

@@ -183,7 +183,7 @@ export class DeveloperResourcesListView extends UI.Widget.VBox {
   #onSelect: ((item: SDK.PageResourceLoader.PageResource|null) => void)|null = null;
   readonly #view: View;
   #filters: TextUtils.TextUtils.ParsedFilter[] = [];
-  constructor(element: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
     this.#view = view;
   }

package/front_end/panels/developer_resources/developerResourcesView.css

@@ -11,7 +11,7 @@
 
   .developer-resource-view-toolbar-container {
     display: flex;
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
     flex: 0 0 auto;
   }
 
@@ -21,7 +21,7 @@
 
   .developer-resource-view-toolbar-summary {
     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);
     padding-left: 5px;
     flex: 0 0 19px;
     display: flex;
@@ -29,7 +29,7 @@
   }
 
   .developer-resource-view-toolbar-summary .developer-resource-view-message {
-    padding-top: 2px;
+    padding-top: var(--sys-size-2);
     padding-left: 1ex;
     text-overflow: ellipsis;
     white-space: nowrap;

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -344,7 +344,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
   #filterIsRegex = false;
   #allowUserControl = true;
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
     this.#view = view;