[GM3Restyling] Update network blocking request empty states

Before: https://i.imgur.com/2Me0vzH.png
After: https://i.imgur.com/i3OuKr4.png
Bug: 325443331
Change-Id: I473e959a63b16412e672b53a8ba76417f1488389
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6275932
Commit-Queue: Kim-Anh Tran <[email protected]>
Reviewed-by: Kateryna Prokopenko <[email protected]>

Author: ktran

front_end/panels/network/BlockedURLsPane.test.ts

@@ -5,6 +5,7 @@
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Logs from '../../models/logs/logs.js';
+import {dispatchClickEvent} from '../../testing/DOMHelpers.js';
 import {createTarget, registerNoopActions} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
 
@@ -20,6 +21,31 @@ describeWithMockConnection('BlockedURLsPane', () => {
     ]);
   });
 
+  it('shows a placeholder', () => {
+    const blockedURLsPane = new Network.BlockedURLsPane.BlockedURLsPane();
+    const blockedElement = blockedURLsPane.contentElement.querySelector('.blocked-urls');
+    const placeholder = blockedElement?.shadowRoot?.querySelector('.empty-state');
+    assert.exists(placeholder);
+    assert.deepEqual(placeholder.querySelector('.empty-state-header')?.textContent, 'No blocked network requests');
+    assert.deepEqual(
+        placeholder.querySelector('.empty-state-description > span')?.textContent,
+        'Add a pattern to block network requests by clicking on the \"Add pattern\" button.');
+  });
+
+  it('Add pattern button triggers showing the editor view', () => {
+    const blockedURLsPane = new Network.BlockedURLsPane.BlockedURLsPane();
+    const blockedElement = blockedURLsPane.contentElement.querySelector('.blocked-urls');
+    const list = blockedElement?.shadowRoot?.querySelector('.list');
+    const placeholder = list?.querySelector('.empty-state');
+
+    const button = placeholder?.querySelector('devtools-button');
+    assert.exists(button);
+
+    assert.isNull(list?.querySelector('.editor-content'));
+    dispatchClickEvent(button);
+    assert.exists(list?.querySelector('.editor-content'));
+  });
+
   describe('update', () => {
     const updatesOnRequestFinishedEvent = (inScope: boolean) => () => {
       const target = createTarget();

front_end/panels/network/BlockedURLsPane.ts

@@ -29,10 +29,14 @@ const UIStrings = {
    */
   addNetworkRequestBlockingPattern: 'Add network request blocking pattern',
   /**
-   *@description Button to add a pattern to block netwrok requests in the Network request blocking tool
+   *@description Text that shows in the network request blocking panel if no pattern has yet been added.
+   */
+  noNetworkRequestsBlocked: 'No blocked network requests',
+  /**
+   *@description Text that shows  in the network request blocking panel if no pattern has yet been added.
    *@example {Add pattern} PH1
    */
-  networkRequestsAreNotBlockedS: 'Network requests are not blocked. {PH1}',
+  addPatternToBlock: 'Add a pattern to block network requests by clicking on the "{PH1}" button.',
   /**
    *@description Text in Blocked URLs Pane of the Network panel
    *@example {4} PH1
@@ -54,10 +58,17 @@ const UIStrings = {
    *@description Message to be announced for a when list item is removed from list widget
    */
   itemDeleted: 'Item successfully deleted',
+  /**
+   *@description Message to be announced for a when list item is removed from list widget
+   */
+  learnMore: 'Learn more',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/network/BlockedURLsPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+const NETWORK_REQUEST_BLOCKING_EXPLANATION_URL =
+    'https://developer.chrome.com/docs/devtools/network-request-blocking' as Platform.DevToolsPath.UrlString;
+
 export class BlockedURLsPane extends UI.Widget.VBox implements
     UI.ListWidget.Delegate<SDK.NetworkManager.BlockedPattern> {
   private manager: SDK.NetworkManager.MultitargetNetworkManager;
@@ -108,16 +119,24 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
   }
 
   private createEmptyPlaceholder(): Element {
-    const element = this.contentElement.createChild('div', 'no-blocked-urls');
+    const placeholder = this.contentElement.createChild('div', 'empty-state');
+    placeholder.createChild('span', 'empty-state-header').textContent = i18nString(UIStrings.noNetworkRequestsBlocked);
+
+    const description = placeholder.createChild('div', 'empty-state-description');
+    description.createChild('span').textContent =
+        i18nString(UIStrings.addPatternToBlock, {PH1: i18nString(UIStrings.addPattern)});
+    const link = UI.XLink.XLink.create(
+        NETWORK_REQUEST_BLOCKING_EXPLANATION_URL, i18nString(UIStrings.learnMore), undefined, undefined, 'learn-more');
+    description.appendChild(link);
+
     const addButton = UI.UIUtils.createTextButton(i18nString(UIStrings.addPattern), this.addPattern.bind(this), {
       className: 'add-button',
       jslogContext: 'network.add-network-request-blocking-pattern',
-      variant: Buttons.Button.Variant.PRIMARY,
+      variant: Buttons.Button.Variant.TONAL,
     });
     UI.ARIAUtils.setLabel(addButton, i18nString(UIStrings.addNetworkRequestBlockingPattern));
-    element.appendChild(
-        i18n.i18n.getFormatLocalizedString(str_, UIStrings.networkRequestsAreNotBlockedS, {PH1: addButton}));
-    return element;
+    placeholder.appendChild(addButton);
+    return placeholder;
   }
 
   addPattern(): void {

front_end/panels/network/blockedURLsPane.css

@@ -7,6 +7,8 @@
 .list {
   border: none !important; /* stylelint-disable-line declaration-no-important */
   border-top: 1px solid var(--sys-color-divider) !important; /* stylelint-disable-line declaration-no-important */
+  display: flex;
+  height: 100%;
 }
 
 .blocking-disabled {
@@ -17,23 +19,10 @@
   padding: 0 4px;
 }
 
-.no-blocked-urls,
 .blocked-urls {
   overflow: hidden auto;
 }
 
-.no-blocked-urls {
-  display: flex;
-  justify-content: center;
-  padding: 10px;
-
-  & devtools-button {
-    display: flex;
-    justify-content: center;
-    margin-top: var(--sys-size-8);
-  }
-}
-
 .no-blocked-urls > span {
   white-space: pre;
 }