[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;
+ }
+};
