DevTools: Make global listeners view keyboard-navigable

This PR enables keyboard navigation of the event listeners tree view and
adds a more descriptive aria-label for the refresh button.

Keyboard navigation gif: https://i.imgur.com/QlKjnEf.mp4
Empty pane focused screenshot: https://gyazo.com/d494f4ab0b2f9d550192f9920838b6a0

Bug: 963183
Change-Id: I6f7c1fa304606238c1bf23d7a663560cc2c75718
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1665298Reviewed-by: Lorne Mitchell <lomitch@microsoft.com>
Commit-Queue: Jack Lynch <jalyn@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#706560}

third_party/blink/renderer/devtools/front_end/browser_debugger/ObjectEventListenersSidebarPane.js

@@ -8,12 +8,13 @@
 BrowserDebugger.ObjectEventListenersSidebarPane = class extends UI.VBox {
   constructor() {
     super();
-    this._refreshButton = new UI.ToolbarButton(Common.UIString('Refresh'), 'largeicon-refresh');
+    this._refreshButton = new UI.ToolbarButton(ls`Refresh global listeners`, 'largeicon-refresh');
     this._refreshButton.addEventListener(UI.ToolbarButton.Events.Click, this._refreshClick, this);
     this._refreshButton.setEnabled(false);
 
     this._eventListenersView = new EventListeners.EventListenersView(this.update.bind(this));
     this._eventListenersView.show(this.element);
+    this.setDefaultFocusedChild(this._eventListenersView);
   }
 
   /**

third_party/blink/renderer/devtools/front_end/browser_debugger/browser_debugger_strings.grdp

@@ -21,6 +21,9 @@
   <message name="IDS_DEVTOOLS_66b74432bdc2797086f419010cc5ff86" desc="Title of the 'DOM Breakpoints' tool in the bottom sidebar of the Sources tool">
     DOM Breakpoints
   </message>
+  <message name="IDS_DEVTOOLS_9f76c421048cb58ab03988d2ce1c813e" desc="Label for a button in the sources panel that refreshes the list of global event listeners.">
+    Refresh global listeners
+  </message>
   <message name="IDS_DEVTOOLS_b839f802a330e4d4145cb182e6767f45" desc="Text in XHRBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel">
     Any XHR or fetch
   </message>

third_party/blink/renderer/devtools/front_end/event_listeners/EventListenersView.js

@@ -27,11 +27,23 @@ EventListeners.EventListenersView = class extends UI.VBox {
     this.element.appendChild(this._treeOutline.element);
     this._emptyHolder = createElementWithClass('div', 'gray-info-message');
     this._emptyHolder.textContent = Common.UIString('No event listeners');
+    this._emptyHolder.tabIndex = -1;
     this._linkifier = new Components.Linkifier();
     /** @type {!Map<string, !EventListeners.EventListenersTreeElement>} */
     this._treeItemMap = new Map();
   }
 
+  /**
+   * @override
+   */
+  focus() {
+    if (!this._emptyHolder.parentNode) {
+      this._treeOutline.forceSelect();
+    } else {
+      this._emptyHolder.focus();
+    }
+  }
+
   /**
    * @param {!Array<?SDK.RemoteObject>} objects
    * @return {!Promise<undefined>}