[DevTools] dd a recording shortcut for Background Services.

Map the Ctrl+E (or Cmd+E on Mac) to the recording functionality.
Also update the CSS to match that of other UI states.

Screenshot: https://bugs.chromium.org/p/chromium/issues/detail?id=942174#c19

Bug: 942174
Change-Id: Ie3b0518022ca8e320bad6f939f9525595cd9889e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1587884
Commit-Queue: Rayan Kanso <[email protected]>
Reviewed-by: Dmitry Gozman <[email protected]>
Cr-Original-Commit-Position: refs/heads/master@{#655074}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 1fea123688372477996125b02ecf2baa62447ee2
diff --git a/front_end/resources/BackgroundServiceView.js b/front_end/resources/BackgroundServiceView.js
index bfd5c8e..d827e1f 100644
--- a/front_end/resources/BackgroundServiceView.js
+++ b/front_end/resources/BackgroundServiceView.js
@@ -25,6 +25,7 @@
   constructor(serviceName, model) {
     super(true);
     this.registerRequiredCSS('resources/backgroundServiceView.css');
+    this.registerRequiredCSS('ui/emptyWidget.css');
 
     /** @const {!Protocol.BackgroundService.ServiceName} */
     this._serviceName = serviceName;
@@ -88,10 +89,8 @@
    * Creates the toolbar UI element.
    */
   async _setupToolbar() {
-    this._recordButton =
-        new UI.ToolbarToggle(ls`Toggle Record`, 'largeicon-start-recording', 'largeicon-stop-recording');
-    this._recordButton.addEventListener(UI.ToolbarButton.Events.Click, () => this._toggleRecording());
-    this._recordButton.setToggleWithRedColor(true);
+    const action = /** @type {!UI.Action} */ (UI.actionRegistry.action('background-service.toggle-recording'));
+    this._recordButton = UI.Toolbar.createActionButton(action);
     this._toolbar.appendToolbarItem(this._recordButton);
 
     const clearButton = new UI.ToolbarButton(ls`Clear`, 'largeicon-clear');
@@ -283,16 +282,19 @@
           ls`Recording ${Resources.BackgroundServiceView.getUIString(this._serviceName)} activity...`);
     } else {
       this._preview = new UI.VBox();
-      this._preview.contentElement.classList.add('background-service-landing-page');
-      const centered = this._preview.contentElement.createChild('div');
+      this._preview.contentElement.classList.add('empty-view-scroller');
+      const centered = this._preview.contentElement.createChild('div', 'empty-view');
 
-      const landingRecordButton =
-          new UI.ToolbarToggle(ls`Toggle Record`, 'largeicon-start-recording', 'largeicon-stop-recording');
-      landingRecordButton.addEventListener(UI.ToolbarButton.Events.Click, () => this._toggleRecording());
+      const action = /** @type {!UI.Action} */ (UI.actionRegistry.action('background-service.toggle-recording'));
+      const landingRecordButton = UI.Toolbar.createActionButton(action);
 
-      // TODO(rayankans): Add a keyboard shortcut.
-      centered.createChild('p').appendChild(UI.formatLocalized(
-          'Click the record button %s to start recording.', [UI.createInlineButton(landingRecordButton)]));
+      const recordKey = createElementWithClass('b', 'background-service-shortcut');
+      recordKey.textContent =
+          UI.shortcutRegistry.shortcutDescriptorsForAction('background-service.toggle-recording')[0].name;
+
+      centered.createChild('h2').appendChild(UI.formatLocalized(
+          'Click the record button %s or hit %s to start recording.',
+          [UI.createInlineButton(landingRecordButton), recordKey]));
     }
 
     this._preview.show(this._previewPanel.contentElement);
@@ -362,3 +364,25 @@
     return preview;
   }
 };
+
+/**
+ * @implements {UI.ActionDelegate}
+ * @unrestricted
+ */
+Resources.BackgroundServiceView.ActionDelegate = class {
+  /**
+   * @override
+   * @param {!UI.Context} context
+   * @param {string} actionId
+   * @return {boolean}
+   */
+  handleAction(context, actionId) {
+    const view = context.flavor(Resources.BackgroundServiceView);
+    switch (actionId) {
+      case 'background-service.toggle-recording':
+        view._toggleRecording();
+        return true;
+    }
+    return false;
+  }
+};