|
28 | 28 | * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
29 | 29 | */ |
30 | 30 |
|
31 | | -/* eslint-disable rulesdir/no-imperative-dom-api */ |
32 | | - |
33 | 31 | import type * as Common from '../../core/common/common.js'; |
34 | 32 |
|
35 | 33 | import progressIndicatorStyles from './progressIndicator.css.js'; |
36 | 34 | import {createShadowRootWithCoreStyles} from './UIUtils.js'; |
37 | 35 |
|
38 | | -export class ProgressIndicator implements Common.Progress.Progress { |
39 | | - element: HTMLDivElement; |
40 | | - private readonly shadowRoot: ShadowRoot; |
41 | | - private readonly contentElement: Element; |
42 | | - private labelElement: Element; |
43 | | - private progressElement: HTMLProgressElement; |
44 | | - private readonly stopButton?: Element; |
45 | | - private isCanceledInternal: boolean; |
46 | | - private worked: number; |
47 | | - private isDone?: boolean; |
48 | | - |
49 | | - constructor(options = {showStopButton: true}) { |
50 | | - this.element = document.createElement('div'); |
51 | | - this.element.classList.add('progress-indicator'); |
52 | | - this.shadowRoot = createShadowRootWithCoreStyles(this.element, {cssFile: progressIndicatorStyles}); |
53 | | - this.contentElement = this.shadowRoot.createChild('div', 'progress-indicator-shadow-container'); |
54 | | - |
55 | | - this.labelElement = this.contentElement.createChild('div', 'title'); |
56 | | - this.progressElement = this.contentElement.createChild('progress'); |
57 | | - this.progressElement.value = 0; |
58 | | - |
59 | | - if (options.showStopButton) { |
60 | | - this.stopButton = this.contentElement.createChild('button', 'progress-indicator-shadow-stop-button'); |
61 | | - this.stopButton.addEventListener('click', this.cancel.bind(this)); |
| 36 | +export class ProgressIndicator extends HTMLElement implements Common.Progress.Progress { |
| 37 | + readonly #shadowRoot: ShadowRoot; |
| 38 | + readonly #contentElement: Element; |
| 39 | + #labelElement: Element; |
| 40 | + #progressElement: HTMLProgressElement; |
| 41 | + readonly #stopButton?: Element; |
| 42 | + #isCanceled = false; |
| 43 | + #worked: number; |
| 44 | + #isDone = false; |
| 45 | + |
| 46 | + constructor() { |
| 47 | + super(); |
| 48 | + this.#shadowRoot = createShadowRootWithCoreStyles(this, {cssFile: progressIndicatorStyles}); |
| 49 | + this.#contentElement = this.#shadowRoot.createChild('div', 'progress-indicator-shadow-container'); |
| 50 | + |
| 51 | + this.#labelElement = this.#contentElement.createChild('div', 'title'); |
| 52 | + this.#progressElement = this.#contentElement.createChild('progress') as HTMLProgressElement; |
| 53 | + this.#progressElement.value = 0; |
| 54 | + |
| 55 | + // By default we show the stop button, but this can be controlled by |
| 56 | + // using the 'no-stop-button' attribute on the element. |
| 57 | + if (!this.hasAttribute('no-stop-button')) { |
| 58 | + this.#stopButton = this.#contentElement.createChild('button', 'progress-indicator-shadow-stop-button'); |
| 59 | + this.#stopButton.addEventListener('click', this.cancel.bind(this)); |
62 | 60 | } |
63 | 61 |
|
64 | | - this.isCanceledInternal = false; |
65 | | - this.worked = 0; |
| 62 | + this.#isCanceled = false; |
| 63 | + this.#worked = 0; |
66 | 64 | } |
67 | 65 |
|
68 | | - show(parent: Element): void { |
69 | | - parent.appendChild(this.element); |
| 66 | + connectedCallback(): void { |
| 67 | + this.classList.add('progress-indicator'); |
70 | 68 | } |
71 | 69 |
|
72 | 70 | done(): void { |
73 | | - if (this.isDone) { |
| 71 | + if (this.#isDone) { |
74 | 72 | return; |
75 | 73 | } |
76 | | - this.isDone = true; |
77 | | - this.element.remove(); |
| 74 | + this.#isDone = true; |
| 75 | + this.remove(); |
78 | 76 | } |
79 | 77 |
|
80 | 78 | cancel(): void { |
81 | | - this.isCanceledInternal = true; |
| 79 | + this.#isCanceled = true; |
82 | 80 | } |
83 | 81 |
|
84 | 82 | isCanceled(): boolean { |
85 | | - return this.isCanceledInternal; |
| 83 | + return this.#isCanceled; |
86 | 84 | } |
87 | 85 |
|
88 | 86 | setTitle(title: string): void { |
89 | | - this.labelElement.textContent = title; |
| 87 | + this.#labelElement.textContent = title; |
90 | 88 | } |
91 | 89 |
|
92 | 90 | setTotalWork(totalWork: number): void { |
93 | | - this.progressElement.max = totalWork; |
| 91 | + this.#progressElement.max = totalWork; |
94 | 92 | } |
95 | 93 |
|
96 | 94 | setWorked(worked: number, title?: string): void { |
97 | | - this.worked = worked; |
98 | | - this.progressElement.value = worked; |
| 95 | + this.#worked = worked; |
| 96 | + this.#progressElement.value = worked; |
99 | 97 | if (title) { |
100 | 98 | this.setTitle(title); |
101 | 99 | } |
102 | 100 | } |
103 | 101 |
|
104 | 102 | incrementWorked(worked?: number): void { |
105 | | - this.setWorked(this.worked + (worked || 1)); |
| 103 | + this.setWorked(this.#worked + (worked || 1)); |
| 104 | + } |
| 105 | +} |
| 106 | + |
| 107 | +customElements.define('devtools-progress', ProgressIndicator); |
| 108 | + |
| 109 | +declare global { |
| 110 | + interface HTMLElementTagNameMap { |
| 111 | + 'devtools-progress': ProgressIndicator; |
106 | 112 | } |
107 | 113 | } |
0 commit comments