clients(psi): render treemap button (#12570)

GoogleChrome · May 27, 2021 · 2c6afcd · 2c6afcd
1 parent 1f27da7
commit 2c6afcd
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git a/lighthouse-core/report/html/renderer/psi.js b/lighthouse-core/report/html/renderer/psi.js
@@ -16,8 +16,7 @@
  */
 'use strict';
 
-/* globals self DOM PerformanceCategoryRenderer Util I18n DetailsRenderer ElementScreenshotRenderer */
-
+/* globals self DOM PerformanceCategoryRenderer Util I18n DetailsRenderer ElementScreenshotRenderer ReportUIFeatures */
 
 /**
  * Returns all the elements that PSI needs to render the report
@@ -81,6 +80,9 @@ function prepareLabData(LHResult, document) {
   const clonedScoreTemplate = dom.cloneTemplate('#tmpl-lh-scorescale', dom.document());
   const scoreScaleEl = dom.find('.lh-scorescale', clonedScoreTemplate);
 
+  const reportUIFeatures = new ReportUIFeatures(dom);
+  reportUIFeatures.json = lhResult;
+
   /** @param {HTMLElement} reportEl */
   const installFeatures = (reportEl) => {
     if (fullPageScreenshot) {
@@ -109,6 +111,17 @@ function prepareLabData(LHResult, document) {
       ElementScreenshotRenderer.installFullPageScreenshot(
         screenshotEl, fullPageScreenshot.screenshot);
     }
+
+    const showTreemapApp =
+      lhResult.audits['script-treemap-data'] && lhResult.audits['script-treemap-data'].details;
+    if (showTreemapApp) {
+      reportUIFeatures.addButton({
+        container: reportEl.querySelector('.lh-audit-group--metrics'),
+        text: Util.i18n.strings.viewTreemapLabel,
+        icon: 'treemap',
+        onClick: () => ReportUIFeatures.openTreemap(lhResult, 'url'),
+      });
+    }
   };
 
   return {scoreGaugeEl, perfCategoryEl, finalScreenshotDataUri, scoreScaleEl, installFeatures};
@@ -126,6 +139,13 @@ function _getFinalScreenshot(perfCategory) {
   return details.data;
 }
 
+// Defined by lib/file-namer.js, but that file does not exist in PSI. PSI doesn't use it, but
+// needs some basic definition so closure compiler accepts report-ui-features.js
+// @ts-expect-error - unused by typescript, used by closure compiler
+// eslint-disable-next-line no-unused-vars
+function getFilenamePrefix(lhr) {
+}
+
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = prepareLabData;
 } else {

diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js
@@ -181,14 +181,17 @@ class ReportUIFeatures {
   }
 
   /**
-   * @param {{text: string, icon?: string, onClick: () => void}} opts
+   * @param {{container?: Element, text: string, icon?: string, onClick: () => void}} opts
    */
   addButton(opts) {
+    // report-ui-features doesn't have a reference to the root report el, and PSI has
+    // 2 reports on the page (and not even attached to DOM when installFeatures is called..)
+    // so we need a container option to specify where the element should go.
     const metricsEl = this._document.querySelector('.lh-audit-group--metrics');
-    // Not supported without metrics group.
+    const containerEl = opts.container || metricsEl;
     if (!metricsEl) return;
 
-    let buttonsEl = metricsEl.querySelector('.lh-buttons');
+    let buttonsEl = containerEl.querySelector('.lh-buttons');
     if (!buttonsEl) buttonsEl = this._dom.createChildOf(metricsEl, 'div', 'lh-buttons');
 
     const classes = [
@@ -551,7 +554,6 @@ class ReportUIFeatures {
    * Opens a new tab to the treemap app and sends the JSON results using postMessage.
    * @param {LH.Result} json
    * @param {'postMessage'|'url'} method
-   * @protected
    */
   static openTreemap(json, method = 'postMessage') {
     const treemapData = json.audits['script-treemap-data'].details;

diff --git a/lighthouse-core/test/report/html/renderer/psi-test.js b/lighthouse-core/test/report/html/renderer/psi-test.js
@@ -21,6 +21,8 @@ const CriticalRequestChainRenderer =
     require('../../../../report/html/renderer/crc-details-renderer.js');
 const ElementScreenshotRenderer =
     require('../../../../report/html/renderer/element-screenshot-renderer.js');
+const ReportUIFeatures =
+    require('../../../../report/html/renderer/report-ui-features.js');
 
 const {itIfProtoExists, sampleResultsRoundtripStr} = testUtils.getProtoRoundTrip();
 const sampleResultsStr = fs.readFileSync(__dirname + '/../../../results/sample_v2.json', 'utf-8');
@@ -48,6 +50,7 @@ describe('DOM', () => {
     global.PerformanceCategoryRenderer = PerformanceCategoryRenderer;
     global.CriticalRequestChainRenderer = CriticalRequestChainRenderer;
     global.ElementScreenshotRenderer = ElementScreenshotRenderer;
+    global.ReportUIFeatures = ReportUIFeatures;
 
     const {window} = new jsdom.JSDOM(TEMPLATE_FILE);
     document = window.document;
@@ -62,6 +65,7 @@ describe('DOM', () => {
     global.PerformanceCategoryRenderer = undefined;
     global.CriticalRequestChainRenderer = undefined;
     global.ElementScreenshotRenderer = undefined;
+    global.ReportUIFeatures = undefined;
   });
 
   describe('psi prepareLabData helpers', () => {