lighthouse 9.5.0-dev.20221128 → 9.5.0-dev.20221130

package/core/lib/dependency-graph/simulator/simulator.js

@@ -16,6 +16,8 @@ const mobileSlow4G = constants.throttling.mobileSlow4G;
 /** @typedef {import('../base-node.js').Node} Node */
 /** @typedef {import('../network-node').NetworkNode} NetworkNode */
 /** @typedef {import('../cpu-node').CPUNode} CpuNode */
+/** @typedef {import('./simulator-timing-map.js').CpuNodeTimingComplete | import('./simulator-timing-map.js').NetworkNodeTimingComplete} CompleteNodeTiming */
+/** @typedef {import('./simulator-timing-map.js').ConnectionTiming} ConnectionTiming */
 
 // see https://cs.chromium.org/search/?q=kDefaultMaxNumDelayableRequestsPerClient&sq=package:chromium&type=cs
 const DEFAULT_MAXIMUM_CONCURRENT_REQUESTS = 10;
@@ -40,7 +42,7 @@ const PriorityStartTimePenalty = {
   VeryLow: 2,
 };
 
-/** @type {Map<string, LH.Gatherer.Simulation.Result['nodeTimings']>} */
+/** @type {Map<string, Map<Node, CompleteNodeTiming>>} */
 const ALL_SIMULATION_NODE_TIMINGS = new Map();
 
 class Simulator {
@@ -167,12 +169,13 @@ class Simulator {
   /**
    * @param {Node} node
    * @param {number} endTime
+   * @param {ConnectionTiming} [connectionTiming] Optional network connection information.
    */
-  _markNodeAsComplete(node, endTime) {
+  _markNodeAsComplete(node, endTime, connectionTiming) {
     this._nodes[NodeState.Complete].add(node);
     this._nodes[NodeState.InProgress].delete(node);
     this._numberInProgressByType.set(node.type, this._numberInProgress(node.type) - 1);
-    this._nodeTimings.setCompleted(node, {endTime});
+    this._nodeTimings.setCompleted(node, {endTime, connectionTiming});
 
     // Try to add all its dependents to the queue
     for (const dependent of node.getDependents()) {
@@ -236,8 +239,11 @@ class Simulator {
    * currently in flight.
    */
   _updateNetworkCapacity() {
+    const inFlight = this._numberInProgress(BaseNode.TYPES.NETWORK);
+    if (inFlight === 0) return;
+
     for (const connection of this._connectionPool.connectionsInUse()) {
-      connection.setThroughput(this._throughput / this._nodes[NodeState.InProgress].size);
+      connection.setThroughput(this._throughput / inFlight);
     }
   }
 
@@ -368,7 +374,7 @@ class Simulator {
     if (isFinished) {
       connection.setWarmed(true);
       this._connectionPool.release(record);
-      this._markNodeAsComplete(node, totalElapsedTime);
+      this._markNodeAsComplete(node, totalElapsedTime, calculation.connectionTiming);
     } else {
       timingData.timeElapsed += calculation.timeElapsed;
       timingData.timeElapsedOvershoot += calculation.timeElapsed - timePeriodLength;
@@ -377,23 +383,31 @@ class Simulator {
   }
 
   /**
-   * @return {Map<Node, LH.Gatherer.Simulation.NodeTiming>}
+   * @return {{nodeTimings: Map<Node, LH.Gatherer.Simulation.NodeTiming>, completeNodeTimings: Map<Node, CompleteNodeTiming>}}
    */
   _computeFinalNodeTimings() {
+    /** @type {Array<[Node, CompleteNodeTiming]>} */
+    const completeNodeTimingEntries = this._nodeTimings.getNodes().map(node => {
+      return [node, this._nodeTimings.getCompleted(node)];
+    });
+
+    // Most consumers will want the entries sorted by startTime, so insert them in that order
+    completeNodeTimingEntries.sort((a, b) => a[1].startTime - b[1].startTime);
+
+    // Trimmed version of type `LH.Gatherer.Simulation.NodeTiming`.
     /** @type {Array<[Node, LH.Gatherer.Simulation.NodeTiming]>} */
-    const nodeTimingEntries = [];
-    for (const node of this._nodeTimings.getNodes()) {
-      const timing = this._nodeTimings.getCompleted(node);
-      nodeTimingEntries.push([node, {
+    const nodeTimingEntries = completeNodeTimingEntries.map(([node, timing]) => {
+      return [node, {
         startTime: timing.startTime,
         endTime: timing.endTime,
         duration: timing.endTime - timing.startTime,
-      }]);
-    }
+      }];
+    });
 
-    // Most consumers will want the entries sorted by startTime, so insert them in that order
-    nodeTimingEntries.sort((a, b) => a[1].startTime - b[1].startTime);
-    return new Map(nodeTimingEntries);
+    return {
+      nodeTimings: new Map(nodeTimingEntries),
+      completeNodeTimings: new Map(completeNodeTimingEntries),
+    };
   }
 
   /**
@@ -478,8 +492,9 @@ class Simulator {
       }
     }
 
-    const nodeTimings = this._computeFinalNodeTimings();
-    ALL_SIMULATION_NODE_TIMINGS.set(options.label || 'unlabeled', nodeTimings);
+    // `nodeTimings` are used for simulator consumers, `completeNodeTimings` kept for debugging.
+    const {nodeTimings, completeNodeTimings} = this._computeFinalNodeTimings();
+    ALL_SIMULATION_NODE_TIMINGS.set(options.label || 'unlabeled', completeNodeTimings);
 
     return {
       timeInMs: totalElapsedTime,
@@ -504,7 +519,7 @@ class Simulator {
     return wastedMs;
   }
 
-  /** @return {Map<string, LH.Gatherer.Simulation.Result['nodeTimings']>} */
+  /** @return {Map<string, Map<Node, CompleteNodeTiming>>} */
   static get ALL_NODE_TIMINGS() {
     return ALL_SIMULATION_NODE_TIMINGS;
   }

package/core/lib/dependency-graph/simulator/tcp-connection.js

@@ -4,6 +4,8 @@
  * 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.
  */
 
+/** @typedef {import('./simulator-timing-map.js').ConnectionTiming} ConnectionTiming */
+
 const INITIAL_CONGESTION_WINDOW = 10;
 const TCP_SEGMENT_SIZE = 1460;
 
@@ -176,12 +178,34 @@ class TcpConnection {
     const extraBytesDownloaded = this._h2 ? Math.max(totalBytesDownloaded - bytesToDownload, 0) : 0;
     const bytesDownloaded = Math.max(Math.min(totalBytesDownloaded, bytesToDownload), 0);
 
+    /** @type {ConnectionTiming} */
+    let connectionTiming;
+    if (!this._warmed) {
+      connectionTiming = {
+        dnsResolutionTime,
+        connectionTime: handshakeAndRequest - dnsResolutionTime,
+        sslTime: this._ssl ? twoWayLatency : undefined,
+        timeToFirstByte,
+      };
+    } else if (this._h2) {
+      // TODO: timing information currently difficult to model for warm h2 connections.
+      connectionTiming = {
+        timeToFirstByte,
+      };
+    } else {
+      connectionTiming = {
+        connectionTime: handshakeAndRequest,
+        timeToFirstByte,
+      };
+    }
+
     return {
       roundTrips,
       timeElapsed,
       bytesDownloaded,
       extraBytesDownloaded,
       congestionWindow,
+      connectionTiming,
     };
   }
 }
@@ -202,4 +226,5 @@ export {TcpConnection};
  * @property {number} bytesDownloaded
  * @property {number} extraBytesDownloaded
  * @property {number} congestionWindow
+ * @property {ConnectionTiming} connectionTiming
  */

package/core/lib/lantern-trace-saver.js

@@ -4,8 +4,11 @@
  * 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.
  */
 
+/** @typedef {import('./dependency-graph/base-node.js').Node} Node */
+/** @typedef {import('./dependency-graph/simulator/simulator.js').CompleteNodeTiming} CompleteNodeTiming */
+
 /**
- * @param {LH.Gatherer.Simulation.Result['nodeTimings']} nodeTimings
+ * @param {Map<Node, CompleteNodeTiming>} nodeTimings
  * @return {LH.Trace}
  */
 function convertNodeTimingsToTrace(nodeTimings) {
@@ -31,7 +34,8 @@ function convertNodeTimingsToTrace(nodeTimings) {
     } else {
       // Ignore data URIs as they don't really add much value
       if (/^data/.test(node.record.url)) continue;
-      traceEvents.push(...createFakeNetworkEvents(node.record, timing));
+      traceEvents.push(...createFakeNetworkEvents(requestId, node.record, timing));
+      requestId++;
     }
   }
 
@@ -117,12 +121,34 @@ function convertNodeTimingsToTrace(nodeTimings) {
   }
 
   /**
+   * @param {number} requestId
+   * @param {LH.Artifacts.NetworkRequest} record
+   * @param {CompleteNodeTiming} timing
+   * @return {LH.TraceEvent}
+   */
+  function createWillSendRequestEvent(requestId, record, timing) {
+    return {
+      ...baseEvent,
+      ph: 'I',
+      s: 't',
+      // No `dur` on network instant events but add to keep types happy.
+      dur: 0,
+      name: 'ResourceWillSendRequest',
+      ts: toMicroseconds(timing.startTime),
+      args: {data: {requestId: String(requestId)}},
+    };
+  }
+
+  /**
+   * @param {number} requestId
    * @param {LH.Artifacts.NetworkRequest} record
-   * @param {LH.Gatherer.Simulation.NodeTiming} timing
+   * @param {CompleteNodeTiming} timing
    * @return {LH.TraceEvent[]}
    */
-  function createFakeNetworkEvents(record, timing) {
-    requestId++;
+  function createFakeNetworkEvents(requestId, record, timing) {
+    if (!('connectionTiming' in timing)) {
+      throw new Error('Network node timing incomplete');
+    }
 
     // 0ms requests get super-messed up rendering
     // Use 0.3ms instead so they're still hoverable, https://github.com/GoogleChrome/lighthouse/pull/5350#discussion_r194563201
@@ -130,6 +156,7 @@ function convertNodeTimingsToTrace(nodeTimings) {
     if (startTime === endTime) endTime += 0.3;
 
     const requestData = {requestId: requestId.toString(), frame};
+    // No `dur` on network instant events but add to keep types happy.
     /** @type {LH.Util.StrictOmit<LH.TraceEvent, 'name'|'ts'|'args'>} */
     const baseRequestEvent = {...baseEvent, ph: 'I', s: 't', dur: 0};
 
@@ -140,6 +167,13 @@ function convertNodeTimingsToTrace(nodeTimings) {
       priority: record.priority,
     };
 
+    const {dnsResolutionTime, connectionTime, sslTime, timeToFirstByte} = timing.connectionTiming;
+    let sslStart = -1;
+    let sslEnd = -1;
+    if (connectionTime !== undefined && sslTime !== undefined) {
+      sslStart = connectionTime - sslTime;
+      sslEnd = connectionTime;
+    }
     const receiveResponseData = {
       ...requestData,
       statusCode: record.statusCode,
@@ -147,17 +181,45 @@ function convertNodeTimingsToTrace(nodeTimings) {
       encodedDataLength: record.transferSize,
       fromCache: record.fromDiskCache,
       fromServiceWorker: record.fetchedViaServiceWorker,
+      timing: {
+        // `requestTime` is in seconds.
+        requestTime: toMicroseconds(startTime) / (1000 * 1000),
+        // Remaining values are milliseconds after `requestTime`.
+        dnsStart: dnsResolutionTime === undefined ? -1 : 0,
+        dnsEnd: dnsResolutionTime ?? -1,
+        connectStart: dnsResolutionTime ?? -1,
+        connectEnd: connectionTime ?? -1,
+        sslStart,
+        sslEnd,
+        sendStart: connectionTime ?? 0,
+        sendEnd: connectionTime ?? 0,
+        receiveHeadersEnd: timeToFirstByte,
+        workerStart: -1,
+        workerReady: -1,
+        proxyStart: -1,
+        proxyEnd: -1,
+        pushStart: 0,
+        pushEnd: 0,
+      },
     };
 
     const resourceFinishData = {
-      ...requestData,
+      requestId: requestId.toString(),
+      encodedDataLength: record.transferSize,
       decodedBodyLength: record.resourceSize,
       didFail: !!record.failed,
       finishTime: toMicroseconds(endTime) / (1000 * 1000),
     };
 
     /** @type {LH.TraceEvent[]} */
-    const events = [
+    const events = [];
+
+    // Navigation request needs an additional ResourceWillSendRequest event.
+    if (requestId === 1) {
+      events.push(createWillSendRequestEvent(requestId, record, timing));
+    }
+
+    events.push(
       {
         ...baseRequestEvent,
         name: 'ResourceSendRequest',
@@ -169,13 +231,14 @@ function convertNodeTimingsToTrace(nodeTimings) {
         name: 'ResourceFinish',
         ts: toMicroseconds(endTime),
         args: {data: resourceFinishData},
-      },
-    ];
+      }
+    );
 
     if (!record.failed) {
       events.push({
         ...baseRequestEvent,
         name: 'ResourceReceiveResponse',
+        // Event `ts` isn't meaningful, so just pick a time.
         ts: toMicroseconds((startTime + endTime) / 2),
         args: {data: receiveResponseData},
       });

package/core/lib/network-request.js

@@ -124,10 +124,14 @@ class NetworkRequest {
     this.parsedURL = /** @type {ParsedURL} */ ({scheme: ''});
     this.documentURL = '';
 
+    /**
+     * When the network service is about to handle a request, ie. just before going to the
+     * HTTP cache or going to the network for DNS/connection setup, in milliseconds.
+     */
     this.startTime = -1;
-    /** @type {number} */
+    /** When the last byte of the response body is received, in milliseconds. */
     this.endTime = -1;
-    /** @type {number} */
+    /** When the last byte of the response headers is received, in milliseconds. */
     this.responseReceivedTime = -1;
 
     // Go read the comment on _updateTransferSizeForLightrider.
@@ -217,7 +221,8 @@ class NetworkRequest {
     };
     this.isSecure = UrlUtils.isSecureScheme(this.parsedURL.scheme);
 
-    this.startTime = data.timestamp;
+    // Expected to be overriden with better value in `_recomputeTimesWithResourceTiming`.
+    this.startTime = data.timestamp * 1000;
 
     this.requestMethod = data.request.method;
 
@@ -261,7 +266,7 @@ class NetworkRequest {
     if (this.finished) return;
 
     this.finished = true;
-    this.endTime = data.timestamp;
+    this.endTime = data.timestamp * 1000;
     if (data.encodedDataLength >= 0) {
       this.transferSize = data.encodedDataLength;
     }
@@ -279,7 +284,7 @@ class NetworkRequest {
     if (this.finished) return;
 
     this.finished = true;
-    this.endTime = data.timestamp;
+    this.endTime = data.timestamp * 1000;
 
     this.failed = true;
     this.resourceType = data.type && RESOURCE_TYPES[data.type];
@@ -305,7 +310,7 @@ class NetworkRequest {
     this._onResponse(data.redirectResponse, data.timestamp, data.type);
     this.resourceType = undefined;
     this.finished = true;
-    this.endTime = data.timestamp;
+    this.endTime = data.timestamp * 1000;
 
     this._updateResponseReceivedTimeIfNecessary();
   }
@@ -319,7 +324,7 @@ class NetworkRequest {
 
   /**
    * @param {LH.Crdp.Network.Response} response
-   * @param {number} timestamp
+   * @param {number} timestamp in seconds
    * @param {LH.Crdp.Network.ResponseReceivedEvent['type']=} resourceType
    */
   _onResponse(response, timestamp, resourceType) {
@@ -330,7 +335,7 @@ class NetworkRequest {
 
     if (response.protocol) this.protocol = response.protocol;
 
-    this.responseReceivedTime = timestamp;
+    this.responseReceivedTime = timestamp * 1000;
 
     this.transferSize = response.encodedDataLength;
     if (typeof response.fromDiskCache === 'boolean') this.fromDiskCache = response.fromDiskCache;
@@ -364,8 +369,8 @@ class NetworkRequest {
     // Take startTime and responseReceivedTime from timing data for better accuracy.
     // Timing's requestTime is a baseline in seconds, rest of the numbers there are ticks in millis.
     // TODO: This skips the "queuing time" before the netstack has taken over ... is this a mistake?
-    this.startTime = timing.requestTime;
-    const headersReceivedTime = timing.requestTime + timing.receiveHeadersEnd / 1000;
+    this.startTime = timing.requestTime * 1000;
+    const headersReceivedTime = this.startTime + timing.receiveHeadersEnd;
     if (!this.responseReceivedTime || this.responseReceivedTime < 0) {
       this.responseReceivedTime = headersReceivedTime;
     }
@@ -478,7 +483,7 @@ class NetworkRequest {
     }
 
     this.lrStatistics = {
-      endTimeDeltaMs: (this.endTime - (this.startTime + (totalMs / 1000))) * 1000,
+      endTimeDeltaMs: this.endTime - (this.startTime + totalMs),
       TCPMs: TCPMs,
       requestMs: requestMs,
       responseMs: responseMs,

package/core/runner.js

@@ -521,5 +521,4 @@ class Runner {
   }
 }
 
-// TODO(esmodules): make this not a class.
 export {Runner};

package/dist/report/bundle.esm.js

@@ -3438,6 +3438,7 @@ class I18n {
 
     this._locale = locale;
     this._strings = strings;
+    this._cachedNumberFormatters = new Map();
   }
 
   get strings() {
@@ -3472,7 +3473,24 @@ class I18n {
       number = 0;
     }
 
-    return new Intl.NumberFormat(this._locale, opts).format(number).replace(' ', NBSP2);
+    let formatter;
+    // eslint-disable-next-line max-len
+    const cacheKey = [
+      opts.minimumFractionDigits,
+      opts.maximumFractionDigits,
+      opts.style,
+      opts.unit,
+      opts.unitDisplay,
+      this._locale,
+    ].join('');
+
+    formatter = this._cachedNumberFormatters.get(cacheKey);
+    if (!formatter) {
+      formatter = new Intl.NumberFormat(this._locale, opts);
+      this._cachedNumberFormatters.set(cacheKey, formatter);
+    }
+
+    return formatter.format(number).replace(' ', NBSP2);
   }
 
   /**

package/dist/report/flow.js

@@ -26,7 +26,7 @@
    * 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.
    */
-const ta=1024,ia=1048576;class oa{constructor(e,a){"en-XA"===e&&(e="de"),this._locale=e,this._strings=a}get strings(){return this._strings}_formatNumberWithGranularity(e,a,n={}){if(void 0!==a){const t=-Math.log10(a);Number.isInteger(t)||(console.warn(`granularity of ${a} is invalid. Using 1 instead`),a=1),a<1&&((n={...n}).minimumFractionDigits=n.maximumFractionDigits=Math.ceil(t)),e=Math.round(e/a)*a,Object.is(e,-0)&&(e=0)}else Math.abs(e)<5e-4&&(e=0);return new Intl.NumberFormat(this._locale,n).format(e).replace(" "," ")}formatNumber(e,a){return this._formatNumberWithGranularity(e,a)}formatInteger(e){return this._formatNumberWithGranularity(e,1)}formatPercent(e){return new Intl.NumberFormat(this._locale,{style:"percent"}).format(e)}formatBytesToKiB(e,a){return this._formatNumberWithGranularity(e/ta,a)+" KiB"}formatBytesToMiB(e,a){return this._formatNumberWithGranularity(e/ia,a)+" MiB"}formatBytes(e,a=1){return this._formatNumberWithGranularity(e,a,{style:"unit",unit:"byte",unitDisplay:"long"})}formatBytesWithBestUnit(e,a){return e>=ia?this.formatBytesToMiB(e,a):e>=ta?this.formatBytesToKiB(e,a):this._formatNumberWithGranularity(e,a,{style:"unit",unit:"byte",unitDisplay:"narrow"})}formatKbps(e,a){return this._formatNumberWithGranularity(e,a,{style:"unit",unit:"kilobit-per-second",unitDisplay:"short"})}formatMilliseconds(e,a){return this._formatNumberWithGranularity(e,a,{style:"unit",unit:"millisecond",unitDisplay:"short"})}formatSeconds(e,a){return this._formatNumberWithGranularity(e/1e3,a,{style:"unit",unit:"second",unitDisplay:"short"})}formatDateTime(e){const a={month:"short",day:"numeric",year:"numeric",hour:"numeric",minute:"numeric",timeZoneName:"short"};let n;try{n=new Intl.DateTimeFormat(this._locale,a)}catch(e){a.timeZone="UTC",n=new Intl.DateTimeFormat(this._locale,a)}return n.format(new Date(e))}formatDuration(e){let a=e/1e3;if(0===Math.round(a))return"None";const n=[],t={day:86400,hour:3600,minute:60,second:1};return Object.keys(t).forEach((e=>{const i=t[e],o=Math.floor(a/i);if(o>0){a-=o*i;const t=this._formatNumberWithGranularity(o,1,{style:"unit",unit:e,unitDisplay:"narrow"});n.push(t)}})),n.join(" ")}}
+const ta=1024,ia=1048576;class oa{constructor(e,a){"en-XA"===e&&(e="de"),this._locale=e,this._strings=a,this._cachedNumberFormatters=new Map}get strings(){return this._strings}_formatNumberWithGranularity(e,a,n={}){if(void 0!==a){const t=-Math.log10(a);Number.isInteger(t)||(console.warn(`granularity of ${a} is invalid. Using 1 instead`),a=1),a<1&&((n={...n}).minimumFractionDigits=n.maximumFractionDigits=Math.ceil(t)),e=Math.round(e/a)*a,Object.is(e,-0)&&(e=0)}else Math.abs(e)<5e-4&&(e=0);let t;const i=[n.minimumFractionDigits,n.maximumFractionDigits,n.style,n.unit,n.unitDisplay,this._locale].join("");return t=this._cachedNumberFormatters.get(i),t||(t=new Intl.NumberFormat(this._locale,n),this._cachedNumberFormatters.set(i,t)),t.format(e).replace(" "," ")}formatNumber(e,a){return this._formatNumberWithGranularity(e,a)}formatInteger(e){return this._formatNumberWithGranularity(e,1)}formatPercent(e){return new Intl.NumberFormat(this._locale,{style:"percent"}).format(e)}formatBytesToKiB(e,a){return this._formatNumberWithGranularity(e/ta,a)+" KiB"}formatBytesToMiB(e,a){return this._formatNumberWithGranularity(e/ia,a)+" MiB"}formatBytes(e,a=1){return this._formatNumberWithGranularity(e,a,{style:"unit",unit:"byte",unitDisplay:"long"})}formatBytesWithBestUnit(e,a){return e>=ia?this.formatBytesToMiB(e,a):e>=ta?this.formatBytesToKiB(e,a):this._formatNumberWithGranularity(e,a,{style:"unit",unit:"byte",unitDisplay:"narrow"})}formatKbps(e,a){return this._formatNumberWithGranularity(e,a,{style:"unit",unit:"kilobit-per-second",unitDisplay:"short"})}formatMilliseconds(e,a){return this._formatNumberWithGranularity(e,a,{style:"unit",unit:"millisecond",unitDisplay:"short"})}formatSeconds(e,a){return this._formatNumberWithGranularity(e/1e3,a,{style:"unit",unit:"second",unitDisplay:"short"})}formatDateTime(e){const a={month:"short",day:"numeric",year:"numeric",hour:"numeric",minute:"numeric",timeZoneName:"short"};let n;try{n=new Intl.DateTimeFormat(this._locale,a)}catch(e){a.timeZone="UTC",n=new Intl.DateTimeFormat(this._locale,a)}return n.format(new Date(e))}formatDuration(e){let a=e/1e3;if(0===Math.round(a))return"None";const n=[],t={day:86400,hour:3600,minute:60,second:1};return Object.keys(t).forEach((e=>{const i=t[e],o=Math.floor(a/i);if(o>0){a-=o*i;const t=this._formatNumberWithGranularity(o,1,{style:"unit",unit:e,unitDisplay:"narrow"});n.push(t)}})),n.join(" ")}}
 /**
    * @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