[GM3Restyling] Update event listeners empty states

Screenshots: https://imgur.com/a/FNvetVN
Bug: 325443331
Change-Id: I79e9f6dc26a76ea419d4cf30ae81da0c4d5a8d46
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6280727
Reviewed-by: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/BUILD.gn

@@ -164,6 +164,7 @@ group("unittests") {
     "panels/developer_resources:unittests",
     "panels/elements:unittests",
     "panels/emulation:unittests",
+    "panels/event_listeners:unittests",
     "panels/explain:unittests",
     "panels/issues:unittests",
     "panels/layer_viewer:unittests",

front_end/panels/event_listeners/BUILD.gn

@@ -46,3 +46,14 @@ devtools_entrypoint("bundle") {
 
   visibility += devtools_panels_visibility
 }
+
+ts_library("unittests") {
+  testonly = true
+
+  sources = [ "EventListenersView.test.ts" ]
+
+  deps = [
+    ":bundle",
+    "../../testing",
+  ]
+}

front_end/panels/event_listeners/EventListenersView.test.ts

@@ -0,0 +1,56 @@
+// Copyright 2025 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.
+
+import {describeWithLocale} from '../../testing/EnvironmentHelpers.js';
+
+import * as EventListeners from './event_listeners.js';
+
+describeWithLocale('EventListenersView placeholder', () => {
+  function assertElementDisplayStyle(
+      view: EventListeners.EventListenersView.EventListenersView, selector: string, style: string) {
+    const element = view.element.querySelector(selector);
+    assert.exists(element);
+    assert.deepEqual(window.getComputedStyle(element).display, style);
+  }
+
+  it('shows one-liner if in sources', () => {
+    const eventListenersView = new EventListeners.EventListenersView.EventListenersView(() => {});
+    const container = document.createElement('div');
+    container.classList.add('sources', 'panel');
+    eventListenersView.markAsRoot();
+    eventListenersView.show(container);
+
+    document.body.appendChild(container);
+    assertElementDisplayStyle(eventListenersView, '.empty-view-scroller', 'none');
+    assertElementDisplayStyle(eventListenersView, '.placeholder .gray-info-message', 'block');
+
+    assert.deepEqual(
+        eventListenersView.contentElement.querySelector('.placeholder .gray-info-message')?.textContent,
+        'No event listeners');
+
+    eventListenersView.detach();
+    container.remove();
+  });
+
+  it('shows empty widget if in elements panel', () => {
+    const eventListenersView = new EventListeners.EventListenersView.EventListenersView(() => {});
+    const container = document.createElement('div');
+    container.classList.add('elements', 'panel');
+    eventListenersView.markAsRoot();
+    eventListenersView.show(container);
+
+    document.body.appendChild(container);
+    assertElementDisplayStyle(eventListenersView, '.empty-view-scroller', 'block');
+    assertElementDisplayStyle(eventListenersView, '.placeholder .gray-info-message', 'none');
+
+    assert.deepEqual(
+        eventListenersView.contentElement.querySelector('.empty-state-header')?.textContent, 'No event listeners');
+    assert.deepEqual(
+        eventListenersView.contentElement.querySelector('.empty-state-description')?.textContent,
+        'On this page you will find registered event listeners');
+
+    eventListenersView.detach();
+    container.remove();
+  });
+});

front_end/panels/event_listeners/EventListenersView.ts

@@ -22,6 +22,10 @@ const UIStrings = {
    *@description Empty holder text content in Event Listeners View of the Event Listener Debugging pane in the Sources panel
    */
   noEventListeners: 'No event listeners',
+  /**
+   *@description Empty holder text content in Event Listeners View of the Event Listener Debugging pane in the Elements panel
+   */
+  eventListenersExplanation: 'On this page you will find registered event listeners',
   /**
    *@description Delete button title in Event Listeners View of the Event Listener Debugging pane in the Sources panel
    */
@@ -54,19 +58,23 @@ export class EventListenersView extends UI.Widget.VBox {
   private readonly treeItemMap: Map<string, EventListenersTreeElement>;
   constructor(changeCallback: () => void, enableDefaultTreeFocus: boolean|undefined = false) {
     super();
+    this.registerRequiredCSS(eventListenersViewStyles);
     this.changeCallback = changeCallback;
     this.enableDefaultTreeFocus = enableDefaultTreeFocus;
+
+    this.emptyHolder = this.element.createChild('div', 'placeholder hidden');
+    this.emptyHolder.createChild('span', 'gray-info-message').textContent = i18nString(UIStrings.noEventListeners);
+    const emptyWidget = new UI.EmptyWidget.EmptyWidget(
+        i18nString(UIStrings.noEventListeners), i18nString(UIStrings.eventListenersExplanation));
+    emptyWidget.show(this.emptyHolder);
+
     this.treeOutline = new UI.TreeOutline.TreeOutlineInShadow();
     this.treeOutline.setComparator(EventListenersTreeElement.comparator);
-    this.treeOutline.element.classList.add('monospace');
+    this.treeOutline.element.classList.add('event-listener-tree', 'monospace');
     this.treeOutline.setShowSelectionOnKeyboardFocus(true);
     this.treeOutline.setFocusable(true);
     this.treeOutline.registerRequiredCSS(eventListenersViewStyles, objectValueStyles);
     this.element.appendChild(this.treeOutline.element);
-    this.emptyHolder = document.createElement('div');
-    this.emptyHolder.classList.add('gray-info-message');
-    this.emptyHolder.textContent = i18nString(UIStrings.noEventListeners);
-    this.emptyHolder.tabIndex = -1;
     this.linkifier = new Components.Linkifier.Linkifier();
     this.treeItemMap = new Map();
   }
@@ -75,7 +83,7 @@ export class EventListenersView extends UI.Widget.VBox {
     if (!this.enableDefaultTreeFocus) {
       return;
     }
-    if (!this.emptyHolder.parentNode) {
+    if (!this.emptyHolder.classList.contains('hidden')) {
       this.treeOutline.forceSelect();
     } else {
       this.emptyHolder.focus();
@@ -198,7 +206,7 @@ export class EventListenersView extends UI.Widget.VBox {
       treeItem.hidden = true;
       this.treeOutline.appendChild(treeItem);
     }
-    this.emptyHolder.remove();
+    this.emptyHolder.classList.add('hidden');
     return treeItem;
   }
 
@@ -212,8 +220,8 @@ export class EventListenersView extends UI.Widget.VBox {
         firstVisibleChild = eventType;
       }
     }
-    if (allHidden && !this.emptyHolder.parentNode) {
-      this.element.appendChild(this.emptyHolder);
+    if (allHidden && this.emptyHolder.classList.contains('hidden')) {
+      this.emptyHolder.classList.remove('hidden');
     }
     if (firstVisibleChild) {
       firstVisibleChild.select(true /* omitFocus */);

front_end/panels/event_listeners/eventListenersView.css

@@ -67,6 +67,29 @@
   }
 }
 
+.placeholder:not(.hidden) + .event-listener-tree {
+  display: none;
+}
+
+.placeholder {
+  display: flex;
+  margin: auto;
+  align-items: center;
+  justify-content: center;
+}
+
+.sources.panel .empty-view-scroller {
+  display: none;
+}
+
+.elements.panel .placeholder {
+  display: block;
+
+  .gray-info-message {
+    display: none;
+  }
+}
+
 .tree-outline-disclosure li:hover .event-listener-button {
   display: inline;
 }