lighthouse 9.5.0-dev.20221018 → 9.5.0-dev.20221020

package/core/lib/manifest-parser.js

@@ -4,8 +4,6 @@
  * 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.
  */
 
-import cssParsers from 'cssstyle/lib/parsers.js';
-
 const ALLOWED_DISPLAY_VALUES = [
   'fullscreen',
   'standalone',
@@ -29,14 +27,6 @@ const ALLOWED_ORIENTATION_VALUES = [
   'landscape-secondary',
 ];
 
-/**
- * @param {string} color
- * @return {boolean}
- */
-function isValidColor(color) {
-  return cssParsers.valueType(color) === cssParsers.TYPES.COLOR;
-}
-
 /**
  * @param {*} raw
  * @param {boolean=} trim
@@ -72,12 +62,6 @@ function parseColor(raw) {
     return color;
   }
 
-  // Use color parser to check CSS3 Color parsing.
-  if (!isValidColor(color.raw)) {
-    color.value = undefined;
-    color.warning = 'ERROR: color parsing failed.';
-  }
-
   return color;
 }
 

package/core/user-flow.js

@@ -10,22 +10,56 @@ import {startTimespanGather} from './gather/timespan-runner.js';
 import {navigationGather} from './gather/navigation-runner.js';
 import {Runner} from './runner.js';
 import {initializeConfig} from './config/config.js';
+import {getFormatted} from '../shared/localization/format.js';
+import * as i18n from './lib/i18n/i18n.js';
 
-/** @typedef {Parameters<snapshotGather>[0]} FrOptions */
-/** @typedef {Omit<FrOptions, 'page'> & {name?: string}} UserFlowOptions */
-/** @typedef {Omit<FrOptions, 'page'> & {stepName?: string}} StepOptions */
 /** @typedef {WeakMap<LH.UserFlow.GatherStep, LH.Gatherer.FRGatherResult['runnerOptions']>} GatherStepRunnerOptions */
 
+const UIStrings = {
+  /**
+   * @description Default name for a user flow on the given url. "User flow" refers to the series of page navigations and user interactions being tested on the page.
+   * @example {https://example.com} url
+   */
+  defaultFlowName: 'User flow ({url})',
+  /**
+   * @description Default name for a user flow step that analyzes a page navigation.
+   * @example {https://example.com} url
+   */
+  defaultNavigationName: 'Navigation report ({url})',
+  /**
+   * @description Default name for a user flow step that analyzes user interactions over a period of time.
+   * @example {https://example.com} url
+   */
+  defaultTimespanName: 'Timespan report ({url})',
+  /**
+   * @description Default name for a user flow step that analyzes the page state at a point in time.
+   * @example {https://example.com} url
+   */
+  defaultSnapshotName: 'Snapshot report ({url})',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+/**
+ * @param {string} message
+ * @param {Record<string, string | number>} values
+ * @param {LH.Locale} locale
+ */
+function translate(message, values, locale) {
+  const icuMessage = str_(message, values);
+  return getFormatted(icuMessage, locale);
+}
+
 class UserFlow {
   /**
-   * @param {FrOptions['page']} page
-   * @param {UserFlowOptions=} options
+   * @param {LH.Puppeteer.Page} page
+   * @param {LH.UserFlow.Options} [options]
    */
   constructor(page, options) {
-    /** @type {FrOptions} */
-    this.options = {page, ...options};
-    /** @type {string|undefined} */
-    this.name = options?.name;
+    /** @type {LH.Puppeteer.Page} */
+    this._page = page;
+    /** @type {LH.UserFlow.Options|undefined} */
+    this._options = options;
     /** @type {LH.UserFlow.GatherStep[]} */
     this._gatherSteps = [];
     /** @type {GatherStepRunnerOptions} */
@@ -33,67 +67,37 @@ class UserFlow {
   }
 
   /**
-   * @param {string} longUrl
-   * @returns {string}
-   */
-  _shortenUrl(longUrl) {
-    const url = new URL(longUrl);
-    return `${url.hostname}${url.pathname}`;
-  }
-
-  /**
-   * @param {LH.Artifacts} artifacts
-   * @return {string}
-   */
-  _getDefaultStepName(artifacts) {
-    const shortUrl = this._shortenUrl(artifacts.URL.finalDisplayedUrl);
-    switch (artifacts.GatherContext.gatherMode) {
-      case 'navigation':
-        return `Navigation report (${shortUrl})`;
-      case 'timespan':
-        return `Timespan report (${shortUrl})`;
-      case 'snapshot':
-        return `Snapshot report (${shortUrl})`;
-    }
-  }
-
-  /**
-   * @param {StepOptions=} stepOptions
+   * @param {LH.UserFlow.StepFlags} [flags]
+   * @return {LH.UserFlow.StepFlags}
    */
-  _getNextNavigationOptions(stepOptions) {
-    const options = {...this.options, ...stepOptions};
-    const flags = {...options.flags};
+  _getNextNavigationFlags(flags) {
+    const newStepFlags = {...flags};
 
-    if (flags.skipAboutBlank === undefined) {
-      flags.skipAboutBlank = true;
+    if (newStepFlags.skipAboutBlank === undefined) {
+      newStepFlags.skipAboutBlank = true;
     }
 
     // On repeat navigations, we want to disable storage reset by default (i.e. it's not a cold load).
     const isSubsequentNavigation = this._gatherSteps
       .some(step => step.artifacts.GatherContext.gatherMode === 'navigation');
     if (isSubsequentNavigation) {
-      if (flags.disableStorageReset === undefined) {
-        flags.disableStorageReset = true;
+      if (newStepFlags.disableStorageReset === undefined) {
+        newStepFlags.disableStorageReset = true;
       }
     }
 
-    options.flags = flags;
-
-    return options;
+    return newStepFlags;
   }
 
   /**
    *
    * @param {LH.Gatherer.FRGatherResult} gatherResult
-   * @param {StepOptions} options
+   * @param {LH.UserFlow.StepFlags} [flags]
    */
-  _addGatherStep(gatherResult, options) {
-    const providedName = options?.stepName;
+  _addGatherStep(gatherResult, flags) {
     const gatherStep = {
       artifacts: gatherResult.artifacts,
-      name: providedName || this._getDefaultStepName(gatherResult.artifacts),
-      config: options.config,
-      flags: options.flags,
+      flags,
     };
     this._gatherSteps.push(gatherStep);
     this._gatherStepRunnerOptions.set(gatherStep, gatherResult.runnerOptions);
@@ -101,23 +105,26 @@ class UserFlow {
 
   /**
    * @param {LH.NavigationRequestor} requestor
-   * @param {StepOptions=} stepOptions
+   * @param {LH.UserFlow.StepFlags} [flags]
    */
-  async navigate(requestor, stepOptions) {
+  async navigate(requestor, flags) {
     if (this.currentTimespan) throw new Error('Timespan already in progress');
     if (this.currentNavigation) throw new Error('Navigation already in progress');
 
-    const options = this._getNextNavigationOptions(stepOptions);
-    const gatherResult = await navigationGather(requestor, options);
+    const newStepFlags = this._getNextNavigationFlags(flags);
+    const gatherResult = await navigationGather(this._page, requestor, {
+      config: this._options?.config,
+      flags: newStepFlags,
+    });
 
-    this._addGatherStep(gatherResult, options);
+    this._addGatherStep(gatherResult, newStepFlags);
   }
 
   /**
    * This is an alternative to `navigate()` that can be used to analyze a navigation triggered by user interaction.
    * For more on user triggered navigations, see https://github.com/GoogleChrome/lighthouse/blob/main/docs/user-flows.md#triggering-a-navigation-via-user-interactions.
    *
-   * @param {StepOptions=} stepOptions
+   * @param {LH.UserFlow.StepFlags} [stepOptions]
    */
   async startNavigation(stepOptions) {
     /** @type {(value: () => void) => void} */
@@ -166,39 +173,43 @@ class UserFlow {
   }
 
   /**
-   * @param {StepOptions=} stepOptions
+   * @param {LH.UserFlow.StepFlags} [flags]
    */
-  async startTimespan(stepOptions) {
+  async startTimespan(flags) {
     if (this.currentTimespan) throw new Error('Timespan already in progress');
     if (this.currentNavigation) throw new Error('Navigation already in progress');
 
-    const options = {...this.options, ...stepOptions};
-    const timespan = await startTimespanGather(options);
-    this.currentTimespan = {timespan, options};
+    const timespan = await startTimespanGather(this._page, {
+      config: this._options?.config,
+      flags: flags,
+    });
+    this.currentTimespan = {timespan, flags};
   }
 
   async endTimespan() {
     if (!this.currentTimespan) throw new Error('No timespan in progress');
     if (this.currentNavigation) throw new Error('Navigation already in progress');
 
-    const {timespan, options} = this.currentTimespan;
+    const {timespan, flags} = this.currentTimespan;
     const gatherResult = await timespan.endTimespanGather();
     this.currentTimespan = undefined;
 
-    this._addGatherStep(gatherResult, options);
+    this._addGatherStep(gatherResult, flags);
   }
 
   /**
-   * @param {StepOptions=} stepOptions
+   * @param {LH.UserFlow.StepFlags} [flags]
    */
-  async snapshot(stepOptions) {
+  async snapshot(flags) {
     if (this.currentTimespan) throw new Error('Timespan already in progress');
     if (this.currentNavigation) throw new Error('Navigation already in progress');
 
-    const options = {...this.options, ...stepOptions};
-    const gatherResult = await snapshotGather(options);
+    const gatherResult = await snapshotGather(this._page, {
+      config: this._options?.config,
+      flags: flags,
+    });
 
-    this._addGatherStep(gatherResult, options);
+    this._addGatherStep(gatherResult, flags);
   }
 
   /**
@@ -206,8 +217,8 @@ class UserFlow {
    */
   async createFlowResult() {
     return auditGatherSteps(this._gatherSteps, {
-      name: this.name,
-      config: this.options.config,
+      name: this._options?.name,
+      config: this._options?.config,
       gatherStepRunnerOptions: this._gatherStepRunnerOptions,
     });
   }
@@ -226,11 +237,56 @@ class UserFlow {
   createArtifactsJson() {
     return {
       gatherSteps: this._gatherSteps,
-      name: this.name,
+      name: this._options?.name,
     };
   }
 }
 
+/**
+ * @param {string} longUrl
+ * @returns {string}
+ */
+function shortenUrl(longUrl) {
+  const url = new URL(longUrl);
+  return `${url.hostname}${url.pathname}`;
+}
+
+/**
+ * @param {LH.UserFlow.StepFlags|undefined} flags
+ * @param {LH.Artifacts} artifacts
+ * @return {string}
+ */
+function getStepName(flags, artifacts) {
+  if (flags?.name) return flags.name;
+
+  const {locale} = artifacts.settings;
+  const shortUrl = shortenUrl(artifacts.URL.finalDisplayedUrl);
+  switch (artifacts.GatherContext.gatherMode) {
+    case 'navigation':
+      return translate(UIStrings.defaultNavigationName, {url: shortUrl}, locale);
+    case 'timespan':
+      return translate(UIStrings.defaultTimespanName, {url: shortUrl}, locale);
+    case 'snapshot':
+      return translate(UIStrings.defaultSnapshotName, {url: shortUrl}, locale);
+    default:
+      throw new Error('Unsupported gather mode');
+  }
+}
+
+/**
+ * @param {string|undefined} name
+ * @param {LH.UserFlow.GatherStep[]} gatherSteps
+ * @return {string}
+ */
+function getFlowName(name, gatherSteps) {
+  if (name) return name;
+
+  const firstArtifacts = gatherSteps[0].artifacts;
+  const {locale} = firstArtifacts.settings;
+  const url = new URL(firstArtifacts.URL.finalDisplayedUrl).hostname;
+  return translate(UIStrings.defaultFlowName, {url}, locale);
+}
+
 /**
  * @param {Array<LH.UserFlow.GatherStep>} gatherSteps
  * @param {{name?: string, config?: LH.Config.Json, gatherStepRunnerOptions?: GatherStepRunnerOptions}} options
@@ -243,14 +299,15 @@ async function auditGatherSteps(gatherSteps, options) {
   /** @type {LH.FlowResult['steps']} */
   const steps = [];
   for (const gatherStep of gatherSteps) {
-    const {artifacts, name, flags} = gatherStep;
+    const {artifacts, flags} = gatherStep;
+    const name = getStepName(flags, artifacts);
 
     let runnerOptions = options.gatherStepRunnerOptions?.get(gatherStep);
 
     // If the gather step is not active, we must recreate the runner options.
     if (!runnerOptions) {
       // Step specific configs take precedence over a config for the entire flow.
-      const configJson = gatherStep.config || options.config;
+      const configJson = options.config;
       const {gatherMode} = artifacts.GatherContext;
       const {config} = await initializeConfig(gatherMode, configJson, flags);
       runnerOptions = {
@@ -264,13 +321,14 @@ async function auditGatherSteps(gatherSteps, options) {
     steps.push({lhr: result.lhr, name});
   }
 
-  const url = new URL(gatherSteps[0].artifacts.URL.finalDisplayedUrl);
-  const flowName = options.name || `User flow (${url.hostname})`;
-  return {steps, name: flowName};
+  return {steps, name: getFlowName(options.name, gatherSteps)};
 }
 
 
 export {
   UserFlow,
   auditGatherSteps,
+  getStepName,
+  getFlowName,
+  UIStrings,
 };

package/core/util.cjs

@@ -127,6 +127,33 @@ class Util {
             }
           }
         }
+
+        // Circa 10.0, table items were refactored.
+        if (audit.details.type === 'table') {
+          for (const heading of audit.details.headings) {
+            /** @type {{itemType: LH.Audit.Details.ItemValueType|undefined, text: string|undefined}} */
+            // @ts-expect-error
+            const {itemType, text} = heading;
+            if (itemType !== undefined) {
+              heading.valueType = itemType;
+              // @ts-expect-error
+              delete heading.itemType;
+            }
+            if (text !== undefined) {
+              heading.label = text;
+              // @ts-expect-error
+              delete heading.text;
+            }
+
+            // @ts-expect-error
+            const subItemsItemType = heading.subItemsHeading?.itemType;
+            if (heading.subItemsHeading && subItemsItemType !== undefined) {
+              heading.subItemsHeading.valueType = subItemsItemType;
+              // @ts-expect-error
+              delete heading.subItemsHeading.itemType;
+            }
+          }
+        }
       }
     }
 

package/dist/report/bundle.esm.js

@@ -123,6 +123,33 @@ class Util {
             }
           }
         }
+
+        // Circa 10.0, table items were refactored.
+        if (audit.details.type === 'table') {
+          for (const heading of audit.details.headings) {
+            /** @type {{itemType: LH.Audit.Details.ItemValueType|undefined, text: string|undefined}} */
+            // @ts-expect-error
+            const {itemType, text} = heading;
+            if (itemType !== undefined) {
+              heading.valueType = itemType;
+              // @ts-expect-error
+              delete heading.itemType;
+            }
+            if (text !== undefined) {
+              heading.label = text;
+              // @ts-expect-error
+              delete heading.text;
+            }
+
+            // @ts-expect-error
+            const subItemsItemType = heading.subItemsHeading?.itemType;
+            if (heading.subItemsHeading && subItemsItemType !== undefined) {
+              heading.subItemsHeading.valueType = subItemsItemType;
+              // @ts-expect-error
+              delete heading.subItemsHeading.itemType;
+            }
+          }
+        }
       }
     }
 
@@ -2893,11 +2920,10 @@ class DetailsRenderer {
       case 'list':
         return this._renderList(details);
       case 'table':
+      case 'opportunity':
         return this._renderTable(details);
       case 'criticalrequestchain':
         return CriticalRequestChainRenderer.render(this._dom, details, this);
-      case 'opportunity':
-        return this._renderTable(details);
 
       // Internal-only details, not for rendering.
       case 'screenshot':
@@ -3055,7 +3081,7 @@ class DetailsRenderer {
    * based on the heading's valueType, unless the value itself has a `type`
    * property to override it.
    * @param {TableItemValue} value
-   * @param {LH.Audit.Details.OpportunityColumnHeading} heading
+   * @param {LH.Audit.Details.TableColumnHeading} heading
    * @return {Element|null}
    */
   _renderTableValue(value, heading) {
@@ -3140,73 +3166,14 @@ class DetailsRenderer {
     }
   }
 
-  /**
-   * Get the headings of a table-like details object, converted into the
-   * OpportunityColumnHeading type until we have all details use the same
-   * heading format.
-   * @param {Table|OpportunityTable} tableLike
-   * @return {OpportunityTable['headings']}
-   */
-  _getCanonicalizedHeadingsFromTable(tableLike) {
-    if (tableLike.type === 'opportunity') {
-      return tableLike.headings;
-    }
-
-    return tableLike.headings.map(heading => this._getCanonicalizedHeading(heading));
-  }
-
-  /**
-   * Get the headings of a table-like details object, converted into the
-   * OpportunityColumnHeading type until we have all details use the same
-   * heading format.
-   * @param {Table['headings'][number]} heading
-   * @return {OpportunityTable['headings'][number]}
-   */
-  _getCanonicalizedHeading(heading) {
-    let subItemsHeading;
-    if (heading.subItemsHeading) {
-      subItemsHeading = this._getCanonicalizedsubItemsHeading(heading.subItemsHeading, heading);
-    }
-
-    return {
-      key: heading.key,
-      valueType: heading.itemType,
-      subItemsHeading,
-      label: heading.text,
-      displayUnit: heading.displayUnit,
-      granularity: heading.granularity,
-    };
-  }
-
-  /**
-   * @param {Exclude<LH.Audit.Details.TableColumnHeading['subItemsHeading'], undefined>} subItemsHeading
-   * @param {LH.Audit.Details.TableColumnHeading} parentHeading
-   * @return {LH.Audit.Details.OpportunityColumnHeading['subItemsHeading']}
-   */
-  _getCanonicalizedsubItemsHeading(subItemsHeading, parentHeading) {
-    // Low-friction way to prevent committing a falsy key (which is never allowed for
-    // a subItemsHeading) from passing in CI.
-    if (!subItemsHeading.key) {
-      // eslint-disable-next-line no-console
-      console.warn('key should not be null');
-    }
-
-    return {
-      key: subItemsHeading.key || '',
-      valueType: subItemsHeading.itemType || parentHeading.itemType,
-      granularity: subItemsHeading.granularity || parentHeading.granularity,
-      displayUnit: subItemsHeading.displayUnit || parentHeading.displayUnit,
-    };
-  }
-
   /**
    * Returns a new heading where the values are defined first by `heading.subItemsHeading`,
    * and secondly by `heading`. If there is no subItemsHeading, returns null, which will
    * be rendered as an empty column.
-   * @param {LH.Audit.Details.OpportunityColumnHeading} heading
-   * @return {LH.Audit.Details.OpportunityColumnHeading | null}
+   * @param {LH.Audit.Details.TableColumnHeading} heading
+   * @return {LH.Audit.Details.TableColumnHeading | null}
    */
-  _getDerivedsubItemsHeading(heading) {
+  _getDerivedSubItemsHeading(heading) {
     if (!heading.subItemsHeading) return null;
     return {
       key: heading.subItemsHeading.key || '',
@@ -3219,7 +3186,7 @@ class DetailsRenderer {
 
   /**
    * @param {TableItem} item
-   * @param {(LH.Audit.Details.OpportunityColumnHeading | null)[]} headings
+   * @param {(LH.Audit.Details.TableColumnHeading | null)[]} headings
    */
   _renderTableRow(item, headings) {
     const rowElem = this._dom.createElement('tr');
@@ -3256,7 +3223,7 @@ class DetailsRenderer {
    * Renders one or more rows from a details table item. A single table item can
    * expand into multiple rows, if there is a subItemsHeading.
    * @param {TableItem} item
-   * @param {LH.Audit.Details.OpportunityColumnHeading[]} headings
+   * @param {LH.Audit.Details.TableColumnHeading[]} headings
    */
   _renderTableRowsFromItem(item, headings) {
     const fragment = this._dom.createFragment();
@@ -3264,7 +3231,7 @@ class DetailsRenderer {
 
     if (!item.subItems) return fragment;
 
-    const subItemsHeadings = headings.map(this._getDerivedsubItemsHeading);
+    const subItemsHeadings = headings.map(this._getDerivedSubItemsHeading);
     if (!subItemsHeadings.some(Boolean)) return fragment;
 
     for (const subItem of item.subItems.items) {
@@ -3277,7 +3244,7 @@ class DetailsRenderer {
   }
 
   /**
-   * @param {OpportunityTable|Table} details
+   * @param {{headings: TableColumnHeading[], items: TableItem[]}} details
    * @return {Element}
    */
   _renderTable(details) {
@@ -3287,9 +3254,7 @@ class DetailsRenderer {
     const theadElem = this._dom.createChildOf(tableElem, 'thead');
     const theadTrElem = this._dom.createChildOf(theadElem, 'tr');
 
-    const headings = this._getCanonicalizedHeadingsFromTable(details);
-
-    for (const heading of headings) {
+    for (const heading of details.headings) {
       const valueType = heading.valueType || 'text';
       const classes = `lh-table-column--${valueType}`;
       const labelEl = this._dom.createElement('div', 'lh-text');
@@ -3300,7 +3265,7 @@ class DetailsRenderer {
     const tbodyElem = this._dom.createChildOf(tableElem, 'tbody');
     let even = true;
     for (const item of details.items) {
-      const rowsFragment = this._renderTableRowsFromItem(item, headings);
+      const rowsFragment = this._renderTableRowsFromItem(item, details.headings);
       for (const rowEl of this._dom.findAll('tr', rowsFragment)) {
         // For zebra styling.
         rowEl.classList.add(even ? 'lh-row--even' : 'lh-row--odd');