Repository: GoogleChrome/lighthouse (js)

Issue:
Consistent style for lh-warnings
Mentioned in #6989.  I think the lh-warnings style looks out of place with the report style e.g.
![image](https://user-images.githubusercontent.com/6392995/51146678-608c6a80-180c-11e9-9d2d-386318470f8e.png)


My suggestion is to replace the 1px border with a light orange background (#fff5e3):
![image](https://user-images.githubusercontent.com/6392995/51146759-9d586180-180c-11e9-9206-1bcdc18b37ab.png)

Would love some thoughts. @hwikyounglee 


Pull request:
report: center and style top-level runtimeError
Fixes #7011

Before:
See #9270

After: 
![image](https://user-images.githubusercontent.com/4071474/60137728-b9b5de00-975c-11e9-91c5-5936406ba9a8.png)
![image](https://user-images.githubusercontent.com/4071474/60137731-bde1fb80-975c-11e9-856a-5df130499ef9.png)




Patch:
diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index 250598acb..3eb813544 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -29,12 +29,12 @@
 
   For colors: --color-{hue}-{intensity}
 
-  {intensity} is the Material Design tag - 700, A700, etc. Omit "-{intensity}" if there is only one
-  color of that hue.
+  {intensity} is the Material Design tag - 700, A700, etc.
 */
 .lh-vars {
   /* Palette using Material Design Colors
    * https://www.materialui.co/colors */
+  --color-amber-50: #FFF8E1;
   --color-blue-200: #90CAF9;
   --color-blue-900: #0D47A1;
   --color-blue-A700: #2962FF;
@@ -138,6 +138,7 @@
   --topbar-height: 32px;
   --topbar-logo-size: 24px;
   --topbar-padding: 0 8px;
+  --toplevel-warning-padding: 22px;
 
   /* SVGs */
   --plugin-icon-url-dark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="%23FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/></svg>');
@@ -998,9 +999,13 @@
 .lh-warnings--toplevel {
   --item-margin: calc(var(--header-line-height) / 4);
   color: var(--report-text-color-secondary);
-  margin: var(--category-padding);
-  padding: var(--category-padding);
+  margin-left: auto;
+  margin-right: auto;
+  max-width: calc(var(--report-width) - var(--category-padding) * 2);
+  background-color: var(--color-amber-50);
+  padding: var(--toplevel-warning-padding);
 }
+
 .lh-warnings ul {
   padding-left: calc(var(--category-padding) * 2);
   margin: 0;


Test patch:
diff --git a/lighthouse-cli/test/fixtures/perf/perf-budgets/load-things.html b/lighthouse-cli/test/fixtures/perf/perf-budgets/load-things.html
index a0cca3060..26cb786fb 100644
--- a/lighthouse-cli/test/fixtures/perf/perf-budgets/load-things.html
+++ b/lighthouse-cli/test/fixtures/perf/perf-budgets/load-things.html
@@ -30,7 +30,7 @@
         // Load file as 'other' resource.
         const response = await fetch('http://localhost:10503/preload.html');
         const ab = await response.arrayBuffer();
-        document.querySelector('#corsfont').textContent = ab.length;
+        document.querySelector('.fetch-length').textContent = ab.byteLength;
       }
       yah();
     </script>
@@ -40,7 +40,7 @@
     <img style="width: 100px; height: 100px;" src="../../byte-efficiency/large.svg">
     <p class="webfont">Ripping off some webfont smoke tests</p>
     <p><strong class="webfont">Do we need such text</strong></p>
-    <p id="corsfont"></p>
+    <p class="fetch-length"></p>
     <script src="../level-2.js"></script>
   </body>
 </html>
diff --git a/lighthouse-cli/test/smokehouse/perf/expectations.js b/lighthouse-cli/test/smokehouse/perf/expectations.js
index b0d64f39f..45b1e2399 100644
--- a/lighthouse-cli/test/smokehouse/perf/expectations.js
+++ b/lighthouse-cli/test/smokehouse/perf/expectations.js
@@ -110,7 +110,7 @@ module.exports = [
               {
                 resourceType: 'document',
                 countOverBudget: '1 request',
-                sizeOverBudget: '1100±50',
+                sizeOverBudget: '1150±50',
               },
               {
                 resourceType: 'stylesheet',