lighthouse 9.4.0 → 9.5.0

package/lighthouse-core/fraggle-rock/gather/timespan-runner.js

@@ -5,6 +5,7 @@
  */
 'use strict';
 
+const log = require('lighthouse-logger');
 const Driver = require('./driver.js');
 const Runner = require('../../runner.js');
 const {
@@ -18,10 +19,12 @@ const {getBaseArtifacts, finalizeArtifacts} = require('./base-artifacts.js');
 
 /**
  * @param {{page: import('puppeteer').Page, config?: LH.Config.Json, configContext?: LH.Config.FRContext}} options
- * @return {Promise<{endTimespan(): Promise<LH.RunnerResult|undefined>}>}
+ * @return {Promise<{endTimespanGather(): Promise<LH.Gatherer.FRGatherResult>}>}
  */
-async function startTimespan(options) {
+async function startTimespanGather(options) {
   const {configContext = {}} = options;
+  log.setLevel(configContext.logLevel || 'error');
+
   const {config} = initializeConfig(options.config, {...configContext, gatherMode: 'timespan'});
   const driver = new Driver(options.page);
   await driver.connect();
@@ -29,11 +32,12 @@ async function startTimespan(options) {
   /** @type {Map<string, LH.ArbitraryEqualityMap>} */
   const computedCache = new Map();
   const artifactDefinitions = config.artifacts || [];
-  const requestedUrl = await options.page.url();
+  const requestedUrl = await driver.url();
   const baseArtifacts = await getBaseArtifacts(config, driver, {gatherMode: 'timespan'});
   const artifactState = getEmptyArtifactState();
   /** @type {Omit<import('./runner-helpers.js').CollectPhaseArtifactOptions, 'phase'>} */
   const phaseOptions = {
+    url: requestedUrl,
     driver,
     artifactDefinitions,
     artifactState,
@@ -48,8 +52,10 @@ async function startTimespan(options) {
   await collectPhaseArtifacts({phase: 'startSensitiveInstrumentation', ...phaseOptions});
 
   return {
-    async endTimespan() {
-      const finalUrl = await options.page.url();
+    async endTimespanGather() {
+      const finalUrl = await driver.url();
+      phaseOptions.url = finalUrl;
+
       const runnerOptions = {config, computedCache};
       const artifacts = await Runner.gather(
         async () => {
@@ -66,11 +72,11 @@ async function startTimespan(options) {
         },
         runnerOptions
       );
-      return Runner.audit(artifacts, runnerOptions);
+      return {artifacts, runnerOptions};
     },
   };
 }
 
 module.exports = {
-  startTimespan,
+  startTimespanGather,
 };

package/lighthouse-core/fraggle-rock/user-flow.js

@@ -6,13 +6,16 @@
 'use strict';
 
 const {generateFlowReportHtml} = require('../../report/generator/report-generator.js');
-const {snapshot} = require('./gather/snapshot-runner.js');
-const {startTimespan} = require('./gather/timespan-runner.js');
-const {navigation} = require('./gather/navigation-runner.js');
+const {snapshotGather} = require('./gather/snapshot-runner.js');
+const {startTimespanGather} = require('./gather/timespan-runner.js');
+const {navigationGather} = require('./gather/navigation-runner.js');
+const Runner = require('../runner.js');
+const {initializeConfig} = require('./config/config.js');
 
-/** @typedef {Parameters<snapshot>[0]} FrOptions */
+/** @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 */
 
 class UserFlow {
   /**
@@ -24,8 +27,10 @@ class UserFlow {
     this.options = {page, ...options};
     /** @type {string|undefined} */
     this.name = options?.name;
-    /** @type {LH.FlowResult.Step[]} */
-    this.steps = [];
+    /** @type {LH.UserFlow.GatherStep[]} */
+    this._gatherSteps = [];
+    /** @type {GatherStepRunnerOptions} */
+    this._gatherStepRunnerOptions = new WeakMap();
   }
 
   /**
@@ -38,12 +43,12 @@ class UserFlow {
   }
 
   /**
-   * @param {LH.Result} lhr
+   * @param {LH.Artifacts} artifacts
    * @return {string}
    */
-  _getDefaultStepName(lhr) {
-    const shortUrl = this._shortenUrl(lhr.finalUrl);
-    switch (lhr.gatherMode) {
+  _getDefaultStepName(artifacts) {
+    const shortUrl = this._shortenUrl(artifacts.URL.finalUrl);
+    switch (artifacts.GatherContext.gatherMode) {
       case 'navigation':
         return `Navigation report (${shortUrl})`;
       case 'timespan':
@@ -66,7 +71,8 @@ class UserFlow {
     }
 
     // On repeat navigations, we want to disable storage reset by default (i.e. it's not a cold load).
-    const isSubsequentNavigation = this.steps.some(step => step.lhr.gatherMode === 'navigation');
+    const isSubsequentNavigation = this._gatherSteps
+      .some(step => step.artifacts.GatherContext.gatherMode === 'navigation');
     if (isSubsequentNavigation) {
       if (settingsOverrides.disableStorageReset === undefined) {
         settingsOverrides.disableStorageReset = true;
@@ -79,92 +85,145 @@ class UserFlow {
     return options;
   }
 
+  /**
+   *
+   * @param {LH.Gatherer.FRGatherResult} gatherResult
+   * @param {StepOptions} options
+   */
+  _addGatherStep(gatherResult, options) {
+    const providedName = options?.stepName;
+    const gatherStep = {
+      artifacts: gatherResult.artifacts,
+      name: providedName || this._getDefaultStepName(gatherResult.artifacts),
+      config: options.config,
+      configContext: options.configContext,
+    };
+    this._gatherSteps.push(gatherStep);
+    this._gatherStepRunnerOptions.set(gatherStep, gatherResult.runnerOptions);
+  }
+
   /**
    * @param {LH.NavigationRequestor} requestor
    * @param {StepOptions=} stepOptions
    */
   async navigate(requestor, stepOptions) {
-    if (this.currentTimespan) throw Error('Timespan already in progress');
-
-    const result = await navigation(
-      requestor,
-      this._getNextNavigationOptions(stepOptions)
-    );
-    if (!result) throw Error('Navigation returned undefined');
-
-    const providedName = stepOptions?.stepName;
-    this.steps.push({
-      lhr: result.lhr,
-      name: providedName || this._getDefaultStepName(result.lhr),
-    });
+    if (this.currentTimespan) throw new Error('Timespan already in progress');
+
+    const options = this._getNextNavigationOptions(stepOptions);
+    const gatherResult = await navigationGather(requestor, options);
 
-    return result;
+    this._addGatherStep(gatherResult, options);
+
+    return gatherResult;
   }
 
   /**
    * @param {StepOptions=} stepOptions
    */
   async startTimespan(stepOptions) {
-    if (this.currentTimespan) throw Error('Timespan already in progress');
+    if (this.currentTimespan) throw new Error('Timespan already in progress');
 
     const options = {...this.options, ...stepOptions};
-    const timespan = await startTimespan(options);
+    const timespan = await startTimespanGather(options);
     this.currentTimespan = {timespan, options};
   }
 
   async endTimespan() {
-    if (!this.currentTimespan) throw Error('No timespan in progress');
+    if (!this.currentTimespan) throw new Error('No timespan in progress');
 
     const {timespan, options} = this.currentTimespan;
-    const result = await timespan.endTimespan();
+    const gatherResult = await timespan.endTimespanGather();
     this.currentTimespan = undefined;
-    if (!result) throw Error('Timespan returned undefined');
 
-    const providedName = options?.stepName;
-    this.steps.push({
-      lhr: result.lhr,
-      name: providedName || this._getDefaultStepName(result.lhr),
-    });
+    this._addGatherStep(gatherResult, options);
 
-    return result;
+    return gatherResult;
   }
 
   /**
    * @param {StepOptions=} stepOptions
    */
   async snapshot(stepOptions) {
-    if (this.currentTimespan) throw Error('Timespan already in progress');
+    if (this.currentTimespan) throw new Error('Timespan already in progress');
 
     const options = {...this.options, ...stepOptions};
-    const result = await snapshot(options);
-    if (!result) throw Error('Snapshot returned undefined');
+    const gatherResult = await snapshotGather(options);
 
-    const providedName = stepOptions?.stepName;
-    this.steps.push({
-      lhr: result.lhr,
-      name: providedName || this._getDefaultStepName(result.lhr),
-    });
+    this._addGatherStep(gatherResult, options);
 
-    return result;
+    return gatherResult;
   }
 
   /**
-   * @return {LH.FlowResult}
+   * @returns {Promise<LH.FlowResult>}
    */
-  getFlowResult() {
-    if (!this.steps.length) throw Error('Need at least one step before getting the flow result');
-    const url = new URL(this.steps[0].lhr.finalUrl);
-    const name = this.name || `User flow (${url.hostname})`;
-    return {steps: this.steps, name};
+  async createFlowResult() {
+    return auditGatherSteps(this._gatherSteps, {
+      name: this.name,
+      config: this.options.config,
+      gatherStepRunnerOptions: this._gatherStepRunnerOptions,
+    });
   }
 
   /**
-   * @return {string}
+   * @return {Promise<string>}
    */
-  generateReport() {
-    const flowResult = this.getFlowResult();
+  async generateReport() {
+    const flowResult = await this.createFlowResult();
     return generateFlowReportHtml(flowResult);
   }
+
+  /**
+   * @return {LH.UserFlow.FlowArtifacts}
+   */
+  createArtifactsJson() {
+    return {
+      gatherSteps: this._gatherSteps,
+      name: this.name,
+    };
+  }
+}
+
+/**
+ * @param {Array<LH.UserFlow.GatherStep>} gatherSteps
+ * @param {{name?: string, config?: LH.Config.Json, gatherStepRunnerOptions?: GatherStepRunnerOptions}} options
+ */
+async function auditGatherSteps(gatherSteps, options) {
+  if (!gatherSteps.length) {
+    throw new Error('Need at least one step before getting the result');
+  }
+
+  /** @type {LH.FlowResult['steps']} */
+  const steps = [];
+  for (const gatherStep of gatherSteps) {
+    const {artifacts, name, configContext} = gatherStep;
+
+    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 {gatherMode} = artifacts.GatherContext;
+      const {config} = initializeConfig(configJson, {...configContext, gatherMode});
+      runnerOptions = {
+        config,
+        computedCache: new Map(),
+      };
+    }
+
+    const result = await Runner.audit(artifacts, runnerOptions);
+    if (!result) throw new Error(`Step "${name}" did not return a result`);
+    steps.push({lhr: result.lhr, name});
+  }
+
+  const url = new URL(gatherSteps[0].artifacts.URL.finalUrl);
+  const flowName = options.name || `User flow (${url.hostname})`;
+  return {steps, name: flowName};
 }
 
-module.exports = UserFlow;
+
+module.exports = {
+  UserFlow,
+  auditGatherSteps,
+};

package/lighthouse-core/gather/gatherers/full-page-screenshot.js

@@ -70,21 +70,22 @@ class FullPageScreenshot extends FRGatherer {
 
   /**
    * @param {LH.Gatherer.FRTransitionalContext} context
+   * @param {{height: number, width: number, mobile: boolean}} deviceMetrics
    * @return {Promise<LH.Artifacts.FullPageScreenshot['screenshot']>}
    */
-  async _takeScreenshot(context) {
+  async _takeScreenshot(context, deviceMetrics) {
     const session = context.driver.defaultSession;
     const maxTextureSize = await this.getMaxTextureSize(context);
     const metrics = await session.sendCommand('Page.getLayoutMetrics');
 
-    // Width should match emulated width, without considering content overhang.
-    // Both layoutViewport and visualViewport capture this. visualViewport accounts
-    // for page zoom/scale, which we currently don't account for (or expect). So we use layoutViewport.width.
-    // Note: If the page is zoomed, many assumptions fail.
-    //
-    // Height should be as tall as the content. So we use contentSize.height
-    const width = Math.min(metrics.layoutViewport.clientWidth, maxTextureSize);
-    const height = Math.min(metrics.contentSize.height, maxTextureSize);
+    // Height should be as tall as the content.
+    // Scale the emulated height to reach the content height.
+    const fullHeight = Math.round(
+      deviceMetrics.height *
+      metrics.contentSize.height /
+      metrics.layoutViewport.clientHeight
+    );
+    const height = Math.min(fullHeight, maxTextureSize);
 
     // Setup network monitor before we change the viewport.
     const networkMonitor = new NetworkMonitor(session);
@@ -98,13 +99,10 @@ class FullPageScreenshot extends FRGatherer {
     await networkMonitor.enable();
 
     await session.sendCommand('Emulation.setDeviceMetricsOverride', {
-      // If we're gathering with mobile screenEmulation on (overlay scrollbars, etc), continue to use that for this screenshot.
-      mobile: context.settings.screenEmulation.mobile,
-      height,
-      width,
+      mobile: deviceMetrics.mobile,
       deviceScaleFactor: 1,
-      scale: 1,
-      screenOrientation: {angle: 0, type: 'portraitPrimary'},
+      height,
+      width: 0, // Leave width unchanged
     });
 
     // Now that the viewport is taller, give the page some time to fetch new resources that
@@ -127,7 +125,7 @@ class FullPageScreenshot extends FRGatherer {
 
     return {
       data,
-      width,
+      width: deviceMetrics.width,
       height,
     };
   }
@@ -185,29 +183,37 @@ class FullPageScreenshot extends FRGatherer {
     const session = context.driver.defaultSession;
     const executionContext = context.driver.executionContext;
     const settings = context.settings;
-
-    // In case some other program is controlling emulation, remember what the device looks
-    // like now and reset after gatherer is done.
-    let observedDeviceMetrics;
     const lighthouseControlsEmulation = !settings.screenEmulation.disabled;
+
+    // Make a copy so we don't modify the config settings.
+    /** @type {{width: number, height: number, deviceScaleFactor: number, mobile: boolean}} */
+    const deviceMetrics = {...settings.screenEmulation};
+
+    // In case some other program is controlling emulation, remember what the device looks like now and reset after gatherer is done.
+    // If we're gathering with mobile screenEmulation on (overlay scrollbars, etc), continue to use that for this screenshot.
     if (!lighthouseControlsEmulation) {
-      observedDeviceMetrics = await executionContext.evaluate(getObservedDeviceMetrics, {
+      const observedDeviceMetrics = await executionContext.evaluate(getObservedDeviceMetrics, {
         args: [],
         useIsolation: true,
         deps: [kebabCaseToCamelCase],
       });
+      deviceMetrics.height = observedDeviceMetrics.height;
+      deviceMetrics.width = observedDeviceMetrics.width;
+      deviceMetrics.deviceScaleFactor = observedDeviceMetrics.deviceScaleFactor;
+      // If screen emulation is disabled, use formFactor to determine if we are on mobile.
+      deviceMetrics.mobile = settings.formFactor === 'mobile';
     }
 
     try {
       return {
-        screenshot: await this._takeScreenshot(context),
+        screenshot: await this._takeScreenshot(context, deviceMetrics),
         nodes: await this._resolveNodes(context),
       };
     } finally {
       // Revert resized page.
       if (lighthouseControlsEmulation) {
         await emulation.emulate(session, settings);
-      } else if (observedDeviceMetrics) {
+      } else {
         // Best effort to reset emulation to what it was.
         // https://github.com/GoogleChrome/lighthouse/pull/10716#discussion_r428970681
         // TODO: seems like this would be brittle. Should at least work for devtools, but what
@@ -216,8 +222,10 @@ class FullPageScreenshot extends FRGatherer {
         // and then just call that to reset?
         // https://github.com/GoogleChrome/lighthouse/issues/11122
         await session.sendCommand('Emulation.setDeviceMetricsOverride', {
-          mobile: settings.formFactor === 'mobile',
-          ...observedDeviceMetrics,
+          mobile: deviceMetrics.mobile,
+          deviceScaleFactor: deviceMetrics.deviceScaleFactor,
+          height: deviceMetrics.height,
+          width: 0, // Leave width unchanged
         });
       }
     }

package/lighthouse-core/gather/gatherers/inspector-issues.js

@@ -73,7 +73,7 @@ class InspectorIssues extends FRGatherer {
       mixedContentIssue: [],
       navigatorUserAgentIssue: [],
       quirksModeIssue: [],
-      sameSiteCookieIssue: [],
+      cookieIssue: [],
       sharedArrayBufferIssue: [],
       twaQualityEnforcement: [],
     };

package/lighthouse-core/lib/arbitrary-equality-map.js

@@ -5,7 +5,7 @@
  */
 'use strict';
 
-const isEqual = require('lodash.isequal');
+const {isEqual} = require('lodash');
 
 /**
  * @fileoverview This class is designed to allow maps with arbitrary equality functions.

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

@@ -313,6 +313,20 @@ async function saveLanternNetworkData(devtoolsLog, outputPath) {
   fs.writeFileSync(outputPath, JSON.stringify(lanternData));
 }
 
+/**
+ * Normalize timing data so it doesn't change every update.
+ * @param {LH.Result.MeasureEntry[]} timings
+ */
+function normalizeTimingEntries(timings) {
+  let baseTime = 0;
+  for (const timing of timings) {
+    // @ts-expect-error: Value actually is writeable at this point.
+    timing.startTime = baseTime++;
+    // @ts-expect-error: Value actually is writeable at this point.
+    timing.duration = 1;
+  }
+}
+
 module.exports = {
   saveArtifacts,
   saveLhr,
@@ -323,4 +337,5 @@ module.exports = {
   saveDevtoolsLog,
   saveLanternNetworkData,
   stringifyReplacer,
+  normalizeTimingEntries,
 };

package/lighthouse-core/runner.js

@@ -5,7 +5,7 @@
  */
 'use strict';
 
-const isDeepEqual = require('lodash.isequal');
+const {isEqual: isDeepEqual} = require('lodash');
 const Driver = require('./gather/driver.js');
 const GatherRunner = require('./gather/gather-runner.js');
 const ReportScoring = require('./scoring.js');

package/lighthouse-core/scripts/package.json

@@ -0,0 +1,4 @@
+{
+  "type": "module",
+  "//": "Any directory that uses `import ... from` or `export ...` must be type module. Temporary file until root package.json is type: module"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "9.4.0",
+  "version": "9.5.0",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {
@@ -20,7 +20,7 @@
     "build-extension": "yarn build-extension-chrome && yarn build-extension-firefox",
     "build-extension-chrome": "node ./build/build-extension.js chrome",
     "build-extension-firefox": "node ./build/build-extension.js firefox",
-    "build-devtools": "yarn reset-link && node ./build/build-bundle.js clients/devtools-entry.js dist/lighthouse-dt-bundle.js && node ./build/build-dt-report-resources.js",
+    "build-devtools": "yarn reset-link && node ./build/build-bundle.js clients/devtools/devtools-entry.js dist/lighthouse-dt-bundle.js && node ./build/build-dt-report-resources.js",
     "build-smokehouse-bundle": "node ./build/build-smokehouse-bundle.js",
     "build-lr": "yarn reset-link && node ./build/build-lightrider-bundles.js",
     "build-pack": "bash build/build-pack.sh",
@@ -76,6 +76,7 @@
     "update:sample-artifacts": "node lighthouse-core/scripts/update-report-fixtures.js",
     "update:sample-json": "yarn i18n:collect-strings && node ./lighthouse-cli -A=./lighthouse-core/test/results/artifacts --config-path=./lighthouse-core/test/results/sample-config.js --output=json --output-path=./lighthouse-core/test/results/sample_v2.json && node lighthouse-core/scripts/cleanup-LHR-for-diff.js ./lighthouse-core/test/results/sample_v2.json --only-remove-timing",
     "update:flow-sample-json": "node ./lighthouse-core/scripts/update-flow-fixtures.js",
+    "update:snapshot-sample-json": "node ./lighthouse-core/scripts/update-snapshot-sample.js",
     "update:test-devtools": "bash lighthouse-core/test/chromium-web-tests/test-locally.sh --reset-results",
     "test-devtools": "bash lighthouse-core/test/chromium-web-tests/test-locally.sh",
     "open-devtools": "bash lighthouse-core/scripts/open-devtools.sh",
@@ -115,10 +116,7 @@
     "@types/jest": "^27.0.3",
     "@types/jpeg-js": "^0.3.7",
     "@types/jsdom": "^16.2.13",
-    "@types/lodash.clonedeep": "^4.5.6",
-    "@types/lodash.get": "^4.4.6",
-    "@types/lodash.isequal": "^4.5.2",
-    "@types/lodash.set": "^4.3.6",
+    "@types/lodash": "^4.14.178",
     "@types/node": "*",
     "@types/pako": "^1.0.1",
     "@types/resize-observer-browser": "^0.1.1",
@@ -140,7 +138,7 @@
     "cpy": "^8.1.2",
     "cross-env": "^7.0.2",
     "csv-validator": "^0.0.3",
-    "devtools-protocol": "0.0.964215",
+    "devtools-protocol": "0.0.975298",
     "es-main": "^1.0.2",
     "eslint": "^8.4.1",
     "eslint-config-google": "^0.14.0",
@@ -195,10 +193,7 @@
     "js-library-detector": "^6.4.0",
     "lighthouse-logger": "^1.3.0",
     "lighthouse-stack-packs": "^1.7.0",
-    "lodash.clonedeep": "^4.5.0",
-    "lodash.get": "^4.4.2",
-    "lodash.isequal": "^4.5.0",
-    "lodash.set": "^4.3.2",
+    "lodash": "^4.17.21",
     "lookup-closest-locale": "6.2.0",
     "metaviewport-parser": "0.2.0",
     "open": "^8.4.0",
@@ -213,7 +208,7 @@
     "yargs-parser": "^21.0.0"
   },
   "resolutions": {
-    "puppeteer/**/devtools-protocol": "0.0.964215"
+    "puppeteer/**/devtools-protocol": "0.0.975298"
   },
   "repository": "GoogleChrome/lighthouse",
   "keywords": [

package/report/assets/templates.html

@@ -189,7 +189,8 @@ limitations under the License.
       animation: none;
     }
 
-    .lh-sticky-header .lh-gauge__label {
+    .lh-sticky-header .lh-gauge__label,
+    .lh-sticky-header .lh-fraction__label {
       display: none;
     }
 

package/report/renderer/components.js

@@ -445,7 +445,7 @@ function createScorescaleComponent(dom) {
 function createScoresWrapperComponent(dom) {
   const el0 = dom.createFragment();
   const el1 = dom.createElement('style');
-  el1.append('\n    .lh-scores-container {\n      display: flex;\n      flex-direction: column;\n      padding: var(--default-padding) 0;\n      position: relative;\n      width: 100%;\n    }\n\n    .lh-sticky-header {\n      --gauge-circle-size: var(--gauge-circle-size-sm);\n      --plugin-badge-size: 16px;\n      --plugin-icon-size: 75%;\n      --gauge-wrapper-width: 60px;\n      --gauge-percentage-font-size: 13px;\n      position: fixed;\n      left: 0;\n      right: 0;\n      top: var(--topbar-height);\n      font-weight: 500;\n      display: none;\n      justify-content: center;\n      background-color: var(--sticky-header-background-color);\n      border-bottom: 1px solid var(--color-gray-200);\n      padding-top: var(--score-container-padding);\n      padding-bottom: 4px;\n      z-index: 1;\n      pointer-events: none;\n    }\n\n    .lh-devtools .lh-sticky-header {\n      /* The report within DevTools is placed in a container with overflow, which changes the placement of this header unless we change `position` to `sticky.` */\n      position: sticky;\n    }\n\n    .lh-sticky-header--visible {\n      display: grid;\n      grid-auto-flow: column;\n      pointer-events: auto;\n    }\n\n    /* Disable the gauge arc animation for the sticky header, so toggling display: none\n       does not play the animation. */\n    .lh-sticky-header .lh-gauge-arc {\n      animation: none;\n    }\n\n    .lh-sticky-header .lh-gauge__label {\n      display: none;\n    }\n\n    .lh-highlighter {\n      width: var(--gauge-wrapper-width);\n      height: 1px;\n      background-color: var(--highlighter-background-color);\n      /* Position at bottom of first gauge in sticky header. */\n      position: absolute;\n      grid-column: 1;\n      bottom: -1px;\n    }\n\n    .lh-gauge__wrapper:first-of-type {\n      contain: none;\n    }\n  ');
+  el1.append('\n    .lh-scores-container {\n      display: flex;\n      flex-direction: column;\n      padding: var(--default-padding) 0;\n      position: relative;\n      width: 100%;\n    }\n\n    .lh-sticky-header {\n      --gauge-circle-size: var(--gauge-circle-size-sm);\n      --plugin-badge-size: 16px;\n      --plugin-icon-size: 75%;\n      --gauge-wrapper-width: 60px;\n      --gauge-percentage-font-size: 13px;\n      position: fixed;\n      left: 0;\n      right: 0;\n      top: var(--topbar-height);\n      font-weight: 500;\n      display: none;\n      justify-content: center;\n      background-color: var(--sticky-header-background-color);\n      border-bottom: 1px solid var(--color-gray-200);\n      padding-top: var(--score-container-padding);\n      padding-bottom: 4px;\n      z-index: 1;\n      pointer-events: none;\n    }\n\n    .lh-devtools .lh-sticky-header {\n      /* The report within DevTools is placed in a container with overflow, which changes the placement of this header unless we change `position` to `sticky.` */\n      position: sticky;\n    }\n\n    .lh-sticky-header--visible {\n      display: grid;\n      grid-auto-flow: column;\n      pointer-events: auto;\n    }\n\n    /* Disable the gauge arc animation for the sticky header, so toggling display: none\n       does not play the animation. */\n    .lh-sticky-header .lh-gauge-arc {\n      animation: none;\n    }\n\n    .lh-sticky-header .lh-gauge__label,\n    .lh-sticky-header .lh-fraction__label {\n      display: none;\n    }\n\n    .lh-highlighter {\n      width: var(--gauge-wrapper-width);\n      height: 1px;\n      background-color: var(--highlighter-background-color);\n      /* Position at bottom of first gauge in sticky header. */\n      position: absolute;\n      grid-column: 1;\n      bottom: -1px;\n    }\n\n    .lh-gauge__wrapper:first-of-type {\n      contain: none;\n    }\n  ');
   el0.append(el1);
   const el2 = dom.createElement('div', 'lh-scores-wrapper');
   const el3 = dom.createElement('div', 'lh-scores-container');

package/report/renderer/topbar-features.js

@@ -306,7 +306,8 @@ export class TopbarFeatures {
       categoriesAboveTheMiddle.length > 0 ? categoriesAboveTheMiddle.length - 1 : 0;
 
     // Category order matches gauge order in sticky header.
-    const gaugeWrapperEls = this.stickyHeaderEl.querySelectorAll('.lh-gauge__wrapper');
+    const gaugeWrapperEls =
+      this.stickyHeaderEl.querySelectorAll('.lh-gauge__wrapper, .lh-fraction__wrapper');
     const gaugeToHighlight = gaugeWrapperEls[highlightIndex];
     const origin = gaugeWrapperEls[0].getBoundingClientRect().left;
     const offset = gaugeToHighlight.getBoundingClientRect().left - origin;

package/shared/localization/swap-locale.js

@@ -5,8 +5,7 @@
  */
 'use strict';
 
-const _set = require('lodash.set');
-const _get = require('lodash.get');
+const {set: _set, get: _get} = require('lodash');
 
 const format = require('./format.js');
 

package/third-party/chromium-synchronization/inspector-issueAdded-types-test.js

@@ -38,6 +38,7 @@ Array [
   "blockedByResponseIssueDetails",
   "clientHintIssueDetails",
   "contentSecurityPolicyIssueDetails",
+  "cookieIssueDetails",
   "corsIssueDetails",
   "deprecationIssueDetails",
   "federatedAuthRequestIssueDetails",
@@ -47,7 +48,6 @@ Array [
   "mixedContentIssueDetails",
   "navigatorUserAgentIssueDetails",
   "quirksModeIssueDetails",
-  "sameSiteCookieIssueDetails",
   "sharedArrayBufferIssueDetails",
   "twaQualityEnforcementDetails",
 ]