misc(viewer): support 3.x and legacy (2.x) reports in viewer

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

@@ -10,6 +10,8 @@
  * the report.
  */
 
+const VIEWER_ORIGIN = 'https://googlechrome.github.io';
+
 /* globals self URL Blob CustomEvent getFilenamePrefix window */
 
 class ReportUIFeatures {
@@ -318,7 +320,8 @@ class ReportUIFeatures {
         break;
       }
       case 'open-viewer': {
-        this.sendJsonReport();
+        const viewerPath = '/lighthouse/viewer/';
+        ReportUIFeatures.openTabAndSendJsonReport(this.json, viewerPath);
         break;
       }
       case 'save-gist': {
@@ -344,30 +347,37 @@ class ReportUIFeatures {
   /**
    * Opens a new tab to the online viewer and sends the local page's JSON results
    * to the online viewer using postMessage.
+   * @param {!ReportRenderer.ReportJSON} reportJson
+   * @param {string} viewerPath
    * @protected
    */
-  sendJsonReport() {
-    const VIEWER_ORIGIN = 'https://googlechrome.github.io';
-    const VIEWER_URL = `${VIEWER_ORIGIN}/lighthouse/viewer/`;
-
+  static openTabAndSendJsonReport(reportJson, viewerPath) {
+    let resolve;
+    const p = new Promise(res => resolve = res);
     // Chrome doesn't allow us to immediately postMessage to a popup right
     // after it's created. Normally, we could also listen for the popup window's
     // load event, however it is cross-domain and won't fire. Instead, listen
     // for a message from the target app saying "I'm open".
-    const json = this.json;
+    const json = reportJson;
     window.addEventListener('message', function msgHandler(/** @type {!Event} */ e) {
-      const messageEvent = /** @type {!MessageEvent<{opened: boolean}>} */ (e);
+      const messageEvent = /** @type {!MessageEvent<{opened: boolean, rendered: boolean}>} */ (e);
       if (messageEvent.origin !== VIEWER_ORIGIN) {
         return;
       }
-
       if (messageEvent.data.opened) {
         popup.postMessage({lhresults: json}, VIEWER_ORIGIN);
-        window.removeEventListener('message', msgHandler);
+      }
+      if (messageEvent.data.rendered) {
+        resolve(popup);
       }
     });
 
-    const popup = /** @type {!Window} */ (window.open(VIEWER_URL, '_blank'));
+    // The popup's window.name is keyed by version+url+fetchTime, so we reuse/select tabs correctly
+    const fetchTime = /** @type {!string} */ (json.fetchTime || json.generatedTime);
+    const windowName = `${json.lighthouseVersion}-${json.initialUrl}-${fetchTime}`;
+    const popup = /** @type {!Window} */ (window.open(`${VIEWER_ORIGIN}${viewerPath}`, windowName));
+
+    return p;
   }
 
   /**

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

@@ -113,6 +113,11 @@ class LighthouseReportViewer {
   _replaceReportHtml(json) {
     this._validateReportJson(json);
 
+    if (!json.lighthouseVersion.startsWith('3')) {
+      this._loadInLegacyViewerVersion(json);
+      return;
+    }
+
     const dom = new DOM(document);
     const renderer = new ReportRenderer(dom);
 
@@ -164,12 +169,27 @@ class LighthouseReportViewer {
       } catch (e) {
         throw new Error('Could not parse JSON file.');
       }
-
       this._reportIsFromGist = false;
       this._replaceReportHtml(json);
     }).catch(err => logger.error(err.message));
   }
 
+  /**
+   * Opens new tab with compatible report viewer version
+   * @param {!ReportRenderer.ReportJSON} reportJson
+   * @private
+   */
+  async _loadInLegacyViewerVersion(json) {
+    const warnMsg = `Version mismatch between viewer and JSON.
+    Opening new tab with compatible viewer.`;
+    const viewerPath = '/lighthouse/viewer2x/';
+
+    logger.log(warnMsg, false);
+    await ViewerUIFeatures.openTabAndSendJsonReport(json, viewerPath);
+    window.close();
+    logger.log(`${warnMsg} You can close this tab.`, false);
+  }
+
   /**
    * Reads a file and returns its content as a string.
    * @param {!File} file
@@ -296,6 +316,10 @@ class LighthouseReportViewer {
       if (e.source === self.opener && e.data.lhresults) {
         this._reportIsFromGist = false;
         this._replaceReportHtml(e.data.lhresults);
+
+        if (self.opener && !self.opener.closed) {
+          self.opener.postMessage({rendered: true}, '*');
+        }
         if (window.ga) {
           window.ga('send', 'event', 'report', 'open in viewer');
         }

lighthouse-viewer/app/src/viewer-ui-features.js

@@ -46,13 +46,6 @@ class ViewerUIFeatures extends ReportUIFeatures {
     return ReportGenerator.generateReportHtml(this.json);
   }
 
-  /**
-   * @override
-   */
-  sendJsonReport() {
-    throw new Error('Cannot send JSON to Viewer from Viewer.');
-  }
-
   /**
    * @override
    */