lighthouse 8.5.1-dev.20211012 → 8.5.1

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,6 +83,8 @@ 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 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/externs.d.ts

@@ -155,8 +155,6 @@ export interface CliFlags extends Flags {
   enableErrorReporting?: boolean;
   /** Flag to print a list of all audits + categories. */
   listAllAudits: boolean;
-  /** Flag to print a list of all supported locales. */
-  listLocales: boolean;
   /** Flag to print a list of all required trace categories. */
   listTraceCategories: boolean;
   /** A preset audit of selected audit categories to run. */

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. */