lighthouse 8.4.0-dev.20210913 → 8.4.0-dev.20210917

package/flow-report/assets/styles.css

@@ -10,6 +10,7 @@
   --category-summary-font-size: 18px;
   --gather-mode-icon-size: 16px;
   --half-base-spacing: calc(var(--base-spacing) / 2);
+  --separator-color: var(--color-gray-300);
   --sidebar-flow-step-navigation-font-size: 14px;
   --sidebar-selected-bg-color: #DDEEFF;
   --sidebar-summary-font-size: 14px;
@@ -17,18 +18,58 @@
   --summary-flow-step-label-font-size: 16px;
   --summary-subtitle-font-size: 16px;
   --summary-title-font-size: 32px;
+  --topbar-title-font-size: 14px;
 }
 
 .App {
   display: grid;
-  grid-template-areas: "side report";
+  grid-template-areas:
+    "topbar topbar"
+    "sidebar content";
   grid-template-columns: min-content auto;
+  grid-template-rows: min-content auto;
   height: 100vh;
   max-width: 100vw;
   font-size: var(--app-font-size);
 }
+.App--collapsed {
+  grid-template-columns: 0px auto;
+}
+.App--collapsed .Sidebar {
+  display: none;
+}
+
+.Topbar {
+  grid-area: topbar;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--separator-color);
+}
+
+.Topbar__menu {
+  padding: var(--base-spacing);
+  cursor: pointer;
+  display: flex;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.Topbar__logo {
+  display: flex;
+  margin-right: var(--half-base-spacing);
+}
+
+.Topbar__title {
+  font-size: var(--topbar-title-font-size);
+  font-weight: bold;
+}
 
 .Content {
+  grid-area: content;
   overflow-y: auto;
 }
 
@@ -51,11 +92,12 @@
 .Separator {
   height: 1px;
   width: 100%;
-  background-color: var(--color-gray-300);
+  background-color: var(--separator-color);
 }
 
 .Sidebar {
-  border-right: 1px solid var(--color-gray-300);
+  grid-area: sidebar;
+  border-right: 1px solid var(--separator-color);
 }
 .Sidebar a {
   color: var(--color-gray-800);
@@ -256,7 +298,7 @@
 .SummaryFlowStep__divider--line {
   grid-column-end: span 5;
   height: 1px;
-  background-color: var(--color-gray-300);
+  background-color: var(--separator-color);
 }
 
 .SummaryCategory__null {

package/flow-report/src/app.tsx

@@ -5,12 +5,14 @@
  */
 
 import {FunctionComponent} from 'preact';
+import {useState} from 'preact/hooks';
 
 import {ReportRendererProvider} from './wrappers/report-renderer';
 import {Sidebar} from './sidebar/sidebar';
 import {Summary} from './summary/summary';
-import {FlowResultContext, useCurrentLhr} from './util';
+import {classNames, FlowResultContext, useCurrentLhr} from './util';
 import {Report} from './wrappers/report';
+import {Topbar} from './topbar';
 
 const Content: FunctionComponent = () => {
   const currentLhr = useCurrentLhr();
@@ -27,10 +29,12 @@ const Content: FunctionComponent = () => {
 };
 
 export const App: FunctionComponent<{flowResult: LH.FlowResult}> = ({flowResult}) => {
+  const [collapsed, setCollapsed] = useState(false);
   return (
     <FlowResultContext.Provider value={flowResult}>
       <ReportRendererProvider>
-        <div className="App">
+        <div className={classNames('App', {'App--collapsed': collapsed})}>
+          <Topbar onMenuClick={() => setCollapsed(c => !c)} />
           <Sidebar/>
           <Content/>
         </div>

package/flow-report/src/icons.tsx

@@ -94,3 +94,14 @@ export const CpuIcon: FunctionComponent = () => {
     </svg>
   );
 };
+
+export const HamburgerIcon: FunctionComponent = () => {
+  return (
+    <svg viewBox="0 0 18 12" width="18" height="12" role="img">
+      <rect width="18" height="2"></rect>
+      <rect y="5" width="18" height="2"></rect>
+      <rect y="10" width="18" height="2"></rect>
+    </svg>
+  );
+};
+

package/flow-report/src/topbar.tsx

@@ -0,0 +1,60 @@
+/**
+ * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * 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 {FunctionComponent, JSX} from 'preact';
+
+import {HamburgerIcon} from './icons';
+
+/* eslint-disable max-len */
+const Logo: FunctionComponent = () => {
+  return (
+    <svg height="24" width="24" viewBox="0 0 24 24" role="img">
+      <defs>
+        <linearGradient x1="57.456%" y1="13.086%" x2="18.259%" y2="72.322%" id="Topbar__logo--a">
+          <stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
+          <stop stop-color="#262626" stop-opacity="0" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="Topbar__logo--b">
+          <stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
+          <stop stop-color="#262626" stop-opacity="0" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="58.764%" y1="65.756%" x2="36.939%" y2="50.14%" id="Topbar__logo--c">
+          <stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
+          <stop stop-color="#262626" stop-opacity="0" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="41.635%" y1="20.358%" x2="72.863%" y2="85.424%" id="Topbar__logo--d">
+          <stop stop-color="#FFF" stop-opacity=".1" offset="0%"/>
+          <stop stop-color="#FFF" stop-opacity="0" offset="100%"/>
+        </linearGradient>
+      </defs>
+      <g fill="none" fill-rule="evenodd">
+        <path d="M12 3l4.125 2.625v3.75H18v2.25h-1.688l1.5 9.375H6.188l1.5-9.375H6v-2.25h1.875V5.648L12 3zm2.201 9.938L9.54 14.633 9 18.028l5.625-2.062-.424-3.028zM12.005 5.67l-1.88 1.207v2.498h3.75V6.86l-1.87-1.19z" fill="#F44B21"/>
+        <path fill="#FFF" d="M14.201 12.938L9.54 14.633 9 18.028l5.625-2.062z"/>
+        <path d="M6 18c-2.042 0-3.95-.01-5.813 0l1.5-9.375h4.326L6 18z" fill="url(#Topbar__logo--a)" fill-rule="nonzero" transform="translate(6 3)"/>
+        <path fill="#FFF176" fill-rule="nonzero" d="M13.875 9.375v-2.56l-1.87-1.19-1.88 1.207v2.543z"/>
+        <path fill="url(#Topbar__logo--b)" fill-rule="nonzero" d="M0 6.375h6v2.25H0z" transform="translate(6 3)"/>
+        <path fill="url(#Topbar__logo--c)" fill-rule="nonzero" d="M6 6.375H1.875v-3.75L6 0z" transform="translate(6 3)"/>
+        <path fill="url(#Topbar__logo--d)" fill-rule="nonzero" d="M6 0l4.125 2.625v3.75H12v2.25h-1.688l1.5 9.375H.188l1.5-9.375H0v-2.25h1.875V2.648z" transform="translate(6 3)"/>
+      </g>
+    </svg>
+  );
+};
+/* eslint-enable max-len */
+
+export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLDivElement>}> =
+({onMenuClick}) => {
+  return (
+    <div className="Topbar">
+      <div className="Topbar__menu" onClick={onMenuClick} role="button">
+        <HamburgerIcon/>
+      </div>
+      <div className="Topbar__logo">
+        <Logo/>
+      </div>
+      <div className="Topbar__title">Lighthouse User Flow Report</div>
+    </div>
+  );
+};

package/flow-report/tsconfig.json

@@ -1,39 +1,23 @@
 {
+  "extends": "../tsconfig-base.json",
   "compilerOptions": {
-    "composite": true,
     "outDir": "../.tmp/tsbuildinfo/flow-report",
-    "emitDeclarationOnly": false,
-    "declarationMap": true,
 
     // Limit to base JS and DOM defs.
     "lib": ["es2020", "dom", "dom.iterable"],
-    // Selectively include types from node_modules.
+    // Selectively include types from node_modules/.
     "types": ["node", "jest"],
-    "target": "es2020",
-    "module": "es2020",
-    "moduleResolution": "node",
-    "esModuleInterop": true,
-
-    "allowJs": true,
-    "checkJs": true,
-    "strict": true,
-    // TODO: remove the next line to be fully `strict`.
-    "useUnknownInCatchVariables": false,
-
-    // "listFiles": true,
-    // "noErrorTruncation": true,
-    "extendedDiagnostics": true,
 
     "jsx": "react-jsx",
     "jsxImportSource": "preact",
   },
+  "references": [
+    {"path": "../types/lhr/"},
+    {"path": "../report"},
+  ],
   "include": [
     "**/*.ts",
     "**/*.tsx",
     "./types",
   ],
-  "references": [
-    {"path": "../types/lhr/"},
-    {"path": "../report"},
-  ],
 }

package/lighthouse-cli/.eslintrc.cjs

@@ -0,0 +1,27 @@
+/**
+ * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * 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.
+ */
+'use strict';
+
+module.exports = {
+  env: {
+    browser: true,
+  },
+  rules: {
+    // TODO(esmodules): move to root eslint when all code is ESM
+    // or when this is resolved: https://github.com/import-js/eslint-plugin-import/issues/2214
+    'import/order': [2, {
+      'groups': [
+        'builtin',
+        'external',
+        ['sibling', 'parent'],
+        'index',
+        'object',
+        'type',
+      ],
+      'newlines-between': 'always',
+    }],
+  },
+};

package/lighthouse-cli/bin.js

@@ -18,19 +18,23 @@
  *               cli-flags        lh-core/index
  */
 
-const fs = require('fs');
-const path = require('path');
-const commands = require('./commands/commands.js');
-const printer = require('./printer.js');
-const {getFlags} = require('./cli-flags.js');
-const {runLighthouse} = require('./run.js');
-const {generateConfig} = require('../lighthouse-core/index.js');
-const log = require('lighthouse-logger');
-const pkg = require('../package.json');
-const Sentry = require('../lighthouse-core/lib/sentry.js');
-const updateNotifier = require('update-notifier');
-const {askPermission} = require('./sentry-prompt.js');
-const {LH_ROOT} = require('../root.js');
+import fs from 'fs';
+import path from 'path';
+import url from 'url';
+
+import log from 'lighthouse-logger';
+import updateNotifier from 'update-notifier';
+
+import * as commands from './commands/commands.js';
+import * as Printer from './printer.js';
+import {getFlags} from './cli-flags.js';
+import {runLighthouse} from './run.js';
+import lighthouse from '../lighthouse-core/index.js';
+import * as Sentry from '../lighthouse-core/lib/sentry.js';
+import {askPermission} from './sentry-prompt.js';
+import {LH_ROOT} from '../root.js';
+
+const pkg = JSON.parse(fs.readFileSync(LH_ROOT + '/package.json', 'utf-8'));
 
 /**
  * @return {boolean}
@@ -58,16 +62,22 @@ async function begin() {
     commands.listTraceCategories();
   }
 
-  const url = cliFlags._[0];
+  const urlUnderTest = cliFlags._[0];
 
   /** @type {LH.Config.Json|undefined} */
   let configJson;
   if (cliFlags.configPath) {
     // Resolve the config file path relative to where cli was called.
     cliFlags.configPath = path.resolve(process.cwd(), cliFlags.configPath);
-    configJson = require(cliFlags.configPath);
+
+    if (cliFlags.configPath.endsWith('.json')) {
+      configJson = JSON.parse(fs.readFileSync(cliFlags.configPath, 'utf-8'));
+    } else {
+      const configModuleUrl = url.pathToFileURL(cliFlags.configPath).href;
+      configJson = (await import(configModuleUrl)).default;
+    }
   } else if (cliFlags.preset) {
-    configJson = require(`../lighthouse-core/config/${cliFlags.preset}-config.js`);
+    configJson = (await import(`../lighthouse-core/config/${cliFlags.preset}-config.js`)).default;
   }
 
   if (cliFlags.budgetPath) {
@@ -88,7 +98,7 @@ async function begin() {
 
   if (
     cliFlags.output.length === 1 &&
-    cliFlags.output[0] === printer.OutputMode.json &&
+    cliFlags.output[0] === Printer.OutputMode.json &&
     !cliFlags.outputPath
   ) {
     cliFlags.outputPath = 'stdout';
@@ -106,7 +116,7 @@ async function begin() {
   }
 
   if (cliFlags.printConfig) {
-    const config = generateConfig(configJson, cliFlags);
+    const config = lighthouse.generateConfig(configJson, cliFlags);
     process.stdout.write(config.getPrintString());
     return;
   }
@@ -119,7 +129,7 @@ async function begin() {
   }
   if (cliFlags.enableErrorReporting) {
     Sentry.init({
-      url,
+      url: urlUnderTest,
       flags: cliFlags,
       environmentData: {
         name: 'redacted', // prevent sentry from using hostname
@@ -132,9 +142,9 @@ async function begin() {
     });
   }
 
-  return runLighthouse(url, cliFlags, configJson);
+  return runLighthouse(urlUnderTest, cliFlags, configJson);
 }
 
-module.exports = {
+export {
   begin,
 };

package/lighthouse-cli/cli-flags.js

@@ -7,9 +7,12 @@
 
 /* eslint-disable max-len */
 
-const yargs = require('yargs');
-const fs = require('fs');
-const {isObjectOfUnknownValues} = require('../lighthouse-core/lib/type-verifiers.js');
+import fs from 'fs';
+
+import yargs from 'yargs';
+import * as yargsHelpers from 'yargs/helpers';
+
+import {isObjectOfUnknownValues} from '../lighthouse-core/lib/type-verifiers.js';
 
 /**
  * @param {string=} manualArgv
@@ -17,8 +20,10 @@ const {isObjectOfUnknownValues} = require('../lighthouse-core/lib/type-verifiers
  * @return {LH.CliFlags}
  */
 function getFlags(manualArgv, options = {}) {
-  // @ts-expect-error - undocumented, but yargs() supports parsing a single `string`.
-  const y = manualArgv ? yargs(manualArgv) : yargs;
+  const y = manualArgv ?
+    // @ts-expect-error - undocumented, but yargs() supports parsing a single `string`.
+    yargs(manualArgv) :
+    yargs(yargsHelpers.hideBin(process.argv));
 
   let parser = y.help('help')
       .showHelpOnFail(false, 'Specify --help for available options')
@@ -318,7 +323,7 @@ function getFlags(manualArgv, options = {}) {
         throw new Error('Please provide a url');
       })
       .epilogue('For more information on Lighthouse, see https://developers.google.com/web/tools/lighthouse/.')
-      .wrap(yargs.terminalWidth());
+      .wrap(y.terminalWidth());
 
   if (options.noExitOnFailure) {
     // Silence console.error() logging and don't process.exit().
@@ -499,6 +504,6 @@ function coerceScreenEmulation(value) {
   return screenEmulationSettings;
 }
 
-module.exports = {
+export {
   getFlags,
 };

package/lighthouse-cli/commands/commands.js

@@ -5,10 +5,5 @@
  */
 'use strict';
 
-const listAudits = require('./list-audits.js');
-const listTraceCategories = require('./list-trace-categories.js');
-
-module.exports = {
-  listAudits,
-  listTraceCategories,
-};
+export {listAudits} from './list-audits.js';
+export {listTraceCategories} from './list-trace-categories.js';

package/lighthouse-cli/commands/list-audits.js

@@ -5,7 +5,7 @@
  */
 'use strict';
 
-const lighthouse = require('../../lighthouse-core/index.js');
+import lighthouse from '../../lighthouse-core/index.js';
 
 function listAudits() {
   const audits = lighthouse.getAuditList().map((i) => i.replace(/\.js$/, ''));
@@ -13,4 +13,4 @@ function listAudits() {
   process.exit(0);
 }
 
-module.exports = listAudits;
+export {listAudits};

package/lighthouse-cli/commands/list-trace-categories.js

@@ -5,7 +5,7 @@
  */
 'use strict';
 
-const lighthouse = require('../../lighthouse-core/index.js');
+import lighthouse from '../../lighthouse-core/index.js';
 
 function listTraceCategories() {
   const traceCategories = lighthouse.traceCategories;
@@ -13,4 +13,4 @@ function listTraceCategories() {
   process.exit(0);
 }
 
-module.exports = listTraceCategories;
+export {listTraceCategories};

package/lighthouse-cli/index.js

@@ -6,7 +6,9 @@
  */
 'use strict';
 
-require('./bin.js').begin().catch(err => {
+import {begin} from './bin.js';
+
+begin().catch(err => {
   process.stderr.write(err.stack);
   process.exit(1);
 });

package/lighthouse-cli/printer.js

@@ -5,8 +5,9 @@
  */
 'use strict';
 
-const fs = require('fs');
-const log = require('lighthouse-logger');
+import fs from 'fs';
+
+import log from 'lighthouse-logger';
 
 /**
  * An enumeration of acceptable output modes:
@@ -91,7 +92,7 @@ function getValidOutputOptions() {
   return Object.keys(OutputMode);
 }
 
-module.exports = {
+export {
   checkOutputPath,
   write,
   OutputMode,

package/lighthouse-cli/run.js

@@ -7,20 +7,19 @@
 
 /* eslint-disable no-console */
 
-const path = require('path');
-const psList = require('ps-list');
+import path from 'path';
 
-const Printer = require('./printer.js');
-const ChromeLauncher = require('chrome-launcher');
+import psList from 'ps-list';
+import * as ChromeLauncher from 'chrome-launcher';
+import yargsParser from 'yargs-parser';
+import log from 'lighthouse-logger';
+import open from 'open';
 
-const yargsParser = require('yargs-parser');
-const lighthouse = require('../lighthouse-core/index.js');
-const log = require('lighthouse-logger');
-const getFilenamePrefix = require('../report/generator/file-namer.js').getFilenamePrefix;
-const assetSaver = require('../lighthouse-core/lib/asset-saver.js');
-const URL = require('../lighthouse-core/lib/url-shim.js');
-
-const open = require('open');
+import * as Printer from './printer.js';
+import lighthouse from '../lighthouse-core/index.js';
+import {getFilenamePrefix} from '../report/generator/file-namer.js';
+import * as assetSaver from '../lighthouse-core/lib/asset-saver.js';
+import URL from '../lighthouse-core/lib/url-shim.js';
 
 /** @typedef {Error & {code: string, friendlyMessage?: string}} ExitError */
 
@@ -203,8 +202,8 @@ async function potentiallyKillChrome(launchedChrome) {
  * @return {Promise<LH.RunnerResult|undefined>}
  */
 async function runLighthouseWithFraggleRock(url, flags, config, launchedChrome) {
-  const fraggleRock = require('../lighthouse-core/fraggle-rock/api.js');
-  const puppeteer = require('puppeteer');
+  const fraggleRock = (await import('../lighthouse-core/fraggle-rock/api.js')).default;
+  const puppeteer = (await import('puppeteer')).default;
   const browser = await puppeteer.connect({browserURL: `http://localhost:${launchedChrome.port}`});
   const page = await browser.newPage();
   flags.channel = 'fraggle-rock-cli';
@@ -272,7 +271,7 @@ async function runLighthouse(url, flags, config) {
   }
 }
 
-module.exports = {
+export {
   parseChromeFlags,
   saveResults,
   runLighthouse,

package/lighthouse-cli/sentry-prompt.js

@@ -5,10 +5,9 @@
  */
 'use strict';
 
-const Configstore = require('configstore');
-const {Confirm} = require('enquirer');
-
-const log = require('lighthouse-logger');
+import Configstore from 'configstore';
+import Confirm from 'enquirer';
+import log from 'lighthouse-logger';
 
 const MAXIMUM_WAIT_TIME = 20 * 1000;
 
@@ -29,7 +28,7 @@ function prompt() {
   /** @type {NodeJS.Timer|undefined} */
   let timeout;
 
-  const prompt = new Confirm({
+  const prompt = new Confirm.Confirm({
     name: 'isErrorReportingEnabled',
     initial: false,
     message: MESSAGE,
@@ -75,6 +74,6 @@ function askPermission() {
   }).catch(_ => false);
 }
 
-module.exports = {
+export {
   askPermission,
 };

package/lighthouse-cli/test/smokehouse/frontends/back-compat-util.js

@@ -38,5 +38,5 @@ function updateTestDefnFormat(allTestDefns) {
 }
 
 export {
-  updateTestDefnFormat
+  updateTestDefnFormat,
 };