chrome-devtools-frontend 1.0.950850 → 1.0.952284

package/front_end/models/issues_manager/MixedContentIssue.ts

@@ -19,22 +19,22 @@ const str_ = i18n.i18n.registerUIStrings('models/issues_manager/MixedContentIssu
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class MixedContentIssue extends Issue {
-  private issueDetails: Protocol.Audits.MixedContentIssueDetails;
+  #issueDetails: Protocol.Audits.MixedContentIssueDetails;
 
   constructor(issueDetails: Protocol.Audits.MixedContentIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel) {
     super(Protocol.Audits.InspectorIssueCode.MixedContentIssue, issuesModel);
-    this.issueDetails = issueDetails;
+    this.#issueDetails = issueDetails;
   }
 
   requests(): Iterable<Protocol.Audits.AffectedRequest> {
-    if (this.issueDetails.request) {
-      return [this.issueDetails.request];
+    if (this.#issueDetails.request) {
+      return [this.#issueDetails.request];
     }
     return [];
   }
 
   getDetails(): Protocol.Audits.MixedContentIssueDetails {
-    return this.issueDetails;
+    return this.#issueDetails;
   }
 
   getCategory(): IssueCategory {
@@ -50,11 +50,11 @@ export class MixedContentIssue extends Issue {
   }
 
   primaryKey(): string {
-    return JSON.stringify(this.issueDetails);
+    return JSON.stringify(this.#issueDetails);
   }
 
   getKind(): IssueKind {
-    switch (this.issueDetails.resolutionStatus) {
+    switch (this.#issueDetails.resolutionStatus) {
       case Protocol.Audits.MixedContentResolutionStatus.MixedContentAutomaticallyUpgraded:
         return IssueKind.Improvement;
       case Protocol.Audits.MixedContentResolutionStatus.MixedContentBlocked:

package/front_end/models/issues_manager/NavigatorUserAgentIssue.ts

@@ -27,11 +27,11 @@ export enum IssueCode {
 }
 
 export class NavigatorUserAgentIssue extends Issue<IssueCode> {
-  private issueDetails: Protocol.Audits.NavigatorUserAgentIssueDetails;
+  #issueDetails: Protocol.Audits.NavigatorUserAgentIssueDetails;
 
   constructor(issueDetails: Protocol.Audits.NavigatorUserAgentIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel) {
     super(IssueCode.NavigatorUserAgentIssue, issuesModel);
-    this.issueDetails = issueDetails;
+    this.#issueDetails = issueDetails;
   }
 
   getCategory(): IssueCategory {
@@ -39,7 +39,7 @@ export class NavigatorUserAgentIssue extends Issue<IssueCode> {
   }
 
   details(): Protocol.Audits.NavigatorUserAgentIssueDetails {
-    return this.issueDetails;
+    return this.#issueDetails;
   }
 
   getDescription(): MarkdownIssueDescription|null {
@@ -53,14 +53,14 @@ export class NavigatorUserAgentIssue extends Issue<IssueCode> {
   }
 
   sources(): Iterable<Protocol.Audits.SourceCodeLocation> {
-    if (this.issueDetails.location) {
-      return [this.issueDetails.location];
+    if (this.#issueDetails.location) {
+      return [this.#issueDetails.location];
     }
     return [];
   }
 
   primaryKey(): string {
-    return JSON.stringify(this.issueDetails);
+    return JSON.stringify(this.#issueDetails);
   }
 
   getKind(): IssueKind {
@@ -69,7 +69,7 @@ export class NavigatorUserAgentIssue extends Issue<IssueCode> {
 
   isCausedByThirdParty(): boolean {
     const topFrame = SDK.FrameManager.FrameManager.instance().getTopFrame();
-    return isCausedByThirdParty(topFrame, this.issueDetails.url);
+    return isCausedByThirdParty(topFrame, this.#issueDetails.url);
   }
 
   static fromInspectorIssue(issuesModel: SDK.IssuesModel.IssuesModel, inspectorIssue: Protocol.Audits.InspectorIssue):

package/front_end/models/issues_manager/QuirksModeIssue.ts

@@ -19,17 +19,17 @@ const str_ = i18n.i18n.registerUIStrings('models/issues_manager/QuirksModeIssue.
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class QuirksModeIssue extends Issue {
-  private issueDetails: Protocol.Audits.QuirksModeIssueDetails;
+  #issueDetails: Protocol.Audits.QuirksModeIssueDetails;
 
   constructor(issueDetails: Protocol.Audits.QuirksModeIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel) {
     const mode = issueDetails.isLimitedQuirksMode ? 'LimitedQuirksMode' : 'QuirksMode';
     const umaCode = [Protocol.Audits.InspectorIssueCode.QuirksModeIssue, mode].join('::');
     super({code: Protocol.Audits.InspectorIssueCode.QuirksModeIssue, umaCode}, issuesModel);
-    this.issueDetails = issueDetails;
+    this.#issueDetails = issueDetails;
   }
 
   primaryKey(): string {
-    return `${this.code()}-(${this.issueDetails.documentNodeId})-(${this.issueDetails.url})`;
+    return `${this.code()}-(${this.#issueDetails.documentNodeId})-(${this.#issueDetails.url})`;
   }
 
   getCategory(): IssueCategory {
@@ -37,7 +37,7 @@ export class QuirksModeIssue extends Issue {
   }
 
   details(): Protocol.Audits.QuirksModeIssueDetails {
-    return this.issueDetails;
+    return this.#issueDetails;
   }
 
   getDescription(): MarkdownIssueDescription {

package/front_end/models/issues_manager/SameSiteCookieIssue.ts

@@ -38,27 +38,27 @@ const str_ = i18n.i18n.registerUIStrings('models/issues_manager/SameSiteCookieIs
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
 export class SameSiteCookieIssue extends Issue {
-  private issueDetails: Protocol.Audits.SameSiteCookieIssueDetails;
+  #issueDetails: Protocol.Audits.SameSiteCookieIssueDetails;
 
   constructor(
       code: string, issueDetails: Protocol.Audits.SameSiteCookieIssueDetails,
       issuesModel: SDK.IssuesModel.IssuesModel) {
     super(code, issuesModel);
-    this.issueDetails = issueDetails;
+    this.#issueDetails = issueDetails;
   }
 
-  private cookieId(): string {
-    if (this.issueDetails.cookie) {
-      const {domain, path, name} = this.issueDetails.cookie;
+  #cookieId(): string {
+    if (this.#issueDetails.cookie) {
+      const {domain, path, name} = this.#issueDetails.cookie;
       const cookieId = `${domain};${path};${name}`;
       return cookieId;
     }
-    return this.issueDetails.rawCookieLine ?? 'no-cookie-info';
+    return this.#issueDetails.rawCookieLine ?? 'no-cookie-info';
   }
 
   primaryKey(): string {
-    const requestId = this.issueDetails.request ? this.issueDetails.request.requestId : 'no-request';
-    return `${this.code()}-(${this.cookieId()})-(${requestId})`;
+    const requestId = this.#issueDetails.request ? this.#issueDetails.request.requestId : 'no-request';
+    return `${this.code()}-(${this.#cookieId()})-(${requestId})`;
   }
 
   /**
@@ -67,8 +67,7 @@ export class SameSiteCookieIssue extends Issue {
   static createIssuesFromSameSiteDetails(
       sameSiteDetails: Protocol.Audits.SameSiteCookieIssueDetails,
       issuesModel: SDK.IssuesModel.IssuesModel): SameSiteCookieIssue[] {
-    /** @type {!Array<!Issue>} */
-    const issues = [];
+    const issues: SameSiteCookieIssue[] = [];
 
     // Exclusion reasons have priority. It means a cookie was blocked. Create an issue
     // for every exclusion reason but ignore warning reasons if the cookie was blocked.
@@ -163,22 +162,22 @@ export class SameSiteCookieIssue extends Issue {
   }
 
   cookies(): Iterable<Protocol.Audits.AffectedCookie> {
-    if (this.issueDetails.cookie) {
-      return [this.issueDetails.cookie];
+    if (this.#issueDetails.cookie) {
+      return [this.#issueDetails.cookie];
     }
     return [];
   }
 
   rawCookieLines(): Iterable<string> {
-    if (this.issueDetails.rawCookieLine) {
-      return [this.issueDetails.rawCookieLine];
+    if (this.#issueDetails.rawCookieLine) {
+      return [this.#issueDetails.rawCookieLine];
     }
     return [];
   }
 
   requests(): Iterable<Protocol.Audits.AffectedRequest> {
-    if (this.issueDetails.request) {
-      return [this.issueDetails.request];
+    if (this.#issueDetails.request) {
+      return [this.#issueDetails.request];
     }
     return [];
   }
@@ -197,11 +196,11 @@ export class SameSiteCookieIssue extends Issue {
 
   isCausedByThirdParty(): boolean {
     const topFrame = SDK.FrameManager.FrameManager.instance().getTopFrame();
-    return isCausedByThirdParty(topFrame, this.issueDetails.cookieUrl);
+    return isCausedByThirdParty(topFrame, this.#issueDetails.cookieUrl);
   }
 
   getKind(): IssueKind {
-    if (this.issueDetails.cookieExclusionReasons?.length > 0) {
+    if (this.#issueDetails.cookieExclusionReasons?.length > 0) {
       return IssueKind.PageError;
     }
     return IssueKind.BreakingChange;

package/front_end/models/issues_manager/SharedArrayBufferIssue.ts

@@ -20,12 +20,12 @@ const str_ = i18n.i18n.registerUIStrings('models/issues_manager/SharedArrayBuffe
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class SharedArrayBufferIssue extends Issue {
-  private issueDetails: Protocol.Audits.SharedArrayBufferIssueDetails;
+  #issueDetails: Protocol.Audits.SharedArrayBufferIssueDetails;
 
   constructor(issueDetails: Protocol.Audits.SharedArrayBufferIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel) {
     const umaCode = [Protocol.Audits.InspectorIssueCode.SharedArrayBufferIssue, issueDetails.type].join('::');
     super({code: Protocol.Audits.InspectorIssueCode.SharedArrayBufferIssue, umaCode}, issuesModel);
-    this.issueDetails = issueDetails;
+    this.#issueDetails = issueDetails;
   }
 
   getCategory(): IssueCategory {
@@ -33,7 +33,7 @@ export class SharedArrayBufferIssue extends Issue {
   }
 
   details(): Protocol.Audits.SharedArrayBufferIssueDetails {
-    return this.issueDetails;
+    return this.#issueDetails;
   }
 
   getDescription(): MarkdownIssueDescription {
@@ -47,11 +47,11 @@ export class SharedArrayBufferIssue extends Issue {
   }
 
   primaryKey(): string {
-    return JSON.stringify(this.issueDetails);
+    return JSON.stringify(this.#issueDetails);
   }
 
   getKind(): IssueKind {
-    if (this.issueDetails.isWarning) {
+    if (this.#issueDetails.isWarning) {
       return IssueKind.BreakingChange;
     }
     return IssueKind.PageError;

package/front_end/models/issues_manager/SourceFrameIssuesManager.ts

@@ -16,21 +16,21 @@ import {Events} from './IssuesManagerEvents.js';
 import {getIssueTitleFromMarkdownDescription} from './MarkdownIssueDescription.js';
 
 export class SourceFrameIssuesManager {
-  private locationPool = new Bindings.LiveLocation.LiveLocationPool();
-  private issueMessages = new Array<IssueMessage>();
+  #locationPool = new Bindings.LiveLocation.LiveLocationPool();
+  #issueMessages = new Array<IssueMessage>();
 
   constructor(private readonly issuesManager: IssuesManager) {
-    this.issuesManager.addEventListener(Events.IssueAdded, this.onIssueAdded, this);
-    this.issuesManager.addEventListener(Events.FullUpdateRequired, this.onFullUpdateRequired, this);
+    this.issuesManager.addEventListener(Events.IssueAdded, this.#onIssueAdded, this);
+    this.issuesManager.addEventListener(Events.FullUpdateRequired, this.#onFullUpdateRequired, this);
   }
 
-  private onIssueAdded(event: Common.EventTarget.EventTargetEvent<IssueAddedEvent>): void {
+  #onIssueAdded(event: Common.EventTarget.EventTargetEvent<IssueAddedEvent>): void {
     const {issue} = event.data;
-    this.addIssue(issue);
+    this.#addIssue(issue);
   }
 
-  private addIssue(issue: Issue): void {
-    if (!this.isTrustedTypeIssue(issue)) {
+  #addIssue(issue: Issue): void {
+    if (!this.#isTrustedTypeIssue(issue)) {
       return;
     }
     const issuesModel = issue.model();
@@ -43,20 +43,20 @@ export class SourceFrameIssuesManager {
       const rawLocation =
           debuggerModel.createRawLocationByURL(srcLocation.url, srcLocation.lineNumber, srcLocation.columnNumber);
       if (rawLocation) {
-        this.addIssueMessageToScript(issue, rawLocation);
+        this.#addIssueMessageToScript(issue, rawLocation);
       }
     }
   }
 
-  private onFullUpdateRequired(): void {
-    this.resetMessages();
+  #onFullUpdateRequired(): void {
+    this.#resetMessages();
     const issues = this.issuesManager.issues();
     for (const issue of issues) {
-      this.addIssue(issue);
+      this.#addIssue(issue);
     }
   }
 
-  private async addIssueMessageToScript(issue: Issue, rawLocation: SDK.DebuggerModel.Location): Promise<void> {
+  async #addIssueMessageToScript(issue: Issue, rawLocation: SDK.DebuggerModel.Location): Promise<void> {
     const description = issue.getDescription();
     if (description) {
       const title = await getIssueTitleFromMarkdownDescription(description);
@@ -64,58 +64,59 @@ export class SourceFrameIssuesManager {
         const clickHandler = (): void => {
           Common.Revealer.reveal(issue);
         };
-        this.issueMessages.push(new IssueMessage(title, issue.getKind(), rawLocation, this.locationPool, clickHandler));
+        this.#issueMessages.push(
+            new IssueMessage(title, issue.getKind(), rawLocation, this.#locationPool, clickHandler));
       }
     }
   }
 
-  private isTrustedTypeIssue(issue: Issue): issue is ContentSecurityPolicyIssue {
+  #isTrustedTypeIssue(issue: Issue): issue is ContentSecurityPolicyIssue {
     return issue instanceof ContentSecurityPolicyIssue && issue.code() === trustedTypesSinkViolationCode ||
         issue.code() === trustedTypesPolicyViolationCode;
   }
 
-  private resetMessages(): void {
-    for (const message of this.issueMessages) {
+  #resetMessages(): void {
+    for (const message of this.#issueMessages) {
       message.dispose();
     }
-    this.issueMessages = [];
-    this.locationPool.disposeAll();
+    this.#issueMessages = [];
+    this.#locationPool.disposeAll();
   }
 }
 
 export class IssueMessage extends Workspace.UISourceCode.Message {
-  private uiSourceCode?: Workspace.UISourceCode.UISourceCode = undefined;
-  private kind: IssueKind;
+  #uiSourceCode?: Workspace.UISourceCode.UISourceCode = undefined;
+  #kind: IssueKind;
 
   constructor(
       title: string, kind: IssueKind, rawLocation: SDK.DebuggerModel.Location,
       locationPool: Bindings.LiveLocation.LiveLocationPool, clickHandler: () => void) {
     super(Workspace.UISourceCode.Message.Level.Issue, title, clickHandler);
-    this.kind = kind;
+    this.#kind = kind;
     Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().createLiveLocation(
-        rawLocation, this.updateLocation.bind(this), locationPool);
+        rawLocation, this.#updateLocation.bind(this), locationPool);
   }
 
-  private async updateLocation(liveLocation: Bindings.LiveLocation.LiveLocation): Promise<void> {
-    if (this.uiSourceCode) {
-      this.uiSourceCode.removeMessage(this);
+  async #updateLocation(liveLocation: Bindings.LiveLocation.LiveLocation): Promise<void> {
+    if (this.#uiSourceCode) {
+      this.#uiSourceCode.removeMessage(this);
     }
     const uiLocation = await liveLocation.uiLocation();
     if (!uiLocation) {
       return;
     }
     this.range = TextUtils.TextRange.TextRange.createFromLocation(uiLocation.lineNumber, uiLocation.columnNumber || 0);
-    this.uiSourceCode = uiLocation.uiSourceCode;
-    this.uiSourceCode.addMessage(this);
+    this.#uiSourceCode = uiLocation.uiSourceCode;
+    this.#uiSourceCode.addMessage(this);
   }
 
   getIssueKind(): IssueKind {
-    return this.kind;
+    return this.#kind;
   }
 
   dispose(): void {
-    if (this.uiSourceCode) {
-      this.uiSourceCode.removeMessage(this);
+    if (this.#uiSourceCode) {
+      this.#uiSourceCode.removeMessage(this);
     }
   }
 }

package/front_end/models/issues_manager/TrustedWebActivityIssue.ts

@@ -20,21 +20,21 @@ const str_ = i18n.i18n.registerUIStrings('models/issues_manager/TrustedWebActivi
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
 export class TrustedWebActivityIssue extends Issue {
-  private issueDetails: Protocol.Audits.TrustedWebActivityIssueDetails;
+  #issueDetails: Protocol.Audits.TrustedWebActivityIssueDetails;
 
   constructor(issueDetails: Protocol.Audits.TrustedWebActivityIssueDetails) {
     const issueCode =
         [Protocol.Audits.InspectorIssueCode.TrustedWebActivityIssue, issueDetails.violationType].join('::');
     super(issueCode);
-    this.issueDetails = issueDetails;
+    this.#issueDetails = issueDetails;
   }
 
   details(): Protocol.Audits.TrustedWebActivityIssueDetails {
-    return this.issueDetails;
+    return this.#issueDetails;
   }
 
   getDescription(): MarkdownIssueDescription|null {
-    const description = issueDescriptions.get(this.issueDetails.violationType);
+    const description = issueDescriptions.get(this.#issueDetails.violationType);
     if (!description) {
       return null;
     }
@@ -46,7 +46,7 @@ export class TrustedWebActivityIssue extends Issue {
   }
 
   primaryKey(): string {
-    return `${Protocol.Audits.InspectorIssueCode.TrustedWebActivityIssue}-${JSON.stringify(this.issueDetails)}`;
+    return `${Protocol.Audits.InspectorIssueCode.TrustedWebActivityIssue}-${JSON.stringify(this.#issueDetails)}`;
   }
 
   getKind(): IssueKind {

package/front_end/models/issues_manager/WasmCrossOriginModuleSharingIssue.ts

@@ -20,13 +20,13 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class WasmCrossOriginModuleSharingIssue extends
     Issue<Protocol.Audits.InspectorIssueCode.WasmCrossOriginModuleSharingIssue> {
-  private issueDetails: Protocol.Audits.WasmCrossOriginModuleSharingIssueDetails;
+  #issueDetails: Protocol.Audits.WasmCrossOriginModuleSharingIssueDetails;
 
   constructor(
       issueDetails: Protocol.Audits.WasmCrossOriginModuleSharingIssueDetails,
       issuesModel: SDK.IssuesModel.IssuesModel) {
     super(Protocol.Audits.InspectorIssueCode.WasmCrossOriginModuleSharingIssue, issuesModel);
-    this.issueDetails = issueDetails;
+    this.#issueDetails = issueDetails;
   }
 
   getCategory(): IssueCategory {
@@ -34,7 +34,7 @@ export class WasmCrossOriginModuleSharingIssue extends
   }
 
   details(): Protocol.Audits.WasmCrossOriginModuleSharingIssueDetails {
-    return this.issueDetails;
+    return this.#issueDetails;
   }
 
   getDescription(): MarkdownIssueDescription|null {
@@ -48,11 +48,11 @@ export class WasmCrossOriginModuleSharingIssue extends
   }
 
   primaryKey(): string {
-    return JSON.stringify(this.issueDetails);
+    return JSON.stringify(this.#issueDetails);
   }
 
   getKind(): IssueKind {
-    return this.issueDetails.isWarning ? IssueKind.BreakingChange : IssueKind.PageError;
+    return this.#issueDetails.isWarning ? IssueKind.BreakingChange : IssueKind.PageError;
   }
 
   static fromInspectorIssue(issuesModel: SDK.IssuesModel.IssuesModel, inspectorIssue: Protocol.Audits.InspectorIssue):

package/front_end/models/timeline_model/TimelineModel.ts

@@ -122,7 +122,7 @@ export class TimelineModelImpl {
   static forEachEvent(
       events: SDK.TracingModel.Event[], onStartEvent: (arg0: SDK.TracingModel.Event) => void,
       onEndEvent: (arg0: SDK.TracingModel.Event) => void,
-      onInstantEvent?: ((arg0: SDK.TracingModel.Event, arg1: SDK.TracingModel.Event|null) => any), startTime?: number,
+      onInstantEvent?: ((arg0: SDK.TracingModel.Event, arg1: SDK.TracingModel.Event|null) => void), startTime?: number,
       endTime?: number, filter?: ((arg0: SDK.TracingModel.Event) => boolean)): void {
     startTime = startTime || 0;
     endTime = endTime || Infinity;

package/front_end/models/timeline_model/TracingLayerTree.ts

@@ -178,7 +178,6 @@ export class TracingLayer implements SDK.LayerTreeBase.Layer {
         payload.compositing_reason_ids || (payload.debug_info && payload.debug_info.compositing_reason_ids) || [];
     this.drawsContentInternal = Boolean(payload.draws_content);
     this.gpuMemoryUsageInternal = payload.gpu_memory_usage;
-    /** @type {!Array<!LayerPaintEvent>} */
     this.paints = [];
   }
 

package/front_end/panels/accessibility/ARIAMetadata.ts

@@ -39,7 +39,6 @@ export class ARIAMetadata {
       this.attributes.set(attributeConfig.name, new Attribute(attributeConfig));
     }
 
-    /** @type {!Array<string>} */
     this.roleNames = config['roles'].map(roleConfig => roleConfig.name);
   }
 

package/front_end/panels/accessibility/AXBreadcrumbsPane.ts

@@ -499,11 +499,11 @@ export class AXBreadcrumb {
   }
 
   element(): HTMLElement {
-    return /** @type {!HTMLElement} */ this.elementInternal as HTMLElement;
+    return this.elementInternal;
   }
 
   nodeElement(): HTMLElement {
-    return /** @type {!HTMLElement} */ this.nodeElementInternal as HTMLElement;
+    return this.nodeElementInternal;
   }
 
   appendChild(breadcrumb: AXBreadcrumb): void {

package/front_end/panels/accessibility/AccessibilityNodeView.ts

@@ -203,8 +203,7 @@ export class AXNodeSubPane extends AccessibilitySubPane {
       };
       addProperty(roleProperty);
     }
-    for (const property of /** @type {!Array.<!Protocol.Accessibility.AXProperty>} */ axNode.properties() as
-         Protocol.Accessibility.AXProperty[]) {
+    for (const property of axNode.properties() as Protocol.Accessibility.AXProperty[]) {
       addProperty(property);
     }
 

package/front_end/panels/animation/AnimationTimeline.ts

@@ -240,7 +240,6 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
     UI.ARIAUtils.markAsListBox(playbackRateControl);
     UI.ARIAUtils.setAccessibleName(playbackRateControl, i18nString(UIStrings.playbackRates));
 
-    /** @type {!Array<!HTMLElement>} */
     this.#playbackRateButtons = [];
     for (const playbackRate of GlobalPlaybackRates) {
       const button = (playbackRateControl.createChild('button', 'animation-playback-rate-button') as HTMLElement);

package/front_end/panels/application/ApplicationPanelCacheSection.ts

@@ -6,9 +6,9 @@ import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as ApplicationComponents from './components/components.js';
 
 import {ApplicationPanelTreeElement, ExpandableApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
-import {BackForwardCacheView} from './BackForwardCacheView.js';
 import type {ResourcesPanel} from './ResourcesPanel.js';
 import {ServiceWorkerCacheView} from './ServiceWorkerCacheViews.js';
 
@@ -125,7 +125,6 @@ export class SWCacheTreeElement extends ApplicationPanelTreeElement {
     super(resourcesPanel, cache.cacheName + ' - ' + cache.securityOrigin, false);
     this.model = model;
     this.cache = cache;
-    /** @type {?} */
     this.view = null;
     const icon = UI.Icon.Icon.create('mediumicon-table', 'resource-tree-item');
     this.setLeadingIcons([icon]);
@@ -175,7 +174,7 @@ export class SWCacheTreeElement extends ApplicationPanelTreeElement {
 }
 
 export class BackForwardCacheTreeElement extends ApplicationPanelTreeElement {
-  private view?: BackForwardCacheView;
+  private view?: ApplicationComponents.BackForwardCacheView.BackForwardCacheViewWrapper;
 
   constructor(resourcesPanel: ResourcesPanel) {
     super(resourcesPanel, i18nString(UIStrings.backForwardCache), false);
@@ -190,7 +189,7 @@ export class BackForwardCacheTreeElement extends ApplicationPanelTreeElement {
   onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     if (!this.view) {
-      this.view = new BackForwardCacheView();
+      this.view = new ApplicationComponents.BackForwardCacheView.BackForwardCacheViewWrapper();
     }
     this.showView(this.view);
     return false;

package/front_end/panels/application/ServiceWorkerUpdateCycleView.ts

@@ -105,7 +105,6 @@ export class ServiceWorkerUpdateCycleView {
         }
         state = state.previousState;
       }
-      /** @type {Array <ServiceWorkerUpdateRange>} */
       const ranges: Array<ServiceWorkerUpdateRange> = [];
       addNormalizedRanges(
           ranges, version.id, beginInstallTime, endInstallTime, beginActivateTime, endActivateTime, currentStatus);
@@ -158,7 +157,6 @@ export class ServiceWorkerUpdateCycleView {
     this.selectedRowIndex = -1;
     this.removeRows();
     this.createTimingTableHead();
-    /** @type {!Array<ServiceWorkerUpdateRange>} */
     const timeRangeArray = timeRanges;
     if (timeRangeArray.length === 0) {
       return;

package/front_end/panels/application/StorageView.ts

@@ -178,9 +178,7 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
 
     this.reportView.element.classList.add('clear-storage-header');
     this.reportView.show(this.contentElement);
-    /** @type {?SDK.Target.Target} */
     this.target = null;
-    /** @type {?string} */
     this.securityOrigin = null;
 
     this.settings = new Map();
@@ -213,7 +211,6 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
     quotaOverrideCheckboxRow.appendChild(this.quotaOverrideCheckbox);
     this.quotaOverrideCheckbox.checkboxElement.addEventListener('click', this.onClickCheckbox.bind(this), false);
     this.quotaOverrideControlRow = quota.appendRow();
-    /** @type {!HTMLInputElement} */
     this.quotaOverrideEditor =
         this.quotaOverrideControlRow.createChild('input', 'quota-override-notification-editor') as HTMLInputElement;
     this.quotaOverrideControlRow.appendChild(UI.UIUtils.createLabel(i18nString(UIStrings.mb)));
@@ -446,7 +443,7 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
       return;
     }
 
-    const securityOrigin = /** @type {string} */ (this.securityOrigin);
+    const securityOrigin = this.securityOrigin;
     const response = await this.target.storageAgent().invoke_getUsageAndQuota({origin: securityOrigin});
     this.quotaRow.textContent = '';
     if (response.getError()) {
@@ -475,8 +472,7 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
 
     if (this.quotaUsage === null || this.quotaUsage !== response.usage) {
       this.quotaUsage = response.usage;
-      /** @type {!Array<!PerfUI.PieChart.Slice>} */
-      const slices = [];
+      const slices: PerfUI.PieChart.Slice[] = [];
       for (const usageForType of response.usageBreakdown.sort((a, b) => b.usage - a.usage)) {
         const value = usageForType.usage;
         if (!value) {

package/front_end/panels/application/{BackForwardCacheStrings.ts → components/BackForwardCacheStrings.ts}

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as i18n from '../../core/i18n/i18n.js';
+import * as i18n from '../../../core/i18n/i18n.js';
 
 const UIStrings = {
   /**
@@ -422,7 +422,7 @@ const UIStrings = {
   contentMediaPlay: 'A media player was playing upon navigating away.',
 };
 
-const str_ = i18n.i18n.registerUIStrings('panels/application/BackForwardCacheStrings.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/application/components/BackForwardCacheStrings.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
 export const NotRestoredReasonDescription = {