From f6325e56b61c3b0cc5ef3882930b3e06635b888b Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Fri, 13 Nov 2020 15:57:00 -0600 Subject: [PATCH 1/9] report: add treemap opener, ?dev for localhost viewer and treemap --- .../html/renderer/report-ui-features.js | 55 ++++++++++++++----- .../report/html/report-template.html | 5 ++ 2 files changed, 46 insertions(+), 14 deletions(-) diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js index ae35e209bdb9..c150b4d49f3f 100644 --- a/lighthouse-core/report/html/renderer/report-ui-features.js +++ b/lighthouse-core/report/html/renderer/report-ui-features.js @@ -27,6 +27,11 @@ /** @typedef {import('./dom')} DOM */ +const IS_DEV = new URLSearchParams(window.location.search).has('dev'); +const APPS_ORIGIN = IS_DEV ? 'http://localhost:8000' : 'https://googlechrome.github.io/lighthouse'; +const VIEWER_URL = `${APPS_ORIGIN}/viewer/`; +const TREEMAP_URL = `${APPS_ORIGIN}/treemap/`; + /** * @param {HTMLTableElement} tableEl * @return {Array} @@ -457,8 +462,7 @@ class ReportUIFeatures { break; } case 'open-viewer': { - const viewerPath = '/lighthouse/viewer/'; - ReportUIFeatures.openTabAndSendJsonReport(this.json, viewerPath); + ReportUIFeatures.openTabAndSendJsonReportToViewer(this.json); break; } case 'save-gist': { @@ -478,6 +482,19 @@ class ReportUIFeatures { self.print(); } + _openTreemap() { + const treemapDebugData = /** @type {LH.Audit.Details.DebugData} */ ( + this.json.audits['script-treemap-data'].details); + if (!treemapDebugData) return; + + const windowName = `treemap-${this.json.requestedUrl}`; + /** @type {LH.Treemap.Options} */ + const treemapOptions = { + lhr: this.json, + }; + ReportUIFeatures.openTabAndSendData(treemapOptions, TREEMAP_URL, windowName); + } + /** * Keyup handler for the document. * @param {KeyboardEvent} e @@ -492,33 +509,43 @@ 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 {LH.Result} reportJson - * @param {string} viewerPath + * @param {LH.Result} json + * @protected + */ + static openTabAndSendJsonReportToViewer(json) { + // The popup's window.name is keyed by version+url+fetchTime, so we reuse/select tabs correctly + // @ts-ignore - If this is a v2 LHR, use old `generatedTime`. + const fallbackFetchTime = /** @type {string} */ (json.generatedTime); + const fetchTime = json.fetchTime || fallbackFetchTime; + const windowName = `${json.lighthouseVersion}-${json.requestedUrl}-${fetchTime}`; + ReportUIFeatures.openTabAndSendData(json, VIEWER_URL, windowName); + } + + /** + * Opens a new tab to an external page and sends data using postMessage. + * @param {Object} data + * @param {string} url + * @param {string} windowName * @protected */ - static openTabAndSendJsonReport(reportJson, viewerPath) { - const VIEWER_ORIGIN = 'https://googlechrome.github.io'; + static openTabAndSendData(data, url, windowName) { + const origin = new URL(url).origin; // 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(messageEvent) { - if (messageEvent.origin !== VIEWER_ORIGIN) { + if (messageEvent.origin !== origin) { return; } if (popup && messageEvent.data.opened) { - popup.postMessage({lhresults: json}, VIEWER_ORIGIN); + popup.postMessage(data, origin); window.removeEventListener('message', msgHandler); } }); // The popup's window.name is keyed by version+url+fetchTime, so we reuse/select tabs correctly - // @ts-expect-error - If this is a v2 LHR, use old `generatedTime`. - const fallbackFetchTime = /** @type {string} */ (json.generatedTime); - const fetchTime = json.fetchTime || fallbackFetchTime; - const windowName = `${json.lighthouseVersion}-${json.requestedUrl}-${fetchTime}`; - const popup = window.open(`${VIEWER_ORIGIN}${viewerPath}`, windowName); + const popup = window.open(url, windowName); } /** diff --git a/lighthouse-core/report/html/report-template.html b/lighthouse-core/report/html/report-template.html index 96c481103efe..2eabb1390d7e 100644 --- a/lighthouse-core/report/html/report-template.html +++ b/lighthouse-core/report/html/report-template.html @@ -48,6 +48,11 @@ // is in the document. const features = new ReportUIFeatures(dom); features.initFeatures(window.__LIGHTHOUSE_JSON__); + + // No UI for treemap yet. For now, must run this command in console. + globalThis._tmpFeatures = features; + const command = '_tmpFeatures._openTreemap();'; + console.log(`For treemap viewer, run: ${command}`); } window.addEventListener('DOMContentLoaded', __initLighthouseReport__); From 9ff8f20e4e145cf083df3f3ef63d92505f018620 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Fri, 13 Nov 2020 16:03:59 -0600 Subject: [PATCH 2/9] vercel --- .../report/html/renderer/report-ui-features.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js index c150b4d49f3f..6f712332a824 100644 --- a/lighthouse-core/report/html/renderer/report-ui-features.js +++ b/lighthouse-core/report/html/renderer/report-ui-features.js @@ -27,8 +27,13 @@ /** @typedef {import('./dom')} DOM */ -const IS_DEV = new URLSearchParams(window.location.search).has('dev'); -const APPS_ORIGIN = IS_DEV ? 'http://localhost:8000' : 'https://googlechrome.github.io/lighthouse'; +const APPS_ORIGIN = (() => { + const IS_VERCEL = window.location.host.endsWith('.vercel.app'); + const IS_DEV = new URLSearchParams(window.location.search).has('dev'); + if (IS_VERCEL) return `${window.location.host}/gh-pages`; + if (IS_DEV) return 'http://localhost:8000'; + return 'https://googlechrome.github.io/lighthouse'; +}); const VIEWER_URL = `${APPS_ORIGIN}/viewer/`; const TREEMAP_URL = `${APPS_ORIGIN}/treemap/`; From 9d8b9b4200af82ae104e162ea0844832e0c1f2e8 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Fri, 13 Nov 2020 16:06:42 -0600 Subject: [PATCH 3/9] oops lol --- lighthouse-core/report/html/renderer/report-ui-features.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js index 6f712332a824..33ae77b773b3 100644 --- a/lighthouse-core/report/html/renderer/report-ui-features.js +++ b/lighthouse-core/report/html/renderer/report-ui-features.js @@ -33,7 +33,7 @@ const APPS_ORIGIN = (() => { if (IS_VERCEL) return `${window.location.host}/gh-pages`; if (IS_DEV) return 'http://localhost:8000'; return 'https://googlechrome.github.io/lighthouse'; -}); +})(); const VIEWER_URL = `${APPS_ORIGIN}/viewer/`; const TREEMAP_URL = `${APPS_ORIGIN}/treemap/`; From 77ec8eea0e100a702e40d7100c9cf7009295e40b Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Fri, 13 Nov 2020 16:09:06 -0600 Subject: [PATCH 4/9] hm --- lighthouse-core/report/html/renderer/report-ui-features.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js index 33ae77b773b3..c7b9e082db0b 100644 --- a/lighthouse-core/report/html/renderer/report-ui-features.js +++ b/lighthouse-core/report/html/renderer/report-ui-features.js @@ -30,7 +30,7 @@ const APPS_ORIGIN = (() => { const IS_VERCEL = window.location.host.endsWith('.vercel.app'); const IS_DEV = new URLSearchParams(window.location.search).has('dev'); - if (IS_VERCEL) return `${window.location.host}/gh-pages`; + if (IS_VERCEL) return `https://${window.location.host}/gh-pages`; if (IS_DEV) return 'http://localhost:8000'; return 'https://googlechrome.github.io/lighthouse'; })(); From 8a5cc5e00b5c8c45ba6b0163a4b718a7b7e3d131 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Mon, 16 Nov 2020 11:23:57 -0600 Subject: [PATCH 5/9] pr --- .../html/renderer/report-ui-features.js | 32 +++++++++++-------- .../report/html/report-template.html | 2 +- .../app/src/lighthouse-report-viewer.js | 4 +-- 3 files changed, 21 insertions(+), 17 deletions(-) diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js index c7b9e082db0b..905a0caddf98 100644 --- a/lighthouse-core/report/html/renderer/report-ui-features.js +++ b/lighthouse-core/report/html/renderer/report-ui-features.js @@ -487,19 +487,6 @@ class ReportUIFeatures { self.print(); } - _openTreemap() { - const treemapDebugData = /** @type {LH.Audit.Details.DebugData} */ ( - this.json.audits['script-treemap-data'].details); - if (!treemapDebugData) return; - - const windowName = `treemap-${this.json.requestedUrl}`; - /** @type {LH.Treemap.Options} */ - const treemapOptions = { - lhr: this.json, - }; - ReportUIFeatures.openTabAndSendData(treemapOptions, TREEMAP_URL, windowName); - } - /** * Keyup handler for the document. * @param {KeyboardEvent} e @@ -523,7 +510,24 @@ class ReportUIFeatures { const fallbackFetchTime = /** @type {string} */ (json.generatedTime); const fetchTime = json.fetchTime || fallbackFetchTime; const windowName = `${json.lighthouseVersion}-${json.requestedUrl}-${fetchTime}`; - ReportUIFeatures.openTabAndSendData(json, VIEWER_URL, windowName); + ReportUIFeatures.openTabAndSendData({lhr: json}, VIEWER_URL, windowName); + } + + /** + * Opens a new tab to the treemap app and sends the JSON results using postMessage. + * @param {LH.Result} json + */ + static openTreemap(json) { + const treemapDebugData = /** @type {LH.Audit.Details.DebugData} */ ( + json.audits['script-treemap-data'].details); + if (!treemapDebugData) return; + + const windowName = `treemap-${json.requestedUrl}`; + /** @type {LH.Treemap.Options} */ + const treemapOptions = { + lhr: json, + }; + ReportUIFeatures.openTabAndSendData(treemapOptions, TREEMAP_URL, windowName); } /** diff --git a/lighthouse-core/report/html/report-template.html b/lighthouse-core/report/html/report-template.html index 2eabb1390d7e..74042a11934d 100644 --- a/lighthouse-core/report/html/report-template.html +++ b/lighthouse-core/report/html/report-template.html @@ -51,7 +51,7 @@ // No UI for treemap yet. For now, must run this command in console. globalThis._tmpFeatures = features; - const command = '_tmpFeatures._openTreemap();'; + const command = 'ReportUIFeatures.openTreemap(_tmpFeatures.json);'; console.log(`For treemap viewer, run: ${command}`); } window.addEventListener('DOMContentLoaded', __initLighthouseReport__); diff --git a/lighthouse-viewer/app/src/lighthouse-report-viewer.js b/lighthouse-viewer/app/src/lighthouse-report-viewer.js index 7aa8df02f2f3..51b9265a9716 100644 --- a/lighthouse-viewer/app/src/lighthouse-report-viewer.js +++ b/lighthouse-viewer/app/src/lighthouse-report-viewer.js @@ -404,8 +404,8 @@ class LighthouseReportViewer { */ _listenForMessages() { window.addEventListener('message', e => { - if (e.source === self.opener && e.data.lhresults) { - this._replaceReportHtml(e.data.lhresults); + if (e.source === self.opener && (e.data.lhr || e.data.lhresults)) { + this._replaceReportHtml(e.data.lhr || e.data.lhresults); if (self.opener && !self.opener.closed) { self.opener.postMessage({rendered: true}, '*'); From 7a61b617c7e1823a933c3846b8944841026586b7 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Mon, 16 Nov 2020 11:34:23 -0600 Subject: [PATCH 6/9] fix string collecting --- lighthouse-core/scripts/i18n/collect-strings.js | 1 + 1 file changed, 1 insertion(+) diff --git a/lighthouse-core/scripts/i18n/collect-strings.js b/lighthouse-core/scripts/i18n/collect-strings.js index 1cb7d07f14e5..dba8dfa3ed96 100644 --- a/lighthouse-core/scripts/i18n/collect-strings.js +++ b/lighthouse-core/scripts/i18n/collect-strings.js @@ -39,6 +39,7 @@ const ignoredPathComponents = [ '**/test/**', '**/*-test.js', '**/*-renderer.js', + '**/lighthouse-core/report/**/!(util.js)', // ignore all report files except util.js ]; /** From 67b081e8dba9b192f3c32103a115b505b3c7220b Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Mon, 16 Nov 2020 11:43:47 -0600 Subject: [PATCH 7/9] pr --- lighthouse-core/report/html/renderer/report-ui-features.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js index 905a0caddf98..59d047c549a7 100644 --- a/lighthouse-core/report/html/renderer/report-ui-features.js +++ b/lighthouse-core/report/html/renderer/report-ui-features.js @@ -532,7 +532,7 @@ class ReportUIFeatures { /** * Opens a new tab to an external page and sends data using postMessage. - * @param {Object} data + * @param {{lhr: LH.Result} | LH.Treemap.Options} data * @param {string} url * @param {string} windowName * @protected From 059867268fc70a515938128e1b320943a636d6e1 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Mon, 16 Nov 2020 17:16:33 -0600 Subject: [PATCH 8/9] throw --- lighthouse-core/report/html/renderer/report-ui-features.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js index 59d047c549a7..6c10570c2a84 100644 --- a/lighthouse-core/report/html/renderer/report-ui-features.js +++ b/lighthouse-core/report/html/renderer/report-ui-features.js @@ -520,7 +520,9 @@ class ReportUIFeatures { static openTreemap(json) { const treemapDebugData = /** @type {LH.Audit.Details.DebugData} */ ( json.audits['script-treemap-data'].details); - if (!treemapDebugData) return; + if (!treemapDebugData) { + throw new Error('no script treemap data found'); + } const windowName = `treemap-${json.requestedUrl}`; /** @type {LH.Treemap.Options} */ From be9c9ce9f35087cbea29a830849dfd13602c9c27 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Mon, 16 Nov 2020 18:50:24 -0600 Subject: [PATCH 9/9] refactor app origin --- .../html/renderer/report-ui-features.js | 25 ++++++++++--------- .../scripts/i18n/collect-strings.js | 1 - 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js index 6c10570c2a84..0e9192e65283 100644 --- a/lighthouse-core/report/html/renderer/report-ui-features.js +++ b/lighthouse-core/report/html/renderer/report-ui-features.js @@ -27,16 +27,6 @@ /** @typedef {import('./dom')} DOM */ -const APPS_ORIGIN = (() => { - const IS_VERCEL = window.location.host.endsWith('.vercel.app'); - const IS_DEV = new URLSearchParams(window.location.search).has('dev'); - if (IS_VERCEL) return `https://${window.location.host}/gh-pages`; - if (IS_DEV) return 'http://localhost:8000'; - return 'https://googlechrome.github.io/lighthouse'; -})(); -const VIEWER_URL = `${APPS_ORIGIN}/viewer/`; -const TREEMAP_URL = `${APPS_ORIGIN}/treemap/`; - /** * @param {HTMLTableElement} tableEl * @return {Array} @@ -45,6 +35,15 @@ function getTableRows(tableEl) { return Array.from(tableEl.tBodies[0].rows); } +function getAppsOrigin() { + const isVercel = window.location.host.endsWith('.vercel.app'); + const isDev = new URLSearchParams(window.location.search).has('dev'); + + if (isVercel) return `https://${window.location.host}/gh-pages`; + if (isDev) return 'http://localhost:8000'; + return 'https://googlechrome.github.io/lighthouse'; +} + class ReportUIFeatures { /** * @param {DOM} dom @@ -510,7 +509,8 @@ class ReportUIFeatures { const fallbackFetchTime = /** @type {string} */ (json.generatedTime); const fetchTime = json.fetchTime || fallbackFetchTime; const windowName = `${json.lighthouseVersion}-${json.requestedUrl}-${fetchTime}`; - ReportUIFeatures.openTabAndSendData({lhr: json}, VIEWER_URL, windowName); + const url = getAppsOrigin() + '/viewer/'; + ReportUIFeatures.openTabAndSendData({lhr: json}, url, windowName); } /** @@ -529,7 +529,8 @@ class ReportUIFeatures { const treemapOptions = { lhr: json, }; - ReportUIFeatures.openTabAndSendData(treemapOptions, TREEMAP_URL, windowName); + const url = getAppsOrigin() + '/treemap/'; + ReportUIFeatures.openTabAndSendData(treemapOptions, url, windowName); } /** diff --git a/lighthouse-core/scripts/i18n/collect-strings.js b/lighthouse-core/scripts/i18n/collect-strings.js index dba8dfa3ed96..1cb7d07f14e5 100644 --- a/lighthouse-core/scripts/i18n/collect-strings.js +++ b/lighthouse-core/scripts/i18n/collect-strings.js @@ -39,7 +39,6 @@ const ignoredPathComponents = [ '**/test/**', '**/*-test.js', '**/*-renderer.js', - '**/lighthouse-core/report/**/!(util.js)', // ignore all report files except util.js ]; /**