lighthouse 8.6.0-dev.20211031 → 8.6.0-dev.20211101

package/lighthouse-core/computed/metrics/total-blocking-time.js

@@ -10,6 +10,7 @@ const ComputedMetric = require('./metric.js');
 const TraceProcessor = require('../../lib/tracehouse/trace-processor.js');
 const LanternTotalBlockingTime = require('./lantern-total-blocking-time.js');
 const TimetoInteractive = require('./interactive.js');
+const {calculateSumOfBlockingTime} = require('./tbt-utils.js');
 
 /**
  * @fileoverview This audit determines Total Blocking Time.
@@ -25,57 +26,6 @@ const TimetoInteractive = require('./interactive.js');
  * to smaller improvements to main thread responsiveness.
  */
 class TotalBlockingTime extends ComputedMetric {
-  /**
-   * @return {number}
-   */
-  static get BLOCKING_TIME_THRESHOLD() {
-    return 50;
-  }
-
-  /**
-   * @param {Array<{start: number, end: number, duration: number}>} topLevelEvents
-   * @param {number} startTimeMs
-   * @param {number} endTimeMs
-   * @return {number}
-   */
-  static calculateSumOfBlockingTime(topLevelEvents, startTimeMs, endTimeMs) {
-    if (endTimeMs <= startTimeMs) return 0;
-
-    const threshold = TotalBlockingTime.BLOCKING_TIME_THRESHOLD;
-    let sumBlockingTime = 0;
-    for (const event of topLevelEvents) {
-      // Early exit for small tasks, which should far outnumber long tasks.
-      if (event.duration < threshold) continue;
-
-      // We only want to consider tasks that fall in our time range (FCP and TTI for navigations).
-      // FCP is picked as the lower bound because there is little risk of user input happening
-      // before FCP so Long Queuing Qelay regions do not harm user experience. Developers should be
-      // optimizing to reach FCP as fast as possible without having to worry about task lengths.
-      if (event.end < startTimeMs) continue;
-
-      // TTI is picked as the upper bound because we want a well defined end point for page load.
-      if (event.start > endTimeMs) continue;
-
-      // We first perform the clipping, and then calculate Blocking Region. So if we have a 150ms
-      // task [0, 150] and FCP happens midway at 50ms, we first clip the task to [50, 150], and then
-      // calculate the Blocking Region to be [100, 150]. The rational here is that tasks before FCP
-      // are unimportant, so we care whether the main thread is busy more than 50ms at a time only
-      // after FCP.
-      const clippedStart = Math.max(event.start, startTimeMs);
-      const clippedEnd = Math.min(event.end, endTimeMs);
-      const clippedDuration = clippedEnd - clippedStart;
-      if (clippedDuration < threshold) continue;
-
-      // The duration of the task beyond 50ms at the beginning is considered the Blocking Region.
-      // Example:
-      //   [              250ms Task                   ]
-      //   | First 50ms |   Blocking Region (200ms)    |
-      sumBlockingTime += clippedDuration - threshold;
-    }
-
-    return sumBlockingTime;
-  }
-
   /**
    * @param {LH.Artifacts.MetricComputationData} data
    * @param {LH.Artifacts.ComputedContext} context
@@ -100,7 +50,7 @@ class TotalBlockingTime extends ComputedMetric {
       const interactiveTimeMs = (await TimetoInteractive.request(metricData, context)).timing;
 
       return {
-        timing: TotalBlockingTime.calculateSumOfBlockingTime(
+        timing: calculateSumOfBlockingTime(
           events,
           firstContentfulPaint,
           interactiveTimeMs
@@ -108,7 +58,7 @@ class TotalBlockingTime extends ComputedMetric {
       };
     } else {
       return {
-        timing: TotalBlockingTime.calculateSumOfBlockingTime(
+        timing: calculateSumOfBlockingTime(
           events,
           0,
           data.processedTrace.timestamps.traceEnd

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

@@ -203,6 +203,18 @@ function expandAuditShorthand(audit) {
   }
 }
 
+/** @type {Map<string, any>} */
+const bundledModules = new Map(/* BUILD_REPLACE_BUNDLED_MODULES */);
+
+/**
+ * Wraps `require` with an entrypoint for bundled dynamic modules.
+ * See build-bundle.js
+ * @param {string} requirePath
+ */
+function requireWrapper(requirePath) {
+  return bundledModules.get(requirePath) || require(requirePath);
+}
+
 /**
  * @param {string} gathererPath
  * @param {Array<string>} coreGathererList
@@ -218,7 +230,7 @@ function requireGatherer(gathererPath, coreGathererList, configDir) {
     requirePath = resolveModulePath(gathererPath, configDir, 'gatherer');
   }
 
-  const GathererClass = /** @type {GathererConstructor} */ (require(requirePath));
+  const GathererClass = /** @type {GathererConstructor} */ (requireWrapper(requirePath));
 
   return {
     instance: new GathererClass(),
@@ -228,14 +240,13 @@ function requireGatherer(gathererPath, coreGathererList, configDir) {
 }
 
 /**
- *
  * @param {string} auditPath
  * @param {Array<string>} coreAuditList
  * @param {string=} configDir
  * @return {LH.Config.AuditDefn['implementation']}
  */
 function requireAudit(auditPath, coreAuditList, configDir) {
-// See if the audit is a Lighthouse core audit.
+  // See if the audit is a Lighthouse core audit.
   const auditPathJs = `${auditPath}.js`;
   const coreAudit = coreAuditList.find(a => a === auditPathJs);
   let requirePath = `../audits/${auditPath}`;
@@ -244,14 +255,14 @@ function requireAudit(auditPath, coreAuditList, configDir) {
       // This is for pubads bundling.
       requirePath = auditPath;
     } else {
-    // Otherwise, attempt to find it elsewhere. This throws if not found.
+      // Otherwise, attempt to find it elsewhere. This throws if not found.
       const absolutePath = resolveModulePath(auditPath, configDir, 'audit');
       // Use a relative path so bundler can easily expose it.
       requirePath = path.relative(__dirname, absolutePath);
     }
   }
 
-  return require(requirePath);
+  return requireWrapper(requirePath);
 }
 
 /**
@@ -313,7 +324,6 @@ function resolveSettings(settingsJson = {}, overrides = undefined) {
   return settingsWithFlags;
 }
 
-
 /**
  * @param {LH.Config.Json} configJSON
  * @param {string | undefined} configDir
@@ -332,7 +342,7 @@ function mergePlugins(configJSON, configDir, flags) {
     const pluginPath = isBundledEnvironment() ?
         pluginName :
         resolveModulePath(pluginName, configDir, 'plugin');
-    const rawPluginJson = require(pluginPath);
+    const rawPluginJson = requireWrapper(pluginPath);
     const pluginJson = ConfigPlugin.parsePlugin(rawPluginJson, pluginName);
 
     configJSON = mergeConfigFragment(configJSON, pluginJson);
@@ -569,12 +579,12 @@ function deepCloneConfigJson(json) {
 module.exports = {
   deepClone,
   deepCloneConfigJson,
-  mergeOptionsOfItems,
   mergeConfigFragment,
   mergeConfigFragmentArrayByKey,
+  mergeOptionsOfItems,
   mergePlugins,
-  resolveSettings,
-  resolveGathererToDefn,
   resolveAuditsToDefns,
+  resolveGathererToDefn,
   resolveModulePath,
+  resolveSettings,
 };

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

@@ -96,7 +96,7 @@ const UIStrings = {
   /** Description of the navigation section within the Search Engine Optimization (SEO) category. Within this section are audits with descriptive titles that highlight ways to make a website accessible to search engine crawlers. */
   seoCrawlingGroupDescription: 'To appear in search results, crawlers need access to your app.',
   /** Title of the Progressive Web Application (PWA) category of audits. This is displayed at the top of a list of audits focused on topics related to whether or not a site is a progressive web app, e.g. responds offline, uses a service worker, is on https, etc. Also used as a label of a score gauge. */
-  pwaCategoryTitle: 'Progressive Web App',
+  pwaCategoryTitle: 'PWA',
   /** Description of the Progressive Web Application (PWA) category. This is displayed at the top of a list of audits focused on topics related to whether or not a site is a progressive web app, e.g. responds offline, uses a service worker, is on https, etc. No character length limits. 'Learn More' becomes link text to additional documentation. */
   pwaCategoryDescription: 'These checks validate the aspects of a Progressive Web App. ' +
   '[Learn more](https://developers.google.com/web/progressive-web-apps/checklist).',
@@ -405,6 +405,8 @@ const defaultConfig = {
     'best-practices-general': {
       title: str_(UIStrings.bestPracticesGeneralGroupTitle),
     },
+    // Group for audits that should not be displayed.
+    'hidden': {title: ''},
   },
   categories: {
     'performance': {
@@ -418,61 +420,65 @@ const defaultConfig = {
         {id: 'total-blocking-time', weight: 30, group: 'metrics', acronym: 'TBT', relevantAudits: m2a.tbtRelevantAudits},
         {id: 'cumulative-layout-shift', weight: 15, group: 'metrics', acronym: 'CLS', relevantAudits: m2a.clsRelevantAudits},
 
-        // These are our "invisible" metrics. Not displayed, but still in the LHR
-        {id: 'max-potential-fid', weight: 0},
-        {id: 'first-meaningful-paint', weight: 0, acronym: 'FMP'},
+        // These are our "invisible" metrics. Not displayed, but still in the LHR.
+        {id: 'max-potential-fid', weight: 0, group: 'hidden'},
+        {id: 'first-meaningful-paint', weight: 0, acronym: 'FMP', group: 'hidden'},
 
-        {id: 'render-blocking-resources', weight: 0, group: 'load-opportunities'},
-        {id: 'uses-responsive-images', weight: 0, group: 'load-opportunities'},
-        {id: 'offscreen-images', weight: 0, group: 'load-opportunities'},
-        {id: 'unminified-css', weight: 0, group: 'load-opportunities'},
-        {id: 'unminified-javascript', weight: 0, group: 'load-opportunities'},
-        {id: 'unused-css-rules', weight: 0, group: 'load-opportunities'},
-        {id: 'unused-javascript', weight: 0, group: 'load-opportunities'},
-        {id: 'uses-optimized-images', weight: 0, group: 'load-opportunities'},
-        {id: 'modern-image-formats', weight: 0, group: 'load-opportunities'},
-        {id: 'uses-text-compression', weight: 0, group: 'load-opportunities'},
-        {id: 'uses-rel-preconnect', weight: 0, group: 'load-opportunities'},
-        {id: 'server-response-time', weight: 0, group: 'load-opportunities'},
-        {id: 'redirects', weight: 0, group: 'load-opportunities'},
-        {id: 'uses-rel-preload', weight: 0, group: 'load-opportunities'},
-        {id: 'uses-http2', weight: 0, group: 'load-opportunities'},
-        {id: 'efficient-animated-content', weight: 0, group: 'load-opportunities'},
-        {id: 'duplicated-javascript', weight: 0, group: 'load-opportunities'},
-        {id: 'legacy-javascript', weight: 0, group: 'load-opportunities'},
-        {id: 'preload-lcp-image', weight: 0, group: 'load-opportunities'},
-        {id: 'total-byte-weight', weight: 0, group: 'diagnostics'},
-        {id: 'uses-long-cache-ttl', weight: 0, group: 'diagnostics'},
-        {id: 'dom-size', weight: 0, group: 'diagnostics'},
-        {id: 'critical-request-chains', weight: 0, group: 'diagnostics'},
-        {id: 'user-timings', weight: 0, group: 'diagnostics'},
-        {id: 'bootup-time', weight: 0, group: 'diagnostics'},
-        {id: 'mainthread-work-breakdown', weight: 0, group: 'diagnostics'},
-        {id: 'font-display', weight: 0, group: 'diagnostics'},
+        // These audits will be put in "load-opportunities" or "diagnostics" based on their details type.
+        {id: 'render-blocking-resources', weight: 0},
+        {id: 'uses-responsive-images', weight: 0},
+        {id: 'offscreen-images', weight: 0},
+        {id: 'unminified-css', weight: 0},
+        {id: 'unminified-javascript', weight: 0},
+        {id: 'unused-css-rules', weight: 0},
+        {id: 'unused-javascript', weight: 0},
+        {id: 'uses-optimized-images', weight: 0},
+        {id: 'modern-image-formats', weight: 0},
+        {id: 'uses-text-compression', weight: 0},
+        {id: 'uses-rel-preconnect', weight: 0},
+        {id: 'server-response-time', weight: 0},
+        {id: 'redirects', weight: 0},
+        {id: 'uses-rel-preload', weight: 0},
+        {id: 'uses-http2', weight: 0},
+        {id: 'efficient-animated-content', weight: 0},
+        {id: 'duplicated-javascript', weight: 0},
+        {id: 'legacy-javascript', weight: 0},
+        {id: 'preload-lcp-image', weight: 0},
+        {id: 'total-byte-weight', weight: 0},
+        {id: 'uses-long-cache-ttl', weight: 0},
+        {id: 'dom-size', weight: 0},
+        {id: 'critical-request-chains', weight: 0},
+        {id: 'user-timings', weight: 0},
+        {id: 'bootup-time', weight: 0},
+        {id: 'mainthread-work-breakdown', weight: 0},
+        {id: 'font-display', weight: 0},
+        {id: 'resource-summary', weight: 0},
+        {id: 'third-party-summary', weight: 0},
+        {id: 'third-party-facades', weight: 0},
+        {id: 'largest-contentful-paint-element', weight: 0},
+        {id: 'lcp-lazy-loaded', weight: 0},
+        {id: 'layout-shift-elements', weight: 0},
+        {id: 'uses-passive-event-listeners', weight: 0},
+        {id: 'no-document-write', weight: 0},
+        {id: 'long-tasks', weight: 0},
+        {id: 'non-composited-animations', weight: 0},
+        {id: 'unsized-images', weight: 0},
+        {id: 'viewport', weight: 0},
+
+        // Budget audits.
         {id: 'performance-budget', weight: 0, group: 'budgets'},
         {id: 'timing-budget', weight: 0, group: 'budgets'},
-        {id: 'resource-summary', weight: 0, group: 'diagnostics'},
-        {id: 'third-party-summary', weight: 0, group: 'diagnostics'},
-        {id: 'third-party-facades', weight: 0, group: 'diagnostics'},
-        {id: 'largest-contentful-paint-element', weight: 0, group: 'diagnostics'},
-        {id: 'lcp-lazy-loaded', weight: 0, group: 'diagnostics'},
-        {id: 'layout-shift-elements', weight: 0, group: 'diagnostics'},
-        {id: 'uses-passive-event-listeners', weight: 0, group: 'diagnostics'},
-        {id: 'no-document-write', weight: 0, group: 'diagnostics'},
-        {id: 'long-tasks', weight: 0, group: 'diagnostics'},
-        {id: 'non-composited-animations', weight: 0, group: 'diagnostics'},
-        {id: 'unsized-images', weight: 0, group: 'diagnostics'},
-        {id: 'viewport', weight: 0, group: 'diagnostics'},
-        // Audits past this point don't belong to a group and will not be shown automatically
-        {id: 'network-requests', weight: 0},
-        {id: 'network-rtt', weight: 0},
-        {id: 'network-server-latency', weight: 0},
-        {id: 'main-thread-tasks', weight: 0},
-        {id: 'diagnostics', weight: 0},
-        {id: 'metrics', weight: 0},
-        {id: 'screenshot-thumbnails', weight: 0},
-        {id: 'final-screenshot', weight: 0},
-        {id: 'script-treemap-data', weight: 0},
+
+        // Audits past this point contain useful data but are not displayed with other audits.
+        {id: 'network-requests', weight: 0, group: 'hidden'},
+        {id: 'network-rtt', weight: 0, group: 'hidden'},
+        {id: 'network-server-latency', weight: 0, group: 'hidden'},
+        {id: 'main-thread-tasks', weight: 0, group: 'hidden'},
+        {id: 'diagnostics', weight: 0, group: 'hidden'},
+        {id: 'metrics', weight: 0, group: 'hidden'},
+        {id: 'screenshot-thumbnails', weight: 0, group: 'hidden'},
+        {id: 'final-screenshot', weight: 0, group: 'hidden'},
+        {id: 'script-treemap-data', weight: 0, group: 'hidden'},
       ],
     },
     'accessibility': {

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

@@ -15,7 +15,7 @@ const frAudits = [
 /** @type {Record<string, LH.Config.AuditRefJson[]>} */
 const frCategoryAuditRefExtensions = {
   'performance': [
-    {id: 'uses-responsive-images-snapshot', weight: 0, group: 'diagnostics'},
+    {id: 'uses-responsive-images-snapshot', weight: 0},
   ],
 };
 

package/lighthouse-core/fraggle-rock/gather/base-gatherer.js

@@ -62,8 +62,13 @@ class FRGatherer {
    * @return {keyof LH.GathererArtifacts}
    */
   get name() {
+    let name = this.constructor.name;
+    // Rollup will mangle class names in an known way–just trim until `$`.
+    if (name.includes('$')) {
+      name = name.substr(0, name.indexOf('$'));
+    }
     // @ts-expect-error - assume that class name has been added to LH.GathererArtifacts.
-    return this.constructor.name;
+    return name;
   }
 
   /**

package/lighthouse-core/gather/gatherers/dobetterweb/response-compression.js

@@ -10,6 +10,7 @@
   */
 'use strict';
 
+const {Buffer} = require('buffer');
 const FRGatherer = require('../../../fraggle-rock/gather/base-gatherer.js');
 const URL = require('../../../lib/url-shim.js');
 const Sentry = require('../../../lib/sentry.js');

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

@@ -16,7 +16,10 @@ const Metrics = require('./traces/pwmetrics-events.js');
 const NetworkAnalysisComputed = require('../computed/network-analysis.js');
 const LoadSimulatorComputed = require('../computed/load-simulator.js');
 const LHError = require('../lib/lh-error.js');
-const pipeline = promisify(stream.pipeline);
+// TODO(esmodules): Rollup does not support `promisfy` or `stream.pipeline`. Bundled files
+// don't need anything in this file except for `stringifyReplacer`, so a check for
+// truthiness before using is enough.
+const pipeline = promisify && promisify(stream.pipeline);
 
 const artifactsFilename = 'artifacts.json';
 const traceSuffix = '.trace.json';

package/lighthouse-core/lib/lh-env.js

@@ -5,6 +5,8 @@
  */
 'use strict';
 
+const process = require('process');
+
 module.exports = {
   // NODE_ENV is set to test by jest and by smokehouse CLI runner
   // CI as a catchall for everything we do in GitHub Actions

package/lighthouse-core/lib/tappable-rects.js

@@ -5,14 +5,7 @@
  */
 'use strict';
 
-const {
-  filterOutRectsContainedByOthers,
-  filterOutTinyRects,
-  rectsTouchOrOverlap,
-  rectContainsPoint,
-  getBoundingRect,
-  getRectCenterPoint,
-} = require('./rect-helpers.js');
+const RectHelpers = require('./rect-helpers.js');
 
 /**
  * Merge client rects together and remove small ones. This may result in a larger overall
@@ -23,8 +16,8 @@ const {
 function getTappableRectsFromClientRects(clientRects) {
   // 1x1px rect shouldn't be reason to treat the rect as something the user should tap on.
   // Often they're made invisble in some obscure way anyway, and only exist for e.g. accessibiliity.
-  clientRects = filterOutTinyRects(clientRects);
-  clientRects = filterOutRectsContainedByOthers(clientRects);
+  clientRects = RectHelpers.filterOutTinyRects(clientRects);
+  clientRects = RectHelpers.filterOutRectsContainedByOthers(clientRects);
   clientRects = mergeTouchingClientRects(clientRects);
   return clientRects;
 }
@@ -68,17 +61,17 @@ function mergeTouchingClientRects(clientRects) {
       const rectsLineUpVertically =
         almostEqual(crA.left, crB.left) || almostEqual(crA.right, crB.right);
       const canMerge =
-        rectsTouchOrOverlap(crA, crB) &&
+        RectHelpers.rectsTouchOrOverlap(crA, crB) &&
         (rectsLineUpHorizontally || rectsLineUpVertically);
 
       if (canMerge) {
-        const replacementClientRect = getBoundingRect([crA, crB]);
-        const mergedRectCenter = getRectCenterPoint(replacementClientRect);
+        const replacementClientRect = RectHelpers.getBoundingRect([crA, crB]);
+        const mergedRectCenter = RectHelpers.getRectCenterPoint(replacementClientRect);
 
         if (
           !(
-            rectContainsPoint(crA, mergedRectCenter) ||
-            rectContainsPoint(crB, mergedRectCenter)
+            RectHelpers.rectContainsPoint(crA, mergedRectCenter) ||
+            RectHelpers.rectContainsPoint(crB, mergedRectCenter)
           )
         ) {
           // Don't merge because the new shape is too different from the

package/lighthouse-core/runner.js

@@ -20,6 +20,7 @@ const URL = require('./lib/url-shim.js');
 const Sentry = require('./lib/sentry.js');
 const generateReport = require('../report/generator/report-generator.js').generateReport;
 const LHError = require('./lib/lh-error.js');
+const {version: lighthouseVersion} = require('../package.json');
 
 /** @typedef {import('./gather/connections/connection.js')} Connection */
 /** @typedef {import('./lib/arbitrary-equality-map.js')} ArbitraryEqualityMap */
@@ -112,7 +113,6 @@ class Runner {
       }
 
       // Entering: conclusion of the lighthouse result object
-      const lighthouseVersion = require('../package.json').version;
 
       // Use version from gathering stage.
       // If accessibility gatherer didn't run or errored, it won't be in credits.

package/lighthouse-core/util-commonjs.js

@@ -519,10 +519,9 @@ class Util {
     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 ||
+      if (auditRef.group === 'hidden' ||
           auditRef.result.scoreDisplayMode === 'manual' ||
           auditRef.result.scoreDisplayMode === 'notApplicable') {
         continue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "8.6.0-dev.20211031",
+  "version": "8.6.0-dev.20211101",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {
@@ -95,9 +95,16 @@
   },
   "devDependencies": {
     "@build-tracker/cli": "^1.0.0-beta.15",
+    "@firebase/app-types": "0.3.1",
+    "@firebase/auth-types": "0.3.2",
+    "@firebase/util": "0.2.1",
+    "@rollup/plugin-alias": "^3.1.2",
     "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-dynamic-import-vars": "^1.1.1",
+    "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@rollup/plugin-typescript": "^8.2.5",
+    "@stadtlandnetz/rollup-plugin-postprocess": "^1.1.0",
     "@testing-library/preact": "^2.0.1",
     "@testing-library/preact-hooks": "^1.1.0",
     "@types/archiver": "^2.1.2",
@@ -107,7 +114,6 @@
     "@types/cpy": "^5.1.0",
     "@types/eslint": "^4.16.6",
     "@types/estree": "^0.0.50",
-    "@types/exorcist": "^0.4.5",
     "@types/gh-pages": "^2.0.0",
     "@types/google.analytics": "0.0.39",
     "@types/jest": "^24.0.9",
@@ -133,7 +139,6 @@
     "angular": "^1.7.4",
     "archiver": "^3.0.0",
     "browserify": "^17.0.0",
-    "browserify-banner": "^1.0.15",
     "c8": "^7.4.0",
     "chalk": "^2.4.1",
     "chrome-devtools-frontend": "1.0.922924",
@@ -148,7 +153,6 @@
     "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-local-rules": "0.1.0",
     "event-target-shim": "^6.0.2",
-    "exorcist": "^1.0.1",
     "firebase": "^9.0.2",
     "gh-pages": "^2.0.1",
     "glob": "^7.1.3",
@@ -163,13 +167,12 @@
     "mime-types": "^2.1.30",
     "node-fetch": "^2.6.1",
     "npm-run-posix-or-windows": "^2.0.2",
-    "package-json-versionify": "^1.0.4",
     "pako": "^2.0.3",
     "preact": "^10.5.14",
     "pretty-json-stringify": "^0.0.2",
     "puppeteer": "^10.2.0",
     "resolve": "^1.20.0",
-    "rollup": "^2.50.6",
+    "rollup": "^2.52.7",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-polyfill-node": "^0.7.0",
     "rollup-plugin-replace": "^2.2.0",

package/report/clients/standalone.js

@@ -18,8 +18,6 @@ import {Logger} from '../renderer/logger.js';
 import {ReportRenderer} from '../renderer/report-renderer.js';
 import {ReportUIFeatures} from '../renderer/report-ui-features.js';
 
-// Used by standalone.html
-// eslint-disable-next-line no-unused-vars
 function __initLighthouseReport__() {
   const dom = new DOM(document);
   const renderer = new ReportRenderer(dom);

package/report/renderer/element-screenshot-renderer.js

@@ -51,7 +51,7 @@ function clamp(value, min, max) {
 /**
  * @param {Rect} rect
  */
-function getRectCenterPoint(rect) {
+function getElementRectCenterPoint(rect) {
   return {
     x: rect.left + rect.width / 2,
     y: rect.top + rect.height / 2,
@@ -68,7 +68,7 @@ export class ElementScreenshotRenderer {
    * @param {Size} screenshotSize
    */
   static getScreenshotPositions(elementRectSC, elementPreviewSizeSC, screenshotSize) {
-    const elementRectCenter = getRectCenterPoint(elementRectSC);
+    const elementRectCenter = getElementRectCenterPoint(elementRectSC);
 
     // Try to center clipped region.
     const screenshotLeftVisibleEdge = clamp(

package/report/renderer/performance-category-renderer.js

@@ -152,6 +152,21 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
     return url.href;
   }
 
+  /**
+   * For performance, audits with no group should be a diagnostic or opportunity.
+   * The audit details type will determine which of the two groups an audit is in.
+   *
+   * @param {LH.ReportResult.AuditRef} audit
+   * @return {'load-opportunity'|'diagnostic'|null}
+   */
+  _classifyPerformanceAudit(audit) {
+    if (audit.group) return null;
+    if (audit.result.details && audit.result.details.type === 'opportunity') {
+      return 'load-opportunity';
+    }
+    return 'diagnostic';
+  }
+
   /**
    * @param {LH.ReportResult.Category} category
    * @param {Object<string, LH.Result.ReportGroup>} groups
@@ -209,10 +224,10 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
 
     // Opportunities
     const opportunityAudits = category.auditRefs
-        .filter(audit => audit.group === 'load-opportunities' && !Util.showAsPassed(audit.result))
+        .filter(audit => this._classifyPerformanceAudit(audit) === 'load-opportunity')
+        .filter(audit => !Util.showAsPassed(audit.result))
         .sort((auditA, auditB) => this._getWastedMs(auditB) - this._getWastedMs(auditA));
 
-
     const filterableMetrics = metricAudits.filter(a => !!a.relevantAudits);
     // TODO: only add if there are opportunities & diagnostics rendered.
     if (filterableMetrics.length) {
@@ -242,7 +257,8 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
 
     // Diagnostics
     const diagnosticAudits = category.auditRefs
-        .filter(audit => audit.group === 'diagnostics' && !Util.showAsPassed(audit.result))
+        .filter(audit => this._classifyPerformanceAudit(audit) === 'diagnostic')
+        .filter(audit => !Util.showAsPassed(audit.result))
         .sort((a, b) => {
           const scoreA = a.result.scoreDisplayMode === 'informative' ? 100 : Number(a.result.score);
           const scoreB = b.result.scoreDisplayMode === 'informative' ? 100 : Number(b.result.score);
@@ -258,8 +274,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
 
     // Passed audits
     const passedAudits = category.auditRefs
-        .filter(audit => (audit.group === 'load-opportunities' || audit.group === 'diagnostics') &&
-            Util.showAsPassed(audit.result));
+        .filter(audit => this._classifyPerformanceAudit(audit) && Util.showAsPassed(audit.result));
 
     if (!passedAudits.length) return element;
 

package/report/renderer/util.js

@@ -516,10 +516,9 @@ export class Util {
     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 ||
+      if (auditRef.group === 'hidden' ||
           auditRef.result.scoreDisplayMode === 'manual' ||
           auditRef.result.scoreDisplayMode === 'notApplicable') {
         continue;