Code review fixes

2019-04-12 15:11:53 -07:00 · 2019-04-12 15:11:53 -07:00 · 0c89f203a6
--- a/.eslintrc
+++ b/.eslintrc
@ -5,7 +5,8 @@
    "es6": true
  },
  "parserOptions": {
-    "ecmaVersion": 8
+    "ecmaVersion": 8,
+    "sourceType": "module"
  },
  "rules": {
    "no-warning-comments": "off",
--- a/.gitignore
+++ b/.gitignore
@ -15,9 +15,9 @@ static/js/**/*.es6.min.js
 *.iml
 .idea/*
 bulkloader-*
-css/
+static/css/
 static/dist/
 cookie
 lib
 env_vars.yaml
-component-bundle.js
+component-bundle.js
--- a/README.md
+++ b/README.md
@ -80,7 +80,7 @@ of globals for debugging and running the site locally.
 #### Build all web components

 ```shell
-npm run watch-components
+npm run build
 ```

 #### Deploy
--- a/package-lock.json
+++ b/package-lock.json
@ -5660,6 +5660,27 @@
      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
      "dev": true
    },
+    "jest-worker": {
+      "version": "24.6.0",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-24.6.0.tgz",
+      "integrity": "sha512-jDwgW5W9qGNvpI1tNnvajh0a5IE/PuGLFmHk6aR/BZFz8tSgGw17GsDPXAJ6p91IvYDjOw8GpFbvvZGAK+DPQQ==",
+      "dev": true,
+      "requires": {
+        "merge-stream": "1.0.1",
+        "supports-color": "6.1.0"
+      },
+      "dependencies": {
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
    "js-base64": {
      "version": "2.5.1",
      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
@ -7755,6 +7776,18 @@
        "resolve": "1.10.0"
      }
    },
+    "rollup-plugin-terser": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-4.0.4.tgz",
+      "integrity": "sha512-wPANT5XKVJJ8RDUN0+wIr7UPd0lIXBo4UdJ59VmlPCtlFsE20AM+14pe+tk7YunCsWEiuzkDBY3QIkSCjtrPXg==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "7.0.0",
+        "jest-worker": "24.6.0",
+        "serialize-javascript": "1.6.1",
+        "terser": "3.17.0"
+      }
+    },
    "rollup-pluginutils": {
      "version": "2.6.0",
      "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.6.0.tgz",
@ -7861,6 +7894,12 @@
        "sver-compat": "1.5.0"
      }
    },
+    "serialize-javascript": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-1.6.1.tgz",
+      "integrity": "sha512-A5MOagrPFga4YaKQSWHryl7AXvbQkEqpw4NNYMTNYUNV51bA8ABHgYFpqKx+YFFrw59xMV1qGH1R4AgoNIVgCw==",
+      "dev": true
+    },
    "serviceworker-cache-polyfill": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/serviceworker-cache-polyfill/-/serviceworker-cache-polyfill-4.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -10,11 +10,10 @@
    "postinstall": "npm run deps && npm run build",
    "deps": "rm -rf static/bower_components && bower install && pip install -t lib -r requirements.txt",
    "lint": "gulp lint",
-    "build": "gulp",
+    "build": "gulp && rollup -c",
    "deploy": "./scripts/deploy_site.sh",
    "start": "./scripts/start_server.sh",
-    "build-components": "rollup -c",
-    "watch-components": "rollup -c -w"
+    "watch": "rollup -c -w"
  },
  "repository": {
    "type": "git",
@ -50,8 +49,8 @@
    "lighthouse-ci": "https://github.com/ebidel/lighthouse-ci",
    "load-grunt-tasks": "^4.0.0",
    "rollup": "^1.9.0",
-    "rollup-plugin-commonjs": "^9.3.4",
    "rollup-plugin-node-resolve": "^4.2.1",
+    "rollup-plugin-terser": "^4.0.4",
    "sw-precache": "^5.2.1",
    "sw-toolbox": "^3.6.0"
  },
--- a/rollup.config.js
+++ b/rollup.config.js
@ -1,9 +1,6 @@
 import resolve from 'rollup-plugin-node-resolve';
-import commonjs from 'rollup-plugin-commonjs';
-// import { terser } from 'rollup-plugin-terser';
+import { terser } from 'rollup-plugin-terser';

-// `npm run build` -> `production` is true
-// `npm run dev` -> `production` is false
 const production = !process.env.ROLLUP_WATCH;

 export default {
@ -14,8 +11,7 @@ export default {
    sourcemap: true
  },
  plugins: [
-    resolve(), // tells Rollup how to find date-fns in node_modules
-    commonjs(), // converts date-fns to ES modules
-    // production && terser() // minify, but only in production
+    resolve(), // tells Rollup how to find node_modules
+    production && terser() // minify, but only in production
  ]
 };
--- a/templates/metrics/css/animated.html
+++ b/templates/metrics/css/animated.html
@ -0,0 +1,46 @@
+{% extends "base.html" %}
+{% load inline_file %}
+{% block css %}
+<!-- <link rel="stylesheet" href="/static/css/metrics/metrics.css"> -->
+<style>{% inline_file "/static/css/metrics/metrics.css" %}</style>
+{% endblock %}
+
+{% block preload %}
+  {% if VULCANIZE %}
+    <link rel="preload" href="/static/elements/metrics-imports.vulcanize.js" as="script">
+  {% endif %}
+{% endblock %}
+
+{% block html_imports %}
+  <link rel="import" href="/static/elements/metrics-imports{% if VULCANIZE %}.vulcanize{% endif %}.html">
+{% endblock %}
+
+{% block drawer %}
+  {% include "metrics/_nav.html" %}
+{% endblock %}
+
+{% block subheader %}
+<div id="subheader">
+  <h2>CSS usage metrics &gt; animated properties > stack rank</h2>
+</div>
+{% endblock %}
+
+{% block content %}
+<div class="data-panel">
+  <div>
+    <h3>About this data</h3>
+    <p class="description">
+    We've been using Chrome's <a href="https://cs.chromium.org/chromium/src/tools/metrics/histograms/enums.xml" target="_blank">anonymous usage statistics</a> to count the CSS properties which are animated.
+    <b>Percentages on this page indicate the fraction of Chrome page loads that animates the corresponding CSS property (in a transition or animation) at least once</b>. Data is ~24 hrs old and reflects usage across all channels and platforms.</p>
+  </div>
+  <chromedash-metrics type="css" view="animated" {% if not prod %}use-remote-data{% endif %}></chromedash-metrics>
+</div>
+{% endblock %}
+
+{% block js %}
+<script>
+document.addEventListener('WebComponentsReady', function(e) {
+  document.body.classList.remove('loading');
+});
+</script>
+{% endblock %}
--- a/templates/metrics/css/popularity.html
+++ b/templates/metrics/css/popularity.html
@ -0,0 +1,45 @@
+{% extends "base.html" %}
+{% load inline_file %}
+
+{% block css %}
+<!-- <link rel="stylesheet" href="/static/css/metrics/metrics.css"> -->
+<style>{% inline_file "/static/css/metrics/metrics.css" %}</style>
+{% endblock %}
+
+{% block preload %}
+  {% if VULCANIZE %}
+    <link rel="preload" href="/static/elements/metrics-imports.vulcanize.js" as="script">
+  {% endif %}
+{% endblock %}
+
+{% block html_imports %}
+  <link rel="import" href="/static/elements/metrics-imports{% if VULCANIZE %}.vulcanize{% endif %}.html">
+{% endblock %}
+
+{% block drawer %}
+  {% include "metrics/_nav.html" %}
+{% endblock %}
+
+{% block subheader %}
+<div id="subheader">
+  <h2>CSS usage &gt; all properties > stack rank</h2>
+</div>
+{% endblock %}
+
+{% block content %}
+<div class="data-panel">
+  <div>
+    <h3>About this data</h3>
+    <p class="description">We've been using Chrome's <a href="https://cs.chromium.org/chromium/src/tools/metrics/histograms/enums.xml" target="_blank">anonymous usage statistics</a> to count the occurrences of certain CSS features in the wild. The numbers on this page indicate the <b>percentages of Chrome page loads (across all channels and platforms) that use the corresponding CSS property at least once</b>. Data is ~24 hrs old.</p>
+  </div>
+  <chromedash-metrics type="css" view="popularity" {% if not prod %}use-remote-data{% endif %}></chromedash-metrics>
+</div>
+{% endblock %}
+
+{% block js %}
+<script>
+document.addEventListener('WebComponentsReady', function(e) {
+  document.body.classList.remove('loading');
+});
+</script>
+{% endblock %}
--- a/templates/metrics/css/timeline/animated.html
+++ b/templates/metrics/css/timeline/animated.html
@ -0,0 +1,52 @@
+{% extends "base.html" %}
+{% load inline_file %}
+
+{% block css %}
+<!-- <link rel="stylesheet" href="/static/css/metrics/metrics.css"> -->
+<style>{% inline_file "/static/css/metrics/metrics.css" %}</style>
+{% endblock %}
+
+{% block html_imports %}
+  <link rel="import" href="/static/elements/metrics-imports{% if VULCANIZE %}.vulcanize{% endif %}.html">
+{% endblock %}
+
+{% block drawer %}
+  {% include "metrics/_nav.html" %}
+{% endblock %}
+
+{% block subheader %}
+<div id="subheader">
+  <h2>CSS usage metrics &gt; animated properties > timeline</h2>
+</div>
+{% endblock %}
+
+{% block content %}
+<div class="data-panel">
+  <chromedash-feature-timeline
+      type="css" view="animated"
+      title="The % of page loads in which the given CSS property was animated."
+      {% if not prod %}use-remote-data{% endif %}></chromedash-feature-timeline>
+  <p class="callout">
+    <b>Note</b>: on 2017-10-26 the underlying metrics were switched over to a newer collection system
+    which is <a href="https://groups.google.com/a/chromium.org/forum/#!msg/blink-api-owners-discuss/IpIkbz0qtrM/HUCfSMv2AQAJ" target="_blank">more accurate</a>.
+    This is also the reason for the abrupt spike around 2017-10-26.
+  </p>
+</div>
+{% endblock %}
+
+{% block js %}
+<script>
+document.addEventListener('WebComponentsReady', function(e) {
+  var timeline = $('chromedash-feature-timeline');
+  timeline.props = {{CSS_PROPERTY_BUCKETS|safe}};
+
+  document.body.classList.remove('loading');
+
+  window.addEventListener('popstate', function(e) {
+    if (e.state) {
+      timeline.selectedBucketId = e.state.id;
+    }
+  });
+});
+</script>
+{% endblock %}
--- a/templates/metrics/css/timeline/popularity.html
+++ b/templates/metrics/css/timeline/popularity.html
@ -0,0 +1,53 @@
+{% extends "base.html" %}
+{% load inline_file %}
+
+{% block css %}
+<!-- <link rel="stylesheet" href="/static/css/metrics/metrics.css"> -->
+<style>{% inline_file "/static/css/metrics/metrics.css" %}</style>
+{% endblock %}
+
+{% block html_imports %}
+  <link rel="import" href="/static/elements/metrics-imports{% if VULCANIZE %}.vulcanize{% endif %}.html">
+{% endblock %}
+
+{% block drawer %}
+  {% include "metrics/_nav.html" %}
+{% endblock %}
+
+{% block subheader %}
+<div id="subheader">
+  <h2>CSS usage metrics &gt; all properties > timeline</h2>
+</div>
+{% endblock %}
+
+{% block content %}
+<div class="data-panel">
+  <p class="description">Use of CSS properties over time.</p>
+  <chromedash-feature-timeline
+      type="css" view="popularity"
+      title="Percentage of Chrome page loads that use this property at least once"
+      {% if not prod %}use-remote-data{% endif %}></chromedash-feature-timeline>
+  <p class="callout">
+    <b>Note</b>: on 2017-10-26 the underlying metrics were switched over to a newer collection system
+    which is <a href="https://groups.google.com/a/chromium.org/forum/#!msg/blink-api-owners-discuss/IpIkbz0qtrM/HUCfSMv2AQAJ" target="_blank">more accurate</a>.
+    This is also the reason for the abrupt spike around 2017-10-26.
+  </p>
+</div>
+{% endblock %}
+
+{% block js %}
+<script>
+document.addEventListener('WebComponentsReady', function(e) {
+  var timeline = $('chromedash-feature-timeline');
+  timeline.props = {{CSS_PROPERTY_BUCKETS|safe}};
+
+  document.body.classList.remove('loading');
+
+  window.addEventListener('popstate', function(e) {
+    if (e.state) {
+      timeline.selectedBucketId = e.state.id;
+    }
+  });
+});
+</script>
+{% endblock %}