clients(devtools): audits2 -> audits1 and defer reading resources

[connorjclark]

Current canary errors when saving as HTML. Issue is with how DevTools is bundled. Read comments for more.

Associated chromium change: https://chromium-review.googlesource.com/c/chromium/src/+/1696348

Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=979131

[connorjclark]

totally slipped on this

[patrickhulce]

this only affects the test fixture/expectation updates though right?

[patrickhulce]

LGTM

[patrickhulce]

I faintly recall commenting that folder/ vs. folder/* vs folder seem scary to me.

Is it time to expand the comment? :)

[connorjclark]

I think you were referring to folder vs folder/. This glob syntax seems obvious to me.

[patrickhulce]

I guess my point is, why the change now? Does this have any effect on our situation? If it doesn't, why are we changing it? If it does have an effect and was wrong before, then it probably deserves capturing whatever subtle mistake led to this.

AFAIK this should be the same if $fe_lh_dir is always going to exist, is that right?

[connorjclark]

It was always wrong and I didn't notice during any of the rolls to Chromium.

This landed 4 months ago, but for each roll I actually just ignored / deleted the dt-report-assets b/c the Chromium changes that necessitated it (saving as HTML) were still pending review. That just changed during this latest roll. So I've now noticed.

#7567 (comment) was wrong (see https://askubuntu.com/a/1151667/399299)

I'll try cp -r dist/dt-report-resources/. $fe_lh_dir (seems better?) and update with a comment.

[patrickhulce]

Hm that's weird maybe it's OS/shell/cp-impl dependent?

On my machine with zsh, cp -r folder/ other and cp -r folder/ other/ both result in the files of folder being copied into other without the extra folder/ layer suggested by https://askubuntu.com/a/1151667/399299

[patrickhulce]

Either way, very clearly stating the desired effect of the cp command in a comment with the important variations that won't work seems like a great idea to me :)

[connorjclark]

i think my issue was that the folder already existed, perhaps from much earlier messing around, so in that case it does copy into that folder.

[connorjclark]

so it would work in most cases, but not in the one small case where you happen to have a dt-report-resources folder :)

[patrickhulce]

oh dt-report-resources already existed in other/? interesting, I guess cp be all kinds of 😑

[patrickhulce]

maybe worth clarifying when exactly in the lifecycle these are/can be accessed since it's burned us?

[connorjclark]

By the time the Audits panel is visible, it's fine. Which is basically the beginning (so there's not really any restrictions to keep in mind for usage afaict). Just not at module-parsing time.

[connorjclark]

this is restricted to the tiniest bundle we have report-generator.js:

(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}(g.Lighthouse || (g.Lighthouse = {})).ReportGenerator = f()}})(function(){var define,module,exports;return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({"./html/html-report-assets.js":[function(require,module,exports){
/**
 * @license Copyright 2019 Google Inc. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
 */
'use strict';

/**
 * @fileoverview Instead of loading report assets form the filesystem, in Devtools we must load
 * them via Runtime.cachedResources. We use this module to shim
 * lighthouse-core/report/html/html-report-assets.js in Devtools.
 */

/* global Runtime */

// @ts-ignore: Runtime exists in Devtools.
const cachedResources = Runtime.cachedResources;

module.exports = {
  get REPORT_CSS() {
    return cachedResources['audits/lighthouse/report.css'];
  },
  get REPORT_JAVASCRIPT() {
    return cachedResources['audits/lighthouse/report.js'];
  },
  get REPORT_TEMPLATE() {
    return cachedResources['audits/lighthouse/template.html'];
  },
  get REPORT_TEMPLATES() {
    return cachedResources['audits/lighthouse/templates.html'];
  },
};

},{}],1:[function(require,module,exports){
/**
 * @license Copyright 2017 Google Inc. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
 */
'use strict';

const htmlReportAssets = require('./html/html-report-assets.js');

class ReportGenerator {
  /**
   * Replaces all the specified strings in source without serial replacements.
   * @param {string} source
   * @param {!Array<{search: string, replacement: string}>} replacements
   * @return {string}
   */
  static replaceStrings(source, replacements) {
    if (replacements.length === 0) {
      return source;
    }

    const firstReplacement = replacements[0];
    const nextReplacements = replacements.slice(1);
    return source
        .split(firstReplacement.search)
        .map(part => ReportGenerator.replaceStrings(part, nextReplacements))
        .join(firstReplacement.replacement);
  }

  /**
   * Returns the report HTML as a string with the report JSON and renderer JS inlined.
   * @param {LH.Result} lhr
   * @return {string}
   */
  static generateReportHtml(lhr) {
    const sanitizedJson = JSON.stringify(lhr)
      .replace(/</g, '\\u003c') // replaces opening script tags
      .replace(/\u2028/g, '\\u2028') // replaces line separators ()
      .replace(/\u2029/g, '\\u2029'); // replaces paragraph separators
    const sanitizedJavascript = htmlReportAssets.REPORT_JAVASCRIPT.replace(/<\//g, '\\u003c/');

    return ReportGenerator.replaceStrings(htmlReportAssets.REPORT_TEMPLATE, [
      {search: '%%LIGHTHOUSE_JSON%%', replacement: sanitizedJson},
      {search: '%%LIGHTHOUSE_JAVASCRIPT%%', replacement: sanitizedJavascript},
      {search: '/*%%LIGHTHOUSE_CSS%%*/', replacement: htmlReportAssets.REPORT_CSS},
      {search: '%%LIGHTHOUSE_TEMPLATES%%', replacement: htmlReportAssets.REPORT_TEMPLATES},
    ]);
  }

  /**
   * Converts the results to a CSV formatted string
   * Each row describes the result of 1 audit with
   *  - the name of the category the audit belongs to
   *  - the name of the audit
   *  - a description of the audit
   *  - the score type that is used for the audit
   *  - the score value of the audit
   *
   * @param {LH.Result} lhr
   * @return {string}
   */
  static generateReportCSV(lhr) {
    // To keep things "official" we follow the CSV specification (RFC4180)
    // The document describes how to deal with escaping commas and quotes etc.
    const CRLF = '\r\n';
    const separator = ',';
    /** @param {string} value @return {string} */
    const escape = value => `"${value.replace(/"/g, '""')}"`;

    // Possible TODO: tightly couple headers and row values
    const header = ['category', 'name', 'title', 'type', 'score'];
    const table = Object.values(lhr.categories).map(category => {
      return category.auditRefs.map(auditRef => {
        const audit = lhr.audits[auditRef.id];
        // CSV validator wants all scores to be numeric, use -1 for now
        const numericScore = audit.score === null ? -1 : audit.score;
        return [category.title, audit.id, audit.title, audit.scoreDisplayMode, numericScore]
          .map(value => value.toString())
          .map(escape);
      });
    });

    return [header].concat(...table)
      .map(row => row.join(separator)).join(CRLF);
  }

  /**
   * Creates the results output in a format based on the `mode`.
   * @param {LH.Result} lhr
   * @param {LH.Config.Settings['output']} outputModes
   * @return {string|string[]}
   */
  static generateReport(lhr, outputModes) {
    const outputAsArray = Array.isArray(outputModes);
    if (typeof outputModes === 'string') outputModes = [outputModes];

    const output = outputModes.map(outputMode => {
      // HTML report.
      if (outputMode === 'html') {
        return ReportGenerator.generateReportHtml(lhr);
      }
      // CSV report.
      if (outputMode === 'csv') {
        return ReportGenerator.generateReportCSV(lhr);
      }
      // JSON report.
      if (outputMode === 'json') {
        return JSON.stringify(lhr, null, 2);
      }

      throw new Error('Invalid output mode: ' + outputMode);
    });

    return outputAsArray ? output : output[0];
  }
}

module.exports = ReportGenerator;

},{"./html/html-report-assets.js":"./html/html-report-assets.js"}]},{},[1])(1)
});

[patrickhulce]

this only affects the test fixture/expectation updates though right?

[connorjclark]

Holding a bit - tomorrow me and Erik will explore if we can find an alternative solution.