[GM3Restyling] Update network panel empty state

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

Author: ktran

front_end/panels/network/NetworkLogView.test.ts

@@ -16,10 +16,11 @@ import {
   getMenuItemLabels,
 } from '../../testing/ContextMenuHelpers.js';
 import {
+  dispatchClickEvent,
   dispatchMouseUpEvent,
   raf,
 } from '../../testing/DOMHelpers.js';
-import {createTarget} from '../../testing/EnvironmentHelpers.js';
+import {createTarget, registerNoopActions, stubNoopSettings} from '../../testing/EnvironmentHelpers.js';
 import {expectCalled} from '../../testing/ExpectStubCall.js';
 import {stubFileManager} from '../../testing/FileManagerHelpers.js';
 import {describeWithMockConnection, dispatchEvent} from '../../testing/MockConnection.js';
@@ -52,6 +53,8 @@ describeWithMockConnection('NetworkLogView', () => {
       globalStorage: dummyStorage,
       localStorage: dummyStorage,
     });
+    registerNoopActions(['network.toggle-recording', 'inspector-main.reload']);
+
     sinon.stub(UI.ShortcutRegistry.ShortcutRegistry, 'instance').returns({
       shortcutTitleForAction: () => {},
       shortcutsForAction: () => [],
@@ -176,16 +179,6 @@ describeWithMockConnection('NetworkLogView', () => {
     );
   });
 
-  function createNetworkLogView(filterBar?: UI.FilterBar.FilterBar): Network.NetworkLogView.NetworkLogView {
-    if (!filterBar) {
-      filterBar = {addFilter: () => {}, filterButton: () => ({addEventListener: () => {}}), addDivider: () => {}} as
-          unknown as UI.FilterBar.FilterBar;
-    }
-    return new Network.NetworkLogView.NetworkLogView(
-        filterBar, document.createElement('div'),
-        Common.Settings.Settings.instance().createSetting('network-log-large-rows', false));
-  }
-
   const tests = (inScope: boolean) => () => {
     beforeEach(() => {
       networkLogView = createNetworkLogView();
@@ -901,6 +894,76 @@ Invoke-WebRequest -UseBasicParsing -Uri "url-header-und-content-overridden"`]);
   });
 });
 
+describeWithMockConnection('NetworkLogView placeholder', () => {
+  const START_RECORDING_ID = 'network.toggle-recording';
+  const RELOAD_ID = 'inspector-main.reload';
+
+  beforeEach(() => {
+    stubNoopSettings();
+    UI.ActionRegistration.registerActionExtension({
+      actionId: START_RECORDING_ID,
+      category: UI.ActionRegistration.ActionCategory.NETWORK,
+      title: () => 'mock' as Platform.UIString.LocalizedString,
+      toggleable: true,
+    });
+    UI.ActionRegistration.registerActionExtension({
+      actionId: RELOAD_ID,
+      category: UI.ActionRegistration.ActionCategory.NETWORK,
+      title: () => 'mock' as Platform.UIString.LocalizedString,
+      toggleable: true,
+    });
+    sinon.stub(UI.ShortcutRegistry.ShortcutRegistry, 'instance').returns({
+      shortcutTitleForAction: () => 'Ctrl',
+      shortcutsForAction: () => [new UI.KeyboardShortcut.KeyboardShortcut(
+          [{key: UI.KeyboardShortcut.Keys.Ctrl.code, name: 'Ctrl'}], '', UI.KeyboardShortcut.Type.DEFAULT_SHORTCUT)],
+    } as unknown as UI.ShortcutRegistry.ShortcutRegistry);
+  });
+
+  it('shows instruction to start recording', async () => {
+    const networkLogView = createNetworkLogView();
+    testPlaceholderText(
+        networkLogView, 'No network activity recorded',
+        'Record network log to display network activity by using the \"Start recording\" button or by hitting Ctrl.');
+    testPlaceholderButton(networkLogView, 'Start recording', START_RECORDING_ID);
+  });
+
+  it('shows placeholder with instruction to reload page if already recording', async () => {
+    const networkLogView = createNetworkLogView();
+    networkLogView.setRecording(true);
+
+    testPlaceholderText(
+        networkLogView, 'Currently recording network activity',
+        'Perform a request or reload the page by using the \"Reload page\" button or by hitting Ctrl.');
+    testPlaceholderButton(networkLogView, 'Reload page', RELOAD_ID);
+  });
+});
+
+function testPlaceholderText(
+    networkLogView: Network.NetworkLogView.NetworkLogView, expectedHeaderText: string,
+    expectedDescriptionText: string) {
+  const emptyWidget = networkLogView.element.querySelector('.empty-state');
+
+  const header = emptyWidget?.querySelector('.empty-state-header')?.textContent;
+  const description = emptyWidget?.querySelector('.empty-state-description > span')?.textContent;
+
+  assert.deepEqual(header, expectedHeaderText);
+  assert.deepEqual(description, expectedDescriptionText);
+}
+
+function testPlaceholderButton(
+    networkLogView: Network.NetworkLogView.NetworkLogView, expectedButtonText: string, actionId: string) {
+  const button = networkLogView.element.querySelector('.empty-state devtools-button');
+  assert.exists(button);
+  assert.deepEqual(button.textContent, expectedButtonText);
+
+  const action = UI.ActionRegistry.ActionRegistry.instance().getAction(actionId);
+  const spy = sinon.spy(action, 'execute');
+
+  assert.isTrue(spy.notCalled);
+  dispatchClickEvent(button);
+  assert.isTrue(spy.calledOnce);
+}
+
 function clickCheckbox(checkbox: HTMLInputElement) {
   checkbox.checked = true;
   const event = new Event('change');
@@ -955,3 +1018,13 @@ async function selectMoreFiltersOption(softMenu: HTMLElement, option: string) {
   dispatchMouseUpEvent(item);
   await raf();
 }
+
+function createNetworkLogView(filterBar?: UI.FilterBar.FilterBar): Network.NetworkLogView.NetworkLogView {
+  if (!filterBar) {
+    filterBar = {addFilter: () => {}, filterButton: () => ({addEventListener: () => {}}), addDivider: () => {}} as
+        unknown as UI.FilterBar.FilterBar;
+  }
+  return new Network.NetworkLogView.NetworkLogView(
+      filterBar, document.createElement('div'),
+      Common.Settings.Settings.instance().createSetting('network-log-large-rows', false));
+}

front_end/panels/network/NetworkLogView.ts

@@ -49,6 +49,7 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Sources from '../../panels/sources/sources.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
@@ -135,25 +136,40 @@ const UIStrings = {
    */
   dropHarFilesHere: 'Drop HAR files here',
   /**
-   *@description Recording text text content in Network Log View of the Network panel
+   *@description Recording text content in Network Log View of the Network panel
    */
-  recordingNetworkActivity: 'Recording network activity…',
+  recordingNetworkActivity: 'Currently recording network activity',
   /**
-   *@description Text in Network Log View of the Network panel
-   *@example {Ctrl + R} PH1
+   *@description Shown in the Network Log View of the Network panel when the user has not yet
+   *             recorded any network activity. This is an instruction to the user to reload the page in order to
+   *             show network activity in the current UI.
+   *@example {Reload page} PH1
+   *@example {Ctrl + R} PH2
    */
-  performARequestOrHitSToRecordThe: 'Perform a request or hit {PH1} to record the reload.',
+  performARequestOrHitSToRecordThe:
+      'Perform a request or reload the page by using the "{PH1}" button or by hitting {PH2}.',
   /**
    *@description Shown in the Network Log View of the Network panel when the user has not yet
    * recorded any network activity. This is an instruction to the user to start recording in order to
    * show network activity in the current UI.
-   *@example {Ctrl + E} PH1
+   * @example {Start recording} PH1
+   * @example {Ctrl + E} PH2
+   */
+  recordToDisplayNetworkActivity:
+      'Record network log to display network activity by using the "{PH1}" button or by hitting {PH2}.',
+  /**
+   *@description Label of a button in the Network Log View of the Network panel.
    */
-  recordToDisplayNetworkActivity: 'Record network log ({PH1}) to display network activity.',
+  reloadPage: 'Reload page',
   /**
-   *@description Text that is usually a hyperlink to more documentation
+   *@description Label of a button in the Network Log View of the Network panel.
    */
-  learnMore: 'Learn more',
+  startRecording: 'Start recording',
+  /**
+   *@description Shown in the Network Log View of the Network panel when the user has not yet
+   *             recorded any network activity.
+   */
+  noNetworkActivityRecorded: 'No network activity recorded',
   /**
    *@description Text to announce to screen readers that network data is available.
    */
@@ -482,7 +498,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
   private filters: Filter[];
   private timeFilter: Filter|null;
   private hoveredNodeInternal: NetworkNode|null;
-  private recordingHint: Element|null;
+  private recordingHint: UI.EmptyWidget.EmptyWidget|null;
   private highlightedNode: NetworkRequestNode|null;
   private readonly linkifierInternal: Components.Linkifier.Linkifier;
   private recording: boolean;
@@ -1078,47 +1094,43 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
 
   private showRecordingHint(): void {
     this.hideRecordingHint();
-    this.recordingHint = this.element.createChild('div', 'network-status-pane fill');
-    const hintText = this.recordingHint.createChild('div', 'recording-hint');
-
-    if (this.recording) {
-      let reloadShortcutNode: Element|null = null;
-      const reloadShortcut =
-          UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction('inspector-main.reload')[0];
-      if (reloadShortcut) {
-        reloadShortcutNode = this.recordingHint.createChild('b');
-        reloadShortcutNode.textContent = reloadShortcut.title();
-      }
 
-      const recordingText = hintText.createChild('span');
-      recordingText.textContent = i18nString(UIStrings.recordingNetworkActivity);
-      if (reloadShortcutNode) {
-        hintText.createChild('br');
-        hintText.appendChild(i18n.i18n.getFormatLocalizedString(
-            str_, UIStrings.performARequestOrHitSToRecordThe, {PH1: reloadShortcutNode}));
-      }
-    } else {
-      const recordNode = hintText.createChild('b');
-      recordNode.textContent =
-          UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutTitleForAction('network.toggle-recording') || '';
-      hintText.appendChild(
-          i18n.i18n.getFormatLocalizedString(str_, UIStrings.recordToDisplayNetworkActivity, {PH1: recordNode}));
-    }
-    hintText.createChild('br');
-    hintText.appendChild(UI.XLink.XLink.create(
-        'https://developer.chrome.com/docs/devtools/network/?utm_source=devtools&utm_campaign=2019Q1',
-        i18nString(UIStrings.learnMore), undefined, undefined, 'learn-more'));
+    const actionName = this.recording ? 'inspector-main.reload' : 'network.toggle-recording';
+    const action = UI.ActionRegistry.ActionRegistry.instance().getAction(actionName);
+    const shortcutTitle = UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutTitleForAction(actionName) ?? '';
+
+    const header = this.recording ? i18nString(UIStrings.recordingNetworkActivity) :
+                                    i18nString(UIStrings.noNetworkActivityRecorded);
+    const instruction =
+        this.recording ? UIStrings.performARequestOrHitSToRecordThe : UIStrings.recordToDisplayNetworkActivity;
+    const buttonText = this.recording ? i18nString(UIStrings.reloadPage) : i18nString(UIStrings.startRecording);
+    // eslint-disable-next-line rulesdir/l10n-i18nString-call-only-with-uistrings
+    const description = i18nString(instruction, {
+      PH1: buttonText,
+      PH2: shortcutTitle,
+    });
 
+    this.recordingHint = new UI.EmptyWidget.EmptyWidget(header, shortcutTitle ? description : '');
+    this.recordingHint.element.classList.add('network-status-pane');
+    this.recordingHint.appendLink(
+        'https://developer.chrome.com/docs/devtools/network/' as Platform.DevToolsPath.UrlString);
+    const button = UI.UIUtils.createTextButton(buttonText, () => action.execute(), {
+      jslogContext: actionName,
+      variant: Buttons.Button.Variant.TONAL,
+    });
+    this.recordingHint.contentElement.appendChild(button);
+
+    this.recordingHint.show(this.element);
     this.setHidden(true);
   }
 
   private hideRecordingHint(): void {
     this.setHidden(false);
     if (this.recordingHint) {
-      this.recordingHint.remove();
+      this.recordingHint.detach();
+      this.recordingHint = null;
     }
     UI.ARIAUtils.alert(i18nString(UIStrings.networkDataAvailable));
-    this.recordingHint = null;
   }
 
   private setHidden(value: boolean): void {

front_end/panels/network/NetworkPanel.test.ts

@@ -6,7 +6,7 @@ import * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Logs from '../../models/logs/logs.js';
 import * as Trace from '../../models/trace/trace.js';
-import {createTarget} from '../../testing/EnvironmentHelpers.js';
+import {createTarget, registerNoopActions} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
 import {createNetworkPanelForMockConnection} from '../../testing/NetworkHelpers.js';
 import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
@@ -66,6 +66,7 @@ describeWithMockConnection('NetworkPanel', () => {
   let networkPanel: Network.NetworkPanel.NetworkPanel;
 
   beforeEach(async () => {
+    registerNoopActions(['inspector-main.reload']);
     UI.ActionRegistration.maybeRemoveActionExtension('network.toggle-recording');
     UI.ActionRegistration.maybeRemoveActionExtension('network.clear');
     await import('./network-meta.js');

front_end/panels/network/networkLogView.css

@@ -328,23 +328,13 @@
 }
 
 .network-status-pane {
-  color: var(--sys-color-token-subtle);
+  position: absolute;
+  inset: 0;
   background-color: var(--sys-color-cdt-base-container);
   z-index: 500;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  padding: 0 20px;
   overflow: auto;
 }
 
-.network-status-pane > .recording-hint {
-  font-size: 14px;
-  text-align: center;
-  line-height: 28px;
-}
-
 .network-waterfall-header {
   position: absolute;
   border-left: 0;
@@ -422,10 +412,6 @@
 }
 
 @media (forced-colors: active) {
-  .network-status-pane > .recording-hint {
-    color: canvastext;
-  }
-
   .initiator-column .devtools-link {
     color: linktext;
   }
@@ -448,8 +434,8 @@
     --color-grid-focus-selected: Highlight;
   }
 
-  #network-container.no-node-selected:focus-within,
-  .network-status-pane {
+  #network-container.no-node-selected:focus-within
+  {
     forced-color-adjust: none;
     border-color: Highlight;
     background-color: canvas !important; /* stylelint-disable-line declaration-no-important */

front_end/testing/NetworkHelpers.ts

@@ -11,7 +11,7 @@ import {
 } from './EnvironmentHelpers.js';
 
 export async function createNetworkPanelForMockConnection(): Promise<Network.NetworkPanel.NetworkPanel> {
-  registerNoopActions(['network.toggle-recording', 'network.clear']);
+  registerNoopActions(['network.toggle-recording', 'network.clear', 'inspector-main.reload']);
 
   const dummyStorage = new Common.Settings.SettingsStorage({});
   for (const settingName

test/e2e/helpers/network-helpers.ts

@@ -219,7 +219,12 @@ export function veImpressionForNetworkPanel(options?: {newFilterBar?: boolean})
         ]),
     veImpression('Timeline', 'network-overview'),
     veImpression('Toggle', 'network-settings'),
-    veImpression('Link', 'learn-more'),
+    veImpression(
+        'Section', 'empty-view',
+        [
+          veImpression('Action', 'inspector-main.reload'),
+          veImpression('Link', 'learn-more'),
+        ]),
     veImpression('TableHeader', 'name'),
     veImpression('TableHeader', 'status'),
     veImpression('TableHeader', 'type'),