First pass at IntersectionObserver in Resources

src/inabox/inabox-resources.js

@@ -157,6 +157,11 @@ export class InaboxResources {
     return this.firstPassDone_.promise;
   }
 
+  /** @override */
+  isIntersectionExperimentOn() {
+    return false;
+  }
+
   /**
    * @private
    */

src/ini-load.js

@@ -76,8 +76,6 @@ export function getMeasuredResources(ampdoc, hostWin, filterFn) {
   // First, wait for the `ready-scan` signal. Waiting for each element
   // individually is too expensive and `ready-scan` will cover most of
   // the initially parsed elements.
-  // TODO(jridgewell): this path should be switched to use a future
-  // "layer has been measured" signal.
   return ampdoc
     .signals()
     .whenSignal(READY_SCAN_SIGNAL)

src/layout-rect.js

@@ -109,11 +109,11 @@ export function layoutRectFromDomRect(rect) {
 
 /**
  * Returns true if the specified two rects overlap by a single pixel.
- * @param {!LayoutRectDef} r1
- * @param {!LayoutRectDef} r2
+ * @param {!LayoutRectDef|!ClientRect} r1
+ * @param {!LayoutRectDef|!ClientRect} r2
  * @return {boolean}
  */
-export function layoutRectsOverlap(r1, r2) {
+export function rectsOverlap(r1, r2) {
   return (
     r1.top <= r2.bottom &&
     r2.top <= r1.bottom &&
@@ -188,7 +188,7 @@ export function layoutPositionRelativeToScrolledViewport(
       right: viewport.getWidth(),
     })
   );
-  if (layoutRectsOverlap(layoutBox, scrollLayoutBox)) {
+  if (rectsOverlap(layoutBox, scrollLayoutBox)) {
     return RelativePositions.INSIDE;
   } else {
     return layoutRectsRelativePos(layoutBox, scrollLayoutBox);

src/service/mutator-impl.js

@@ -21,7 +21,7 @@ import {Services} from '../services';
 import {areMarginsChanged} from '../layout-rect';
 import {closest} from '../dom';
 import {computedStyle} from '../style';
-import {dev} from '../log';
+import {dev, devAssert} from '../log';
 import {isExperimentOn} from '../experiments';
 import {registerServiceBuilderForDoc} from '../service';
 
@@ -58,6 +58,9 @@ export class MutatorImpl {
     this.activeHistory_.onFocus(element => {
       this.checkPendingChangeSize_(element);
     });
+
+    /** @private @const {boolean} */
+    this.intersect_ = this.resources_.isIntersectionExperimentOn();
   }
 
   /** @override */
@@ -132,17 +135,27 @@ export class MutatorImpl {
 
   /** @override */
   collapseElement(element) {
-    const box = this.viewport_.getLayoutRect(element);
-    const resource = Resource.forElement(element);
-    if (box.width != 0 && box.height != 0) {
-      if (isExperimentOn(this.win, 'dirty-collapse-element')) {
-        this.dirtyElement(element);
-      } else {
-        this.resources_.setRelayoutTop(box.top);
+    // With IntersectionObserver, no need to relayout or remeasure
+    // due to a single element collapse (similar to "relayout top").
+    if (!this.intersect_) {
+      const box = this.viewport_.getLayoutRect(element);
+      if (box.width != 0 && box.height != 0) {
+        if (isExperimentOn(this.win, 'dirty-collapse-element')) {
+          this.dirtyElement(element);
+        } else {
+          this.resources_.setRelayoutTop(box.top);
+        }
       }
     }
+
+    const resource = Resource.forElement(element);
     resource.completeCollapse();
-    this.resources_.schedulePass(FOUR_FRAME_DELAY_);
+
+    // Unlike completeExpand(), there's no requestMeasure() call here that
+    // requires another pass (with IntersectionObserver).
+    if (!this.intersect_) {
+      this.resources_.schedulePass(FOUR_FRAME_DELAY_);
+    }
   }
 
   /** @override */
@@ -199,11 +212,28 @@ export class MutatorImpl {
         if (measurer) {
           measurer();
         }
-        relayoutTop = calcRelayoutTop();
+        // With IntersectionObserver, "relayout top" is no longer needed since
+        // relative positional changes won't affect correctness.
+        if (!this.intersect_) {
+          relayoutTop = calcRelayoutTop();
+        }
       },
       mutate: () => {
         mutator();
 
+        // TODO(willchou): IntersectionObserver won't catch size changes,
+        // which means layout boxes may be stale. However, always requesting
+        // measure after any mutation is overkill and probably expensive.
+        // Instead, survey measureMutateElement() callers to determine which
+        // should explicitly call requestMeasure() to fix this.
+
+        // With IntersectionObserver, no need to remeasure and set relayout
+        // on element size changes since enter/exit viewport will be detected.
+        if (this.intersect_) {
+          this.resources_.maybeHeightChanged();
+          return;
+        }
+
         if (element.classList.contains('i-amphtml-element')) {
           const r = Resource.forElement(element);
           r.requestMeasure();
@@ -245,6 +275,7 @@ export class MutatorImpl {
    * @param {!Element} element
    */
   dirtyElement(element) {
+    devAssert(!this.intersect_);
     let relayoutAll = false;
     const isAmpElement = element.classList.contains('i-amphtml-element');
     if (isAmpElement) {
@@ -402,7 +433,10 @@ export class MutatorImpl {
         callback: opt_callback,
       }
     );
-    this.resources_.schedulePassVsync();
+    // With IntersectionObserver, remeasuring after size changes are no longer needed.
+    if (!this.intersect_) {
+      this.resources_.schedulePassVsync();
+    }
   }
 }
 

src/service/position-observer/position-observer-worker.js

@@ -19,8 +19,8 @@ import {devAssert} from '../../log';
 import {
   layoutRectEquals,
   layoutRectLtwh,
-  layoutRectsOverlap,
   layoutRectsRelativePos,
+  rectsOverlap,
 } from '../../layout-rect';
 
 /** @enum {number} */
@@ -103,7 +103,7 @@ export class PositionObserverWorker {
       position.viewportRect
     );
 
-    if (layoutRectsOverlap(positionRect, position.viewportRect)) {
+    if (rectsOverlap(positionRect, position.viewportRect)) {
       // Update position
       this.prevPosition_ = position;
       // Only call handler if entry element overlap with viewport.

src/service/resource.js

@@ -23,8 +23,8 @@ import {isBlockedByConsent} from '../error';
 import {
   layoutRectLtwh,
   layoutRectSizeEquals,
-  layoutRectsOverlap,
   moveLayoutRect,
+  rectsOverlap,
 } from '../layout-rect';
 import {startsWith} from '../string';
 import {toWin} from '../types';
@@ -416,8 +416,10 @@ export class Resource {
   /**
    * Measures the resource's boundaries. An upgraded element will be
    * transitioned to the "ready for layout" state.
+   * @param {!ClientRect=} opt_premeasuredRect If provided, use this
+   *    premeasured ClientRect instead of calling getBoundingClientRect.
    */
-  measure() {
+  measure(opt_premeasuredRect) {
     // Check if the element is ready to be measured.
     // Placeholders are special. They are technically "owned" by parent AMP
     // elements, sized by parents, but laid out independently. This means
@@ -448,14 +450,14 @@ export class Resource {
     this.isMeasureRequested_ = false;
 
     const oldBox = this.layoutBox_;
-    this.measureViaResources_();
-    const box = this.layoutBox_;
+    this.computeMeasurements_(opt_premeasuredRect);
+    const newBox = this.layoutBox_;
 
     // Note that "left" doesn't affect readiness for the layout.
-    const sizeChanges = !layoutRectSizeEquals(oldBox, box);
+    const sizeChanges = !layoutRectSizeEquals(oldBox, newBox);
     if (
       this.state_ == ResourceState.NOT_LAID_OUT ||
-      oldBox.top != box.top ||
+      oldBox.top != newBox.top ||
       sizeChanges
     ) {
       if (
@@ -469,17 +471,20 @@ export class Resource {
     }
 
     if (!this.hasBeenMeasured()) {
-      this.initialLayoutBox_ = box;
+      this.initialLayoutBox_ = newBox;
     }
 
-    this.element.updateLayoutBox(box, sizeChanges);
+    this.element.updateLayoutBox(newBox, sizeChanges);
   }
 
-  /** Use resources for measurement */
-  measureViaResources_() {
+  /**
+   * Computes the current layout box and position-fixed state of the element.
+   * @param {!ClientRect=} opt_premeasuredRect
+   * @private
+   */
+  computeMeasurements_(opt_premeasuredRect) {
     const viewport = Services.viewportForDoc(this.element);
-    const box = viewport.getLayoutRect(this.element);
-    this.layoutBox_ = box;
+    this.layoutBox_ = viewport.getLayoutRect(this.element, opt_premeasuredRect);
 
     // Calculate whether the element is currently is or in `position:fixed`.
     let isFixed = false;
@@ -507,7 +512,7 @@ export class Resource {
       // viewport. When accessing the layoutBox through #getLayoutBox, we'll
       // return the new absolute position.
       this.layoutBox_ = moveLayoutRect(
-        box,
+        this.layoutBox_,
         -viewport.getScrollLeft(),
         -viewport.getScrollTop()
       );
@@ -621,12 +626,13 @@ export class Resource {
   /**
    * Whether the resource is displayed, i.e. if it has non-zero width and
    * height.
+   * @param {!ClientRect=} opt_premeasuredRect If provided, use this
+   *    premeasured ClientRect instead of using the cached layout box.
    * @return {boolean}
    */
-  isDisplayed() {
+  isDisplayed(opt_premeasuredRect) {
     const isFluid = this.element.getLayout() == Layout.FLUID;
-    // TODO(jridgewell): #getSize
-    const box = this.getLayoutBox();
+    const box = opt_premeasuredRect || this.getLayoutBox();
     const hasNonZeroSize = box.height > 0 && box.width > 0;
     return (
       (isFluid || hasNonZeroSize) &&
@@ -649,7 +655,7 @@ export class Resource {
    * @return {boolean}
    */
   overlaps(rect) {
-    return layoutRectsOverlap(this.getLayoutBox(), rect);
+    return rectsOverlap(this.getLayoutBox(), rect);
   }
 
   /**