misc(viewer): switch to 2x viewer within the same tab (#5231)

GoogleChrome · May 16, 2018 · d5c0b19 · d5c0b19
1 parent b5a2bc3
commit d5c0b19
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 20 deletions.
diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js
@@ -10,8 +10,6 @@
  * the report.
  */
 
-const VIEWER_ORIGIN = 'https://googlechrome.github.io';
-
 /* globals self URL Blob CustomEvent getFilenamePrefix window */
 
 class ReportUIFeatures {
@@ -353,34 +351,27 @@ class ReportUIFeatures {
    * @protected
    */
   static openTabAndSendJsonReport(reportJson, viewerPath) {
-    let resolve;
-    const p = new Promise(res => resolve = res);
+    const VIEWER_ORIGIN = 'https://googlechrome.github.io';
     // 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 = reportJson;
     window.addEventListener('message', function msgHandler(/** @type {!Event} */ e) {
-      const messageEvent = /** @type {!MessageEvent<{opened: boolean, rendered: boolean}>} */ (e);
+      const messageEvent = /** @type {!MessageEvent<{opened: boolean}>} */ (e);
       if (messageEvent.origin !== VIEWER_ORIGIN) {
         return;
       }
-      // Most recent deployment
       if (messageEvent.data.opened) {
         popup.postMessage({lhresults: json}, VIEWER_ORIGIN);
-      }
-      if (messageEvent.data.rendered) {
         window.removeEventListener('message', msgHandler);
-        resolve(popup);
       }
     });
 
     // The popup's window.name is keyed by version+url+fetchTime, so we reuse/select tabs correctly
     const fetchTime = json.fetchTime || json.generatedTime;
     const windowName = `${json.lighthouseVersion}-${json.requestedUrl}-${fetchTime}`;
     const popup = /** @type {!Window} */ (window.open(`${VIEWER_ORIGIN}${viewerPath}`, windowName));
-
-    return p;
   }
 
   /**

diff --git a/lighthouse-viewer/app/src/lighthouse-report-viewer.js b/lighthouse-viewer/app/src/lighthouse-report-viewer.js
@@ -5,7 +5,7 @@
  */
 'use strict';
 
-/* global DOM, ViewerUIFeatures, ReportRenderer, DragAndDrop, GithubApi, logger */
+/* global DOM, ViewerUIFeatures, ReportRenderer, DragAndDrop, GithubApi, logger, idbKeyval */
 
 /**
  * Class that manages viewing Lighthouse reports.
@@ -175,19 +175,18 @@ class LighthouseReportViewer {
   }
 
   /**
-   * Opens new tab with compatible report viewer version
+   * Stores v2.x report in IDB, then navigates to legacy viewer in current tab
    * @param {!ReportRenderer.ReportJSON} reportJson
    * @private
    */
   _loadInLegacyViewerVersion(json) {
-    const warnMsg = `Version mismatch between viewer and JSON.
-    Opening new tab with compatible viewer.`;
-    const viewerPath = '/lighthouse/viewer2x/';
-
+    const warnMsg = `Version mismatch between viewer and JSON. Opening compatible viewer...`;
     logger.log(warnMsg, false);
-    ViewerUIFeatures.openTabAndSendJsonReport(json, viewerPath).then(_ => {
-      window.close();
-      logger.log(`${warnMsg} You can close this tab.`, false);
+
+    // Place report in IDB, then navigate current tab to the legacy viewer
+    const viewerPath = new URL('../viewer2x/', location.href);
+    idbKeyval.set('2xreport', json).then(_ => {
+      window.location.href = viewerPath;
     });
   }
 

diff --git a/lighthouse-viewer/app/src/viewer-ui-features.js b/lighthouse-viewer/app/src/viewer-ui-features.js
@@ -46,6 +46,13 @@ class ViewerUIFeatures extends ReportUIFeatures {
     return ReportGenerator.generateReportHtml(this.json);
   }
 
+  /**
+   * @override
+   */
+  openTabAndSendJsonReport() {
+    throw new Error('Cannot send JSON to Viewer from Viewer.');
+  }
+
   /**
    * @override
    */