lighthouse 8.6.0-dev.20211021 → 8.6.0

package/flow-report/src/util.ts

@@ -79,6 +79,11 @@ export function useFlowResult(): LH.FlowResult {
   return flowResult;
 }
 
+export function useLocale(): LH.Locale {
+  const flowResult = useFlowResult();
+  return flowResult.steps[0].lhr.configSettings.locale;
+}
+
 export function useHashParam(param: string) {
   const [paramValue, setParamValue] = useState(getHashParam(param));
 

package/flow-report/src/wrappers/category-score.tsx

@@ -23,6 +23,9 @@ export const CategoryScore: FunctionComponent<{
     // Category label is displayed in the navigation header.
     const label = el.querySelector('.lh-gauge__label,.lh-fraction__label');
     if (label) label.remove();
+    // Background is displayed in individual reports, but not on the summary page.
+    const bg = el.querySelector('.lh-fraction__background');
+    if (bg) bg.remove();
 
     if (ref.current) ref.current.append(el);
     return () => {

package/flow-report/test/common-test.tsx

@@ -82,7 +82,7 @@ describe('FlowStepThumbnail', () => {
 
     expect(thumbnail.src).toContain('frame1');
     await act(() => {
-      jest.advanceTimersByTime(501);
+      jest.advanceTimersByTime(251);
     });
     expect(thumbnail.src).toContain('frame2');
   });

package/flow-report/test/summary/category-test.tsx

@@ -44,8 +44,7 @@ describe('SummaryTooltip', () => {
 
     expect(root.getByText('Average')).toBeTruthy();
     expect(() => root.getByText(/^[0-9]+$/)).toThrow();
-    expect(root.getByText('2 audits passed')).toBeTruthy();
-    expect(root.getByText('3 passable audits')).toBeTruthy();
+    expect(root.getByText('2 audits passed / 3 passable audits')).toBeTruthy();
   });
 
   it('renders tooltip without rating', async () => {
@@ -66,8 +65,7 @@ describe('SummaryTooltip', () => {
 
     expect(() => root.getByText(/^(Average|Good|Poor)$/)).toThrow();
     expect(() => root.getByText(/^[0-9]+$/)).toThrow();
-    expect(root.getByText('2 audits passed')).toBeTruthy();
-    expect(root.getByText('3 passable audits')).toBeTruthy();
+    expect(root.getByText('2 audits passed / 3 passable audits')).toBeTruthy();
   });
 
   it('renders scored category tooltip with score', async () => {
@@ -88,8 +86,7 @@ describe('SummaryTooltip', () => {
 
     expect(root.getByText('Good')).toBeTruthy();
     expect(root.getByText('100')).toBeTruthy();
-    expect(root.getByText('2 audits passed')).toBeTruthy();
-    expect(root.getByText('3 passable audits')).toBeTruthy();
+    expect(root.getByText('2 audits passed / 3 passable audits')).toBeTruthy();
   });
 
   it('renders informative audit count if any', async () => {
@@ -110,8 +107,7 @@ describe('SummaryTooltip', () => {
 
     expect(root.getByText('Good')).toBeTruthy();
     expect(root.getByText('100')).toBeTruthy();
-    expect(root.getByText('2 audits passed')).toBeTruthy();
-    expect(root.getByText('2 passable audits')).toBeTruthy();
-    expect(root.getByText('1 informative audit')).toBeTruthy();
+    expect(root.getByText('2 audits passed / 2 passable audits')).toBeTruthy();
+    expect(root.getByText('1 informative audits')).toBeTruthy();
   });
 });

package/flow-report/test/summary/summary-test.tsx

@@ -34,7 +34,7 @@ describe('SummaryHeader', () => {
     const lhrCounts = root.getByText(/·/);
     expect(root.getByText('Summary')).toBeTruthy();
     expect(lhrCounts.textContent).toEqual(
-      '2 navigation reports · 1 timespan report · 1 snapshot report'
+      '2 navigation reports · 1 timespan reports · 1 snapshot reports'
     );
   });
 });

package/flow-report/test/topbar-test.tsx

@@ -18,7 +18,6 @@ const flowResult = {
   steps: [{lhr: {
     fetchTime: '2021-09-14T22:24:22.462Z',
     configSettings: {locale: 'en-US'},
-    i18n: {rendererFormattedStrings: {}},
   }}],
 } as any;
 

package/flow-report/tsconfig.json

@@ -14,7 +14,6 @@
   "references": [
     {"path": "../types/lhr/"},
     {"path": "../report"},
-    {"path": "../shared"},
   ],
   "include": [
     "**/*.js",

package/jest.config.js

@@ -18,7 +18,6 @@ module.exports = {
     '**/third-party/**/*-test.js',
     '**/clients/test/**/*-test.js',
     '**/shared/**/*-test.js',
-    '**/build/**/*-test.js',
   ],
   transform: {},
   prettierPath: null,

package/lighthouse-cli/test/smokehouse/lighthouse-runners/cli.js

@@ -39,7 +39,7 @@ async function runLighthouse(url, configJson, testRunnerOptions = {}) {
   const tmpPath = await fs.mkdtemp(`${tmpDir}/smokehouse-`);
   return internalRun(url, tmpPath, configJson, testRunnerOptions)
     // Wait for internalRun() before removing scratch directory.
-    .finally(() => !isDebug && fs.rm(tmpPath, {recursive: true, force: true}));
+    .finally(() => !isDebug && fs.rmdir(tmpPath, {recursive: true}));
 }
 
 /**

package/lighthouse-core/audits/accessibility/axe-audit.js

@@ -79,18 +79,12 @@ class AxeAudit extends Audit {
           ...Audit.makeNodeItem(axeNode.node),
           explanation: axeNode.failureSummary,
         },
-        subItems: axeNode.relatedNodes.length ? {
-          type: 'subitems',
-          items: axeNode.relatedNodes.map(node => ({relatedNode: Audit.makeNodeItem(node)})),
-        } : undefined,
       }));
     }
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
-      /* eslint-disable max-len */
-      {key: 'node', itemType: 'node', subItemsHeading: {key: 'relatedNode', itemType: 'node'}, text: str_(UIStrings.failingElementsHeader)},
-      /* eslint-enable max-len */
+      {key: 'node', itemType: 'node', text: str_(UIStrings.failingElementsHeader)},
     ];
 
     /** @type {LH.Audit.Details.DebugData|undefined} */

package/lighthouse-core/audits/redirects-http.js

@@ -0,0 +1,59 @@
+/**
+ * @license Copyright 2016 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';
+
+const Audit = require('./audit.js');
+const i18n = require('../lib/i18n/i18n.js');
+const URL = require('../lib/url-shim.js');
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that provides detail on HTTP to HTTPS redirects. This descriptive title is shown to users when HTTP traffic is redirected to HTTPS. */
+  title: 'Redirects HTTP traffic to HTTPS',
+  /** Title of a Lighthouse audit that provides detail on HTTP to HTTPS redirects. This descriptive title is shown to users when HTTP traffic is not redirected to HTTPS. */
+  failureTitle: 'Does not redirect HTTP traffic to HTTPS',
+  /** Description of a Lighthouse audit that tells the user why they should direct HTTP traffic to HTTPS. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
+  description: 'If you\'ve already set up HTTPS, make sure that you redirect all HTTP ' +
+    'traffic to HTTPS in order to enable secure web features for all your users. [Learn more](https://web.dev/redirects-http/).',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
+
+class RedirectsHTTP extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'redirects-http',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      requiredArtifacts: ['HTTPRedirect', 'URL'],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @return {LH.Audit.Product}
+   */
+  static audit(artifacts) {
+    // Redirecting HTTP to HTTPS makes no sense on localhost
+    const url = new URL(artifacts.URL.finalUrl);
+    if (URL.isLikeLocalhost(url.hostname)) {
+      return {
+        score: 1,
+        notApplicable: true,
+      };
+    }
+
+    return {
+      score: Number(artifacts.HTTPRedirect.value),
+    };
+  }
+}
+
+module.exports = RedirectsHTTP;
+module.exports.UIStrings = UIStrings;

package/lighthouse-core/config/config-helpers.js

@@ -283,7 +283,6 @@ function resolveSettings(settingsJson = {}, overrides = undefined) {
   // If a locale is requested in flags or settings, use it. A typical CLI run will not have one,
   // however `lookupLocale` will always determine which of our supported locales to use (falling
   // back if necessary).
-  // TODO: could do more work to sniff out the user's locale
   const locale = i18n.lookupLocale((overrides && overrides.locale) || settingsJson.locale);
 
   // Fill in missing settings with defaults

package/lighthouse-core/config/default-config.js

@@ -171,9 +171,19 @@ const defaultConfig = {
     gatherers: [
       'service-worker',
     ],
+  },
+  {
+    passName: 'redirectPass',
+    loadFailureMode: 'warn',
+    // Speed up the redirect pass by blocking stylesheets, fonts, and images
+    blockedUrlPatterns: ['*.css', '*.jpg', '*.jpeg', '*.png', '*.gif', '*.svg', '*.ttf', '*.woff', '*.woff2'],
+    gatherers: [
+      'http-redirect',
+    ],
   }],
   audits: [
     'is-on-https',
+    'redirects-http',
     'service-worker',
     'viewport',
     'metrics/first-contentful-paint',
@@ -607,6 +617,7 @@ const defaultConfig = {
         {id: 'installable-manifest', weight: 2, group: 'pwa-installable'},
         // PWA Optimized
         {id: 'service-worker', weight: 1, group: 'pwa-optimized'},
+        {id: 'redirects-http', weight: 2, group: 'pwa-optimized'},
         {id: 'splash-screen', weight: 1, group: 'pwa-optimized'},
         {id: 'themed-omnibox', weight: 1, group: 'pwa-optimized'},
         {id: 'content-width', weight: 1, group: 'pwa-optimized'},

package/lighthouse-core/fraggle-rock/config/config.js

@@ -140,7 +140,7 @@ function resolveArtifactsToDefns(artifacts, configDir) {
 
     const gatherer = resolveGathererToDefn(gathererJson, coreGathererList, configDir);
     if (!isFRGathererDefn(gatherer)) {
-      throw new Error(`${gatherer.instance.name} gatherer does not have a Fraggle Rock meta obj`);
+      throw new Error(`${gatherer.instance.name} gatherer does not support Fraggle Rock`);
     }
 
     /** @type {LH.Config.AnyArtifactDefn} */

package/lighthouse-core/gather/gatherers/accessibility.js

@@ -87,37 +87,10 @@ function createAxeRuleResultArtifact(result) {
     // @ts-expect-error - getNodeDetails put into scope via stringification
     const nodeDetails = getNodeDetails(/** @type {HTMLElement} */ (element));
 
-    /** @type {Set<HTMLElement>} */
-    const relatedNodeElements = new Set();
-    /** @param {import('axe-core/axe').ImpactValue} impact */
-    const impactToNumber =
-      (impact) => [null, 'minor', 'moderate', 'serious', 'critical'].indexOf(impact);
-    const checkResults = [...node.any, ...node.all, ...node.none]
-      // @ts-expect-error CheckResult.impact is a string, even though ImpactValue is a thing.
-      .sort((a, b) => impactToNumber(b.impact) - impactToNumber(a.impact));
-    for (const checkResult of checkResults) {
-      for (const relatedNode of checkResult.relatedNodes || []) {
-        /** @type {HTMLElement} */
-        // @ts-expect-error - should always exist, just being cautious.
-        const relatedElement = relatedNode.element;
-
-        // Prevent overloading the report with way too many nodes.
-        if (relatedNodeElements.size >= 3) break;
-        // Should always exist, just being cautious.
-        if (!relatedElement) continue;
-        if (element === relatedElement) continue;
-
-        relatedNodeElements.add(relatedElement);
-      }
-    }
-    // @ts-expect-error - getNodeDetails put into scope via stringification
-    const relatedNodeDetails = [...relatedNodeElements].map(getNodeDetails);
-
     return {
       target,
       failureSummary,
       node: nodeDetails,
-      relatedNodes: relatedNodeDetails,
     };
   });
 

package/lighthouse-core/gather/gatherers/http-redirect.js

@@ -0,0 +1,46 @@
+/**
+ * @license Copyright 2016 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';
+
+const Gatherer = require('./gatherer.js');
+
+/**
+ * This gatherer changes the options.url so that its pass loads the http page.
+ * After load it detects if its on a crypographic scheme.
+ * TODO: Instead of abusing a loadPage pass for this test, it could likely just do an XHR instead
+ */
+class HTTPRedirect extends Gatherer {
+  constructor() {
+    super();
+    this._preRedirectURL = '';
+  }
+
+  /**
+   * @param {LH.Gatherer.PassContext} passContext
+   */
+  beforePass(passContext) {
+    this._preRedirectURL = passContext.url;
+    passContext.url = this._preRedirectURL.replace(/^https/, 'http');
+  }
+
+  /**
+   * @param {LH.Gatherer.PassContext} passContext
+   * @return {Promise<LH.Artifacts['HTTPRedirect']>}
+   */
+  async afterPass(passContext) {
+    // Reset the options.
+    passContext.url = this._preRedirectURL;
+
+    const executionContext = passContext.driver.executionContext;
+    const expression = `new URL(window.location).protocol === 'https:'`;
+    const isHttps = await executionContext.evaluateAsync(expression, {useIsolation: true});
+    return {
+      value: isHttps,
+    };
+  }
+}
+
+module.exports = HTTPRedirect;

package/lighthouse-core/lib/asset-saver.js

@@ -235,9 +235,9 @@ async function saveTrace(traceData, traceFilename) {
   const traceIter = traceJsonGenerator(traceData);
   const writeStream = fs.createWriteStream(traceFilename);
 
-  // TODO: Can remove promisify(pipeline) in Node 15.
+  // TODO: Can remove Readable.from() in Node 13, promisify(pipeline) in Node 15.
   // https://nodejs.org/api/stream.html#stream_stream_pipeline_streams_callback
-  return pipeline(traceIter, writeStream);
+  return pipeline(stream.Readable.from(traceIter), writeStream);
 }
 
 /**
@@ -250,7 +250,7 @@ function saveDevtoolsLog(devtoolsLog, devtoolLogFilename) {
   const logIter = arrayOfObjectsJsonGenerator(devtoolsLog);
   const writeStream = fs.createWriteStream(devtoolLogFilename);
 
-  return pipeline(logIter, writeStream);
+  return pipeline(stream.Readable.from(logIter), writeStream);
 }
 
 /**

package/lighthouse-core/lib/i18n/i18n.js

@@ -12,11 +12,9 @@ const lookupClosestLocale = require('lookup-closest-locale');
 const {getAvailableLocales} = require('../../../shared/localization/format.js');
 const log = require('lighthouse-logger');
 const {LH_ROOT} = require('../../../root.js');
-const {
-  isIcuMessage,
-  formatMessage,
-  DEFAULT_LOCALE,
-} = require('../../../shared/localization/format.js');
+const {isIcuMessage, _formatMessage} = require('../../../shared/localization/format.js');
+
+const DEFAULT_LOCALE = 'en';
 
 const UIStrings = {
   /** Used to show the duration in milliseconds that something lasted. The `{timeInMs}` placeholder will be replaced with the time duration, shown in milliseconds (e.g. 63 ms) */
@@ -120,32 +118,23 @@ const UIStrings = {
  * - supported locales in Intl formatters
  *
  * If `locale` isn't provided or one could not be found, DEFAULT_LOCALE is returned.
- *
- * By default any of the locales Lighthouse has strings for can be returned, but this
- * can be overriden with `possibleLocales`, useful e.g. when Lighthouse is bundled and
- * only DEFAULT_LOCALE is available, but `possibleLocales` can be used to select a
- * locale available to be downloaded on demand.
  * @param {string|string[]=} locales
- * @param {Array<string>=} possibleLocales
  * @return {LH.Locale}
  */
-function lookupLocale(locales, possibleLocales) {
-  // TODO: lookupLocale may need to be split into two functions, one that canonicalizes
-  // locales and one that looks up the best locale filename for a given locale.
-  // e.g. `en-IE` is canonical, but uses `en-GB.json`. See TODO in locales.js
-
+function lookupLocale(locales) {
+  // If Node was built with `--with-intl=none`, `Intl` won't exist.
   if (typeof Intl !== 'object') {
-    // If Node was built with `--with-intl=none`, `Intl` won't exist.
     throw new Error('Lighthouse must be run in Node with `Intl` support. See https://nodejs.org/api/intl.html for help');
   }
 
+  // TODO: could do more work to sniff out the user's locale
   const canonicalLocales = Intl.getCanonicalLocales(locales);
 
   // Filter by what's available in this runtime.
   const availableLocales = Intl.NumberFormat.supportedLocalesOf(canonicalLocales);
 
   // Get available locales and transform into object to match `lookupClosestLocale`'s API.
-  const localesWithMessages = possibleLocales || getAvailableLocales();
+  const localesWithMessages = getAvailableLocales();
   const localesWithmessagesObj = /** @type {Record<LH.Locale, LhlMessages>} */ (
     Object.fromEntries(localesWithMessages.map(l => [l, {}])));
 
@@ -193,7 +182,7 @@ function createIcuMessageFn(filename, fileStrings) {
     return {
       i18nId,
       values,
-      formattedDefault: formatMessage(message, values, DEFAULT_LOCALE),
+      formattedDefault: _formatMessage(message, values, DEFAULT_LOCALE),
     };
   };