chrome-devtools-frontend 1.0.1690116 → 1.0.1695017

package/front_end/panels/network/RequestHeadersView.ts

@@ -84,6 +84,11 @@ const UIStrings = {
    * @description A context menu item in the Network Log View Columns of the Network panel
    */
   earlyHintsHeaders: 'Early hints headers',
+  /**
+   * @description Warning in the Early hints headers section when the Disable cache setting prevents Early Hints preloads.
+   */
+  earlyPreloadsIgnoredCacheDisabledWarning:
+      'Early Hints preloads were ignored because cache is disabled. Enable cache and reload the page to use them.',
   /**
    * @description Title text for a link to the Sources panel to the file containing the header override definitions
    */
@@ -99,6 +104,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 interface ViewInput {
   showRequestHeadersText: boolean;
   showResponseHeadersText: boolean;
+  cacheDisabled: boolean;
   request: SDK.NetworkRequest.NetworkRequest;
   toggleShowRawResponseHeaders: () => void;
   toggleShowRawRequestHeaders: () => void;
@@ -184,16 +190,20 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
             additionalContent: undefined,
             forceOpen: input.toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.EARLY_HINTS,
             loggingContext: 'early-hints-headers',
-            contents: input.showResponseHeadersText ?
-              renderRawHeaders(input.request.responseHeadersText) :
-              html`
-            <devtools-early-hints-header-section .data=${
-              {
-                request: input.request,
-                toReveal: input.toReveal,
-              } as NetworkComponents.ResponseHeaderSection
-              .ResponseHeaderSectionData}></devtools-early-hints-header-section>
-              `,
+            contents: html`
+              ${input.cacheDisabled && hasEarlyHintsPreload(input.request.earlyHintsHeaders) ?
+                renderEarlyHintsWarning() : Lit.nothing}
+              ${input.showResponseHeadersText ?
+                renderRawHeaders(input.request.responseHeadersText) :
+                html`
+                  <devtools-early-hints-header-section .data=${
+                    {
+                      request: input.request,
+                      toReveal: input.toReveal,
+                    } as NetworkComponents.ResponseHeaderSection
+                    .ResponseHeaderSectionData}></devtools-early-hints-header-section>
+                `}
+            `,
           })}
         ${renderCategory({
           name: 'response-headers',
@@ -268,7 +278,7 @@ export class RequestHeadersView extends UI.Widget.Widget {
     this.#addEventListeners();
   }
 
-  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
     super();
     this.#view = view;
   }
@@ -368,6 +378,7 @@ export class RequestHeadersView extends UI.Widget.Widget {
       revealHeadersFile,
       request: this.#request,
       toReveal: this.#toReveal,
+      cacheDisabled: this.#request.cacheDisabled(),
       showResponseHeadersText: this.#showResponseHeadersText,
       showRequestHeadersText: this.#showRequestHeadersText,
     };
@@ -386,6 +397,31 @@ export class RequestHeadersView extends UI.Widget.Widget {
   }
 }
 
+function hasEarlyHintsPreload(headers: SDK.NetworkRequest.NameValue[]): boolean {
+  const relationParameter = /(?:^|[,;])\s*rel\s*=\s*(?:"([^"]*)"|'([^']*)'|([^,;\s]+))/gi;
+  return headers.some(header => {
+    if (Platform.StringUtilities.toLowerCaseString(header.name) !== 'link') {
+      return false;
+    }
+    for (const match of header.value.matchAll(relationParameter)) {
+      const relations = (match[1] ?? match[2] ?? match[3] ?? '').toLowerCase().trim().split(/[ \t]+/);
+      if (relations.includes('preload') || relations.includes('modulepreload')) {
+        return true;
+      }
+    }
+    return false;
+  });
+}
+
+function renderEarlyHintsWarning(): Lit.LitTemplate {
+  return html`
+    <div class="early-hints-warning">
+      <devtools-icon class="medium" name="warning-filled"></devtools-icon>
+      <div>${i18nString(UIStrings.earlyPreloadsIgnoredCacheDisabledWarning)}</div>
+    </div>
+  `;
+}
+
 function renderHeaderOverridesLink(input: ViewInput): Lit.LitTemplate {
   if (!input.revealHeadersFile) {
     return Lit.nothing;

package/front_end/panels/network/RequestPayloadView.ts

@@ -365,7 +365,7 @@ export class RequestPayloadView extends UI.Widget.VBox {
   #viewQueryParamSource = false;
   #refreshFormDataPromiseForTest = Promise.resolve();
 
-  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
     super();
     this.#view = view;
   }

package/front_end/panels/network/RequestResponseView.ts

@@ -82,7 +82,7 @@ export class RequestResponseView extends UI.Widget.VBox {
   #view: View;
   #revealPosition?: (position: SourceFrame.SourceFrame.RevealPosition) => Promise<void>;
 
-  constructor(request: SDK.NetworkRequest.NetworkRequest, view = DEFAULT_VIEW) {
+  constructor(request: SDK.NetworkRequest.NetworkRequest, view: View = DEFAULT_VIEW) {
     super();
     this.request = request;
     this.#view = view;

package/front_end/panels/network/RequestTimingView.ts

@@ -614,7 +614,7 @@ export class RequestTimingView extends UI.Widget.VBox {
   #calculator?: NetworkTimeCalculator.NetworkTimeCalculator;
   #lastMinimumBoundary = -1;
   readonly #view: View;
-  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(target);
     this.#view = view;
   }

package/front_end/panels/network/ShowMoreDetailsWidget.ts

@@ -61,7 +61,7 @@ export class ShowMoreDetailsWidget extends UI.Widget.Widget {
   #text = '';
   #showMore = false;
   #copy: CopyMenuItem|null = null;
-  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(target);
     this.#view = view;
   }

package/front_end/panels/network/components/RequestHeadersView.css

@@ -117,6 +117,18 @@ div.raw-headers-row {
   color: var(--sys-color-token-subtle);
 }
 
+.early-hints-warning {
+  display: flex;
+  align-items: center;
+  gap: var(--sys-size-4);
+  margin: var(--sys-size-3);
+  padding: var(--sys-size-5);
+  border-radius: var(--sys-shape-corner-medium-small);
+  color: var(--sys-color-on-yellow-container);
+  background-color: var(--sys-color-yellow-container);
+  font: var(--sys-typescale-body4-regular);
+}
+
 .raw-headers {
   font-family: var(--source-code-font-family);
   font-size: var(--source-code-font-size);

package/front_end/panels/network/components/ResponseHeaderSection.ts

@@ -87,7 +87,7 @@ export interface ResponseHeaderSectionData {
 }
 
 class ResponseHeaderSectionBase extends HTMLElement {
-  protected readonly shadow = this.attachShadow({mode: 'open'});
+  protected readonly shadow: ShadowRoot = this.attachShadow({mode: 'open'});
   protected headerDetails: HeaderDetailsDescriptor[] = [];
 
   protected setHeaders(headers: SDK.NetworkRequest.NameValue[]): void {

package/front_end/panels/performance_monitor/PerformanceMonitor.ts

@@ -127,7 +127,7 @@ export class PerformanceMonitorImpl extends UI.Widget.HBox<ShadowRoot> implement
   private suspended = false;
   private graphRenderingContext: CanvasRenderingContext2D|null = null;
 
-  constructor(pollIntervalMs = 500, view = DEFAULT_VIEW) {
+  constructor(pollIntervalMs = 500, view: PerformanceMonitorView = DEFAULT_VIEW) {
     super({useShadowDom: 'pure'});
     this.view = view;
     this.registerRequiredCSS(performanceMonitorStyles);
@@ -650,7 +650,7 @@ export class ControlPane extends UI.Widget.VBox {
   readonly #metricValues = new Map<string, number>();
   readonly #view: ControlPaneView;
 
-  constructor(element: HTMLElement, view = CONTROL_PANE_DEFAULT_VIEW) {
+  constructor(element: HTMLElement, view: ControlPaneView = CONTROL_PANE_DEFAULT_VIEW) {
     super(element, {useShadowDom: false});
     this.#view = view;
 
@@ -746,7 +746,7 @@ function renderMetricIndicator(
   // clang-format on
 }
 
-export const format = new Intl.NumberFormat('en-US', {maximumFractionDigits: 1});
+export const format: Intl.NumberFormat = new Intl.NumberFormat('en-US', {maximumFractionDigits: 1});
 export interface MetricInfo {
   name: string;
   color: string;

package/front_end/panels/profiler/HeapProfileView.ts

@@ -1329,7 +1329,7 @@ export class NodeFormatter implements Formatter {
   }
 }
 
-export const nodeFormatter = new NodeFormatter();
+export const nodeFormatter: NodeFormatter = new NodeFormatter();
 
 export class HeapFlameChartDataProvider extends ProfileFlameChartDataProvider {
   readonly profile: CPUProfile.ProfileTreeModel.ProfileTreeModel;

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -140,7 +140,7 @@ const HeapSnapshotGridNodeBase:
 export class HeapSnapshotGridNode extends HeapSnapshotGridNodeBase {
   dataGridInternal: HeapSnapshotSortableDataGrid;
   instanceCount = 0;
-  readonly savedChildren = new Map<number, HeapSnapshotGridNode>();
+  readonly savedChildren: Map<number, HeapSnapshotGridNode> = new Map();
   /**
    * List of position ranges for all visible nodes: [startPos1, endPos1),...,[startPosN, endPosN)
    * Position is an item position in the provider.

package/front_end/panels/protocol_monitor/JSONEditor.ts

@@ -196,7 +196,7 @@ export class JSONEditor extends JSONEditorBase {
   displayCommandInput = true;
   displayToolbar = true;
 
-  constructor(element: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
     this.#view = view;
     this.registerRequiredCSS(editorWidgetStyles);

package/front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -669,14 +669,14 @@ export class CommandAutocompleteSuggestionProvider {
   }
 }
 
-interface InfoWidgetViewInput {
+export interface InfoWidgetViewInput {
   request: Record<string, unknown>|undefined;
   response: Record<string, unknown>|undefined;
   type: 'sent'|'received'|undefined;
   selectedTab: 'request'|'response'|undefined;
 }
 
-type InfoWidgetView = (input: InfoWidgetViewInput, output: undefined, target: HTMLElement) => void;
+export type InfoWidgetView = (input: InfoWidgetViewInput, output: undefined, target: HTMLElement) => void;
 
 const INFO_WIDGET_VIEW: InfoWidgetView = (input, _output, target) => {
   // clang-format off
@@ -715,7 +715,7 @@ export class InfoWidget extends UI.Widget.VBox {
   request: Record<string, unknown>|undefined;
   response: Record<string, unknown>|undefined;
   type: 'sent'|'received'|undefined;
-  constructor(element: HTMLElement, view = INFO_WIDGET_VIEW) {
+  constructor(element: HTMLElement, view: InfoWidgetView = INFO_WIDGET_VIEW) {
     super(element);
     this.#view = view;
     this.requestUpdate();

package/front_end/panels/recorder/RecordingListView.ts

@@ -44,12 +44,6 @@ const str_ = i18n.i18n.registerUIStrings(
 );
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-recording-list-view': RecordingListView;
-  }
-}
-
 interface Recording {
   storageName: string;
   name: string;

package/front_end/panels/recorder/RecordingView.ts

@@ -155,12 +155,6 @@ const str_ = i18n.i18n.registerUIStrings(
 );
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-recording-view': RecordingView;
-  }
-}
-
 export interface ReplayState {
   isPlaying: boolean;             // Replay is in progress
   isPausedOnBreakpoint: boolean;  // Replay is in progress and is in stopped state

package/front_end/panels/recorder/controlButton.css

@@ -26,11 +26,11 @@
 
 .icon {
   display: flex;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
+  width: var(--sys-size-14);
+  height: var(--sys-size-14);
+  border-radius: var(--sys-shape-corner-full);
   background: var(--sys-color-error-bright);
-  margin-bottom: 8px;
+  margin-bottom: var(--sys-size-5);
   position: relative;
   transition: background 200ms;
   place-content: center center;
@@ -43,9 +43,9 @@
   box-sizing: border-box;
   content: "";
   display: block;
-  width: 14px;
-  height: 14px;
-  border: 1px solid var(--override-white);
+  width: var(--sys-size-7);
+  height: var(--sys-size-7);
+  border: var(--sys-size-1) solid var(--override-white);
   position: absolute;
   top: 50%;
   left: 50%;
@@ -58,7 +58,7 @@
 }
 
 .icon.circle::before {
-  border-radius: 50%;
+  border-radius: var(--sys-shape-corner-full);
 }
 
 .icon:hover {
@@ -74,8 +74,8 @@
 }
 
 .label {
-  font-size: 12px;
-  line-height: 16px;
+  font-size: var(--sys-typescale-body4-size);
+  line-height: var(--sys-typescale-body4-line-height);
   text-align: center;
   letter-spacing: 0.02em;
   color: var(--sys-color-on-surface);

package/front_end/panels/recorder/startView.css

@@ -19,7 +19,7 @@
 }
 
 .wrapper {
-  padding: 24px;
+  padding: var(--sys-size-11);
   background-color: var(--sys-color-cdt-base-container);
   height: 100%;
   display: flex;

package/front_end/panels/screencast/ScreencastView.ts

@@ -945,8 +945,10 @@ export class ScreencastView extends UI.Widget.Widget implements SDK.OverlayModel
 
 export const BORDERS_SIZE = 44;
 export const NAVBAR_HEIGHT = 29;
-export const HTTP_REGEX = /^http:\/\/(.+)/;
-export const SCHEME_REGEX = /^(https?|about|chrome):/;
+
+export const HTTP_REGEX: RegExp = /^http:\/\/(.+)/;
+
+export const SCHEME_REGEX: RegExp = /^(https?|about|chrome):/;
 
 export class ProgressTracker {
   private readonly resourceTreeModel: SDK.ResourceTreeModel.ResourceTreeModel|null;

package/front_end/panels/search/SearchView.ts

@@ -294,7 +294,7 @@ export class SearchView extends UI.Widget.VBox<ShadowRoot> {
 
   #searchResults: SearchResult[] = [];
 
-  constructor(settingKey: string, view = DEFAULT_VIEW) {
+  constructor(settingKey: string, view: View = DEFAULT_VIEW) {
     super({useShadowDom: 'pure'});
     this.#view = view;
     this.setMinimumSize(0, 40);

package/front_end/panels/security/SecurityPanel.ts

@@ -459,8 +459,7 @@ const LOCK_ICON_NAME = 'lock';
 const WARNING_ICON_NAME = 'warning';
 const UNKNOWN_ICON_NAME = 'indeterminate-question-box';
 
-export function getSecurityStateIconForDetailedView(
-    securityState: Protocol.Security.SecurityState, className: string): Icon {
+function getSecurityStateIconNameForDetailedView(securityState: Protocol.Security.SecurityState): string {
   let iconName: string;
 
   switch (securityState) {
@@ -478,7 +477,12 @@ export function getSecurityStateIconForDetailedView(
       break;
   }
 
-  return createIcon(iconName, className);
+  return iconName;
+}
+
+export function getSecurityStateIconForDetailedView(securityState: Protocol.Security.SecurityState,
+                                                    className: string): Icon {
+  return createIcon(getSecurityStateIconNameForDetailedView(securityState), className);
 }
 
 export function getSecurityStateIconForOverview(
@@ -567,9 +571,11 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
   private eventListeners: Common.EventTarget.EventDescriptor[];
   private securityModel: SecurityModel|null;
   readonly splitWidget!: UI.SplitWidget.SplitWidget;
+  private view: View;
 
-  constructor(private view: View = DEFAULT_VIEW) {
+  constructor(view: View|undefined = DEFAULT_VIEW) {
     super('security');
+    this.view = view;
 
     this.update();
 
@@ -1424,9 +1430,30 @@ function renderConnectionSection(securityDetails: Protocol.Network.SecurityDetai
   // clang-format on
 }
 
+function renderTitleSection(origin: Platform.DevToolsPath.UrlString, securityState: Protocol.Security.SecurityState,
+                            onRevealInNetwork: (event: Event) => void): TemplateResult {
+  // clang-format off
+  return html`
+    <div class="title-section-header" role="heading" aria-level="1">${i18nString(UIStrings.origin)}</div>
+    <div class="origin-display">
+      <devtools-icon
+          name=${getSecurityStateIconNameForDetailedView(securityState)}
+          class=${`security-property security-property-${securityState}`}>
+      </devtools-icon>
+      ${renderHighlightedUrl(origin, securityState)}
+    </div>
+    <div class="view-network-button">
+      <devtools-button
+          .variant=${Buttons.Button.Variant.OUTLINED}
+          .jslogContext=${'reveal-in-network'}
+          @click=${onRevealInNetwork}>${i18nString(UIStrings.viewRequestsInNetworkPanel)}</devtools-button>
+    </div>`;
+  // clang-format on
+}
+
 export class SecurityOriginView extends UI.Widget.VBox {
   readonly #origin: Platform.DevToolsPath.UrlString;
-  readonly #originDisplay: HTMLElement;
+  readonly #titleSection: HTMLElement;
 
   constructor(origin: Platform.DevToolsPath.UrlString, originState: OriginState) {
     super({jslog: `${VisualLogging.pane('security.origin-view')}`});
@@ -1436,25 +1463,8 @@ export class SecurityOriginView extends UI.Widget.VBox {
 
     this.element.classList.add('security-origin-view');
 
-    const titleSection = this.element.createChild('div', 'title-section');
-    const titleDiv = titleSection.createChild('div', 'title-section-header');
-    titleDiv.textContent = i18nString(UIStrings.origin);
-    UI.ARIAUtils.markAsHeading(titleDiv, 1);
-
-    this.#originDisplay = titleSection.createChild('div', 'origin-display');
-    this.#renderOriginDisplay(originState.securityState);
-
-    const originNetworkDiv = titleSection.createChild('div', 'view-network-button');
-    const originNetworkButton = UI.UIUtils.createTextButton(i18nString(UIStrings.viewRequestsInNetworkPanel), event => {
-      event.consume();
-      const parsedURL = new Common.ParsedURL.ParsedURL(origin);
-      void Common.Revealer.reveal(NetworkForward.UIFilter.UIRequestFilter.filters([
-        {filterType: NetworkForward.UIFilter.FilterType.Domain, filterValue: parsedURL.host},
-        {filterType: NetworkForward.UIFilter.FilterType.Scheme, filterValue: parsedURL.scheme},
-      ]));
-    }, {jslogContext: 'reveal-in-network'});
-    originNetworkDiv.appendChild(originNetworkButton);
-    UI.ARIAUtils.markAsLink(originNetworkButton);
+    this.#titleSection = this.element.createChild('div', 'title-section');
+    this.#renderTitleSection(originState.securityState);
 
     if (originState.securityDetails) {
       const connectionSection = this.element.createChild('div', 'origin-view-section connection-section');
@@ -1610,21 +1620,22 @@ export class SecurityOriginView extends UI.Widget.VBox {
   }
 
   setSecurityState(newSecurityState: Protocol.Security.SecurityState): void {
-    this.#renderOriginDisplay(newSecurityState);
+    this.#renderTitleSection(newSecurityState);
   }
 
-  #renderOriginDisplay(securityState: Protocol.Security.SecurityState): void {
-    const icon =
-        getSecurityStateIconForDetailedView(securityState, `security-property security-property-${securityState}`);
-
-    // clang-format off
+  #renderTitleSection(securityState: Protocol.Security.SecurityState): void {
     // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-    render(html`
-      ${icon}
-      ${renderHighlightedUrl(this.#origin, securityState)}
-    `, this.#originDisplay);
-    // clang-format on
+    render(renderTitleSection(this.#origin, securityState, this.#revealInNetwork), this.#titleSection);
   }
+
+  #revealInNetwork = (event: Event): void => {
+    event.consume();
+    const parsedURL = new Common.ParsedURL.ParsedURL(this.#origin);
+    void Common.Revealer.reveal(NetworkForward.UIFilter.UIRequestFilter.filters([
+      {filterType: NetworkForward.UIFilter.FilterType.Domain, filterValue: parsedURL.host},
+      {filterType: NetworkForward.UIFilter.FilterType.Scheme, filterValue: parsedURL.scheme},
+    ]));
+  };
 }
 
 export class SecurityDetailsTable {

package/front_end/panels/sources/BreakpointEditDialog.ts

@@ -164,7 +164,7 @@ export class BreakpointEditDialog extends UI.Widget.Widget {
   #editor?: TextEditor.TextEditor.TextEditor;
   #state?: CodeMirror.EditorState;
 
-  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
     super({
       jslog: `${VisualLogging.dialog('edit-breakpoint')}`,
       useShadowDom: true,

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -498,7 +498,7 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
   }
 }
 
-export const elementSymbol = Symbol('element');
+export const elementSymbol: unique symbol = Symbol('element');
 export const defaultMaxAsyncStackChainDepth = 32;
 
 export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {

package/front_end/panels/sources/DebuggerPausedMessage.ts

@@ -182,7 +182,8 @@ const DEFAULT_VIEW = (input: ViewInput|null, _output: undefined, target: Documen
 type View = typeof DEFAULT_VIEW;
 
 export class DebuggerPausedMessage extends UI.Widget.Widget<ShadowRoot> {
-  static override readonly INJECT = [SDK.EventBreakpointsModel.EventBreakpointsManager] as const;
+  static override readonly INJECT: readonly[typeof SDK.EventBreakpointsModel.EventBreakpointsManager] =
+      [SDK.EventBreakpointsModel.EventBreakpointsManager] as const;
 
   #viewInput: ViewInput|null = null;
   readonly #eventBreakpointsManager: SDK.EventBreakpointsModel.EventBreakpointsManager;
@@ -342,11 +343,12 @@ export class DebuggerPausedMessage extends UI.Widget.Widget<ShadowRoot> {
   }
 }
 
-export const BreakpointTypeNouns = new Map([
-  [Protocol.DOMDebugger.DOMBreakpointType.SubtreeModified, i18nLazyString(UIStrings.subtreeModifications)],
-  [Protocol.DOMDebugger.DOMBreakpointType.AttributeModified, i18nLazyString(UIStrings.attributeModifications)],
-  [Protocol.DOMDebugger.DOMBreakpointType.NodeRemoved, i18nLazyString(UIStrings.nodeRemoval)],
-]);
+export const BreakpointTypeNouns: Map<Protocol.DOMDebugger.DOMBreakpointType, () => Platform.UIString.LocalizedString> =
+    new Map([
+      [Protocol.DOMDebugger.DOMBreakpointType.SubtreeModified, i18nLazyString(UIStrings.subtreeModifications)],
+      [Protocol.DOMDebugger.DOMBreakpointType.AttributeModified, i18nLazyString(UIStrings.attributeModifications)],
+      [Protocol.DOMDebugger.DOMBreakpointType.NodeRemoved, i18nLazyString(UIStrings.nodeRemoval)],
+    ]);
 
 interface PausedDetailsAuxData {
   description?: string;

package/front_end/panels/sources/ProfilePlugin.ts

@@ -66,7 +66,8 @@ function markersFromProfileData(map: Workspace.UISourceCode.LineColumnProfileMap
 }
 
 export class PerformanceProfilePlugin extends Plugin {
-  updateEffect = CodeMirror.StateEffect.define<Workspace.UISourceCode.LineColumnProfileMap>();
+  updateEffect: CodeMirror.StateEffectType<Workspace.UISourceCode.LineColumnProfileMap> =
+      CodeMirror.StateEffect.define<Workspace.UISourceCode.LineColumnProfileMap>();
   field: CodeMirror.StateField<CodeMirror.RangeSet<CodeMirror.GutterMarker>>;
   gutter: CodeMirror.Extension;
   compartment: CodeMirror.Compartment = new CodeMirror.Compartment();

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -189,7 +189,7 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
           null;
   #view: View;
 
-  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(target, {
       jslog: `${VisualLogging.section('sources.scope-chain')}`,
       useShadowDom: true,

package/front_end/panels/timeline/IsolateSelector.ts

@@ -25,7 +25,7 @@ export class IsolateSelector extends UI.Toolbar.ToolbarItem implements SDK.Isola
   menu: Menus.SelectMenu.SelectMenu;
   options?: Array<{index: number, isolate: SDK.IsolateManager.Isolate}>;
   items?: Menus.Menu.MenuItem[];
-  readonly itemByIsolate = new Map<SDK.IsolateManager.Isolate, Menus.Menu.MenuItem>();
+  readonly itemByIsolate: Map<SDK.IsolateManager.Isolate, Menus.Menu.MenuItem> = new Map();
   readonly #targetManager: SDK.TargetManager.TargetManager;
   readonly #isolateManager: SDK.IsolateManager.IsolateManager;
 

package/front_end/panels/timeline/LayoutShiftsTrackAppender.ts

@@ -48,7 +48,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
  * allow us to do this properly and not hack around it.
  * TODO: Delete this once the new Layout Shift UI ships out of the TIMELINE_LAYOUT_SHIFT_DETAILS experiment
  **/
-export const LAYOUT_SHIFT_SYNTHETIC_DURATION = Trace.Types.Timing.Micro(5_000);
+export const LAYOUT_SHIFT_SYNTHETIC_DURATION: Trace.Types.Timing.Micro = Trace.Types.Timing.Micro(5_000);
 
 export class LayoutShiftsTrackAppender implements TrackAppender {
   readonly appenderName: TrackAppenderName = 'LayoutShifts';

package/front_end/panels/timeline/NetworkTrackAppender.ts

@@ -37,7 +37,7 @@ export class NetworkTrackAppender implements TrackAppender {
   readonly appenderName: TrackAppenderName = 'Network';
 
   #flameChartData: PerfUI.FlameChart.FlameChartTimelineData;
-  webSocketIdToLevel = new Map<number, number>();
+  webSocketIdToLevel: Map<number, number> = new Map();
   #events: NetworkTrackEvent[] = [];
 
   #font: string;

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -1404,7 +1404,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
   }
 }
 
-export const InstantEventVisibleDurationMs = Trace.Types.Timing.Milli(0.001);
+export const InstantEventVisibleDurationMs: Trace.Types.Timing.Milli = Trace.Types.Timing.Milli(0.001);
 
 export const enum Events {
   DATA_CHANGED = 'DataChanged',