Make DOM breakpoints empty state only show a one-liner

With https://crrev.com/c/6152575 we updated the empty states for the
DOM breakpoints view. However, DOM breakpoints are shown both in
sources and in the elements panel. For the sources panel, we only
want to show a one liner.

Drive-by: Slightly changing the header text to fit in with the remaining sidebar empty state one-liners
Screenshot: https://imgur.com/a/dbRtGdN
Fixed: 397254690
Change-Id: I5bb70e7462c9e0b1f0863b3ecaf8cfc73e2e4fd8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6277065
Reviewed-by: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/panels/browser_debugger/BUILD.gn

@@ -70,7 +70,10 @@ devtools_entrypoint("meta") {
 ts_library("unittests") {
   testonly = true
 
-  sources = [ "browser_debugger.test.ts" ]
+  sources = [
+    "DOMBreakpointsSidebarPane.test.ts",
+    "browser_debugger.test.ts",
+  ]
 
   deps = [
     ":bundle",

front_end/panels/browser_debugger/DOMBreakpointsSidebarPane.test.ts

@@ -0,0 +1,58 @@
+// 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 BrowserDebugger from './browser_debugger.js';
+
+describeWithLocale('DOMBreakpointsSidebarPane placeholder', () => {
+  function assertElementDisplayStyle(selector: string, style: string) {
+    const element =
+        BrowserDebugger.DOMBreakpointsSidebarPane.DOMBreakpointsSidebarPane.instance().contentElement.querySelector(
+            selector);
+    assert.exists(element);
+    assert.deepEqual(window.getComputedStyle(element).display, style);
+  }
+
+  it('shows one-liner if in sources', () => {
+    const domBreakpointsSidebarPane = BrowserDebugger.DOMBreakpointsSidebarPane.DOMBreakpointsSidebarPane.instance();
+    const container = document.createElement('div');
+    container.classList.add('sources', 'panel');
+    domBreakpointsSidebarPane.markAsRoot();
+    domBreakpointsSidebarPane.show(container);
+
+    document.body.appendChild(container);
+    assertElementDisplayStyle('.empty-view-scroller', 'none');
+    assertElementDisplayStyle('.placeholder .gray-info-message', 'block');
+
+    assert.deepEqual(
+        domBreakpointsSidebarPane.contentElement.querySelector('.placeholder .gray-info-message')?.textContent,
+        'No DOM breakpoints');
+
+    domBreakpointsSidebarPane.detach();
+    container.remove();
+  });
+
+  it('shows empty widget if in elements panel', () => {
+    const domBreakpointsSidebarPane = BrowserDebugger.DOMBreakpointsSidebarPane.DOMBreakpointsSidebarPane.instance();
+    const container = document.createElement('div');
+    container.classList.add('elements', 'panel');
+    domBreakpointsSidebarPane.markAsRoot();
+    domBreakpointsSidebarPane.show(container);
+
+    document.body.appendChild(container);
+    assertElementDisplayStyle('.empty-view-scroller', 'flex');
+    assertElementDisplayStyle('.placeholder .gray-info-message', 'none');
+
+    assert.deepEqual(
+        domBreakpointsSidebarPane.contentElement.querySelector('.empty-state-header')?.textContent,
+        'No DOM breakpoints');
+    assert.deepEqual(
+        domBreakpointsSidebarPane.contentElement.querySelector('.empty-state-description > span')?.textContent,
+        'DOM breakpoints pause on the code that changes a DOM node or its children.');
+
+    domBreakpointsSidebarPane.detach();
+    container.remove();
+  });
+});

front_end/panels/browser_debugger/DOMBreakpointsSidebarPane.ts

@@ -43,7 +43,7 @@ const UIStrings = {
   /**
    *@description Header text to indicate there are no breakpoints
    */
-  noBreakpoints: 'No DOM breakpoints set',
+  noBreakpoints: 'No DOM breakpoints',
   /**
    *@description DOM breakpoints description that shows if no DOM breakpoints are set
    */
@@ -135,7 +135,7 @@ let domBreakpointsSidebarPaneInstance: DOMBreakpointsSidebarPane;
 export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
     UI.ContextFlavorListener.ContextFlavorListener, UI.ListControl.ListDelegate<SDK.DOMDebuggerModel.DOMBreakpoint> {
   elementToCheckboxes: WeakMap<Element, HTMLInputElement>;
-  readonly #emptyElement: UI.EmptyWidget.EmptyWidget;
+  readonly #emptyElement: HTMLElement;
   readonly #breakpoints: UI.ListModel.ListModel<SDK.DOMDebuggerModel.DOMBreakpoint>;
   #list: UI.ListControl.ListControl<SDK.DOMDebuggerModel.DOMBreakpoint>;
   #highlightedBreakpoint: SDK.DOMDebuggerModel.DOMBreakpoint|null;
@@ -149,10 +149,12 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
     this.contentElement.setAttribute(
         'jslog', `${VisualLogging.section('sources.dom-breakpoints').track({resize: true})}`);
     this.contentElement.classList.add('dom-breakpoints-container');
-    this.#emptyElement =
+    this.#emptyElement = this.contentElement.createChild('div', 'placeholder');
+    this.#emptyElement.createChild('div', 'gray-info-message').textContent = i18nString(UIStrings.noBreakpoints);
+    const emptyWidget =
         new UI.EmptyWidget.EmptyWidget(UIStrings.noBreakpoints, i18nString(UIStrings.domBreakpointsDescription));
-    this.#emptyElement.appendLink(DOM_BREAKPOINT_DOCUMENTATION_URL);
-    this.#emptyElement.show(this.contentElement);
+    emptyWidget.appendLink(DOM_BREAKPOINT_DOCUMENTATION_URL);
+    emptyWidget.show(this.#emptyElement);
 
     this.#breakpoints = new UI.ListModel.ListModel();
     this.#list = new UI.ListControl.ListControl(this.#breakpoints, this, UI.ListControl.ListMode.NonViewport);
@@ -250,7 +252,7 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
       UI.ARIAUtils.setDescription(element, checkedStateText);
     }
 
-    this.#emptyElement.hideWidget();
+    this.#emptyElement.classList.add('hidden');
     this.#list.element.classList.remove('hidden');
 
     return element;
@@ -309,8 +311,8 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
       }
     }
     if (this.#breakpoints.length === 0) {
-      this.#emptyElement.showWidget();
-      this.setDefaultFocusedElement(this.#emptyElement.element);
+      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);

front_end/panels/browser_debugger/domBreakpointsSidebarPane.css

@@ -34,6 +34,20 @@
   color: var(--sys-color-on-surface);
 }
 
+.placeholder {
+  display: flex;
+  height: 100%;
+  justify-content: center;
+}
+
+:host-context(.sources.panel) .empty-view-scroller {
+  display: none;
+}
+
+:host-context(.elements.panel) .placeholder .gray-info-message {
+  display: none;
+}
+
 @media (forced-colors: active) {
   .breakpoint-entry:focus-visible,
   .breakpoint-list .breakpoint-entry:hover {