chrome-devtools-frontend 1.0.930993 → 1.0.932348

package/front_end/panels/application/BackForwardCacheView.ts

@@ -10,6 +10,9 @@ import * as ReportView from '../../ui/components/report_view/report_view.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Protocol from '../../generated/protocol.js';
 
+import {NotRestoredReasonDescription} from './BackForwardCacheStrings.js';
+import backForwardCacheViewStyles from './backForwardCacheView.css.js';
+
 const UIStrings = {
   /**
    * @description Title text in Back-forward Cache view of the Application panel
@@ -79,6 +82,11 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
     this.update();
   }
 
+  wasShown(): void {
+    super.wasShown();
+    this.registerCSSFiles([backForwardCacheViewStyles]);
+  }
+
   private onBackForwardCacheUpdate(): void {
     this.update();
   }
@@ -159,18 +167,26 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
     // clang-format on
   }
 
-  private renderExplanations(description: string, explanations: Protocol.Page.BackForwardCacheNotRestoredExplanation[]):
+  private renderExplanations(category: string, explanations: Protocol.Page.BackForwardCacheNotRestoredExplanation[]):
       LitHtml.TemplateResult {
     return LitHtml.html`
       ${
-        explanations.length > 0 ?
-            LitHtml.html`
-          <${ReportView.ReportView.ReportKey.litTagName}>${description}</${ReportView.ReportView.ReportKey.litTagName}>
-          <${ReportView.ReportView.ReportValue.litTagName}>${
-                explanations.map(explanation => LitHtml.html`<div>${explanation.reason}</div>`)}</${
-                ReportView.ReportView.ReportValue.litTagName}>
+        explanations.length > 0 ? LitHtml.html`
+          <${ReportView.ReportView.ReportKey.litTagName}>${category}</${ReportView.ReportView.ReportKey.litTagName}>
+          <${ReportView.ReportView.ReportValue.litTagName}>
+          <ul class='not-restored-reason-list'>${explanations.map(explanation => this.renderReason(explanation))}</ul>
+          </${ReportView.ReportView.ReportValue.litTagName}>
         ` :
-            LitHtml.nothing}
+                                  LitHtml.nothing}
+    `;
+  }
+
+  private renderReason(explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation): LitHtml.TemplateResult {
+    return LitHtml.html`
+      <li>${explanation.reason} : ${
+        (explanation.reason in NotRestoredReasonDescription) ?
+            LitHtml.html`${NotRestoredReasonDescription[explanation.reason].name()}` :
+            LitHtml.nothing} </li>
     `;
   }
 }

package/front_end/panels/application/ReportingApiReportsView.ts

@@ -30,10 +30,10 @@ export class ReportingApiReportsView extends UI.SplitWidget.SplitWidget {
     super(/* isVertical: */ false, /* secondIsSidebar: */ true);
     const topPanel = new UI.Widget.VBox();
     const bottomPanel = new UI.Widget.VBox();
-    const resizer = topPanel.element.createChild('div');
+    topPanel.setMinimumSize(0, 80);
     this.setMainWidget(topPanel);
+    bottomPanel.setMinimumSize(0, 40);
     this.setSidebarWidget(bottomPanel);
-    this.installResizer(resizer);
 
     topPanel.contentElement.appendChild(this.reportsGrid);
     this.reportsGrid.addEventListener('cellfocused', this.onFocus.bind(this));
@@ -73,6 +73,7 @@ export class ReportingApiReportsView extends UI.SplitWidget.SplitWidget {
     const report = cell && this.reports.find(report => report.id === cell.value);
     if (report) {
       const jsonView = await SourceFrame.JSONView.JSONView.createView(JSON.stringify(report.body));
+      jsonView?.setMinimumSize(0, 40);
       if (jsonView) {
         this.setSidebarWidget(jsonView);
       }

package/front_end/panels/application/ReportingApiView.ts

@@ -15,12 +15,11 @@ export class ReportingApiView extends UI.SplitWidget.SplitWidget {
     const networkManager = mainTarget && mainTarget.model(SDK.NetworkManager.NetworkManager);
     if (networkManager) {
       const reportingApiReportsView = new ReportingApiReportsView(networkManager);
-      const resizer = reportingApiReportsView.element.createChild('div');
       const reportingApiEndpointsView = new UI.Widget.VBox();
+      reportingApiEndpointsView.setMinimumSize(0, 40);
       reportingApiEndpointsView.contentElement.appendChild(new ApplicationComponents.EndpointsGrid.EndpointsGrid());
       this.setMainWidget(reportingApiReportsView);
       this.setSidebarWidget(reportingApiEndpointsView);
-      this.installResizer(resizer);
       networkManager.enableReportingApi();
     }
   }

package/front_end/panels/application/backForwardCacheView.css

@@ -0,0 +1,10 @@
+/*
+ * Copyright 2021 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+.not-restored-reason-list {
+  margin: 0;
+  list-style-type: none;
+  padding-inline-start: 0;
+}

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -20,37 +20,37 @@ const str_ = i18n.i18n.registerUIStrings('panels/browser_debugger/CategorizedBre
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
-  private readonly categoriesTreeOutline: UI.TreeOutline.TreeOutlineInShadow;
-  private readonly viewId: string;
-  private readonly detailsPausedReason: Protocol.Debugger.PausedEventReason;
-  private readonly categories: Map<string, Item>;
-  private readonly breakpoints: Map<SDK.DOMDebuggerModel.CategorizedBreakpoint, Item>;
-  private highlightedElement?: HTMLLIElement;
+  readonly #categoriesTreeOutline: UI.TreeOutline.TreeOutlineInShadow;
+  readonly #viewId: string;
+  readonly #detailsPausedReason: Protocol.Debugger.PausedEventReason;
+  readonly #categories: Map<string, Item>;
+  readonly #breakpoints: Map<SDK.DOMDebuggerModel.CategorizedBreakpoint, Item>;
+  #highlightedElement?: HTMLLIElement;
   constructor(
       categories: string[], breakpoints: SDK.DOMDebuggerModel.CategorizedBreakpoint[], viewId: string,
       detailsPausedReason: Protocol.Debugger.PausedEventReason) {
     super(true);
-    this.categoriesTreeOutline = new UI.TreeOutline.TreeOutlineInShadow();
+    this.#categoriesTreeOutline = new UI.TreeOutline.TreeOutlineInShadow();
 
-    this.categoriesTreeOutline.setShowSelectionOnKeyboardFocus(/* show */ true);
-    this.contentElement.appendChild(this.categoriesTreeOutline.element);
-    this.viewId = viewId;
-    this.detailsPausedReason = detailsPausedReason;
+    this.#categoriesTreeOutline.setShowSelectionOnKeyboardFocus(/* show */ true);
+    this.contentElement.appendChild(this.#categoriesTreeOutline.element);
+    this.#viewId = viewId;
+    this.#detailsPausedReason = detailsPausedReason;
 
-    this.categories = new Map();
+    this.#categories = new Map();
     for (const category of categories) {
-      if (!this.categories.has(category)) {
+      if (!this.#categories.has(category)) {
         this.createCategory(category);
       }
     }
     if (categories.length > 0) {
-      const firstCategory = this.categories.get(categories[0]);
+      const firstCategory = this.#categories.get(categories[0]);
       if (firstCategory) {
         firstCategory.element.select();
       }
     }
 
-    this.breakpoints = new Map();
+    this.#breakpoints = new Map();
     for (const breakpoint of breakpoints) {
       this.createBreakpoint(breakpoint);
     }
@@ -62,8 +62,16 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     UI.Context.Context.instance().addFlavorChangeListener(SDK.Target.Target, this.update, this);
   }
 
+  get categories(): Map<string, Item> {
+    return this.#categories;
+  }
+
+  get breakpoints(): Map<SDK.DOMDebuggerModel.CategorizedBreakpoint, Item> {
+    return this.#breakpoints;
+  }
+
   focus(): void {
-    this.categoriesTreeOutline.forceSelect();
+    this.#categoriesTreeOutline.forceSelect();
   }
 
   private createCategory(name: string): void {
@@ -74,7 +82,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     const treeElement = new UI.TreeOutline.TreeElement(labelNode);
     treeElement.listItemElement.addEventListener('keydown', event => {
       if (event.key === ' ') {
-        const category = this.categories.get(name);
+        const category = this.#categories.get(name);
         if (category) {
           category.checkbox.click();
         }
@@ -83,9 +91,9 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     });
     labelNode.checkboxElement.addEventListener('focus', () => treeElement.listItemElement.focus());
     UI.ARIAUtils.setChecked(treeElement.listItemElement, false);
-    this.categoriesTreeOutline.appendChild(treeElement);
+    this.#categoriesTreeOutline.appendChild(treeElement);
 
-    this.categories.set(name, {element: treeElement, checkbox: labelNode.checkboxElement});
+    this.#categories.set(name, {element: treeElement, checkbox: labelNode.checkboxElement});
   }
 
   protected createBreakpoint(breakpoint: SDK.DOMDebuggerModel.CategorizedBreakpoint): void {
@@ -97,7 +105,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     const treeElement = new UI.TreeOutline.TreeElement(labelNode);
     treeElement.listItemElement.addEventListener('keydown', event => {
       if (event.key === ' ') {
-        const breakpointToClick = this.breakpoints.get(breakpoint);
+        const breakpointToClick = this.#breakpoints.get(breakpoint);
         if (breakpointToClick) {
           breakpointToClick.checkbox.click();
         }
@@ -107,12 +115,12 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     labelNode.checkboxElement.addEventListener('focus', () => treeElement.listItemElement.focus());
     UI.ARIAUtils.setChecked(treeElement.listItemElement, false);
     treeElement.listItemElement.createChild('div', 'breakpoint-hit-marker');
-    const category = this.categories.get(breakpoint.category());
+    const category = this.#categories.get(breakpoint.category());
     if (category) {
       category.element.appendChild(treeElement);
     }
     // Better to return that to produce a side-effect
-    this.breakpoints.set(breakpoint, {element: treeElement, checkbox: labelNode.checkboxElement});
+    this.#breakpoints.set(breakpoint, {element: treeElement, checkbox: labelNode.checkboxElement});
   }
 
   protected getBreakpointFromPausedDetails(_details: SDK.DebuggerModel.DebuggerPausedDetails):
@@ -125,11 +133,11 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     const debuggerModel = target ? target.model(SDK.DebuggerModel.DebuggerModel) : null;
     const details = debuggerModel ? debuggerModel.debuggerPausedDetails() : null;
 
-    if (!details || details.reason !== this.detailsPausedReason || !details.auxData) {
-      if (this.highlightedElement) {
-        UI.ARIAUtils.setDescription(this.highlightedElement, '');
-        this.highlightedElement.classList.remove('breakpoint-hit');
-        delete this.highlightedElement;
+    if (!details || details.reason !== this.#detailsPausedReason || !details.auxData) {
+      if (this.#highlightedElement) {
+        UI.ARIAUtils.setDescription(this.#highlightedElement, '');
+        this.#highlightedElement.classList.remove('breakpoint-hit');
+        this.#highlightedElement = undefined;
       }
       return;
     }
@@ -138,22 +146,22 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
       return;
     }
 
-    UI.ViewManager.ViewManager.instance().showView(this.viewId);
-    const category = this.categories.get(breakpoint.category());
+    UI.ViewManager.ViewManager.instance().showView(this.#viewId);
+    const category = this.#categories.get(breakpoint.category());
     if (category) {
       category.element.expand();
     }
-    const matchingBreakpoint = this.breakpoints.get(breakpoint);
+    const matchingBreakpoint = this.#breakpoints.get(breakpoint);
     if (matchingBreakpoint) {
-      this.highlightedElement = matchingBreakpoint.element.listItemElement;
-      UI.ARIAUtils.setDescription(this.highlightedElement, i18nString(UIStrings.breakpointHit));
-      this.highlightedElement.classList.add('breakpoint-hit');
+      this.#highlightedElement = matchingBreakpoint.element.listItemElement;
+      UI.ARIAUtils.setDescription(this.#highlightedElement, i18nString(UIStrings.breakpointHit));
+      this.#highlightedElement.classList.add('breakpoint-hit');
     }
   }
 
   // Probably can be kept although eventListener does not call this._breakpointCheckboxClicke
   private categoryCheckboxClicked(category: string): void {
-    const item = this.categories.get(category);
+    const item = this.#categories.get(category);
     if (!item) {
       return;
     }
@@ -161,9 +169,9 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     const enabled = item.checkbox.checked;
     UI.ARIAUtils.setChecked(item.element.listItemElement, enabled);
 
-    for (const breakpoint of this.breakpoints.keys()) {
+    for (const breakpoint of this.#breakpoints.keys()) {
       if (breakpoint.category() === category) {
-        const matchingBreakpoint = this.breakpoints.get(breakpoint);
+        const matchingBreakpoint = this.#breakpoints.get(breakpoint);
         if (matchingBreakpoint) {
           matchingBreakpoint.checkbox.checked = enabled;
           this.toggleBreakpoint(breakpoint, enabled);
@@ -177,7 +185,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
   }
 
   private breakpointCheckboxClicked(breakpoint: SDK.DOMDebuggerModel.CategorizedBreakpoint): void {
-    const item = this.breakpoints.get(breakpoint);
+    const item = this.#breakpoints.get(breakpoint);
     if (!item) {
       return;
     }
@@ -188,7 +196,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     // Put the rest in a separate function
     let hasEnabled = false;
     let hasDisabled = false;
-    for (const other of this.breakpoints.keys()) {
+    for (const other of this.#breakpoints.keys()) {
       if (other.category() === breakpoint.category()) {
         if (other.enabled()) {
           hasEnabled = true;
@@ -198,7 +206,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
       }
     }
 
-    const category = this.categories.get(breakpoint.category());
+    const category = this.#categories.get(breakpoint.category());
     if (!category) {
       return;
     }
@@ -212,7 +220,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
   }
   wasShown(): void {
     super.wasShown();
-    this.categoriesTreeOutline.registerCSSFiles([categorizedBreakpointsSidebarPaneStyles]);
+    this.#categoriesTreeOutline.registerCSSFiles([categorizedBreakpointsSidebarPaneStyles]);
   }
 }
 export interface Item {

package/front_end/panels/browser_debugger/DOMBreakpointsSidebarPane.ts

@@ -119,25 +119,25 @@ let domBreakpointsSidebarPaneInstance: DOMBreakpointsSidebarPane;
 export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
     UI.ContextFlavorListener.ContextFlavorListener, UI.ListControl.ListDelegate<SDK.DOMDebuggerModel.DOMBreakpoint> {
   elementToCheckboxes: WeakMap<Element, HTMLInputElement>;
-  private readonly emptyElement: HTMLElement;
-  private readonly breakpoints: UI.ListModel.ListModel<SDK.DOMDebuggerModel.DOMBreakpoint>;
-  private list: UI.ListControl.ListControl<SDK.DOMDebuggerModel.DOMBreakpoint>;
-  private highlightedBreakpoint: SDK.DOMDebuggerModel.DOMBreakpoint|null;
+  readonly #emptyElement: HTMLElement;
+  readonly #breakpoints: UI.ListModel.ListModel<SDK.DOMDebuggerModel.DOMBreakpoint>;
+  #list: UI.ListControl.ListControl<SDK.DOMDebuggerModel.DOMBreakpoint>;
+  #highlightedBreakpoint: SDK.DOMDebuggerModel.DOMBreakpoint|null;
 
   private constructor() {
     super(true);
 
     this.elementToCheckboxes = new WeakMap();
 
-    this.emptyElement = this.contentElement.createChild('div', 'gray-info-message');
-    this.emptyElement.textContent = i18nString(UIStrings.noBreakpoints);
-    this.breakpoints = new UI.ListModel.ListModel();
-    this.list = new UI.ListControl.ListControl(this.breakpoints, this, UI.ListControl.ListMode.NonViewport);
-    this.contentElement.appendChild(this.list.element);
-    this.list.element.classList.add('breakpoint-list', 'hidden');
-    UI.ARIAUtils.markAsList(this.list.element);
-    UI.ARIAUtils.setAccessibleName(this.list.element, i18nString(UIStrings.domBreakpointsList));
-    this.emptyElement.tabIndex = -1;
+    this.#emptyElement = this.contentElement.createChild('div', 'gray-info-message');
+    this.#emptyElement.textContent = i18nString(UIStrings.noBreakpoints);
+    this.#breakpoints = new UI.ListModel.ListModel();
+    this.#list = new UI.ListControl.ListControl(this.#breakpoints, this, UI.ListControl.ListMode.NonViewport);
+    this.contentElement.appendChild(this.#list.element);
+    this.#list.element.classList.add('breakpoint-list', 'hidden');
+    UI.ARIAUtils.markAsList(this.#list.element);
+    UI.ARIAUtils.setAccessibleName(this.#list.element, i18nString(UIStrings.domBreakpointsList));
+    this.#emptyElement.tabIndex = -1;
 
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.DOMDebuggerModel.DOMDebuggerModel, SDK.DOMDebuggerModel.Events.DOMBreakpointAdded, this.breakpointAdded,
@@ -157,7 +157,7 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
       }
     }
 
-    this.highlightedBreakpoint = null;
+    this.#highlightedBreakpoint = null;
     this.update();
   }
 
@@ -208,7 +208,7 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
     labelElement.appendChild(description);
 
     const checkedStateText = item.enabled ? i18nString(UIStrings.checked) : i18nString(UIStrings.unchecked);
-    if (item === this.highlightedBreakpoint) {
+    if (item === this.#highlightedBreakpoint) {
       element.classList.add('breakpoint-hit');
       UI.ARIAUtils.setDescription(element, i18nString(UIStrings.sBreakpointHit, {PH1: checkedStateText}));
       UI.ARIAUtils.setDescription(checkboxElement, i18nString(UIStrings.breakpointHit));
@@ -216,8 +216,8 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
       UI.ARIAUtils.setDescription(element, checkedStateText);
     }
 
-    this.emptyElement.classList.add('hidden');
-    this.list.element.classList.remove('hidden');
+    this.#emptyElement.classList.add('hidden');
+    this.#list.element.classList.remove('hidden');
 
     return element;
   }
@@ -257,7 +257,7 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
   private breakpointToggled(event: Common.EventTarget.EventTargetEvent<SDK.DOMDebuggerModel.DOMBreakpoint>): void {
     const hadFocus = this.hasFocus();
     const breakpoint = event.data;
-    this.list.refreshItem(breakpoint);
+    this.#list.refreshItem(breakpoint);
     if (hadFocus) {
       this.focus();
     }
@@ -268,20 +268,20 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
     const breakpoints = event.data;
     let lastIndex = -1;
     for (const breakpoint of breakpoints) {
-      const index = this.breakpoints.indexOf(breakpoint);
+      const index = this.#breakpoints.indexOf(breakpoint);
       if (index >= 0) {
-        this.breakpoints.remove(index);
+        this.#breakpoints.remove(index);
         lastIndex = index;
       }
     }
-    if (this.breakpoints.length === 0) {
-      this.emptyElement.classList.remove('hidden');
-      this.setDefaultFocusedElement(this.emptyElement);
-      this.list.element.classList.add('hidden');
+    if (this.#breakpoints.length === 0) {
+      this.#emptyElement.classList.remove('hidden');
+      this.setDefaultFocusedElement(this.#emptyElement);
+      this.#list.element.classList.add('hidden');
     } else if (lastIndex >= 0) {
-      const breakpointToSelect = this.breakpoints.at(lastIndex);
+      const breakpointToSelect = this.#breakpoints.at(lastIndex);
       if (breakpointToSelect) {
-        this.list.selectItem(breakpointToSelect);
+        this.#list.selectItem(breakpointToSelect);
       }
     }
     if (hadFocus) {
@@ -290,7 +290,7 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
   }
 
   private addBreakpoint(breakpoint: SDK.DOMDebuggerModel.DOMBreakpoint): void {
-    this.breakpoints.insertWithComparator(breakpoint, (breakpointA, breakpointB) => {
+    this.#breakpoints.insertWithComparator(breakpoint, (breakpointA, breakpointB) => {
       if (breakpointA.type > breakpointB.type) {
         return -1;
       }
@@ -299,8 +299,8 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
       }
       return 0;
     });
-    if (!this.list.selectedItem() || !this.hasFocus()) {
-      this.list.selectItem(this.breakpoints.at(0));
+    if (!this.#list.selectedItem() || !this.hasFocus()) {
+      this.#list.selectItem(this.#breakpoints.at(0));
     }
   }
 
@@ -328,10 +328,10 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
 
   private update(): void {
     const details = UI.Context.Context.instance().flavor(SDK.DebuggerModel.DebuggerPausedDetails);
-    if (this.highlightedBreakpoint) {
-      const oldHighlightedBreakpoint = this.highlightedBreakpoint;
-      this.highlightedBreakpoint = null;
-      this.list.refreshItem(oldHighlightedBreakpoint);
+    if (this.#highlightedBreakpoint) {
+      const oldHighlightedBreakpoint = this.#highlightedBreakpoint;
+      this.#highlightedBreakpoint = null;
+      this.#list.refreshItem(oldHighlightedBreakpoint);
     }
     if (!details || !details.auxData || details.reason !== Protocol.Debugger.PausedEventReason.DOM) {
       return;
@@ -348,13 +348,13 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
       return;
     }
 
-    for (const breakpoint of this.breakpoints) {
+    for (const breakpoint of this.#breakpoints) {
       if (breakpoint.node === data.node && breakpoint.type === data.type) {
-        this.highlightedBreakpoint = breakpoint;
+        this.#highlightedBreakpoint = breakpoint;
       }
     }
-    if (this.highlightedBreakpoint) {
-      this.list.refreshItem(this.highlightedBreakpoint);
+    if (this.#highlightedBreakpoint) {
+      this.#list.refreshItem(this.#highlightedBreakpoint);
     }
     UI.ViewManager.ViewManager.instance().showView('sources.domBreakpoints');
   }

package/front_end/panels/browser_debugger/ObjectEventListenersSidebarPane.ts

@@ -19,20 +19,20 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let objectEventListenersSidebarPaneInstance: ObjectEventListenersSidebarPane;
 
 export class ObjectEventListenersSidebarPane extends UI.Widget.VBox implements UI.Toolbar.ItemsProvider {
-  private readonly refreshButton: UI.Toolbar.ToolbarButton;
-  private readonly eventListenersView: EventListeners.EventListenersView.EventListenersView;
-  private lastRequestedContext?: SDK.RuntimeModel.ExecutionContext;
+  readonly #refreshButton: UI.Toolbar.ToolbarButton;
+  readonly #eventListenersView: EventListeners.EventListenersView.EventListenersView;
+  #lastRequestedContext?: SDK.RuntimeModel.ExecutionContext;
   private constructor() {
     super();
-    this.refreshButton =
+    this.#refreshButton =
         new UI.Toolbar.ToolbarButton(i18nString(UIStrings.refreshGlobalListeners), 'largeicon-refresh');
-    this.refreshButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, this.refreshClick, this);
-    this.refreshButton.setEnabled(false);
+    this.#refreshButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, this.refreshClick, this);
+    this.#refreshButton.setEnabled(false);
 
-    this.eventListenersView = new EventListeners.EventListenersView.EventListenersView(
+    this.#eventListenersView = new EventListeners.EventListenersView.EventListenersView(
         this.update.bind(this), /* enableDefaultTreeFocus */ true);
-    this.eventListenersView.show(this.element);
-    this.setDefaultFocusedChild(this.eventListenersView);
+    this.#eventListenersView.show(this.element);
+    this.setDefaultFocusedChild(this.#eventListenersView);
   }
 
   static instance(): ObjectEventListenersSidebarPane {
@@ -42,37 +42,41 @@ export class ObjectEventListenersSidebarPane extends UI.Widget.VBox implements U
     return objectEventListenersSidebarPaneInstance;
   }
 
+  get eventListenersView(): EventListeners.EventListenersView.EventListenersView {
+    return this.#eventListenersView;
+  }
+
   toolbarItems(): UI.Toolbar.ToolbarItem[] {
-    return [this.refreshButton];
+    return [this.#refreshButton];
   }
 
   update(): void {
-    if (this.lastRequestedContext) {
-      this.lastRequestedContext.runtimeModel.releaseObjectGroup(objectGroupName);
-      delete this.lastRequestedContext;
+    if (this.#lastRequestedContext) {
+      this.#lastRequestedContext.runtimeModel.releaseObjectGroup(objectGroupName);
+      this.#lastRequestedContext = undefined;
     }
     const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     if (!executionContext) {
-      this.eventListenersView.reset();
-      this.eventListenersView.addEmptyHolderIfNeeded();
+      this.#eventListenersView.reset();
+      this.#eventListenersView.addEmptyHolderIfNeeded();
       return;
     }
-    this.lastRequestedContext = executionContext;
+    this.#lastRequestedContext = executionContext;
     Promise.all([this.windowObjectInContext(executionContext)])
-        .then(this.eventListenersView.addObjects.bind(this.eventListenersView));
+        .then(this.#eventListenersView.addObjects.bind(this.#eventListenersView));
   }
 
   wasShown(): void {
     super.wasShown();
     UI.Context.Context.instance().addFlavorChangeListener(SDK.RuntimeModel.ExecutionContext, this.update, this);
-    this.refreshButton.setEnabled(true);
+    this.#refreshButton.setEnabled(true);
     this.update();
   }
 
   willHide(): void {
     super.willHide();
     UI.Context.Context.instance().removeFlavorChangeListener(SDK.RuntimeModel.ExecutionContext, this.update, this);
-    this.refreshButton.setEnabled(false);
+    this.#refreshButton.setEnabled(false);
   }
 
   private windowObjectInContext(executionContext: SDK.RuntimeModel.ExecutionContext):