chrome-devtools-frontend 1.0.1689415 → 1.0.1690116

package/front_end/models/trace/insights/Cache.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import type * as Platform from '../../../core/platform/platform.js';
 import * as Protocol from '../../../generated/protocol.js';
 import type * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
@@ -49,8 +48,7 @@ export const UIStrings = {
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/Cache.ts', UIStrings);
-export const i18nString: (id: string, values?: Record<string, string|number|boolean>) =>
-    Platform.UIString.LocalizedString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export type CacheInsightModel = InsightModel<typeof UIStrings, {
   requests: Array<{

package/front_end/models/trace/insights/CharacterSet.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import type * as Platform from '../../../core/platform/platform.js';
 import type * as Handlers from '../handlers/handlers.js';
 import type * as Types from '../types/types.js';
 
@@ -54,8 +53,7 @@ export const UIStrings = {
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/CharacterSet.ts', UIStrings);
-export const i18nString: (id: string, values?: Record<string, string|number|boolean>) =>
-    Platform.UIString.LocalizedString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const CHARSET_HTTP_REGEX = /charset\s*=\s*[a-zA-Z0-9\-_:.()]{2,}/i;
 

package/front_end/models/trace/insights/DOMSize.ts

@@ -4,7 +4,6 @@
 
 import type * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
-import type * as Platform from '../../../core/platform/platform.js';
 import * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
@@ -73,8 +72,7 @@ export const UIStrings = {
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/DOMSize.ts', UIStrings);
-export const i18nString: (id: string, values?: Record<string, string|number|boolean>) =>
-    Platform.UIString.LocalizedString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const DOM_SIZE_DURATION_THRESHOLD = Helpers.Timing.milliToMicro(Types.Timing.Milli(40));
 

package/front_end/models/trace/insights/DocumentLatency.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import type * as Platform from '../../../core/platform/platform.js';
 import type * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
@@ -72,8 +71,7 @@ export const UIStrings = {
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/DocumentLatency.ts', UIStrings);
-export const i18nString: (id: string, values?: Record<string, string|number|boolean>) =>
-    Platform.UIString.LocalizedString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 // Due to the way that DevTools throttling works we cannot see if server response took less than ~570ms.
 // We set our failure threshold to 600ms to avoid those false positives but we want devs to shoot for 100ms.

package/front_end/models/trace/insights/DuplicatedJavaScript.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import type * as Platform from '../../../core/platform/platform.js';
 import * as Extras from '../extras/extras.js';
 import type * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
@@ -43,8 +42,7 @@ export const UIStrings = {
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/DuplicatedJavaScript.ts', UIStrings);
-export const i18nString: (id: string, values?: Record<string, string|number|boolean>) =>
-    Platform.UIString.LocalizedString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export type DuplicatedJavaScriptInsightModel = InsightModel<typeof UIStrings, {
   duplication: Extras.ScriptDuplication.ScriptDuplication,

package/front_end/models/trace/insights/FontDisplay.ts

@@ -41,8 +41,7 @@ export const UIStrings = {
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/FontDisplay.ts', UIStrings);
-export const i18nString: (id: string, values?: Record<string, string|number|boolean>) =>
-    Platform.UIString.LocalizedString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface RemoteFont {
   name?: string;

package/front_end/models/trace/insights/ForcedReflow.ts

@@ -51,8 +51,7 @@ export const UIStrings = {
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/ForcedReflow.ts', UIStrings);
-export const i18nString: (id: string, values?: Record<string, string|number|boolean>) =>
-    Platform.UIString.LocalizedString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export type ForcedReflowInsightModel = InsightModel<typeof UIStrings, {
   topLevelFunctionCallData: ForcedReflowAggregatedData | undefined,

package/front_end/models/trace/insights/INPBreakdown.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import type * as Platform from '../../../core/platform/platform.js';
 import * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
 import type * as Types from '../types/types.js';
@@ -55,8 +54,7 @@ export const UIStrings = {
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/INPBreakdown.ts', UIStrings);
-export const i18nString: (id: string, values?: Record<string, string|number|boolean>) =>
-    Platform.UIString.LocalizedString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export type INPBreakdownInsightModel = InsightModel<typeof UIStrings, {
   longestInteractionEvent?: Types.Events.SyntheticInteractionPair,

package/front_end/models/trace/insights/ImageDelivery.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import type * as Platform from '../../../core/platform/platform.js';
 import type * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
 import type * as Types from '../types/types.js';
@@ -69,8 +68,7 @@ export const UIStrings = {
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/ImageDelivery.ts', UIStrings);
-export const i18nString: (id: string, values?: Record<string, string|number|boolean>) =>
-    Platform.UIString.LocalizedString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 /**
  * Even JPEGs with lots of detail can usually be compressed down to <1 byte per pixel

package/front_end/models/trace/insights/LCPBreakdown.ts

@@ -4,7 +4,6 @@
 
 import type * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
-import type * as Platform from '../../../core/platform/platform.js';
 import * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
@@ -64,8 +63,7 @@ export const UIStrings = {
   noLcp: 'No LCP detected',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/LCPBreakdown.ts', UIStrings);
-export const i18nString: (id: string, values?: Record<string, string|number|boolean>) =>
-    Platform.UIString.LocalizedString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 /** A TraceWindow plus its UIString. **/
 export type Subpart = Types.Timing.TraceWindowMicro&{label: Common.UIString.LocalizedString};

package/front_end/models/trace/insights/LCPDiscovery.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import type * as Platform from '../../../core/platform/platform.js';
 import * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
@@ -65,8 +64,7 @@ export const UIStrings = {
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/LCPDiscovery.ts', UIStrings);
-export const i18nString: (id: string, values?: Record<string, string|number|boolean>) =>
-    Platform.UIString.LocalizedString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export function isLCPDiscoveryInsight(model: InsightModel): model is LCPDiscoveryInsightModel {
   return model.insightKey === 'LCPDiscovery';

package/front_end/models/trace/insights/LegacyJavaScript.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import type * as Platform from '../../../core/platform/platform.js';
 import * as LegacyJavaScriptLib from '../../../third_party/legacy-javascript/legacy-javascript.js';
 import type * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
@@ -45,8 +44,7 @@ export const UIStrings = {
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/LegacyJavaScript.ts', UIStrings);
-export const i18nString: (id: string, values?: Record<string, string|number|boolean>) =>
-    Platform.UIString.LocalizedString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface PatternMatchResult {
   name: string;

package/front_end/models/trace/insights/ModernHTTP.ts

@@ -44,8 +44,7 @@ export const UIStrings = {
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/ModernHTTP.ts', UIStrings);
-export const i18nString: (id: string, values?: Record<string, string|number|boolean>) =>
-    Platform.UIString.LocalizedString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export type ModernHTTPInsightModel = InsightModel<typeof UIStrings, {
   http1Requests: Types.Events.SyntheticNetworkRequest[],

package/front_end/models/trace/insights/NetworkDependencyTree.ts

@@ -108,8 +108,7 @@ export const UIStrings = {
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/NetworkDependencyTree.ts', UIStrings);
-export const i18nString: (id: string, values?: Record<string, string|number|boolean>) =>
-    Platform.UIString.LocalizedString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 // XHRs are fetched at High priority, but we exclude them, as they are unlikely to be critical
 // Images are also non-critical.

package/front_end/models/trace/insights/RenderBlocking.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import type * as Platform from '../../../core/platform/platform.js';
 import * as Protocol from '../../../generated/protocol.js';
 import * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
@@ -46,8 +45,7 @@ export const UIStrings = {
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/RenderBlocking.ts', UIStrings);
-export const i18nString: (id: string, values?: Record<string, string|number|boolean>) =>
-    Platform.UIString.LocalizedString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export function isRenderBlockingInsight(insight: InsightModel): insight is RenderBlockingInsightModel {
   return insight.insightKey === 'RenderBlocking';

package/front_end/models/trace/insights/SlowCSSSelector.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import type * as Platform from '../../../core/platform/platform.js';
 import type * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
@@ -63,8 +62,7 @@ export const UIStrings = {
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/SlowCSSSelector.ts', UIStrings);
-export const i18nString: (id: string, values?: Record<string, string|number|boolean>) =>
-    Platform.UIString.LocalizedString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const slowCSSSelectorThreshold = 500;  // 500us threshold for slow selectors
 
 export type SlowCSSSelectorInsightModel = InsightModel<typeof UIStrings, {

package/front_end/models/trace/insights/ThirdParties.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import type * as Platform from '../../../core/platform/platform.js';
 import * as ThirdPartyWeb from '../../../third_party/third-party-web/third-party-web.js';
 import * as Extras from '../extras/extras.js';
 import * as Handlers from '../handlers/handlers.js';
@@ -47,8 +46,7 @@ export const UIStrings = {
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/ThirdParties.ts', UIStrings);
-export const i18nString: (id: string, values?: Record<string, string|number|boolean>) =>
-    Platform.UIString.LocalizedString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export type ThirdPartiesInsightModel = InsightModel<typeof UIStrings, {
   /** The entity for this navigation's URL. Any other entity is from a third party. */

package/front_end/models/trace/insights/Viewport.ts

@@ -34,8 +34,7 @@ export const UIStrings = {
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/Viewport.ts', UIStrings);
-export const i18nString: (id: string, values?: Record<string, string|number|boolean>) =>
-    Platform.UIString.LocalizedString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export type ViewportInsightModel = InsightModel<typeof UIStrings, {
   mobileOptimized: boolean | null,

package/front_end/panels/accessibility/ARIAAttributesView.ts

@@ -108,7 +108,7 @@ export class ARIAAttributesPane extends AccessibilitySubPane<ShadowRoot> {
   readonly #view: View;
   #attributeBeingEdited: SDK.DOMModel.Attribute|null = null;
 
-  constructor(view = DEFAULT_VIEW) {
+  constructor(view: View = DEFAULT_VIEW) {
     super({
       title: i18nString(UIStrings.ariaAttributes),
       viewId: 'aria-attributes',

package/front_end/panels/accessibility/AccessibilityAnnouncementRecordingView.ts

@@ -421,10 +421,10 @@ export function teardownScript(): void {
   }
 }
 
-export const INJECTED_SCRIPT_SOURCE = `(${injectedScript.toString()})(${JSON.stringify(AnnouncementApi.ARIA_LIVE)}, ${
-    JSON.stringify(AnnouncementApi.JS_TRIGGERED)});`;
+export const INJECTED_SCRIPT_SOURCE: string = `(${injectedScript.toString()})(${
+    JSON.stringify(AnnouncementApi.ARIA_LIVE)}, ${JSON.stringify(AnnouncementApi.JS_TRIGGERED)});`;
 
-export const TEARDOWN_SCRIPT_SOURCE = `(${teardownScript.toString()})();`;
+export const TEARDOWN_SCRIPT_SOURCE: string = `(${teardownScript.toString()})();`;
 
 export function checkForBlockedPayload(payload: unknown): string|null {
   if (typeof payload !== 'string') {

package/front_end/panels/accessibility/AccessibilityNodeView.ts

@@ -280,7 +280,6 @@ export class AXNodePropertyTreeElement extends UI.TreeOutline.TreeElement {
   appendNameElement(name: string): void {
     const nameElement = document.createElement('span');
     if (name in AXAttributes) {
-      // @ts-expect-error TS can't cast name here but we checked it's valid.
       const attribute = AXAttributes[name];
       nameElement.textContent = attribute.name();
       UI.Tooltip.Tooltip.install(nameElement, attribute.description());
@@ -361,7 +360,7 @@ export const TypeStyles: Record<string, string> = {
   valueUndefined: 'ax-value-undefined',
 };
 
-export const StringProperties = new Set<Protocol.Accessibility.AXValueType>([
+export const StringProperties: Set<Protocol.Accessibility.AXValueType> = new Set<Protocol.Accessibility.AXValueType>([
   Protocol.Accessibility.AXValueType.String,
   Protocol.Accessibility.AXValueType.ComputedString,
   Protocol.Accessibility.AXValueType.IdrefList,

package/front_end/panels/accessibility/AccessibilityStrings.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as Protocol from '../../generated/protocol.js';
 const UIStrings = {
   /**
    * @description Text to indicate something is not enabled.
@@ -468,7 +469,8 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/accessibility/AccessibilityStrings.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
-export const AXAttributes = {
+export const AXAttributes: Record<
+    string, {name: i18n.LazyLocalizeString, description: i18n.LazyLocalizeString, group?: string}> = {
   disabled: {
     name: i18nLazyString(UIStrings.disabled),
     description: i18nLazyString(UIStrings.ifTrueThisElementCurrentlyCannot),
@@ -648,7 +650,8 @@ export const AXAttributes = {
   },
 };
 
-export const AXSourceTypes = {
+export const AXSourceTypes: Record<Protocol.Accessibility.AXValueSourceType,
+                                   {name: i18n.LazyLocalizeString, description: i18n.LazyLocalizeString}> = {
   attribute: {name: i18nLazyString(UIStrings.fromAttribute), description: i18nLazyString(UIStrings.valueFromAttribute)},
   implicit: {
     name: i18nLazyString(UIStrings.implicit),
@@ -664,7 +667,8 @@ export const AXSourceTypes = {
       {name: i18nLazyString(UIStrings.relatedElement), description: i18nLazyString(UIStrings.valueFromRelatedElement)},
 };
 
-export const AXNativeSourceTypes = {
+export const AXNativeSourceTypes: Record<Protocol.Accessibility.AXValueNativeSourceType,
+                                         {name: i18n.LazyLocalizeString, description: i18n.LazyLocalizeString}> = {
   description: {
     name: i18nLazyString(UIStrings.fromDescription),
     description: i18nLazyString(UIStrings.valueFromDescriptionElement),

package/front_end/panels/ai_assistance/components/AIv2MarkdownRenderer.ts

@@ -45,8 +45,8 @@ export class AIv2MarkdownRenderer extends MarkdownView.MarkdownView.MarkdownInsi
     if (!this.options.mainDocumentURL) {
       return true;
     }
-    const nodeDocumentURL = node.ownerDocument?.documentURL ?? '' as Platform.DevToolsPath.UrlString;
-    return AiAssistanceModel.AiUtils.isSameOrigin(this.options.mainDocumentURL, nodeDocumentURL);
+    return SDK.SecurityOrigin.SecurityOrigin.create(this.options.mainDocumentURL)
+        .isSameOriginWith(node.securityOrigin());
   }
 
   #revealableLink(revealable: unknown, label: string): Lit.LitTemplate {

package/front_end/panels/ai_assistance/components/AccessibilityAgentMarkdownRenderer.ts

@@ -5,7 +5,6 @@
 import type * as Platform from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
-import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import type * as Marked from '../../../third_party/marked/marked.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as PanelsCommon from '../../common/common.js';
@@ -35,8 +34,7 @@ export class AccessibilityAgentMarkdownRenderer extends MarkdownRendererWithCode
   }
 
   #isSameOrigin(node: SDK.DOMModel.DOMNode): boolean {
-    const nodeDocumentURL = node.ownerDocument?.documentURL ?? '' as Platform.DevToolsPath.UrlString;
-    return AiAssistanceModel.AiUtils.isSameOrigin(this.mainDocumentURL, nodeDocumentURL);
+    return SDK.SecurityOrigin.SecurityOrigin.create(this.mainDocumentURL).isSameOriginWith(node.securityOrigin());
   }
 
   override templateForToken(token: Marked.Marked.MarkedToken): Lit.LitTemplate|null {

package/front_end/panels/animation/AnimationGroupPreviewUI.ts

@@ -160,7 +160,7 @@ export class AnimationGroupPreviewUI extends UI.Widget.Widget {
   #paused = false;
   #focusable = false;
 
-  constructor(config: AnimationGroupPreviewConfig, view = DEFAULT_VIEW) {
+  constructor(config: AnimationGroupPreviewConfig, view: View = DEFAULT_VIEW) {
     super();
     this.#view = view;
     this.#config = config;

package/front_end/panels/animation/AnimationTimeline.ts

@@ -1181,7 +1181,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements
   }
 }
 
-export const GlobalPlaybackRates = [1, 0.25, 0.1];
+export const GlobalPlaybackRates: number[] = [1, 0.25, 0.1];
 
 const enum ControlState {
   PLAY = 'play-outline',

package/front_end/panels/animation/AnimationUI.ts

@@ -501,7 +501,7 @@ export const Options = {
   GridCanvasHeight: 40,
 };
 
-export const Colors = new Map<string, Common.Color.Color|null>([
+export const Colors: Map<string, Common.Color.Color|null> = new Map<string, Common.Color.Color|null>([
   ['Purple', Common.Color.parse('#9C27B0')],
   ['Light Blue', Common.Color.parse('#03A9F4')],
   ['Deep Orange', Common.Color.parse('#FF5722')],

package/front_end/panels/application/AppManifestView.ts

@@ -1116,8 +1116,12 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
   // clang-format on
 };
 
-export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
-    implements SDK.TargetManager.Observer {
+const AppManifestViewBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class AppManifestView extends AppManifestViewBase implements SDK.TargetManager.Observer {
   private registeredListeners: Common.EventTarget.EventDescriptor[];
   private target?: SDK.Target.Target;
   private resourceTreeModel?: SDK.ResourceTreeModel.ResourceTreeModel|null;

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -381,10 +381,8 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.applicationTreeElement.appendChild(this.serviceWorkersTreeElement);
     this.storageTreeElement = new StorageTreeElement(panel);
     this.applicationTreeElement.appendChild(this.storageTreeElement);
-    if (Root.Runtime.hostConfig.devToolsWebMCPSupport?.enabled) {
-      this.webMcpTreeElement = new WebMCPTreeElement(panel);
-      this.applicationTreeElement.appendChild(this.webMcpTreeElement);
-    }
+    this.webMcpTreeElement = new WebMCPTreeElement(panel);
+    this.applicationTreeElement.appendChild(this.webMcpTreeElement);
 
     if (Root.Runtime.hostConfig.devToolsAdsPanel?.enabled) {
       const adsTreeElement = new ApplicationPanelTreeElement(panel, i18nString(UIStrings.ads), false, 'ads');

package/front_end/panels/application/BounceTrackingMitigationsTreeElement.ts

@@ -18,7 +18,7 @@ const UIStrings = {
   bounceTrackingMitigations: 'Bounce tracking mitigations',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/BounceTrackingMitigationsTreeElement.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class BounceTrackingMitigationsTreeElement extends ApplicationPanelTreeElement {
   private view?: ApplicationComponents.BounceTrackingMitigationsView.BounceTrackingMitigationsView;

package/front_end/panels/application/FrameDetailsView.ts

@@ -846,7 +846,7 @@ export class FrameDetailsReportView extends UI.Widget.Widget {
   #adScriptAncestry: Protocol.Network.AdAncestry|null = null;
   #view: View;
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
     this.#protocolMonitorExperimentEnabled =
         Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.PROTOCOL_MONITOR);

package/front_end/panels/application/IndexedDBViews.ts

@@ -450,7 +450,7 @@ export class IDBDataView extends UI.View.SimpleView {
   readonly #view: IDBDataViewView;
 
   constructor(model: IndexedDBModel, databaseId: DatabaseId, objectStore: ObjectStore, index: Index|null,
-              refreshObjectStoreCallback: () => void, view = IDB_DATA_VIEW_DEFAULT_VIEW) {
+              refreshObjectStoreCallback: () => void, view: IDBDataViewView = IDB_DATA_VIEW_DEFAULT_VIEW) {
     super({
       title: i18nString(UIStrings.idb),
       viewId: 'idb',
@@ -704,7 +704,8 @@ export class ObjectPropertiesSectionWidget extends UI.Widget.Widget {
   #objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree|null = null;
   readonly #view: ObjectPropertiesSectionWidgetView;
 
-  constructor(element?: HTMLElement, view = OBJECT_PROPERTIES_SECTION_WIDGET_DEFAULT_VIEW) {
+  constructor(element?: HTMLElement,
+              view: ObjectPropertiesSectionWidgetView = OBJECT_PROPERTIES_SECTION_WIDGET_DEFAULT_VIEW) {
     super(element);
     this.#view = view;
   }

package/front_end/panels/application/ReportingApiTreeElement.ts

@@ -23,7 +23,7 @@ const UIStrings = {
   crashReportContext: 'Crash Report Context',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/ReportingApiTreeElement.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class ReportingApiTreeElement extends ApplicationPanelTreeElement {
   private view?: ReportingApiView;

package/front_end/panels/application/ReportingApiView.ts

@@ -42,7 +42,7 @@ const UIStrings = {
   clickToDisplayBody: 'Click on any report to display its body',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/ReportingApiView.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const REPORTING_API_EXPLANATION_URL =
     'https://developer.chrome.com/docs/capabilities/web-apis/reporting-api' as Platform.DevToolsPath.UrlString;
@@ -117,7 +117,7 @@ export class ReportingApiView extends UI.Widget.VBox implements
   #reports: Protocol.Network.ReportingApiReport[] = [];
   #focusedReport?: Protocol.Network.ReportingApiReport;
 
-  constructor(view = DEFAULT_VIEW) {
+  constructor(view: (input: ViewInput, output: undefined, target: HTMLElement) => void = DEFAULT_VIEW) {
     super();
     this.#view = view;
     this.#endpoints = new Map();

package/front_end/panels/application/ServiceWorkerUpdateCycleView.ts

@@ -120,7 +120,7 @@ export class ServiceWorkerUpdateCycleView extends UI.Widget.Widget {
   private expandedRows = new Set<string>();
   #view: View;
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
     this.#view = view;
     this.rows = [];

package/front_end/panels/application/ServiceWorkersView.ts

@@ -768,7 +768,7 @@ export class Section extends UI.Widget.VBox {
   private readonly throttler: Common.Throttler.Throttler;
   #view: SectionView;
 
-  constructor(element: HTMLElement, view = DEFAULT_SECTION_VIEW) {
+  constructor(element: HTMLElement, view: SectionView = DEFAULT_SECTION_VIEW) {
     super(element);
     this.fingerprint = null;
     this.clientInfoCache = new Map();

package/front_end/panels/application/StorageBucketsTreeElement.ts

@@ -40,7 +40,7 @@ const UIStrings = {
       'On this page you can view and delete storage buckets, and their associated `Storage APIs`.',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/StorageBucketsTreeElement.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class StorageBucketsTreeParentElement extends ExpandableApplicationPanelTreeElement {
   private bucketTreeElements = new Set<StorageBucketsTreeElement>();

package/front_end/panels/application/StorageItemsToolbar.ts

@@ -95,8 +95,12 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: object, target: HTMLElem
 
 export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
-export class StorageItemsToolbar extends
-    Common.ObjectWrapper.eventMixin<StorageItemsToolbar.EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox) {
+const StorageItemsToolbarBase: Common.ObjectWrapper.EventMixin<StorageItemsToolbar.EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class StorageItemsToolbar extends StorageItemsToolbarBase {
   filterRegex: RegExp|null;
   #metadataView: ApplicationComponents.StorageMetadataView.StorageMetadataView|undefined;
   readonly #view: View;

package/front_end/panels/application/StorageView.ts

@@ -151,13 +151,14 @@ const UIStrings = {
   sessionStorage: 'Session storage',
 } as const;
 
-export const storagePieColors = new Map<Protocol.Storage.StorageType, string>([
-  [Protocol.Storage.StorageType.Cache_storage, 'rgb(229, 113, 113)'],   // red
-  [Protocol.Storage.StorageType.Cookies, 'rgb(239, 196, 87)'],          // yellow
-  [Protocol.Storage.StorageType.Indexeddb, 'rgb(155, 127, 230)'],       // purple
-  [Protocol.Storage.StorageType.Local_storage, 'rgb(116, 178, 102)'],   // green
-  [Protocol.Storage.StorageType.Service_workers, 'rgb(255, 167, 36)'],  // orange
-]);
+export const storagePieColors: Map<Protocol.Storage.StorageType, string> =
+    new Map<Protocol.Storage.StorageType, string>([
+      [Protocol.Storage.StorageType.Cache_storage, 'rgb(229, 113, 113)'],   // red
+      [Protocol.Storage.StorageType.Cookies, 'rgb(239, 196, 87)'],          // yellow
+      [Protocol.Storage.StorageType.Indexeddb, 'rgb(155, 127, 230)'],       // purple
+      [Protocol.Storage.StorageType.Local_storage, 'rgb(116, 178, 102)'],   // green
+      [Protocol.Storage.StorageType.Service_workers, 'rgb(255, 167, 36)'],  // orange
+    ]);
 
 const str_ = i18n.i18n.registerUIStrings('panels/application/StorageView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -704,7 +705,7 @@ export class StorageView extends UI.Widget.VBox {
   }
 }
 
-export const AllStorageTypes = [
+export const AllStorageTypes: Protocol.Storage.StorageType[] = [
   Protocol.Storage.StorageType.Cache_storage,
   Protocol.Storage.StorageType.Cookies,
   Protocol.Storage.StorageType.Indexeddb,