Repository: GoogleChrome/lighthouse
Pull request #8872 (2019-05-06 05:15:57)

report: no na-line with single badge
<!-- Thank you for submitting a pull request! -->

**Summary**
Removes na-line from when gauge has optimized + one other badge.
old | new
![image](https://user-images.githubusercontent.com/6392995/57207522-298cc100-6f83-11e9-9ca3-42909d93e68f.png)

**Related Issues/PRs**
fixes: #8856 



Patch:
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index 76d5d0024..f63d437ba 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -698,7 +698,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"