Repository: GoogleChrome/lighthouse (js)

Issue:
Report: "e.computedStyleMap is not a function" error when viewing in Safari
Using lighthouseVersion 3.0.3, when uploading or using gist to send a JSON file to the Lighthouse Report Viewer I receive the following errors in the console log of the browser:

```
[Error] Error: Error rendering report: e.computedStyleMap is not a function. (In 'e.computedStyleMap()', 'e.computedStyleMap' is undefined)
	(anonymous function) (viewer.js:16:169301) Line 770

[Error] Error: e.computedStyleMap is not a function. (In 'e.computedStyleMap()', 'e.computedStyleMap' is undefined)
	(anonymous function) (viewer.js:16:169301) Line 770
```

I've verified that the JSON file is valid JSON syntax, so I'm not sure what's happening. 

I'm using lighthouse from the command line on Ubuntu. 

Pull request:
report(html): replace Typed OM getComputedStyle() with CSSOM equivalent
<!-- Thank you for submitting a pull request! -->

**Summary**
<!-- What kind of change does this PR introduce? -->
Replace Typed OM's `element.getComputedStyle()` with CSSOM `window.getComputedStyle()`
<!-- Is this a bugfix, feature, refactoring, build related change, etc? -->

<!-- Describe the need for this change -->
Typed OM is not widely supported yet. Our delivered JS should work properly in all major browsers
<!-- Link any documentation or information that would help understand this change -->
https://developers.google.com/web/updates/2018/03/cssom#computed
**Related Issues/PRs**
<!-- Provide any additional information we might need to understand the pull request -->
fixes #5966

Yeah, this replacement looks a bit hacky. But I've not found a more elegant way

Patch:
diff --git a/changelog.md b/changelog.md
index c461782ba..d5418b7de 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,3 +1,9 @@
+ <a name="3.1.1"></a>
+# 3.1.1 (2018-09-07)
+[Full Changelog](https://github.com/googlechrome/lighthouse/compare/v3.1.0...v3.1.1)
+
+* update report score legend to match updated color buckets ([#5985](https://github.com/googlechrome/lighthouse/pull/5985))
+
 <a name="3.1.0"></a>
 # 3.1.0 (2018-09-06)
 [Full Changelog](https://github.com/googlechrome/lighthouse/compare/v3.0.3...v3.1.0)
@@ -7,6 +13,20 @@ Huge thanks to @midzer and @justinribeiro for being so darn helpful. Great stuff
 
 And thanks to @mettamatt for some helpful documentation. Who doesn't love better docs?!
 
+## Notable changes
+
+* red/orange/green color buckets for scores are tougher now. ([#5831](https://github.com/googlechrome/lighthouse/pull/5831))
+
+| | Previously | Now |
+|-|-|-|
+| Red (bad) | 0-44 | 0-49 |
+| Orange (average)| 45-74 | 50-89 |
+| Green (good)| 75-100 | 90-100 |
+
+Scoring itself hasn't changed; only what color is used to decorate a score.
+
+* trace-processor: fix bug where top-level events weren't being found in the trace ([#5841](https://github.com/googlechrome/lighthouse/pull/5841))
+
 ## Core
 
 * normalize URL before checking equality ([#5960](https://github.com/googlechrome/lighthouse/pull/5960))
@@ -32,7 +52,6 @@ And thanks to @mettamatt for some helpful documentation. Who doesn't love better
 * screenshot-thumbnails: improve caching ([#5976](https://github.com/googlechrome/lighthouse/pull/5976))
 * ttfb: reuse requestMainResource ([#5657](https://github.com/googlechrome/lighthouse/pull/5657))
 * trace-of-tab: only use navstart of chrome/http documents ([#5917](https://github.com/googlechrome/lighthouse/pull/5917))
-* trace-processor: use new toplevel task event name ([#5841](https://github.com/googlechrome/lighthouse/pull/5841))
 * tracing-processor: throw on no top level events ([#5878](https://github.com/googlechrome/lighthouse/pull/5878))
 * uses-long-cache-ttl: handle multiple cache-control headers ([#5745](https://github.com/googlechrome/lighthouse/pull/5745))
 
@@ -88,7 +107,6 @@ And thanks to @mettamatt for some helpful documentation. Who doesn't love better
 ## Report
 
 * link to our own "unused css" reference doc ([#5698](https://github.com/googlechrome/lighthouse/pull/5698))
-* make red/orange/green score color thresholds tougher ([#5831](https://github.com/googlechrome/lighthouse/pull/5831))
 * expose prepareLabData directly as a fn ([#5818](https://github.com/googlechrome/lighthouse/pull/5818))
 * responsive styles ([#5706](https://github.com/googlechrome/lighthouse/pull/5706))
 * add PSI.prepareLabData() ([#5804](https://github.com/googlechrome/lighthouse/pull/5804))
diff --git a/docs/scoring.md b/docs/scoring.md
index f75b16534..93128a277 100644
--- a/docs/scoring.md
+++ b/docs/scoring.md
@@ -44,9 +44,9 @@ These weights are heuristics, and the Lighthouse team is working on formalizing
 Once Lighthouse is done gathering the raw performance metrics for your website (metrics reported in miliseconds), it converts them into a score by mapping the raw performance number to a number between 0-100 by looking where your raw performance metric falls on the Lighthouse scoring distribution. The Lighthouse scoring distribution is a log normal distribution that is derived from the performance metrics of real website performance data (see sample distribution [here](https://www.desmos.com/calculator/zrjq6v1ihi)).
 
 Once we finish computing the percentile equivalent of your raw performance score, we take the weighted average of all the performance metrics (per the weighting above). Finally, we apply a coloring to the score (green, orange, and red) depending on what "bucket" your score falls in. This maps to:
-- Red (poor score): 0-44.
-- Orange (average): 45-74
-- Green (good): 75-100.
+- Red (poor score): 0-49
+- Orange (average): 50-89
+- Green (good): 90-100
 
 ### What can developers do to improve their performance score?
 *Note: we've built [a little calculator](https://docs.google.com/spreadsheets/d/1Cxzhy5ecqJCucdf1M0iOzM8mIxNc7mmx107o5nj38Eo/edit#gid=283330180) that can help you understand what thresholds you should be aiming for achieving a certain Lighthouse performance score. *
diff --git a/lighthouse-core/audits/uses-rel-preconnect.js b/lighthouse-core/audits/uses-rel-preconnect.js
index 9e84d00c4..e25ddd618 100644
--- a/lighthouse-core/audits/uses-rel-preconnect.js
+++ b/lighthouse-core/audits/uses-rel-preconnect.js
@@ -172,7 +172,9 @@ class UsesRelPreconnectAudit extends Audit {
     return {
       score: UnusedBytes.scoreForWastedMs(maxWasted),
       rawValue: maxWasted,
-      displayValue: str_(i18n.UIStrings.displayValueMsSavings, {wastedMs: maxWasted}),
+      displayValue: maxWasted ?
+        str_(i18n.UIStrings.displayValueMsSavings, {wastedMs: maxWasted}) :
+        '',
       extendedInfo: {
         value: results,
       },
diff --git a/lighthouse-core/audits/uses-rel-preload.js b/lighthouse-core/audits/uses-rel-preload.js
index 2ec6cb374..b11064563 100644
--- a/lighthouse-core/audits/uses-rel-preload.js
+++ b/lighthouse-core/audits/uses-rel-preload.js
@@ -190,7 +190,9 @@ class UsesRelPreloadAudit extends Audit {
     return {
       score: UnusedBytes.scoreForWastedMs(wastedMs),
       rawValue: wastedMs,
-      displayValue: str_(i18n.UIStrings.displayValueMsSavings, {wastedMs}),
+      displayValue: wastedMs ?
+        str_(i18n.UIStrings.displayValueMsSavings, {wastedMs}) :
+        '',
       extendedInfo: {
         value: results,
       },
diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js
index 4ed83000d..3150a9bc2 100644
--- a/lighthouse-core/report/html/renderer/report-ui-features.js
+++ b/lighthouse-core/report/html/renderer/report-ui-features.js
@@ -130,10 +130,8 @@ class ReportUIFeatures {
 
   _setupHeaderAnimation() {
     const scoresWrapper = this._dom.find('.lh-scores-wrapper', this._document);
-    this.headerOverlap = /** @type {number} */
-      // @ts-ignore - TODO: move off CSSOM to support other browsers
-      (scoresWrapper.computedStyleMap().get('margin-top').value);
-
+    const computedMarginTop = window.getComputedStyle(scoresWrapper).marginTop;
+    this.headerOverlap = parseFloat(computedMarginTop || '0');
     this.headerSticky = this._dom.find('.lh-header-sticky', this._document);
     this.headerBackground = this._dom.find('.lh-header-bg', this._document);
     this.lighthouseIcon = this._dom.find('.lh-lighthouse', this._document);
@@ -141,9 +139,8 @@ class ReportUIFeatures {
     this.productInfo = this._dom.find('.lh-product-info', this._document);
     this.toolbar = this._dom.find('.lh-toolbar', this._document);
     this.toolbarMetadata = this._dom.find('.lh-toolbar__metadata', this._document);
-
-    // @ts-ignore - TODO: move off CSSOM to support other browsers
-    this.headerHeight = this.headerBackground.computedStyleMap().get('height').value;
+    const computedHeight = window.getComputedStyle(this.headerBackground).height;
+    this.headerHeight = parseFloat(computedHeight || '0');
 
     this._document.addEventListener('scroll', this.onScroll, {passive: true});
 
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index fb92d7ce9..29e93cb11 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -27,9 +27,9 @@ limitations under the License.
 <template id="tmpl-lh-scorescale">
   <div class="lh-scorescale">
     <span class="lh-scorescale-label"></span>
-    <span class="lh-scorescale-range lh-scorescale-range--fail">0-44</span>
-    <span class="lh-scorescale-range lh-scorescale-range--average">45-74</span>
-    <span class="lh-scorescale-range lh-scorescale-range--pass">75-100</span>
+    <span class="lh-scorescale-range lh-scorescale-range--fail">0-49</span>
+    <span class="lh-scorescale-range lh-scorescale-range--average">50-89</span>
+    <span class="lh-scorescale-range lh-scorescale-range--pass">90-100</span>
   </div>
 </template>
 
diff --git a/lighthouse-extension/app/manifest.json b/lighthouse-extension/app/manifest.json
index b45843463..bb29d4151 100644
--- a/lighthouse-extension/app/manifest.json
+++ b/lighthouse-extension/app/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "__MSG_appName__",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "minimum_chrome_version": "66",
   "manifest_version": 2,
   "description": "__MSG_appDescription__",
diff --git a/package.json b/package.json
index 55fd198db..fbf4fcda7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Lighthouse",
   "main": "./lighthouse-core/index.js",
   "bin": {
diff --git a/readme.md b/readme.md
index 2c3b1c66e..951f7a7b4 100644
--- a/readme.md
+++ b/readme.md
@@ -280,6 +280,7 @@ Other awesome open source projects that use Lighthouse.
 * **[lighthouse-hue](https://github.com/ebidel/lighthouse-hue)** - set the color of Philips Hue lights based on a Lighthouse score
    * **[lighthouse-magic-light](https://github.com/manekinekko/lighthouse-magic-light)** set the color of the MagicLight Bluetooth Smart Light Bulb based on Lighthouse score
 * **[lighthouse-batch](https://www.npmjs.com/package/lighthouse-batch)** - run Lighthouse over a number of sites and generate a summary of their metrics/scores.
+* **[lighthouse-badges](https://github.com/emazzotta/lighthouse-badges)** - Generate gh-badges (shields.io) based on Lighthouse performance.
 * **[lighthouse-cron](https://github.com/thearegee/lighthouse-cron)** - Cron multiple batch Lighthouse audits and emit results for sending to remote server.
 * **[lightcrawler](https://github.com/github/lightcrawler)** - Crawl a website and run each page found through Lighthouse.
 * **[lighthouse-lambda](https://github.com/joytocode/lighthouse-lambda)** - Run Lighthouse on AWS Lambda with prebuilt stable desktop Headless Chrome.


Test patch:
diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json
index 085c6bf90..0a93fa9f7 100644
--- a/lighthouse-core/test/results/sample_v2.json
+++ b/lighthouse-core/test/results/sample_v2.json
@@ -5,7 +5,7 @@
     "hostUserAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3358.0 Safari/537.36",
     "benchmarkIndex": 1000
   },
-  "lighthouseVersion": "3.1.0",
+  "lighthouseVersion": "3.1.1",
   "fetchTime": "2018-03-13T00:55:45.840Z",
   "requestedUrl": "http://localhost:10200/dobetterweb/dbw_tester.html",
   "finalUrl": "http://localhost:10200/dobetterweb/dbw_tester.html",
@@ -768,7 +768,7 @@
       "score": 1,
       "scoreDisplayMode": "numeric",
       "rawValue": 0,
-      "displayValue": "Potential savings of 0 ms",
+      "displayValue": "",
       "details": {
         "type": "opportunity",
         "headings": [],
@@ -783,7 +783,7 @@
       "score": 1,
       "scoreDisplayMode": "numeric",
       "rawValue": 0,
-      "displayValue": "Potential savings of 0 ms",
+      "displayValue": "",
       "details": {
         "type": "opportunity",
         "headings": [],
@@ -3595,26 +3595,6 @@
       "lighthouse-core/audits/uses-rel-preload.js | description": [
         "audits[uses-rel-preload].description"
       ],
-      "lighthouse-core/lib/i18n.js | displayValueMsSavings": [
-        {
-          "values": {
-            "wastedMs": 0
-          },
-          "path": "audits[uses-rel-preload].displayValue"
-        },
-        {
-          "values": {
-            "wastedMs": 0
-          },
-          "path": "audits[uses-rel-preconnect].displayValue"
-        },
-        {
-          "values": {
-            "wastedMs": 1129
-          },
-          "path": "audits[render-blocking-resources].displayValue"
-        }
-      ],
       "lighthouse-core/audits/uses-rel-preconnect.js | title": [
         "audits[uses-rel-preconnect].title"
       ],
@@ -3678,6 +3658,14 @@
       "lighthouse-core/audits/byte-efficiency/render-blocking-resources.js | description": [
         "audits[render-blocking-resources].description"
       ],
+      "lighthouse-core/lib/i18n.js | displayValueMsSavings": [
+        {
+          "values": {
+            "wastedMs": 1129
+          },
+          "path": "audits[render-blocking-resources].displayValue"
+        }
+      ],
       "lighthouse-core/lib/i18n.js | columnWastedMs": [
         "audits[render-blocking-resources].details.headings[2].label"
       ],