[GM3Restyling] Update WebAudio empty state

Before: https://i.imgur.com/5iWoTpW.png
After: https://i.imgur.com/GhMYq8R.png
Bug: 325443331
Change-Id: I1d9b2c13f54c74dafc81fee1dd54b2d85f2ae14c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6257650
Reviewed-by: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/panels/web_audio/BUILD.gn

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

front_end/panels/web_audio/WebAudioView.test.ts

@@ -0,0 +1,34 @@
+// 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 type * as Platform from '../../core/platform/platform.js';
+import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+import {WebAudioView} from './web_audio.js';
+
+describeWithEnvironment('WebAudioView', () => {
+  beforeEach(() => {
+    UI.ActionRegistration.registerActionExtension({
+      actionId: 'components.collect-garbage',
+      category: UI.ActionRegistration.ActionCategory.PERFORMANCE,
+      title: () => 'mock' as Platform.UIString.LocalizedString,
+      toggleable: true,
+    });
+    sinon.stub(UI.ShortcutRegistry.ShortcutRegistry, 'instance').returns({
+      shortcutTitleForAction: () => {},
+      shortcutsForAction: () => [],
+    } as unknown as UI.ShortcutRegistry.ShortcutRegistry);
+  });
+
+  it('shows placeholder', () => {
+    const view = new WebAudioView.WebAudioView();
+    assert.exists(view.contentElement.querySelector('.empty-state'));
+    assert.deepEqual(
+        view.contentElement.querySelector('.empty-state-header')?.textContent, 'No web audio API usage detected');
+    assert.deepEqual(
+        view.contentElement.querySelector('.empty-state-description > span')?.textContent,
+        'Open a page that uses web audio API to start monitoring.');
+  });
+});

front_end/panels/web_audio/WebAudioView.ts

@@ -6,6 +6,7 @@ import '../../ui/legacy/legacy.js';
 
 import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as Platform from '../../core/platform/platform.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';
@@ -18,21 +19,29 @@ import webAudioStyles from './webAudio.css.js';
 import {Events as ModelEvents, WebAudioModel} from './WebAudioModel.js';
 
 const UIStrings = {
+  /**
+   *@description Text in Web Audio View if there is nothing to show.
+   * Web Audio API is an API for controlling audio on the web.
+   */
+  noWebAudio: 'No web audio API usage detected',
   /**
    *@description Text in Web Audio View
    */
-  openAPageThatUsesWebAudioApiTo: 'Open a page that uses Web Audio API to start monitoring.',
+  openAPageThatUsesWebAudioApiTo: 'Open a page that uses web audio API to start monitoring.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/web_audio/WebAudioView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+const WEBAUDIO_EXPLANATION_URL =
+    'https://developer.chrome.com/docs/devtools/webaudio' as Platform.DevToolsPath.UrlString;
+
 export class WebAudioView extends UI.ThrottledWidget.ThrottledWidget implements
     SDK.TargetManager.SDKModelObserver<WebAudioModel> {
   private readonly contextSelector: AudioContextSelector;
   private readonly contentContainer: HTMLElement;
   private readonly detailViewContainer: HTMLElement;
   private graphManager: GraphVisualizer.GraphManager.GraphManager;
-  private readonly landingPage: UI.Widget.VBox;
+  private readonly landingPage: UI.EmptyWidget.EmptyWidget;
   private readonly summaryBarContainer: HTMLElement;
   constructor() {
     super(true, 1000);
@@ -60,13 +69,9 @@ export class WebAudioView extends UI.ThrottledWidget.ThrottledWidget implements
     this.graphManager = new GraphVisualizer.GraphManager.GraphManager();
 
     // Creates the landing page.
-    this.landingPage = new UI.Widget.VBox();
-    this.landingPage.contentElement.classList.add('web-audio-landing-page', 'fill');
-    this.landingPage.contentElement.appendChild(UI.Fragment.html`
-  <div>
-  <p>${i18nString(UIStrings.openAPageThatUsesWebAudioApiTo)}</p>
-  </div>
-  `);
+    this.landingPage = new UI.EmptyWidget.EmptyWidget(
+        i18nString(UIStrings.noWebAudio), i18nString(UIStrings.openAPageThatUsesWebAudioApiTo));
+    this.landingPage.appendLink(WEBAUDIO_EXPLANATION_URL);
     this.landingPage.show(this.detailViewContainer);
 
     // Creates the summary bar.