chrome-devtools-frontend 1.0.1689415 → 1.0.1690531

package/front_end/panels/application/preloading/components/PreloadingGrid.ts

@@ -37,7 +37,7 @@ const UIStrings = {
   prefetchFallbackReady: 'Prefetch fallback ready',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/preloading/components/PreloadingGrid.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const {render, html, nothing, Directives: {styleMap}} = Lit;
 

package/front_end/panels/application/preloading/components/RuleSetDetailsView.ts

@@ -79,7 +79,8 @@ export class RuleSetDetailsView extends UI.Widget.VBox {
   #ruleSet: RuleSet|null = null;
   #shouldPrettyPrint = true;
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement,
+              view: (input: ViewInput|null, _output: object, target: HTMLElement) => void = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
     this.#view = view;
   }

package/front_end/panels/application/preloading/components/RuleSetGrid.ts

@@ -49,7 +49,7 @@ const UIStrings = {
   buttonRevealPreloadsAssociatedWithRuleSet: 'Reveal speculative loads associated with this rule set',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/preloading/components/RuleSetGrid.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface RuleSetGridData {
   rows: RuleSetGridRow[];
@@ -169,7 +169,12 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
 };
 
 /** Grid component to show SpeculationRules rule sets. **/
-export class RuleSetGrid extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox) {
+const RuleSetGridBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class RuleSetGrid extends RuleSetGridBase {
   readonly #view: View;
   #data: RuleSetGridData|null = null;
 

package/front_end/panels/application/preloading/components/UsedPreloadingView.ts

@@ -425,7 +425,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
 export class UsedPreloadingView extends UI.Widget.VBox {
   readonly #view: View;
 
-  constructor(view = DEFAULT_VIEW) {
+  constructor(view: View = DEFAULT_VIEW) {
     super({useShadowDom: true});
     this.#view = view;
   }

package/front_end/panels/application/serviceWorkerUpdateCycleView.css

@@ -56,6 +56,8 @@
 
   .service-worker-update-timing-bar-clickable:focus-visible {
     background-color: var(--sys-color-state-focus-highlight);
+    outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+    outline-offset: calc(-1 * var(--sys-size-2));
   }
 
   .service-worker-update-timing-bar-clickable[aria-checked="true"]::before {

package/front_end/panels/autofill/AutofillView.ts

@@ -103,7 +103,7 @@ const AUTOFILL_INFO_URL = 'https://goo.gle/devtools-autofill-panel' as Platform.
 const AUTOFILL_FEEDBACK_URL = 'https://crbug.com/329106326' as Platform.DevToolsPath.UrlString;
 
 const str_ = i18n.i18n.registerUIStrings('panels/autofill/AutofillView.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 interface ViewInput {
   autoOpenViewSetting: Common.Settings.Setting<boolean>;
@@ -298,7 +298,7 @@ export class AutofillView extends UI.Widget.VBox {
   #matches: AutofillManager.AutofillManager.Match[] = [];
   #highlightedMatches: AutofillManager.AutofillManager.Match[] = [];
 
-  constructor(autofillManager: AutofillManager.AutofillManager.AutofillManager, view = DEFAULT_VIEW) {
+  constructor(autofillManager: AutofillManager.AutofillManager.AutofillManager, view: View = DEFAULT_VIEW) {
     super({useShadowDom: true});
     this.#autofillManager = autofillManager;
     this.#view = view;

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -262,9 +262,8 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox<S
   #filterText: string|null = null;
   #view: View;
   #selectedItem: SDK.CategorizedBreakpoint.Category|SDK.CategorizedBreakpoint.CategorizedBreakpoint|null = null;
-  constructor(
-      breakpoints: SDK.CategorizedBreakpoint.CategorizedBreakpoint[], jslog: string, viewId: string,
-      view = DEFAULT_VIEW) {
+  constructor(breakpoints: SDK.CategorizedBreakpoint.CategorizedBreakpoint[], jslog: string, viewId: string,
+              view: View = DEFAULT_VIEW) {
     super({useShadowDom: 'pure'});
     this.#view = view;
     this.#jslog = jslog;

package/front_end/panels/browser_debugger/DOMBreakpointsSidebarPane.ts

@@ -216,7 +216,7 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
     }
   }
 
-  constructor(view = DEFAULT_VIEW) {
+  constructor(view: View = DEFAULT_VIEW) {
     super({useShadowDom: true});
 
     this.#view = view;

package/front_end/panels/changes/ChangesSidebar.ts

@@ -63,27 +63,39 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       target, {container: {attributes: {jslog: `${VisualLogging.pane('sidebar').track({resize: true})}`}}});
 };
 
-export class ChangesSidebar extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
-    UI.Widget.Widget) {
+const ChangesSidebarBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.Widget> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.Widget,
+    );
+
+export class ChangesSidebar extends ChangesSidebarBase {
   #workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl|null = null;
   readonly #view: View;
   readonly #sourceCodes = new Set<Workspace.UISourceCode.UISourceCode>();
   #selectedUISourceCode: Workspace.UISourceCode.UISourceCode|null = null;
-  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(target);
     this.#view = view;
   }
 
-  set workspaceDiff(workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl) {
+  set workspaceDiff(
+      workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl,
+  ) {
     if (this.#workspaceDiff) {
       this.#workspaceDiff.modifiedUISourceCodes().forEach(this.#removeUISourceCode.bind(this));
       this.#workspaceDiff.removeEventListener(
-          WorkspaceDiff.WorkspaceDiff.Events.MODIFIED_STATUS_CHANGED, this.uiSourceCodeModifiedStatusChanged, this);
+          WorkspaceDiff.WorkspaceDiff.Events.MODIFIED_STATUS_CHANGED,
+          this.uiSourceCodeModifiedStatusChanged,
+          this,
+      );
     }
     this.#workspaceDiff = workspaceDiff;
     this.#workspaceDiff.modifiedUISourceCodes().forEach(this.#addUISourceCode.bind(this));
     this.#workspaceDiff.addEventListener(
-        WorkspaceDiff.WorkspaceDiff.Events.MODIFIED_STATUS_CHANGED, this.uiSourceCodeModifiedStatusChanged, this);
+        WorkspaceDiff.WorkspaceDiff.Events.MODIFIED_STATUS_CHANGED,
+        this.uiSourceCodeModifiedStatusChanged,
+        this,
+    );
     this.requestUpdate();
   }
 
@@ -100,7 +112,9 @@ export class ChangesSidebar extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.#view(input, {}, this.contentElement);
   }
 
-  #selectionChanged(selectedUISourceCode: Workspace.UISourceCode.UISourceCode|null): void {
+  #selectionChanged(
+      selectedUISourceCode: Workspace.UISourceCode.UISourceCode|null,
+      ): void {
     this.#selectedUISourceCode = selectedUISourceCode;
     this.dispatchEventToListeners(Events.SELECTED_UI_SOURCE_CODE_CHANGED);
     this.requestUpdate();
@@ -108,16 +122,40 @@ export class ChangesSidebar extends Common.ObjectWrapper.eventMixin<EventTypes,
 
   #addUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
     this.#sourceCodes.add(uiSourceCode);
-    uiSourceCode.addEventListener(Workspace.UISourceCode.Events.TitleChanged, this.requestUpdate, this);
-    uiSourceCode.addEventListener(Workspace.UISourceCode.Events.WorkingCopyChanged, this.requestUpdate, this);
-    uiSourceCode.addEventListener(Workspace.UISourceCode.Events.WorkingCopyCommitted, this.requestUpdate, this);
+    uiSourceCode.addEventListener(
+        Workspace.UISourceCode.Events.TitleChanged,
+        this.requestUpdate,
+        this,
+    );
+    uiSourceCode.addEventListener(
+        Workspace.UISourceCode.Events.WorkingCopyChanged,
+        this.requestUpdate,
+        this,
+    );
+    uiSourceCode.addEventListener(
+        Workspace.UISourceCode.Events.WorkingCopyCommitted,
+        this.requestUpdate,
+        this,
+    );
     this.requestUpdate();
   }
 
   #removeUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
-    uiSourceCode.removeEventListener(Workspace.UISourceCode.Events.TitleChanged, this.requestUpdate, this);
-    uiSourceCode.removeEventListener(Workspace.UISourceCode.Events.WorkingCopyChanged, this.requestUpdate, this);
-    uiSourceCode.removeEventListener(Workspace.UISourceCode.Events.WorkingCopyCommitted, this.requestUpdate, this);
+    uiSourceCode.removeEventListener(
+        Workspace.UISourceCode.Events.TitleChanged,
+        this.requestUpdate,
+        this,
+    );
+    uiSourceCode.removeEventListener(
+        Workspace.UISourceCode.Events.WorkingCopyChanged,
+        this.requestUpdate,
+        this,
+    );
+    uiSourceCode.removeEventListener(
+        Workspace.UISourceCode.Events.WorkingCopyCommitted,
+        this.requestUpdate,
+        this,
+    );
     if (uiSourceCode === this.#selectedUISourceCode) {
       let newSelection;
       for (const sourceCode of this.#sourceCodes.values()) {
@@ -127,7 +165,9 @@ export class ChangesSidebar extends Common.ObjectWrapper.eventMixin<EventTypes,
         newSelection = sourceCode;
       }
       this.#sourceCodes.delete(uiSourceCode);
-      this.#selectionChanged(newSelection ?? this.#sourceCodes.values().next().value ?? null);
+      this.#selectionChanged(
+          newSelection ?? this.#sourceCodes.values().next().value ?? null,
+      );
     } else {
       this.#sourceCodes.delete(uiSourceCode);
     }
@@ -135,7 +175,8 @@ export class ChangesSidebar extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   private uiSourceCodeModifiedStatusChanged(
-      event: Common.EventTarget.EventTargetEvent<WorkspaceDiff.WorkspaceDiff.ModifiedStatusChangedEvent>): void {
+      event: Common.EventTarget.EventTargetEvent<WorkspaceDiff.WorkspaceDiff.ModifiedStatusChangedEvent>,
+      ): void {
     const {isModified, uiSourceCode} = event.data;
     if (isModified) {
       this.#addUISourceCode(uiSourceCode);

package/front_end/panels/changes/ChangesView.ts

@@ -77,7 +77,7 @@ export class ChangesView extends UI.Widget.VBox<ShadowRoot> {
   #selectedUISourceCode: Workspace.UISourceCode.UISourceCode|null = null;
   readonly #view: View;
 
-  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(target, {useShadowDom: 'pure'});
 
     this.#workspaceDiff = WorkspaceDiff.WorkspaceDiff.workspaceDiff();

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/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/ConsolePrompt.ts

@@ -44,8 +44,12 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/console/ConsolePrompt.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
-    UI.Widget.Widget) {
+const ConsolePromptBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.Widget> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.Widget,
+    );
+
+export class ConsolePrompt extends ConsolePromptBase {
   private addCompletionsFromHistory: boolean;
   #history: TextEditor.AutocompleteHistory.AutocompleteHistory;
   private initialText: string;

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;
@@ -171,8 +175,12 @@ const CONSOLE_API_PARSED_FILTERS = [{
   regex: undefined,
 }];
 
-export class ConsoleSidebar extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox<ShadowRoot>>(
-    UI.Widget.VBox) {
+const ConsoleSidebarBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox<ShadowRoot>> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class ConsoleSidebar extends ConsoleSidebarBase {
   #view: View;
   readonly #groups = [
     new ConsoleFilterGroup(GroupName.ALL, [], ConsoleFilter.allLevelsFilterValue()),
@@ -186,7 +194,7 @@ export class ConsoleSidebar extends Common.ObjectWrapper.eventMixin<EventTypes,
       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/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/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;
@@ -1187,6 +1188,18 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
   #updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null = null;
 
+  get updateRecord(): Elements.ElementUpdateRecord.ElementUpdateRecord|null {
+    return this.#updateRecord;
+  }
+
+  set updateRecord(updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null) {
+    if (this.#updateRecord === updateRecord) {
+      return;
+    }
+    this.#updateRecord = updateRecord;
+    this.requestUpdate();
+  }
+
   get node(): SDK.DOMModel.DOMNode {
     return this.#node;
   }
@@ -3191,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,