lighthouse 8.5.1 → 8.6.0-dev.20211016

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 {getFilenamePrefix} from '../generator/file-namer.js';
+import {getLhrFilenamePrefix} from '../generator/file-namer.js';
 
 /**
  * @param {HTMLTableElement} tableEl
@@ -324,25 +324,13 @@ export class ReportUIFeatures {
   }
 
   /**
-   * Downloads a file (blob) using a[download].
-   * @param {Blob|File} blob The file to save.
+   * 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
    */
   _saveFile(blob) {
-    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);
+    const filename = getLhrFilenamePrefix(this.json);
+    this._dom.saveFile(blob, filename);
   }
 }

package/report/renderer/swap-locale-feature.js

@@ -0,0 +1,82 @@
+/**
+ * @license Copyright 2021 The Lighthouse Authors. 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 Creates a <select> element, filled with all supported locales
+ */
+
+/** @typedef {import('./dom.js').DOM} DOM */
+/** @typedef {import('./report-ui-features').ReportUIFeatures} ReportUIFeatures */
+
+export class SwapLocaleFeature {
+  /**
+   * @param {ReportUIFeatures} reportUIFeatures
+   * @param {DOM} dom
+   * @param {{onLocaleSelected: (localeModuleName: LH.Locale) => Promise<void>}} callbacks
+   *        Specifiy the URL where the i18n module script can be found, and the URLS for the locale JSON files.
+   */
+  constructor(reportUIFeatures, dom, callbacks) {
+    this._reportUIFeatures = reportUIFeatures;
+    this._dom = dom;
+    this._localeSelectedCallback = callbacks.onLocaleSelected;
+  }
+
+  /**
+   * @param {Array<LH.Locale>} locales
+   */
+  enable(locales) {
+    if (!this._reportUIFeatures.json.i18n.icuMessagePaths) {
+      throw new Error('missing icuMessagePaths');
+    }
+
+    this._dom.find('.lh-tools-locale', this._dom.document()).classList.remove('lh-hidden');
+
+    const currentLocale = this._reportUIFeatures.json.configSettings.locale;
+
+    const containerEl = this._dom.find('.lh-tools-locale__selector-wrapper', this._dom.document());
+    containerEl.removeAttribute('aria-hidden');
+    const selectEl = this._dom.createChildOf(containerEl, 'select', 'lh-locale-selector');
+    selectEl.name = 'lh-locale-list';
+    selectEl.setAttribute('role', 'menuitem');
+
+    const toggleEl = this._dom.find('.lh-tool-locale__button', this._dom.document());
+    toggleEl.addEventListener('click', () => {
+      toggleEl.classList.toggle('lh-active');
+    });
+
+    for (const locale of locales) {
+      const optionEl = this._dom.createChildOf(selectEl, 'option', '');
+      optionEl.value = locale;
+      if (locale === currentLocale) optionEl.selected = true;
+
+      // @ts-expect-error: waiting for typescript 4.5. Might need to add "ES2020.Intl"
+      // to tsconfig libs.
+      // https://github.com/microsoft/TypeScript/pull/44022#issuecomment-915087098
+      if (window.Intl && Intl.DisplayNames) {
+        // @ts-expect-error
+        const currentLocaleDisplay = new Intl.DisplayNames([currentLocale], {type: 'language'});
+        // @ts-expect-error
+        const optionLocaleDisplay = new Intl.DisplayNames([locale], {type: 'language'});
+
+        const optionLocaleName = optionLocaleDisplay.of(locale);
+        const currentLocaleName = currentLocaleDisplay.of(locale);
+        if (optionLocaleName !== currentLocaleName) {
+          optionEl.textContent = `${optionLocaleName} – ${currentLocaleName}`;
+        } else {
+          optionEl.textContent = currentLocaleName;
+        }
+      } else {
+        optionEl.textContent = locale;
+      }
+    }
+
+    selectEl.addEventListener('change', () => {
+      const locale = /** @type {LH.Locale} */ (selectEl.value);
+      this._localeSelectedCallback(locale);
+    });
+  }
+}

package/report/renderer/util.js

@@ -518,15 +518,31 @@ export class Util {
    * @param {LH.ReportResult.Category} category
    */
   static calculateCategoryFraction(category) {
-    const numAudits = category.auditRefs.length;
-
+    let numPassableAudits = 0;
     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 (Util.showAsPassed(auditRef.result)) numPassed++;
+      if (auditPassed) numPassed++;
     }
-    return {numPassed, numAudits, totalWeight};
+    return {numPassed, numPassableAudits, numInformative, totalWeight};
   }
 }
 

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

@@ -67,8 +67,6 @@ 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;
@@ -83,8 +81,6 @@ describe('PSI', () => {
 
         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');
 
         assert.equal(typeof result.finalScreenshotDataUri, 'string');
         assert.ok(result.finalScreenshotDataUri.startsWith('data:image/jpeg;base64,'));

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

@@ -7,7 +7,7 @@
 
 const assert = require('assert').strict;
 
-const getFilenamePrefix = require('../../generator/file-namer.js').getFilenamePrefix;
+const getLhrFilenamePrefix = require('../../generator/file-namer.js').getLhrFilenamePrefix;
 
 /* 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 = getFilenamePrefix(results);
+    const str = getLhrFilenamePrefix(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(), '49/54', 'fraction is included');
+      assert.equal(gauge.textContent.trim(), '13/18', '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,6 +69,18 @@ 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-axe-test.js

@@ -0,0 +1,86 @@
+/**
+ * @license Copyright 2021 The Lighthouse Authors. 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';
+
+/* eslint-env jest */
+
+import jsdom from 'jsdom';
+
+import {Util} from '../../renderer/util.js';
+import {DOM} from '../../renderer/dom.js';
+import {DetailsRenderer} from '../../renderer/details-renderer.js';
+import {CategoryRenderer} from '../../renderer/category-renderer.js';
+import {ReportRenderer} from '../../renderer/report-renderer.js';
+import sampleResultsOrig from '../../../lighthouse-core/test/results/sample_v2.json';
+
+describe('ReportRendererAxe', () => {
+  describe('with aXe', () => {
+    let axe;
+    let renderer;
+    let sampleResults;
+
+    beforeAll(async () => {
+      const {window} = new jsdom.JSDOM();
+      const dom = new DOM(window.document);
+      const detailsRenderer = new DetailsRenderer(dom);
+      const categoryRenderer = new CategoryRenderer(dom, detailsRenderer);
+      renderer = new ReportRenderer(dom, categoryRenderer);
+      sampleResults = Util.prepareReportResult(sampleResultsOrig);
+
+      // Needed by axe-core
+      // https://github.com/dequelabs/axe-core/blob/581c441c/doc/examples/jsdom/test/a11y.js#L24
+      global.window = global.self = window;
+      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/report-renderer-test.js

@@ -233,59 +233,4 @@ 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,17 +399,77 @@ describe('util helpers', () => {
   describe('#calculateCategoryFraction', () => {
     it('returns passed audits and total audits', () => {
       const category = {
+        id: 'performance',
         auditRefs: [
-          {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'}},
+          {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'},
         ],
       };
-      const {numPassed, numAudits, totalWeight} = Util.calculateCategoryFraction(category);
-      expect(numPassed).toEqual(3);
-      expect(numAudits).toEqual(4);
-      expect(totalWeight).toEqual(6);
+      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,
+      });
     });
   });
 });

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

@@ -16,7 +16,6 @@
   <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,7 +10,8 @@
   },
   "references": [
     {"path": "../types/lhr/"},
-    {"path": "./generator/"}
+    {"path": "./generator/"},
+    {"path": "../shared/"}
   ],
   "include": [
     "**/*.js",

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

@@ -5,7 +5,7 @@
  */
 
 import AuditDetails from '../../types/lhr/audit-details';
-import {FormattedIcu as FormattedIcu_} from '../../types/lhr/i18n';
+import {FormattedIcu as FormattedIcu_, IcuMessage as IcuMessage_} from '../../types/lhr/i18n';
 import LHResult from '../../types/lhr/lhr';
 import ReportResult_ from './report-result';
 import * as Settings from '../../types/lhr/settings';
@@ -17,6 +17,7 @@ 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,6 +5,24 @@
  */
 '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'));
+  },
 };