Defer building system layer until pages have been initialized (amppro…

…ject#11878)

* Change progress bar to not handle active page, since active page updates progress bar through PAGE_PROGRESS events

* Revert "Change progress bar to not handle active page, since active page updates progress bar through PAGE_PROGRESS events"

This reverts commit 0500899.

* Defer building system layer until pages have been initialized.

extensions/amp-story/0.1/amp-story.js

@@ -171,9 +171,6 @@ export class AmpStory extends AMP.BaseElement {
       this.lockBody_();
     }
 
-    this.element.appendChild(
-        this.systemLayer_.build(this.getRealChildren().length));
-
     this.initializeListeners_();
     this.initializeListenersForDev_();
 
@@ -193,6 +190,16 @@ export class AmpStory extends AMP.BaseElement {
   }
 
 
+  /**
+   * Builds the system layer DOM.  This is dependent on the pages_ array having
+   * been initialized, so it cannot happen at build time.
+   * @private
+   */
+  buildSystemLayer_() {
+    this.element.appendChild(this.systemLayer_.build(this.getPageCount()));
+  }
+
+
   /** @private */
   initializeListeners_() {
     this.element.addEventListener(EventType.EXIT_FULLSCREEN, () => {
@@ -350,6 +357,7 @@ export class AmpStory extends AMP.BaseElement {
         'Story must have at least one page.');
 
     return this.initializePages_()
+        .then(() => this.buildSystemLayer_())
         .then(() => {
           this.pages_.forEach(page => {
             page.setActive(false);