chrome-devtools-frontend 1.0.1526203 → 1.0.1528866

package/front_end/panels/network/BlockedURLsPane.ts

@@ -1,6 +1,7 @@
 // Copyright 2015 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+/* eslint-disable rulesdir/no-lit-render-outside-of-view */
 /* eslint-disable rulesdir/no-imperative-dom-api */
 
 import '../../ui/legacy/legacy.js';
@@ -12,10 +13,13 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Logs from '../../models/logs/logs.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import blockedURLsPaneStyles from './blockedURLsPane.css.js';
 
+const {ref} = Directives;
+
 const UIStrings = {
   /**
    * @description Text to enable blocking of network requests
@@ -70,45 +74,81 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const NETWORK_REQUEST_BLOCKING_EXPLANATION_URL =
     'https://developer.chrome.com/docs/devtools/network-request-blocking' as Platform.DevToolsPath.UrlString;
 
+const {bindToAction} = UI.UIUtils;
+
+interface ViewInput {
+  list: UI.ListWidget.ListWidget<SDK.NetworkManager.RequestCondition>;
+  enabled: boolean;
+  toggleEnabled: () => void;
+  addPattern: () => void;
+}
+type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  render(
+      // clang-format off
+    html`
+    <style>${blockedURLsPaneStyles}</style>
+    <devtools-toolbar jslog=${VisualLogging.toolbar()}>
+      <devtools-checkbox
+        ?checked=${input.enabled}
+        @click=${input.toggleEnabled}
+        .jslogContext=${'network.enable-request-blocking'}>
+        ${i18nString(UIStrings.enableNetworkRequestBlocking)}
+      </devtools-checkbox>
+      <div class="toolbar-divider"></div>
+      <devtools-button ${bindToAction('network.add-network-request-blocking-pattern')}></devtools-button>
+      <devtools-button ${bindToAction('network.remove-all-network-request-blocking-patterns')}></devtools-button>
+    </devtools-toolbar>
+    <div class=empty-state ${ref(e => input.list.setEmptyPlaceholder(e ?? null))}>
+      <span class=empty-state-header>${i18nString(UIStrings.noNetworkRequestsBlocked)}</span>
+      <div class=empty-state-description>
+        <span>${i18nString(UIStrings.addPatternToBlock, {PH1: i18nString(UIStrings.addPattern)})}</span>
+        <x-link
+          href=${NETWORK_REQUEST_BLOCKING_EXPLANATION_URL}
+          tabindex=0
+          class=devtools-link
+          jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('learn-more')}>
+            ${i18nString(UIStrings.learnMore)}
+        </x-link>
+      </div>
+      <devtools-button
+        @click=${input.addPattern}
+        class=add-button
+        .jslogContext=${'network.add-network-request-blocking-pattern'}
+        aria-label=${i18nString(UIStrings.addNetworkRequestBlockingPattern)}
+        .variant=${Buttons.Button.Variant.TONAL}>
+          ${i18nString(UIStrings.addPattern)}
+      </devtools-button>
+    </div>
+    <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(UI.Widget.VBox)}>${input.list.element}</devtools-widget>
+    `,
+      // clang-format on
+      target);
+};
+
 export class BlockedURLsPane extends UI.Widget.VBox implements
-    UI.ListWidget.Delegate<SDK.NetworkManager.BlockedPattern> {
+    UI.ListWidget.Delegate<SDK.NetworkManager.RequestCondition> {
   private manager: SDK.NetworkManager.MultitargetNetworkManager;
-  private readonly toolbar: UI.Toolbar.Toolbar;
-  private readonly enabledCheckbox: UI.Toolbar.ToolbarCheckbox;
-  private readonly list: UI.ListWidget.ListWidget<SDK.NetworkManager.BlockedPattern>;
-  private editor: UI.ListWidget.Editor<SDK.NetworkManager.BlockedPattern>|null;
+  private readonly list: UI.ListWidget.ListWidget<SDK.NetworkManager.RequestCondition>;
+  private editor: UI.ListWidget.Editor<SDK.NetworkManager.RequestCondition>|null;
   private blockedCountForUrl: Map<string, number>;
+  #view: View;
 
-  constructor() {
-    super({
+  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+    super(target, {
       jslog: `${VisualLogging.panel('network.blocked-urls').track({resize: true})}`,
       useShadowDom: true,
     });
-    this.registerRequiredCSS(blockedURLsPaneStyles);
+    this.#view = view;
 
     this.manager = SDK.NetworkManager.MultitargetNetworkManager.instance();
     this.manager.addEventListener(
         SDK.NetworkManager.MultitargetNetworkManager.Events.BLOCKED_PATTERNS_CHANGED, this.update, this);
 
-    this.toolbar = this.contentElement.createChild('devtools-toolbar');
-    this.enabledCheckbox = new UI.Toolbar.ToolbarCheckbox(
-        i18nString(UIStrings.enableNetworkRequestBlocking), undefined, this.toggleEnabled.bind(this),
-        'network.enable-request-blocking');
-    this.toolbar.appendToolbarItem(this.enabledCheckbox);
-    this.toolbar.appendSeparator();
-    this.toolbar.appendToolbarItem(
-        UI.Toolbar.Toolbar.createActionButton('network.add-network-request-blocking-pattern'));
-    this.toolbar.appendToolbarItem(
-        UI.Toolbar.Toolbar.createActionButton('network.remove-all-network-request-blocking-patterns'));
-    this.toolbar.setAttribute('jslog', `${VisualLogging.toolbar()}`);
-
     this.list = new UI.ListWidget.ListWidget(this);
     this.list.registerRequiredCSS(blockedURLsPaneStyles);
     this.list.element.classList.add('blocked-urls');
 
-    this.list.setEmptyPlaceholder(this.createEmptyPlaceholder());
-    this.list.show(this.contentElement);
-
     this.editor = null;
 
     this.blockedCountForUrl = new Map();
@@ -120,104 +160,92 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
     Logs.NetworkLog.NetworkLog.instance().addEventListener(Logs.NetworkLog.Events.Reset, this.onNetworkLogReset, this);
   }
 
-  private createEmptyPlaceholder(): Element {
-    const placeholder = this.contentElement.createChild('div', 'empty-state');
-    placeholder.createChild('span', 'empty-state-header').textContent = i18nString(UIStrings.noNetworkRequestsBlocked);
-
-    const description = placeholder.createChild('div', 'empty-state-description');
-    description.createChild('span').textContent =
-        i18nString(UIStrings.addPatternToBlock, {PH1: i18nString(UIStrings.addPattern)});
-    const link = UI.XLink.XLink.create(
-        NETWORK_REQUEST_BLOCKING_EXPLANATION_URL, i18nString(UIStrings.learnMore), undefined, undefined, 'learn-more');
-    description.appendChild(link);
-
-    const addButton = UI.UIUtils.createTextButton(i18nString(UIStrings.addPattern), this.addPattern.bind(this), {
-      className: 'add-button',
-      jslogContext: 'network.add-network-request-blocking-pattern',
-      variant: Buttons.Button.Variant.TONAL,
-    });
-    UI.ARIAUtils.setLabel(addButton, i18nString(UIStrings.addNetworkRequestBlockingPattern));
-    placeholder.appendChild(addButton);
-    return placeholder;
+  override performUpdate(): void {
+    const enabled = this.manager.blockingEnabled();
+    this.list.element.classList.toggle('blocking-disabled', !enabled && Boolean(this.manager.requestConditions.count));
+
+    const input: ViewInput = {
+      addPattern: this.addPattern.bind(this),
+      toggleEnabled: this.toggleEnabled.bind(this),
+      enabled,
+      list: this.list,
+    };
+    this.#view(input, {}, this.contentElement);
   }
 
   addPattern(): void {
     this.manager.setBlockingEnabled(true);
-    this.list.addNewItem(0, {url: Platform.DevToolsPath.EmptyUrlString, enabled: true});
+    this.list.addNewItem(
+        0, new SDK.NetworkManager.RequestCondition({url: Platform.DevToolsPath.EmptyUrlString, enabled: true}));
   }
 
   removeAllPatterns(): void {
-    this.manager.setBlockedPatterns([]);
+    this.manager.requestConditions.clear();
   }
 
-  renderItem(pattern: SDK.NetworkManager.BlockedPattern, editable: boolean): Element {
-    const count = this.blockedRequestsCount(pattern.url);
+  renderItem(condition: SDK.NetworkManager.RequestCondition, editable: boolean): Element {
+    const count = this.blockedRequestsCount(condition.url);
     const element = document.createElement('div');
     element.classList.add('blocked-url');
-    const checkbox = element.createChild('input', 'blocked-url-checkbox');
-    checkbox.type = 'checkbox';
-    checkbox.checked = pattern.enabled;
-    checkbox.disabled = !editable;
-    checkbox.setAttribute('jslog', `${VisualLogging.toggle().track({change: true})}`);
-    element.createChild('div', 'blocked-url-label').textContent = pattern.url;
-    element.createChild('div', 'blocked-url-count').textContent = i18nString(UIStrings.dBlocked, {PH1: count});
-    if (editable) {
-      element.addEventListener('click', event => this.togglePattern(pattern, event));
-      checkbox.addEventListener('click', event => this.togglePattern(pattern, event));
-    }
+    const toggle = (e: Event): void => {
+      if (editable) {
+        e.consume(true);
+        condition.enabled = !condition.enabled;
+      }
+    };
+    render(
+        // clang-format off
+        html`
+    <input class=blocked-url-checkbox
+      @click=${toggle}
+      type=checkbox
+      ?checked=${condition.enabled}
+      ?disabled=${!editable}
+      .jslog=${VisualLogging.toggle().track({ change: true })}>
+    <div @click=${toggle} class=blocked-url-label>${condition.url}</div>
+    <div class=blocked-url-count>${i18nString(UIStrings.dBlocked, {PH1: count})}</div>`,
+      // clang-format off
+        element);
     return element;
   }
 
-  private togglePattern(pattern: SDK.NetworkManager.BlockedPattern, event: Event): void {
-    event.consume(true);
-    const patterns = this.manager.blockedPatterns();
-    patterns.splice(patterns.indexOf(pattern), 1, {enabled: !pattern.enabled, url: pattern.url});
-    this.manager.setBlockedPatterns(patterns);
-  }
-
   private toggleEnabled(): void {
     this.manager.setBlockingEnabled(!this.manager.blockingEnabled());
     this.update();
   }
 
-  removeItemRequested(_pattern: SDK.NetworkManager.BlockedPattern, index: number): void {
-    const patterns = this.manager.blockedPatterns();
-    patterns.splice(index, 1);
-    this.manager.setBlockedPatterns(patterns);
+  removeItemRequested(condition: SDK.NetworkManager.RequestCondition): void {
+     this.manager.requestConditions.delete(condition);
     UI.ARIAUtils.LiveAnnouncer.alert(UIStrings.itemDeleted);
   }
 
-  beginEdit(pattern: SDK.NetworkManager.BlockedPattern): UI.ListWidget.Editor<SDK.NetworkManager.BlockedPattern> {
+  beginEdit(pattern: SDK.NetworkManager.RequestCondition): UI.ListWidget.Editor<SDK.NetworkManager.RequestCondition> {
     this.editor = this.createEditor();
     this.editor.control('url').value = pattern.url;
     return this.editor;
   }
 
   commitEdit(
-      item: SDK.NetworkManager.BlockedPattern, editor: UI.ListWidget.Editor<SDK.NetworkManager.BlockedPattern>,
+      item: SDK.NetworkManager.RequestCondition, editor: UI.ListWidget.Editor<SDK.NetworkManager.RequestCondition>,
       isNew: boolean): void {
-    const url = editor.control('url').value as Platform.DevToolsPath.UrlString;
-    const patterns = this.manager.blockedPatterns();
+    item.url =
+     editor.control('url').value as Platform.DevToolsPath.UrlString;
     if (isNew) {
-      patterns.push({enabled: true, url});
-    } else {
-      patterns.splice(patterns.indexOf(item), 1, {enabled: true, url});
+      this.manager.requestConditions.add(item);
     }
-
-    this.manager.setBlockedPatterns(patterns);
   }
 
-  private createEditor(): UI.ListWidget.Editor<SDK.NetworkManager.BlockedPattern> {
+  private createEditor(): UI.ListWidget.Editor<SDK.NetworkManager.RequestCondition> {
     if (this.editor) {
       return this.editor;
     }
 
-    const editor = new UI.ListWidget.Editor<SDK.NetworkManager.BlockedPattern>();
+    const editor = new UI.ListWidget.Editor<SDK.NetworkManager.RequestCondition>();
     const content = editor.contentElement();
     const titles = content.createChild('div', 'blocked-url-edit-row');
     titles.createChild('div').textContent = i18nString(UIStrings.textPatternToBlockMatching);
     const fields = content.createChild('div', 'blocked-url-edit-row');
-    const validator = (_item: SDK.NetworkManager.BlockedPattern, _index: number, input: UI.ListWidget.EditorControl): {
+    const validator = (_item: SDK.NetworkManager.RequestCondition, _index: number, input: UI.ListWidget.EditorControl): {
       valid: boolean,
       errorMessage: Common.UIString.LocalizedString|undefined,
     } => {
@@ -226,7 +254,7 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
       if (!input.value) {
         errorMessage = i18nString(UIStrings.patternInputCannotBeEmpty);
         valid = false;
-      } else if (this.manager.blockedPatterns().find(pattern => pattern.url === input.value)) {
+      } else if (this.manager.requestConditions.has(input.value)) {
         errorMessage = i18nString(UIStrings.patternAlreadyExists);
         valid = false;
       }
@@ -239,13 +267,11 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
 
   update(): void {
     const enabled = this.manager.blockingEnabled();
-    this.list.element.classList.toggle('blocking-disabled', !enabled && Boolean(this.manager.blockedPatterns().length));
-
-    this.enabledCheckbox.setChecked(enabled);
     this.list.clear();
-    for (const pattern of this.manager.blockedPatterns()) {
+    for (const pattern of this.manager.requestConditions.conditions) {
       this.list.appendItem(pattern, enabled);
     }
+    this.requestUpdate();
   }
 
   private blockedRequestsCount(url: string): number {

package/front_end/panels/network/EventSourceMessagesView.ts

@@ -117,6 +117,7 @@ export class EventSourceMessagesView extends UI.Widget.VBox {
   }
 
   override willHide(): void {
+    super.willHide();
     this.request.removeEventListener(SDK.NetworkRequest.Events.EVENT_SOURCE_MESSAGE_ADDED, this.messageAdded, this);
   }
 

package/front_end/panels/network/NetworkItemView.ts

@@ -268,6 +268,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
   }
 
   override willHide(): void {
+    super.willHide();
     this.#request.removeEventListener(
         SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.requestHeadersChanged, this);
     this.#request.removeEventListener(

package/front_end/panels/network/NetworkLogView.ts

@@ -1390,6 +1390,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   override willHide(): void {
+    super.willHide();
     this.columnsInternal.willHide();
   }
 
@@ -1847,23 +1848,24 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     if (request) {
       const maxBlockedURLLength = 20;
       const manager = SDK.NetworkManager.MultitargetNetworkManager.instance();
-      let patterns = manager.blockedPatterns();
 
       function addBlockedURL(url: string): void {
-        patterns.push({enabled: true, url: url as Platform.DevToolsPath.UrlString});
-        manager.setBlockedPatterns(patterns);
+        manager.requestConditions.add(
+            new SDK.NetworkManager.RequestCondition({enabled: true, url: url as Platform.DevToolsPath.UrlString}));
         manager.setBlockingEnabled(true);
         void UI.ViewManager.ViewManager.instance().showView('network.blocked-urls');
       }
 
       function removeBlockedURL(url: string): void {
-        patterns = patterns.filter(pattern => pattern.url !== url);
-        manager.setBlockedPatterns(patterns);
+        const entry = manager.requestConditions.conditions.find(condition => condition.url === url);
+        if (entry) {
+          manager.requestConditions.delete(entry);
+        }
         void UI.ViewManager.ViewManager.instance().showView('network.blocked-urls');
       }
 
       const urlWithoutScheme = request.parsedURL.urlWithoutScheme();
-      if (urlWithoutScheme && !patterns.find(pattern => pattern.url === urlWithoutScheme)) {
+      if (urlWithoutScheme && !manager.requestConditions.has(urlWithoutScheme)) {
         contextMenu.debugSection().appendItem(
             i18nString(UIStrings.blockRequestUrl), addBlockedURL.bind(null, urlWithoutScheme),
             {jslogContext: 'block-request-url'});
@@ -1875,7 +1877,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       }
 
       const domain = request.parsedURL.domain();
-      if (domain && !patterns.find(pattern => pattern.url === domain)) {
+      if (domain && !manager.requestConditions.has(domain)) {
         contextMenu.debugSection().appendItem(
             i18nString(UIStrings.blockRequestDomain), addBlockedURL.bind(null, domain),
             {jslogContext: 'block-request-domain'});

package/front_end/panels/network/NetworkOverview.ts

@@ -98,6 +98,7 @@ export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOvervie
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.onResize();
   }
 

package/front_end/panels/network/RequestCookiesView.ts

@@ -317,6 +317,7 @@ export class RequestCookiesView extends UI.Widget.Widget {
   }
 
   override willHide(): void {
+    super.willHide();
     this.request.removeEventListener(
         SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.refreshRequestCookiesView, this);
     this.request.removeEventListener(

package/front_end/panels/network/RequestHTMLView.ts

@@ -51,6 +51,7 @@ export class RequestHTMLView extends UI.Widget.VBox {
   }
 
   override willHide(): void {
+    super.willHide();
     this.requestUpdate();
   }
 

package/front_end/panels/network/RequestInitiatorView.ts

@@ -140,6 +140,7 @@ export class RequestInitiatorView extends UI.Widget.VBox {
   }
 
   override wasShown(): void {
+    super.wasShown();
     if (this.hasShown) {
       return;
     }

package/front_end/panels/network/RequestPayloadView.ts

@@ -145,6 +145,7 @@ export class RequestPayloadView extends UI.Widget.VBox {
   }
 
   override willHide(): void {
+    super.willHide();
     this.request.removeEventListener(SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.refreshFormData, this);
   }
 

package/front_end/panels/network/RequestPreviewView.ts

@@ -53,6 +53,7 @@ export class RequestPreviewView extends UI.Widget.VBox {
   }
 
   override wasShown(): void {
+    super.wasShown();
     void this.doShowPreview();
   }
 

package/front_end/panels/network/RequestResponseView.ts

@@ -56,7 +56,7 @@ export const DEFAULT_VIEW: View = (input: ViewInput, output: ViewOutput, target:
                       i18nString(UIStrings.failedToLoadResponseData), (input.contentData as {error: string}).error,
                       element))}></devtools-widget>`;
     // clang-format on
-  } else if (input.request.statusCode === 204) {
+  } else if (input.request.statusCode === 204 || input.request.failed) {
     // clang-format off
     widget = html`<devtools-widget
                      .widgetConfig=${widgetConfig(element => new UI.EmptyWidget.EmptyWidget(
@@ -94,6 +94,7 @@ export class RequestResponseView extends UI.Widget.VBox {
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.requestUpdate();
   }
 

package/front_end/panels/network/RequestTimingView.ts

@@ -634,6 +634,7 @@ export class RequestTimingView extends UI.Widget.VBox {
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.request.addEventListener(SDK.NetworkRequest.Events.TIMING_CHANGED, this.refresh, this);
     this.request.addEventListener(SDK.NetworkRequest.Events.FINISHED_LOADING, this.refresh, this);
     this.calculator.addEventListener(NetworkTimeCalculator.Events.BOUNDARIES_CHANGED, this.boundaryChanged, this);
@@ -641,6 +642,7 @@ export class RequestTimingView extends UI.Widget.VBox {
   }
 
   override willHide(): void {
+    super.willHide();
     this.request.removeEventListener(SDK.NetworkRequest.Events.TIMING_CHANGED, this.refresh, this);
     this.request.removeEventListener(SDK.NetworkRequest.Events.FINISHED_LOADING, this.refresh, this);
     this.calculator.removeEventListener(NetworkTimeCalculator.Events.BOUNDARIES_CHANGED, this.boundaryChanged, this);

package/front_end/panels/network/ResourceDirectSocketChunkView.ts

@@ -79,6 +79,7 @@ export class ResourceDirectSocketChunkView extends ResourceChunkView<SDK.Network
   }
 
   override willHide(): void {
+    super.willHide();
     this.request.removeEventListener(
         SDK.NetworkRequest.Events.DIRECTSOCKET_CHUNK_ADDED, this.onDirectSocketChunkAdded, this);
   }

package/front_end/panels/network/ResourceWebSocketFrameView.ts

@@ -120,6 +120,7 @@ export class ResourceWebSocketFrameView extends ResourceChunkView<SDK.NetworkReq
   }
 
   override willHide(): void {
+    super.willHide();
     this.request.removeEventListener(SDK.NetworkRequest.Events.WEBSOCKET_FRAME_ADDED, this.onWebSocketFrameAdded, this);
   }
 

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

@@ -127,6 +127,7 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.#request.addEventListener(SDK.NetworkRequest.Events.REMOTE_ADDRESS_CHANGED, this.#refreshHeadersView, this);
     this.#request.addEventListener(SDK.NetworkRequest.Events.FINISHED_LOADING, this.#refreshHeadersView, this);
     this.#request.addEventListener(SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.#refreshHeadersView, this);
@@ -137,6 +138,7 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
   }
 
   override willHide(): void {
+    super.willHide();
     this.#request.removeEventListener(SDK.NetworkRequest.Events.REMOTE_ADDRESS_CHANGED, this.#refreshHeadersView, this);
     this.#request.removeEventListener(SDK.NetworkRequest.Events.FINISHED_LOADING, this.#refreshHeadersView, this);
     this.#request.removeEventListener(

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

@@ -112,11 +112,13 @@ export class RequestTrustTokensView extends LegacyWrapper.LegacyWrapper.Wrappabl
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.#request.addEventListener(SDK.NetworkRequest.Events.TRUST_TOKEN_RESULT_ADDED, this.render, this);
     void this.render();
   }
 
   override willHide(): void {
+    super.willHide();
     this.#request.removeEventListener(SDK.NetworkRequest.Events.TRUST_TOKEN_RESULT_ADDED, this.render, this);
   }
 

package/front_end/panels/performance_monitor/PerformanceMonitor.ts

@@ -157,6 +157,7 @@ export class PerformanceMonitorImpl extends UI.Widget.HBox implements
   }
 
   override wasShown(): void {
+    super.wasShown();
     if (!this.model) {
       return;
     }
@@ -176,6 +177,7 @@ export class PerformanceMonitorImpl extends UI.Widget.HBox implements
   }
 
   override willHide(): void {
+    super.willHide();
     if (!this.model) {
       return;
     }

package/front_end/panels/profiler/HeapSnapshotDataGrids.ts

@@ -212,6 +212,7 @@ export class HeapSnapshotSortableDataGrid extends Common.ObjectWrapper
   }
 
   override wasShown(): void {
+    super.wasShown();
     if (this.nameFilter) {
       this.nameFilter.addEventListener(UI.Toolbar.ToolbarInput.Event.TEXT_CHANGED, this.onNameFilterChanged, this);
       this.updateVisibleNodes(true);
@@ -228,6 +229,7 @@ export class HeapSnapshotSortableDataGrid extends Common.ObjectWrapper
   }
 
   override willHide(): void {
+    super.willHide();
     if (this.nameFilter) {
       this.nameFilter.removeEventListener(UI.Toolbar.ToolbarInput.Event.TEXT_CHANGED, this.onNameFilterChanged, this);
     }

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -143,6 +143,11 @@ const UIStrings = {
    * objects kept alive by the DevTools console
    */
   objectsRetainedByConsole: 'Objects retained by DevTools Console',
+  /**
+   * @description An option which will filter the heap snapshot to show only
+   * objects retained by event handlers
+   */
+  objectsRetainedByEventHandlers: 'Objects retained by Event Handlers',
   /**
    * @description Text for the summary view
    */
@@ -624,6 +629,7 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
   }
 
   override willHide(): void {
+    super.willHide();
     this.currentSearchResultIndex = -1;
     this.popoverHelper.hidePopover();
   }
@@ -771,6 +777,7 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
     {uiName: i18nString(UIStrings.duplicatedStrings), filterName: 'duplicatedStrings'},
     {uiName: i18nString(UIStrings.objectsRetainedByDetachedDomNodes), filterName: 'objectsRetainedByDetachedDomNodes'},
     {uiName: i18nString(UIStrings.objectsRetainedByConsole), filterName: 'objectsRetainedByConsole'},
+    {uiName: i18nString(UIStrings.objectsRetainedByEventHandlers), filterName: 'objectsRetainedByEventHandlers'},
   ];
 
   changeFilter(): void {

package/front_end/panels/profiler/IsolateSelector.ts

@@ -102,6 +102,7 @@ export class IsolateSelector extends UI.Widget.VBox implements UI.ListControl.Li
   }
 
   override willHide(): void {
+    super.willHide();
     SDK.IsolateManager.IsolateManager.instance().removeEventListener(
         SDK.IsolateManager.Events.MEMORY_CHANGED, this.heapStatsChanged, this);
   }

package/front_end/panels/profiler/LiveHeapProfileView.ts

@@ -178,6 +178,7 @@ export class LiveHeapProfileView extends UI.Widget.VBox {
   }
 
   override willHide(): void {
+    super.willHide();
     ++this.currentPollId;
     this.setting.removeChangeListener(this.settingChanged, this);
   }

package/front_end/panels/profiler/ProfileView.ts

@@ -325,6 +325,7 @@ export class ProfileView extends UI.View.SimpleView implements UI.SearchableView
   }
 
   override willHide(): void {
+    super.willHide();
     this.currentSearchResultIndex = -1;
   }
 

package/front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -530,6 +530,7 @@ export class ProtocolMonitorImpl extends UI.Panel.Panel {
   }
 
   override wasShown(): void {
+    super.wasShown();
     if (this.started) {
       return;
     }

package/front_end/panels/recorder/RecorderPanel.ts

@@ -36,12 +36,14 @@ export class RecorderPanel extends UI.Panel.Panel {
   }
 
   override wasShown(): void {
+    super.wasShown();
     UI.Context.Context.instance().setFlavor(RecorderPanel, this);
     // Focus controller so shortcuts become active
     this.#controller.focus();
   }
 
   override willHide(): void {
+    super.willHide();
     UI.Context.Context.instance().setFlavor(RecorderPanel, null);
   }
 

package/front_end/panels/screencast/ScreencastView.ts

@@ -175,6 +175,7 @@ export class ScreencastView extends UI.Widget.VBox implements SDK.OverlayModel.H
   }
 
   override willHide(): void {
+    super.willHide();
     this.stopCasting();
   }
 

package/front_end/panels/search/SearchView.ts

@@ -542,6 +542,7 @@ export class SearchView extends UI.Widget.VBox {
   }
 
   override willHide(): void {
+    super.willHide();
     this.#stopSearch();
   }