misc(treemap): initialize app structure (#11635)

.github/workflows/ci.yml

@@ -33,6 +33,8 @@ jobs:
       run: xvfb-run --auto-servernum yarn test-docs
     - name: yarn test-viewer
       run: xvfb-run --auto-servernum yarn test-viewer
+    - name: yarn test-treemap
+      run: xvfb-run --auto-servernum yarn test-treemap
 
     - run: yarn diff:sample-json
     - run: yarn type-check

.travis.yml

@@ -38,6 +38,7 @@ script:
   - yarn smoke:cicoverage
   - yarn test-clients
   - yarn test-viewer
+  - yarn test-treemap
   - yarn test-lantern
   - yarn test-bundle
   - yarn i18n:checks

build/build-treemap.js

@@ -0,0 +1,39 @@
+/**
+ * @license Copyright 2020 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+'use strict';
+
+const fs = require('fs');
+const GhPagesApp = require('./gh-pages-app.js');
+
+/**
+ * Build treemap app, optionally deploying to gh-pages if `--deploy` flag was set.
+ */
+async function run() {
+  const app = new GhPagesApp({
+    name: 'treemap',
+    appDir: `${__dirname}/../lighthouse-treemap/app`,
+    html: {path: 'index.html'},
+    stylesheets: [
+      {path: 'styles/*'},
+    ],
+    javascripts: [
+      fs.readFileSync(require.resolve('webtreemap-cdt'), 'utf8'),
+      {path: 'src/*'},
+    ],
+    assets: [
+      {path: 'debug.json'},
+    ],
+  });
+
+  await app.build();
+
+  const argv = process.argv.slice(2);
+  if (argv.includes('--deploy')) {
+    await app.deploy();
+  }
+}
+
+run();

docs/releasing.md

@@ -120,8 +120,9 @@ git push --follow-tags
 # Publish to npm.
 npm publish
 
-# Publish viewer.
+# Publish viewer and treemap.
 yarn deploy-viewer
+yarn deploy-treemap
 ```
 
 ### Extensions

jest.config.js

@@ -22,6 +22,8 @@ module.exports = {
   testMatch: [
     '**/lighthouse-core/**/*-test.js',
     '**/lighthouse-cli/**/*-test.js',
+    '**/lighthouse-treemap/**/*-test.js',
+    '**/lighthouse-treemap/**/*-test-pptr.js',
     '**/lighthouse-viewer/**/*-test.js',
     '**/lighthouse-viewer/**/*-test-pptr.js',
     '**/clients/test/**/*-test.js',

lighthouse-cli/test/fixtures/static-server.js

@@ -158,7 +158,7 @@ class Server {
       return;
     }
 
-    if (filePath.startsWith('/dist/gh-pages/viewer')) {
+    if (filePath.startsWith('/dist/gh-pages')) {
       // Rewrite lighthouse-viewer paths to point to that location.
       absoluteFilePath = path.join(__dirname, '/../../../', filePath);
     }

lighthouse-core/audits/script-treemap-data.js

@@ -10,35 +10,20 @@
  * Creates treemap data for treemap app.
  */
 
+/**
+ * Ex: https://gist.github.com/connorjclark/0ef1099ae994c075e36d65fecb4d26a7
+ * @typedef {LH.Treemap.RootNodeContainer[]} TreemapData
+ */
+
+/**
+ * @typedef {Omit<LH.Treemap.Node, 'name'|'children'>} SourceData
+ */
+
 const Audit = require('./audit.js');
 const JsBundles = require('../computed/js-bundles.js');
 const UnusedJavaScriptSummary = require('../computed/unused-javascript-summary.js');
 const ModuleDuplication = require('../computed/module-duplication.js');
 
-/**
- * @typedef {RootNodeContainer[]} TreemapData
- */
-
-/**
- * Ex: https://gist.github.com/connorjclark/0ef1099ae994c075e36d65fecb4d26a7
- * @typedef RootNodeContainer
- * @property {string} name Arbitrary name identifier. Usually a script url.
- * @property {Node} node
- */
-
-/**
- * @typedef Node
- * @property {string} name Arbitrary name identifier. Usually a path component from a source map.
- * @property {number} resourceBytes
- * @property {number=} unusedBytes
- * @property {string=} duplicatedNormalizedModuleName If present, this module is a duplicate. String is normalized source path. See ModuleDuplication.normalizeSource
- * @property {Node[]=} children
- */
-
-/**
- * @typedef {Omit<Node, 'name'|'children'>} SourceData
- */
-
 class ScriptTreemapDataAudit extends Audit {
   /**
    * @return {LH.Audit.Meta}
@@ -61,12 +46,12 @@ class ScriptTreemapDataAudit extends Audit {
    * same data as the sum of all descendant leaf nodes.
    * @param {string} sourceRoot
    * @param {Record<string, SourceData>} sourcesData
-   * @return {Node}
+   * @return {LH.Treemap.Node}
    */
   static prepareTreemapNodes(sourceRoot, sourcesData) {
     /**
      * @param {string} name
-     * @return {Node}
+     * @return {LH.Treemap.Node}
      */
     function newNode(name) {
       return {
@@ -124,7 +109,7 @@ class ScriptTreemapDataAudit extends Audit {
 
     /**
      * Collapse nodes that have only one child.
-     * @param {Node} node
+     * @param {LH.Treemap.Node} node
      */
     function collapseAll(node) {
       while (node.children && node.children.length === 1) {
@@ -151,7 +136,7 @@ class ScriptTreemapDataAudit extends Audit {
    * @return {Promise<TreemapData>}
    */
   static async makeRootNodes(artifacts, context) {
-    /** @type {RootNodeContainer[]} */
+    /** @type {LH.Treemap.RootNodeContainer[]} */
     const rootNodeContainers = [];
 
     let inlineScriptLength = 0;
@@ -199,7 +184,7 @@ class ScriptTreemapDataAudit extends Audit {
       const unusedJavascriptSummary = await UnusedJavaScriptSummary.request(
         {url: scriptElement.src, scriptCoverages, bundle}, context);
 
-      /** @type {Node} */
+      /** @type {LH.Treemap.Node} */
       let node;
       if (unusedJavascriptSummary.sourcesWastedBytes && !('errorMessage' in bundle.sizes)) {
         // Create nodes for each module in a bundle.

lighthouse-treemap/README.md

@@ -0,0 +1,12 @@
+# Lighthouse Treemap Viewer
+
+## Development
+
+```sh
+yarn serve-treemap
+
+# in separate terminal, start build watch
+# dependency: `brew install entr`
+find lighthouse-treemap | entr -s 'DEBUG=1 yarn build-treemap'
+open http://localhost:8000/treemap/?debug
+```

lighthouse-treemap/app/index.html

@@ -0,0 +1,41 @@
+<!--
+Copyright 2020 The Lighthouse Authors. All Rights Reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+-->
+
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
+  <title>Lighthouse Treemap</title>
+  <link rel="icon"
+    href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEhklEQVR4AWJxL/BhIAesev1U5tcflpncgNrKIsqNIwzC9feMpDUzs70kOczMzMzJJcxwCTMzncPMnOwtzBwzMzPb0vRfeZPp0VhPS5I39V5fdiXV1/VD+9QC7OVn9BsyH1XIoEI1PfmJvLFowVV564+34DFUHudbmfDh4kVXh//7XwE+WjS/YfXZe3yr4j2rqj1AIhSB7hZ8ZtPZu/zw8cK523U4wE1/rvPfWrz4zs0m9ZdC9yUJAlASdBAgocRegfF/f3/h/PuaFsxMdwjAR0vm1+06eMMfIrhLqTWqdH4EumU2SPfMhigJAlRQbZrgrRsl9U+Y2DYDFCz3ILC9kiAiqSrMwbWT0nceEnR+9Kggc2zjOJCASDENkg0a5HfZZgDP81CM3CrQs2Z1+o7DJ6ePr8sK0AOCHv5Jjdt3evyYSaZ351VIStIxPRAUtrBYbxC6w+BZ0ivVSBKkIhJhemSyZpfB00EiPO2VjzYkxhcqXQqCWCShGplvi3y0QxqbuBurMjyJeWnkHZuAEgIQGsUBqwrfjZ+IlBgKyRJzVVYF8O6qFWdh86YzQzMrZigYmxAyfvHgLZQ/LC1CbeniW2Hkqr/PH16SgvGuf2/uzNMBwJA/njxizGPtSyAf7EziJCMGRDRdhoAC4PL1A/SrKQMAAQkEfpJAcRQdrBJ7gNwjSpJsdwK+CANBkqa1LgQB4IicV9nYUct7gaxuDJUErQIiEAiMxLVOFlKzIktPpT0ggpdpC/8YAHnxbgkUY4tAAFSR7AAXNyAAWHJrA/kHGjzg5nleuwFO7Nd/IoDw4Pm58+4jNLmYG0wRA5bErc2Mr3Y+dXTDW1VvwqbJkzMCHQ4S1GTCBOIgUHJrGdEwqzR+jAp/o2qAZelUDoQnruEEdDclJI6576AlNVfc+22XN/+Y1vnJD0Yind6UpEEvn/Hqq15EYjCW7jZCJEpnNvDgkyelDjs106kuux2AAXCSobULOWP8mLhYlpoDMK4qAFXJGk+grtH8YXVz5KJblqaG1+VUdTc0I290bmUQAriGITRbdQnom0aoFj8kx1+wMD2ifncAXUQE4SkDqN1hE0jEophs1SUwZAOhUAiMCLwRtamtTZtbbmZErSAUHbSysaoEmnrsakiMiUAURi283gN6wans9oX8rOCrj7/JP35DFD+iQ7Au/K2KE1jzx6ujjUnXFH9KjEq6ZlhsTBICrNLJf47Pv/pkHzvup1w4dmUbEei0+bcXRqJuh5kVARQ8byyYxOwNGr7A87xh1tp8sGT+uMInrwi++Xj7TQz2d27NvwEkrOflAFQGIDA5khASBCGdO2/Z/MnLPwYfv5TFhjW7QhVKAB6afwe2LpFlFsCnlQEosgQgDsdOG1/LKeNqJS4JCSPJ/i+TakwEARor7gER1Iva5JmPOJK0RUqmoPnnlzFCtmIAhAAQEIQRgDaiYPIauNXcnDlRIrWNFY3hm7PG9YRqr7IV7HrCgAC17befjEvRq2nGhAHtBqDpOuI/I1diUUAMYIxEdyejBJqLnNoszGZtfiX/CztGv2mq+sdaAAAAAElFTkSuQmCC">
+  <meta name="theme-color" content="#304ffe">
+  <link rel="stylesheet" href="styles/bundled.css">
+</head>
+
+<body>
+  <main>
+    <!-- Inject LHR here. -->
+  </main>
+
+  <script src="src/bundled.js"></script>
+
+  <!-- Google Analytics -->
+  <script>
+    (function (i, s, o, g, r, a, m) {
+      i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
+        (i[r].q = i[r].q || []).push(arguments)
+      }, i[r].l = 1 * new Date(); a = s.createElement(o),
+        m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
+    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
+
+    ga('create', 'UA-85519014-2', 'auto');
+    ga('send', 'pageview');
+  </script>
+</body>
+
+</html>

lighthouse-treemap/app/src/main.js

@@ -0,0 +1,78 @@
+/**
+ * @license Copyright 2020 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+'use strict';
+
+/* eslint-env browser */
+
+/* globals webtreemap TreemapUtil */
+
+/**
+ * Allows for saving the document and loading with data intact.
+ * @param {LH.Treemap.Options} options
+ */
+function injectOptions(options) {
+  if (window.__treemapOptions) return;
+
+  const scriptEl = document.createElement('script');
+  scriptEl.textContent = `
+    window.__treemapOptions = ${JSON.stringify(options)};
+  `;
+  document.head.append(scriptEl);
+}
+
+/**
+ * @param {LH.Treemap.Options} options
+ */
+function init(options) {
+  // ==== temporary
+  TreemapUtil.find('main').textContent = JSON.stringify(options.lhr);
+  // eslint-disable-next-line no-console
+  console.log({webtreemap});
+  // ==== temporary
+
+  injectOptions(options);
+
+  // eslint-disable-next-line no-console
+  console.log('window.__treemapOptions', window.__treemapOptions);
+}
+
+/**
+ * @param {string} message
+ */
+function showError(message) {
+  document.body.textContent = message;
+}
+
+async function main() {
+  if (window.__treemapOptions) {
+    // Prefer the hardcoded options from a saved HTML file above all.
+    init(window.__treemapOptions);
+  } else if (new URLSearchParams(window.location.search).has('debug')) {
+    const response = await fetch('debug.json');
+    init(await response.json());
+  } else {
+    window.addEventListener('message', e => {
+      if (e.source !== self.opener) return;
+
+      /** @type {LH.Treemap.Options} */
+      const options = e.data;
+      const {lhr} = options;
+      if (!lhr) return showError('Error: Invalid options');
+
+      const documentUrl = lhr.requestedUrl;
+      if (!documentUrl) return showError('Error: Invalid options');
+
+      init(options);
+    });
+  }
+
+  // If the page was opened as a popup, tell the opening window we're ready.
+  if (self.opener && !self.opener.closed) {
+    self.opener.postMessage({opened: true}, '*');
+  }
+}
+
+document.addEventListener('DOMContentLoaded', main);

lighthouse-treemap/app/src/util.js

@@ -0,0 +1,72 @@
+/**
+ * @license Copyright 2020 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+'use strict';
+
+/* eslint-env browser */
+
+/** @typedef {HTMLElementTagNameMap & {[id: string]: HTMLElement}} HTMLElementByTagName */
+
+class TreemapUtil {
+  /**
+   * @template {string} T
+   * @param {T} name
+   * @param {string=} className
+   * @param {Object<string, (string|undefined)>=} attrs Attribute key/val pairs.
+   *     Note: if an attribute key has an undefined value, this method does not
+   *     set the attribute on the node.
+   * @return {HTMLElementByTagName[T]}
+   */
+  static createElement(name, className, attrs = {}) {
+    const element = document.createElement(name);
+    if (className) {
+      element.className = className;
+    }
+    Object.keys(attrs).forEach(key => {
+      const value = attrs[key];
+      if (typeof value !== 'undefined') {
+        element.setAttribute(key, value);
+      }
+    });
+    return element;
+  }
+
+  /**
+   * @template {string} T
+   * @param {Element} parentElem
+   * @param {T} elementName
+   * @param {string=} className
+   * @param {Object<string, (string|undefined)>=} attrs Attribute key/val pairs.
+   *     Note: if an attribute key has an undefined value, this method does not
+   *     set the attribute on the node.
+   * @return {HTMLElementByTagName[T]}
+   */
+  static createChildOf(parentElem, elementName, className, attrs) {
+    const element = this.createElement(elementName, className, attrs);
+    parentElem.appendChild(element);
+    return element;
+  }
+
+  /**
+   * Guaranteed context.querySelector. Always returns an element or throws if
+   * nothing matches query.
+   * @param {string} query
+   * @param {ParentNode=} context
+   * @return {HTMLElement}
+   */
+  static find(query, context = document) {
+    /** @type {?HTMLElement} */
+    const result = context.querySelector(query);
+    if (result === null) {
+      throw new Error(`query ${query} not found`);
+    }
+    return result;
+  }
+}
+
+// node export for testing.
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = TreemapUtil;
+}

lighthouse-treemap/app/styles/treemap.css

@@ -0,0 +1,10 @@
+/**
+ * @license Copyright 2020 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+body {
+  margin: 0;
+  overflow-y: hidden;
+}

lighthouse-treemap/test/treemap-test-pptr.js

@@ -0,0 +1,95 @@
+/**
+ * @license Copyright 2020 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+'use strict';
+
+/* eslint-env jest */
+
+/* global document, window */
+
+const puppeteer = require('../../node_modules/puppeteer/index.js');
+const {server} = require('../../lighthouse-cli/test/fixtures/static-server.js');
+const portNumber = 10200;
+const treemapUrl = `http://localhost:${portNumber}/dist/gh-pages/treemap/index.html`;
+const debugOptions = require('../app/debug.json');
+
+describe('Lighthouse Treemap', () => {
+  // eslint-disable-next-line no-console
+  console.log('\n✨ Be sure to have recently run this: yarn build-treemap');
+
+  /** @type {import('puppeteer').Browser} */
+  let browser;
+  /** @type {import('puppeteer').Page} */
+  let page;
+  /** @type {Error[]} */
+  let pageErrors = [];
+
+  beforeAll(async function() {
+    await server.listen(portNumber, 'localhost');
+  });
+
+  afterAll(async function() {
+    await Promise.all([
+      new Promise(resolve => server.close(resolve)),
+      browser && browser.close(),
+    ]);
+  });
+
+  beforeEach(async () => {
+    if (!browser) browser = await puppeteer.launch({headless: true});
+    page = await browser.newPage();
+    page.on('pageerror', pageError => pageErrors.push(pageError));
+  });
+
+  afterEach(async () => {
+    await page.close();
+
+    // Fails if any unexpected errors ocurred.
+    // If a test expects an error, it will clear this array.
+    expect(pageErrors).toMatchObject([]);
+    pageErrors = [];
+  });
+
+  describe('Recieves options', () => {
+    it('from debug data', async () => {
+      await page.goto(`${treemapUrl}?debug`, {
+        waitUntil: 'networkidle0',
+        timeout: 30000,
+      });
+      const options = await page.evaluate(() => window.__treemapOptions);
+      expect(options.lhr.requestedUrl).toBe(debugOptions.lhr.requestedUrl);
+    });
+
+    async function loadFromPostMessage(options) {
+      const openerPage = await browser.newPage();
+      await openerPage.evaluate((treemapUrl, options) => {
+        const popup = window.open(treemapUrl);
+        window.addEventListener('message', () => {
+          popup.postMessage(options, new URL(treemapUrl).origin);
+        });
+      }, treemapUrl, options);
+      await new Promise(resolve => browser.on('targetcreated', resolve));
+      const target = (await browser.targets()).find(target => target.url() === treemapUrl);
+      page = await target.page();
+      await openerPage.close();
+      await page.waitForFunction(
+        () => window.__treemapOptions || document.body.textContent.startsWith('Error'));
+    }
+
+    it('from window postMessage', async () => {
+      await loadFromPostMessage(debugOptions);
+      const options = await page.evaluate(() => window.__treemapOptions);
+      expect(options.lhr.requestedUrl).toBe(debugOptions.lhr.requestedUrl);
+    });
+
+    it('handles errors', async () => {
+      await loadFromPostMessage({});
+      const options = await page.evaluate(() => window.__treemapOptions);
+      expect(options).toBeUndefined();
+      const error = await page.evaluate(() => document.body.textContent);
+      expect(error).toBe('Error: Invalid options');
+    });
+  });
+});

lighthouse-treemap/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig",
+  "include": [
+    "app/src/**/*.js",
+    "types",
+    "../types",
+  ],
+}

lighthouse-treemap/types/treemap.d.ts

@@ -0,0 +1,23 @@
+import _TreemapUtil = require('../app/src/util.js');
+
+declare global {
+  interface WebTreeMapOptions {
+    padding: [number, number, number, number];
+    spacing: number;
+    caption(node: LH.Treemap.Node): string;
+    showNode?(node: LH.Treemap.Node): boolean;
+  }
+
+  var webtreemap: {
+    render(el: HTMLElement, data: any, options: WebTreeMapOptions): void;
+    sort(data: any): void;
+  };
+
+  var TreemapUtil: typeof _TreemapUtil;
+
+  interface Window {
+    __treemapOptions?: LH.Treemap.Options;
+  }
+}
+
+export {};

lighthouse-viewer/test/viewer-test-pptr.js

@@ -27,7 +27,9 @@ describe('Lighthouse Viewer', () => {
   // eslint-disable-next-line no-console
   console.log('\n✨ Be sure to have recently run this: yarn build-viewer');
 
+  /** @type {import('puppeteer').Browser} */
   let browser;
+  /** @type {import('puppeteer').Page} */
   let viewerPage;
   const pageErrors = [];
 
@@ -56,8 +58,8 @@ describe('Lighthouse Viewer', () => {
       });
   }
 
-  beforeAll(async function() {
-    server.listen(portNumber, 'localhost');
+  beforeAll(async () => {
+    await server.listen(portNumber, 'localhost');
 
     // start puppeteer
     browser = await puppeteer.launch({

package.json

@@ -12,8 +12,8 @@
   },
   "scripts": {
     "build-all": "npm-run-posix-or-windows build-all:task",
-    "build-all:task": "yarn build-cdt-lib && yarn build-devtools && (yarn build-extension & yarn build-lr & yarn build-viewer & yarn build-smokehouse-bundle & wait) && yarn build-pack",
-    "build-all:task:windows": "yarn build-cdt-lib && yarn build-extension && yarn build-devtools && yarn build-lr && yarn build-viewer && yarn build-smokehouse-bundle",
+    "build-all:task": "yarn build-cdt-lib && yarn build-devtools && (yarn build-extension & yarn build-lr & yarn build-viewer & yarn build-treemap & yarn build-smokehouse-bundle & wait) && yarn build-pack",
+    "build-all:task:windows": "yarn build-cdt-lib && yarn build-extension && yarn build-devtools && yarn build-lr && yarn build-viewer && yarn build-treemap && yarn build-smokehouse-bundle",
     "build-cdt-lib": "node ./build/build-cdt-lib.js",
     "build-extension": "yarn build-extension-chrome && yarn build-extension-firefox",
     "build-extension-chrome": "node ./build/build-extension.js chrome",
@@ -22,6 +22,7 @@
     "build-smokehouse-bundle": "node ./build/build-smokehouse-bundle.js",
     "build-lr": "node ./build/build-lightrider-bundles.js",
     "build-pack": "bash build/build-pack.sh",
+    "build-treemap": "node ./build/build-treemap.js",
     "build-viewer": "node ./build/build-viewer.js",
     "clean": "rimraf dist proto/scripts/*.json proto/scripts/*_pb2.* proto/scripts/*_pb.* proto/scripts/__pycache__ proto/scripts/*.pyc *.report.html *.report.dom.html *.report.json *.devtoolslog.json *.trace.json lighthouse-core/lib/i18n/locales/*.ctc.json || true",
     "lint": "[ \"$CI\" = true ] && eslint --quiet -f codeframe . || eslint .",
@@ -32,6 +33,7 @@
     "test-bundle": "yarn smoke --runner bundle -j=1 --retries=2 --invert-match forms",
     "test-clients": "jest \"clients/\"",
     "test-viewer": "yarn unit-viewer && jest lighthouse-viewer/test/viewer-test-pptr.js",
+    "test-treemap": "jest lighthouse-treemap/test/treemap-test-pptr.js",
     "test-lantern": "bash lighthouse-core/scripts/test-lantern.sh",
     "test-legacy-javascript": "bash lighthouse-core/scripts/test-legacy-javascript.sh",
     "test-docs": "yarn --cwd docs/recipes/auth && jest docs/recipes/integration-test && yarn --cwd docs/recipes/custom-gatherer-puppeteer test",
@@ -54,12 +56,13 @@
     "devtools": "bash lighthouse-core/scripts/roll-to-devtools.sh",
     "chrome": "node lighthouse-core/scripts/manual-chrome-launcher.js",
     "fast": "yarn start --emulated-form-factor=none --throttlingMethod=provided",
+    "deploy-treemap": "yarn build-treemap --deploy",
     "deploy-viewer": "yarn build-viewer --deploy",
-    "now-build": "node lighthouse-core/scripts/build-report-for-autodeployment.js && yarn build-viewer && cp -r dist/gh-pages dist/now/gh-pages",
+    "now-build": "node lighthouse-core/scripts/build-report-for-autodeployment.js && yarn build-viewer && yarn build-treemap && cp -r dist/gh-pages dist/now/gh-pages",
     "dogfood-lhci": "./lighthouse-core/scripts/dogfood-lhci.sh",
     "timing-trace": "node lighthouse-core/scripts/generate-timing-trace.js",
     "changelog": "conventional-changelog --config ./build/changelog-generator/index.js --infile changelog.md --same-file",
-    "type-check": "tsc -p . && tsc -p lighthouse-viewer/",
+    "type-check": "tsc -p . && tsc -p lighthouse-viewer/ && tsc -p lighthouse-treemap/",
     "i18n:checks": "./lighthouse-core/scripts/i18n/assert-strings-collected.sh",
     "i18n:collect-strings": "node lighthouse-core/scripts/i18n/collect-strings.js",
     "update:lantern-master": "node lighthouse-core/scripts/lantern/update-master-lantern-values.js",
@@ -76,7 +79,10 @@
     "compile-proto": "protoc --python_out=./ ./proto/lighthouse-result.proto && mv ./proto/*_pb2.py ./proto/scripts || (echo \"❌ Install protobuf ≥ 3.7.1 to compile the proto file.\" && false)",
     "build-proto-roundtrip": "mkdir -p .tmp && cross-env PROTOCOL_BUFFERS_PYTHON_IMPLEMENTATION_VERSION=2 python proto/scripts/json_roundtrip_via_proto.py",
     "static-server": "node lighthouse-cli/test/fixtures/static-server.js",
-    "serve-gh-pages": "cd dist/gh-pages && python -m SimpleHTTPServer"
+    "serve-dist": "cd dist && python -m SimpleHTTPServer",
+    "serve-gh-pages": "cd dist/gh-pages && python -m SimpleHTTPServer",
+    "serve-treemap": "yarn serve-gh-pages",
+    "serve-viewer": "yarn serve-gh-pages"
   },
   "devDependencies": {
     "@build-tracker/cli": "^1.0.0-beta.15",
@@ -146,7 +152,8 @@
     "pretty-json-stringify": "^0.0.2",
     "puppeteer": "^1.19.0",
     "terser": "^4.2.0",
-    "typescript": "3.9.7"
+    "typescript": "3.9.7",
+    "webtreemap-cdt": "^3.0.1"
   },
   "dependencies": {
     "axe-core": "3.5.5",

types/treemap.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @license Copyright 2020 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+declare global {
+  module LH.Treemap {
+    interface Options {
+      lhr: LH.Result;
+    }
+
+    interface RootNodeContainer {
+      /** Arbitrary name identifier. Usually a script url. */
+      name: string;
+      node: Node;
+    }
+
+    interface Node {
+      /** Arbitrary name identifier. Usually a path component from a source map. */
+      name: string;
+      resourceBytes: number;
+      unusedBytes?: number;
+      /** If present, this module is a duplicate. String is normalized source path. See ModuleDuplication.normalizeSource */
+      duplicatedNormalizedModuleName?: string;
+      children?: Node[];
+    }    
+  }
+}
+
+// empty export to keep file a module
+export {}

yarn.lock

@@ -1928,16 +1928,16 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
+commander@^2.11.0, commander@^2.20.0:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
 commander@^2.18.0:
   version "2.20.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
   integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
 
-commander@^2.20.0:
-  version "2.20.3"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
-  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
-
 commander@~2.17.1:
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
@@ -8299,6 +8299,13 @@ webidl-conversions@^4.0.2:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
   integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
 
+webtreemap-cdt@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/webtreemap-cdt/-/webtreemap-cdt-3.1.0.tgz#62f052927467875b90f16f204f4946212785eb40"
+  integrity sha512-2vxzZdX34zN1WGp208R4kNm/ZeyZhhNlOasxXHbDS7CtoWp5YeTKPP+cqGL00R3K3t2E/nJzhrshfOOCt/deYw==
+  dependencies:
+    commander "^2.11.0"
+
 whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3, whatwg-encoding@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"