chrome-devtools-frontend 1.0.1661063 → 1.0.1662965

package/front_end/panels/recorder/recorder.ts

@@ -4,7 +4,6 @@
 
 import * as ControlButton from './ControlButton.js';
 import * as CreateRecordingView from './CreateRecordingView.js';
-import * as RecorderController from './RecorderController.js';
 import * as RecorderEvents from './RecorderEvents.js';
 import * as RecorderPanel from './RecorderPanel.js';
 import * as RecordingListView from './RecordingListView.js';
@@ -18,7 +17,6 @@ import * as TimelineSection from './TimelineSection.js';
 export {
   ControlButton,
   CreateRecordingView,
-  RecorderController,
   RecorderEvents,
   RecorderPanel,
   RecordingListView,

package/front_end/panels/settings/AISettingsTab.ts

@@ -75,6 +75,16 @@ const UIStrings = {
    * @description Label for a button to collapse an accordion.
    */
   showLess: 'Show less',
+  /**
+   * @description Accessible label for a button to expand an accordion for a specific setting.
+   * @example {Code suggestions} PH1
+   */
+  showMoreOfSetting: 'Show more of {PH1}',
+  /**
+   * @description Accessible label for a button to collapse an accordion for a specific setting.
+   * @example {Code suggestions} PH1
+   */
+  showLessOfSetting: 'Show less of {PH1}',
   /**
    * @description Header for a list of feature attributes. 'When on, you’ll be able to …'.
    */
@@ -358,6 +368,9 @@ export const AI_SETTINGS_TAB_DEFAULT_VIEW: View = (input, _output, target): void
           <devtools-button
             .data=${{
               title: settingData.settingExpandState.isSettingExpanded ? i18nString(UIStrings.showLess) : i18nString(UIStrings.showMore),
+              accessibleLabel: settingData.settingExpandState.isSettingExpanded ?
+                  i18nString(UIStrings.showLessOfSetting, {PH1: settingData.settingName}) :
+                  i18nString(UIStrings.showMoreOfSetting, {PH1: settingData.settingName}),
               size: Buttons.Button.Size.SMALL,
               iconName: settingData.settingExpandState.isSettingExpanded ? 'chevron-up' : 'chevron-down',
               variant: Buttons.Button.Variant.ICON,

package/front_end/panels/sources/SourcesNavigator.ts

@@ -11,7 +11,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import type * as Bindings from '../../models/bindings/bindings.js';
+import * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
@@ -135,7 +135,8 @@ export class NetworkNavigatorView extends NavigatorView {
 
   override acceptProject(project: Workspace.Workspace.Project): boolean {
     return project.type() === Workspace.Workspace.projectTypes.Network &&
-        SDK.TargetManager.TargetManager.instance().isInScope(project.target());
+        SDK.TargetManager.TargetManager.instance().isInScope(
+            Bindings.NetworkProject.NetworkProject.getTargetForProject(project));
   }
 
   onScopeChange(): void {

package/front_end/panels/sources/SourcesView.ts

@@ -345,9 +345,6 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     if (view instanceof UI.View.SimpleView) {
       void view.toolbarItems().then(items => {
         this.#scriptViewToolbar.removeToolbarItems();
-        for (const action of getRegisteredEditorActions()) {
-          this.#scriptViewToolbar.appendToolbarItem(action.getOrCreateButton(this));
-        }
         if (Array.isArray(items)) {
           items.map(item => this.#scriptViewToolbar.appendToolbarItem(item));
         } else {
@@ -657,20 +654,6 @@ export interface EventTypes {
   [Events.EDITOR_SELECTED]: Workspace.UISourceCode.UISourceCode;
 }
 
-export interface EditorAction {
-  getOrCreateButton(sourcesView: SourcesView): UI.Toolbar.ToolbarButton;
-}
-
-const registeredEditorActions: Array<() => EditorAction> = [];
-
-export function registerEditorAction(editorAction: () => EditorAction): void {
-  registeredEditorActions.push(editorAction);
-}
-
-export function getRegisteredEditorActions(): EditorAction[] {
-  return registeredEditorActions.map(editorAction => editorAction());
-}
-
 export class SwitchFileActionDelegate implements UI.ActionRegistration.ActionDelegate {
   private static nextFile(currentUISourceCode: Workspace.UISourceCode.UISourceCode): Workspace.UISourceCode.UISourceCode
       |null {

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -6,8 +6,10 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
+import * as i18n from '../../core/i18n/i18n.js';
 import * as FormatterActions from '../../entrypoints/formatter_worker/FormatterActions.js';  // eslint-disable-line @devtools/es-modules-import
 import * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
+import * as Formatter from '../../models/formatter/formatter.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
@@ -30,6 +32,15 @@ import {ResourceOriginPlugin} from './ResourceOriginPlugin.js';
 import {SnippetsPlugin} from './SnippetsPlugin.js';
 import {SourcesPanel} from './SourcesPanel.js';
 
+const UIStrings = {
+  /**
+   * @description Title of the format button
+   */
+  format: 'Format',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('panels/sources/UISourceCodeFrame.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
 export class UISourceCodeFrame extends Common.ObjectWrapper
                                            .eventMixin<EventTypes, typeof SourceFrame.SourceFrame.SourceFrameImpl>(
                                                SourceFrame.SourceFrame.SourceFrameImpl) {
@@ -290,6 +301,24 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
     this.maybeSetContent(this.#uiSourceCode.workingCopyContentData());
   }
 
+  async #formatSourceInPlace(): Promise<void> {
+    const contentDataOrError = await this.workingCopy();
+    if (TextUtils.ContentData.ContentData.isError(contentDataOrError)) {
+      return;
+    }
+    const content = TextUtils.ContentData.ContentData.textOr(contentDataOrError, '');
+    const {formattedContent, formattedMapping} = await Formatter.ScriptFormatter.format(
+        Common.Settings.Settings.instance(), this.#uiSourceCode.contentType(), this.contentType, content);
+    if (this.#uiSourceCode.workingCopy() === formattedContent) {
+      return;
+    }
+    const selection = this.textEditor.toLineColumn(this.textEditor.state.selection.main.head);
+    const [lineNumber, columnNumber] =
+        formattedMapping.originalToFormatted(selection.lineNumber, selection.columnNumber);
+    this.#uiSourceCode.setWorkingCopy(formattedContent);
+    this.revealPosition({lineNumber, columnNumber});
+  }
+
   private onWorkingCopyCommitted(): void {
     if (!this.#muteSourceCodeEvents) {
       this.maybeSetContent(this.uiSourceCode().workingCopyContentData());
@@ -433,6 +462,19 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
 
   override async toolbarItems(): Promise<UI.Toolbar.ToolbarItem[]> {
     const leftToolbarItems = await super.toolbarItems();
+
+    const isEditable = Persistence.Persistence.PersistenceImpl.instance().hasEditableContent(this.#uiSourceCode);
+    const isJavaScript = Common.ResourceType.ResourceType.isJavaScriptMimeType(this.contentType);
+    const isInplaceFormattable = isEditable && isJavaScript;
+
+    if (isInplaceFormattable) {
+      const formatButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.format), 'brackets');
+      formatButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => {
+        void this.#formatSourceInPlace();
+      });
+      leftToolbarItems.unshift(formatButton);
+    }
+
     const rightToolbarItems = [];
     for (const plugin of this.plugins) {
       leftToolbarItems.push(...plugin.leftToolbarItems());

package/front_end/panels/sources/sources.ts

@@ -18,7 +18,6 @@ import * as EditingLocationHistoryManager from './EditingLocationHistoryManager.
 import * as FilePathScoreFunction from './FilePathScoreFunction.js';
 import * as FilteredUISourceCodeListProvider from './FilteredUISourceCodeListProvider.js';
 import * as GoToLineQuickOpen from './GoToLineQuickOpen.js';
-import * as InplaceFormatterEditorAction from './InplaceFormatterEditorAction.js';
 import * as NavigatorView from './NavigatorView.js';
 import * as OpenFileQuickOpen from './OpenFileQuickOpen.js';
 import * as OutlineQuickOpen from './OutlineQuickOpen.js';
@@ -54,7 +53,6 @@ export {
   FilePathScoreFunction,
   FilteredUISourceCodeListProvider,
   GoToLineQuickOpen,
-  InplaceFormatterEditorAction,
   NavigatorView,
   OpenFileQuickOpen,
   OutlineQuickOpen,

package/front_end/panels/timeline/CompatibilityTracksAppender.ts

@@ -168,7 +168,6 @@ export const enum VisualLoggingTrackName {
   THREAD_MAIN = 'thread.main',
   THREAD_FRAME = 'thread.frame',
   THREAD_WORKER = 'thread.worker',
-  THREAD_AUCTION_WORKLET = 'thread.auction-worklet',
   THREAD_RASTERIZER = 'thread.rasterizer',
   THREAD_POOL = 'thread.pool',
   THREAD_OTHER = 'thread.other',
@@ -301,8 +300,6 @@ export class CompatibilityTracksAppender {
         }
         case Trace.Handlers.Threads.ThreadType.WORKER:
           return 3;
-        case Trace.Handlers.Threads.ThreadType.AUCTION_WORKLET:
-          return 3;
         case Trace.Handlers.Threads.ThreadType.RASTERIZER:
           return 4;
         case Trace.Handlers.Threads.ThreadType.THREAD_POOL:
@@ -328,20 +325,6 @@ export class CompatibilityTracksAppender {
         continue;
       }
 
-      const matchingWorklet = this.#parsedTrace.data.AuctionWorklets.worklets.get(pid);
-      if (matchingWorklet) {
-        // Each AuctionWorklet has two key threads:
-        // 1. the Utility Thread
-        // 2. the V8 Helper Thread - either a bidder or seller. see buildNameForAuctionWorklet()
-        // There are other threads in a worklet process, but we don't render them.
-        const tids = [matchingWorklet.args.data.utilityThread.tid, matchingWorklet.args.data.v8HelperThread.tid];
-        if (tids.includes(tid)) {
-          this.#threadAppenders.push(new ThreadAppender(
-              this, this.#parsedTrace, pid, tid, '', Trace.Handlers.Threads.ThreadType.AUCTION_WORKLET, entries, tree));
-        }
-        continue;
-      }
-
       // The Common case… Add the main thread, or iframe, or thread pool, etc.
       this.#threadAppenders.push(new ThreadAppender(this, this.#parsedTrace, pid, tid, name, type, entries, tree));
     }

package/front_end/panels/timeline/ThreadAppender.ts

@@ -87,48 +87,7 @@ const UIStrings = {
    * @example {2} PH1
    */
   threadPoolThreadS: 'Thread pool worker {PH1}',
-  /**
-   * @description Title of a bidder auction worklet with known URL in the timeline flame chart of the Performance panel
-   * @example {https://google.com} PH1
-   */
-  bidderWorkletS: 'Bidder Worklet — {PH1}',
-  /**
-   * @description Title of a bidder auction worklet in the timeline flame chart of the Performance panel with an unknown URL
-   */
-  bidderWorklet: 'Bidder Worklet',
-
-  /**
-   * @description Title of a seller auction worklet in the timeline flame chart of the Performance panel with an unknown URL
-   */
-  sellerWorklet: 'Seller Worklet',
-
-  /**
-   * @description Title of an auction worklet in the timeline flame chart of the Performance panel with an unknown URL
-   */
-  unknownWorklet: 'Auction Worklet',
-
-  /**
-   * @description Title of control thread of a service process for an auction worklet in the timeline flame chart of the Performance panel with an unknown URL
-   */
-  workletService: 'Auction Worklet service',
-
-  /**
-   * @description Title of a seller auction worklet with known URL in the timeline flame chart of the Performance panel
-   * @example {https://google.com} PH1
-   */
-  sellerWorkletS: 'Seller Worklet — {PH1}',
 
-  /**
-   * @description Title of an auction worklet with known URL in the timeline flame chart of the Performance panel
-   * @example {https://google.com} PH1
-   */
-  unknownWorkletS: 'Auction Worklet — {PH1}',
-
-  /**
-   * @description Title of control thread of a service process for an auction worklet with known URL in the timeline flame chart of the Performance panel
-   * @example {https://google.com} PH1
-   */
-  workletServiceS: 'Auction Worklet service — {PH1}',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/ThreadAppender.ts', UIStrings);
@@ -181,12 +140,6 @@ export class ThreadAppender implements TrackAppender {
     this.#threadDefaultName = threadName || i18nString(UIStrings.threadS, {PH1: threadId});
     this.isOnMainFrame = Boolean(this.#parsedTrace.data.Renderer?.processes.get(processId)?.isOnMainFrame);
     this.threadType = type;
-    // AuctionWorklets are threads, so we re-use this appender rather than
-    // duplicate it, but we change the name because we want to render these
-    // lower down than other threads.
-    if (this.#parsedTrace.data.AuctionWorklets.worklets.has(processId)) {
-      this.appenderName = 'Thread_AuctionWorklet';
-    }
     this.#url = this.#parsedTrace.data.Renderer?.processes.get(this.#processId)?.url || '';
   }
 
@@ -279,8 +232,6 @@ export class ThreadAppender implements TrackAppender {
         return VisualLoggingTrackName.THREAD_WORKER;
       case Trace.Handlers.Threads.ThreadType.RASTERIZER:
         return VisualLoggingTrackName.THREAD_RASTERIZER;
-      case Trace.Handlers.Threads.ThreadType.AUCTION_WORKLET:
-        return VisualLoggingTrackName.THREAD_AUCTION_WORKLET;
       case Trace.Handlers.Threads.ThreadType.OTHER:
         return VisualLoggingTrackName.THREAD_OTHER;
       case Trace.Handlers.Threads.ThreadType.CPU_PROFILE:
@@ -350,9 +301,6 @@ export class ThreadAppender implements TrackAppender {
         break;
       case Trace.Handlers.Threads.ThreadType.OTHER:
         break;
-      case Trace.Handlers.Threads.ThreadType.AUCTION_WORKLET:
-        threadTypeLabel = this.#buildNameForAuctionWorklet();
-        break;
       default:
         return Platform.assertNever(this.threadType, `Unknown thread type: ${this.threadType}`);
     }
@@ -371,60 +319,6 @@ export class ThreadAppender implements TrackAppender {
     return this.#entries;
   }
 
-  #buildNameForAuctionWorklet(): string {
-    const workletMetadataEvent = this.#parsedTrace.data.AuctionWorklets.worklets.get(this.#processId);
-    // We should always have this event - if we do not, we were instantiated with invalid data.
-    if (!workletMetadataEvent) {
-      return i18nString(UIStrings.unknownWorklet);
-    }
-
-    // Host could be empty - in which case we do not want to add it.
-    const host = workletMetadataEvent.host ? `https://${workletMetadataEvent.host}` : '';
-    const shouldAddHost = host.length > 0;
-
-    // For each Auction Worklet in a page there are two threads we care about on the same process.
-    // 1. The "Worklet Service" which is a generic helper service. This thread
-    // is always named "auction_worklet.CrUtilityMain".
-    //
-    // 2. The "Seller/Bidder" service. This thread is always named
-    // "AuctionV8HelperThread". The AuctionWorkets handler does the job of
-    // figuring this out for us - the metadata event it provides for each
-    // worklet process will have a `type` already set.
-    //
-    // Therefore, for this given thread, which we know is part of
-    // an AuctionWorklet process, we need to figure out if this thread is the
-    // generic service, or a seller/bidder worklet.
-    //
-    // Note that the worklet could also have the "unknown" type - this is not
-    // expected but implemented to prevent trace event changes causing DevTools
-    // to break with unknown worklet types.
-    const isUtilityThread = workletMetadataEvent.args.data.utilityThread.tid === this.#threadId;
-    const isBidderOrSeller = workletMetadataEvent.args.data.v8HelperThread.tid === this.#threadId;
-
-    if (isUtilityThread) {
-      return shouldAddHost ? i18nString(UIStrings.workletServiceS, {PH1: host}) : i18nString(UIStrings.workletService);
-    }
-
-    if (isBidderOrSeller) {
-      switch (workletMetadataEvent.type) {
-        case Trace.Types.Events.AuctionWorkletType.SELLER:
-          return shouldAddHost ? i18nString(UIStrings.sellerWorkletS, {PH1: host}) :
-                                 i18nString(UIStrings.sellerWorklet);
-        case Trace.Types.Events.AuctionWorkletType.BIDDER:
-          return shouldAddHost ? i18nString(UIStrings.bidderWorkletS, {PH1: host}) :
-                                 i18nString(UIStrings.bidderWorklet);
-        case Trace.Types.Events.AuctionWorkletType.UNKNOWN:
-          return shouldAddHost ? i18nString(UIStrings.unknownWorkletS, {PH1: host}) :
-                                 i18nString(UIStrings.unknownWorklet);
-        default:
-          Platform.assertNever(
-              workletMetadataEvent.type, `Unexpected Auction Worklet Type ${workletMetadataEvent.type}`);
-      }
-    }
-    // We should never reach here, but just in case!
-    return shouldAddHost ? i18nString(UIStrings.unknownWorkletS, {PH1: host}) : i18nString(UIStrings.unknownWorklet);
-  }
-
   #buildNameForWorker(): string {
     const url = this.#parsedTrace.data.Renderer?.processes.get(this.#processId)?.url || '';
     const workerId = this.#parsedTrace.data.Workers.workerIdByThread.get(this.#threadId);

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: a37baa84e85d62d8bdc7eef3ff6237217c0c8a9e
+Revision: 7eaaa785deda657a652efc66266b8cc2957167f9
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/components/report_view/ReportView.ts

@@ -55,13 +55,19 @@ export class Report extends HTMLElement {
   #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
+    const hasToolbar = this.querySelector('[slot="toolbar"]') !== null;
     render(html`
       <style>${reportStyles}</style>
-      ${this.#reportTitle ? html`<h1 class="report-title">
-        ${this.#reportTitle}
-        ${this.#reportUrl ? Components.Linkifier.Linkifier.linkifyURL(this.#reportUrl, {
-          tabStop: true, jslogContext: 'source-location', className: 'report-url'}) : nothing}
-      </h1>` : nothing}
+      ${(this.#reportTitle || hasToolbar) ? html`
+        <div class="report-header-wrapper">
+          ${this.#reportTitle ? html`<h1 class="report-title">
+            ${this.#reportTitle}
+            ${this.#reportUrl ? Components.Linkifier.Linkifier.linkifyURL(this.#reportUrl, {
+              tabStop: true, jslogContext: 'source-location', className: 'report-url'}) : nothing}
+          </h1>` : nothing}
+          <slot name="toolbar"></slot>
+        </div>
+      ` : nothing}
       <div class="content">
         <slot></slot>
       </div>

package/front_end/ui/components/report_view/report.css

@@ -16,13 +16,16 @@
   margin: var(--sys-size-5) 0;
 }
 
+.report-header-wrapper {
+  border-bottom: 1px solid var(--sys-color-divider);
+}
+
 .report-title {
   padding: var(--sys-size-7) var(--sys-size-9);
   font: var(--sys-typescale-headline4);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  border-bottom: 1px solid var(--sys-color-divider);
   color: var(--sys-color-on-surface);
   background-color: var(--sys-color-cdt-base-container);
   margin: 0;

package/front_end/ui/components/spinners/Spinner.ts

@@ -3,10 +3,12 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import {html, render} from '../../lit/lit.js';
+import {Directives, html, render} from '../../lit/lit.js';
 
 import spinnerStyles from './spinner.css.js';
 
+const {classMap} = Directives;
+
 export interface SpinnerProperties {
   active: boolean;
 }
@@ -48,39 +50,34 @@ export class Spinner extends HTMLElement {
   }
 
   #render(): void {
-    // The radius of the circles are set to 2.75rem as per implementation
-    // of indeterminate progress indicator in
-    // https://github.com/material-components/material-components-web/tree/master/packages/mdc-circular-progress.
-    // Changing the value of the radius will cause errors in animation.
+    // The radius is set to 40 to allow for stroke width padding, and
+    // pathLength=100 is used for scalable, unitless animation length.
     // clang-format off
-    const content = this.active ? html`
-      <div class="indeterminate-spinner">
-        <div class="left-circle">
-          <svg viewBox="0 0 100 100">
-            <circle cx="50%" cy="50%" r="2.75rem"></circle></svg>
-        </div>
-        <div class="center-circle">
-          <svg viewBox="0 0 100 100">
-            <circle cx="50%" cy="50%" r="2.75rem"></circle></svg>
-        </div>
-        <div class="right-circle">
-          <svg viewBox="0 0 100 100">
-            <circle cx="50%" cy="50%" r="2.75rem"></circle></svg>
-        </div>
-      </div>
-    ` : html`
-      <div class="inactive-spinner">
-        <svg viewBox="0 0 100 100">
-          <circle cx="50%" cy="50%" r="2.75rem"></circle>
+    const spinnerClasses = {
+      indeterminate: this.active,
+      spinner: true,
+    };
+
+    render(
+      html`
+        <style>
+          ${spinnerStyles}
+        </style>
+        <svg
+          class=${classMap(spinnerClasses)}
+          viewBox="0 0 100 100"
+        >
+          <circle
+            cx="50"
+            cy="50"
+            r="44"
+            pathLength="100"
+          ></circle>
         </svg>
-      </div>
-    `;
-    render(html`
-      <style>
-        ${spinnerStyles}
-      </style>
-      ${content}
-    `, this.#shadow, {host: this});
+      `,
+      this.#shadow,
+      {host: this},
+    );
     // clang-format on
   }
 }

package/front_end/ui/components/spinners/spinner.css

@@ -18,87 +18,43 @@
   animation: spinner-container-animation 1.5s linear infinite;
 }
 
-.indeterminate-spinner {
+.spinner {
+  height: 100%;
+  width: 100%;
+}
+
+.spinner.indeterminate {
   /*
   * The value for animation duration has been obtained by plugging in values defined
   * in packages/mdc-circular-progress/_circular-progress-theme.scss to
   * functions defined in packages/mdc-circular-progress/_circular-progress.scss.
   * https://github.com/material-components/material-components-web
   */
-  animation: indeterminate-spinner-animation 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-  height: 100%;
-  width: 100%;
-
-  .left-circle {
-    height: 100%;
-    width: 50%;
-    display: inline-block;
-    position: relative;
-    overflow: hidden;
-
-    & > svg {
-      position: absolute;
-      width: 200%;
-      /*
-      * The value for animation duration has been obtained from values defined
-      * in packages/mdc-circular-progress/_circular-progress-theme.scss
-      * https://github.com/material-components/material-components-web
-      */
-      animation: indeterminate-left-circle-spinner-animation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-    }
-  }
-
-  .center-circle {
-    height: 100%;
-    width: 5%;
-    display: inline-block;
-    position: absolute;
-    overflow: hidden;
-    top: 0;
-    left: 47.5%;
-    box-sizing: border-box;
-
-    & > svg {
-      position: absolute;
-      width: 2000%;
-      left: -900%;
-      transform: rotate(180deg);
-    }
-  }
+  animation: indeterminate-spinner-animation 5332ms cubic-bezier(0.4, 0, 0.2, 1)
+    infinite both;
 
-  .right-circle {
-    height: 100%;
-    width: 50%;
-    display: inline-block;
-    position: relative;
-    overflow: hidden;
-
-    & > svg {
-      position: absolute;
-      width: 200%;
-      left: -100%;
-      /*
-      * The value for animation duration has been obtained from values defined
-      * in packages/mdc-circular-progress/_circular-progress-theme.scss
-      * https://github.com/material-components/material-components-web
-      */
-      animation: indeterminate-right-circle-spinner-animation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-    }
-  }
 }
 
-.inactive-spinner circle {
+.spinner circle {
   stroke: var(--sys-color-state-disabled);
   stroke-width: var(--sys-size-6);
   fill: transparent;
+  transform-origin: 50% 50%;
+  transform: rotate(-90deg);
 }
 
-.indeterminate-spinner circle {
+
+.spinner.indeterminate circle {
   stroke: var(--sys-color-primary);
-  stroke-width: var(--sys-size-6);
-  fill: transparent;
-  stroke-dasharray: 290px;
-  stroke-dashoffset: 150px;
+  stroke-dasharray: 100, 100;
+  stroke-dashoffset: 0;
+  /*
+  * The value for animation duration has been obtained from values defined
+  * in packages/mdc-circular-progress/_circular-progress-theme.scss
+  * https://github.com/material-components/material-components-web
+  */
+  animation: indeterminate-spinner-circle-animation 1333ms
+    cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
 @keyframes spinner-container-animation {
@@ -141,30 +97,22 @@
   }
 }
 
-@keyframes indeterminate-left-circle-spinner-animation {
-  0% {
-    transform: rotate(265deg);
-  }
-
-  50% {
-    transform: rotate(130deg);
-  }
-
-  100% {
-    transform: rotate(265deg);
-  }
-}
-
-@keyframes indeterminate-right-circle-spinner-animation {
+@keyframes indeterminate-spinner-circle-animation {
   0% {
-    transform: rotate(-265deg);
+    stroke-dasharray: 5, 100;
+    stroke-dashoffset: 0;
+    transform: rotate(-90deg);
   }
 
   50% {
-    transform: rotate(-130deg);
+    stroke-dasharray: 75, 100;
+    stroke-dashoffset: 0;
+    transform: rotate(-225deg);
   }
 
   100% {
-    transform: rotate(-265deg);
+    stroke-dasharray: 5, 100;
+    stroke-dashoffset: 0;
+    transform: rotate(-90deg);
   }
 }