[GM3Restyling] Update background service recording start page

Drive-by: Fix a string in storage buckets not to be translated
Before: https://imgur.com/a/A1WaaPC
After: https://imgur.com/a/eZ7XZp2
Bug: 325443331
Change-Id: I536438d545b0efef2569c548d18f2e5ef0717823
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6249178
Commit-Queue: Kim-Anh Tran <[email protected]>
Reviewed-by: Kateryna Prokopenko <[email protected]>

Author: ktran

front_end/panels/application/BackgroundServiceView.test.ts

@@ -2,9 +2,10 @@
 // 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 * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import {dispatchClickEvent} from '../../testing/DOMHelpers.js';
 import {createTarget} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -33,7 +34,7 @@ describeWithMockConnection('BackgroundServiceView', () => {
     sinon.stub(UI.ShortcutRegistry.ShortcutRegistry, 'instance').returns({
       shortcutTitleForAction: () => {},
       shortcutsForAction: () => [new UI.KeyboardShortcut.KeyboardShortcut(
-          [{key: 0, name: ''}], '', UI.KeyboardShortcut.Type.DEFAULT_SHORTCUT)],
+          [{key: UI.KeyboardShortcut.Keys.Ctrl.code, name: 'Ctrl'}], '', UI.KeyboardShortcut.Type.DEFAULT_SHORTCUT)],
     } as unknown as UI.ShortcutRegistry.ShortcutRegistry);
     assert.exists(backgroundServiceModel);
     view = new Resources.BackgroundServiceView.BackgroundServiceView(serviceName, backgroundServiceModel);
@@ -71,4 +72,24 @@ describeWithMockConnection('BackgroundServiceView', () => {
     ];
     assert.deepEqual(actualData, expectedData);
   });
+
+  it('shows placeholder text', () => {
+    assert.isNotNull(view.contentElement.querySelector('.empty-state'));
+    const header = view.contentElement.querySelector('.empty-state-header')?.textContent;
+    const description = view.contentElement.querySelector('.empty-state-description')?.textContent;
+    assert.deepEqual(header, 'No recording yet');
+    assert.deepEqual(
+        description,
+        'Start to debug background services by using the "Start recording events" button or by hitting Ctrl.Learn more');
+  });
+
+  it('Triggers record on button click', async () => {
+    const recordButton = view.contentElement.querySelector('.empty-state devtools-button');
+    Platform.assertNotNullOrUndefined(recordButton);
+    assert.deepEqual(recordButton?.textContent, 'Start recording events');
+
+    const recordingSpy = sinon.spy(view, 'toggleRecording');
+    dispatchClickEvent(recordButton);
+    assert.isTrue(recordingSpy.calledOnce);
+  });
 });

front_end/panels/application/BackgroundServiceView.ts

@@ -10,6 +10,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 // eslint-disable-next-line rulesdir/es-modules-import
 import emptyWidgetStyles from '../../ui/legacy/emptyWidget.css.js';
@@ -96,10 +97,6 @@ const UIStrings = {
    *@description Text in Application Panel Sidebar of the Application panel
    */
   backgroundServices: 'Background services',
-  /**
-   *@description Text that is usually a hyperlink to more documentation
-   */
-  learnMore: 'Learn more',
   /**
    *@description Text in Background Service View of the Application panel
    */
@@ -109,17 +106,23 @@ const UIStrings = {
    *@example {Background Fetch} PH1
    */
   recordingSActivity: 'Recording {PH1} activity...',
+  /**
+   *@description Text in Background Service View of the Application panel
+   */
+  noRecording: 'No recording yet',
   /**
    *@description Inform users that DevTools are recording/waiting for events in the Periodic Background Sync tool of the Application panel
    *@example {Background Fetch} PH1
    */
   devtoolsWillRecordAllSActivity: 'DevTools will record all {PH1} activity for up to 3 days, even when closed.',
   /**
-   *@description Text in Background Service View of the Application panel
-   *@example {record} PH1
-   *@example {Ctrl + R} PH2
+   *@description Text in Background Service View of the Application panel to instruct the user on how to start a recording for
+   * background services.
+   *
+   *@example {Start recording events} PH1
+   *@example {Ctrl + E} PH2
    */
-  clickTheRecordButtonSOrHitSTo: 'Click the record button {PH1} or hit {PH2} to start recording.',
+  startRecordingToDebug: 'Start to debug background services by using the "{PH1}" button or by hitting {PH2}.',
   /**
    *@description Text to show an item is empty
    */
@@ -429,7 +432,7 @@ export class BackgroundServiceView extends UI.Widget.VBox {
         this.storageKeyManager.storageKeys().includes(storageKey);
   }
 
-  private createLearnMoreLink(): Element {
+  private createLearnMoreLink(): Platform.DevToolsPath.UrlString {
     let url = 'https://developer.chrome.com/docs/devtools/javascript/background-services/?utm_source=devtools';
 
     switch (this.serviceName) {
@@ -449,7 +452,7 @@ export class BackgroundServiceView extends UI.Widget.VBox {
         break;
     }
 
-    return UI.XLink.XLink.create(url, i18nString(UIStrings.learnMore), undefined, undefined, 'learn-more');
+    return url as Platform.DevToolsPath.UrlString;
   }
 
   private showPreview(dataNode: EventDataNode|null): void {
@@ -479,23 +482,25 @@ export class BackgroundServiceView extends UI.Widget.VBox {
     } else if (this.recordButton.isToggled()) {
       // Inform users that we are recording/waiting for events.
       const featureName = BackgroundServiceView.getUIString(this.serviceName).toLowerCase();
-      centered.createChild('p').textContent = i18nString(UIStrings.recordingSActivity, {PH1: featureName});
-      centered.createChild('p').textContent = i18nString(UIStrings.devtoolsWillRecordAllSActivity, {PH1: featureName});
+      const emptyWidget = new UI.EmptyWidget.EmptyWidget(
+          i18nString(UIStrings.recordingSActivity, {PH1: featureName}),
+          i18nString(UIStrings.devtoolsWillRecordAllSActivity, {PH1: featureName}));
+      emptyWidget.show(centered);
     } else {
-      const landingRecordButton = UI.Toolbar.Toolbar.createActionButton(this.recordAction);
-
-      const recordKey = document.createElement('b');
-      recordKey.classList.add('background-service-shortcut');
-      recordKey.textContent = UI.ShortcutRegistry.ShortcutRegistry.instance()
-                                  .shortcutsForAction('background-service.toggle-recording')[0]
-                                  .title();
-
-      const inlineButton = UI.UIUtils.createInlineButton(landingRecordButton);
-      inlineButton.classList.add('background-service-record-inline-button');
-      centered.createChild('p').appendChild(i18n.i18n.getFormatLocalizedString(
-          str_, UIStrings.clickTheRecordButtonSOrHitSTo, {PH1: inlineButton, PH2: recordKey}));
-
-      centered.appendChild(this.createLearnMoreLink());
+      const recordShortcuts =
+          UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction('background-service.toggle-recording')[0];
+      const emptyWidget = new UI.EmptyWidget.EmptyWidget(
+          i18nString(UIStrings.noRecording),
+          i18nString(
+              UIStrings.startRecordingToDebug,
+              {PH1: i18nString(UIStrings.startRecordingEvents), PH2: recordShortcuts.title()}));
+      emptyWidget.appendLink(this.createLearnMoreLink());
+      emptyWidget.show(centered);
+
+      const button = UI.UIUtils.createTextButton(
+          i18nString(UIStrings.startRecordingEvents), () => this.toggleRecording(),
+          {jslogContext: 'start-recording', variant: Buttons.Button.Variant.PRIMARY});
+      emptyWidget.contentElement.appendChild(button);
     }
 
     this.preview.show(this.previewPanel.contentElement);

front_end/panels/application/StorageBucketsTreeElement.ts

@@ -36,7 +36,8 @@ const UIStrings = {
    * Storage Buckets allow developers to separate site data into buckets so that they can be
    * deleted independently. https://developer.chrome.com/docs/web-platform/storage-buckets.
    */
-  storageBucketsDescription: 'On this page you can view and delete storage buckets, and their associated storageAPIs.'
+  storageBucketsDescription:
+      'On this page you can view and delete storage buckets, and their associated `storage APIs`.'
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/StorageBucketsTreeElement.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

front_end/ui/visual_logging/KnownContextValues.ts

@@ -3292,6 +3292,7 @@ export const knownContextValues = new Set([
   'standard-emulated-device-list',
   'start',
   'start-new-chat',
+  'start-recording',
   'start-time',
   'start-url',
   'start-view',