Rayan Kanso | 6890420 | 2019-02-21 14:16:25 | [diff] [blame] | 1 | // Copyright 2019 The Chromium Authors. All rights reserved. |
| 2 | // Use of this source code is governed by a BSD-style license that can be |
| 3 | // found in the LICENSE file. |
| 4 | |
| 5 | Resources.BackgroundServiceView = class extends UI.VBox { |
| 6 | /** |
Rayan Kanso | 8fe8ee2 | 2019-03-04 14:58:46 | [diff] [blame^] | 7 | * @param {!Protocol.BackgroundService.ServiceName} serviceName |
| 8 | * @param {!Resources.BackgroundServiceModel} model |
Rayan Kanso | 6890420 | 2019-02-21 14:16:25 | [diff] [blame] | 9 | */ |
Rayan Kanso | 8fe8ee2 | 2019-03-04 14:58:46 | [diff] [blame^] | 10 | constructor(serviceName, model) { |
Rayan Kanso | 6890420 | 2019-02-21 14:16:25 | [diff] [blame] | 11 | super(true); |
| 12 | this.registerRequiredCSS('resources/backgroundServiceView.css'); |
| 13 | |
Rayan Kanso | 8fe8ee2 | 2019-03-04 14:58:46 | [diff] [blame^] | 14 | /** @const {!Protocol.BackgroundService.ServiceName} */ |
Rayan Kanso | 6890420 | 2019-02-21 14:16:25 | [diff] [blame] | 15 | this._serviceName = serviceName; |
| 16 | |
Rayan Kanso | 8fe8ee2 | 2019-03-04 14:58:46 | [diff] [blame^] | 17 | /** @const {!Resources.BackgroundServiceModel} */ |
| 18 | this._model = model; |
| 19 | this._model.addEventListener( |
| 20 | Resources.BackgroundServiceModel.Events.RecordingStateChanged, this._onRecordingStateChanged, this); |
| 21 | this._model.enable(this._serviceName); |
| 22 | |
| 23 | /** @type {?UI.ToolbarToggle} */ |
| 24 | this._recordButton = null; |
| 25 | |
Rayan Kanso | 6890420 | 2019-02-21 14:16:25 | [diff] [blame] | 26 | /** @const {!UI.Toolbar} */ |
| 27 | this._toolbar = new UI.Toolbar('background-service-toolbar', this.contentElement); |
| 28 | this._setupToolbar(); |
| 29 | } |
| 30 | |
| 31 | /** |
| 32 | * Creates the toolbar UI element. |
| 33 | */ |
Rayan Kanso | 8fe8ee2 | 2019-03-04 14:58:46 | [diff] [blame^] | 34 | async _setupToolbar() { |
| 35 | this._recordButton = |
Rayan Kanso | 6890420 | 2019-02-21 14:16:25 | [diff] [blame] | 36 | new UI.ToolbarToggle(Common.UIString('Toggle Record'), 'largeicon-start-recording', 'largeicon-stop-recording'); |
Rayan Kanso | 8fe8ee2 | 2019-03-04 14:58:46 | [diff] [blame^] | 37 | this._recordButton.addEventListener(UI.ToolbarButton.Events.Click, () => this._toggleRecording()); |
| 38 | this._recordButton.setToggleWithRedColor(true); |
| 39 | this._toolbar.appendToolbarItem(this._recordButton); |
Rayan Kanso | 6890420 | 2019-02-21 14:16:25 | [diff] [blame] | 40 | |
| 41 | const refreshButton = new UI.ToolbarButton(Common.UIString('Refresh'), 'largeicon-refresh'); |
| 42 | refreshButton.addEventListener(UI.ToolbarButton.Events.Click, () => {}); |
| 43 | this._toolbar.appendToolbarItem(refreshButton); |
| 44 | |
| 45 | const clearButton = new UI.ToolbarButton(Common.UIString('Clear'), 'largeicon-clear'); |
| 46 | clearButton.addEventListener(UI.ToolbarButton.Events.Click, () => {}); |
| 47 | this._toolbar.appendToolbarItem(clearButton); |
| 48 | |
| 49 | this._toolbar.appendSeparator(); |
| 50 | |
| 51 | const deleteButton = new UI.ToolbarButton(Common.UIString('Delete'), 'largeicon-trash-bin'); |
| 52 | deleteButton.addEventListener(UI.ToolbarButton.Events.Click, () => {}); |
| 53 | this._toolbar.appendToolbarItem(deleteButton); |
| 54 | } |
Rayan Kanso | 8fe8ee2 | 2019-03-04 14:58:46 | [diff] [blame^] | 55 | |
| 56 | /** |
| 57 | * Called when the `Toggle Record` button is clicked. |
| 58 | */ |
| 59 | _toggleRecording() { |
| 60 | this._model.setRecording(!this._recordButton.toggled(), this._serviceName); |
| 61 | } |
| 62 | |
| 63 | /** |
| 64 | * @param {!Common.Event} event |
| 65 | */ |
| 66 | _onRecordingStateChanged(event) { |
| 67 | const state = /** @type {!Resources.BackgroundServiceModel.RecordingState} */ (event.data); |
| 68 | if (state.serviceName !== this._serviceName) |
| 69 | return; |
| 70 | this._recordButton.setToggled(state.isRecording); |
| 71 | } |
Rayan Kanso | 6890420 | 2019-02-21 14:16:25 | [diff] [blame] | 72 | }; |