Repository: GoogleChrome/lighthouse
Pull request #8843 (2019-05-03 23:31:02)

report(redesign): toggle dark theme in menu
#8185

I know the drop shadow is wonky but that gets fixed in one of these other prs.

Hoten: should i rename everything from `export` -> `menu`?
paulirish: Use the lightbulb in material icons?

>

Hoten: "highlight"?
https://material.io/tools/icons/?search=light&style=baseline
paulirish: @cjamcl i totally messed with your PR. can you give it a review?
Hoten: all good

Patch:
diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js
index 4144966f5..cb9ef74d9 100644
--- a/lighthouse-core/report/html/renderer/report-ui-features.js
+++ b/lighthouse-core/report/html/renderer/report-ui-features.js
@@ -370,6 +370,10 @@ class ReportUIFeatures {
         this.saveAsGist();
         break;
       }
+      case 'toggle-dark': {
+        this._toggleDarkTheme();
+        break;
+      }
     }
 
     this.closeExportDropdown();
diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index 310b00fac..f09c9f423 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -386,21 +386,8 @@
 .report-icon--download {
   background-image: url('data:image/svg+xml;utf8,<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
 }
-
-.dark .report-icon--share {
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="white" d="M0 0h24v24H0z"/><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>');
-}
-.dark .report-icon--print {
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="white" d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/><path fill="none" d="M0 0h24v24H0z"/></svg>');
-}
-.dark .report-icon--copy {
-  background-image: url('data:image/svg+xml;utf8,<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z" /><path fill="white" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>');
-}
-.dark .report-icon--open {
-  background-image: url('data:image/svg+xml;utf8,<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z" /><path fill="white" d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"/></svg>');
-}
-.dark .report-icon--download {
-  background-image: url('data:image/svg+xml;utf8,<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
+.report-icon--dark {
+  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 100 125"><path d="M50 23.587c-16.27 0-22.799 12.574-22.799 21.417 0 12.917 10.117 22.451 12.436 32.471h20.726c2.32-10.02 12.436-19.554 12.436-32.471 0-8.843-6.528-21.417-22.799-21.417zM39.637 87.161c0 3.001 1.18 4.181 4.181 4.181h.426l.41 1.231C45.278 94.449 46.042 95 48.019 95h3.963c1.978 0 2.74-.551 3.365-2.427l.409-1.231h.427c3.002 0 4.18-1.18 4.18-4.181V80.91H39.637v6.251zM50 18.265c1.26 0 2.072-.814 2.072-2.073v-9.12C52.072 5.813 51.26 5 50 5c-1.259 0-2.072.813-2.072 2.073v9.12c0 1.259.813 2.072 2.072 2.072zM68.313 23.727c.994.774 2.135.634 2.91-.357l5.614-7.187c.776-.992.636-2.135-.356-2.909-.992-.776-2.135-.636-2.91.357l-5.613 7.186c-.778.993-.636 2.135.355 2.91zM91.157 36.373c-.306-1.222-1.291-1.815-2.513-1.51l-8.85 2.207c-1.222.305-1.814 1.29-1.51 2.512.305 1.223 1.291 1.814 2.513 1.51l8.849-2.206c1.223-.305 1.816-1.291 1.511-2.513zM86.757 60.48l-8.331-3.709c-1.15-.512-2.225-.099-2.736 1.052-.512 1.151-.1 2.224 1.051 2.737l8.33 3.707c1.15.514 2.225.101 2.736-1.05.513-1.149.1-2.223-1.05-2.737zM28.779 23.37c.775.992 1.917 1.131 2.909.357.992-.776 1.132-1.917.357-2.91l-5.615-7.186c-.775-.992-1.917-1.132-2.909-.357s-1.131 1.917-.356 2.909l5.614 7.187zM21.715 39.583c.305-1.223-.288-2.208-1.51-2.513l-8.849-2.207c-1.222-.303-2.208.289-2.513 1.511-.303 1.222.288 2.207 1.511 2.512l8.848 2.206c1.222.304 2.208-.287 2.513-1.509zM21.575 56.771l-8.331 3.711c-1.151.511-1.563 1.586-1.05 2.735.511 1.151 1.586 1.563 2.736 1.052l8.331-3.711c1.151-.511 1.563-1.586 1.05-2.735-.512-1.15-1.585-1.562-2.736-1.052z"/></svg>');
 }
 
 /* Node */
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index 76d5d0024..5893421c3 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -267,7 +267,7 @@ limitations under the License.
     }
     .lh-export__button.active + .lh-export__dropdown {
       opacity: 1;
-      clip: rect(0, 164px, 210px, 0);
+      clip: rect(0, 187px, 242px, 0);
     }
     .lh-export__dropdown {
       position: absolute;
@@ -305,6 +305,14 @@ limitations under the License.
       background-color: transparent;
       text-indent: 18px;
     }
+    .dark .report-icon {
+      color: var(--color-black-900);
+      filter: invert(1);
+    }
+    .dark .lh-export__dropdown a:hover,
+    .dark .lh-export__dropdown a:focus {
+      background-color: #BDBDBD;
+    }
     /* copy icon needs slight adjustments to look great */
     .lh-export__dropdown .report-icon--copy {
       background-size: 16px;
@@ -351,6 +359,7 @@ limitations under the License.
         <a href="#" class="report-icon report-icon--download" data-action="save-json">Save as JSON</a>
         <a href="#" class="report-icon report-icon--open lh-export--viewer" data-action="open-viewer">Open in Viewer</a>
         <a href="#" class="report-icon report-icon--open lh-export--gist" data-action="save-gist">Save as Gist</a>
+        <a href="#" class="report-icon report-icon--dark" data-action="toggle-dark">Toggle Dark Theme</a>
       </div>
     </div>
   </div>
@@ -698,7 +707,7 @@ limitations under the License.
       display: inline;
     }
     /* Just optimized. Same n/a line as no passing groups. */
-    .lh-gauge--pwa__wrapper.lh-badged--pwa-optimized .lh-gauge--pwa__na-line {
+    .lh-gauge--pwa__wrapper.lh-badged--pwa-optimized:not(.lh-badged--pwa-installable):not(.lh-badged--pwa-fast-reliable) .lh-gauge--pwa__na-line {
       display: inline;
     }
 
diff --git a/lighthouse-core/scripts/assert-golden-lhr-unchanged.sh b/lighthouse-core/scripts/assert-golden-lhr-unchanged.sh
index 7f2908446..c407e460c 100644
--- a/lighthouse-core/scripts/assert-golden-lhr-unchanged.sh
+++ b/lighthouse-core/scripts/assert-golden-lhr-unchanged.sh
@@ -28,7 +28,7 @@ trap teardown EXIT
 
 colorText "Generating a fresh LHR..." "$purple"
 set -x
-node "$lhroot_path/lighthouse-cli" -A="$lhroot_path/lighthouse-core/test/results/artifacts" --throttling-method=devtools --quiet --output=json --output-path="$freshLHRPath"
+node "$lhroot_path/lighthouse-cli" -A="$lhroot_path/lighthouse-core/test/results/artifacts" --config-path="$lhroot_path/lighthouse-core/test/results/sample-config.js" --quiet --output=json --output-path="$freshLHRPath"
 set +x
 
 # remove timing from both
diff --git a/lighthouse-core/scripts/update-report-fixtures.js b/lighthouse-core/scripts/update-report-fixtures.js
index e59f726d2..10d64051c 100644
--- a/lighthouse-core/scripts/update-report-fixtures.js
+++ b/lighthouse-core/scripts/update-report-fixtures.js
@@ -11,28 +11,10 @@ const assetSaver = require('../lib/asset-saver.js');
 const artifactPath = 'lighthouse-core/test/results/artifacts';
 
 const {server} = require('../../lighthouse-cli/test/fixtures/static-server.js');
+const budgetedConfig = require('../test/results/sample-config.js');
 
 /** @typedef {import('net').AddressInfo} AddressInfo */
 
-/** @type {LH.Config.Json} */
-const budgetedConfig = {
-  extends: 'lighthouse:default',
-  settings: {
-    budgets: [{
-      resourceSizes: [
-        {resourceType: 'script', budget: 125},
-        {resourceType: 'total', budget: 500},
-      ],
-      timings: [
-        {metric: 'interactive', budget: 5000, tolerance: 1000},
-      ],
-      resourceCounts: [
-        {resourceType: 'third-party', budget: 0},
-      ],
-    }],
-  },
-};
-
 /**
  * Update the report artifacts. If artifactName is set only that artifact will be updated.
  * @param {keyof LH.Artifacts=} artifactName
@@ -51,7 +33,6 @@ async function update(artifactName) {
   const url = `http://localhost:${port}/dobetterweb/dbw_tester.html`;
   const rawFlags = [
     `--gather-mode=${artifactPath}`,
-    '--throttling-method=devtools',
     url,
   ].join(' ');
   const flags = cliFlags.getFlags(rawFlags);
diff --git a/package.json b/package.json
index 5b92e60b3..52098cfe8 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "i18n:checks": "./lighthouse-core/scripts/i18n/assert-strings-collected.sh",
     "i18n:collect-strings": "node lighthouse-core/scripts/i18n/collect-strings.js",
     "update:sample-artifacts": "node lighthouse-core/scripts/update-report-fixtures.js",
-    "update:sample-json": "yarn i18n:collect-strings && node ./lighthouse-cli -A=./lighthouse-core/test/results/artifacts --throttling-method=devtools --output=json --output-path=./lighthouse-core/test/results/sample_v2.json && node lighthouse-core/scripts/cleanup-LHR-for-diff.js ./lighthouse-core/test/results/sample_v2.json --only-remove-timing && yarn compile-proto && yarn build-proto-roundtrip",
+    "update:sample-json": "yarn i18n:collect-strings && node ./lighthouse-cli -A=./lighthouse-core/test/results/artifacts --config-path=./lighthouse-core/test/results/sample-config.js --output=json --output-path=./lighthouse-core/test/results/sample_v2.json && node lighthouse-core/scripts/cleanup-LHR-for-diff.js ./lighthouse-core/test/results/sample_v2.json --only-remove-timing && yarn compile-proto && yarn build-proto-roundtrip",
     "diff:sample-json": "yarn i18n:checks && bash lighthouse-core/scripts/assert-golden-lhr-unchanged.sh",
     "ultradumbBenchmark": "./lighthouse-core/scripts/benchmark.js",
     "mixed-content": "./lighthouse-cli/index.js --chrome-flags='--headless' --preset=mixed-content",
diff --git a/proto/sample_v2_round_trip.json b/proto/sample_v2_round_trip.json
index 3885c9a55..0bd017558 100644
--- a/proto/sample_v2_round_trip.json
+++ b/proto/sample_v2_round_trip.json
@@ -2033,9 +2033,104 @@
         },
         "performance-budget": {
             "description": "Keep the quantity and size of network requests under the targets set by the provided performance budget.",
+            "details": {
+                "headings": [
+                    {
+                        "itemType": "text",
+                        "key": "label",
+                        "text": "Resource Type"
+                    },
+                    {
+                        "itemType": "numeric",
+                        "key": "requestCount",
+                        "text": "Requests"
+                    },
+                    {
+                        "itemType": "bytes",
+                        "key": "size",
+                        "text": "Transfer Size"
+                    },
+                    {
+                        "itemType": "text",
+                        "key": "countOverBudget"
+                    },
+                    {
+                        "itemType": "bytes",
+                        "key": "sizeOverBudget",
+                        "text": "Over Budget"
+                    }
+                ],
+                "items": [
+                    {
+                        "countOverBudget": "2 requests",
+                        "label": "Script",
+                        "requestCount": 4.0,
+                        "resourceType": "script",
+                        "size": 103675.0,
+                        "sizeOverBudget": 72955.0
+                    },
+                    {
+                        "countOverBudget": "8 requests",
+                        "label": "Total",
+                        "requestCount": 18.0,
+                        "resourceType": "total",
+                        "size": 160738.0,
+                        "sizeOverBudget": 58338.0
+                    },
+                    {
+                        "label": "Other",
+                        "requestCount": 2.0,
+                        "resourceType": "other",
+                        "size": 12861.0,
+                        "sizeOverBudget": 7741.0
+                    },
+                    {
+                        "countOverBudget": "1 request",
+                        "label": "Third-party",
+                        "requestCount": 2.0,
+                        "resourceType": "third-party",
+                        "size": 30174.0,
+                        "sizeOverBudget": 4574.0
+                    },
+                    {
+                        "countOverBudget": "5 requests",
+                        "label": "Stylesheet",
+                        "requestCount": 7.0,
+                        "resourceType": "stylesheet",
+                        "size": 5352.0,
+                        "sizeOverBudget": 232.0
+                    },
+                    {
+                        "label": "Image",
+                        "requestCount": 2.0,
+                        "resourceType": "image",
+                        "size": 24741.0
+                    },
+                    {
+                        "label": "Media",
+                        "requestCount": 0.0,
+                        "resourceType": "media",
+                        "size": 0.0
+                    },
+                    {
+                        "label": "Font",
+                        "requestCount": 0.0,
+                        "resourceType": "font",
+                        "size": 0.0
+                    },
+                    {
+                        "countOverBudget": "2 requests",
+                        "label": "Document",
+                        "requestCount": 3.0,
+                        "resourceType": "document",
+                        "size": 14109.0
+                    }
+                ],
+                "type": "table"
+            },
             "id": "performance-budget",
             "score": null,
-            "scoreDisplayMode": "notApplicable",
+            "scoreDisplayMode": "informative",
             "title": "Performance budget"
         },
         "plugins": {


Test patch:
diff --git a/lighthouse-core/test/report/html/renderer/report-renderer-test.js b/lighthouse-core/test/report/html/renderer/report-renderer-test.js
index efa3966da..d6d8e6a98 100644
--- a/lighthouse-core/test/report/html/renderer/report-renderer-test.js
+++ b/lighthouse-core/test/report/html/renderer/report-renderer-test.js
@@ -265,10 +265,8 @@ describe('ReportRenderer', () => {
 
     const container = renderer._dom._document.body;
     const reportElement = renderer.renderReport(sampleResults, container);
-    // TODO(khempenius): Remove "+1" once budgets renderer code is added.
-    // Until budgets renderer code is added, JSON vs. DOM comparison will differ by 1.
     const notApplicableElementCount = reportElement
       .querySelectorAll('.lh-audit--notapplicable').length;
-    assert.strictEqual(notApplicableCount, notApplicableElementCount + 1);
+    assert.strictEqual(notApplicableCount, notApplicableElementCount);
   });
 });
diff --git a/lighthouse-core/test/results/sample-config.js b/lighthouse-core/test/results/sample-config.js
new file mode 100644
index 000000000..9f8144dbb
--- /dev/null
+++ b/lighthouse-core/test/results/sample-config.js
@@ -0,0 +1,51 @@
+/**
+ * @license Copyright 2019 Google Inc. 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';
+
+/**
+ * @fileoverview Config used for generating the sample_v2 golden LHR.
+ */
+
+/** @type {LH.Config.Json} */
+const budgetedConfig = {
+  extends: 'lighthouse:default',
+  settings: {
+    throttlingMethod: 'devtools',
+    budgets: [{
+      resourceCounts: [
+        {resourceType: 'total', budget: 10},
+        {resourceType: 'stylesheet', budget: 2},
+        {resourceType: 'image', budget: 2},
+        {resourceType: 'media', budget: 0},
+        {resourceType: 'font', budget: 1},
+        {resourceType: 'script', budget: 2},
+        {resourceType: 'document', budget: 1},
+        {resourceType: 'other', budget: 2},
+        {resourceType: 'third-party', budget: 1},
+      ],
+      resourceSizes: [
+        {resourceType: 'total', budget: 100},
+        {resourceType: 'stylesheet', budget: 5},
+        {resourceType: 'image', budget: 30},
+        {resourceType: 'media', budget: 0},
+        {resourceType: 'font', budget: 20},
+        {resourceType: 'script', budget: 30},
+        {resourceType: 'document', budget: 15},
+        {resourceType: 'other', budget: 5},
+        {resourceType: 'third-party', budget: 25},
+      ],
+      timings: [
+        {metric: 'first-contentful-paint', budget: 3000, tolerance: 100},
+        {metric: 'first-cpu-idle', budget: 2900, tolerance: 100},
+        {metric: 'interactive', budget: 2900, tolerance: 100},
+        {metric: 'first-meaningful-paint', budget: 2000, tolerance: 100},
+        {metric: 'estimated-input-latency', budget: 100, tolerance: 100},
+      ],
+    }],
+  },
+};
+
+module.exports = budgetedConfig;
diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json
index 6ab2a57a4..cfe88c52d 100644
--- a/lighthouse-core/test/results/sample_v2.json
+++ b/lighthouse-core/test/results/sample_v2.json
@@ -1278,7 +1278,103 @@
       "title": "Performance budget",
       "description": "Keep the quantity and size of network requests under the targets set by the provided performance budget.",
       "score": null,
-      "scoreDisplayMode": "notApplicable"
+      "scoreDisplayMode": "informative",
+      "details": {
+        "type": "table",
+        "headings": [
+          {
+            "key": "label",
+            "itemType": "text",
+            "text": "Resource Type"
+          },
+          {
+            "key": "requestCount",
+            "itemType": "numeric",
+            "text": "Requests"
+          },
+          {
+            "key": "size",
+            "itemType": "bytes",
+            "text": "Transfer Size"
+          },
+          {
+            "key": "countOverBudget",
+            "itemType": "text",
+            "text": ""
+          },
+          {
+            "key": "sizeOverBudget",
+            "itemType": "bytes",
+            "text": "Over Budget"
+          }
+        ],
+        "items": [
+          {
+            "resourceType": "script",
+            "label": "Script",
+            "requestCount": 4,
+            "size": 103675,
+            "countOverBudget": "2 requests",
+            "sizeOverBudget": 72955
+          },
+          {
+            "resourceType": "total",
+            "label": "Total",
+            "requestCount": 18,
+            "size": 160738,
+            "countOverBudget": "8 requests",
+            "sizeOverBudget": 58338
+          },
+          {
+            "resourceType": "other",
+            "label": "Other",
+            "requestCount": 2,
+            "size": 12861,
+            "sizeOverBudget": 7741
+          },
+          {
+            "resourceType": "third-party",
+            "label": "Third-party",
+            "requestCount": 2,
+            "size": 30174,
+            "countOverBudget": "1 request",
+            "sizeOverBudget": 4574
+          },
+          {
+            "resourceType": "stylesheet",
+            "label": "Stylesheet",
+            "requestCount": 7,
+            "size": 5352,
+            "countOverBudget": "5 requests",
+            "sizeOverBudget": 232
+          },
+          {
+            "resourceType": "image",
+            "label": "Image",
+            "requestCount": 2,
+            "size": 24741
+          },
+          {
+            "resourceType": "media",
+            "label": "Media",
+            "requestCount": 0,
+            "size": 0
+          },
+          {
+            "resourceType": "font",
+            "label": "Font",
+            "requestCount": 0,
+            "size": 0
+          },
+          {
+            "resourceType": "document",
+            "label": "Document",
+            "requestCount": 3,
+            "size": 14109,
+            "countOverBudget": "2 requests"
+          }
+        ]
+      }
     },
     "resource-summary": {
       "id": "resource-summary",
@@ -3086,7 +3182,113 @@
     "disableStorageReset": false,
     "emulatedFormFactor": "mobile",
     "channel": "cli",
-    "budgets": null,
+    "budgets": [
+      {
+        "resourceSizes": [
+          {
+            "resourceType": "total",
+            "budget": 100
+          },
+          {
+            "resourceType": "stylesheet",
+            "budget": 5
+          },
+          {
+            "resourceType": "image",
+            "budget": 30
+          },
+          {
+            "resourceType": "media",
+            "budget": 0
+          },
+          {
+            "resourceType": "font",
+            "budget": 20
+          },
+          {
+            "resourceType": "script",
+            "budget": 30
+          },
+          {
+            "resourceType": "document",
+            "budget": 15
+          },
+          {
+            "resourceType": "other",
+            "budget": 5
+          },
+          {
+            "resourceType": "third-party",
+            "budget": 25
+          }
+        ],
+        "resourceCounts": [
+          {
+            "resourceType": "total",
+            "budget": 10
+          },
+          {
+            "resourceType": "stylesheet",
+            "budget": 2
+          },
+          {
+            "resourceType": "image",
+            "budget": 2
+          },
+          {
+            "resourceType": "media",
+            "budget": 0
+          },
+          {
+            "resourceType": "font",
+            "budget": 1
+          },
+          {
+            "resourceType": "script",
+            "budget": 2
+          },
+          {
+            "resourceType": "document",
+            "budget": 1
+          },
+          {
+            "resourceType": "other",
+            "budget": 2
+          },
+          {
+            "resourceType": "third-party",
+            "budget": 1
+          }
+        ],
+        "timings": [
+          {
+            "metric": "first-contentful-paint",
+            "budget": 3000,
+            "tolerance": 100
+          },
+          {
+            "metric": "first-cpu-idle",
+            "budget": 2900,
+            "tolerance": 100
+          },
+          {
+            "metric": "interactive",
+            "budget": 2900,
+            "tolerance": 100
+          },
+          {
+            "metric": "first-meaningful-paint",
+            "budget": 2000,
+            "tolerance": 100
+          },
+          {
+            "metric": "estimated-input-latency",
+            "budget": 100,
+            "tolerance": 100
+          }
+        ]
+      }
+    ],
     "locale": "en-US",
     "blockedUrlPatterns": null,
     "additionalTraceCategories": null,
@@ -5024,47 +5226,88 @@
       "lighthouse-core/audits/performance-budget.js | description": [
         "audits[performance-budget].description"
       ],
-      "lighthouse-core/audits/resource-summary.js | title": [
-        "audits[resource-summary].title"
-      ],
-      "lighthouse-core/audits/resource-summary.js | description": [
-        "audits[resource-summary].description"
+      "lighthouse-core/lib/i18n/i18n.js | scriptResourceType": [
+        "audits[performance-budget].details.items[0].label",
+        "audits[resource-summary].details.items[1].label"
       ],
-      "lighthouse-core/audits/resource-summary.js | displayValue": [
+      "lighthouse-core/audits/performance-budget.js | requestCountOverBudget": [
         {
           "values": {
-            "requestCount": 18,
-            "byteCount": 160738
+            "count": 2
           },
-          "path": "audits[resource-summary].displayValue"
+          "path": "audits[performance-budget].details.items[0].countOverBudget"
+        },
+        {
+          "values": {
+            "count": 8
+          },
+          "path": "audits[performance-budget].details.items[1].countOverBudget"
+        },
+        {
+          "values": {
+            "count": 1
+          },
+          "path": "audits[performance-budget].details.items[3].countOverBudget"
+        },
+        {
+          "values": {
+            "count": 5
+          },
+          "path": "audits[performance-budget].details.items[4].countOverBudget"
+        },
+        {
+          "values": {
+            "count": 2
+          },
+          "path": "audits[performance-budget].details.items[8].countOverBudget"
         }
       ],
       "lighthouse-core/lib/i18n/i18n.js | totalResourceType": [
+        "audits[performance-budget].details.items[1].label",
         "audits[resource-summary].details.items[0].label"
       ],
-      "lighthouse-core/lib/i18n/i18n.js | scriptResourceType": [
-        "audits[resource-summary].details.items[1].label"
-      ],
-      "lighthouse-core/lib/i18n/i18n.js | imageResourceType": [
-        "audits[resource-summary].details.items[2].label"
-      ],
-      "lighthouse-core/lib/i18n/i18n.js | documentResourceType": [
-        "audits[resource-summary].details.items[3].label"
-      ],
       "lighthouse-core/lib/i18n/i18n.js | otherResourceType": [
+        "audits[performance-budget].details.items[2].label",
         "audits[resource-summary].details.items[4].label"
       ],
+      "lighthouse-core/lib/i18n/i18n.js | thirdPartyResourceType": [
+        "audits[performance-budget].details.items[3].label",
+        "audits[resource-summary].details.items[8].label"
+      ],
       "lighthouse-core/lib/i18n/i18n.js | stylesheetResourceType": [
+        "audits[performance-budget].details.items[4].label",
         "audits[resource-summary].details.items[5].label"
       ],
+      "lighthouse-core/lib/i18n/i18n.js | imageResourceType": [
+        "audits[performance-budget].details.items[5].label",
+        "audits[resource-summary].details.items[2].label"
+      ],
       "lighthouse-core/lib/i18n/i18n.js | mediaResourceType": [
+        "audits[performance-budget].details.items[6].label",
         "audits[resource-summary].details.items[6].label"
       ],
       "lighthouse-core/lib/i18n/i18n.js | fontResourceType": [
+        "audits[performance-budget].details.items[7].label",
         "audits[resource-summary].details.items[7].label"
       ],
-      "lighthouse-core/lib/i18n/i18n.js | thirdPartyResourceType": [
-        "audits[resource-summary].details.items[8].label"
+      "lighthouse-core/lib/i18n/i18n.js | documentResourceType": [
+        "audits[performance-budget].details.items[8].label",
+        "audits[resource-summary].details.items[3].label"
+      ],
+      "lighthouse-core/audits/resource-summary.js | title": [
+        "audits[resource-summary].title"
+      ],
+      "lighthouse-core/audits/resource-summary.js | description": [
+        "audits[resource-summary].description"
+      ],
+      "lighthouse-core/audits/resource-summary.js | displayValue": [
+        {
+          "values": {
+            "requestCount": 18,
+            "byteCount": 160738
+          },
+          "path": "audits[resource-summary].displayValue"
+        }
       ],
       "lighthouse-core/audits/accessibility/accesskeys.js | title": [
         "audits.accesskeys.title"