Merge branch 'master' into release

.travis.yml

@@ -22,5 +22,10 @@ script:
   - gulp build
   - gulp dist
   - gulp presubmit
+  # Unit tests with Travis' default chromium
   - gulp test
+  # Integration tests with all saucelabs browsers
   - gulp test --saucelabs --integration
+  # All unit tests with an old chrome (best we can do right now to pass tests
+  # and not start relying on new features).
+  - gulp test --saucelabs --oldchrome

3p/README.md

@@ -60,4 +60,4 @@ Review the [ads/README](../ads/README.md) for further details on ad integration.
 - JavaScript can not be involved with the initiation of font loading.
 - Font loading gets controlled (but not initiated) by [`<amp-font>`](https://github.com/ampproject/amphtml/issues/648).
 - AMP by default does not allow inclusion of external stylesheets, but it is happy to whitelist URL prefixes of font providers for font inclusion via link tags. These link tags and their fonts must be served via HTTPS.
-- If a font provider does referrer based "security" it needs to whitelist the AMP proxy origins before being included in the link tag whitelist.
+- If a font provider does referrer based "security" it needs to whitelist the AMP proxy origins before being included in the link tag whitelist. AMP proxy sends the appropriate referrer header such as "https://cdn.ampproject.org".

CONTRIBUTORS

@@ -7,4 +7,5 @@ Jake Moening
 Jordan Adler
 Kent Brewster
 Malte Ubl
+Niall Kennedy
 Taylor Savage

DEVELOPING.md

@@ -126,4 +126,13 @@ In particular, we try to maintain "it might not be perfect but isn't broken"-sup
 
 We also recommend scanning the [spec](spec/). The non-element part should help understand some of the design aspects.
 
+## AMP Dev Channel (Experimental)
+
+AMP Dev Channel is a way to opt a browser into using a newer version of the AMP JS libraries.
+
+This release may be less stable and it may contain features not available to all users. Opt into this option if you'd like to help test new versions of AMP, report bugs or build documents that require a new feature that is not yet available to everyone.
+
+To opt your browser into the AMP Dev Channel, go to [the AMP experiments page](https://cdn.ampproject.org/experiments.html) and activate the "AMP Dev Channel" experiment.
+
+
 ## [Code of conduct](CODE_OF_CONDUCT.md)

ads/README.md

@@ -34,6 +34,7 @@ We will provide the following information to the ad:
   In browsers that support `location.ancestorOrigins` you can trust that the `origin` of the
   location is actually correct (So rogue pages cannot claim they represent an origin they do not actually represent).
 - `window.context.canonicalUrl` contains the canonical URL of the primary document as defined by its `link rel=canonical` tag.
+- `window.context.pageViewId` contains a relatively low entropy id that is the same for all ads shown on a page.
 - [ad viewability](#ad-viewability)
 - `window.context.noContentAvailable` is a function that the ad system can call if the ad slot was not filled. The container page will then react by showing placeholder content (not by collapsing the ad slot; sizing rules apply).
 

build-system/tasks/presubmit-checks.js

@@ -68,6 +68,7 @@ var forbiddenTerms = {
       'src/cookies.js',
       'src/experiments.js',
       'test/functional/test-cookies.js',
+      'tools/experiments/experiments.js',
     ]
   },
   'setCookie\\W': {
@@ -76,6 +77,7 @@ var forbiddenTerms = {
       'src/cookies.js',
       'src/experiments.js',
       'test/functional/test-cookies.js',
+      'tools/experiments/experiments.js',
     ]
   },
   'eval\\(': '',
@@ -184,6 +186,7 @@ var forbiddenTermsSrcInclusive = {
   '\\.getBBox(?!_)': bannedTermsHelpString,
   '\\.webkitConvertPointFromNodeToPage(?!_)': bannedTermsHelpString,
   '\\.webkitConvertPointFromPageToNode(?!_)': bannedTermsHelpString,
+  '\\.changeHeight(?!_)': bannedTermsHelpString,
 };
 
 // Terms that must appear in a source file.

build-system/tasks/test.js

@@ -42,7 +42,10 @@ function getConfig() {
     if (!process.env.SAUCE_ACCESS_KEY) {
       throw new Error('Missing SAUCE_ACCESS_KEY Env variable');
     }
-    return extend(obj, karmaConfig.saucelabs);
+    const c = extend(obj, karmaConfig.saucelabs);
+    if (argv.oldchrome) {
+      c.browsers = ['SL_Chrome_37']
+    }
   }
 
   return extend(obj, karmaConfig.default);
@@ -89,6 +92,7 @@ gulp.task('test', 'Runs tests in chrome', ['build'], function(done) {
     'saucelabs': '  Runs test on saucelabs (requires setup)',
     'safari': '  Runs tests in Safari',
     'firefox': '  Runs tests in Firefox',
-    'integration': 'Run only integration tests.'
+    'integration': 'Run only integration tests.',
+    'oldchrome': 'Runs test with an old chrome. Saucelabs only.',
   }
 });

builtins/amp-ad.js

@@ -139,7 +139,9 @@ export function installAd(win) {
      * @override
      */
     isReadyToBuild() {
-      return this.element.firstChild != null;
+      // TODO(dvoytenko, #1014): Review and try a more immediate approach.
+      // Wait until DOMReady.
+      return false;
     }
 
     /** @override */

builtins/amp-pixel.js

@@ -16,7 +16,7 @@
 
 import {BaseElement} from '../src/base-element';
 import {Layout} from '../src/layout';
-import {UrlReplacements} from '../src/url-replacements';
+import {urlReplacementsFor} from '../src/url-replacements';
 import {assert} from '../src/asserts';
 import {registerElement} from '../src/custom-element';
 
@@ -27,10 +27,6 @@ import {registerElement} from '../src/custom-element';
  * @return {undefined}
  */
 export function installPixel(win) {
-
-  /** @const {!UrlReplacements} */
-  const urlReplacements = new UrlReplacements(win);
-
   class AmpPixel extends BaseElement {
     /** @override */
     isLayoutSupported(layout) {
@@ -49,7 +45,7 @@ export function installPixel(win) {
     /** @override */
     layoutCallback() {
       let src = this.element.getAttribute('src');
-      src = urlReplacements.expand(this.assertSource(src));
+      src = urlReplacementsFor(this.getWin()).expand(this.assertSource(src));
       const image = new Image();
       image.src = src;
       image.width = 1;

css/amp.css

@@ -267,16 +267,18 @@ i-amp-scroll-container {
 
 
 /**
- * `-amp-overflow` is a support for "overflow" element. This is
- * an element shown when more content is available. Typically tapping on this
- * element shows the full content.
+ * "overflow" element is an element shown when more content is available but
+ * not currently visible. Typically tapping on this element shows the full
+ * content.
  */
-.-amp-overflow {
-  z-index: 1;
+.-amp-element > [overflow] {
+  cursor: pointer;
+  z-index: 2;
+  visibility: hidden;
 }
 
-.-amp-overflow.amp-hidden {
-  visibility: hidden;
+.-amp-element > [overflow].amp-visible {
+  visibility: visible;
 }
 
 

examples/everything.amp.html

@@ -197,7 +197,7 @@ <h2>Audio</h2>
 
   <amp-lightbox id="lightbox1" class="lightbox1" layout="nodisplay">
     <div class="lightbox1-content">
-      <amp-img id="img0" src="https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w452-h900-p/PANO_20150726_171347%257E2.jpg" width=226 height=450 layout="responsive"></amp-img>
+      <amp-img id="img0" src="https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w452-h900-p/PANO_20150726_171347%257E2.jpg" width=226 height=450 layout="responsive" on="tap:lightbox1.close"></amp-img>
     </div>
   </amp-lightbox>
 

examples/vine.amp.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Vine examples</title>
+  <link rel="canonical" href="amps.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
+  <script async custom-element="amp-vine" src="https://cdn.ampproject.org/v0/amp-vine-0.1.js"></script>
+  <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <h2>Vine</h2>
+
+  <amp-vine
+    data-vineid="MdKjXez002d"
+    width="381"
+    height="381"
+    layout="responsive">
+  </amp-vine>
+
+  <amp-vine
+    data-vineid="e2eTlxAYvqO"
+    width="400"
+    height="400"
+    layout="responsive">
+  </amp-vine>
+</body>
+</html>

extensions/README.md

@@ -24,12 +24,13 @@ Current list of extended components:
 | [`amp-fit-text`](amp-fit-text/amp-fit-text.md)                | Expand or shrink font size to fit the content within the space given.                       |
 | [`amp-font`](amp-font/amp-font.md)                | Trigger and monitor the loading of custom fonts.                       |
 | [`amp-iframe`](amp-iframe/amp-iframe.md)                 | Displays an iframe.                                                                         |
-| [`amp-install-serviceworker`](amp-install-serviceworker/amp-install-serviceworker.md)               | Installs a ServiceWorker.
 | [`amp-image-lightbox`](amp-image-lightbox/amp-image-lightbox.md) | Allows for a “image lightbox” or similar experience.                                        |
 | [`amp-instagram`](amp-instagram/amp-instagram.md)           | Displays an instagram embed.                                                                |
+| [`amp-install-serviceworker`](amp-install-serviceworker/amp-install-serviceworker.md)               | Installs a ServiceWorker.
 | [`amp-lightbox`](amp-lightbox/amp-lightbox.md)             | Allows for a “lightbox” or similar experience.                                              |
 | [`amp-list`](amp-list/amp-list.md)             | A dynamic list that can download data and create list items using a template |
 | [`amp-twitter`](amp-twitter/amp-twitter.md)               | Displays a Twitter Tweet.                                                                   |
+| [`amp-vine`](amp-vine/amp-vine.md)               | Displays a Vine simple embed.                                                                   |
 | [`amp-youtube`](amp-youtube/amp-youtube.md)               | Displays a Youtube video.                                                                   |
 
 

extensions/amp-carousel/0.1/base-carousel.js

@@ -120,7 +120,9 @@ export class BaseCarousel extends AMP.BaseElement {
    * @override
    */
   isReadyToBuild() {
-    return this.getRealChildren().length > 0;
+    // TODO(dvoytenko, #1014): Review and try a more immediate approach.
+    // Wait until DOMReady.
+    return false;
   }
 
   /**

extensions/amp-font/0.1/fontloader.js

@@ -151,7 +151,7 @@ export class FontLoader {
       // Create DOM elements
       this.createElements_();
       // Measure until timeout (or font load).
-      const vsyncTask = {
+      const vsyncTask = vsync.createTask({
         measure: () => {
           if (this.fontLoadResolved_) {
             resolve();
@@ -160,13 +160,11 @@ export class FontLoader {
           } else if (this.compareMeasurements_()) {
             resolve();
           } else {
-            vsync.run(vsyncTask);
+            vsyncTask();
           }
-        },
-        mutate: () => {}
-      };
-      // TODO(dvoytenko): Fix https://github.com/ampproject/amphtml/issues/839.
-      vsync.run(vsyncTask);
+        }
+      });
+      vsyncTask();
     });
   }
 

extensions/amp-iframe/0.1/amp-iframe.js

@@ -106,12 +106,6 @@ class AmpIframe extends AMP.BaseElement {
 
   /** @override */
   buildCallback() {
-    /** @private {?Element} */
-    this.overflowElement_ = childElementByAttr(this.element, 'overflow');
-    if (this.overflowElement_) {
-      this.overflowElement_.classList.add('-amp-overflow');
-      this.overflowElement_.classList.toggle('amp-hidden', true);
-    }
   }
 
   /** @override */
@@ -142,7 +136,7 @@ class AmpIframe extends AMP.BaseElement {
     this.isResizable_ = this.element.hasAttribute('resizable');
     if (this.isResizable_) {
       this.element.setAttribute('scrolling', 'no');
-      assert(this.overflowElement_,
+      assert(this.getOverflowElement(),
           'Overflow element must be defined for resizable frames: %s',
           this.element);
     }
@@ -183,14 +177,7 @@ class AmpIframe extends AMP.BaseElement {
           this.element);
       return;
     }
-    this.requestChangeHeight(newHeight, actualHeight => {
-      assert(this.overflowElement_);
-      this.overflowElement_.classList.toggle('amp-hidden', false);
-      this.overflowElement_.onclick = () => {
-        this.overflowElement_.classList.toggle('amp-hidden', true);
-        this.changeHeight(actualHeight);
-      };
-    });
+    this.requestChangeHeight(newHeight);
   }
 };
 

extensions/amp-iframe/0.1/test/test-amp-iframe.js

@@ -300,16 +300,6 @@ describe('amp-iframe', () => {
       expect(impl.changeHeight.callCount).to.equal(0);
       expect(impl.requestChangeHeight.callCount).to.equal(1);
       expect(impl.requestChangeHeight.firstCall.args[0]).to.equal(217);
-
-      const fallback = impl.requestChangeHeight.firstCall.args[1];
-      fallback(219);
-      expect(impl.overflowElement_).to.not.be.null;
-      expect(impl.overflowElement_).to.have.class('-amp-overflow');
-      expect(impl.overflowElement_).to.not.have.class('amp-hidden');
-      impl.overflowElement_.onclick();
-      expect(impl.overflowElement_).to.have.class('amp-hidden');
-      expect(impl.changeHeight.callCount).to.equal(1);
-      expect(impl.changeHeight.firstCall.args[0]).to.equal(219);
     });
   });
 

extensions/amp-image-lightbox/0.1/amp-image-lightbox.js

@@ -706,6 +706,11 @@ class AmpImageLightbox extends AMP.BaseElement {
     this.reset_();
     this.init_(source);
 
+    /**  @private {function(this:AmpImageLightbox, Event)}*/
+    this.boundCloseOnEscape_ = this.closeOnEscape_.bind(this);
+    this.getWin().document.documentElement.addEventListener(
+        'keydown', this.boundCloseOnEscape_);
+
     // Prepare to enter in lightbox
     this.requestFullOverlay();
     this.getViewport().disableTouchZoom();
@@ -723,6 +728,17 @@ class AmpImageLightbox extends AMP.BaseElement {
     });
   }
 
+  /**
+   * Handles closing the lightbox when the ESC key is pressed.
+   * @param {!Event} event.
+   * @private
+   */
+  closeOnEscape_(event) {
+    if (event.keyCode == 27) {
+      this.close();
+    }
+  }
+
   /**
    * Closes the lightbox.
    */
@@ -745,6 +761,9 @@ class AmpImageLightbox extends AMP.BaseElement {
     if (this.historyId_ != -1) {
       this.getHistory_().pop(this.historyId_);
     }
+    this.getWin().document.documentElement.removeEventListener(
+        'keydown', this.boundCloseOnEscape_);
+    this.boundCloseOnEscape_ = null;
   }
 
   /**