chrome-devtools-frontend 1.0.1690116 → 1.0.1690531

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/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 {
@@ -541,7 +541,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 +583,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 +879,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 +890,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/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;
 

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1110,7 +1110,8 @@ export interface InitialEditState {
 }
 
 export class ElementsTreeWidget extends UI.Widget.Widget {
-  static override readonly INJECT = [IssuesManager.DOMIssuesManager.DOMIssuesManager] as const;
+  static override readonly INJECT: readonly[typeof IssuesManager.DOMIssuesManager.DOMIssuesManager] =
+      [IssuesManager.DOMIssuesManager.DOMIssuesManager] as const;
   #domIssuesManager?: IssuesManager.DOMIssuesManager.DOMIssuesManager;
 
   #node!: SDK.DOMModel.DOMNode;
@@ -3203,13 +3204,13 @@ export const InitialChildrenLimit = 500;
  * A union of HTML4 and HTML5-Draft elements that explicitly
  * or implicitly (for HTML5) forbid the closing tag.
  **/
-export const ForbiddenClosingTagElements = new Set<string>([
+export const ForbiddenClosingTagElements: Set<string> = new Set<string>([
   'area', 'base',  'basefont', 'br',   'canvas',   'col',  'command', 'embed',  'frame', 'hr',
   'img',  'input', 'keygen',   'link', 'menuitem', 'meta', 'param',   'source', 'track', 'wbr',
 ]);
 
 /** These tags we do not allow editing their tag name. **/
-export const EditTagBlocklist = new Set<string>(['html', 'head', 'body']);
+export const EditTagBlocklist: Set<string> = new Set<string>(['html', 'head', 'body']);
 
 export function convertUnicodeCharsToHTMLEntities(text: string): {
   text: string,

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -1513,7 +1513,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     this.setExpandedChildrenLimit(node, Math.max(visibleChildren.length, currentLimit + InitialChildrenLimit));
   }
 
-  async expandRecursively(node: SDK.DOMModel.DOMNode, maxDepth = Number.MAX_VALUE): Promise<void> {
+  async expandRecursively(node: SDK.DOMModel.DOMNode, maxDepth: number = Number.MAX_VALUE): Promise<void> {
     if (this.#view === DECLARATIVE_VIEW) {
       await node.getSubtree(100, true);
       const expand = async(n: SDK.DOMModel.DOMNode, depth: number): Promise<void> => {
@@ -3816,7 +3816,7 @@ export namespace ElementsTreeOutline {
 }
 
 // clang-format off
-export const MappedCharToEntity = new Map<string, string>([
+export const MappedCharToEntity: Map<string, string> = new Map<string, string>([
   ['\xA0', 'nbsp'],
   ['\xAD', 'shy'],
   ['\u2002', 'ensp'],

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;

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;

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