Supersize: Turns UI into PWA

Since all the logic outside of the data.ndjson file is self-contained in the client, we can make the client run offline and support add to shelf. Bug: 847599 Change-Id: Ic29237e994fd07f75006d1f2ef4402b835511341 Reviewed-on: https://chromium-review.googlesource.com/1145595Reviewed-by: Eric Stevenson <estevenson@chromium.org> Reviewed-by: agrieve <agrieve@chromium.org> Commit-Queue: Tiger Oakes <tigero@google.com> Cr-Commit-Position: refs/heads/master@{#577547}

Supersize: Turns UI into PWA
Since all the logic outside of the data.ndjson file is self-contained in the client, we can make the client run offline and support add to shelf. Bug: 847599 Change-Id: Ic29237e994fd07f75006d1f2ef4402b835511341 Reviewed-on: https://chromium-review.googlesource.com/1145595Reviewed-by: Eric Stevenson <estevenson@chromium.org> Reviewed-by: agrieve <agrieve@chromium.org> Commit-Queue: Tiger Oakes <tigero@google.com> Cr-Commit-Position: refs/heads/master@{#577547}
acc631ae · Tiger Oakes · Commit Bot · 5c590c23 · acc631ae · acc631ae
Commit acc631ae authored Jul 24, 2018 by Tiger Oakes Committed by Commit Bot Jul 24, 2018
6 changed files
--- a/tools/binary_size/libsupersize/gsutil.py
+++ b/tools/binary_size/libsupersize/gsutil.py
+# Copyright 2018 The Chromium Authors. All rights reserved.
+# Use of this source code is governed by a BSD-style license that can be
+# found in the LICENSE file.
+"""Update the Google Cloud Storage bucket hosting the Super Size UI."""
+import argparse
+import os
+import subprocess
+import uuid
+GS_BUCKET = 'gs://chrome-supersize'
+def _SyncStatic():
+  """Upload static files from the static directory."""
+  static_files = os.path.join(os.path.dirname(__file__), 'static')
+  subprocess.check_call([
+    'gsutil.py', '-m', 'rsync', '-r', static_files, GS_BUCKET
+  ])
+def _SyncTemplates():
+  """Generate and upload the templates/sw.js file."""
+  template_file = os.path.join(os.path.dirname(__file__), 'templates', 'sw.js')
+  cache_hash = uuid.uuid4().hex
+  p = subprocess.Popen([
+    'gsutil.py', 'cp', '-p', '-', '%s/sw.js' % GS_BUCKET
+  ], stdin=subprocess.PIPE)
+  with open(template_file, 'r') as in_file:
+    p.communicate(in_file.read().replace('{{cache_hash}}', cache_hash))
+def _SetMetaAndPermissions():
+  # sw.js has the wrong type due to being created from a stream
+  subprocess.check_call([
+    'gsutil.py', 'setmeta', '-h', 'Content-Type:application/javascript',
+    '%s/sw.js' % GS_BUCKET
+  ])
+  subprocess.check_call([
+    'gsutil.py', '-m', 'setmeta', '-h', 'Content-Type:application/x-ndjson',
+    '%s/milestones/*.ndjson' % GS_BUCKET
+  ])
+  # All files in the root of the bucket are user readable
+  subprocess.check_call([
+    'gsutil.py', '-m', 'acl', 'ch', '-u', 'AllUsers:R', '%s/*' % GS_BUCKET
+  ])
+def main():
+  parser = argparse.ArgumentParser(description=__doc__)
+  parser.add_argument('--sync', action='store_true', required=True,
+                      help='Sync static and template files to GCS.')
+  args = parser.parse_args()
+  if args.sync:
+    _SyncStatic()
+    _SyncTemplates()
+    _SetMetaAndPermissions()
+if __name__ == '__main__':
+  main()
--- a/tools/binary_size/libsupersize/static/index.html
+++ b/tools/binary_size/libsupersize/static/index.html
@@ -7,9 +7,10 @@
 -->
 <head>
-    <title>Binary Size Analysis</title>
+    <title>Super Size Tiger View</title>
    <script src="start-worker.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="theme-color" content="#4285f4">
    <link href="https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,500" rel="stylesheet">
    <style>
        body {
@@ -205,17 +206,23 @@
    </style>
    <link rel="stylesheet" href="options.css">
    <link rel="icon" href="favicon.ico" sizes="16x16 32x32 256x256" type="image/x-icon">
+    <link rel="manifest" href="manifest.json">
    <script defer src="shared.js"></script>
    <script defer src="state.js"></script>
    <script defer src="infocard-ui.js"></script>
    <script defer src="tree-ui.js"></script>
+    <script defer async>
+        if ('serviceWorker' in navigator) {
+            navigator.serviceWorker.register('sw.js');
+        }
+    </script>
 </head>
 <body>
    <div class="scrim toggle-options" hidden></div>
    <header class="appbar">
        <div class="appbar-inner">
-            <h1 class="headline">Binary Size Analysis</h1>
+            <h1 class="headline">Super Size Tiger View</h1>
            <input type="file" name="upload" id="upload" accept=".ndjson" >
            <label for="upload" class="text-button filled-button with-icon">
                <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="#fff">

--- a/tools/binary_size/libsupersize/static/manifest.json
+++ b/tools/binary_size/libsupersize/static/manifest.json
+{
+  "short_name": "Super Size",
+  "name": "Super Size Tiger View",
+  "description": "View interactive size breakdowns from Chrome",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "16x16 32x32 256x256"
+    },
+    {
+      "src": "splash.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "lang": "en",
+  "start_url": "index.html",
+  "background_color": "#fff",
+  "display": "standalone",
+  "scope": "./",
+  "theme_color": "#4285f4"
+}
--- a/tools/binary_size/libsupersize/static/options.css
+++ b/tools/binary_size/libsupersize/static/options.css
@@ -34,7 +34,7 @@
  position: fixed;
  right: 0;
  top: 0;
-  height: 100vh;
+  bottom: 0;
  width: 224px;
  background: #fffffff5;
  box-shadow: 0 1px 2px #3c40434d, 0 2px 6px 2px #3c404326;
@@ -306,15 +306,11 @@ input[type='file'] {
  .symbols {
    padding: 0 16px;
  }
-  .appbar-progress {
-    margin: 0 -16px;
-    width: calc(100% + 32px);
-  }
-  .filled-button {
+  .text-button.with-icon {
    padding-right: 6px;
  }
-  .filled-button .label-text {
+  .text-button.with-icon .label-text {
    display: none;
  }
 }
--- a/tools/binary_size/libsupersize/static/splash.png
+++ b/tools/binary_size/libsupersize/static/splash.png
--- a/tools/binary_size/libsupersize/templates/sw.js
+++ b/tools/binary_size/libsupersize/templates/sw.js
+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+// @ts-check
+'use strict';
+const cacheName = '{{cache_hash}}';
+const filesToCache = [
+  'favicon.ico',
+  'index.html',
+  'infocard-ui.js',
+  'infocard.css',
+  'manifest.json',
+  'options.css',
+  'shared.js',
+  'start-worker.js',
+  'state.js',
+  'tree-ui.js',
+  'tree-worker.js',
+];
+// On install, cache the items in the `filesToCache` list
+self.addEventListener('install', event => {
+  event.waitUntil(
+    caches.open(cacheName).then(cache => cache.addAll(filesToCache))
+  );
+});
+// On activate, remove any old caches
+self.addEventListener('activate', event => {
+  async function deleteOldCache(key) {
+    if (key !== cacheName) {
+      return caches.delete(key);
+    }
+  }
+  event.waitUntil(
+    caches.keys().then(keyList => Promise.all(keyList.map(deleteOldCache)))
+  );
+  return self.clients.claim();
+});
+// On fetch, return entries from the cache if possible
+self.addEventListener('fetch', event => {
+  event.respondWith(
+    caches
+      .match(event.request, {ignoreSearch: true})
+      .then(response => response || fetch(event.request))
+  );
+});