Merge with master

material-components · Aug 29, 2018 · 38e6c72 · 38e6c72
2 parents 6d64c19 + b10095f
commit 38e6c72
Show file tree

Hide file tree

Showing 76 changed files with 2,019 additions and 630 deletions.
diff --git a/packages/mdc-dialog/README.md b/packages/mdc-dialog/README.md
@@ -161,6 +161,12 @@ a `mdc-dialog__body--scrollable` modifier to allow scrolling in the dialog.
 Note that unlike the css classnames, the specific ID names used do not have to be _exactly_ the same as listed above.
 They only need to match the values set for their corresponding aria attributes.
 
+### Styles
+
+```scss
+@import "@material/dialog/mdc-dialog";
+```
+
 ### Dialog Action Color ###
 
 Dialog actions use system colors by default, but you can use a contrasting color, such as the palette’s secondary color, to distinguish dialog actions from dialog content. To emphasize an action from other contents, add `mdc-dialog__action` to `mdc-button` to apply secondary color.

diff --git a/packages/mdc-drawer/modal/mdc-drawer-modal.scss b/packages/mdc-drawer/modal/mdc-drawer-modal.scss
@@ -35,7 +35,7 @@
   position: fixed;
 
   &.mdc-drawer--open {
-    display: block;
+    display: flex;
   }
 }
 

diff --git a/packages/mdc-textfield/_variables.scss b/packages/mdc-textfield/_variables.scss
@@ -19,7 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 //
-$mdc-text-field-error: #b00020;
+$mdc-text-field-error: error;
 $mdc-text-field-fullwidth-bottom-line-color: rgba(mdc-theme-prop-value(on-surface), .12);
 $mdc-text-field-disabled-border: rgba(mdc-theme-prop-value(on-surface), .06);
 $mdc-text-field-disabled-icon: rgba(mdc-theme-prop-value(on-surface), .3);

diff --git a/packages/mdc-theme/_variables.scss b/packages/mdc-theme/_variables.scss
@@ -41,6 +41,9 @@ $mdc-theme-background: #fff !default; // White
 $mdc-theme-surface: #fff !default;
 $mdc-theme-on-surface: if(mdc-theme-contrast-tone($mdc-theme-surface) == "dark", #000, #fff) !default;
 
+$mdc-theme-error: #b00020;
+$mdc-theme-on-error: #fff;
+
 //
 // Text colors according to light vs dark and text type.
 //
@@ -87,9 +90,12 @@ $mdc-theme-property-values: (
   background: $mdc-theme-background,
   // Surface
   surface: $mdc-theme-surface,
+  // Error
+  error: $mdc-theme-error,
   on-primary: $mdc-theme-on-primary,
   on-secondary: $mdc-theme-on-secondary,
   on-surface: $mdc-theme-on-surface,
+  on-error: $mdc-theme-on-error,
   // Text-primary on "background" background
   text-primary-on-background: mdc-theme-ink-color-for-fill_(primary, $mdc-theme-background),
   text-secondary-on-background: mdc-theme-ink-color-for-fill_(secondary, $mdc-theme-background),

diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
diff --git a/test/screenshot/infra/commands/index.js b/test/screenshot/infra/commands/index.js
@@ -125,6 +125,15 @@ class IndexCommand {
         background-color: #eee;
       }
     </style>
+
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'UA-118996389-2');
+    </script>
   </head>
   <body>
     <main class="index-main">

diff --git a/test/screenshot/infra/commands/test.js b/test/screenshot/infra/commands/test.js
@@ -29,6 +29,7 @@ const mdcProto = require('../proto/mdc.pb').mdc.proto;
 const GitRevision = mdcProto.GitRevision;
 const InclusionType = mdcProto.Screenshot.InclusionType;
 
+const Analytics = require('../lib/analytics');
 const BuildCommand = require('./build');
 const Cli = require('../lib/cli');
 const CliColor = require('../lib/logger').colors;
@@ -44,6 +45,7 @@ const {ExitCode} = require('../lib/constants');
 // TODO(acdvorak): Refactor most of this class out into a separate file
 class TestCommand {
   constructor() {
+    this.analytics_ = new Analytics();
     this.cli_ = new Cli();
     this.diffBaseParser_ = new DiffBaseParser();
     this.gitHubApi_ = new GitHubApi();
@@ -278,7 +280,11 @@ class TestCommand {
    * @private
    */
   getPrComment_({masterDiffReportData, snapshotGitRev}) {
-    const masterReportPageUrl = masterDiffReportData.meta.report_html_file.public_url;
+    const masterReportPageUrl = this.analytics_.getUrl({
+      url: masterDiffReportData.meta.report_html_file.public_url,
+      source: 'github',
+      type: 'pr_comment',
+    });
     const masterScreenshots = masterDiffReportData.screenshots;
     const masterGitRev = masterDiffReportData.meta.golden_diff_base.git_revision;
 
@@ -291,7 +297,7 @@ class TestCommand {
 
     if (numChanged === 0) {
       const range = `commit ${snapshotGitRev.commit} vs. \`${masterGitRev.branch}\``;
-      return `**All ${numTotal} screenshot tests passed** for ${range}! 💯🎉`;
+      return `**All [${numTotal} screenshot tests](${masterReportPageUrl}) passed** for ${range}! 💯🎉`;
     }
 
     const listMarkdown = [
@@ -306,7 +312,6 @@ class TestCommand {
       ),
     ].filter((str) => Boolean(str)).join('\n\n');
 
-
     return `
 🤖 Beep boop!
 
@@ -341,7 +346,11 @@ ${listMarkdown}
     const listItemMarkdown = Object.entries(screenshotMap).map(([htmlFilePath, screenshotList]) => {
       const browserIconMarkup = this.getAllBrowserIcons_(screenshotList.screenshots);
       const firstScreenshot = screenshotList.screenshots[0];
-      const htmlFileUrl = (firstScreenshot.actual_html_file || firstScreenshot.expected_html_file).public_url;
+      const htmlFileUrl = this.analytics_.getUrl({
+        url: (firstScreenshot.actual_html_file || firstScreenshot.expected_html_file).public_url,
+        source: 'github',
+        type: 'pr_comment',
+      });
 
       return `
 * [\`${htmlFilePath}\`](${htmlFileUrl}) ${browserIconMarkup}
@@ -373,7 +382,11 @@ ${listItemMarkdown}
    */
   getOneBrowserIcon_(screenshot) {
     const imgFile = screenshot.diff_image_file || screenshot.actual_image_file || screenshot.expected_image_file;
-    const linkUrl = imgFile.public_url;
+    const linkUrl = this.analytics_.getUrl({
+      url: imgFile.public_url,
+      source: 'github',
+      type: 'pr_comment',
+    });
 
     const untrimmed = `
 <a href="${linkUrl}"
@@ -473,7 +486,11 @@ ${CliColor.bold.magenta('Skipping screenshot tests.')}
     const snapshotDisplayName = this.getDisplayName_(reportData.meta.snapshot_diff_base);
 
     const changedMsg = `${numChanges} screenshot${numChanges === 1 ? '' : 's'} changed!`;
-    const reportPageUrl = reportData.meta.report_html_file.public_url;
+    const reportPageUrl = this.analytics_.getUrl({
+      url: reportData.meta.report_html_file.public_url,
+      source: 'cli',
+      type: 'test_results',
+    });
 
     const headingPlain = 'Screenshot Test Results';
     const headingColor = CliColor.bold(headingPlain);

diff --git a/test/screenshot/infra/lib/analytics.js b/test/screenshot/infra/lib/analytics.js
@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright 2018 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+'use strict';
+
+require('url-search-params-polyfill');
+
+class Analytics {
+  /**
+   * See:
+   * - https://support.google.com/analytics/answer/1033863?hl=en
+   * - https://ga-dev-tools.appspot.com/campaign-url-builder/
+   * @param {string} url
+   * @param {string} source
+   * @param {string|undefined=} type
+   * @param {string|undefined=} campaign
+   * @param {string|undefined=} medium
+   * @param {!Object<string, string>|undefined=} extraParams
+   * @return {string}
+   */
+  getUrl({
+    url,
+    source,
+    type = undefined,
+    campaign = undefined,
+    medium = undefined,
+    extraParams = undefined,
+  } = {}) {
+    const [resource, oldQuery] = url.split('?');
+    const params = new URLSearchParams(oldQuery);
+    params.set('utm_source', source);
+    if (type) {
+      params.set('utm_content', type);
+    }
+    if (campaign) {
+      params.set('utm_campaign', campaign);
+    }
+    if (medium) {
+      params.set('utm_medium', medium);
+    }
+    if (extraParams) {
+      for (const [key, value] of Object.entries(extraParams)) {
+        params.set(key, value);
+      }
+    }
+    const newQuery = params.toString();
+    if (!newQuery) {
+      return resource;
+    }
+    return `${resource}?${newQuery}`;
+  }
+}
+
+module.exports = Analytics;
diff --git a/test/screenshot/infra/lib/cbt-api.js b/test/screenshot/infra/lib/cbt-api.js
@@ -47,7 +47,7 @@ const SELENIUM_SERVER_URL = `http://${MDC_CBT_USERNAME}:${MDC_CBT_AUTHKEY}@hub.c
 const {ExitCode, SELENIUM_ZOMBIE_SESSION_DURATION_MS} = require('./constants');
 
 /** @type {?Promise<!Array<!cbt.proto.CbtDevice>>} */
-let allBrowsersPromise;
+let allDevicesPromise;
 
 class CbtApi {
   constructor() {
@@ -136,21 +136,21 @@ https://crossbrowsertesting.com/account
    * @return {!Promise<!Array<!cbt.proto.CbtDevice>>}
    */
   async fetchAvailableDevices() {
-    if (allBrowsersPromise) {
-      return allBrowsersPromise;
+    if (allDevicesPromise) {
+      return allDevicesPromise;
     }
 
-    this.logger_.debug('Fetching browsers from CBT...');
+    this.logger_.debug('Fetching devices and browsers from CBT...');
 
     const stackTrace = getStackTrace('fetchAvailableDevices');
-    allBrowsersPromise = this.sendRequest_(stackTrace, 'GET', '/selenium/browsers');
+    allDevicesPromise = this.sendRequest_(stackTrace, 'GET', '/selenium/browsers');
 
     /** @type {!Array<!cbt.proto.CbtDevice>} */
-    const allBrowsers = await allBrowsersPromise;
+    const allDevices = await allDevicesPromise;
 
-    this.logger_.debug(`Fetched ${allBrowsers.length} browsers from CBT!`);
+    this.logger_.debug(`Fetched ${allDevices.length} devices from CBT!`);
 
-    return allBrowsers;
+    return allDevices;
   }
 
   /**

diff --git a/test/screenshot/infra/lib/cli.js b/test/screenshot/infra/lib/cli.js
@@ -29,6 +29,7 @@ const {ApprovalId} = mdcProto;
 const argparse = require('argparse');
 const checkIsOnline = require('is-online');
 
+const CliColor = require('./logger').colors;
 const Duration = require('./duration');
 const {GOLDEN_JSON_RELATIVE_PATH} = require('./constants');
 
@@ -66,6 +67,21 @@ class Cli {
     this.args_ = this.rootParser_.parseArgs();
   }
 
+  /**
+   * @param {string} url
+   * @return {string}
+   */
+  colorizeUrl(url) {
+    return url.replace(/^([^?]+)(\?.*)?$/, (substring, resourcePlain, queryPlain) => {
+      const resourceColor = CliColor.reset(resourcePlain);
+      if (queryPlain) {
+        const queryColor = CliColor.gray(queryPlain);
+        return `${resourceColor}${queryColor}`;
+      }
+      return resourceColor;
+    });
+  }
+
   /**
    * @return {!Promise<boolean>}
    */

diff --git a/test/screenshot/infra/lib/github-api.js b/test/screenshot/infra/lib/github-api.js
@@ -25,11 +25,13 @@ const VError = require('verror');
 const debounce = require('debounce');
 const octokit = require('@octokit/rest');
 
+const Analytics = require('./analytics');
 const GitRepo = require('./git-repo');
 const getStackTrace = require('./stacktrace')('GitHubApi');
 
 class GitHubApi {
   constructor() {
+    this.analytics_ = new Analytics();
     this.gitRepo_ = new GitRepo();
     this.octokit_ = octokit();
     this.isTravis_ = process.env.TRAVIS === 'true';
@@ -146,7 +148,11 @@ class GitHubApi {
         description = `${numChanged.toLocaleString()} screenshots differ from PR's golden.json`;
       }
 
-      targetUrl = meta.report_html_file.public_url;
+      targetUrl = this.analytics_.getUrl({
+        url: reportFileUrl,
+        source: 'github',
+        type: 'pr_status',
+      });
     } else {
       const runnableScreenshots = screenshots.runnable_screenshot_list;
       const numTotal = runnableScreenshots.length;

diff --git a/test/screenshot/infra/lib/golden-file.js b/test/screenshot/infra/lib/golden-file.js
@@ -26,11 +26,19 @@
 const mdcProto = require('../proto/mdc.pb').mdc.proto;
 const {GoldenScreenshot, GoldenSuite, TestFile} = mdcProto;
 
+const Analytics = require('./analytics');
+
 class GoldenFile {
   /**
    * @param {!mdc.proto.GoldenSuite=} suiteJson
    */
   constructor(suiteJson = GoldenSuite.create()) {
+    /**
+     * @type {!Analytics}
+     * @private
+     */
+    this.analytics_ = new Analytics();
+
     /**
      * @type {!mdc.proto.GoldenSuite}
      * @private
@@ -94,6 +102,10 @@ class GoldenFile {
       };
     }
 
+    this.suiteJson_[htmlFilePath].public_url = this.analytics_.getUrl({
+      url: htmlFileUrl,
+      source: 'golden_json',
+    });
     this.suiteJson_[htmlFilePath].screenshots[userAgentAlias] = screenshotImageUrl;
   }
 

diff --git a/test/screenshot/infra/lib/report-builder.js b/test/screenshot/infra/lib/report-builder.js
@@ -37,6 +37,7 @@ const {Approvals, DiffImageResult, Dimensions, FlakeConfig, GitStatus, GoldenScr
 const {ReportData, ReportMeta, Screenshot, Screenshots, ScreenshotList, TestFile, User, UserAgents} = mdcProto;
 const {InclusionType, CaptureState} = Screenshot;
 
+const Analytics = require('./analytics');
 const CbtApi = require('./cbt-api');
 const Cli = require('./cli');
 const DiffBaseParser = require('./diff-base-parser');
@@ -54,6 +55,12 @@ const TEMP_DIR = os.tmpdir();
 
 class ReportBuilder {
   constructor() {
+    /**
+     * @type {!Analytics}
+     * @private
+     */
+    this.analytics_ = new Analytics();
+
     /**
      * @type {!CbtApi}
      * @private
@@ -979,8 +986,12 @@ class ReportBuilder {
     if (count > 0) {
       for (const screenshot of screenshots) {
         const htmlFile = screenshot.actual_html_file || screenshot.expected_html_file;
-        const publicUrl = htmlFile.public_url;
-        console.log(`  - ${publicUrl} > ${screenshot.user_agent.alias}`);
+        const publicUrl = this.analytics_.getUrl({
+          url: htmlFile.public_url,
+          source: 'cli',
+          type: 'inventory',
+        });
+        console.log(`  - ${this.cli_.colorizeUrl(publicUrl)} > ${screenshot.user_agent.alias}`);
       }
     }
     console.log();