misc(treemap): add placeholder, gist and file upload features (#12511)

GoogleChrome · May 20, 2021 · 30b3e06 · 30b3e06
1 parent 04cc1d8
commit 30b3e06
Show file tree

Hide file tree

Showing 15 changed files with 598 additions and 118 deletions.
diff --git a/build/build-treemap.js b/build/build-treemap.js
@@ -5,6 +5,8 @@
  */
 'use strict';
 
+/** @typedef {import('../lighthouse-core/lib/i18n/locales').LhlMessages} LhlMessages */
+
 const fs = require('fs');
 const GhPagesApp = require('./gh-pages-app.js');
 
@@ -15,8 +17,11 @@ const GhPagesApp = require('./gh-pages-app.js');
  */
 function buildStrings() {
   const locales = require('../lighthouse-core/lib/i18n/locales.js');
-  const UIStrings = require('../lighthouse-treemap/app/src/util.js').UIStrings;
-  const strings = /** @type {import('../lighthouse-treemap/types/treemap').Strings} */ ({});
+  const UIStrings = require(
+    // Prevent `tsc -p .` from evaluating util.js using core types, it is already typchecked by `tsc -p lighthouse-treemap`.
+    '' + '../lighthouse-treemap/app/src/util.js'
+  ).UIStrings;
+  const strings = /** @type {Record<LH.Locale, LhlMessages>} */ ({});
 
   for (const [locale, lhlMessages] of Object.entries(locales)) {
     const localizedStrings = Object.fromEntries(
@@ -49,17 +54,24 @@ async function run() {
     ],
     javascripts: [
       /* eslint-disable max-len */
+      fs.readFileSync(require.resolve('idb-keyval/dist/idb-keyval-min.js'), 'utf8'),
+      fs.readFileSync(require.resolve('event-target-shim/umd'), 'utf8'),
       fs.readFileSync(require.resolve('webtreemap-cdt'), 'utf8'),
       fs.readFileSync(require.resolve('tabulator-tables/dist/js/tabulator_core.js'), 'utf8'),
       fs.readFileSync(require.resolve('tabulator-tables/dist/js/modules/sort.js'), 'utf8'),
       fs.readFileSync(require.resolve('tabulator-tables/dist/js/modules/format.js'), 'utf8'),
       fs.readFileSync(require.resolve('tabulator-tables/dist/js/modules/resize_columns.js'), 'utf8'),
       /* eslint-enable max-len */
       buildStrings(),
+      {path: '../../lighthouse-core/report/html/renderer/logger.js'},
       {path: '../../lighthouse-core/report/html/renderer/i18n.js'},
+      {path: '../../lighthouse-viewer/app/src/drag-and-drop.js'},
+      {path: '../../lighthouse-viewer/app/src/github-api.js'},
+      {path: '../../lighthouse-viewer/app/src/firebase-auth.js'},
       {path: 'src/**/*'},
     ],
     assets: [
+      {path: 'images/**/*'},
       {path: 'debug.json'},
     ],
   });

diff --git a/lighthouse-core/lib/i18n/i18n.js b/lighthouse-core/lib/i18n/i18n.js
@@ -5,6 +5,8 @@
  */
 'use strict';
 
+/** @typedef {import('../../lib/i18n/locales').LhlMessages} LhlMessages */
+
 const path = require('path');
 const MessageFormat = require('intl-messageformat').default;
 const lookupClosestLocale = require('lookup-closest-locale');
@@ -508,8 +510,6 @@ function replaceIcuMessages(inputObject, locale) {
   return icuMessagePaths;
 }
 
-/** @typedef {import('./locales').LhlMessages} LhlMessages */
-
 /**
  * Populate the i18n string lookup dict with locale data
  * Used when the host environment selects the locale and serves lighthouse the intended locale file

diff --git a/lighthouse-core/scripts/i18n/count-translated.js b/lighthouse-core/scripts/i18n/count-translated.js
@@ -5,11 +5,11 @@
  */
 'use strict';
 
+/** @typedef {import('../../lib/i18n/locales').LhlMessages} LhlMessages */
+
 const fs = require('fs');
 const glob = require('glob');
 
-/** @typedef {import('../../lib/i18n/locales.js').LhlMessages} LhlMessages */
-
 const lhRoot = `${__dirname}/../../../`;
 const enUsLhlFilename = lhRoot + 'lighthouse-core/lib/i18n/locales/en-US.json';
 /** @type {LhlMessages} */

diff --git a/lighthouse-treemap/app/images/lighthouse-logo.svg b/lighthouse-treemap/app/images/lighthouse-logo.svg
diff --git a/lighthouse-treemap/app/index.html b/lighthouse-treemap/app/index.html
@@ -18,7 +18,29 @@
 </head>
 
 <body class="vars">
-  <main class="lh-main lh-main--show-table">
+  <div class="drop_zone"></div>
+
+  <div class="treemap-placeholder">
+    <div class="treemap-placeholder-inner">
+      <div>
+        <img src="images/lighthouse-logo.svg" class="treemap-placeholder-logo" alt="Lighthouse logo">
+      </div>
+      <div>
+        <h1 class="treemap-placeholder__heading">Lighthouse Treemap</h1>
+        <div class="treemap-placeholder__help">To view a treemap: Paste the Lighthouse result json or a Gist URL.<br>
+          You can also drag 'n drop the file or click here to select it.<br><br>
+        </div>
+        <input type="url" class="treemap-placeholder__url js-gist-url"
+               placeholder="Enter or paste Gist URL">
+      </div>
+    </div>
+  </div>
+
+  <div id="lh-log"></div>
+
+  <input id="hidden-file-input" type="file" hidden accept="application/json">
+
+  <main class="hidden lh-main lh-main--show-table">
     <div class="lh-settings">
       <header>
         <div class="lh-header--section">
@@ -85,6 +107,8 @@
     </div>
   </main>
 
+  <script src="https://www.gstatic.com/firebasejs/4.1.2/firebase-app.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/4.1.2/firebase-auth.js"></script>
   <script src="src/bundled.js"></script>
 
   <!-- Global site tag (gtag.js) - Google Analytics -->