report: new audit list display, indexes & new icons

lighthouse-core/audits/bootup-time.js

@@ -77,60 +77,59 @@ class BootupTime extends Audit {
    * @param {LH.Audit.Context} context
    * @return {Promise<LH.Audit.Product>}
    */
-  static audit(artifacts, context) {
+  static async audit(artifacts, context) {
     const trace = artifacts.traces[BootupTime.DEFAULT_PASS];
-    return artifacts.requestDevtoolsTimelineModel(trace).then(devtoolsTimelineModel => {
-      const executionTimings = BootupTime.getExecutionTimingsByURL(devtoolsTimelineModel);
-      let totalBootupTime = 0;
-      /** @type {Object<string, Object<string, number>>} */
-      const extendedInfo = {};
+    const devtoolsTimelineModel = await artifacts.requestDevtoolsTimelineModel(trace);
+    const executionTimings = BootupTime.getExecutionTimingsByURL(devtoolsTimelineModel);
+    let totalBootupTime = 0;
+    /** @type {Object<string, Object<string, number>>} */
+    const extendedInfo = {};
 
-      const headings = [
-        {key: 'url', itemType: 'url', text: 'URL'},
-        {key: 'scripting', itemType: 'text', text: groupIdToName.scripting},
-        {key: 'scriptParseCompile', itemType: 'text', text: groupIdToName.scriptParseCompile},
-      ];
+    const headings = [
+      {key: 'url', itemType: 'url', text: 'URL'},
+      {key: 'scripting', itemType: 'text', text: groupIdToName.scripting},
+      {key: 'scriptParseCompile', itemType: 'text', text: groupIdToName.scriptParseCompile},
+    ];
 
-      // map data in correct format to create a table
-      const results = Array.from(executionTimings)
-        .map(([url, groups]) => {
-          // Add up the totalBootupTime for all the taskGroups
-          totalBootupTime += Object.keys(groups).reduce((sum, name) => sum += groups[name], 0);
-          extendedInfo[url] = groups;
+    // map data in correct format to create a table
+    const results = Array.from(executionTimings)
+      .map(([url, groups]) => {
+        // Add up the totalBootupTime for all the taskGroups
+        totalBootupTime += Object.keys(groups).reduce((sum, name) => sum += groups[name], 0);
+        extendedInfo[url] = groups;
 
-          const scriptingTotal = groups[groupIdToName.scripting] || 0;
-          const parseCompileTotal = groups[groupIdToName.scriptParseCompile] || 0;
-          return {
-            url: url,
-            sum: scriptingTotal + parseCompileTotal,
-            // Only reveal the javascript task costs
-            // Later we can account for forced layout costs, etc.
-            scripting: Util.formatMilliseconds(scriptingTotal, 1),
-            scriptParseCompile: Util.formatMilliseconds(parseCompileTotal, 1),
-          };
-        })
-        .filter(result => result.sum >= THRESHOLD_IN_MS)
-        .sort((a, b) => b.sum - a.sum);
+        const scriptingTotal = groups[groupIdToName.scripting] || 0;
+        const parseCompileTotal = groups[groupIdToName.scriptParseCompile] || 0;
+        return {
+          url: url,
+          sum: scriptingTotal + parseCompileTotal,
+          // Only reveal the javascript task costs
+          // Later we can account for forced layout costs, etc.
+          scripting: Util.formatMilliseconds(scriptingTotal, 1),
+          scriptParseCompile: Util.formatMilliseconds(parseCompileTotal, 1),
+        };
+      })
+      .filter(result => result.sum >= THRESHOLD_IN_MS)
+      .sort((a, b) => b.sum - a.sum);
 
-      const summary = {wastedMs: totalBootupTime};
-      const details = BootupTime.makeTableDetails(headings, results, summary);
+    const summary = {wastedMs: totalBootupTime};
+    const details = BootupTime.makeTableDetails(headings, results, summary);
 
-      const score = Audit.computeLogNormalScore(
-        totalBootupTime,
-        context.options.scorePODR,
-        context.options.scoreMedian
-      );
+    const score = Audit.computeLogNormalScore(
+      totalBootupTime,
+      context.options.scorePODR,
+      context.options.scoreMedian
+    );
 
-      return {
-        score,
-        rawValue: totalBootupTime,
-        displayValue: [Util.MS_DISPLAY_VALUE, totalBootupTime],
-        details,
-        extendedInfo: {
-          value: extendedInfo,
-        },
-      };
-    });
+    return {
+      score,
+      rawValue: totalBootupTime,
+      displayValue: [Util.MS_DISPLAY_VALUE, totalBootupTime],
+      details,
+      extendedInfo: {
+        value: extendedInfo,
+      },
+    };
   }
 }
 

lighthouse-core/audits/byte-efficiency/total-byte-weight.js

@@ -42,68 +42,68 @@ class TotalByteWeight extends ByteEfficiencyAudit {
    * @param {LH.Audit.Context} context
    * @return {Promise<LH.Audit.Product>}
    */
-  static audit(artifacts, context) {
+  static async audit(artifacts, context) {
     const devtoolsLogs = artifacts.devtoolsLogs[ByteEfficiencyAudit.DEFAULT_PASS];
-    return Promise.all([
+    const [networkRecords, networkThroughput] = await Promise.all([
       artifacts.requestNetworkRecords(devtoolsLogs),
       artifacts.requestNetworkThroughput(devtoolsLogs),
-    ]).then(([networkRecords, networkThroughput]) => {
-      let totalBytes = 0;
-      /** @type {Array<{url: string, totalBytes: number, totalMs: number}>} */
-      let results = [];
-      networkRecords.forEach(record => {
-        // exclude data URIs since their size is reflected in other resources
-        // exclude unfinished requests since they won't have transfer size information
-        if (record.parsedURL.scheme === 'data' || !record.finished) return;
+    ]);
 
-        const result = {
-          url: record.url,
-          totalBytes: record.transferSize,
-          totalMs: ByteEfficiencyAudit.bytesToMs(record.transferSize, networkThroughput),
-        };
+    let totalBytes = 0;
+    /** @type {Array<{url: string, totalBytes: number, totalMs: number}>} */
+    let results = [];
+    networkRecords.forEach(record => {
+      // exclude data URIs since their size is reflected in other resources
+      // exclude unfinished requests since they won't have transfer size information
+      if (record.parsedURL.scheme === 'data' || !record.finished) return;
 
-        totalBytes += result.totalBytes;
-        results.push(result);
-      });
-      const totalCompletedRequests = results.length;
-      results = results.sort((itemA, itemB) => itemB.totalBytes - itemA.totalBytes).slice(0, 10);
+      const result = {
+        url: record.url,
+        totalBytes: record.transferSize,
+        totalMs: ByteEfficiencyAudit.bytesToMs(record.transferSize, networkThroughput),
+      };
+
+      totalBytes += result.totalBytes;
+      results.push(result);
+    });
+    const totalCompletedRequests = results.length;
+    results = results.sort((itemA, itemB) => itemB.totalBytes - itemA.totalBytes).slice(0, 10);
 
-      const score = ByteEfficiencyAudit.computeLogNormalScore(
-        totalBytes,
-        context.options.scorePODR,
-        context.options.scoreMedian
-      );
+    const score = ByteEfficiencyAudit.computeLogNormalScore(
+      totalBytes,
+      context.options.scorePODR,
+      context.options.scoreMedian
+    );
 
-      const headings = [
-        {key: 'url', itemType: 'url', text: 'URL'},
-        {
-          key: 'totalBytes',
-          itemType: 'bytes',
-          displayUnit: 'kb',
-          granularity: 1,
-          text: 'Total Size',
-        },
-        {key: 'totalMs', itemType: 'ms', text: 'Transfer Time'},
-      ];
+    const headings = [
+      {key: 'url', itemType: 'url', text: 'URL'},
+      {
+        key: 'totalBytes',
+        itemType: 'bytes',
+        displayUnit: 'kb',
+        granularity: 1,
+        text: 'Total Size',
+      },
+      {key: 'totalMs', itemType: 'ms', text: 'Transfer Time'},
+    ];
 
-      const tableDetails = ByteEfficiencyAudit.makeTableDetails(headings, results);
+    const tableDetails = ByteEfficiencyAudit.makeTableDetails(headings, results);
 
-      return {
-        score,
-        rawValue: totalBytes,
-        displayValue: [
-          'Total size was %d\xa0KB',
-          totalBytes / 1024,
-        ],
-        extendedInfo: {
-          value: {
-            results,
-            totalCompletedRequests,
-          },
+    return {
+      score,
+      rawValue: totalBytes,
+      displayValue: [
+        'Total size was %d\xa0KB',
+        totalBytes / 1024,
+      ],
+      extendedInfo: {
+        value: {
+          results,
+          totalCompletedRequests,
         },
-        details: tableDetails,
-      };
-    });
+      },
+      details: tableDetails,
+    };
   }
 }
 

lighthouse-core/audits/mainthread-work-breakdown.js

@@ -61,58 +61,56 @@ class MainThreadWorkBreakdown extends Audit {
    * @param {LH.Audit.Context} context
    * @return {Promise<LH.Audit.Product>}
    */
-  static audit(artifacts, context) {
+  static async audit(artifacts, context) {
     const trace = artifacts.traces[MainThreadWorkBreakdown.DEFAULT_PASS];
 
-    return artifacts.requestDevtoolsTimelineModel(trace)
-      .then(devtoolsTimelineModel => {
-        const executionTimings = MainThreadWorkBreakdown.getExecutionTimingsByCategory(
-          devtoolsTimelineModel
-        );
-        let totalExecutionTime = 0;
-
-        const extendedInfo = {};
-        const categoryTotals = {};
-        const results = Array.from(executionTimings).map(([eventName, duration]) => {
-          totalExecutionTime += duration;
-          extendedInfo[eventName] = duration;
-          const groupName = taskToGroup[eventName];
-
-          const categoryTotal = categoryTotals[groupName] || 0;
-          categoryTotals[groupName] = categoryTotal + duration;
-
-          return {
-            category: eventName,
-            group: groupName,
-            duration: Util.formatMilliseconds(duration, 1),
-          };
-        });
-
-        const headings = [
-          {key: 'group', itemType: 'text', text: 'Category'},
-          {key: 'category', itemType: 'text', text: 'Work'},
-          {key: 'duration', itemType: 'text', text: 'Time spent'},
-        ];
-        // @ts-ignore - stableSort added to Array by WebInspector
-        results.stableSort((a, b) => categoryTotals[b.group] - categoryTotals[a.group]);
-        const tableDetails = MainThreadWorkBreakdown.makeTableDetails(headings, results);
-
-        const score = Audit.computeLogNormalScore(
-          totalExecutionTime,
-          context.options.scorePODR,
-          context.options.scoreMedian
-        );
-
-        return {
-          score,
-          rawValue: totalExecutionTime,
-          displayValue: ['%d\xa0ms', totalExecutionTime],
-          details: tableDetails,
-          extendedInfo: {
-            value: extendedInfo,
-          },
-        };
-      });
+    const devtoolsTimelineModel = await artifacts.requestDevtoolsTimelineModel(trace);
+    const executionTimings = MainThreadWorkBreakdown.getExecutionTimingsByCategory(
+      devtoolsTimelineModel
+    );
+    let totalExecutionTime = 0;
+
+    const extendedInfo = {};
+    const categoryTotals = {};
+    const results = Array.from(executionTimings).map(([eventName, duration]) => {
+      totalExecutionTime += duration;
+      extendedInfo[eventName] = duration;
+      const groupName = taskToGroup[eventName];
+
+      const categoryTotal = categoryTotals[groupName] || 0;
+      categoryTotals[groupName] = categoryTotal + duration;
+
+      return {
+        category: eventName,
+        group: groupName,
+        duration: Util.formatMilliseconds(duration, 1),
+      };
+    });
+
+    const headings = [
+      {key: 'group', itemType: 'text', text: 'Category'},
+      {key: 'category', itemType: 'text', text: 'Work'},
+      {key: 'duration', itemType: 'text', text: 'Time spent'},
+    ];
+    // @ts-ignore - stableSort added to Array by WebInspector
+    results.stableSort((a, b) => categoryTotals[b.group] - categoryTotals[a.group]);
+    const tableDetails = MainThreadWorkBreakdown.makeTableDetails(headings, results);
+
+    const score = Audit.computeLogNormalScore(
+      totalExecutionTime,
+      context.options.scorePODR,
+      context.options.scoreMedian
+    );
+
+    return {
+      score,
+      rawValue: totalExecutionTime,
+      displayValue: ['%d\xa0ms', totalExecutionTime],
+      details: tableDetails,
+      extendedInfo: {
+        value: extendedInfo,
+      },
+    };
   }
 }