Revert "perf(cdk/table): Use afterRender hooks (#28354)" (#28461)

This reverts commit 81cb5ac.

(cherry picked from commit 14aeb00)

Author: andrewseguin

src/cdk-experimental/column-resize/resize-strategy.ts

@@ -55,12 +55,12 @@ export abstract class ResizeStrategy {
 
       this.styleScheduler.schedule(() => {
         tableElement.style.width = coerceCssPixelValue(tableWidth + this._pendingResizeDelta!);
+
         this._pendingResizeDelta = null;
       });
 
       this.styleScheduler.scheduleEnd(() => {
         this.table.updateStickyColumnStyles();
-        this.styleScheduler.flushAfterRender();
       });
     }
 

src/cdk-experimental/table-scroll-container/table-scroll-container.ts

@@ -72,34 +72,21 @@ export class CdkTableScrollContainer implements StickyPositioningListener, OnDes
   }
 
   stickyColumnsUpdated({sizes}: StickyUpdate): void {
-    if (arrayEquals(this._startSizes, sizes)) {
-      return;
-    }
     this._startSizes = sizes;
     this._updateScrollbar();
   }
 
   stickyEndColumnsUpdated({sizes}: StickyUpdate): void {
-    if (arrayEquals(this._endSizes, sizes)) {
-      return;
-    }
     this._endSizes = sizes;
     this._updateScrollbar();
   }
 
   stickyHeaderRowsUpdated({sizes}: StickyUpdate): void {
-    if (arrayEquals(this._headerSizes, sizes)) {
-      return;
-    }
     this._headerSizes = sizes;
     this._updateScrollbar();
   }
 
   stickyFooterRowsUpdated({sizes}: StickyUpdate): void {
-    console.log('sizes', this._footerSizes, sizes, arrayEquals(this._footerSizes, sizes));
-    if (arrayEquals(this._footerSizes, sizes)) {
-      return;
-    }
     this._footerSizes = sizes;
     this._updateScrollbar();
   }
@@ -143,13 +130,9 @@ export class CdkTableScrollContainer implements StickyPositioningListener, OnDes
   /** Updates the stylesheet with the specified scrollbar style. */
   private _applyCss(value: string) {
     this._clearCss();
+
     const selector = `.${this._uniqueClassName}::-webkit-scrollbar-track`;
     this._getStyleSheet().insertRule(`${selector} {margin: ${value}}`, 0);
-
-    // Force the scrollbar to paint.
-    const display = this._elementRef.nativeElement.style.display;
-    this._elementRef.nativeElement.style.display = 'none';
-    this._elementRef.nativeElement.style.display = display;
   }
 
   private _clearCss() {
@@ -170,20 +153,3 @@ function computeMargin(sizes: (number | null | undefined)[]): number {
   }
   return margin;
 }
-
-function arrayEquals(a1: unknown[], a2: unknown[]) {
-  if (a1 === a2) {
-    return true;
-  }
-  if (a1.length !== a2.length) {
-    return false;
-  }
-
-  for (let index = 0; index < a1.length; index++) {
-    if (a1[index] !== a2[index]) {
-      return false;
-    }
-  }
-
-  return true;
-}

src/cdk/table/coalesced-style-scheduler.ts

@@ -6,14 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {
-  Injectable,
-  NgZone,
-  OnDestroy,
-  InjectionToken,
-  afterRender,
-  AfterRenderPhase,
-} from '@angular/core';
+import {Injectable, NgZone, OnDestroy, InjectionToken} from '@angular/core';
 import {from, Subject} from 'rxjs';
 import {take, takeUntil} from 'rxjs/operators';
 
@@ -42,46 +35,7 @@ export class _CoalescedStyleScheduler implements OnDestroy {
   private _currentSchedule: _Schedule | null = null;
   private readonly _destroyed = new Subject<void>();
 
-  private readonly _earlyReadTasks: (() => unknown)[] = [];
-  private readonly _writeTasks: (() => unknown)[] = [];
-  private readonly _readTasks: (() => unknown)[] = [];
-
-  constructor(private readonly _ngZone: NgZone) {
-    afterRender(() => flushTasks(this._earlyReadTasks), {phase: AfterRenderPhase.EarlyRead});
-    afterRender(() => flushTasks(this._writeTasks), {phase: AfterRenderPhase.Write});
-    afterRender(() => flushTasks(this._readTasks), {phase: AfterRenderPhase.Read});
-  }
-
-  /**
-   * Like afterNextRender(fn, AfterRenderPhase.EarlyRead), but can be called
-   * outside of injection context. Runs after current/next CD.
-   */
-  scheduleEarlyRead(task: () => unknown): void {
-    this._earlyReadTasks.push(task);
-  }
-
-  /**
-   * Like afterNextRender(fn, AfterRenderPhase.Write), but can be called
-   * outside of injection context. Runs after current/next CD.
-   */
-  scheduleWrite(task: () => unknown): void {
-    this._writeTasks.push(task);
-  }
-
-  /**
-   * Like afterNextRender(fn, AfterRenderPhase.Read), but can be called
-   * outside of injection context. Runs after current/next CD.
-   */
-  scheduleRead(task: () => unknown): void {
-    this._readTasks.push(task);
-  }
-
-  /** Greedily triggers pending EarlyRead, Write, and Read tasks, in that order. */
-  flushAfterRender() {
-    flushTasks(this._earlyReadTasks);
-    flushTasks(this._writeTasks);
-    flushTasks(this._readTasks);
-  }
+  constructor(private readonly _ngZone: NgZone) {}
 
   /**
    * Schedules the specified task to run at the end of the current VM turn.
@@ -145,14 +99,3 @@ export class _CoalescedStyleScheduler implements OnDestroy {
       : this._ngZone.onStable.pipe(take(1));
   }
 }
-
-/**
- * Runs and removes tasks from the passed array in order.
- * Tasks appended mid-flight will also be flushed.
- */
-function flushTasks(tasks: (() => unknown)[]) {
-  let task: (() => unknown) | undefined;
-  while ((task = tasks.shift())) {
-    task();
-  }
-}

src/cdk/table/sticky-styler.ts

@@ -82,9 +82,12 @@ export class StickyStyler {
       }
     }
 
-    for (const element of elementsToClear) {
-      this._removeStickyStyle(element, stickyDirections);
-    }
+    // Coalesce with sticky row/column updates (and potentially other changes like column resize).
+    this._coalescedStyleScheduler.schedule(() => {
+      for (const element of elementsToClear) {
+        this._removeStickyStyle(element, stickyDirections);
+      }
+    });
   }
 
   /**
@@ -110,63 +113,61 @@ export class StickyStyler {
       !(stickyStartStates.some(state => state) || stickyEndStates.some(state => state))
     ) {
       if (this._positionListener) {
-        this._coalescedStyleScheduler.scheduleWrite(() => {
-          this._positionListener!.stickyColumnsUpdated({sizes: []});
-          this._positionListener!.stickyEndColumnsUpdated({sizes: []});
-        });
+        this._positionListener.stickyColumnsUpdated({sizes: []});
+        this._positionListener.stickyEndColumnsUpdated({sizes: []});
       }
 
       return;
     }
 
-    this._coalescedStyleScheduler.scheduleEarlyRead(() => {
+    // Coalesce with sticky row updates (and potentially other changes like column resize).
+    this._coalescedStyleScheduler.schedule(() => {
       const firstRow = rows[0];
       const numCells = firstRow.children.length;
-      const lastStickyStart = stickyStartStates.lastIndexOf(true);
-      const firstStickyEnd = stickyEndStates.indexOf(true);
+      const cellWidths: number[] = this._getCellWidths(firstRow, recalculateCellWidths);
 
-      const cellWidths = this._getCellWidths(firstRow, recalculateCellWidths);
       const startPositions = this._getStickyStartColumnPositions(cellWidths, stickyStartStates);
       const endPositions = this._getStickyEndColumnPositions(cellWidths, stickyEndStates);
 
-      this._coalescedStyleScheduler.scheduleWrite(() => {
-        const isRtl = this.direction === 'rtl';
-        const start = isRtl ? 'right' : 'left';
-        const end = isRtl ? 'left' : 'right';
-
-        for (const row of rows) {
-          for (let i = 0; i < numCells; i++) {
-            const cell = row.children[i] as HTMLElement;
-            if (stickyStartStates[i]) {
-              this._addStickyStyle(cell, start, startPositions![i], i === lastStickyStart);
-            }
-
-            if (stickyEndStates[i]) {
-              this._addStickyStyle(cell, end, endPositions![i], i === firstStickyEnd);
-            }
+      const lastStickyStart = stickyStartStates.lastIndexOf(true);
+      const firstStickyEnd = stickyEndStates.indexOf(true);
+
+      const isRtl = this.direction === 'rtl';
+      const start = isRtl ? 'right' : 'left';
+      const end = isRtl ? 'left' : 'right';
+
+      for (const row of rows) {
+        for (let i = 0; i < numCells; i++) {
+          const cell = row.children[i] as HTMLElement;
+          if (stickyStartStates[i]) {
+            this._addStickyStyle(cell, start, startPositions[i], i === lastStickyStart);
           }
-        }
 
-        if (this._positionListener) {
-          this._positionListener.stickyColumnsUpdated({
-            sizes:
-              lastStickyStart === -1
-                ? []
-                : cellWidths!
-                    .slice(0, lastStickyStart + 1)
-                    .map((width, index) => (stickyStartStates[index] ? width : null)),
-          });
-          this._positionListener.stickyEndColumnsUpdated({
-            sizes:
-              firstStickyEnd === -1
-                ? []
-                : cellWidths!
-                    .slice(firstStickyEnd)
-                    .map((width, index) => (stickyEndStates[index + firstStickyEnd] ? width : null))
-                    .reverse(),
-          });
+          if (stickyEndStates[i]) {
+            this._addStickyStyle(cell, end, endPositions[i], i === firstStickyEnd);
+          }
         }
-      });
+      }
+
+      if (this._positionListener) {
+        this._positionListener.stickyColumnsUpdated({
+          sizes:
+            lastStickyStart === -1
+              ? []
+              : cellWidths
+                  .slice(0, lastStickyStart + 1)
+                  .map((width, index) => (stickyStartStates[index] ? width : null)),
+        });
+        this._positionListener.stickyEndColumnsUpdated({
+          sizes:
+            firstStickyEnd === -1
+              ? []
+              : cellWidths
+                  .slice(firstStickyEnd)
+                  .map((width, index) => (stickyEndStates[index + firstStickyEnd] ? width : null))
+                  .reverse(),
+        });
+      }
     });
   }
 
@@ -187,7 +188,9 @@ export class StickyStyler {
       return;
     }
 
-    this._coalescedStyleScheduler.scheduleEarlyRead(() => {
+    // Coalesce with other sticky row updates (top/bottom), sticky columns updates
+    // (and potentially other changes like column resize).
+    this._coalescedStyleScheduler.schedule(() => {
       // If positioning the rows to the bottom, reverse their order when evaluating the sticky
       // position such that the last row stuck will be "bottom: 0px" and so on. Note that the
       // sticky states need to be reversed as well.
@@ -216,33 +219,32 @@ export class StickyStyler {
       }
 
       const borderedRowIndex = states.lastIndexOf(true);
-      this._coalescedStyleScheduler.scheduleWrite(() => {
-        for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
-          if (!states[rowIndex]) {
-            continue;
-          }
 
-          const offset = stickyOffsets[rowIndex];
-          const isBorderedRowIndex = rowIndex === borderedRowIndex;
-          for (const element of elementsToStick[rowIndex]) {
-            this._addStickyStyle(element, position, offset, isBorderedRowIndex);
-          }
+      for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+        if (!states[rowIndex]) {
+          continue;
         }
 
-        if (position === 'top') {
-          this._positionListener?.stickyHeaderRowsUpdated({
-            sizes: stickyCellHeights,
-            offsets: stickyOffsets,
-            elements: elementsToStick,
-          });
-        } else {
-          this._positionListener?.stickyFooterRowsUpdated({
-            sizes: stickyCellHeights,
-            offsets: stickyOffsets,
-            elements: elementsToStick,
-          });
+        const offset = stickyOffsets[rowIndex];
+        const isBorderedRowIndex = rowIndex === borderedRowIndex;
+        for (const element of elementsToStick[rowIndex]) {
+          this._addStickyStyle(element, position, offset, isBorderedRowIndex);
         }
-      });
+      }
+
+      if (position === 'top') {
+        this._positionListener?.stickyHeaderRowsUpdated({
+          sizes: stickyCellHeights,
+          offsets: stickyOffsets,
+          elements: elementsToStick,
+        });
+      } else {
+        this._positionListener?.stickyFooterRowsUpdated({
+          sizes: stickyCellHeights,
+          offsets: stickyOffsets,
+          elements: elementsToStick,
+        });
+      }
     });
   }
 
@@ -258,7 +260,7 @@ export class StickyStyler {
     }
 
     // Coalesce with other sticky updates (and potentially other changes like column resize).
-    this._coalescedStyleScheduler.scheduleWrite(() => {
+    this._coalescedStyleScheduler.schedule(() => {
       const tfoot = tableElement.querySelector('tfoot')!;
 
       if (stickyStates.some(state => !state)) {

src/cdk/table/table.ts

@@ -727,11 +727,9 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
     if (this._ngZone && NgZone.isInAngularZone()) {
       this._ngZone.onStable.pipe(take(1), takeUntil(this._onDestroy)).subscribe(() => {
         this.updateStickyColumnStyles();
-        this._coalescedStyleScheduler.flushAfterRender();
       });
     } else {
       this.updateStickyColumnStyles();
-      this._coalescedStyleScheduler.flushAfterRender();
     }
 
     this.contentChanged.next();

tools/public_api_guard/cdk/table.md

@@ -423,13 +423,9 @@ export const _COALESCED_STYLE_SCHEDULER: InjectionToken<_CoalescedStyleScheduler
 // @public
 export class _CoalescedStyleScheduler implements OnDestroy {
     constructor(_ngZone: NgZone);
-    flushAfterRender(): void;
     ngOnDestroy(): void;
     schedule(task: () => unknown): void;
-    scheduleEarlyRead(task: () => unknown): void;
     scheduleEnd(task: () => unknown): void;
-    scheduleRead(task: () => unknown): void;
-    scheduleWrite(task: () => unknown): void;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<_CoalescedStyleScheduler, never>;
     // (undocumented)