DevTools: Convert add pattern link to a keyboard accessible button

Currently the 'Add pattern' link in the Request blocking tool is not
keyboard accessible. Pressing enter or space doesn't open the add
pattern box. See the bug for more info. This CL converts the link to
a button that's more consistent with rest of the DT
(examples: https://imgur.com/a/ZU2Xr0P) and makes it keyboard
accessible.

GIF of how it works now: https://imgur.com/HjDKRoo

Bug: 1006125
Change-Id: Iff77cfeb744c6a0da87ea0182512deb7ba1f4bad
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1817332Reviewed-by: Lorne Mitchell <lomitch@microsoft.com>
Commit-Queue: Mandy Chen <mandy.chen@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#703955}

third_party/blink/renderer/devtools/front_end/network/BlockedURLsPane.js

@@ -50,9 +50,9 @@ Network.BlockedURLsPane = class extends UI.VBox {
    */
   _createEmptyPlaceholder() {
     const element = this.contentElement.createChild('div', 'no-blocked-urls');
-    const addLink = UI.XLink.create('', ls`Add pattern`);
-    addLink.addEventListener('click', this._addButtonClicked.bind(this), false);
-    element.appendChild(UI.formatLocalized('Requests are not blocked. %s.', [addLink]));
+    const addButton = UI.createTextButton(ls`Add pattern`, this._addButtonClicked.bind(this), 'add-button');
+    UI.ARIAUtils.setAccessibleName(addButton, ls`Add request blocking pattern`);
+    element.appendChild(UI.formatLocalized('Requests are not blocked. %s', [addButton]));
     return element;
   }
 

third_party/blink/renderer/devtools/front_end/network/network_strings.grdp

@@ -117,9 +117,6 @@
   <message name="IDS_DEVTOOLS_2537b3e6907e17001b7cdf121cd39dc0" desc="Text in Request Headers View of the Network panel">
     (from ServiceWorker)
   </message>
-  <message name="IDS_DEVTOOLS_25f77a709e3c31285e8411402420b72d" desc="Text in Blocked URLs Pane of the Network panel">
-    Requests are not blocked. <ph name="ADDLINK">$1s<ex>Add pattern</ex></ph>.
-  </message>
   <message name="IDS_DEVTOOLS_26b6b5ae2c6e2575b2a451c35e94df23" desc="Text in Request Timing View of the Network panel">
     Waiting (TTFB)
   </message>
@@ -264,6 +261,9 @@
   <message name="IDS_DEVTOOLS_5101cdda28ea3097ac00cdbfdcedc353" desc="Title of a setting under the Network category that can be invoked through the Command Menu">
     Use default colors
   </message>
+  <message name="IDS_DEVTOOLS_52c2263c92c8b0f41e36892ccd8cb119" desc="Accessible label for the button to add request blocking patterns in the Request blocking tool">
+    Add request blocking pattern
+  </message>
   <message name="IDS_DEVTOOLS_53fa249ce3d02c8a686b657b31d02ee7" desc="Text in Network Log View of the Network panel">
     Copy response
   </message>
@@ -714,6 +714,9 @@
   <message name="IDS_DEVTOOLS_cc0af601bfd673427a8abb171f62c707" desc="Reason in Network Data Grid Node of the Network panel">
     content-type
   </message>
+  <message name="IDS_DEVTOOLS_cc910147ba0845397ea686345faf7340" desc="Button to add a pattern to block requests in the Request Blocking tool">
+    Requests are not blocked. <ph name="ADD_BUTTON">$1s<ex>Add pattern</ex></ph>
+  </message>
   <message name="IDS_DEVTOOLS_ce9d64b8fde226fd9e5fa4c0947c7ee0" desc="Tooltip to explain what response cookies are">
     Cookies that were received from the server in the &apos;set-cookie&apos; header of the response
   </message>