chrome-devtools-frontend 1.0.1690116 → 1.0.1690531

package/.gitmodules

@@ -1,3 +1,7 @@
+[submodule "test/ai_evals/eval_data"]
+	path = test/ai_evals/eval_data
+	url = https://chrome-internal.googlesource.com/devtools/chrome-devtools-evals
+	gclient-condition = checkout_ai_evals == True
 [submodule "third_party/clang-format/script"]
 	path = third_party/clang-format/script
 	url = https://chromium.googlesource.com/external/github.com/llvm/llvm-project/clang/tools/clang-format

package/front_end/core/root/Runtime.ts

@@ -515,6 +515,7 @@ interface UseGcaApi {
 
 interface DevToolsAiV2Architecture {
   enabled: boolean;
+  userTier?: string;
 }
 
 interface DevToolsProtocolMonitor {

package/front_end/core/sdk/NetworkRequest.ts

@@ -16,6 +16,7 @@ import {
   Events as NetworkManagerEvents,
   NetworkManager,
 } from './NetworkManager.js';
+import {SecurityOrigin} from './SecurityOrigin.js';
 import {ServerSentEvents} from './ServerSentEvents.js';
 import {ServerTiming} from './ServerTiming.js';
 import {Type} from './Target.js';
@@ -388,6 +389,55 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
     return this.#backendRequestId;
   }
 
+  /**
+   * Returns the security origin of the target resource URL (`request.url()`) for this network request.
+   *
+   * For example, if an inspected document at `https://example.com/index.html` initiates a fetch
+   * to `https://api.github.com/users`, `requestURLSecurityOrigin()` returns the origin for
+   * `https://api.github.com`.
+   *
+   * For imported HAR files, the origin is mapped to an isolated virtual domain
+   * (`imported-har://${authority}`) to ensure recorded network traffic never collides with
+   * live web origins.
+   *
+   * @see {@link initiatorSecurityOrigin} to obtain the origin of the document that initiated the request.
+   */
+  requestURLSecurityOrigin(): SecurityOrigin {
+    return this.#resolveSecurityOrigin(this.#url);
+  }
+
+  /**
+   * Returns the security origin of the document or context (`request.documentURL`) that initiated
+   * this network request.
+   *
+   * For example, if an inspected document at `https://example.com/index.html` initiates a fetch
+   * to `https://api.github.com/users`, `initiatorSecurityOrigin()` returns the origin for
+   * `https://example.com`.
+   *
+   * If `documentURL` is empty, invalid, or an opaque context (such as a `data:` URL or sandboxed
+   * iframe), this returns a unique opaque `SecurityOrigin`.
+   *
+   * For imported HAR files, the origin is mapped to an isolated virtual domain
+   * (`imported-har://${authority}`) matching the imported initiating document.
+   *
+   * @see {@link requestURLSecurityOrigin} to obtain the origin of the target resource URL being requested.
+   */
+  initiatorSecurityOrigin(): SecurityOrigin {
+    return this.#resolveSecurityOrigin(this.#documentURL);
+  }
+
+  #resolveSecurityOrigin(url: Platform.DevToolsPath.UrlString): SecurityOrigin {
+    if (this.#isImportedHar) {
+      const parsed = Common.ParsedURL.ParsedURL.fromString(url);
+      if (!parsed || !parsed.host) {
+        return SecurityOrigin.createUniqueOpaque();
+      }
+      const authority = parsed.host + (parsed.port ? ':' + parsed.port : '');
+      return SecurityOrigin.create(`imported-har://${authority}`);
+    }
+    return SecurityOrigin.create(url);
+  }
+
   url(): Platform.DevToolsPath.UrlString {
     return this.#url;
   }
@@ -486,10 +536,6 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
     return this.#securityDetails;
   }
 
-  securityOrigin(): string {
-    return this.#parsedURL.securityOrigin();
-  }
-
   setSecurityDetails(securityDetails: Protocol.Network.SecurityDetails): void {
     this.#securityDetails = securityDetails;
   }

package/front_end/core/sdk/NetworkRequestAccess.ts

@@ -0,0 +1,172 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as NetworkRequest from './NetworkRequest.js';
+import * as SecurityOrigin from './SecurityOrigin.js';
+
+/**
+ * Specifies how a network request's response data (body and headers) can be accessed
+ * relative to the initiating context's security origin.
+ *
+ * DevTools features that inspect network requests (such as AI Assistance) must respect
+ * the browser Same-Origin Policy (SOP) and Cross-Origin Resource Sharing (CORS) rules:
+ * - Same-origin responses are fully readable by the initiating document.
+ * - Cross-origin responses with valid CORS headers (`Access-Control-Allow-Origin`) are readable.
+ * - Opaque cross-origin responses (such as `no-cors` fetches to third-party endpoints) are NOT
+ *   readable by the page and must never have their response bodies or restricted headers exposed
+ *   to unauthorized contexts (b/513821237).
+ */
+export const enum ResponseAccessMode {
+  /** The request target URL is same-origin with the initiator context. */
+  SAME_ORIGIN = 'SAME_ORIGIN',
+  /** The request is cross-origin, but explicit CORS response headers permit access by the initiator. */
+  CORS_ALLOWED = 'CORS_ALLOWED',
+  /** The request is cross-origin without CORS authorization; response body and unexposed headers are restricted. */
+  OPAQUE_CROSS_ORIGIN = 'OPAQUE_CROSS_ORIGIN',
+}
+
+/**
+ * Standard CORS-safelisted response headers that are exposed on cross-origin requests
+ * without requiring explicit `Access-Control-Expose-Headers`.
+ *
+ * @see https://fetch.spec.whatwg.org/#cors-safelisted-response-header-name
+ */
+export const CORS_SAFELISTED_RESPONSE_HEADERS: ReadonlySet<string> = new Set([
+  'cache-control',
+  'content-language',
+  'content-length',
+  'content-type',
+  'expires',
+  'last-modified',
+  'pragma',
+]);
+
+/**
+ * Placeholder text replacing response body content when cross-origin access is forbidden.
+ */
+export const REDACTED_RESPONSE_BODY = '<redacted cross-origin response body>';
+
+/**
+ * Returns whether a network request used credentials (cookies, authorization headers,
+ * or server-indicated credentials mode).
+ *
+ * @param request The network request to inspect.
+ * @returns True if the request included credentials or requires credentialed CORS.
+ * @see https://fetch.spec.whatwg.org/#credentials
+ */
+export function isRequestCredentialed(request: NetworkRequest.NetworkRequest): boolean {
+  const hasAuthHeaders = Boolean(
+      request.requestHeaderValue('authorization') || request.requestHeaderValue('proxy-authorization'),
+  );
+  const hasCookies = request.includedRequestCookies().length > 0 || request.responseCookies.length > 0 ||
+      Boolean(request.requestHeaderValue('cookie')) || Boolean(request.responseHeaderValue('set-cookie'));
+  const hasAllowCredentials =
+      request.responseHeaderValue('access-control-allow-credentials')?.trim().toLowerCase() === 'true';
+
+  return hasAuthHeaders || hasCookies || hasAllowCredentials;
+}
+
+/**
+ * Evaluates the response access mode for a network request relative to an initiator origin.
+ *
+ * Evaluation rules:
+ * 1. If `initiatorOrigin` is omitted, the origin is derived from `request.documentURL`. If
+ *    `documentURL` is invalid or opaque, access mode defaults to `OPAQUE_CROSS_ORIGIN`.
+ * 2. If the initiator origin is opaque (e.g. sandboxed iframe or `data:` URL), returns `OPAQUE_CROSS_ORIGIN`.
+ * 3. If the initiator origin is same-origin with the request URL, returns `SAME_ORIGIN`.
+ * 4. If Chrome's network stack flagged a CORS error (`corsErrorStatus`), returns `OPAQUE_CROSS_ORIGIN`.
+ * 5. If the server provided an `Access-Control-Allow-Origin` header:
+ *    - Wildcard `*` grants `CORS_ALLOWED` only if the request does not include credentials. Under the
+ *      Fetch specification, wildcard `*` is invalid for credentialed requests.
+ *    - An explicit match against the initiator origin grants `CORS_ALLOWED`.
+ * 6. Otherwise, returns `OPAQUE_CROSS_ORIGIN`.
+ *
+ * @param request The network request being inspected.
+ * @param initiatorOrigin The security origin of the initiating context (e.g. page or conversation origin).
+ * @returns The evaluated `ResponseAccessMode`.
+ */
+export function evaluateResponseAccessMode(
+    request: NetworkRequest.NetworkRequest,
+    initiatorOrigin?: SecurityOrigin.SecurityOrigin,
+    ): ResponseAccessMode {
+  const effectiveInitiatorOrigin = initiatorOrigin ?? SecurityOrigin.SecurityOrigin.create(request.documentURL);
+
+  // Opaque initiator contexts (e.g. data: URLs, sandboxed iframes) are never permitted
+  // to inspect cross-origin response content.
+  if (effectiveInitiatorOrigin.isOpaque()) {
+    return ResponseAccessMode.OPAQUE_CROSS_ORIGIN;
+  }
+
+  const resourceOrigin = SecurityOrigin.SecurityOrigin.create(request.url());
+  if (effectiveInitiatorOrigin.isSameOriginWith(resourceOrigin)) {
+    return ResponseAccessMode.SAME_ORIGIN;
+  }
+
+  // If the browser blocked the request with a CORS error, treat the response
+  // as opaque regardless of any Access-Control-Allow-Origin header value.
+  if (request.corsErrorStatus()) {
+    return ResponseAccessMode.OPAQUE_CROSS_ORIGIN;
+  }
+
+  const allowOriginHeader = request.responseHeaderValue('access-control-allow-origin')?.trim();
+  if (!allowOriginHeader) {
+    return ResponseAccessMode.OPAQUE_CROSS_ORIGIN;
+  }
+
+  const isCredentialed = isRequestCredentialed(request);
+
+  // Under the Fetch specification, wildcard '*' is forbidden from exposing responses if credentials are used.
+  if (allowOriginHeader === '*' && !isCredentialed) {
+    return ResponseAccessMode.CORS_ALLOWED;
+  }
+
+  if (allowOriginHeader.toLowerCase() === effectiveInitiatorOrigin.siteId().toLowerCase()) {
+    return ResponseAccessMode.CORS_ALLOWED;
+  }
+
+  return ResponseAccessMode.OPAQUE_CROSS_ORIGIN;
+}
+
+/**
+ * Filters the response headers of a network request based on its access mode.
+ *
+ * - `SAME_ORIGIN`: Returns all response headers.
+ * - `CORS_ALLOWED`: Returns CORS-safelisted headers plus headers exposed via
+ *   `Access-Control-Expose-Headers`.
+ * - `OPAQUE_CROSS_ORIGIN`: Returns only CORS-safelisted response headers. Under the Fetch
+ *   specification, opaque responses do not expose headers configured by `Access-Control-Expose-Headers`.
+ *
+ * @param request The network request whose headers are being filtered.
+ * @param accessMode The evaluated response access mode for this request.
+ * @returns Array of allowed header name/value pairs.
+ */
+export function getFilterableResponseHeaders(
+    request: NetworkRequest.NetworkRequest,
+    accessMode: ResponseAccessMode,
+    ): Array<{name: string, value: string}> {
+  if (accessMode === ResponseAccessMode.SAME_ORIGIN) {
+    return request.responseHeaders;
+  }
+
+  if (accessMode === ResponseAccessMode.OPAQUE_CROSS_ORIGIN) {
+    return request.responseHeaders.filter(header => {
+      const lowerName = header.name.toLowerCase().trim();
+      return CORS_SAFELISTED_RESPONSE_HEADERS.has(lowerName);
+    });
+  }
+
+  // For CORS_ALLOWED requests, parse Access-Control-Expose-Headers.
+  const exposeHeadersValue = request.responseHeaderValue('access-control-expose-headers')?.trim() || '';
+  const exposedSet = new Set(
+      exposeHeadersValue.split(',').map(h => h.trim().toLowerCase()).filter(Boolean),
+  );
+
+  const isCredentialed = isRequestCredentialed(request);
+  const allowWildcardExposure = !isCredentialed && exposedSet.has('*');
+
+  return request.responseHeaders.filter(header => {
+    const lowerName = header.name.toLowerCase().trim();
+    return CORS_SAFELISTED_RESPONSE_HEADERS.has(lowerName) || allowWildcardExposure || exposedSet.has(lowerName);
+  });
+}

package/front_end/core/sdk/SecurityOrigin.ts

@@ -30,6 +30,15 @@ const OPAQUE_PREFIXES = [
   'blob:null',
 ] as const;
 
+/**
+ * String prefixes for imported artifact schemes (e.g., HAR recordings, traces).
+ * Imported entities operate in an isolated origin domain (`imported-har://${domain}`)
+ * that never matches live web origins (`https://${domain}`).
+ */
+export const IMPORTED_ORIGIN_PREFIXES: ReadonlySet<string> = new Set([
+  'imported-har:',
+]);
+
 function isOpaqueUrlString(url: string): boolean {
   const lower = url.trim().toLowerCase();
   if (OPAQUE_EXACT_MATCHES.has(lower)) {
@@ -86,6 +95,22 @@ export class SecurityOrigin {
       return SecurityOrigin.createUniqueOpaque();
     }
 
+    // Custom imported schemes (e.g. `imported-har:`) are not supported by standard URL parsers.
+    // We extract the host to construct a domain-scoped origin (`imported-har://${host}`).
+    // This isolates imported artifacts from live web pages (`imported-har://example.com` != `https://example.com`),
+    // while enabling same-origin comparison between requests within the same imported session domain.
+    for (const prefix of IMPORTED_ORIGIN_PREFIXES) {
+      if (rawUrl.toLowerCase().startsWith(prefix)) {
+        const afterScheme = rawUrl.substring(prefix.length).replace(/^\/+/, '');
+        const slashIndex = afterScheme.indexOf('/');
+        const host = slashIndex === -1 ? afterScheme : afterScheme.substring(0, slashIndex);
+        if (!host) {
+          return SecurityOrigin.createUniqueOpaque();
+        }
+        return new SecurityOrigin({type: 'origin', value: `${prefix}//${host.toLowerCase()}`});
+      }
+    }
+
     if (rawUrl.toLowerCase().startsWith('file://')) {
       const parsed = Common.ParsedURL.ParsedURL.fromString(rawUrl as Platform.DevToolsPath.UrlString);
       if (!parsed) {

package/front_end/core/sdk/sdk.ts

@@ -58,6 +58,7 @@ import * as LayerTreeBase from './LayerTreeBase.js';
 import * as LogModel from './LogModel.js';
 import * as NetworkManager from './NetworkManager.js';
 import * as NetworkRequest from './NetworkRequest.js';
+import * as NetworkRequestAccess from './NetworkRequestAccess.js';
 import * as OverlayColorGenerator from './OverlayColorGenerator.js';
 import * as OverlayModel from './OverlayModel.js';
 import * as OverlayPersistentHighlighter from './OverlayPersistentHighlighter.js';
@@ -146,6 +147,7 @@ export {
   LogModel,
   NetworkManager,
   NetworkRequest,
+  NetworkRequestAccess,
   OverlayColorGenerator,
   OverlayModel,
   OverlayPersistentHighlighter,

package/front_end/generated/SupportedCSSProperties.ts

@@ -3790,7 +3790,7 @@ export const generatedProperties: CSSProperty[] = [
  {
   "name": "margin-trim",
   "runtime_flag": "MarginTrim",
-  "runtime_flag_status": "experimental"
+  "runtime_flag_status": "stable"
  },
  {
   "inherited": true,

package/front_end/models/ai_assistance/AiAgent2.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Host from '../../core/host/host.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as LHModel from '../lighthouse/lighthouse.js';
 import type * as Trace from '../trace/trace.js';
@@ -78,7 +79,9 @@ export class AiAgent2 extends AiAgent<unknown> {
   // TODO: The static preamble is a placeholder and will eventually live server-side.
   readonly preamble: string = preamble;
   readonly clientFeature: Host.AidaClient.ClientFeature = Host.AidaClient.ClientFeature.CHROME_DEVTOOLS_V2_AGENT;
-  readonly userTier: string = 'TESTERS';
+  get userTier(): string|undefined {
+    return Root.Runtime.hostConfig.devToolsAiV2Architecture?.userTier;
+  }
 
   #changes: ChangeManager;
   #execJs: typeof executeJsCode;

package/front_end/models/ai_assistance/AiConversation.ts

@@ -1,7 +1,6 @@
 // Copyright 2024 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
@@ -46,14 +45,13 @@ export const NOT_FOUND_IMAGE_DATA = '';
 export const CONTEXT_TITLE = 'Analyzing data';
 const MAX_TITLE_LENGTH = 80;
 /**
- * List of page navigations that are allowed during an AI agent run.
- * These are page navigations triggered by agents themselves:
- * - `about://` : Navigated to before initiating a trace recording to ensure a clean state.
- * - `chrome://terms`: Navigated to by Lighthouse during its Back-Forward Cache
- *    audit.
+ * Page URL prefixes permitted during an AI agent run.
+ * Agents trigger these navigations internally:
+ * - `about:blank`: Used before recording a performance trace to ensure a clean state.
+ * - `chrome://terms`: Used by Lighthouse during Back-Forward Cache audits.
  */
 export const ALLOWED_PAGE_NAVIGATIONS: Platform.DevToolsPath.UrlString[] = [
-  Platform.DevToolsPath.urlString`about://`,
+  Platform.DevToolsPath.urlString`about:blank`,
   Platform.DevToolsPath.urlString`chrome://terms`,
 ];
 
@@ -431,14 +429,17 @@ export class AiConversation {
           } = {},
           ): AsyncGenerator<ResponseData, void, void> {
     this.#navigationOccurredDuringRun = false;
-    const originAtRunStart = getPrimaryPageOrigin(this.#targetManager);
+    const originAtRunStart = getPrimaryPageSecurityOrigin(this.#targetManager);
     const listener = (): void => {
-      // If an unexpected navigation to a different origin occurred
-      // during processing the user's request, we don't want to allow
-      // the agent to run any function calls and retrieve data from the new origin.
-      // Performance agent and accessibility agent navigate to 'about://' or 'chrome://terms'
-      const newOrigin = getPrimaryPageOrigin(this.#targetManager);
-      if (originAtRunStart !== newOrigin && newOrigin && !ALLOWED_PAGE_NAVIGATIONS.includes(newOrigin)) {
+      // Prevent the agent from executing tools or reading data from an untrusted origin
+      // if the page navigates unexpectedly during execution.
+      const newInspectedURL = this.#targetManager.primaryPageTarget()?.inspectedURL();
+      const newOrigin = newInspectedURL ? SDK.SecurityOrigin.SecurityOrigin.create(newInspectedURL) : undefined;
+      const isSameOrigin = Boolean(originAtRunStart && newOrigin && originAtRunStart.isSameOriginWith(newOrigin));
+      const isAllowedNavigation =
+          Boolean(newInspectedURL && ALLOWED_PAGE_NAVIGATIONS.some(allowed => newInspectedURL.startsWith(allowed)));
+
+      if (!isSameOrigin && !isAllowedNavigation) {
         this.#navigationOccurredDuringRun = true;
       }
     };
@@ -551,6 +552,10 @@ export class AiConversation {
     return this.#type;
   }
 
+  /**
+   * Returns the permitted origin for agent tool execution, or blocks execution
+   * if an unapproved cross-origin navigation occurred during the current run.
+   */
   allowedOrigin = (): AllowedOriginResult => {
     if (this.#navigationOccurredDuringRun) {
       return {blocked: true};
@@ -558,7 +563,7 @@ export class AiConversation {
     if (this.#origin) {
       return {origin: this.origin};
     }
-    this.#origin = getPrimaryPageOrigin(this.#targetManager);
+    this.#origin = getPrimaryPageSecurityOrigin(this.#targetManager);
 
     return {origin: this.origin};
   };
@@ -574,10 +579,16 @@ function isAiAssistanceServerSideLoggingAllowed(): boolean {
   return !Root.Runtime.hostConfig.aidaAvailability?.disallowLogging;
 }
 
-function getPrimaryPageOrigin(
+/**
+ * Returns the security origin of the primary page target.
+ *
+ * @param targetManager Target manager used to locate the primary page target.
+ * @returns The parsed SecurityOrigin, or undefined if no target or inspected URL exists.
+ */
+function getPrimaryPageSecurityOrigin(
     targetManager: SDK.TargetManager.TargetManager,
-    ): Platform.DevToolsPath.UrlString|undefined {
+    ): SDK.SecurityOrigin.SecurityOrigin|undefined {
   const target = targetManager.primaryPageTarget();
   const inspectedURL = target?.inspectedURL();
-  return inspectedURL ? new Common.ParsedURL.ParsedURL(inspectedURL).securityOrigin() : undefined;
+  return inspectedURL ? SDK.SecurityOrigin.SecurityOrigin.create(inspectedURL) : undefined;
 }

package/front_end/panels/ai_assistance/components/chatMessage.css

@@ -615,7 +615,9 @@
 
   .storage-breakdown-widget {
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
+    min-width: fit-content;
     padding: var(--sys-size-4);
+    width: 100%;
   }
 }

package/front_end/panels/application/components/BackForwardCacheView.ts

@@ -460,7 +460,7 @@ export class BackForwardCacheView extends UI.Widget.Widget {
   #historyIndex = 0;
   #view: View;
 
-  constructor(view = DEFAULT_VIEW) {
+  constructor(view: View = DEFAULT_VIEW) {
     super({useShadowDom: true, delegatesFocus: true});
     this.#view = view;
   }

package/front_end/panels/application/components/EndpointsGrid.ts

@@ -71,7 +71,8 @@ export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLEl
 type View = typeof DEFAULT_VIEW;
 
 export class EndpointsGrid extends UI.Widget.Widget {
-  endpoints = new Map<string, Protocol.Network.ReportingApiEndpoint[]>();
+  endpoints: Map<string, Protocol.Network.ReportingApiEndpoint[]> =
+      new Map<string, Protocol.Network.ReportingApiEndpoint[]>();
   #view: View;
 
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {

package/front_end/panels/application/components/PermissionsPolicySection.ts

@@ -218,7 +218,7 @@ export class PermissionsPolicySection extends UI.Widget.Widget {
   #showDetails = false;
   #view: View;
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {useShadowDom: false});
     this.#view = view;
   }

package/front_end/panels/application/components/ServiceWorkerRouterView.ts

@@ -45,7 +45,7 @@ export class ServiceWorkerRouterView extends UI.Widget.Widget {
   #rules: SDK.ServiceWorkerManager.ServiceWorkerRouterRule[] = [];
   #view: View;
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
     this.#view = view;
   }

package/front_end/panels/application/components/TrustTokensView.ts

@@ -141,7 +141,7 @@ export class TrustTokensView extends UI.Widget.VBox {
   #tokens: Protocol.Storage.TrustTokens[] = [];
   #view: View;
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
     this.#view = view;
   }

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

@@ -443,7 +443,8 @@ export class PreloadingDetailsReportView extends UI.Widget.VBox {
   #data: PreloadingDetailsReportViewData = null;
   #view: typeof DEFAULT_VIEW;
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement,
+              view: (input: ViewInput, _output: undefined, target: HTMLElement) => void = DEFAULT_VIEW) {
     super(element);
     this.#view = view;
   }

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

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

package/front_end/panels/console/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);