Remove onBodyAvailable from doc-state service. Start deprecation. (ampproject#22580)

* Remove onBodyAvailable from doc-state service. Start deprecation.

* Switch amp-story to use viewer visibility

* cleanup

* rename documentState to globalDocumentState

* cleanup

* fixing tests

* why is ampdoc tests failing?

* test fixes

* fixing tests

Author: Dima Voytenko

build-system/tasks/presubmit-checks.js

@@ -204,7 +204,7 @@ const forbiddenTerms = {
     message: privateServiceFactory,
     whitelist: ['src/service/crypto-impl.js', 'src/runtime.js'],
   },
-  'installDocumentStateService': {
+  'installGlobalDocumentStateService': {
     message: privateServiceFactory,
     whitelist: ['src/service/document-state.js', 'src/runtime.js'],
   },
@@ -411,6 +411,15 @@ const forbiddenTerms = {
       'extensions/amp-consent/0.1/consent-state-manager.js',
     ],
   },
+  // Global documentState service.
+  'globalDocumentStateFor': {
+    message: 'Global document API. In the process of being deprecated.',
+    whitelist: [
+      'src/services.js',
+      'src/service/viewer-impl.js',
+      'src/service/vsync-impl.js',
+    ],
+  },
   'getBaseCid': {
     message: requiresReviewPrivacy,
     whitelist: ['src/service/cid-impl.js', 'src/service/viewer-impl.js'],

extensions/amp-analytics/0.1/test/test-visibility-manager.js

@@ -1052,7 +1052,7 @@ describes.realWin('VisibilityManager integrated', {amp: true}, env => {
       eventResolver2 = resolve;
     });
 
-    const docState = Services.documentStateFor(win);
+    const docState = Services.globalDocumentStateFor(win);
     sandbox.stub(docState, 'isHidden').callsFake(() => false);
     sandbox.stub(viewer, 'getFirstVisibleTime').callsFake(() => startTime);
 

extensions/amp-story-auto-ads/0.1/test/test-amp-story-auto-ads.js

@@ -15,6 +15,7 @@
  */
 import * as analytics from '../../../../src/analytics';
 import {AmpStoryAutoAds} from '../amp-story-auto-ads';
+import {Services} from '../../../../src/services';
 import {macroTask} from '../../../../testing/yield';
 
 const NOOP = () => {};
@@ -34,6 +35,8 @@ describes.realWin(
 
     beforeEach(() => {
       win = env.win;
+      const viewer = Services.viewerForDoc(env.ampdoc);
+      sandbox.stub(Services, 'viewerForDoc').returns(viewer);
       adElement = win.document.createElement('amp-story-auto-ads');
       storyElement = win.document.createElement('amp-story');
       win.document.body.appendChild(storyElement);

extensions/amp-story/1.0/amp-story.js

@@ -341,8 +341,8 @@ export class AmpStory extends AMP.BaseElement {
     /** @private @const {!../../../src/service/platform-impl.Platform} */
     this.platform_ = Services.platformFor(this.win);
 
-    /** @private @const {!../../../src/service/document-state.DocumentState} */
-    this.documentState_ = Services.documentStateFor(this.win);
+    /** @private @const {!../../../src/service/viewer-impl.Viewer} */
+    this.viewer_ = Services.viewerForDoc(this.element);
 
     /**
      * Store the current paused state, to make sure the story does not play on
@@ -751,9 +751,7 @@ export class AmpStory extends AMP.BaseElement {
       }
     });
 
-    // TODO(#16795): Remove once the runtime triggers pause/resume callbacks
-    // on document visibility change (eg: user switches tab).
-    this.documentState_.onVisibilityChanged(() => this.onVisibilityChanged_());
+    this.viewer_.onVisibilityChanged(() => this.onVisibilityChanged_());
 
     this.getViewport().onResize(debounce(this.win, () => this.onResize(), 300));
     this.installGestureRecognizers_();
@@ -767,11 +765,9 @@ export class AmpStory extends AMP.BaseElement {
     // If the story is within a viewer that enabled the swipe capability, this
     // disables the navigation education overlay on the X axis to enable the
     // swipe to the next story feature.
-    const viewerService = Services.viewerForDoc(this.element);
-    const swipeRecognizer =
-      viewerService && viewerService.hasCapability('swipe')
-        ? SwipeYRecognizer
-        : SwipeXYRecognizer;
+    const swipeRecognizer = this.viewer_.hasCapability('swipe')
+      ? SwipeYRecognizer
+      : SwipeXYRecognizer;
 
     // Shows "tap to navigate" hint when swiping.
     gestures.onGesture(swipeRecognizer, gesture => {
@@ -956,7 +952,7 @@ export class AmpStory extends AMP.BaseElement {
         // Preloads and prerenders the share menu.
         this.shareMenu_.build();
 
-        const infoDialog = Services.viewerForDoc(this.element).isEmbedded()
+        const infoDialog = this.viewer_.isEmbedded()
           ? new InfoDialog(this.win, this.element)
           : null;
         if (infoDialog) {
@@ -976,7 +972,7 @@ export class AmpStory extends AMP.BaseElement {
     // Story is being prerendered: resolve the layoutCallback when the first
     // page is built. Other pages will only build if the document becomes
     // visible.
-    if (!Services.viewerForDoc(this.element).hasBeenVisible()) {
+    if (!this.viewer_.hasBeenVisible()) {
       return whenUpgradedToCustomElement(firstPageEl).then(() =>
         firstPageEl.whenBuilt()
       );
@@ -1711,9 +1707,7 @@ export class AmpStory extends AMP.BaseElement {
    * @private
    */
   onVisibilityChanged_() {
-    this.documentState_.isHidden()
-      ? this.pauseCallback()
-      : this.resumeCallback();
+    this.viewer_.isVisible() ? this.resumeCallback() : this.pauseCallback();
   }
 
   /**

extensions/amp-story/1.0/test/test-amp-story.js

@@ -96,6 +96,7 @@ describes.realWin(
         .stub(viewer, 'hasCapability')
         .withArgs('swipe')
         .returns(hasSwipeCapability);
+      sandbox.stub(Services, 'viewerForDoc').returns(viewer);
 
       const storeService = new AmpStoryStoreService(win);
       registerServiceBuilder(win, 'story-store', () => storeService);
@@ -688,9 +689,9 @@ describes.realWin(
       it('should pause the story when tab becomes inactive', () => {
         createPages(story.element, 2, ['cover', 'page-1']);
 
-        sandbox.stub(story.documentState_, 'isHidden').returns(true);
+        sandbox.stub(story.viewer_, 'isVisible').returns(false);
         const onVisibilityChangedStub = sandbox.stub(
-          story.documentState_,
+          story.viewer_,
           'onVisibilityChanged'
         );
 
@@ -710,9 +711,9 @@ describes.realWin(
       it('should play the story when tab becomes active', () => {
         createPages(story.element, 2, ['cover', 'page-1']);
 
-        sandbox.stub(story.documentState_, 'isHidden').returns(false);
+        sandbox.stub(story.viewer_, 'isVisible').returns(true);
         const onVisibilityChangedStub = sandbox.stub(
-          story.documentState_,
+          story.viewer_,
           'onVisibilityChanged'
         );
 

extensions/amp-story/1.0/test/test-full-bleed-animations.js

@@ -22,6 +22,7 @@ import {AmpStory} from '../amp-story';
 import {AmpStoryPage} from '../amp-story-page';
 import {AmpStoryStoreService} from '../amp-story-store-service';
 import {LocalizationService} from '../../../../src/service/localization';
+import {Services} from '../../../../src/services';
 import {
   calculateTargetScalingFactor,
   targetFitsWithinPage,
@@ -47,6 +48,9 @@ describes.realWin(
 
       sandbox.stub(win.history, 'replaceState');
 
+      const viewer = Services.viewerForDoc(env.ampdoc);
+      sandbox.stub(Services, 'viewerForDoc').returns(viewer);
+
       const storeService = new AmpStoryStoreService(win);
       registerServiceBuilder(win, 'story-store', () => storeService);
 

extensions/amp-story/1.0/test/test-live-story-manager.js

@@ -17,6 +17,7 @@
 import {AmpStory} from '../amp-story';
 import {AmpStoryPage} from '../amp-story-page';
 import {LiveStoryManager} from '../live-story-manager';
+import {Services} from '../../../../src/services';
 import {addAttributesToElement} from '../../../../src/dom';
 
 describes.realWin('LiveStoryManager', {amp: true}, env => {
@@ -47,6 +48,8 @@ describes.realWin('LiveStoryManager', {amp: true}, env => {
 
   beforeEach(() => {
     win = env.win;
+    const viewer = Services.viewerForDoc(env.ampdoc);
+    sandbox.stub(Services, 'viewerForDoc').returns(viewer);
     storyEl = win.document.createElement('amp-story');
     addAttributesToElement(storyEl, {
       'id': 'testStory',

src/dom.js

@@ -90,8 +90,6 @@ export function waitForChildPromise(parent, checkFunc) {
 
 /**
  * Waits for document's body to be available and ready.
- * Will be deprecated soon; use {@link AmpDoc#waitForBodyOpen} or
- * @{link DocumentState#onBodyAvailable} instead.
  * @param {!Document} doc
  * @param {function()} callback
  */

src/runtime.js

@@ -58,7 +58,7 @@ import {
 import {installCidService} from './service/cid-impl';
 import {installCryptoService} from './service/crypto-impl';
 import {installDocumentInfoServiceForDoc} from './service/document-info-impl';
-import {installDocumentStateService} from './service/document-state';
+import {installGlobalDocumentStateService} from './service/document-state';
 import {installGlobalNavigationHandlerForDoc} from './service/navigation';
 import {installGlobalSubmitListenerForDoc} from './document-submit';
 import {installHiddenObserverForDoc} from './service/hidden-observer-impl';
@@ -100,7 +100,7 @@ const TAG = 'runtime';
 export function installRuntimeServices(global) {
   installCryptoService(global);
   installBatchedXhrService(global);
-  installDocumentStateService(global);
+  installGlobalDocumentStateService(global);
   installPlatformService(global);
   installTemplatesService(global);
   installTimerService(global);

src/service/document-state.js

@@ -17,7 +17,6 @@
 import {Observable} from '../observable';
 import {getVendorJsPropertyName} from '../style';
 import {registerServiceBuilder} from '../service';
-import {waitForChild} from '../dom';
 
 /**
  */
@@ -70,9 +69,6 @@ export class DocumentState {
         this.boundOnVisibilityChanged_
       );
     }
-
-    /** @private {?Observable} */
-    this.bodyAvailableObservable_ = null;
   }
 
   /**
@@ -112,41 +108,11 @@ export class DocumentState {
   onVisibilityChanged_() {
     this.visibilityObservable_.fire();
   }
-
-  /**
-   * If body is already available, callback is called synchronously and null
-   * is returned.
-   * @param {function()} handler
-   * @return {?UnlistenDef}
-   */
-  onBodyAvailable(handler) {
-    const doc = this.document_;
-    if (doc.body) {
-      handler();
-      return null;
-    }
-    if (!this.bodyAvailableObservable_) {
-      this.bodyAvailableObservable_ = new Observable();
-      waitForChild(
-        doc.documentElement,
-        () => !!doc.body,
-        this.onBodyAvailable_.bind(this)
-      );
-    }
-    return this.bodyAvailableObservable_.add(handler);
-  }
-
-  /** @private */
-  onBodyAvailable_() {
-    this.bodyAvailableObservable_.fire();
-    this.bodyAvailableObservable_.removeAll();
-    this.bodyAvailableObservable_ = null;
-  }
 }
 
 /**
  * @param {!Window} window
  */
-export function installDocumentStateService(window) {
+export function installGlobalDocumentStateService(window) {
   registerServiceBuilder(window, 'documentState', DocumentState);
 }