chrome-devtools-frontend 1.0.923319 → 1.0.925171

package/front_end/models/extensions/ExtensionServer.ts

@@ -913,25 +913,22 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.subscriptionStopHandlers.set(eventTopic, onUnsubscribeLast);
   }
 
-  private registerAutosubscriptionHandler(
-      eventTopic: string, eventTarget: Common.EventTarget.EventTarget, frontendEventType: string,
-      handler: (arg0: Common.EventTarget.EventTargetEvent) => unknown): void {
+  private registerAutosubscriptionHandler<Events, T extends keyof Events>(
+      eventTopic: string, eventTarget: Common.EventTarget.EventTarget<Events>, frontendEventType: T,
+      handler: Common.EventTarget.EventListener<Events, T>): void {
     this.registerSubscriptionHandler(
         eventTopic, () => eventTarget.addEventListener(frontendEventType, handler, this),
-        eventTarget.removeEventListener.bind(eventTarget, frontendEventType, handler, this));
+        () => eventTarget.removeEventListener(frontendEventType, handler, this));
   }
 
-  private registerAutosubscriptionTargetManagerHandler(
-      eventTopic: string, modelClass: new(arg1: SDK.Target.Target) => SDK.SDKModel.SDKModel, frontendEventType: string,
-      handler: (arg0: Common.EventTarget.EventTargetEvent) => unknown): void {
+  private registerAutosubscriptionTargetManagerHandler<Events, T extends keyof Events>(
+      eventTopic: string, modelClass: new(arg1: SDK.Target.Target) => SDK.SDKModel.SDKModel<Events>,
+      frontendEventType: T, handler: Common.EventTarget.EventListener<Events, T>): void {
     this.registerSubscriptionHandler(
         eventTopic,
-
-        SDK.TargetManager.TargetManager.instance().addModelListener.bind(
-            SDK.TargetManager.TargetManager.instance(), modelClass, frontendEventType, handler, this),
-
-        SDK.TargetManager.TargetManager.instance().removeModelListener.bind(
-            SDK.TargetManager.TargetManager.instance(), modelClass, frontendEventType, handler, this));
+        () => SDK.TargetManager.TargetManager.instance().addModelListener(modelClass, frontendEventType, handler, this),
+        () => SDK.TargetManager.TargetManager.instance().removeModelListener(
+            modelClass, frontendEventType, handler, this));
   }
 
   private registerResourceContentCommittedHandler(

package/front_end/models/workspace/WorkspaceImpl.ts

@@ -194,7 +194,7 @@ export class ProjectStore {
 
 let workspaceInstance: WorkspaceImpl|undefined;
 
-export class WorkspaceImpl extends Common.ObjectWrapper.ObjectWrapper {
+export class WorkspaceImpl extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   private projectsInternal: Map<string, Project>;
   private hasResourceContentTrackingExtensionsInternal: boolean;
 

package/front_end/models/workspace_diff/WorkspaceDiff.ts

@@ -33,16 +33,14 @@ export class WorkspaceDiffImpl extends Common.ObjectWrapper.ObjectWrapper<EventT
     return this.uiSourceCodeDiff(uiSourceCode).requestDiff();
   }
 
-  subscribeToDiffChange(
-      uiSourceCode: Workspace.UISourceCode.UISourceCode, callback: (arg0: Common.EventTarget.EventTargetEvent) => void,
-      thisObj?: Object): void {
-    this.uiSourceCodeDiff(uiSourceCode).addEventListener(Events.DiffChanged, callback, thisObj);
+  subscribeToDiffChange(uiSourceCode: Workspace.UISourceCode.UISourceCode, callback: () => void, thisObj?: Object):
+      void {
+    this.uiSourceCodeDiff(uiSourceCode).addEventListener(UISourceCodeDiffEvents.DiffChanged, callback, thisObj);
   }
 
-  unsubscribeFromDiffChange(
-      uiSourceCode: Workspace.UISourceCode.UISourceCode, callback: (arg0: Common.EventTarget.EventTargetEvent) => void,
-      thisObj?: Object): void {
-    this.uiSourceCodeDiff(uiSourceCode).removeEventListener(Events.DiffChanged, callback, thisObj);
+  unsubscribeFromDiffChange(uiSourceCode: Workspace.UISourceCode.UISourceCode, callback: () => void, thisObj?: Object):
+      void {
+    this.uiSourceCodeDiff(uiSourceCode).removeEventListener(UISourceCodeDiffEvents.DiffChanged, callback, thisObj);
   }
 
   modifiedUISourceCodes(): Workspace.UISourceCode.UISourceCode[] {
@@ -166,7 +164,20 @@ export class WorkspaceDiffImpl extends Common.ObjectWrapper.ObjectWrapper<EventT
   }
 }
 
-export class UISourceCodeDiff extends Common.ObjectWrapper.ObjectWrapper {
+export const enum Events {
+  ModifiedStatusChanged = 'ModifiedStatusChanged',
+}
+
+export interface ModifiedStatusChangedEvent {
+  uiSourceCode: Workspace.UISourceCode.UISourceCode;
+  isModified: boolean;
+}
+
+export type EventTypes = {
+  [Events.ModifiedStatusChanged]: ModifiedStatusChangedEvent,
+};
+
+export class UISourceCodeDiff extends Common.ObjectWrapper.ObjectWrapper<UISourceCodeDiffEventTypes> {
   private uiSourceCode: Workspace.UISourceCode.UISourceCode;
   private requestDiffPromise: Promise<Diff.Diff.DiffArray|null>|null;
   private pendingChanges: number|null;
@@ -196,7 +207,7 @@ export class UISourceCodeDiff extends Common.ObjectWrapper.ObjectWrapper {
       if (this.dispose) {
         return;
       }
-      this.dispatchEventToListeners(Events.DiffChanged);
+      this.dispatchEventToListeners(UISourceCodeDiffEvents.DiffChanged);
       this.pendingChanges = null;
     }
   }
@@ -259,19 +270,12 @@ export class UISourceCodeDiff extends Common.ObjectWrapper.ObjectWrapper {
 
 // TODO(crbug.com/1167717): Make this a const enum again
 // eslint-disable-next-line rulesdir/const_enum
-export enum Events {
+export enum UISourceCodeDiffEvents {
   DiffChanged = 'DiffChanged',
-  ModifiedStatusChanged = 'ModifiedStatusChanged',
-}
-
-export interface ModifiedStatusChangedEvent {
-  uiSourceCode: Workspace.UISourceCode.UISourceCode;
-  isModified: boolean;
 }
 
-export type EventTypes = {
-  [Events.DiffChanged]: void,
-  [Events.ModifiedStatusChanged]: ModifiedStatusChangedEvent,
+export type UISourceCodeDiffEventTypes = {
+  [UISourceCodeDiffEvents.DiffChanged]: void,
 };
 
 // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration

package/front_end/panels/animation/AnimationModel.ts

@@ -6,7 +6,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import * as Protocol from '../../generated/protocol.js';
 
-export class AnimationModel extends SDK.SDKModel.SDKModel {
+export class AnimationModel extends SDK.SDKModel.SDKModel<EventTypes> {
   readonly runtimeModel: SDK.RuntimeModel.RuntimeModel;
   readonly agent: ProtocolProxyApi.AnimationApi;
   private animationsById: Map<string, AnimationImpl>;
@@ -167,6 +167,11 @@ export enum Events {
   ModelReset = 'ModelReset',
 }
 
+export type EventTypes = {
+  [Events.AnimationGroupStarted]: AnimationGroup,
+  [Events.ModelReset]: void,
+};
+
 export class AnimationImpl {
   private readonly animationModel: AnimationModel;
   private readonly payloadInternal: Protocol.Animation.Animation;

package/front_end/panels/animation/AnimationTimeline.ts

@@ -491,8 +491,8 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
     this.renderGrid();
   }
 
-  private animationGroupStarted(event: Common.EventTarget.EventTargetEvent): void {
-    this.addAnimationGroup((event.data as AnimationGroup));
+  private animationGroupStarted({data}: Common.EventTarget.EventTargetEvent<AnimationGroup>): void {
+    this.addAnimationGroup(data);
   }
 
   private addAnimationGroup(group: AnimationGroup): void {

package/front_end/panels/application/AppManifestView.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 
 import appManifestViewStyles from './appManifestView.css.js';
@@ -53,20 +54,37 @@ const UIStrings = {
   */
   shortName: 'Short name',
   /**
-  *@description Label in the App Manifest View for the App Id
+  *@description Label in the App Manifest View for the Computed App Id
   */
-  appId: 'App Id',
+  computedAppId: 'Computed App Id',
   /**
   *@description Popup-text explaining what the App Id is used for.
   */
   appIdExplainer:
       'This is used by the browser to know whether the manifest should be updating an existing application, or whether it refers to a new web app that can be installed.',
   /**
+  *@description Text which is a hyperlink to more documentation
+  */
+  learnMore: 'Learn more',
+  /**
   *@description Explanation why it is advisable to specify an 'id' field in the manifest.
-  *@example {https://example.com/} PH1
+  *@example {Note:} PH1
+  *@example {id} PH2
+  *@example {start_url} PH3
+  *@example {id} PH4
+  *@example {/index.html} PH5
+  *@example {(button for copying suggested value into clipboard)} PH6
   */
   appIdNote:
-      'Note: \'id\' is not specified in the manifest, \'start_url\' is used instead. To specify an App Id that matches the current identity, set the \'id\' field to \'\'{PH1}\'\'.',
+      '{PH1} {PH2} is not specified in the manifest, {PH3} is used instead. To specify an App Id that matches the current identity, set the {PH4} field to {PH5} {PH6}.',
+  /**
+  *@description Label for reminding the user of something important. Is shown in bold and followed by the actual note to show the user.
+  */
+  note: 'Note:',
+  /**
+  *@description Tooltip text that appears when hovering over a button which copies the previous text to the clipboard.
+  */
+  copyToClipboard: 'Copy to clipboard',
   /**
   *@description Text for the description of something
   */
@@ -507,7 +525,9 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
       installabilityErrors: Protocol.Page.InstallabilityError[], manifestIcons: {
         primaryIcon: string|null,
       },
-      appId?: string): Promise<void> {
+      appIdResponse: Protocol.Page.GetAppIdResponse): Promise<void> {
+    const appId = appIdResponse?.appId || null;
+    const recommendedId = appIdResponse?.recommendedId || null;
     if (!data && !errors.length) {
       this.emptyView.showWidget();
       this.reportView.hideWidget();
@@ -547,29 +567,47 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
     }
 
     const startURL = stringProperty('start_url');
-    if (appId && startURL) {
-      const appIdField = this.identitySection.appendField(i18nString(UIStrings.appId));
+    if (appId && recommendedId) {
+      const appIdField = this.identitySection.appendField(i18nString(UIStrings.computedAppId));
       UI.ARIAUtils.setAccessibleName(appIdField, 'App Id');
       appIdField.textContent = appId;
 
-      if (!stringProperty('id')) {
-        const exclamationIcon = new IconButton.Icon.Icon();
-        exclamationIcon.data = {
-          iconName: 'exclamation_mark_circle_icon',
-          color: 'var(--color-text-secondary)',
-          width: '16px',
-          height: '16px',
-        };
-        exclamationIcon.classList.add('inline-icon');
-        exclamationIcon.title = i18nString(UIStrings.appIdNote, {PH1: startURL});
-        appIdField.appendChild(exclamationIcon);
-      }
-
       const helpIcon = new IconButton.Icon.Icon();
       helpIcon.data = {iconName: 'help_outline', color: 'var(--color-text-secondary)', width: '16px', height: '16px'};
       helpIcon.classList.add('inline-icon');
       helpIcon.title = i18nString(UIStrings.appIdExplainer);
       appIdField.appendChild(helpIcon);
+
+      appIdField.appendChild(UI.XLink.XLink.create(
+          'https://developer.chrome.com/blog/pwa-manifest-id/', i18nString(UIStrings.learnMore), 'learn-more'));
+
+      if (!stringProperty('id')) {
+        const suggestedIdNote = appIdField.createChild('div', 'multiline-value');
+        const noteSpan = document.createElement('b');
+        noteSpan.textContent = i18nString(UIStrings.note);
+        const idSpan = document.createElement('code');
+        idSpan.textContent = 'id';
+        const idSpan2 = document.createElement('code');
+        idSpan2.textContent = 'id';
+        const startUrlSpan = document.createElement('code');
+        startUrlSpan.textContent = 'start_url';
+        const suggestedIdSpan = document.createElement('code');
+        suggestedIdSpan.textContent = recommendedId;
+
+        const copyButton = new IconButton.IconButton.IconButton();
+        copyButton.title = i18nString(UIStrings.copyToClipboard);
+        copyButton.data = {
+          groups: [{iconName: 'copy_icon', iconHeight: '12px', iconWidth: '12px', text: ''}],
+          clickHandler: (): void => {
+            Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(recommendedId);
+          },
+          compact: true,
+        };
+
+        suggestedIdNote.appendChild(i18n.i18n.getFormatLocalizedString(
+            str_, UIStrings.appIdNote,
+            {PH1: noteSpan, PH2: idSpan, PH3: startUrlSpan, PH4: idSpan2, PH5: suggestedIdSpan, PH6: copyButton}));
+      }
     }
 
     this.startURLField.removeChildren();

package/front_end/panels/application/ApplicationPanelCacheSection.ts

@@ -2,13 +2,11 @@
 // 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 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 type * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {ApplicationPanelSidebar} from './ApplicationPanelSidebar.js';
 import {ApplicationPanelTreeElement, ExpandableApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import {BackForwardCacheView} from './BackForwardCacheView.js';
 import type {ResourcesPanel} from './ResourcesPanel.js';
@@ -34,27 +32,6 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/ApplicationPanelCacheSection.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class ApplicationCacheManifestTreeElement extends ApplicationPanelTreeElement {
-  private readonly manifestURL: string;
-
-  constructor(resourcesPanel: ResourcesPanel, manifestURL: string) {
-    const title = new Common.ParsedURL.ParsedURL(manifestURL).displayName;
-    super(resourcesPanel, title, false);
-    this.tooltip = manifestURL;
-    this.manifestURL = manifestURL;
-  }
-
-  get itemURL(): string {
-    return 'appcache://' + this.manifestURL;
-  }
-
-  onselect(selectedByUser: boolean|undefined): boolean {
-    super.onselect(selectedByUser);
-    this.resourcesPanel.showCategoryView(this.manifestURL, null);
-    return false;
-  }
-}
-
 export class ServiceWorkerCacheTreeElement extends ExpandableApplicationPanelTreeElement {
   private swCacheModel: SDK.ServiceWorkerCacheModel.ServiceWorkerCacheModel|null;
   private swCacheTreeElements: Set<SWCacheTreeElement>;
@@ -197,41 +174,6 @@ export class SWCacheTreeElement extends ApplicationPanelTreeElement {
   }
 }
 
-export class ApplicationCacheFrameTreeElement extends ApplicationPanelTreeElement {
-  private readonly sidebar: ApplicationPanelSidebar;
-  readonly frameId: Protocol.Page.FrameId;
-  readonly manifestURL: string;
-
-  constructor(sidebar: ApplicationPanelSidebar, frame: SDK.ResourceTreeModel.ResourceTreeFrame, manifestURL: string) {
-    super(sidebar.panel, '', false);
-    this.sidebar = sidebar;
-    this.frameId = frame.id;
-    this.manifestURL = manifestURL;
-    this.refreshTitles(frame);
-
-    const icon = UI.Icon.Icon.create('mediumicon-frame-top', 'navigator-folder-tree-item');
-    this.setLeadingIcons([icon]);
-  }
-
-  get itemURL(): string {
-    return 'appcache://' + this.manifestURL + '/' + encodeURI(this.titleAsText());
-  }
-
-  private refreshTitles(frame: SDK.ResourceTreeModel.ResourceTreeFrame): void {
-    this.title = frame.displayName();
-  }
-
-  frameNavigated(frame: SDK.ResourceTreeModel.ResourceTreeFrame): void {
-    this.refreshTitles(frame);
-  }
-
-  onselect(selectedByUser: boolean|undefined): boolean {
-    super.onselect(selectedByUser);
-    this.sidebar.showApplicationCache(this.frameId);
-    return false;
-  }
-}
-
 export class BackForwardCacheTreeElement extends ApplicationPanelTreeElement {
   private view?: BackForwardCacheView;
 

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -42,9 +42,7 @@ import * as Protocol from '../../generated/protocol.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import {ApplicationCacheItemsView} from './ApplicationCacheItemsView.js';
-import {ApplicationCacheModel, Events as ApplicationCacheModelEvents} from './ApplicationCacheModel.js';
-import {ApplicationCacheFrameTreeElement, ApplicationCacheManifestTreeElement, BackForwardCacheTreeElement, ServiceWorkerCacheTreeElement} from './ApplicationPanelCacheSection.js';
+import {BackForwardCacheTreeElement, ServiceWorkerCacheTreeElement} from './ApplicationPanelCacheSection.js';
 import {ApplicationPanelTreeElement, ExpandableApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import {AppManifestView} from './AppManifestView.js';
 import {BackgroundServiceModel} from './BackgroundServiceModel.js';
@@ -99,10 +97,6 @@ const UIStrings = {
   /**
   *@description Text in Application Panel Sidebar of the Application panel
   */
-  applicationCache: 'Application Cache',
-  /**
-  *@description Text in Application Panel Sidebar of the Application panel
-  */
   backgroundServices: 'Background Services',
   /**
   *@description Text for rendering frames
@@ -185,9 +179,6 @@ function assertNotMainTarget(targetId: Protocol.Target.TargetID|'main'): asserts
 
 export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.TargetManager.Observer {
   panel: ResourcesPanel;
-  private readonly applicationCacheViews: Map<Protocol.Page.FrameId, ApplicationCacheItemsView>;
-  private readonly applicationCacheFrameElements: Map<Protocol.Page.FrameId, ApplicationCacheFrameTreeElement>;
-  private readonly applicationCacheManifestElements: Map<string, ApplicationCacheManifestTreeElement>;
   private readonly sidebarTree: UI.TreeOutline.TreeOutlineInShadow;
   private readonly applicationTreeElement: UI.TreeOutline.TreeElement;
   serviceWorkersTreeElement: ServiceWorkersTreeElement;
@@ -198,7 +189,6 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
   cookieListTreeElement: ExpandableApplicationPanelTreeElement;
   trustTokensTreeElement: TrustTokensTreeElement;
   cacheStorageListTreeElement: ServiceWorkerCacheTreeElement;
-  applicationCacheListTreeElement: ExpandableApplicationPanelTreeElement;
   private backForwardCacheListTreeElement?: BackForwardCacheTreeElement;
   backgroundFetchTreeElement: BackgroundServiceTreeElement|undefined;
   backgroundSyncTreeElement: BackgroundServiceTreeElement|undefined;
@@ -218,7 +208,6 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
   };
   private target?: SDK.Target.Target;
   private databaseModel?: DatabaseModel|null;
-  private applicationCacheModel?: ApplicationCacheModel|null;
   private previousHoveredElement?: FrameTreeElement;
 
   constructor(panel: ResourcesPanel) {
@@ -226,10 +215,6 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
 
     this.panel = panel;
 
-    this.applicationCacheViews = new Map();
-    this.applicationCacheFrameElements = new Map();
-    this.applicationCacheManifestElements = new Map();
-
     this.sidebarTree = new UI.TreeOutline.TreeOutlineInShadow();
     this.sidebarTree.element.classList.add('resources-sidebar');
 
@@ -293,13 +278,6 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     const cacheTreeElement = this.addSidebarSection(cacheSectionTitle);
     this.cacheStorageListTreeElement = new ServiceWorkerCacheTreeElement(panel);
     cacheTreeElement.appendChild(this.cacheStorageListTreeElement);
-    this.applicationCacheListTreeElement =
-        new ExpandableApplicationPanelTreeElement(panel, i18nString(UIStrings.applicationCache), 'ApplicationCache');
-    this.applicationCacheListTreeElement.setLink(
-        'https://developer.chrome.com/docs/devtools/storage/applicationcache/?utm_source=devtools');
-    const applicationCacheIcon = UI.Icon.Icon.create('mediumicon-table', 'resource-tree-item');
-    this.applicationCacheListTreeElement.setLeadingIcons([applicationCacheIcon]);
-    cacheTreeElement.appendChild(this.applicationCacheListTreeElement);
 
     if (Root.Runtime.experiments.isEnabled('bfcacheDebugging')) {
       this.backForwardCacheListTreeElement = new BackForwardCacheTreeElement(panel);
@@ -445,10 +423,6 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     if (cacheStorageModel) {
       cacheStorageModel.enable();
     }
-    const resourceTreeModel = this.target && this.target.model(SDK.ResourceTreeModel.ResourceTreeModel);
-    if (resourceTreeModel) {
-      this.populateApplicationCacheTree(resourceTreeModel);
-    }
     const serviceWorkerCacheModel =
         this.target && this.target.model(SDK.ServiceWorkerCacheModel.ServiceWorkerCacheModel) || null;
     this.cacheStorageListTreeElement.initialize(serviceWorkerCacheModel);
@@ -501,13 +475,6 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.databasesListTreeElement.setExpandable(false);
   }
 
-  private resetAppCache(): void {
-    for (const frameId of this.applicationCacheFrameElements.keys()) {
-      this.applicationCacheFrameManifestRemoved({data: frameId});
-    }
-    this.applicationCacheListTreeElement.setExpandable(false);
-  }
-
   private treeElementAdded(event: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>): void {
     // On tree item selection its itemURL and those of its parents are persisted.
     // On reload/navigation we check for matches starting from the root on the
@@ -553,16 +520,10 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     if (frame.isTopFrame()) {
       this.reset();
     }
-
-    const applicationCacheFrameTreeElement = this.applicationCacheFrameElements.get(frame.id);
-    if (applicationCacheFrameTreeElement) {
-      applicationCacheFrameTreeElement.frameNavigated(frame);
-    }
     this.addCookieDocument(frame);
   }
 
-  private databaseAdded(event: Common.EventTarget.EventTargetEvent): void {
-    const database = (event.data as DatabaseModelDatabase);
+  private databaseAdded({data: database}: Common.EventTarget.EventTargetEvent<DatabaseModelDatabase>): void {
     const databaseTreeElement = new DatabaseTreeElement(this, database);
     this.databaseTreeElements.set(database, databaseTreeElement);
     this.databasesListTreeElement.appendChild(databaseTreeElement);
@@ -673,18 +634,6 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.innerShowView(view);
   }
 
-  showApplicationCache(frameId: Protocol.Page.FrameId): void {
-    if (!this.applicationCacheModel) {
-      return;
-    }
-    let view = this.applicationCacheViews.get(frameId);
-    if (!view) {
-      view = new ApplicationCacheItemsView(this.applicationCacheModel, frameId);
-      this.applicationCacheViews.set(frameId, view);
-    }
-    this.innerShowView(view);
-  }
-
   showFileSystem(view: UI.Widget.Widget): void {
     this.innerShowView(view);
   }
@@ -732,95 +681,6 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     await databasesTreeElement.updateChildren();
   }
 
-  private populateApplicationCacheTree(_resourceTreeModel: SDK.ResourceTreeModel.ResourceTreeModel): void {
-    if (!this.target) {
-      return;
-    }
-    this.applicationCacheModel = this.target.model(ApplicationCacheModel);
-    if (!this.applicationCacheModel) {
-      return;
-    }
-    this.applicationCacheModel.addEventListener(
-        ApplicationCacheModelEvents.FrameManifestAdded, this.applicationCacheFrameManifestAdded, this);
-    this.applicationCacheModel.addEventListener(
-        ApplicationCacheModelEvents.FrameManifestRemoved, this.applicationCacheFrameManifestRemoved, this);
-    this.applicationCacheModel.addEventListener(
-        ApplicationCacheModelEvents.FrameManifestsReset, this.resetAppCache, this);
-
-    this.applicationCacheModel.addEventListener(
-        ApplicationCacheModelEvents.FrameManifestStatusUpdated, this.applicationCacheFrameManifestStatusChanged, this);
-    this.applicationCacheModel.addEventListener(
-        ApplicationCacheModelEvents.NetworkStateChanged, this.applicationCacheNetworkStateChanged, this);
-  }
-
-  private applicationCacheFrameManifestAdded(event: Common.EventTarget.EventTargetEvent): void {
-    const frameId = event.data;
-    if (!this.applicationCacheModel || !this.target || frameId !== 'string') {
-      return;
-    }
-    const manifestURL = this.applicationCacheModel.frameManifestURL(frameId);
-
-    let manifestTreeElement = this.applicationCacheManifestElements.get(manifestURL);
-    if (!manifestTreeElement) {
-      manifestTreeElement = new ApplicationCacheManifestTreeElement(this.panel, manifestURL);
-      this.applicationCacheListTreeElement.appendChild(manifestTreeElement);
-      this.applicationCacheManifestElements.set(manifestURL, manifestTreeElement);
-    }
-
-    const model = this.target.model(SDK.ResourceTreeModel.ResourceTreeModel);
-    const frame = model && model.frameForId(frameId);
-    if (model && frame) {
-      const frameTreeElement = new ApplicationCacheFrameTreeElement(this, frame, manifestURL);
-      manifestTreeElement.appendChild(frameTreeElement);
-      manifestTreeElement.expand();
-      this.applicationCacheFrameElements.set(frameId, frameTreeElement);
-    }
-  }
-
-  private applicationCacheFrameManifestRemoved(event: Common.EventTarget.EventTargetEvent<Protocol.Page.FrameId>):
-      void {
-    const frameId = event.data;
-    const frameTreeElement = this.applicationCacheFrameElements.get(frameId);
-    if (!frameTreeElement) {
-      return;
-    }
-
-    const manifestURL = frameTreeElement.manifestURL;
-    this.applicationCacheFrameElements.delete(frameId);
-    this.applicationCacheViews.delete(frameId);
-    frameTreeElement.parent && frameTreeElement.parent.removeChild(frameTreeElement);
-
-    const manifestTreeElement = this.applicationCacheManifestElements.get(manifestURL);
-    if (!manifestTreeElement || manifestTreeElement.childCount()) {
-      return;
-    }
-
-    this.applicationCacheManifestElements.delete(manifestURL);
-    manifestTreeElement.parent && manifestTreeElement.parent.removeChild(manifestTreeElement);
-  }
-
-  private applicationCacheFrameManifestStatusChanged(event: Common.EventTarget.EventTargetEvent<Protocol.Page.FrameId>):
-      void {
-    if (!this.applicationCacheModel) {
-      return;
-    }
-    const frameId = event.data;
-    const status = this.applicationCacheModel.frameManifestStatus(frameId);
-
-    const view = this.applicationCacheViews.get(frameId);
-    if (view) {
-      view.updateStatus(status);
-    }
-  }
-
-  private applicationCacheNetworkStateChanged(event: Common.EventTarget.EventTargetEvent): void {
-    const isNowOnline = (event.data as boolean);
-
-    for (const view of this.applicationCacheViews.values()) {
-      view.updateNetworkState(isNowOnline);
-    }
-  }
-
   private onmousemove(event: MouseEvent): void {
     const nodeUnderMouse = (event.target as Node);
     if (!nodeUnderMouse) {
@@ -1113,9 +973,9 @@ export class IndexedDBTreeElement extends ExpandableApplicationPanelTreeElement
     }
   }
 
-  private indexedDBAdded(event: Common.EventTarget.EventTargetEvent): void {
-    const databaseId = (event.data.databaseId as DatabaseId);
-    const model = (event.data.model as IndexedDBModel);
+  private indexedDBAdded({
+    data: {databaseId, model},
+  }: Common.EventTarget.EventTargetEvent<{databaseId: DatabaseId, model: IndexedDBModel}>): void {
     this.addIndexedDB(model, databaseId);
   }
 
@@ -1126,10 +986,9 @@ export class IndexedDBTreeElement extends ExpandableApplicationPanelTreeElement
     model.refreshDatabase(databaseId);
   }
 
-  private indexedDBRemoved(event: Common.EventTarget.EventTargetEvent): void {
-    const databaseId = (event.data.databaseId as DatabaseId);
-    const model = (event.data.model as IndexedDBModel);
-
+  private indexedDBRemoved({
+    data: {databaseId, model},
+  }: Common.EventTarget.EventTargetEvent<{databaseId: DatabaseId, model: IndexedDBModel}>): void {
     const idbDatabaseTreeElement = this.idbDatabaseTreeElement(model, databaseId);
     if (!idbDatabaseTreeElement) {
       return;
@@ -1144,11 +1003,9 @@ export class IndexedDBTreeElement extends ExpandableApplicationPanelTreeElement
     this.setExpandable(this.childCount() > 0);
   }
 
-  private indexedDBLoaded(event: Common.EventTarget.EventTargetEvent): void {
-    const database = (event.data.database as IndexedDBModelDatabase);
-    const model = (event.data.model as IndexedDBModel);
-    const entriesUpdated = (event.data.entriesUpdated as boolean);
-
+  private indexedDBLoaded(
+      {data: {database, model, entriesUpdated}}: Common.EventTarget
+          .EventTargetEvent<{database: IndexedDBModelDatabase, model: IndexedDBModel, entriesUpdated: boolean}>): void {
     const idbDatabaseTreeElement = this.idbDatabaseTreeElement(model, database.databaseId);
     if (!idbDatabaseTreeElement) {
       return;
@@ -1161,11 +1018,10 @@ export class IndexedDBTreeElement extends ExpandableApplicationPanelTreeElement
     // For sniffing in tests.
   }
 
-  private indexedDBContentUpdated(event: Common.EventTarget.EventTargetEvent): void {
-    const databaseId = (event.data.databaseId as DatabaseId);
-    const objectStoreName = (event.data.objectStoreName as string);
-    const model = (event.data.model as IndexedDBModel);
-
+  private indexedDBContentUpdated({
+    data: {databaseId, objectStoreName, model},
+  }: Common.EventTarget.EventTargetEvent<{databaseId: DatabaseId, objectStoreName: string, model: IndexedDBModel}>):
+      void {
     const idbDatabaseTreeElement = this.idbDatabaseTreeElement(model, databaseId);
     if (!idbDatabaseTreeElement) {
       return;
@@ -1946,10 +1802,6 @@ export class FrameTreeElement extends ApplicationPanelTreeElement {
     const resourceTreeElement = new FrameResourceTreeElement(this.section.panel, resource);
     categoryElement.appendChild(resourceTreeElement, FrameTreeElement.presentationOrderCompare);
     this.treeElementForResource.set(resource.url, resourceTreeElement);
-
-    if (this.view) {
-      this.view.update();
-    }
   }
 
   windowOpened(targetInfo: Protocol.Target.TargetInfo): void {