core(tsc): fix ImageUsage artifact type and gather bug

lighthouse-cli/test/smokehouse/byte-efficiency/expectations.js

@@ -110,12 +110,18 @@ module.exports = [
         },
       },
       'uses-responsive-images': {
+        displayValue: [
+          'Potential savings of %d\xa0KB',
+          75,
+        ],
         extendedInfo: {
           value: {
             wastedKb: '>50',
-            results: {
-              length: 3,
-            },
+            results: [
+              {wastedPercent: '<60'},
+              {wastedPercent: '<60'},
+              {wastedPercent: '<60'},
+            ],
           },
         },
       },

lighthouse-core/audits/image-aspect-ratio.js

@@ -9,14 +9,15 @@
  *   audit will list all images that don't match with their display size
  *   aspect ratio.
  */
-// @ts-nocheck - TODO(bckenny): fix optional width/height in ImageUsage artifact
 'use strict';
 
 const Audit = require('./audit');
 
 const URL = require('../lib/url-shim');
 const THRESHOLD = 0.05;
 
+/** @typedef {Required<LH.Artifacts.SingleImageUsage>} WellDefinedImage */
+
 class ImageAspectRatio extends Audit {
   /**
    * @return {LH.Audit.Meta}
@@ -32,7 +33,7 @@ class ImageAspectRatio extends Audit {
   }
 
   /**
-   * @param {Required<LH.Artifacts.SingleImageUsage>} image
+   * @param {WellDefinedImage} image
    * @return {Error|{url: string, displayedAspectRatio: string, actualAspectRatio: string, doRatiosMatch: boolean}}
    */
   static computeAspectRatios(image) {
@@ -76,7 +77,7 @@ class ImageAspectRatio extends Audit {
         image.height &&
         !image.usesObjectFit;
     }).forEach(image => {
-      const wellDefinedImage = /** @type {Required<LH.Artifacts.SingleImageUsage>} */ (image);
+      const wellDefinedImage = /** @type {WellDefinedImage} */ (image);
       const processed = ImageAspectRatio.computeAspectRatios(wellDefinedImage);
       if (processed instanceof Error) {
         debugString = processed.message;

lighthouse-core/gather/gatherers/image-usage.js

@@ -15,7 +15,7 @@ const Driver = require('../driver.js'); // eslint-disable-line no-unused-vars
 
 /* global window, getElementsInDocument, Image */
 
-/** @typedef {MakeOptional<LH.Artifacts.SingleImageUsage, 'networkRecord'>} ImageSizeInfo */
+/** @typedef {Omit<LH.Artifacts.SingleImageUsage, 'networkRecord'>} ImageSizeInfo */
 
 /** @return {Array<ImageSizeInfo>} */
 /* istanbul ignore next */
@@ -145,7 +145,7 @@ class ImageUsage extends Gatherer {
    * @param {LH.Gatherer.LoadData} loadData
    * @return {Promise<LH.Artifacts['ImageUsage']>}
    */
-  afterPass(passContext, loadData) {
+  async afterPass(passContext, loadData) {
     const driver = passContext.driver;
     const indexedNetworkRecords = loadData.networkRecords.reduce((map, record) => {
       if (/^image/.test(record._mimeType) && record.finished) {
@@ -167,27 +167,24 @@ class ImageUsage extends Gatherer {
       return (${collectImageElementInfo.toString()})();
     })()`;
 
-    /** @type {Promise<Array<ImageSizeInfo>>} */
-    const evaluatePromise = driver.evaluateAsync(expression);
-    return evaluatePromise.then(elements => {
-      return elements.reduce((promise, element) => {
-        return promise.then(collector => {
-          // Images within `picture` behave strangely and natural size information isn't accurate,
-          // CSS images have no natural size information at all.
-          // Try to get the actual size if we can.
-          const elementPromise = (element.isPicture || element.isCss) && element.networkRecord ?
-              this.fetchElementWithSizeInformation(driver, element) :
-              Promise.resolve(element);
-
-          return elementPromise.then(element => {
-            // link up the image with its network record
-            element.networkRecord = indexedNetworkRecords[element.src];
-            collector.push(/** @type {LH.Artifacts.SingleImageUsage} */ (element));
-            return collector;
-          });
-        });
-      }, Promise.resolve(/** @type {LH.Artifacts['ImageUsage']} */ ([])));
-    });
+    /** @type {Array<ImageSizeInfo>} */
+    const elements = await driver.evaluateAsync(expression);
+
+    /** @type {LH.Artifacts['ImageUsage']} */
+    const imageUsage = [];
+    for (let element of elements) {
+      // Images within `picture` behave strangely and natural size information isn't accurate,
+      // CSS images have no natural size information at all.
+      // Try to get the actual size if we can.
+      if (element.isPicture || element.isCss) {
+        element = await this.fetchElementWithSizeInformation(driver, element);
+      }
+
+      // link up the image with its network record
+      imageUsage.push(Object.assign({networkRecord: indexedNetworkRecords[element.src]}, element));
+    }
+
+    return imageUsage;
   }
 }
 

typings/artifacts.d.ts

@@ -228,7 +228,9 @@ declare global {
           endTime: number;
           responseReceivedTime: number;
           mimeType: string;
-        }
+        };
+        width?: number;
+        height?: number;
       }
 
       export interface OptimizedImage {

typings/externs.d.ts

@@ -22,6 +22,9 @@ declare global {
     [P in K]+?: T[P]
   }
 
+  /** Remove properties K from T. */
+  type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+
   /** Obtain the type of the first parameter of a function. */
   type FirstParamType<T extends (arg1: any, ...args: any[]) => any> =
     T extends (arg1: infer P, ...args: any[]) => any ? P : any;