Phantom-based screenshotter

src/error.js

@@ -52,9 +52,13 @@ export function reportError(error, opt_associatedElement) {
     (console.error || console.log).apply(console,
         error.messageArray);
   } else {
-    if (process.env.NODE_ENV == 'production') {
-      (console.error || console.log).call(console, error.message);
+    if (element) {
+      (console.error || console.log).call(console,
+          element.tagName + '#' + element.id, error.message);
     } else {
+      (console.error || console.log).call(console, error.message);
+    }
+    if (!(process.env.NODE_ENV == 'production')) {
       (console.error || console.log).call(console, error.stack);
     }
   }

src/layout.js

@@ -215,8 +215,8 @@ export function getNaturalDimensions(tagName) {
     temp.style.visibility = 'hidden';
     document.body.appendChild(temp);
     naturalDimensions_[tagName] = {
-      width: temp./*OK*/offsetWidth,
-      height: temp./*OK*/offsetHeight
+      width: temp./*OK*/offsetWidth || 1,
+      height: temp./*OK*/offsetHeight || 1
     };
     document.body.removeChild(temp);
   }

src/resources.js

@@ -165,6 +165,15 @@ export class Resources {
     this.schedulePass();
   }
 
+  /**
+   * Returns a list of resources.
+   * @return {!Array<!Resource>}
+   * @export
+   */
+  get() {
+    return this.resources_.slice(0);
+  }
+
   /** @private */
   monitorInput_() {
     let input = inputFor(this.win);
@@ -246,10 +255,11 @@ export class Resources {
     element[RESOURCE_PROP_] = resource;
     this.resources_.push(resource);
 
-    // Try to immediately build element, it may already be ready.
-    resource.build(this.forceBuild_);
-
-    this.schedulePass();
+    if (this.isRuntimeOn_) {
+      // Try to immediately build element, it may already be ready.
+      resource.build(this.forceBuild_);
+      this.schedulePass();
+    }
 
     log.fine(TAG_, 'element added:', resource.debugid);
   }
@@ -277,8 +287,12 @@ export class Resources {
    */
   upgraded(element) {
     let resource = this.getResourceForElement(element);
-    resource.build(this.forceBuild_);
-    this.schedulePass();
+    if (this.isRuntimeOn_) {
+      resource.build(this.forceBuild_);
+      this.schedulePass();
+    } else if (resource.onUpgraded_) {
+      resource.onUpgraded_();
+    }
     log.fine(TAG_, 'element upgraded:', resource.debugid);
   }
 
@@ -985,10 +999,10 @@ export class Resource {
     /** @private {number} */
     this.id_ = id;
 
-    /* @const {!AmpElement} */
+    /* @export @const {!AmpElement} */
     this.element = element;
 
-    /* @const {string} */
+    /* @export @const {string} */
     this.debugid = element.tagName.toLowerCase() + '#' + id;
 
     /** @private {!Resources} */
@@ -1015,6 +1029,13 @@ export class Resource {
 
     /** @private {boolean} */
     this.isInViewport_ = false;
+
+    /**
+     * Only used in the "runtime off" case when the monitoring code needs to
+     * known when the element is upgraded.
+     * @private {!Function|undefined}
+     */
+    this.onUpgraded_;
   }
 
   /**
@@ -1307,6 +1328,50 @@ export class Resource {
       this.state_ = ResourceState_.NOT_LAID_OUT;
     }
   }
+
+  /**
+   * Only allowed in dev mode when runtime is turned off. Performs all steps
+   * necessary to render an element.
+   * @return {!Promise}
+   * @export
+   */
+  forceAll() {
+    assert(!this.resources_.isRuntimeOn_);
+    let p = Promise.resolve();
+    if (this.state_ == ResourceState_.NOT_BUILT) {
+      if (!this.element.isUpgraded()) {
+        p = p.then(() => {
+          return new Promise((resolve) => {
+            this.onUpgraded_ = resolve;
+          });
+        });
+      }
+      p = p.then(() => {
+        this.onUpgraded_ = undefined;
+        this.build(true);
+      });
+    }
+    return p.then(() => {
+      this.applyMediaQuery();
+      this.measure();
+      if (this.layoutPromise_) {
+        return this.layoutPromise_;
+      }
+      if (this.state_ == ResourceState_.LAYOUT_COMPLETE ||
+              this.state_ == ResourceState_.LAYOUT_FAILED ||
+              this.layoutCount_ > 0) {
+        return Promise.resolve();
+      }
+      if (!this.isDisplayed()) {
+        return Promise.resolve();
+      }
+      try {
+        return this.element.layoutCallback();
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    });
+  }
 }
 
 

src/runtime.js

@@ -20,6 +20,7 @@ import {getMode} from './mode';
 import {installStyles} from './styles';
 import {registerElement} from './custom-element';
 import {registerExtendedElement} from './extended-element';
+import {resourcesFor} from './resources';
 import {viewerFor} from './viewer';
 import {viewportFor} from './viewport';
 
@@ -82,6 +83,8 @@ export function adopt(global) {
   if (getMode().development) {
     /** @const */
     global.AMP.toggleRuntime = viewer.toggleRuntime.bind(viewer);
+    /** @const */
+    global.AMP.resources = resourcesFor(global);
   }
 
   let viewport = viewportFor(global);

src/viewer.js

@@ -213,7 +213,7 @@ export class Viewer {
    * name or "undefined" if the parameter wasn't defined at startup time.
    * @param {string} name
    * @return {string|undefined}
-   * @expose
+   * @export
    */
   getParam(name) {
     return this.params_[name];
@@ -426,7 +426,7 @@ export class Viewer {
    * @param {boolean} awaitResponse
    * @return {(!Promise<*>|undefined)}
    * @package
-   * @expose
+   * @export
    */
   receiveMessage(eventType, data, awaitResponse) {
     if (eventType == 'viewport') {
@@ -472,7 +472,7 @@ export class Viewer {
    * messages to the viewer.
    * @param {function(string, *, boolean):(!Promise<*>|undefined)} deliverer
    * @package
-   * @expose
+   * @export
    */
   setMessageDeliverer(deliverer) {
     assert(!this.messageDeliverer_, 'message deliverer can only be set once');