misc(viewer): accept lhr from fragment

build/build-viewer.js

@@ -48,6 +48,7 @@ async function run() {
     javascripts: [
       await generatorJsPromise,
       fs.readFileSync(require.resolve('idb-keyval/dist/idb-keyval-min.js'), 'utf8'),
+      fs.readFileSync(require.resolve('pako/dist/pako_inflate.js'), 'utf-8'),
       {path: '../../dist/report/viewer.js'},
       {path: 'src/*'},
     ],

lighthouse-viewer/app/src/lighthouse-report-viewer.js

@@ -5,7 +5,7 @@
  */
 'use strict';
 
-/* global DOM, ViewerUIFeatures, ReportRenderer, DragAndDrop, GithubApi, PSIApi, logger, idbKeyval */
+/* global DOM, ViewerUIFeatures, ReportRenderer, DragAndDrop, GithubApi, PSIApi, logger, idbKeyval, TextEncoding */
 
 /** @typedef {import('./psi-api').PSIParams} PSIParams */
 
@@ -103,6 +103,17 @@ class LighthouseReportViewer {
     const gistId = params.get('gist');
     const psiurl = params.get('psiurl');
     const jsonurl = params.get('jsonurl');
+    const gzip = params.get('gzip') === '1';
+
+    if (location.hash) {
+      const hashParams = JSON.parse(TextEncoding.fromBase64(location.hash.substr(1), {gzip}));
+      if (hashParams.lhr) {
+        this._replaceReportHtml(hashParams.lhr);
+        return Promise.resolve();
+      } else {
+        console.warn('URL hash is populated, but not decoded successfully', hashParams);
+      }
+    }
 
     if (!gistId && !psiurl && !jsonurl) return Promise.resolve();
 

lighthouse-viewer/types/viewer.d.ts

@@ -9,6 +9,7 @@ import {DOM as _DOM} from '../../report/renderer/dom.js';
 import {ReportRenderer as _ReportRenderer} from '../../report/renderer/report-renderer.js';
 import {ReportUIFeatures as _ReportUIFeatures} from '../../report/renderer/report-ui-features.js';
 import {Logger as _Logger} from '../../report/renderer/logger.js';
+import {TextEncoding as _TextEncoding} from '../../report/renderer/text-encoding.js';
 import {getFilenamePrefix as _getFilenamePrefix} from '../../report/renderer/file-namer.js';
 import _LighthouseReportViewer = require('../app/src/lighthouse-report-viewer.js');
 import _DragAndDrop = require('../app/src/drag-and-drop.js');
@@ -27,6 +28,7 @@ declare global {
   var ReportRenderer: typeof _ReportRenderer;
   var ReportUIFeatures: typeof _ReportUIFeatures;
   var Logger: typeof _Logger;
+  var TextEncoding: typeof _TextEncoding;
   var logger: _Logger;
   var getFilenamePrefix: typeof _getFilenamePrefix;
   var LighthouseReportViewer: typeof _LighthouseReportViewer;

report/clients/viewer.js

@@ -13,8 +13,10 @@ import {DOM} from '../renderer/dom.js';
 import {Logger} from '../renderer/logger.js';
 import {ReportRenderer} from '../renderer/report-renderer.js';
 import {ReportUIFeatures} from '../renderer/report-ui-features.js';
+import {TextEncoding} from '../renderer/text-encoding.js';
 
 window.DOM = DOM;
 window.Logger = Logger;
 window.ReportRenderer = ReportRenderer;
 window.ReportUIFeatures = ReportUIFeatures;
+window.TextEncoding = TextEncoding;

report/renderer/report-ui-features.js

@@ -505,7 +505,15 @@ export class ReportUIFeatures {
         break;
       }
       case 'open-viewer': {
-        ReportUIFeatures.openTabAndSendJsonReportToViewer(this.json);
+        // DevTools cannot send data with postMessage, and we only want to use the URL fragment
+        // approach for viewer when needed, so check the environment and choose accordingly.
+        if (this._dom.isDevTools()) {
+          ReportUIFeatures.openViewer(this.json);
+        } else {
+          const windowName = 'viewer-' + ReportUIFeatures.computeWindowNameSuffix(this.json);
+          const url = getAppsOrigin() + '/viewer/';
+          ReportUIFeatures.openTabWithUrlData({lhr: this.json}, url, windowName);
+        }
         break;
       }
       case 'save-gist': {
@@ -550,14 +558,14 @@ export class ReportUIFeatures {
 
   /**
    * Opens a new tab to the online viewer and sends the local page's JSON results
-   * to the online viewer using postMessage.
+   * to the online viewer using URL.fragment
    * @param {LH.Result} json
    * @protected
    */
-  static openTabAndSendJsonReportToViewer(json) {
+  static openViewer(json) {
     const windowName = 'viewer-' + this.computeWindowNameSuffix(json);
     const url = getAppsOrigin() + '/viewer/';
-    ReportUIFeatures.openTabAndSendData({lhr: json}, url, windowName);
+    ReportUIFeatures.openTabWithUrlData({lhr: json}, url, windowName);
   }
 
   /**