lighthouse 8.5.1-dev.20211009 → 8.5.1

package/report/renderer/performance-category-renderer.js

@@ -172,35 +172,33 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
     }
 
     // Metrics.
-    const metricAudits = category.auditRefs.filter(audit => audit.group === 'metrics');
-    if (metricAudits.length) {
-      const metricAuditsEl = this.renderAuditGroup(groups.metrics);
+    const metricAuditsEl = this.renderAuditGroup(groups.metrics);
 
-      // Metric descriptions toggle.
-      const toggleTmpl = this.dom.createComponent('metricsToggle');
-      const _toggleEl = this.dom.find('.lh-metrics-toggle', toggleTmpl);
-      metricAuditsEl.append(..._toggleEl.childNodes);
+    // Metric descriptions toggle.
+    const toggleTmpl = this.dom.createComponent('metricsToggle');
+    const _toggleEl = this.dom.find('.lh-metrics-toggle', toggleTmpl);
+    metricAuditsEl.append(..._toggleEl.childNodes);
 
-      const metricsBoxesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-metrics-container');
+    const metricAudits = category.auditRefs.filter(audit => audit.group === 'metrics');
+    const metricsBoxesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-metrics-container');
 
-      metricAudits.forEach(item => {
-        metricsBoxesEl.appendChild(this._renderMetric(item));
-      });
+    metricAudits.forEach(item => {
+      metricsBoxesEl.appendChild(this._renderMetric(item));
+    });
 
-      const estValuesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-metrics__disclaimer');
-      const disclaimerEl = this.dom.convertMarkdownLinkSnippets(strings.varianceDisclaimer);
-      estValuesEl.appendChild(disclaimerEl);
+    const estValuesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-metrics__disclaimer');
+    const disclaimerEl = this.dom.convertMarkdownLinkSnippets(strings.varianceDisclaimer);
+    estValuesEl.appendChild(disclaimerEl);
 
-      // Add link to score calculator.
-      const calculatorLink = this.dom.createChildOf(estValuesEl, 'a', 'lh-calclink');
-      calculatorLink.target = '_blank';
-      calculatorLink.textContent = strings.calculatorLink;
-      this.dom.safelySetHref(calculatorLink, this._getScoringCalculatorHref(category.auditRefs));
+    // Add link to score calculator.
+    const calculatorLink = this.dom.createChildOf(estValuesEl, 'a', 'lh-calclink');
+    calculatorLink.target = '_blank';
+    calculatorLink.textContent = strings.calculatorLink;
+    this.dom.safelySetHref(calculatorLink, this._getScoringCalculatorHref(category.auditRefs));
 
 
-      metricAuditsEl.classList.add('lh-audit-group--metrics');
-      element.appendChild(metricAuditsEl);
-    }
+    metricAuditsEl.classList.add('lh-audit-group--metrics');
+    element.appendChild(metricAuditsEl);
 
     // Filmstrip
     const timelineEl = this.dom.createChildOf(element, 'div', 'lh-filmstrip-container');

package/report/renderer/report-renderer.js

@@ -166,12 +166,6 @@ export class ReportRenderer {
         {gatherMode: report.gatherMode}
       );
 
-      // For normal score gauges (not the fraction gauge), set the gauge href
-      // to link to the category.
-      const gaugeWrapperEl = /** @type {HTMLAnchorElement} */ (
-        categoryGauge.querySelector('a.lh-gauge__wrapper'));
-      if (gaugeWrapperEl) this._dom.safelySetHref(gaugeWrapperEl, `#${category.id}`);
-
       if (Util.isPluginCategory(category.id)) {
         pluginGauges.push(categoryGauge);
       } else if (renderer.renderCategoryScore === categoryRenderer.renderCategoryScore) {
@@ -262,7 +256,6 @@ export class ReportRenderer {
     }
 
     const reportFragment = this._dom.createFragment();
-    reportFragment.append(this._dom.createComponent('styles'));
     const topbarDocumentFragment = this._renderReportTopbar(report);
 
     reportFragment.appendChild(topbarDocumentFragment);

package/report/renderer/report-ui-features.js

@@ -28,7 +28,7 @@ import {toggleDarkTheme} from './features-util.js';
 import {openTreemap} from './open-tab.js';
 import {TopbarFeatures} from './topbar-features.js';
 import {Util} from './util.js';
-import {getLhrFilenamePrefix} from '../generator/file-namer.js';
+import {getFilenamePrefix} from '../generator/file-namer.js';
 
 /**
  * @param {HTMLTableElement} tableEl
@@ -324,13 +324,25 @@ export class ReportUIFeatures {
   }
 
   /**
-   * DevTools uses its own file manager to download files, so it redefines this function.
-   * Wrapper is necessary so DevTools can still override this function.
-   *
-   * @param {Blob|File} blob
+   * Downloads a file (blob) using a[download].
+   * @param {Blob|File} blob The file to save.
    */
   _saveFile(blob) {
-    const filename = getLhrFilenamePrefix(this.json);
-    this._dom.saveFile(blob, filename);
+    const filename = getFilenamePrefix({
+      finalUrl: this.json.finalUrl,
+      fetchTime: this.json.fetchTime,
+    });
+
+    const ext = blob.type.match('json') ? '.json' : '.html';
+
+    const a = this._dom.createElement('a');
+    a.download = `${filename}${ext}`;
+    this._dom.safelySetBlobHref(a, blob);
+    this._document.body.appendChild(a); // Firefox requires anchor to be in the DOM.
+    a.click();
+
+    // cleanup.
+    this._document.body.removeChild(a);
+    setTimeout(() => URL.revokeObjectURL(a.href), 500);
   }
 }

package/report/renderer/util.js

@@ -518,31 +518,15 @@ export class Util {
    * @param {LH.ReportResult.Category} category
    */
   static calculateCategoryFraction(category) {
-    let numPassableAudits = 0;
+    const numAudits = category.auditRefs.length;
+
     let numPassed = 0;
-    let numInformative = 0;
     let totalWeight = 0;
     for (const auditRef of category.auditRefs) {
-      const auditPassed = Util.showAsPassed(auditRef.result);
-      const notDisplayed = !auditRef.group && category.id === 'performance';
-
-      // Don't count the audit if it's manual, N/A, or isn't displayed.
-      if (notDisplayed ||
-          auditRef.result.scoreDisplayMode === 'manual' ||
-          auditRef.result.scoreDisplayMode === 'notApplicable') {
-        continue;
-      } else if (auditRef.result.scoreDisplayMode === 'informative') {
-        if (!auditPassed) {
-          ++numInformative;
-        }
-        continue;
-      }
-
-      ++numPassableAudits;
       totalWeight += auditRef.weight;
-      if (auditPassed) numPassed++;
+      if (Util.showAsPassed(auditRef.result)) numPassed++;
     }
-    return {numPassed, numPassableAudits, numInformative, totalWeight};
+    return {numPassed, numAudits, totalWeight};
   }
 }
 

package/report/test/clients/psi-test.js

@@ -67,6 +67,8 @@ describe('PSI', () => {
         // Check that the report exists and has some content.
         assert.ok(result.perfCategoryEl instanceof document.defaultView.Element);
         assert.ok(result.perfCategoryEl.outerHTML.length > 50000, 'perfCategory HTML is populated');
+        assert.ok(!result.perfCategoryEl.outerHTML.includes('lh-permalink'),
+            'PSI\'s perfCategory HTML doesn\'t include a lh-permalink element');
         // Assume using default locale.
         const title = result.perfCategoryEl.querySelector('.lh-audit-group--metrics')
           .querySelector('.lh-audit-group__title').textContent;
@@ -81,8 +83,7 @@ describe('PSI', () => {
 
         assert.ok(result.perfCategoryEl instanceof document.defaultView.Element);
         assert.ok(result.perfCategoryEl.outerHTML.length > 50000, 'perfCategory HTML is populated');
-        // styles for .lh-permalink are ok, but not the HTML
-        assert.ok(!result.perfCategoryEl.outerHTML.includes('class="lh-permalink'),
+        assert.ok(!result.perfCategoryEl.outerHTML.includes('lh-permalink'),
             'PSI\'s perfCategory HTML doesn\'t include a lh-permalink element');
 
         assert.equal(typeof result.finalScreenshotDataUri, 'string');

package/report/test/generator/file-namer-test.js

@@ -7,7 +7,7 @@
 
 const assert = require('assert').strict;
 
-const getLhrFilenamePrefix = require('../../generator/file-namer.js').getLhrFilenamePrefix;
+const getFilenamePrefix = require('../../generator/file-namer.js').getFilenamePrefix;
 
 /* eslint-env jest */
 describe('file-namer helper', () => {
@@ -16,7 +16,7 @@ describe('file-namer helper', () => {
       finalUrl: 'https://testexample.com',
       fetchTime: '2017-01-06T02:34:56.217Z',
     };
-    const str = getLhrFilenamePrefix(results);
+    const str = getFilenamePrefix(results);
     // we want the filename to match user timezone, however these tests will run on multiple TZs
     assert.ok(str.startsWith('testexample.com'), 'hostname is missing');
     assert.ok(str.includes('2017-'), 'full year is missing');

package/report/test/renderer/category-renderer-test.js

@@ -297,7 +297,7 @@ describe('CategoryRenderer', () => {
       );
 
       const gauge = categoryDOM.querySelector('.lh-fraction__content');
-      assert.equal(gauge.textContent.trim(), '13/18', 'fraction is included');
+      assert.equal(gauge.textContent.trim(), '49/54', 'fraction is included');
 
       const score = categoryDOM.querySelector('.lh-category-header');
       const title = score.querySelector('.lh-fraction__label');

package/report/test/renderer/performance-category-renderer-test.js

@@ -69,18 +69,6 @@ describe('PerfCategoryRenderer', () => {
     assert.equal(timelineElements.length + nontimelineElements.length, metricAudits.length);
   });
 
-  it('does not render metrics section if no metric group audits', () => {
-    // Remove metrics from category
-    const newCategory = JSON.parse(JSON.stringify(category));
-    newCategory.auditRefs = category.auditRefs.filter(audit => audit.group !== 'metrics');
-
-    const categoryDOM = renderer.render(newCategory, sampleResults.categoryGroups);
-    const sections = categoryDOM.querySelectorAll('.lh-category > .lh-audit-group');
-    const metricSection = categoryDOM.querySelector('.lh-audit-group--metrics');
-    assert.ok(!metricSection);
-    assert.equal(sections.length, 4);
-  });
-
   it('renders the metrics variance disclaimer as markdown', () => {
     const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
     const disclaimerEl =

package/report/test/renderer/report-renderer-test.js

@@ -233,4 +233,59 @@ describe('ReportRenderer', () => {
       .querySelectorAll('.lh-audit--notapplicable').length;
     assert.strictEqual(notApplicableCount, notApplicableElementCount);
   });
+
+  describe('axe-core', () => {
+    let axe;
+
+    beforeAll(async () =>{
+      // Needed by axe-core
+      // https://github.com/dequelabs/axe-core/blob/581c441c/doc/examples/jsdom/test/a11y.js#L24
+      global.window = global.self;
+      global.Node = global.self.Node;
+      global.Element = global.self.Element;
+
+      // axe-core must be imported after the global polyfills
+      axe = (await import('axe-core')).default;
+    });
+
+    afterAll(() => {
+      global.window = undefined;
+      global.Node = undefined;
+      global.Element = undefined;
+    });
+
+    it('renders without axe violations', () => {
+      const container = renderer._dom._document.createElement('main');
+      const output = renderer.renderReport(sampleResults, container);
+      renderer._dom._document.body.appendChild(container);
+
+      const config = {
+        rules: {
+          // Reports may have duplicate ids
+          // https://github.com/GoogleChrome/lighthouse/issues/9432
+          'duplicate-id': {enabled: false},
+          'duplicate-id-aria': {enabled: false},
+          'landmark-no-duplicate-contentinfo': {enabled: false},
+          // The following rules are disable for axe-core + jsdom compatibility
+          // https://github.com/dequelabs/axe-core/tree/b573b1c1/doc/examples/jest_react#to-run-the-example
+          'color-contrast': {enabled: false},
+          'link-in-text-block': {enabled: false},
+          // Report has empty links prior to i18n-ing.
+          'link-name': {enabled: false},
+          // May not be a real issue. https://github.com/dequelabs/axe-core/issues/2958
+          'nested-interactive': {enabled: false},
+        },
+      };
+
+      return new Promise(resolve => {
+        axe.run(output, config, (error, {violations}) => {
+          expect(error).toBeNull();
+          expect(violations).toEqual([]);
+          resolve();
+        });
+      });
+    // This test takes 40s on fast hardware, and 50-60s on GHA.
+    // https://github.com/dequelabs/axe-core/tree/b573b1c1/doc/examples/jest_react#timeout-issues
+    }, /* timeout= */ 100 * 1000);
+  });
 });

package/report/test/renderer/util-test.js

@@ -399,77 +399,17 @@ describe('util helpers', () => {
   describe('#calculateCategoryFraction', () => {
     it('returns passed audits and total audits', () => {
       const category = {
-        id: 'performance',
         auditRefs: [
-          {weight: 3, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
-          {weight: 2, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
-          {weight: 0, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
-          {weight: 1, result: {score: 0, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
+          {weight: 3, result: {score: 1, scoreDisplayMode: 'binary'}},
+          {weight: 2, result: {score: 1, scoreDisplayMode: 'binary'}},
+          {weight: 0, result: {score: 1, scoreDisplayMode: 'binary'}},
+          {weight: 1, result: {score: 0, scoreDisplayMode: 'binary'}},
         ],
       };
-      const fraction = Util.calculateCategoryFraction(category);
-      expect(fraction).toEqual({
-        numPassableAudits: 4,
-        numPassed: 3,
-        numInformative: 0,
-        totalWeight: 6,
-      });
-    });
-
-    it('ignores manual audits, N/A audits, and performance audits with no group', () => {
-      const category = {
-        id: 'performance',
-        auditRefs: [
-          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
-          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}},
-          {weight: 1, result: {score: 0, scoreDisplayMode: 'manual'}, group: 'diagnostics'},
-          {weight: 1, result: {score: 0, scoreDisplayMode: 'notApplicable'}, group: 'diagnostics'},
-        ],
-      };
-      const fraction = Util.calculateCategoryFraction(category);
-      expect(fraction).toEqual({
-        numPassableAudits: 1,
-        numPassed: 1,
-        numInformative: 0,
-        totalWeight: 1,
-      });
-    });
-
-    it('does not ignore audits with no group in non-performance category', () => {
-      const category = {
-        id: 'seo',
-        auditRefs: [
-          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
-          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}},
-          {weight: 1, result: {score: 0, scoreDisplayMode: 'manual'}, group: 'diagnostics'},
-        ],
-      };
-      const fraction = Util.calculateCategoryFraction(category);
-      expect(fraction).toEqual({
-        numPassableAudits: 2,
-        numPassed: 2,
-        numInformative: 0,
-        totalWeight: 2,
-      });
-    });
-
-    it('tracks informative audits separately', () => {
-      const category = {
-        id: 'performance',
-        auditRefs: [
-          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
-          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
-          {weight: 0, result: {score: 1, scoreDisplayMode: 'informative'}, group: 'diagnostics'},
-          {weight: 1, result: {score: 0, scoreDisplayMode: 'informative'}, group: 'diagnostics'},
-        ],
-      };
-      const fraction = Util.calculateCategoryFraction(category);
-      expect(fraction).toEqual({
-        numPassableAudits: 2,
-        numPassed: 2,
-        numInformative: 2,
-        totalWeight: 2,
-      });
+      const {numPassed, numAudits, totalWeight} = Util.calculateCategoryFraction(category);
+      expect(numPassed).toEqual(3);
+      expect(numAudits).toEqual(4);
+      expect(totalWeight).toEqual(6);
     });
   });
 });

package/report/test-assets/faux-psi-template.html

@@ -16,6 +16,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
   <title>Faux PageSpeed Report</title>
+  <style>/*%%LIGHTHOUSE_CSS%%*/</style>
 
   <style>
 /* Inspired by https://codepen.io/markcaron/pen/MvGRYV?editors=1100 but improved. s*/

package/report/tsconfig.json

@@ -10,8 +10,7 @@
   },
   "references": [
     {"path": "../types/lhr/"},
-    {"path": "./generator/"},
-    {"path": "../shared/"}
+    {"path": "./generator/"}
   ],
   "include": [
     "**/*.js",

package/report/types/html-renderer.d.ts

@@ -5,7 +5,7 @@
  */
 
 import AuditDetails from '../../types/lhr/audit-details';
-import {FormattedIcu as FormattedIcu_, IcuMessage as IcuMessage_} from '../../types/lhr/i18n';
+import {FormattedIcu as FormattedIcu_} from '../../types/lhr/i18n';
 import LHResult from '../../types/lhr/lhr';
 import ReportResult_ from './report-result';
 import * as Settings from '../../types/lhr/settings';
@@ -17,7 +17,6 @@ declare global {
     export import Result = LHResult;
     export import ReportResult = ReportResult_;
     export import Locale = Settings.Locale;
-    export type IcuMessage = IcuMessage_;
     export type FormattedIcu<T> = FormattedIcu_<T>;
 
     module Audit {

package/root.js

@@ -5,24 +5,6 @@
  */
 'use strict';
 
-const fs = require('fs');
-const path = require('path');
-const url = require('url');
-
-// import {dirname} from 'path';
-// import {fileURLToPath} from 'url';
-
 module.exports = {
   LH_ROOT: __dirname,
-  /**
-   * Return parsed json object.
-   * Resolves path relative to importMeta.url (if provided) or LH_ROOT (if not provided).
-   * @param {string} filePath Can be an absolute or relative path.
-   * @param {ImportMeta=} importMeta
-   */
-  readJson(filePath, importMeta) {
-    const dir = importMeta ? path.dirname(url.fileURLToPath(importMeta.url)) : __dirname;
-    filePath = path.resolve(dir, filePath);
-    return JSON.parse(fs.readFileSync(filePath, 'utf-8'));
-  },
 };

package/third-party/chromium-synchronization/inspector-issueAdded-types-test.js

@@ -7,7 +7,7 @@
 
 const fs = require('fs');
 const fetch = require('node-fetch');
-const {LH_ROOT} = require('../../root.js');
+const {LH_ROOT} = require('../../../root.js');
 
 const inspectorIssuesGathererPath = LH_ROOT +
   '/lighthouse-core/gather/gatherers/inspector-issues.js';
@@ -31,8 +31,7 @@ describe('issueAdded types', () => {
       .sort();
   });
 
-  // TODO: https://github.com/GoogleChrome/lighthouse/issues/13147
-  it.skip('should notify us if something changed', () => {
+  it('should notify us if something changed', () => {
     expect(inspectorIssueDetailsTypes).toMatchInlineSnapshot(`
       Array [
         "blockedByResponseIssueDetails",
@@ -45,8 +44,7 @@ describe('issueAdded types', () => {
     `);
   });
 
-  // TODO: https://github.com/GoogleChrome/lighthouse/issues/13147
-  it.skip('are each handled explicitly in the gatherer', () => {
+  it('are each handled explicitly in the gatherer', () => {
     // Regex relies on the typecasts
     const sourceTypeMatches = inspectorIssuesGathererSource.matchAll(
       /LH\.Crdp\.Audits\.(.*?Details)>/g

package/third-party/chromium-synchronization/installability-errors-test.js

@@ -74,8 +74,7 @@ Array [
 `);
   });
 
-  // TODO: https://github.com/GoogleChrome/lighthouse/issues/13147
-  it.skip('are each handled explicitly in the gatherer', () => {
+  it('are each handled explicitly in the gatherer', () => {
     const errorStrings = Object.keys(InstallableManifestAudit.UIStrings)
       .filter(key => chromiumErrorIds.includes(key))
       .sort();

package/tsconfig-all.json

@@ -9,7 +9,6 @@
     {"path": "./lighthouse-viewer/"},
     {"path": "./lighthouse-treemap/"},
     {"path": "./flow-report/"},
-    {"path": "./shared/"},
   ],
   "files": [],
   "include": [],

package/tsconfig-base.json

@@ -19,6 +19,6 @@
 
     // "listFiles": true,
     // "noErrorTruncation": true,
-    // "extendedDiagnostics": true,
+    "extendedDiagnostics": true,
   },
 }

package/tsconfig.json

@@ -10,7 +10,6 @@
     {"path": "./types/lhr/"},
     {"path": "./report/"},
     {"path": "./report/generator/"},
-    {"path": "./shared/"},
   ],
   "include": [
     "root.js",
@@ -23,13 +22,13 @@
 
     // TODO(esmodules): JSON files included via resolveJsonModule. Removable on the switch to ES Modules.
     "package.json",
+    "lighthouse-core/lib/i18n/locales/en-US.json",
     "lighthouse-core/test/results/sample_v2.json",
     "lighthouse-core/lib/sd-validation/assets/*.json",
     "lighthouse-core/test/fixtures/unresolved-perflog.json",
     "lighthouse-core/test/fixtures/traces/lcp-m78.devtools.log.json",
     "third-party/snyk/snapshot.json",
     "lighthouse-core/audits/byte-efficiency/polyfill-graph-data.json",
-    "shared/localization/locales/en-US.json",
   ],
   "exclude": [
     "lighthouse-core/test/audits/**/*.js",
@@ -80,6 +79,8 @@
     "lighthouse-core/test/lib/dependency-graph/simulator/simulator-test.js",
     "lighthouse-core/test/lib/emulation-test.js",
     "lighthouse-core/test/lib/i18n/i18n-test.js",
+    "lighthouse-core/test/lib/i18n/locales-test.js",
+    "lighthouse-core/test/lib/i18n/swap-locale-test.js",
     "lighthouse-core/test/lib/icons-test.js",
     "lighthouse-core/test/lib/lh-element-test.js",
     "lighthouse-core/test/lib/manifest-parser-test.js",

package/types/config.d.ts

@@ -134,7 +134,6 @@ declare module Config {
     auditRefs: AuditRefJson[];
     description?: string | IcuMessage;
     manualDescription?: string | IcuMessage;
-    supportedModes?:  Gatherer.GatherMode[];
   }
 
   interface GroupJson {

package/types/lhr/flow.d.ts

@@ -11,11 +11,6 @@ declare module FlowResult {
     lhr: Result;
     name: string;
   }
-
-  interface LhrRef {
-    value: Result;
-    index: number;
-  }
 }
 
 /**
@@ -24,8 +19,6 @@ declare module FlowResult {
 interface FlowResult {
   /** Ordered list of flow steps, each corresponding to a navigation, timespan, or snapshot. */
   steps: FlowResult.Step[];
-  /** Name given to this user flow. */
-  name: string;
 }
 
 export default FlowResult;

package/types/lhr/i18n.d.ts

@@ -4,6 +4,9 @@
  * 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.
  */
 
+// TODO(bckenny): i18n types should not be necessary for the LHR, but too difficult
+// to unravel from audit-details right now.
+
 export type IcuMessage = {
   // NOTE: `i18nId` rather than just `id` to make tsc typing easier (vs type branding which won't survive JSON roundtrip).
   /** The id locating this message in the locale message json files. */