Make ProgressIndicator a custom element.

Bypass-Check-License: only changing existing files
Bug: 407750483
Change-Id: If8438b6693ed2210576c4551af9b24a0c62f0019
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6870375
Auto-Submit: Danil Somsikov <[email protected]>
Reviewed-by: Benedikt Meurer <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>

Author: danilsomsikov

front_end/models/har/Writer.test.ts

@@ -2,12 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../ui/legacy/legacy.js';
+
 import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import {describeWithLocale} from '../../testing/EnvironmentHelpers.js';
-import * as UI from '../../ui/legacy/legacy.js';
 import * as HAR from '../har/har.js';
 import * as TextUtils from '../text_utils/text_utils.js';
 
@@ -31,7 +32,7 @@ describeWithLocale('HARWriter', () => {
     const req2 = simulateRequestWithStartTime(req2Time.getTime() / 1000);
     const req3 = simulateRequestWithStartTime(req3Time.getTime() / 1000);
 
-    const progressIndicator = new UI.ProgressIndicator.ProgressIndicator();
+    const progressIndicator = document.createElement('devtools-progress');
     const compositeProgress = new Common.Progress.CompositeProgress(progressIndicator);
     const result = await HAR.Writer.Writer.harStringForRequests(
         [

front_end/panels/console/ConsoleView.ts

@@ -1215,7 +1215,7 @@ export class ConsoleView extends UI.Widget.VBox implements
         Platform.DevToolsPath.RawPathString;
     const stream = new Bindings.FileUtils.FileOutputStream();
 
-    const progressIndicator = new UI.ProgressIndicator.ProgressIndicator();
+    const progressIndicator = document.createElement('devtools-progress');
     progressIndicator.setTitle(i18nString(UIStrings.writingFile));
     progressIndicator.setTotalWork(this.itemCount());
 
@@ -1224,7 +1224,7 @@ export class ConsoleView extends UI.Widget.VBox implements
     if (!await stream.open(filename)) {
       return;
     }
-    this.progressToolbarItem.element.appendChild(progressIndicator.element);
+    this.progressToolbarItem.element.appendChild(progressIndicator);
 
     let messageIndex = 0;
     while (messageIndex < this.itemCount() && !progressIndicator.isCanceled()) {
@@ -1518,10 +1518,10 @@ export class ConsoleView extends UI.Widget.VBox implements
       this.searchShouldJumpBackwards = Boolean(jumpBackwards);
     }
 
-    this.searchProgressIndicator = new UI.ProgressIndicator.ProgressIndicator();
+    this.searchProgressIndicator = document.createElement('devtools-progress');
     this.searchProgressIndicator.setTitle(i18nString(UIStrings.searching));
     this.searchProgressIndicator.setTotalWork(this.visibleViewMessages.length);
-    this.progressToolbarItem.element.appendChild(this.searchProgressIndicator.element);
+    this.progressToolbarItem.element.appendChild(this.searchProgressIndicator);
 
     this.innerSearch(0);
   }

front_end/panels/mobile_throttling/ThrottlingSettingsTab.ts

@@ -258,8 +258,8 @@ export class CPUThrottlingCard {
 
     this.textEl = this.calibrateEl.createChild('div', 'text-container');
 
-    this.progress = new UI.ProgressIndicator.ProgressIndicator({showStopButton: false});
-    this.calibrateEl.append(this.progress.element);
+    this.progress = this.calibrateEl.createChild('devtools-progress');
+    this.progress.setAttribute('no-stop-button', '');
 
     this.updateState();
   }
@@ -288,7 +288,7 @@ export class CPUThrottlingCard {
     this.calibrateButton.style.display = 'none';
     this.textEl.style.display = 'none';
     this.cancelButton.style.display = 'none';
-    this.progress.element.style.display = 'none';
+    this.progress.style.display = 'none';
 
     if (this.state === 'cta') {
       this.calibrateButton.style.display = '';
@@ -314,7 +314,7 @@ export class CPUThrottlingCard {
       this.textEl.append(this.createTextWithIcon(i18nString(UIStrings.calibrationConfirmationPrompt), 'info'));
     } else if (this.state === 'calibrating') {
       this.cancelButton.style.display = '';
-      this.progress.element.style.display = '';
+      this.progress.style.display = '';
     }
 
     const resultToString = (result: number|SDK.CPUThrottlingManager.CalibrationError|undefined): string => {

front_end/panels/network/NetworkLogView.ts

@@ -1972,8 +1972,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       return;
     }
 
-    const progressIndicator = new UI.ProgressIndicator.ProgressIndicator();
-    this.progressBarContainer.appendChild(progressIndicator.element);
+    const progressIndicator = this.progressBarContainer.createChild('devtools-progress');
     await HAR.Writer.Writer.write(stream, this.harRequests(), options, progressIndicator);
     progressIndicator.done();
     void stream.close();

front_end/panels/search/SearchView.ts

@@ -336,9 +336,9 @@ export class SearchView extends UI.Widget.VBox {
     if (this.progressIndicator) {
       this.progressIndicator.done();
     }
-    this.progressIndicator = new UI.ProgressIndicator.ProgressIndicator();
+    this.progressIndicator = document.createElement('devtools-progress');
     this.searchMessageElement.textContent = i18nString(UIStrings.indexing);
-    this.progressIndicator.show(this.searchProgressPlaceholderElement);
+    this.searchProgressPlaceholderElement.appendChild(this.progressIndicator);
     if (this.searchScope) {
       this.searchScope.performIndexing(
           new Common.Progress.ProgressProxy(this.progressIndicator, this.onIndexingFinished.bind(this)));
@@ -396,7 +396,7 @@ export class SearchView extends UI.Widget.VBox {
     if (this.progressIndicator) {
       this.progressIndicator.done();
     }
-    this.progressIndicator = new UI.ProgressIndicator.ProgressIndicator();
+    this.progressIndicator = document.createElement('devtools-progress');
     this.searchStarted(this.progressIndicator);
     if (this.searchScope) {
       void this.searchScope.performSearch(
@@ -432,7 +432,7 @@ export class SearchView extends UI.Widget.VBox {
     }
     this.showPane(this.searchingView);
     this.searchMessageElement.textContent = i18nString(UIStrings.searching);
-    progressIndicator.show(this.searchProgressPlaceholderElement);
+    this.searchProgressPlaceholderElement.appendChild(progressIndicator);
     this.updateSearchResultsMessage();
   }
 

front_end/ui/legacy/ProgressIndicator.ts

@@ -28,80 +28,86 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-/* eslint-disable rulesdir/no-imperative-dom-api */
-
 import type * as Common from '../../core/common/common.js';
 
 import progressIndicatorStyles from './progressIndicator.css.js';
 import {createShadowRootWithCoreStyles} from './UIUtils.js';
 
-export class ProgressIndicator implements Common.Progress.Progress {
-  element: HTMLDivElement;
-  private readonly shadowRoot: ShadowRoot;
-  private readonly contentElement: Element;
-  private labelElement: Element;
-  private progressElement: HTMLProgressElement;
-  private readonly stopButton?: Element;
-  private isCanceledInternal: boolean;
-  private worked: number;
-  private isDone?: boolean;
-
-  constructor(options = {showStopButton: true}) {
-    this.element = document.createElement('div');
-    this.element.classList.add('progress-indicator');
-    this.shadowRoot = createShadowRootWithCoreStyles(this.element, {cssFile: progressIndicatorStyles});
-    this.contentElement = this.shadowRoot.createChild('div', 'progress-indicator-shadow-container');
-
-    this.labelElement = this.contentElement.createChild('div', 'title');
-    this.progressElement = this.contentElement.createChild('progress');
-    this.progressElement.value = 0;
-
-    if (options.showStopButton) {
-      this.stopButton = this.contentElement.createChild('button', 'progress-indicator-shadow-stop-button');
-      this.stopButton.addEventListener('click', this.cancel.bind(this));
+export class ProgressIndicator extends HTMLElement implements Common.Progress.Progress {
+  readonly #shadowRoot: ShadowRoot;
+  readonly #contentElement: Element;
+  #labelElement: Element;
+  #progressElement: HTMLProgressElement;
+  readonly #stopButton?: Element;
+  #isCanceled = false;
+  #worked: number;
+  #isDone = false;
+
+  constructor() {
+    super();
+    this.#shadowRoot = createShadowRootWithCoreStyles(this, {cssFile: progressIndicatorStyles});
+    this.#contentElement = this.#shadowRoot.createChild('div', 'progress-indicator-shadow-container');
+
+    this.#labelElement = this.#contentElement.createChild('div', 'title');
+    this.#progressElement = this.#contentElement.createChild('progress') as HTMLProgressElement;
+    this.#progressElement.value = 0;
+
+    // By default we show the stop button, but this can be controlled by
+    // using the 'no-stop-button' attribute on the element.
+    if (!this.hasAttribute('no-stop-button')) {
+      this.#stopButton = this.#contentElement.createChild('button', 'progress-indicator-shadow-stop-button');
+      this.#stopButton.addEventListener('click', this.cancel.bind(this));
     }
 
-    this.isCanceledInternal = false;
-    this.worked = 0;
+    this.#isCanceled = false;
+    this.#worked = 0;
   }
 
-  show(parent: Element): void {
-    parent.appendChild(this.element);
+  connectedCallback(): void {
+    this.classList.add('progress-indicator');
   }
 
   done(): void {
-    if (this.isDone) {
+    if (this.#isDone) {
       return;
     }
-    this.isDone = true;
-    this.element.remove();
+    this.#isDone = true;
+    this.remove();
   }
 
   cancel(): void {
-    this.isCanceledInternal = true;
+    this.#isCanceled = true;
   }
 
   isCanceled(): boolean {
-    return this.isCanceledInternal;
+    return this.#isCanceled;
   }
 
   setTitle(title: string): void {
-    this.labelElement.textContent = title;
+    this.#labelElement.textContent = title;
   }
 
   setTotalWork(totalWork: number): void {
-    this.progressElement.max = totalWork;
+    this.#progressElement.max = totalWork;
   }
 
   setWorked(worked: number, title?: string): void {
-    this.worked = worked;
-    this.progressElement.value = worked;
+    this.#worked = worked;
+    this.#progressElement.value = worked;
     if (title) {
       this.setTitle(title);
     }
   }
 
   incrementWorked(worked?: number): void {
-    this.setWorked(this.worked + (worked || 1));
+    this.setWorked(this.#worked + (worked || 1));
+  }
+}
+
+customElements.define('devtools-progress', ProgressIndicator);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-progress': ProgressIndicator;
   }
 }

front_end/ui/legacy/components/source_frame/SourceFrame.ts

@@ -551,10 +551,10 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
 
   protected async setContentDataOrError(contentDataPromise: Promise<TextUtils.ContentData.ContentDataOrError>):
       Promise<void> {
-    const progressIndicator = new UI.ProgressIndicator.ProgressIndicator();
+    const progressIndicator = document.createElement('devtools-progress');
     progressIndicator.setTitle(i18nString(UIStrings.loading));
     progressIndicator.setTotalWork(100);
-    this.progressToolbarItem.element.appendChild(progressIndicator.element);
+    this.progressToolbarItem.element.appendChild(progressIndicator);
 
     progressIndicator.setWorked(1);
     const contentData = await contentDataPromise;