lighthouse 8.4.0-dev.20210918 → 8.5.0-dev.20210921

package/changelog.md

@@ -1,3 +1,82 @@
+<a name="8.5.0"></a>
+# 8.5.0 (2021-09-21)
+[Full Changelog](https://github.com/GoogleChrome/lighthouse/compare/v8.4.0...v8.5.0)
+
+We expect this release to ship in the DevTools of [Chrome 96](https://chromiumdash.appspot.com/schedule), and to PageSpeed Insights within 2 weeks.
+
+## New Contributors
+
+Thanks to our new contributors 👽🐷🐰🐯🐻!
+
+Konstantin Popov @KonstHardy
+Can Umay @canumay
+
+## Core
+
+* lazy-lcp: fix failureTitle in lcp-lazy-loaded ([#13049](https://github.com/GoogleChrome/lighthouse/pull/13049))
+* tracing: remove cpu_profiler.hires ([#13056](https://github.com/GoogleChrome/lighthouse/pull/13056))
+* tsc: add base tsconfig for config inheritance ([#13072](https://github.com/GoogleChrome/lighthouse/pull/13072))
+* make main tsc compile cacheable ([#13069](https://github.com/GoogleChrome/lighthouse/pull/13069))
+
+## ⛏️👷 Fraggle Rock
+
+  Support for auditing user flows ([#11313](https://github.com/GoogleChrome/lighthouse/issues/11313))
+
+* cleanup driver on run completion ([#13062](https://github.com/GoogleChrome/lighthouse/pull/13062))
+* setup emulation and throttling for timespans ([#13058](https://github.com/GoogleChrome/lighthouse/pull/13058))
+* support additionalTraceCategories ([#13030](https://github.com/GoogleChrome/lighthouse/pull/13030))
+* add support for plugins ([#13028](https://github.com/GoogleChrome/lighthouse/pull/13028))
+* move GatherContext to baseArtifacts ([#13033](https://github.com/GoogleChrome/lighthouse/pull/13033))
+* preserve traces on failed page load ([#13027](https://github.com/GoogleChrome/lighthouse/pull/13027))
+* move HostUserAgent/FormFactor back to base artifacts ([#12969](https://github.com/GoogleChrome/lighthouse/pull/12969))
+* use devtools throttling by default in timespan mode ([#13013](https://github.com/GoogleChrome/lighthouse/pull/13013))
+* collect OOPIF network data ([#12992](https://github.com/GoogleChrome/lighthouse/pull/12992))
+* flow: summary sections ([#13086](https://github.com/GoogleChrome/lighthouse/pull/13086))
+* flow: topbar ([#13065](https://github.com/GoogleChrome/lighthouse/pull/13065))
+
+## CLI
+
+* convert to ES modules ([#13045](https://github.com/GoogleChrome/lighthouse/pull/13045))
+
+## Report
+
+* make metric value more prominent in table ([#13036](https://github.com/GoogleChrome/lighthouse/pull/13036))
+* 3p-filter: drop for/id as elements are already nested ([#13067](https://github.com/GoogleChrome/lighthouse/pull/13067))
+* add gatherMode option to category score ([#13029](https://github.com/GoogleChrome/lighthouse/pull/13029))
+* add fractional category scores ([#13009](https://github.com/GoogleChrome/lighthouse/pull/13009))
+
+## Deps
+
+* update to latest @rollup/plugin-typescript ([#13075](https://github.com/GoogleChrome/lighthouse/pull/13075))
+* snyk: update snyk snapshot ([#13019](https://github.com/GoogleChrome/lighthouse/pull/13019))
+
+## Clients
+
+* lr: bundle smokehouse as commonjs ([#13074](https://github.com/GoogleChrome/lighthouse/pull/13074))
+* add canonical link to viewer and treemap ([#13032](https://github.com/GoogleChrome/lighthouse/pull/13032))
+
+## Docs
+
+* readme: add Peyk to the list of integrations ([#13055](https://github.com/GoogleChrome/lighthouse/pull/13055))
+
+## Tests
+
+* add FR integration scenarios ([#13092](https://github.com/GoogleChrome/lighthouse/pull/13092))
+* update SVGOMG expectations ([#13088](https://github.com/GoogleChrome/lighthouse/pull/13088))
+* restore use of latest node 16 in CI ([#13079](https://github.com/GoogleChrome/lighthouse/pull/13079))
+* eslint: trailing commas for import/export ([#13059](https://github.com/GoogleChrome/lighthouse/pull/13059))
+* smokehouse: add flag for test sharding ([#13047](https://github.com/GoogleChrome/lighthouse/pull/13047))
+* smokehouse: convert to ES modules ([#13046](https://github.com/GoogleChrome/lighthouse/pull/13046))
+* fix flaky robots smoke failure ([#13031](https://github.com/GoogleChrome/lighthouse/pull/13031))
+* smoke: upload smokehouse artifacts on failure ([#13010](https://github.com/GoogleChrome/lighthouse/pull/13010))
+
+## Misc
+
+* build: fix minifyFileTransform stream bug in Node 16 ([#13073](https://github.com/GoogleChrome/lighthouse/pull/13073))
+* fix typo in lighthouse-treemap/app/src/main.js ([#13076](https://github.com/GoogleChrome/lighthouse/pull/13076))
+* proto: add i18n.icuMessagePaths ([#13068](https://github.com/GoogleChrome/lighthouse/pull/13068))
+* remove all FR-COMPAT todos ([#13023](https://github.com/GoogleChrome/lighthouse/pull/13023))
+
 <a name="8.4.0"></a>
 # 8.4.0 (2021-09-08)
 [Full Changelog](https://github.com/GoogleChrome/lighthouse/compare/v8.3.0...v8.4.0)

package/flow-report/assets/styles.css

@@ -8,6 +8,7 @@
   --app-font-size: 12px;
   --base-spacing: 16px;
   --category-summary-font-size: 18px;
+  --double-base-spacing: calc(var(--base-spacing) * 2);
   --gather-mode-icon-size: 16px;
   --half-base-spacing: calc(var(--base-spacing) / 2);
   --separator-color: var(--color-gray-300);
@@ -189,14 +190,21 @@
 }
 
 .Summary {
-  margin: 0 auto;
-  min-width: var(--report-width);
-  width: max-content;
-  max-width: 90%;
+  display: grid;
+  grid-template-columns: minmax(5%, 1fr) auto minmax(5%, 1fr);
+  justify-content: start;
+  width: 100%;
+}
+.Summary > * {
+  grid-column: 2;
+}
+.Summary > .Separator {
+  grid-column: 1 / span 3;
 }
 
 .SummaryHeader {
-  margin: var(--base-spacing) 0;
+  margin: calc(var(--base-spacing) * 3) 0px;
+  width: 100%;
 }
 
 .SummaryHeader__title {
@@ -208,12 +216,22 @@
   font-size: var(--summary-subtitle-font-size);
 }
 
+.SummarySectionHeader {
+  margin-top: var(--double-base-spacing);
+}
+
+.SummarySectionHeader__content {
+  margin: var(--base-spacing) 0px;
+}
+
 .SummaryFlow {
   width: 100%;
+  max-width: max-content;
   display: grid;
   grid-auto-rows: min-content;
   grid-template-columns: min-content min-content 4fr 1fr 1fr 1fr 1fr;
   align-items: center;
+  margin: var(--base-spacing) 0px;
 }
 .SummaryFlow .lh-fraction__content {
   padding: 0px;
@@ -260,11 +278,18 @@
 }
 
 .SummaryFlowStep__label {
+  grid-column: 3;
+  margin: var(--half-base-spacing);
+}
+
+.SummaryFlowStep__mode {
+  color: var(--color-gray-700);
+}
+
+.SummaryFlowStep__link {
   font-size: var(--summary-flow-step-label-font-size);
   color: var(--color-gray-800);
   text-decoration: underline;
-  grid-column: 3;
-  margin: var(--half-base-spacing);
 }
 
 .SummaryCategory {
@@ -283,7 +308,8 @@
   align-items: center;
   justify-content: center;
   padding: var(--half-base-spacing);
-  background-color: var(--color-gray-200);
+  background-color: var(--color-gray-100);
+  border-top: 1px solid var(--color-gray-300);
   text-align: center;
 }
 .SummaryNavigationHeader__url {
@@ -291,14 +317,11 @@
   text-align: left;
 }
 
-.SummaryFlowStep__divider {
+.SummaryFlowStep__separator {
   display: contents;
 }
-
-.SummaryFlowStep__divider--line {
+.SummaryFlowStep__separator > .Separator {
   grid-column-end: span 5;
-  height: 1px;
-  background-color: var(--separator-color);
 }
 
 .SummaryCategory__null {

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

@@ -7,13 +7,18 @@
 import {FunctionComponent} from 'preact';
 import {useMemo} from 'preact/hooks';
 
-import {FlowSegment} from '../common';
+import {FlowSegment, Separator} from '../common';
 import {getScreenDimensions, getScreenshot, useDerivedStepNames, useFlowResult} from '../util';
 import {Util} from '../../../report/renderer/util';
 import {CategoryScore} from '../wrappers/category-score';
 
 const DISPLAYED_CATEGORIES = ['performance', 'accessibility', 'best-practices', 'seo'];
 const THUMBNAIL_WIDTH = 50;
+const MODE_DESCRIPTIONS: Record<LH.Result.GatherMode, string> = {
+  'navigation': 'Page load',
+  'timespan': 'User interactions',
+  'snapshot': 'Captured state of page',
+};
 
 const SummaryNavigationHeader: FunctionComponent<{url: string}> = ({url}) => {
   return (
@@ -72,9 +77,9 @@ export const SummaryFlowStep: FunctionComponent<{
       {
         lhr.gatherMode === 'navigation' || hashIndex === 0 ?
           <SummaryNavigationHeader url={lhr.finalUrl}/> :
-          <div className="SummaryFlowStep__divider">
+          <div className="SummaryFlowStep__separator">
             <FlowSegment/>
-            <div className="SummaryFlowStep__divider--line"/>
+            <Separator/>
           </div>
       }
       <img
@@ -84,7 +89,10 @@ export const SummaryFlowStep: FunctionComponent<{
         style={{width: THUMBNAIL_WIDTH, maxHeight: thumbnailHeight}}
       />
       <FlowSegment mode={lhr.gatherMode}/>
-      <a className="SummaryFlowStep__label" href={`#index=${hashIndex}`}>{label}</a>
+      <div className="SummaryFlowStep__label">
+        <div className="SummaryFlowStep__mode">{MODE_DESCRIPTIONS[lhr.gatherMode]}</div>
+        <a className="SummaryFlowStep__link" href={`#index=${hashIndex}`}>{label}</a>
+      </div>
       {
         DISPLAYED_CATEGORIES.map(c => (
           <SummaryCategory
@@ -156,10 +164,21 @@ export const SummaryHeader: FunctionComponent = () => {
   );
 };
 
+const SummarySectionHeader: FunctionComponent = ({children}) => {
+  return (
+    <div className="SummarySectionHeader">
+      <div className="SummarySectionHeader__content">{children}</div>
+      <Separator/>
+    </div>
+  );
+};
+
 export const Summary: FunctionComponent = () => {
   return (
     <div className="Summary" data-testid="Summary">
       <SummaryHeader/>
+      <Separator/>
+      <SummarySectionHeader>ALL REPORTS</SummarySectionHeader>
       <SummaryFlow/>
     </div>
   );

package/lighthouse-core/fraggle-rock/gather/driver.js

@@ -28,6 +28,7 @@ const defaultSession = {
   addSessionAttachedListener: throwNotConnectedFn,
   removeSessionAttachedListener: throwNotConnectedFn,
   sendCommand: throwNotConnectedFn,
+  dispose: throwNotConnectedFn,
 };
 
 /** @implements {LH.Gatherer.FRTransitionalDriver} */
@@ -72,6 +73,12 @@ class Driver {
     this._executionContext = new ExecutionContext(this._session);
     this._fetcher = new Fetcher(this._session, this._executionContext);
   }
+
+  /** @return {Promise<void>} */
+  async disconnect() {
+    if (!this._session) return;
+    await this._session.dispose();
+  }
 }
 
 module.exports = Driver;

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

@@ -262,6 +262,8 @@ async function _navigations({driver, config, requestedUrl, baseArtifacts, comput
 async function _cleanup({requestedUrl, driver, config}) {
   const didResetStorage = !config.settings.disableStorageReset;
   if (didResetStorage) await storage.clearDataForOrigin(driver.defaultSession, requestedUrl);
+
+  await driver.disconnect();
 }
 
 /**

package/lighthouse-core/fraggle-rock/gather/session.js

@@ -163,6 +163,15 @@ class ProtocolSession {
       if (timeout) clearTimeout(timeout);
     });
   }
+
+  /**
+   * Disposes of a session so that it can no longer talk to Chrome.
+   * @return {Promise<void>}
+   */
+  async dispose() {
+    this._session.removeAllListeners();
+    await this._session.detach();
+  }
 }
 
 module.exports = ProtocolSession;

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

@@ -45,6 +45,8 @@ async function snapshot(options) {
         settings: config.settings,
       });
 
+      await driver.disconnect();
+
       const artifacts = await awaitArtifacts(artifactState);
       return finalizeArtifacts(baseArtifacts, artifacts);
     },

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

@@ -58,6 +58,7 @@ async function startTimespan(options) {
           await collectPhaseArtifacts({phase: 'stopSensitiveInstrumentation', ...phaseOptions});
           await collectPhaseArtifacts({phase: 'stopInstrumentation', ...phaseOptions});
           await collectPhaseArtifacts({phase: 'getArtifact', ...phaseOptions});
+          await driver.disconnect();
 
           const artifacts = await awaitArtifacts(artifactState);
           return finalizeArtifacts(baseArtifacts, artifacts);

package/lighthouse-core/gather/driver.js

@@ -127,6 +127,11 @@ class Driver {
     return this._connection.disconnect();
   }
 
+  /** @return {Promise<void>} */
+  dispose() {
+    return this.disconnect();
+  }
+
   /**
    * Get the browser WebSocket endpoint for devtools protocol clients like Puppeteer.
    * Only works with WebSocket connection, not extension or devtools.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "8.4.0-dev.20210918",
+  "version": "8.5.0-dev.20210921",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {

package/types/gatherer.d.ts

@@ -34,6 +34,7 @@ declare module Gatherer {
     removeSessionAttachedListener(callback: (session: FRProtocolSession) => void): void
     off<TEvent extends keyof LH.CrdpEvents>(event: TEvent, callback: (...args: LH.CrdpEvents[TEvent]) => void): void;
     sendCommand<TMethod extends keyof LH.CrdpCommands>(method: TMethod, ...params: LH.CrdpCommands[TMethod]['paramsType']): Promise<LH.CrdpCommands[TMethod]['returnType']>;
+    dispose(): Promise<void>;
   }
 
   /** The limited driver interface shared between pre and post Fraggle Rock Lighthouse. */