[GM3Restyling] Update Background service views

1. Hide table if no services have been registered so far
2. Update preview empty state

Drive-by: update emptyWidget.css for proper scrolling behavior
Screenshots: https://imgur.com/a/W4fx6vE
Bug: 325443331
Change-Id: Ib62ffdf3c7152d75ff53b9c799ae74fa7f260aa8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6286310
Commit-Queue: Kim-Anh Tran <[email protected]>
Reviewed-by: Kateryna Prokopenko <[email protected]>

Author: ktran

front_end/panels/application/BackgroundServiceView.test.ts

@@ -73,6 +73,31 @@ describeWithMockConnection('BackgroundServiceView', () => {
     assert.deepEqual(actualData, expectedData);
   });
 
+  it('shows placeholder text to select a value if events have been captured', () => {
+    assert.exists(backgroundServiceModel);
+    assert.exists(manager);
+    backgroundServiceModel.backgroundServiceEventReceived({
+      backgroundServiceEvent: {
+        timestamp: 1556889085,  // 2019-05-03 14:11:25.000.
+        origin: '',
+        storageKey: testKey,
+        serviceWorkerRegistrationId: 42 as unknown as Protocol.ServiceWorker.RegistrationID,  // invalid.
+        service: serviceName,
+        eventName: 'Event1',
+        instanceId: 'Instance1',
+        eventMetadata: [],
+      },
+    });
+    manager.updateStorageKeys(new Set([testKey]));
+    manager.setMainStorageKey(testKey);
+
+    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 event selected');
+    assert.deepEqual(description, 'Select an event to view its metadata');
+  });
+
   it('shows placeholder text', () => {
     assert.isNotNull(view.contentElement.querySelector('.empty-state'));
     const header = view.contentElement.querySelector('.empty-state-header')?.textContent;

front_end/panels/application/BackgroundServiceView.ts

@@ -97,10 +97,15 @@ const UIStrings = {
    *@description Text in Application Panel Sidebar of the Application panel
    */
   backgroundServices: 'Background services',
+  /**
+   *@description Text in Background Service View of the Application panel.
+   *             An event here refers to a background service event that is an entry in a table.
+   */
+  noEventSelected: 'No event selected',
   /**
    *@description Text in Background Service View of the Application panel
    */
-  selectAnEntryToViewMetadata: 'Select an entry to view metadata',
+  selectAnEventToViewMetadata: 'Select an event to view its metadata',
   /**
    *@description Text in Background Service View of the Application panel
    *@example {Background Fetch} PH1
@@ -226,6 +231,7 @@ export class BackgroundServiceView extends UI.Widget.VBox {
 
     this.splitWidget.setMainWidget(this.dataGrid.asWidget());
     this.splitWidget.setSidebarWidget(this.previewPanel);
+    this.splitWidget.hideMain();
 
     this.showPreview(null);
   }
@@ -288,6 +294,7 @@ export class BackgroundServiceView extends UI.Widget.VBox {
   private clearView(): void {
     this.selectedEventNode = null;
     this.dataGrid.rootNode().removeChildren();
+    this.splitWidget.hideMain();
     this.saveButton.setEnabled(false);
     this.showPreview(null);
   }
@@ -356,6 +363,10 @@ export class BackgroundServiceView extends UI.Widget.VBox {
     const dataNode = new EventDataNode(data, serviceEvent.eventMetadata);
     this.dataGrid.rootNode().appendChild(dataNode);
 
+    if (this.splitWidget.showMode() !== UI.SplitWidget.ShowMode.BOTH) {
+      this.splitWidget.showBoth();
+    }
+
     if (this.dataGrid.rootNode().children.length === 1) {
       this.saveButton.setEnabled(true);
       this.showPreview(this.selectedEventNode);
@@ -471,37 +482,31 @@ export class BackgroundServiceView extends UI.Widget.VBox {
       return;
     }
 
-    this.preview = new UI.Widget.VBox();
-    this.preview.contentElement.classList.add('background-service-preview', 'fill');
-    const centered = this.preview.contentElement.createChild('div');
-
+    const emptyWidget = new UI.EmptyWidget.EmptyWidget('', '');
     if (this.dataGrid.rootNode().children.length) {
-      // Inform users that grid entries are clickable.
-      centered.createChild('p').textContent = i18nString(UIStrings.selectAnEntryToViewMetadata);
+      emptyWidget.header = i18nString(UIStrings.noEventSelected);
+      emptyWidget.text = i18nString(UIStrings.selectAnEventToViewMetadata);
     } else if (this.recordButton.isToggled()) {
       // Inform users that we are recording/waiting for events.
       const featureName = BackgroundServiceView.getUIString(this.serviceName).toLowerCase();
-      const emptyWidget = new UI.EmptyWidget.EmptyWidget(
-          i18nString(UIStrings.recordingSActivity, {PH1: featureName}),
-          i18nString(UIStrings.devtoolsWillRecordAllSActivity, {PH1: featureName}));
-      emptyWidget.show(centered);
+      emptyWidget.header = i18nString(UIStrings.recordingSActivity, {PH1: featureName});
+      emptyWidget.text = i18nString(UIStrings.devtoolsWillRecordAllSActivity, {PH1: featureName});
     } else {
       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.header = i18nString(UIStrings.noRecording);
+      emptyWidget.text = 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.TONAL});
       emptyWidget.contentElement.appendChild(button);
     }
 
+    this.preview = emptyWidget;
     this.preview.show(this.previewPanel.contentElement);
   }
 

front_end/panels/application/backgroundServiceView.css

@@ -6,7 +6,7 @@
 
 .background-service-toolbar {
   background-color: var(--sys-color-cdt-base-container);
-  border-bottom: var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .data-grid {

front_end/ui/legacy/emptyWidget.css

@@ -5,6 +5,5 @@
  */
 
 .empty-view-scroller {
-  justify-content: center;
   overflow: auto;
 }