chrome-devtools-frontend 1.0.1514545 → 1.0.1515796

package/front_end/third_party/puppeteer/package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "puppeteer-core",
-  "version": "24.20.0",
+  "version": "24.21.0",
   "description": "A high-level API to control headless Chrome over the DevTools Protocol",
   "keywords": [
     "puppeteer",
@@ -140,12 +140,12 @@
   "author": "The Chromium Authors",
   "license": "Apache-2.0",
   "dependencies": {
-    "@puppeteer/browsers": "2.10.9",
+    "@puppeteer/browsers": "2.10.10",
     "chromium-bidi": "8.0.0",
-    "debug": "^4.4.1",
+    "debug": "^4.4.3",
     "devtools-protocol": "0.0.1495869",
     "typed-query-selector": "^2.12.0",
-    "webdriver-bidi-protocol": "0.2.8",
+    "webdriver-bidi-protocol": "0.2.11",
     "ws": "^8.18.3"
   },
   "devDependencies": {

package/front_end/third_party/puppeteer/package/src/api/Browser.ts

@@ -412,7 +412,7 @@ export abstract class Browser extends EventEmitter<BrowserEvents> {
    * Gets this {@link Browser | browser's} original user agent.
    *
    * {@link Page | Pages} can override the user agent with
-   * {@link Page.setUserAgent}.
+   * {@link Page.(setUserAgent:2) }.
    *
    */
   abstract userAgent(): Promise<string>;

package/front_end/third_party/puppeteer/package/src/api/Page.ts

@@ -1655,12 +1655,23 @@ export abstract class Page extends EventEmitter<PageEvents> {
    * @param userAgentData - Specific user agent client hint data to use in this
    * page
    * @returns Promise which resolves when the user agent is set.
+   * @deprecated Use {@link Page.(setUserAgent:2) } instead.
    */
   abstract setUserAgent(
     userAgent: string,
     userAgentMetadata?: Protocol.Emulation.UserAgentMetadata,
   ): Promise<void>;
 
+  /**
+   * @param options - Object containing user agent and optional user agent metadata
+   * @returns Promise which resolves when the user agent is set.
+   */
+  abstract setUserAgent(options: {
+    userAgent?: string;
+    userAgentMetadata?: Protocol.Emulation.UserAgentMetadata;
+    platform?: string;
+  }): Promise<void>;
+
   /**
    * Object containing metrics as key/value pairs.
    *
@@ -2014,7 +2025,7 @@ export abstract class Page extends EventEmitter<PageEvents> {
    *
    * @remarks
    * This method is a shortcut for calling two methods:
-   * {@link Page.setUserAgent} and {@link Page.setViewport}.
+   * {@link Page.(setUserAgent:2) } and {@link Page.setViewport}.
    *
    * This method will resize the page. A lot of websites don't expect phones to
    * change size, so you should emulate before navigating to the page.
@@ -2037,7 +2048,7 @@ export abstract class Page extends EventEmitter<PageEvents> {
    */
   async emulate(device: Device): Promise<void> {
     await Promise.all([
-      this.setUserAgent(device.userAgent),
+      this.setUserAgent({userAgent: device.userAgent}),
       this.setViewport(device.viewport),
     ]);
   }

package/front_end/third_party/puppeteer/package/src/bidi/Page.ts

@@ -141,20 +141,45 @@ export class BidiPage extends Page {
   #userAgentInterception?: string;
   #userAgentPreloadScript?: string;
   override async setUserAgent(
-    userAgent: string,
+    userAgentOrOptions:
+      | string
+      | {
+          userAgent?: string;
+          userAgentMetadata?: Protocol.Emulation.UserAgentMetadata;
+          platform?: string;
+        },
     userAgentMetadata?: Protocol.Emulation.UserAgentMetadata,
   ): Promise<void> {
-    if (!this.#browserContext.browser().cdpSupported && userAgentMetadata) {
+    let userAgent: string;
+    let metadata: Protocol.Emulation.UserAgentMetadata | undefined;
+    let platform: string | undefined;
+
+    if (typeof userAgentOrOptions === 'string') {
+      userAgent = userAgentOrOptions;
+      metadata = userAgentMetadata;
+    } else {
+      userAgent =
+        userAgentOrOptions.userAgent ??
+        (await this.#browserContext.browser().userAgent());
+      metadata = userAgentOrOptions.userAgentMetadata;
+      platform = userAgentOrOptions.platform;
+    }
+
+    if (
+      !this.#browserContext.browser().cdpSupported &&
+      (metadata || platform)
+    ) {
       throw new UnsupportedOperation(
-        'Current Browser does not support `userAgentMetadata`',
+        'Current Browser does not support `userAgentMetadata` or `platform`',
       );
     } else if (
       this.#browserContext.browser().cdpSupported &&
-      userAgentMetadata
+      (metadata || platform)
     ) {
       return await this._client().send('Network.setUserAgentOverride', {
         userAgent: userAgent,
-        userAgentMetadata: userAgentMetadata,
+        userAgentMetadata: metadata,
+        platform: platform,
       });
     }
     const enable = userAgent !== '';
@@ -172,11 +197,20 @@ export class BidiPage extends Page {
       enable,
     );
 
-    const changeUserAgent = (userAgent: string) => {
+    const overrideNavigatorProperties = (
+      userAgent: string,
+      platform: string | undefined,
+    ) => {
       Object.defineProperty(navigator, 'userAgent', {
         value: userAgent,
         configurable: true,
       });
+      if (platform) {
+        Object.defineProperty(navigator, 'platform', {
+          value: platform,
+          configurable: true,
+        });
+      }
     };
 
     const frames = [this.#frame];
@@ -191,12 +225,20 @@ export class BidiPage extends Page {
     }
     const [evaluateToken] = await Promise.all([
       enable
-        ? this.evaluateOnNewDocument(changeUserAgent, userAgent)
+        ? this.evaluateOnNewDocument(
+            overrideNavigatorProperties,
+            userAgent,
+            platform || undefined,
+          )
         : undefined,
       // When we disable the UserAgent we want to
       // evaluate the original value in all Browsing Contexts
       ...frames.map(frame => {
-        return frame.evaluate(changeUserAgent, userAgent);
+        return frame.evaluate(
+          overrideNavigatorProperties,
+          userAgent,
+          platform || undefined,
+        );
       }),
     ]);
     this.#userAgentPreloadScript = evaluateToken?.identifier;

package/front_end/third_party/puppeteer/package/src/bidi/core/BrowsingContext.ts

@@ -713,7 +713,6 @@ export class BrowsingContext extends EventEmitter<{
 
   async setJavaScriptEnabled(enabled: boolean): Promise<void> {
     await this.userContext.browser.session.send(
-      // @ts-expect-error missing types
       'emulation.setScriptingEnabled',
       {
         // Enabled `null` means `default`, `false` means `disabled`.

package/front_end/third_party/puppeteer/package/src/cdp/NetworkManager.ts

@@ -77,11 +77,12 @@ export class NetworkManager extends EventEmitter<NetworkManagerEvents> {
   #credentials: Credentials | null = null;
   #attemptedAuthentications = new Set<string>();
   #userRequestInterceptionEnabled = false;
-  #protocolRequestInterceptionEnabled = false;
+  #protocolRequestInterceptionEnabled?: boolean;
   #userCacheDisabled?: boolean;
   #emulatedNetworkConditions?: InternalNetworkConditions;
   #userAgent?: string;
   #userAgentMetadata?: Protocol.Emulation.UserAgentMetadata;
+  #platform?: string;
 
   readonly #handlers = [
     ['Fetch.requestPaused', this.#onRequestPaused],
@@ -265,9 +266,11 @@ export class NetworkManager extends EventEmitter<NetworkManagerEvents> {
   async setUserAgent(
     userAgent: string,
     userAgentMetadata?: Protocol.Emulation.UserAgentMetadata,
+    platform?: string,
   ): Promise<void> {
     this.#userAgent = userAgent;
     this.#userAgentMetadata = userAgentMetadata;
+    this.#platform = platform;
     await this.#applyToAllClients(this.#applyUserAgent.bind(this));
   }
 
@@ -279,6 +282,7 @@ export class NetworkManager extends EventEmitter<NetworkManagerEvents> {
       await client.send('Network.setUserAgentOverride', {
         userAgent: this.#userAgent,
         userAgentMetadata: this.#userAgentMetadata,
+        platform: this.#platform,
       });
     } catch (error) {
       if (this.#canIgnoreError(error)) {
@@ -306,6 +310,9 @@ export class NetworkManager extends EventEmitter<NetworkManagerEvents> {
   }
 
   async #applyProtocolRequestInterception(client: CDPSession): Promise<void> {
+    if (this.#protocolRequestInterceptionEnabled === undefined) {
+      return;
+    }
     if (this.#userCacheDisabled === undefined) {
       this.#userCacheDisabled = false;
     }

package/front_end/third_party/puppeteer/package/src/cdp/Page.ts

@@ -747,13 +747,29 @@ export class CdpPage extends Page {
   }
 
   override async setUserAgent(
-    userAgent: string,
+    userAgentOrOptions:
+      | string
+      | {
+          userAgent?: string;
+          userAgentMetadata?: Protocol.Emulation.UserAgentMetadata;
+          platform?: string;
+        },
     userAgentMetadata?: Protocol.Emulation.UserAgentMetadata,
   ): Promise<void> {
-    return await this.#frameManager.networkManager.setUserAgent(
-      userAgent,
-      userAgentMetadata,
-    );
+    if (typeof userAgentOrOptions === 'string') {
+      return await this.#frameManager.networkManager.setUserAgent(
+        userAgentOrOptions,
+        userAgentMetadata,
+      );
+    } else {
+      const userAgent =
+        userAgentOrOptions.userAgent ?? (await this.browser().userAgent());
+      return await this.#frameManager.networkManager.setUserAgent(
+        userAgent,
+        userAgentOrOptions.userAgentMetadata,
+        userAgentOrOptions.platform,
+      );
+    }
   }
 
   override async metrics(): Promise<Metrics> {

package/front_end/third_party/puppeteer/package/src/generated/version.ts

@@ -1,4 +1,4 @@
 /**
  * @internal
  */
-export const packageVersion = '24.20.0';
+export const packageVersion = '24.21.0';

package/front_end/third_party/puppeteer/package/src/node/BrowserLauncher.ts

@@ -181,6 +181,7 @@ export abstract class BrowserLauncher {
             slowMo,
           });
         }
+
         if (protocol === 'webDriverBiDi') {
           browser = await this.createBiDiOverCdpBrowser(
             browserProcess,
@@ -210,6 +211,17 @@ export abstract class BrowserLauncher {
       }
     } catch (error) {
       void browserCloseCallback();
+      if (
+        browserProcess.getRecentLogs().some(line => {
+          return line.includes(
+            'Failed to create a ProcessSingleton for your profile directory',
+          );
+        })
+      ) {
+        throw new Error(
+          `The browser is already running for ${launchArgs.userDataDir}. Use a different \`userDataDir\` or stop the running browser first.`,
+        );
+      }
       if (error instanceof BrowsersTimeoutError) {
         throw new TimeoutError(error.message);
       }

package/front_end/ui/components/text_editor/config.ts

@@ -132,7 +132,6 @@ function moveCompletionSelectionIfNotConservative(
     if (CM.completionStatus(view.state) !== 'active') {
       return false;
     }
-    view.dispatch({effects: setAiAutoCompleteSuggestion.of(null)});
     if (view.state.field(conservativeCompletion, false)) {
       view.dispatch({effects: disableConservativeCompletion.of(null)});
       announceSelectedCompletionInfo(view);
@@ -149,7 +148,6 @@ function moveCompletionSelectionBackwardWrapper(): ((view: CM.EditorView) => boo
     if (CM.completionStatus(view.state) !== 'active') {
       return false;
     }
-    view.dispatch({effects: setAiAutoCompleteSuggestion.of(null)});
     CM.moveCompletionSelection(false)(view);
     announceSelectedCompletionInfo(view);
     return true;
@@ -523,11 +521,11 @@ export const aiAutoCompleteSuggestionState = CM.StateField.define<ActiveSuggesti
     const {head} = tr.state.selection.main;
 
     // If a change happened before the position from which suggestion was generated, set to null.
-    if (tr.changes.touchesRange(0, from - 1) || head < from) {
+    if (head < from) {
       return null;
     }
 
-    // Check if what's typed is a prefix of the suggestion.
+    // Check if what's typed after the AI suggestion is a prefix of the AI suggestion.
     const typedText = tr.state.doc.sliceString(from, head);
     return value.text.startsWith(typedText) ? value : null;
   },
@@ -539,6 +537,11 @@ export function hasActiveAiSuggestion(state: CM.EditorState): boolean {
 
 export function acceptAiAutoCompleteSuggestion(view: CM.EditorView):
     {accepted: boolean, suggestion?: ActiveSuggestion} {
+  const selectedCompletion = CM.selectedCompletion(view.state);
+  if (selectedCompletion) {
+    return {accepted: false};
+  }
+
   const suggestion = view.state.field(aiAutoCompleteSuggestionState);
   if (!suggestion) {
     return {accepted: false};
@@ -568,23 +571,70 @@ export const aiAutoCompleteSuggestion: CM.Extension = [
         decorations: CM.DecorationSet = CM.Decoration.none;
 
         update(update: CM.ViewUpdate): void {
+          // Hide decorations if there is no active AI suggestion.
           const activeSuggestion = update.state.field(aiAutoCompleteSuggestionState);
-          const {head, empty} = update.state.selection.main;
-          let hint = '';
-          if (activeSuggestion && empty && head >= activeSuggestion.from) {
-            const {text, from} = activeSuggestion;
-            const typedText = update.state.doc.sliceString(from, head);
-            if (text.startsWith(typedText)) {
-              hint = text.slice(typedText.length);
-            }
+          if (!activeSuggestion) {
+            this.decorations = CM.Decoration.none;
+            return;
           }
 
-          if (!hint) {
+          // Hide AI suggestion while the user is interacting with the traditional
+          // autocomplete menu to avoid conflicting suggestions.
+          if (CM.completionStatus(update.view.state) === 'pending') {
             this.decorations = CM.Decoration.none;
-          } else {
-            this.decorations =
-                CM.Decoration.set([CM.Decoration.widget({widget: new CompletionHint(hint), side: 1}).range(head)]);
+            return;
           }
+
+          // Hide AI suggestion if the user has selected an item from the
+          // traditional autocomplete menu that is not the first one.
+          const selectedCompletionIndex = CM.selectedCompletionIndex(update.state);
+          if (selectedCompletionIndex && selectedCompletionIndex > 0) {
+            this.decorations = CM.Decoration.none;
+            return;
+          }
+
+          const {head} = update.state.selection.main;
+          const selectedCompletion = CM.selectedCompletion(update.state);
+          const additionallyTypedText = update.state.doc.sliceString(activeSuggestion.from, head);
+          // The user might have typed text after the suggestion is triggered.
+          // If the suggestion no longer starts with the typed text, hide it.
+          if (!activeSuggestion.text.startsWith(additionallyTypedText)) {
+            this.decorations = CM.Decoration.none;
+            return;
+          }
+
+          let ghostText = activeSuggestion.text.slice(additionallyTypedText.length);
+          if (selectedCompletion) {
+            // If the user typed the full selected completion, then we don't check for overlap.
+            // (e.g. the user wrote `flex`, traditional suggestion is `flex` and the AI autocompletion is
+            // `;\njustify-content: center`. Then, we want to show the AI completion)
+            const endsWithCompleteSelectedCompletion =
+                update.state.doc.sliceString(head - selectedCompletion.label.length, head) === selectedCompletion.label;
+            // If a traditional autocomplete menu is shown, the AI suggestion is only
+            // shown if it builds upon the currently selected item. If there is no
+            // overlap, we hide the AI suggestion. For example, for the text `console`
+            // if the traditional autocomplete suggests `log` and the AI
+            // suggests `warn`, there is no overlap and the AI suggestion is hidden.
+            if (!endsWithCompleteSelectedCompletion &&
+                !TextUtils.TextUtils.getOverlap(selectedCompletion.label, ghostText)) {
+              this.decorations = CM.Decoration.none;
+              return;
+            }
+          }
+
+          // When `conservativeCompletion` is disabled in Console, the editor shows a ghost
+          // text for the first item in the traditional autocomplete menu and this ghost text
+          // is reflected in `currentHint`. In this case, we need to remove
+          // the overlapping part from our AI suggestion's ghost text to avoid
+          // showing a double suggestion.
+          const currentMenuHint = update.view.plugin(showCompletionHint)?.currentHint;
+          const conservativeCompletionEnabled = update.state.field(conservativeCompletion, false);
+          if (!conservativeCompletionEnabled && currentMenuHint) {
+            ghostText = ghostText.slice(currentMenuHint.length);
+          }
+
+          this.decorations =
+              CM.Decoration.set([CM.Decoration.widget({widget: new CompletionHint(ghostText), side: 1}).range(head)]);
         }
       },
       {decorations: p => p.decorations}),

package/front_end/ui/legacy/Dialog.ts

@@ -21,8 +21,8 @@ export class Dialog extends Common.ObjectWrapper.eventMixin<EventTypes, typeof G
   private focusRestorer: WidgetFocusRestorer|null = null;
   private closeOnEscape = true;
   private targetDocument: Document|null = null;
-  private readonly targetDocumentKeyDownHandler: (event: Event) => void;
-  private escapeKeyCallback: ((arg0: Event) => void)|null = null;
+  private readonly targetDocumentKeyDownHandler: (event: KeyboardEvent) => void;
+  private escapeKeyCallback: ((arg0: KeyboardEvent) => void)|null = null;
 
   constructor(jslogContext?: string) {
     super();
@@ -36,6 +36,12 @@ export class Dialog extends Common.ObjectWrapper.eventMixin<EventTypes, typeof G
     this.widget().setDefaultFocusedElement(this.contentElement);
     this.setPointerEventsBehavior(PointerEventsBehavior.BLOCKED_BY_GLASS_PANE);
     this.setOutsideClickCallback(event => {
+      // If there are stacked dialogs, we only want to
+      // handle the outside click for the top most dialog.
+      if (Dialog.getInstance() !== this) {
+        return;
+      }
+
       this.hide();
       event.consume(true);
     });
@@ -44,22 +50,35 @@ export class Dialog extends Common.ObjectWrapper.eventMixin<EventTypes, typeof G
   }
 
   static hasInstance(): boolean {
-    return Boolean(Dialog.instance);
+    return Dialog.dialogs.length > 0;
   }
 
+  /**
+   * If there is only one dialog, returns that.
+   * If there are stacked dialogs, returns the topmost one.
+   */
   static getInstance(): Dialog|null {
-    return Dialog.instance;
+    return Dialog.dialogs[Dialog.dialogs.length - 1] || null;
   }
 
-  override show(where?: Document|Element): void {
+  /**
+   * `stack` parameter is needed for being able to open a dialog on top
+   * of an existing dialog. The main reason is, Settings Tab is
+   * implemented as a Dialog. So, if we want to open a dialog on the
+   * Settings Tab, we need to stack it on top of that dialog.
+   *
+   * @param where Container element of the dialog.
+   * @param stack Whether to open this dialog on top of an existing dialog.
+   */
+  override show(where?: Document|Element, stack?: boolean): void {
     const document = (where instanceof Document ? where : (where || InspectorView.instance().element).ownerDocument);
     this.targetDocument = document;
     this.targetDocument.addEventListener('keydown', this.targetDocumentKeyDownHandler, true);
 
-    if (Dialog.instance) {
-      Dialog.instance.hide();
+    if (!stack && Dialog.dialogs.length) {
+      Dialog.dialogs.forEach(dialog => dialog.hide());
     }
-    Dialog.instance = this;
+    Dialog.dialogs.push(this);
     this.disableTabIndexOnElements(document);
     super.show(document);
     this.focusRestorer = new WidgetFocusRestorer(this.widget());
@@ -76,7 +95,10 @@ export class Dialog extends Common.ObjectWrapper.eventMixin<EventTypes, typeof G
     }
     this.restoreTabIndexOnElements();
     this.dispatchEventToListeners(Events.HIDDEN);
-    Dialog.instance = null;
+    const index = Dialog.dialogs.indexOf(this);
+    if (index !== -1) {
+      Dialog.dialogs.splice(index, 1);
+    }
   }
 
   setAriaLabel(label: string): void {
@@ -87,7 +109,7 @@ export class Dialog extends Common.ObjectWrapper.eventMixin<EventTypes, typeof G
     this.closeOnEscape = close;
   }
 
-  setEscapeKeyCallback(callback: (arg0: Event) => void): void {
+  setEscapeKeyCallback(callback: (arg0: KeyboardEvent) => void): void {
     this.escapeKeyCallback = callback;
   }
 
@@ -165,8 +187,11 @@ export class Dialog extends Common.ObjectWrapper.eventMixin<EventTypes, typeof G
     this.tabIndexMap.clear();
   }
 
-  private onKeyDown(event: Event): void {
-    const keyboardEvent = (event as KeyboardEvent);
+  private onKeyDown(event: KeyboardEvent): void {
+    const keyboardEvent = event;
+    if (Dialog.getInstance() !== this) {
+      return;
+    }
     if (keyboardEvent.keyCode === Keys.Esc.code && KeyboardShortcut.hasNoModifiers(event)) {
       if (this.escapeKeyCallback) {
         this.escapeKeyCallback(event);
@@ -183,7 +208,7 @@ export class Dialog extends Common.ObjectWrapper.eventMixin<EventTypes, typeof G
     }
   }
 
-  private static instance: Dialog|null = null;
+  private static dialogs: Dialog[] = [];
 }
 
 export const enum Events {

package/front_end/ui/legacy/InspectorView.ts

@@ -136,7 +136,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
   private infoBarDiv!: HTMLDivElement|null;
   private readonly tabbedLocation: TabbedViewLocation;
   readonly tabbedPane: TabbedPane;
-  private readonly keyDownBound: (event: Event) => void;
+  private readonly keyDownBound: (event: KeyboardEvent) => void;
   private currentPanelLocked?: boolean;
   private focusRestorer?: WidgetFocusRestorer|null;
   private ownerSplitWidget?: SplitWidget;
@@ -476,9 +476,8 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     return this.drawerSplitWidget.isVertical();
   }
 
-  private keyDown(event: Event): void {
-    const keyboardEvent = (event as KeyboardEvent);
-    if (!KeyboardShortcut.eventHasCtrlEquivalentKey(keyboardEvent) || keyboardEvent.altKey || keyboardEvent.shiftKey) {
+  private keyDown(event: KeyboardEvent): void {
+    if (!KeyboardShortcut.eventHasCtrlEquivalentKey(event) || event.altKey || event.shiftKey) {
       return;
     }
 
@@ -486,12 +485,11 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     const panelShortcutEnabled = Common.Settings.moduleSetting('shortcut-panel-switch').get();
     if (panelShortcutEnabled) {
       let panelIndex = -1;
-      if (keyboardEvent.keyCode > 0x30 && keyboardEvent.keyCode < 0x3A) {
-        panelIndex = keyboardEvent.keyCode - 0x31;
+      if (event.keyCode > 0x30 && event.keyCode < 0x3A) {
+        panelIndex = event.keyCode - 0x31;
       } else if (
-          keyboardEvent.keyCode > 0x60 && keyboardEvent.keyCode < 0x6A &&
-          keyboardEvent.location === KeyboardEvent.DOM_KEY_LOCATION_NUMPAD) {
-        panelIndex = keyboardEvent.keyCode - 0x61;
+          event.keyCode > 0x60 && event.keyCode < 0x6A && event.location === KeyboardEvent.DOM_KEY_LOCATION_NUMPAD) {
+        panelIndex = event.keyCode - 0x61;
       }
       if (panelIndex !== -1) {
         const panelName = this.tabbedPane.tabIds()[panelIndex];

package/front_end/ui/legacy/ProgressIndicator.ts

@@ -12,7 +12,7 @@ export class ProgressIndicator extends HTMLElement implements Common.Progress.Pr
   readonly #contentElement: Element;
   #labelElement: Element;
   #progressElement: HTMLProgressElement;
-  readonly #stopButton?: Element;
+  #stopButton?: Element;
   #isCanceled = false;
   #worked = 0;
   #isDone = false;
@@ -25,7 +25,10 @@ export class ProgressIndicator extends HTMLElement implements Common.Progress.Pr
     this.#labelElement = this.#contentElement.createChild('div', 'title');
     this.#progressElement = this.#contentElement.createChild('progress');
     this.#progressElement.value = 0;
+  }
 
+  connectedCallback(): void {
+    this.classList.add('progress-indicator');
     // 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')) {
@@ -34,10 +37,6 @@ export class ProgressIndicator extends HTMLElement implements Common.Progress.Pr
     }
   }
 
-  connectedCallback(): void {
-    this.classList.add('progress-indicator');
-  }
-
   done(): void {
     if (this.#isDone) {
       return;