chore(fab): remove ResizeObserver

PiperOrigin-RevId: 557552908

progress/harness.ts

@@ -15,9 +15,7 @@ import {LinearProgress} from './internal/linear-progress.js';
 export class LinearProgressHarness extends Harness<LinearProgress> {
   override async getInteractiveElement() {
     await this.element.updateComplete;
-    // Test access to protected property
-    // tslint:disable-next-line:no-dict-access-on-struct-type
-    return this.element['rootEl'];
+    return this.element.querySelector<HTMLElement>('.progress')!;
   }
 }
 
@@ -27,6 +25,6 @@ export class LinearProgressHarness extends Harness<LinearProgress> {
 export class CircularProgressHarness extends Harness<CircularProgress> {
   override async getInteractiveElement() {
     await this.element.updateComplete;
-    return this.element.querySelector<HTMLElement>('.circularProgresss')!;
+    return this.element.querySelector<HTMLElement>('.progress')!;
   }
 }

progress/internal/_circular-progress.scss

@@ -80,7 +80,7 @@
   .circle,
   svg,
   .track,
-  .progress {
+  .active-track {
     position: absolute;
     inset: 0;
   }
@@ -100,7 +100,7 @@
     fill: transparent;
   }
 
-  .progress {
+  .active-track {
     // note, these value come from the m2 version but match current gm3 values.
     transition: stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1);
     stroke: var(--_active-indicator-color);
@@ -163,7 +163,7 @@
   }
 
   @media (forced-colors: active) {
-    .progress {
+    .active-track {
       stroke: CanvasText;
     }
 

progress/internal/_linear-progress.scss

@@ -145,37 +145,37 @@ $rtl-selectors: (
     display: none;
   }
 
-  .indeterminate.animation-ready .primary-bar {
+  .indeterminate .primary-bar {
     animation: linear infinite $_indeterminate-duration;
     // stylelint-disable-next-line no-unknown-animations --
     // animation generated via mixin
     animation-name: primary-indeterminate-translate;
   }
 
-  .indeterminate.animation-ready .primary-bar > .bar-inner {
+  .indeterminate .primary-bar > .bar-inner {
     animation: linear infinite $_indeterminate-duration
       primary-indeterminate-scale;
   }
 
-  .indeterminate.animation-ready.four-color .primary-bar > .bar-inner {
+  .indeterminate.four-color .primary-bar > .bar-inner {
     animation-name: primary-indeterminate-scale, four-color;
     animation-duration: $_indeterminate-duration,
       calc($_indeterminate-duration * 2);
   }
 
-  .indeterminate.animation-ready .secondary-bar {
+  .indeterminate .secondary-bar {
     animation: linear infinite $_indeterminate-duration;
     // stylelint-disable-next-line no-unknown-animations --
     // animation generated via mixin
     animation-name: secondary-indeterminate-translate;
   }
 
-  .indeterminate.animation-ready .secondary-bar > .bar-inner {
+  .indeterminate .secondary-bar > .bar-inner {
     animation: linear infinite $_indeterminate-duration
       secondary-indeterminate-scale;
   }
 
-  .indeterminate.animation-ready.four-color .secondary-bar > .bar-inner {
+  .indeterminate.four-color .secondary-bar > .bar-inner {
     animation-name: secondary-indeterminate-scale, four-color;
     animation-duration: $_indeterminate-duration,
       calc($_indeterminate-duration * 2);
@@ -197,13 +197,13 @@ $rtl-selectors: (
         animation-name: buffering-rtl;
       }
 
-      &.indeterminate.animation-ready .primary-bar {
+      &.indeterminate .primary-bar {
         // stylelint-disable-next-line no-unknown-animations --
         // animation generated via mixin
         animation-name: primary-indeterminate-translate-rtl;
       }
 
-      &.indeterminate.animation-ready .secondary-bar {
+      &.indeterminate .secondary-bar {
         // stylelint-disable-next-line no-unknown-animations --
         // animation generated via mixin
         animation-name: secondary-indeterminate-translate-rtl;

progress/internal/circular-progress.ts

@@ -29,7 +29,7 @@ export class CircularProgress extends Progress {
     return html`
       <svg viewBox="0 0 4800 4800">
         <circle class="track" pathLength="100"></circle>
-        <circle class="progress" pathLength="100"
+        <circle class="active-track" pathLength="100"
           stroke-dashoffset=${dashOffset}></circle>
       </svg>
     `;

progress/internal/linear-progress.ts

@@ -5,7 +5,7 @@
  */
 
 import {html} from 'lit';
-import {property, query, state} from 'lit/decorators.js';
+import {property} from 'lit/decorators.js';
 import {styleMap} from 'lit/directives/style-map.js';
 
 import {Progress} from './progress.js';
@@ -19,18 +19,6 @@ export class LinearProgress extends Progress {
    */
   @property({type: Number}) buffer = 1;
 
-  @query('.progress') private readonly rootEl!: HTMLElement|null;
-
-  @state() private animationReady = true;
-  private resizeObserver: ResizeObserver|null = null;
-
-  protected override getRenderClasses() {
-    return {
-      ...super.getRenderClasses(),
-      'animation-ready': this.animationReady,
-    };
-  }
-
   // Note, the indeterminate animation is rendered with transform %'s
   // Previously, this was optimized to use px calculated with the resizeObserver
   // due to a now fixed Chrome bug: crbug.com/389359.
@@ -55,37 +43,4 @@ export class LinearProgress extends Progress {
       </div>
     `;
   }
-
-  override async connectedCallback() {
-    super.connectedCallback();
-    // wait for rendering.
-    await this.updateComplete;
-    if (this.resizeObserver) {
-      return;
-    }
-    this.resizeObserver = new ResizeObserver(() => {
-      if (this.indeterminate) {
-        this.restartAnimation();
-      }
-    });
-    this.resizeObserver.observe(this.rootEl!);
-  }
-
-  override disconnectedCallback() {
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-      this.resizeObserver = null;
-    }
-    super.disconnectedCallback();
-  }
-
-  // When size changes, restart the animation
-  // to avoid jank.
-  private async restartAnimation() {
-    await this.updateComplete;
-    this.animationReady = false;
-    await new Promise(requestAnimationFrame);
-    this.animationReady = true;
-    await this.updateComplete;
-  }
 }