report: gzip treemap data

build/build-treemap.js

@@ -57,6 +57,7 @@ async function run() {
       /* eslint-enable max-len */
       buildStrings(),
       {path: '../../lighthouse-core/report/html/renderer/i18n.js'},
+      {path: '../../lighthouse-core/report/html/renderer/base64.js'},
       {path: 'src/**/*'},
     ],
     assets: [

lighthouse-core/report/html/html-report-assets.js

@@ -23,6 +23,7 @@ const REPORT_JAVASCRIPT = [
   fs.readFileSync(__dirname + '/renderer/pwa-category-renderer.js', 'utf8'),
   fs.readFileSync(__dirname + '/renderer/report-renderer.js', 'utf8'),
   fs.readFileSync(__dirname + '/renderer/i18n.js', 'utf8'),
+  fs.readFileSync(__dirname + '/renderer/base64.js', 'utf8'),
 ].join(';\n');
 const REPORT_CSS = fs.readFileSync(__dirname + '/report-styles.css', 'utf8');
 const REPORT_TEMPLATES = fs.readFileSync(__dirname + '/templates.html', 'utf8');

lighthouse-core/report/html/renderer/base64.js

@@ -0,0 +1,68 @@
+/**
+ * @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';
+
+/* global self btoa atob */
+
+const encode = typeof btoa !== 'undefined' ?
+  btoa :
+  /** @param {string} str */
+  (str) => Buffer.from(str).toString('base64');
+const decode = typeof btoa !== 'undefined' ?
+  atob :
+  /** @param {string} str */
+  (str) => Buffer.from(str, 'base64').toString();
+
+/**
+ * @param {string} string
+ */
+function toBinary(string) {
+  // const codePoints = [...string].map(c => c.codePointAt(0) || 0);
+  // return encode(String.fromCharCode(...new Uint8Array(codePoints)));
+
+  const chunkSize = 10000;
+  let str = '';
+  for (let i = 0; i < string.length; i += chunkSize) {
+    const codeUnits = new Uint16Array(Math.min(chunkSize, string.length - i));
+    for (let i = 0; i < codeUnits.length; i++) {
+      codeUnits[i] = string.charCodeAt(i);
+    }
+    str += String.fromCharCode(...new Uint8Array(codeUnits.buffer));
+  }
+
+  return encode(str);
+}
+
+/**
+ * @param {string} encoded
+ */
+function fromBinary(encoded) {
+  // const binary = decode(encoded);
+  // const bytes = new Uint8Array(binary.length);
+  // for (let i = 0; i < bytes.length; i++) {
+  //   bytes[i] = binary.charCodeAt(i);
+  // }
+  // return String.fromCodePoint(...new Uint16Array(bytes.buffer));
+
+  const chunkSize = 10000;
+  let str = '';
+  const decoded = decode(encoded);
+  for (let i = 0; i < decoded.length; i += chunkSize) {
+    const bytes = new Uint8Array(Math.min(chunkSize, decoded.length - i));
+    for (let j = 0; j < bytes.length; j++) {
+      bytes[j] = decoded.charCodeAt(i + j);
+    }
+    str += String.fromCharCode(...new Uint16Array(bytes.buffer));
+  }
+
+  return str;
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {toBinary, fromBinary};
+} else {
+  self.Base64 = {toBinary, fromBinary};
+}

lighthouse-core/report/html/renderer/report-ui-features.js

@@ -23,7 +23,7 @@
  * the report.
  */
 
-/* globals getFilenamePrefix Util ElementScreenshotRenderer */
+/* globals getFilenamePrefix Util Base64 ElementScreenshotRenderer */
 
 /** @typedef {import('./dom')} DOM */
 
@@ -573,6 +573,7 @@ class ReportUIFeatures {
     const url = getAppsOrigin() + '/treemap/';
     const windowName = `treemap-${json.requestedUrl}`;
 
+    method= 'url';
     if (method === 'postMessage') {
       ReportUIFeatures.openTabAndSendData(treemapOptions, url, windowName);
     } else {
@@ -603,7 +604,6 @@ class ReportUIFeatures {
       }
     });
 
-    // The popup's window.name is keyed by version+url+fetchTime, so we reuse/select tabs correctly
     const popup = window.open(url, windowName);
   }
 
@@ -616,21 +616,8 @@ class ReportUIFeatures {
    */
   static openTabWithUrlData(data, url_, windowName) {
     const url = new URL(url_);
-    url.hash = toBinary(JSON.stringify(data));
-
-    // The popup's window.name is keyed by version+url+fetchTime, so we reuse/select tabs correctly
+    url.hash = Base64.toBinary(JSON.stringify(data));
     window.open(url.toString(), windowName);
-
-    /**
-     * @param {string} string
-     */
-    function toBinary(string) {
-      const codeUnits = new Uint16Array(string.length);
-      for (let i = 0; i < codeUnits.length; i++) {
-        codeUnits[i] = string.charCodeAt(i);
-      }
-      return btoa(String.fromCharCode(...new Uint8Array(codeUnits.buffer)));
-    }
   }
 
   /**

lighthouse-core/test/report/html/renderer/base64-test.js

@@ -0,0 +1,29 @@
+/**
+ * @license Copyright 2021 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 Base64 = require('../../../../report/html/renderer/base64.js');
+
+/* eslint-env jest */
+
+describe('base64', () => {
+  /** @type {string} */
+  function test(str) {
+    const roundtrip = Base64.fromBinary(Base64.toBinary(str));
+    expect(roundtrip.length).toEqual(str.length);
+    expect(roundtrip).toEqual(str);
+  }
+
+  it('works', () => {
+    test('');
+    test('hello');
+    test('{åß∂œ∑´}');
+    test('Some examples of emoji are 😃, 🧘🏻‍♂️, 🌍, 🍞, 🚗, 📞, 🎉, ♥️, 🍆, and 🏁.');
+    test('.'.repeat(125183));
+    test('😃'.repeat(125183));
+    test(JSON.stringify(require('../../../../../lighthouse-treemap/app/debug.json')));
+  });
+});

lighthouse-treemap/app/src/main.js

@@ -7,7 +7,7 @@
 
 /* eslint-env browser */
 
-/* globals I18n webtreemap strings TreemapUtil Tabulator Cell Row */
+/* globals I18n webtreemap strings TreemapUtil Base64 Tabulator Cell Row */
 
 const DUPLICATED_MODULES_IGNORE_THRESHOLD = 1024;
 const DUPLICATED_MODULES_IGNORE_ROOT_RATIO = 0.01;
@@ -734,24 +734,12 @@ function showError(message) {
   document.body.textContent = message;
 }
 
-/**
- * @param {string} encoded
- */
-function fromBinary(encoded) {
-  const binary = atob(encoded);
-  const bytes = new Uint8Array(binary.length);
-  for (let i = 0; i < bytes.length; i++) {
-    bytes[i] = binary.charCodeAt(i);
-  }
-  return String.fromCharCode(...new Uint16Array(bytes.buffer));
-}
-
 async function main() {
   /** @type {Record<string, any>} */
   let params = {};
   if (Object.fromEntries) {
     const queryParams = new URLSearchParams(window.location.search);
-    const hashParams = location.hash ? JSON.parse(fromBinary(location.hash.substr(1))) : {};
+    const hashParams = location.hash ? JSON.parse(Base64.fromBinary(location.hash.substr(1))) : {};
     params = {
       ...Object.fromEntries(queryParams.entries()),
       ...hashParams,

lighthouse-treemap/types/treemap.d.ts

@@ -1,4 +1,5 @@
 import _TreemapUtil = require('../app/src/util.js');
+import _Base64 = require('../../lighthouse-core/report/html/renderer/base64.js');
 
 export type Strings = Record<LH.Locale, import('../../lighthouse-core/lib/i18n/locales').LhlMessages>;
 
@@ -33,6 +34,7 @@ declare global {
     sort(data: any): void;
   };
   var TreemapUtil: typeof _TreemapUtil;
+  var Base64: typeof _Base64;
   var strings: Strings;
 
   interface Window {

types/html-renderer.d.ts

@@ -16,6 +16,7 @@ import _PwaCategoryRenderer = require('../lighthouse-core/report/html/renderer/p
 import _ReportRenderer = require('../lighthouse-core/report/html/renderer/report-renderer.js');
 import _ReportUIFeatures = require('../lighthouse-core/report/html/renderer/report-ui-features.js');
 import _Util = require('../lighthouse-core/report/html/renderer/util.js');
+import _Base64 = require('../lighthouse-core/report/html/renderer/base64.js');
 import _prepareLabData = require('../lighthouse-core/report/html/renderer/psi.js');
 import _FileNamer = require('../lighthouse-core/lib/file-namer.js');
 
@@ -33,6 +34,7 @@ declare global {
   var ReportRenderer: typeof _ReportRenderer;
   var ReportUIFeatures: typeof _ReportUIFeatures;
   var Util: typeof _Util;
+  var Base64: typeof _Base64;
   var prepareLabData: typeof _prepareLabData;
 
   interface Window {