Merge pull request #923 from dvoytenko/experiments2

Experiments.html page for our CDN

build-system/tasks/presubmit-checks.js

@@ -50,6 +50,15 @@ var forbiddenTerms = {
       'src/cookies.js',
       'src/experiments.js',
       'test/functional/test-cookies.js',
+      'tools/experiments/experiments.js',
+    ]
+  },
+  'setCookie\\W': {
+    message: requiresReviewPrivacy,
+    whitelist: [
+      'src/cookies.js',
+      'test/functional/test-cookies.js',
+      'tools/experiments/experiments.js',
     ]
   },
   'eval\\(': '',

gulpfile.js

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+var argv = require('minimist')(process.argv.slice(2));
 var autoprefixer = require('autoprefixer');
 var babel = require('babelify');
 var browserify = require('browserify');
@@ -264,6 +265,7 @@ function dist() {
   process.env.NODE_ENV = 'production';
   compile(false, true);
   buildExtensions({minify: true});
+  buildExperiments({minify: true, watch: false});
 }
 
 /**
@@ -442,6 +444,68 @@ function compileJs(srcDir, srcFilename, destDir, options) {
   }
 }
 
+/**
+ * Build all the AMP experiments.html/js.
+ *
+ * @param {!Object} options
+ */
+function buildExperiments(options) {
+  options = options || {};
+  console.log('Bundling experiments.html/js');
+
+  function copyHandler(name, err) {
+    if (err) {
+      return util.log(util.colors.red('copy error: ', err));
+    }
+    util.log(util.colors.green('copied ' + name));
+  }
+
+  var path = 'tools/experiments';
+  var htmlPath = path + '/experiments.html';
+  var jsPath = path + '/experiments.js';
+  var watch = options.watch;
+  if (watch === undefined) {
+    watch = argv.watch || argv.w;
+  }
+
+  // Building extensions is a 2 step process because of the renaming
+  // and CSS inlining. This watcher watches the original file, copies
+  // it to the destination and adds the CSS.
+  if (watch) {
+    // Do not set watchers again when we get called by the watcher.
+    var copy = Object.create(options);
+    copy.watch = false;
+    gulpWatch(path + '/*', function() {
+      buildExperiments(copy);
+    });
+  }
+
+  // Build HTML.
+  console.log('Processing ' + htmlPath);
+  var html = fs.readFileSync(htmlPath, 'utf8');
+  var minHtml = html.replace('../../dist/experiments/experiments.max.js',
+      'https://cdn.ampproject.org/experiments.js');
+  gulp.src(htmlPath)
+      .pipe(file('experiments.cdn.html', minHtml))
+      .pipe(gulp.dest('dist/experiments/'));
+
+  // Build JS.
+  var js = fs.readFileSync(jsPath, 'utf8');
+  var builtName = 'experiments.max.js';
+  var minifiedName = 'experiments.js';
+  return gulp.src(path + '/*.js')
+      .pipe(file(builtName, js))
+      .pipe(gulp.dest('build/experiments/'))
+      .on('end', function() {
+        compileJs('build/experiments/', builtName, 'dist/experiments/', {
+          watch: false,
+          minify: options.minify || argv.minify,
+          minifiedName: minifiedName,
+        });
+      });
+}
+
+
 /**
  * Gulp tasks
  */
@@ -451,3 +515,4 @@ gulp.task('default', 'Same as "watch"', ['watch', 'serve']);
 gulp.task('dist', 'Build production binaries', dist);
 gulp.task('extensions', 'Build AMP Extensions', buildExtensions);
 gulp.task('watch', 'Watches for changes in files, re-build', watch);
+gulp.task('build-experiments', 'Builds experiments.html/js', buildExperiments);

src/cookies.js

@@ -44,3 +44,19 @@ export function getCookie(win, name) {
   }
   return null;
 }
+
+/**
+ * Sets the value of the cookie. The cookie access is restricted and must
+ * go through the privacy review. Before using this method please file a
+ * GitHub issue with "Privacy Review" label.
+ *
+ * @param {!Window} win
+ * @param {string} name
+ * @param {string} value
+ * @param {time} expirationTime
+ */
+export function setCookie(win, name, value, expirationTime) {
+  win.document.cookie = encodeURIComponent(name) + '=' +
+      encodeURIComponent(value) +
+      '; expires=' + new Date(expirationTime).toUTCString();
+}

test/functional/test-cookies.js

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {getCookie} from '../../src/cookies';
+import {getCookie, setCookie} from '../../src/cookies';
 
 
 describe('getCookie', () => {
@@ -49,4 +49,11 @@ describe('getCookie', () => {
   it('should return an unescaped value', () => {
     expectCookie('c1=1%26', 'c1').to.equal('1&');
   });
+
+  it('should write the cookie', () => {
+    const doc = {};
+    setCookie({document: doc}, 'c&1', 'v&1', 1447383159853);
+    expect(doc.cookie).to.equal(
+        'c%261=v%261; expires=Fri, 13 Nov 2015 02:52:39 GMT');
+  });
 });

tools/experiments/README.md

@@ -0,0 +1,10 @@
+# AMP Experiments
+
+The features that are released but not yet ready for the wide use are protected
+by the experiment. The developers and users can opt-in into these features
+before they are fully released.
+
+Experiments UI is a available at:
+
+[https://cdn.ampproject.org/experiments.js](https://cdn.ampproject.org/experiments.js)
+

tools/experiments/experiments.html

@@ -0,0 +1,114 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>AMP Experiments</title>
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async src="../../dist/experiments/experiments.max.js"></script>
+  <style>
+    body {
+      max-width: 600px;
+      margin: auto;
+      font-family: Roboto, verdana, arial, sans-serif;
+    }
+
+    .header-title {
+      color: #1b1464;
+      font-family: Roboto, verdana, arial, sans-serif;
+      letter-spacing: 2px;
+      padding-left: 0;
+      padding-top: 18px;
+      text-transform: uppercase;
+      width: 10%;
+      display: inline-block;
+      padding: 10px 15px;
+      text-decoration: none;
+    }
+
+    .hero {
+      padding: 16px;
+      background-color: #147bc1;
+      color: #fff;
+    }
+
+    .content {
+      margin: 16px;
+      display: block;
+    }
+
+    .desc {
+      padding: 16px;
+      display: block;
+      color: orange;
+    }
+
+    a {
+      color: #3ab3eb;
+      text-decoration: none;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+
+    td {
+      padding: 4px;
+    }
+
+    .button-cell {
+      text-align: center;
+    }
+
+    button {
+      min-width: 60px;
+    }
+
+    tr[data-on='0'] button {
+      background: #aaa;
+      color: #777;
+    }
+
+    tr[data-on='1'] button {
+      background: green;
+      color: #fff;
+    }
+
+    .on, .off {
+      display: none;
+    }
+
+    tr[data-on='0'] .off {
+      display: block;
+    }
+
+    tr[data-on='1'] .on {
+      display: block;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <div class="tab header-title">
+      Accelerated
+      Mobile
+      Pages
+      Project
+    </div>
+  </header>
+
+  <section class="hero">
+    <h1>AMP Experiments</h1>
+  </section>
+
+  <section class="desc">
+    Please excercise caution. These features are not yet release to the public.
+    Some of these features might still be in the security or privacy reviews.
+    Please consult the documentation for each specific feature for details.
+  </section>
+
+  <section class="content">
+    <table id="experiments-table" border=1></table>
+  </section>
+</body>
+</html>