lighthouse 9.5.0-dev.20221019 → 9.5.0-dev.20221021

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,9 +10,47 @@ 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 {mergeConfigFragment, deepClone} from './config/config-helpers.js';
+import * as i18n from './lib/i18n/i18n.js';
 
 /** @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 {LH.Puppeteer.Page} page
@@ -30,30 +68,39 @@ class UserFlow {
   }
 
   /**
-   * @param {LH.UserFlow.StepFlags} [flags]
+   * @param {LH.UserFlow.StepFlags|undefined} flags
+   * @return {LH.UserFlow.StepFlags|undefined}
+   */
+  _getNextFlags(flags) {
+    const clonedFlowFlags = this._options?.flags && deepClone(this._options?.flags);
+    if (!flags) return clonedFlowFlags;
+    return mergeConfigFragment(clonedFlowFlags || {}, flags, true);
+  }
+
+  /**
+   * @param {LH.UserFlow.StepFlags|undefined} flags
    * @return {LH.UserFlow.StepFlags}
    */
   _getNextNavigationFlags(flags) {
-    const newStepFlags = {...flags};
+    const nextFlags = this._getNextFlags(flags) || {};
 
-    if (newStepFlags.skipAboutBlank === undefined) {
-      newStepFlags.skipAboutBlank = true;
+    if (nextFlags.skipAboutBlank === undefined) {
+      nextFlags.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 (newStepFlags.disableStorageReset === undefined) {
-        newStepFlags.disableStorageReset = true;
+      if (nextFlags.disableStorageReset === undefined) {
+        nextFlags.disableStorageReset = true;
       }
     }
 
-    return newStepFlags;
+    return nextFlags;
   }
 
   /**
-   *
    * @param {LH.Gatherer.FRGatherResult} gatherResult
    * @param {LH.UserFlow.StepFlags} [flags]
    */
@@ -74,13 +121,13 @@ class UserFlow {
     if (this.currentTimespan) throw new Error('Timespan already in progress');
     if (this.currentNavigation) throw new Error('Navigation already in progress');
 
-    const newStepFlags = this._getNextNavigationFlags(flags);
+    const nextFlags = this._getNextNavigationFlags(flags);
     const gatherResult = await navigationGather(this._page, requestor, {
       config: this._options?.config,
-      flags: newStepFlags,
+      flags: nextFlags,
     });
 
-    this._addGatherStep(gatherResult, newStepFlags);
+    this._addGatherStep(gatherResult, nextFlags);
   }
 
   /**
@@ -142,11 +189,13 @@ class UserFlow {
     if (this.currentTimespan) throw new Error('Timespan already in progress');
     if (this.currentNavigation) throw new Error('Navigation already in progress');
 
+    const nextFlags = this._getNextFlags(flags);
+
     const timespan = await startTimespanGather(this._page, {
       config: this._options?.config,
-      flags: flags,
+      flags: nextFlags,
     });
-    this.currentTimespan = {timespan, flags};
+    this.currentTimespan = {timespan, flags: nextFlags};
   }
 
   async endTimespan() {
@@ -167,12 +216,14 @@ class UserFlow {
     if (this.currentTimespan) throw new Error('Timespan already in progress');
     if (this.currentNavigation) throw new Error('Navigation already in progress');
 
+    const nextFlags = this._getNextFlags(flags);
+
     const gatherResult = await snapshotGather(this._page, {
       config: this._options?.config,
-      flags: flags,
+      flags: nextFlags,
     });
 
-    this._addGatherStep(gatherResult, flags);
+    this._addGatherStep(gatherResult, nextFlags);
   }
 
   /**
@@ -215,23 +266,41 @@ function shortenUrl(longUrl) {
 }
 
 /**
+ * @param {LH.UserFlow.StepFlags|undefined} flags
  * @param {LH.Artifacts} artifacts
  * @return {string}
  */
-function getDefaultStepName(artifacts) {
+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 `Navigation report (${shortUrl})`;
+      return translate(UIStrings.defaultNavigationName, {url: shortUrl}, locale);
     case 'timespan':
-      return `Timespan report (${shortUrl})`;
+      return translate(UIStrings.defaultTimespanName, {url: shortUrl}, locale);
     case 'snapshot':
-      return `Snapshot report (${shortUrl})`;
+      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
@@ -245,7 +314,7 @@ async function auditGatherSteps(gatherSteps, options) {
   const steps = [];
   for (const gatherStep of gatherSteps) {
     const {artifacts, flags} = gatherStep;
-    const name = flags?.name || getDefaultStepName(artifacts);
+    const name = getStepName(flags, artifacts);
 
     let runnerOptions = options.gatherStepRunnerOptions?.get(gatherStep);
 
@@ -266,13 +335,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');