chrome-devtools-frontend 1.0.1689415 → 1.0.1690531

package/front_end/ui/legacy/Treeoutline.ts

@@ -467,7 +467,7 @@ export class TreeOutlineInShadow extends TreeOutline {
   }
 }
 
-export const treeElementBylistItemNode = new WeakMap<Node, TreeElement>();
+export const treeElementBylistItemNode: WeakMap<Node, TreeElement> = new WeakMap<Node, TreeElement>();
 export class TreeElement {
   treeOutline: TreeOutline|null;
   parent: TreeElement|null;
@@ -1594,8 +1594,6 @@ class TreeViewTreeElement extends TreeElement {
   static readonly CLONED_ATTRIBUTES = SDK.DOMModel.ARIA_ATTRIBUTES.union(new Set(['jslog', 'draggable']));
   #clonedAttributes = new Set<string>();
   #clonedClasses = new Set<string>();
-  #userExpanded = false;
-  #isProcessingAttribute = false;
   #previousOpenAttributeValue?: string|null;
   #refreshScheduled = false;
 
@@ -1609,39 +1607,16 @@ class TreeViewTreeElement extends TreeElement {
     this.refresh();
   }
 
-  override onexpand(): void {
-    if (!this.#isProcessingAttribute) {
-      this.#userExpanded = true;
-    }
-  }
-
-  override oncollapse(): void {
-    if (!this.#isProcessingAttribute) {
-      this.#userExpanded = false;
-    }
-  }
-
   updateExpansionFromAttribute(): void {
-    this.#isProcessingAttribute = true;
-    try {
-      const openAttr = this.configElement.getAttribute('open');
-      if (openAttr === this.#previousOpenAttributeValue) {
-        return;
-      }
-      this.#previousOpenAttributeValue = openAttr;
-      if (openAttr === null) {
-        if (this.#userExpanded) {
-          this.expand();
-        } else {
-          this.collapse();
-        }
-      } else if (openAttr === 'false') {
-        this.collapse();
-      } else {
-        this.expand();
-      }
-    } finally {
-      this.#isProcessingAttribute = false;
+    const openAttr = this.configElement.getAttribute('open');
+    if (openAttr === this.#previousOpenAttributeValue) {
+      return;
+    }
+    this.#previousOpenAttributeValue = openAttr;
+    if (openAttr !== null && openAttr !== 'false') {
+      this.expand();
+    } else {
+      this.collapse();
     }
   }
 
@@ -1828,7 +1803,7 @@ function removeNode(node: TreeElement, preserveParentExpandable = false): void {
  * @attribute hide-overflow
  */
 export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
-  static readonly observedAttributes =
+  static readonly observedAttributes: string[] =
       ['navigation-variant', 'hide-overflow', 'dense', 'show-selection-on-keyboard-focus'];
   readonly #treeOutline = new TreeOutlineInShadow(undefined, this, true);
 
@@ -2104,7 +2079,8 @@ class IfExpandedDirective extends Lit.Directive.Directive {
     return node.expanded;
   }
 }
-export const ifExpanded = Lit.Directive.directive(IfExpandedDirective);
+export const ifExpanded: (content: Lit.LitTemplate|Iterable<Lit.LitTemplate>) =>
+    Lit.DirectiveResult<typeof IfExpandedDirective> = Lit.Directive.directive(IfExpandedDirective);
 
 export class TreeElementWrapper extends HTMLElement {
   #treeElement?: TreeElement;

package/front_end/ui/legacy/UIUtils.ts

@@ -71,7 +71,8 @@ declare global {
     'dt-small-bubble': DevToolsSmallBubble;
   }
 }
-const {Directives, render} = Lit;
+const Directives: typeof Lit.Directives = Lit.Directives;
+const render: typeof Lit.render = Lit.render;
 
 const UIStrings = {
   /**
@@ -753,7 +754,8 @@ class AnimateOnDirective extends Lit.Directive.Directive {
   }
 }
 
-export const animateOn = Lit.Directive.directive(AnimateOnDirective);
+export const animateOn: (_condition: boolean, _className: string) => Lit.DirectiveResult<typeof AnimateOnDirective> =
+    Lit.Directive.directive(AnimateOnDirective);
 
 export function measurePreferredSize(element: Element, containerElement?: Element|null): Geometry.Size {
   const oldParent = element.parentElement;
@@ -1195,7 +1197,8 @@ export function setTitle(element: HTMLElement, title: string): void {
 }
 
 export class CheckboxLabel extends HTMLElement {
-  static readonly observedAttributes = ['checked', 'disabled', 'indeterminate', 'name', 'title', 'aria-label', 'small'];
+  static readonly observedAttributes: string[] =
+      ['checked', 'disabled', 'indeterminate', 'name', 'title', 'aria-label', 'small'];
 
   readonly #shadowRoot!: DocumentFragment;
   #checkboxElement!: HTMLInputElement;

package/front_end/ui/legacy/ViewManager.ts

@@ -173,7 +173,7 @@ export interface EventTypes {
 }
 
 export class ViewManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
-  readonly views = new Map<string, View>();
+  readonly views: Map<string, View> = new Map<string, View>();
   private readonly locationNameByViewId = new Map<string, string>();
   private readonly locationOverrideSetting: Common.Settings.Setting<Record<string, string>>;
 

package/front_end/ui/legacy/Widget.ts

@@ -212,7 +212,7 @@ function runNextUpdate(): void {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const widgetConfigs = new WeakMap<HTMLElement, WidgetConfig<any>>();
+export const widgetConfigs: WeakMap<HTMLElement, WidgetConfig<any>> = new WeakMap<HTMLElement, WidgetConfig<any>>();
 
 export function registerWidgetConfig<WidgetT extends AnyWidget>(element: HTMLElement,
                                                                 config: WidgetConfig<WidgetT>): void {

package/front_end/ui/legacy/components/color_picker/Spectrum.ts

@@ -208,7 +208,12 @@ function getColorFromHsva(gamut: SpectrumGamut, hsva: Common.ColorUtils.Color4D)
   }
 }
 
-export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox) {
+const SpectrumBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class Spectrum extends SpectrumBase {
   #color?: Common.Color.Color;
   private gamut: SpectrumGamut = SpectrumGamut.SRGB;
   private colorElement: HTMLElement;
@@ -1640,7 +1645,13 @@ const MaterialPaletteShades = new Map([
   ],
 ]);
 
-export const MaterialPalette = {
+export const MaterialPalette: {
+  title: string,
+  mutable: boolean,
+  matchUserFormat: boolean,
+  colors: string[],
+  colorNames: string[],
+} = {
   title: 'Material',
   mutable: false,
   matchUserFormat: true,

package/front_end/ui/legacy/components/data_grid/DataGrid.ts

@@ -1756,7 +1756,7 @@ export class DataGridNode<T> {
   selectable = true;
   isRoot = false;
   nodeAccessibleText = '';
-  cellAccessibleTextMap = new Map<string, string>();
+  cellAccessibleTextMap: Map<string, string> = new Map<string, string>();
   isCreationNode = false;
   #data: DataGridData;
   #hasChildren: boolean;

package/front_end/ui/legacy/components/data_grid/DataGridElement.ts

@@ -58,7 +58,7 @@ type DataGridElementNode = SortableNode|DynamicHeightNode;
 const elementToNode = new WeakMap<Element, DataGridElementNode>();
 
 export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
-  static readonly observedAttributes = ['striped', 'name', 'inline', 'resize', 'highlight'];
+  static readonly observedAttributes: string[] = ['striped', 'name', 'inline', 'resize', 'highlight'];
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   #dataGrid!: DataGridImpl<any>;
@@ -805,7 +805,8 @@ class IfExpandedDirective extends Lit.Directive.Directive {
     return node.expanded;
   }
 }
-export const ifExpanded = Lit.Directive.directive(IfExpandedDirective);
+export const ifExpanded: (content: Lit.LitTemplate|Iterable<Lit.LitTemplate>) =>
+    Lit.DirectiveResult<typeof IfExpandedDirective> = Lit.Directive.directive(IfExpandedDirective);
 
 function getNode(element: Element|undefined): DataGridElementNode|undefined {
   return element ? elementToNode.get(element) : undefined;

package/front_end/ui/legacy/components/data_grid/ViewportDataGrid.ts

@@ -11,8 +11,12 @@ import {type DataGridData, DataGridImpl, DataGridNode, Events as DataGridEvents,
 
 let nextId = 0;
 
-export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTypes, typeof DataGridImpl>(
-    DataGridImpl)<ViewportDataGridNode<T>> {
+const ViewportDataGridBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof DataGridImpl> =
+    Common.ObjectWrapper.eventMixin(
+        DataGridImpl,
+    );
+
+export class ViewportDataGrid<T> extends ViewportDataGridBase<ViewportDataGridNode<T>> {
   private readonly onScrollBound: (event: Event|null) => void;
   private visibleNodes: Array<ViewportDataGridNode<T>>;
   /**

package/front_end/ui/legacy/components/inline_editor/AnimationTimingModel.ts

@@ -27,4 +27,4 @@ export abstract class AnimationTimingModel {
   }
 }
 
-export const LINEAR_BEZIER = Geometry.LINEAR_BEZIER;
+export const LINEAR_BEZIER: Geometry.CubicBezier = Geometry.LINEAR_BEZIER;

package/front_end/ui/legacy/components/inline_editor/BezierEditor.ts

@@ -14,7 +14,12 @@ import bezierEditorStyles from './bezierEditor.css.js';
 
 const PREVIEW_ANIMATION_DEBOUNCE_DELAY = 300;
 
-export class BezierEditor extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox) {
+const BezierEditorBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class BezierEditor extends BezierEditorBase {
   private model: AnimationTimingModel;
   private previewElement: HTMLElement;
   private readonly previewOnion: HTMLElement;
@@ -240,50 +245,54 @@ export interface EventTypes {
   [Events.BEZIER_CHANGED]: string;
 }
 
-export const Presets = [
-  [
-    {name: 'linear', value: 'linear'},
-    {
-      name: 'elastic',
-      value:
-          'linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%)',
-    },
-    {
-      name: 'bounce',
-      value:
-          'linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%)',
-    },
-    {
-      name: 'emphasized',
-      value:
-          'linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%)',
-    },
-  ],
-  [
-    {name: 'ease-in-out', value: 'ease-in-out'},
-    {name: 'In Out · Sine', value: 'cubic-bezier(0.45, 0.05, 0.55, 0.95)'},
-    {name: 'In Out · Quadratic', value: 'cubic-bezier(0.46, 0.03, 0.52, 0.96)'},
-    {name: 'In Out · Cubic', value: 'cubic-bezier(0.65, 0.05, 0.36, 1)'},
-    {name: 'Fast Out, Slow In', value: 'cubic-bezier(0.4, 0, 0.2, 1)'},
-    {name: 'In Out · Back', value: 'cubic-bezier(0.68, -0.55, 0.27, 1.55)'},
-  ],
-  [
-    {name: 'Fast Out, Linear In', value: 'cubic-bezier(0.4, 0, 1, 1)'},
-    {name: 'ease-in', value: 'ease-in'},
-    {name: 'In · Sine', value: 'cubic-bezier(0.47, 0, 0.75, 0.72)'},
-    {name: 'In · Quadratic', value: 'cubic-bezier(0.55, 0.09, 0.68, 0.53)'},
-    {name: 'In · Cubic', value: 'cubic-bezier(0.55, 0.06, 0.68, 0.19)'},
-    {name: 'In · Back', value: 'cubic-bezier(0.6, -0.28, 0.74, 0.05)'},
-  ],
-  [
-    {name: 'ease-out', value: 'ease-out'},
-    {name: 'Out · Sine', value: 'cubic-bezier(0.39, 0.58, 0.57, 1)'},
-    {name: 'Out · Quadratic', value: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'},
-    {name: 'Out · Cubic', value: 'cubic-bezier(0.22, 0.61, 0.36, 1)'},
-    {name: 'Linear Out, Slow In', value: 'cubic-bezier(0, 0, 0.2, 1)'},
-    {name: 'Out · Back', value: 'cubic-bezier(0.18, 0.89, 0.32, 1.28)'},
-  ],
-];
+export const Presets: Array<Array<{
+  name: string,
+  value: string,
+}>> =
+    [
+      [
+        {name: 'linear', value: 'linear'},
+        {
+          name: 'elastic',
+          value:
+              'linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%)',
+        },
+        {
+          name: 'bounce',
+          value:
+              'linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%)',
+        },
+        {
+          name: 'emphasized',
+          value:
+              'linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%)',
+        },
+      ],
+      [
+        {name: 'ease-in-out', value: 'ease-in-out'},
+        {name: 'In Out · Sine', value: 'cubic-bezier(0.45, 0.05, 0.55, 0.95)'},
+        {name: 'In Out · Quadratic', value: 'cubic-bezier(0.46, 0.03, 0.52, 0.96)'},
+        {name: 'In Out · Cubic', value: 'cubic-bezier(0.65, 0.05, 0.36, 1)'},
+        {name: 'Fast Out, Slow In', value: 'cubic-bezier(0.4, 0, 0.2, 1)'},
+        {name: 'In Out · Back', value: 'cubic-bezier(0.68, -0.55, 0.27, 1.55)'},
+      ],
+      [
+        {name: 'Fast Out, Linear In', value: 'cubic-bezier(0.4, 0, 1, 1)'},
+        {name: 'ease-in', value: 'ease-in'},
+        {name: 'In · Sine', value: 'cubic-bezier(0.47, 0, 0.75, 0.72)'},
+        {name: 'In · Quadratic', value: 'cubic-bezier(0.55, 0.09, 0.68, 0.53)'},
+        {name: 'In · Cubic', value: 'cubic-bezier(0.55, 0.06, 0.68, 0.19)'},
+        {name: 'In · Back', value: 'cubic-bezier(0.6, -0.28, 0.74, 0.05)'},
+      ],
+      [
+        {name: 'ease-out', value: 'ease-out'},
+        {name: 'Out · Sine', value: 'cubic-bezier(0.39, 0.58, 0.57, 1)'},
+        {name: 'Out · Quadratic', value: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'},
+        {name: 'Out · Cubic', value: 'cubic-bezier(0.22, 0.61, 0.36, 1)'},
+        {name: 'Linear Out, Slow In', value: 'cubic-bezier(0, 0, 0.2, 1)'},
+        {name: 'Out · Back', value: 'cubic-bezier(0.18, 0.89, 0.32, 1.28)'},
+      ],
+    ];
 export interface PresetCategory {
   presets: Array<{
     name: string,

package/front_end/ui/legacy/components/inline_editor/CSSAngleUtils.ts

@@ -6,7 +6,7 @@ import * as Platform from '../../../../core/platform/platform.js';
 import * as Geometry from '../../../../models/geometry/geometry.js';
 import * as UI from '../../legacy.js';
 
-export const CSSAngleRegex = /(?<value>[+-]?\d*\.?\d+)(?<unit>deg|grad|rad|turn)/;
+const CSSAngleRegex = /(?<value>[+-]?\d*\.?\d+)(?<unit>deg|grad|rad|turn)/;
 
 export const enum AngleUnit {
   DEG = 'deg',

package/front_end/ui/legacy/components/inline_editor/CSSShadowEditor.ts

@@ -92,8 +92,12 @@ export class CSSLength {
   }
 }
 
-export class CSSShadowEditor extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
-    UI.Widget.VBox) {
+const CSSShadowEditorBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class CSSShadowEditor extends CSSShadowEditorBase {
   private readonly typeField: HTMLElement;
   private readonly outsetButton: HTMLElement;
   private readonly insetButton: HTMLElement;