Open aggregations when score < 1. Use orange for average rating

GoogleChrome · Feb 25, 2017 · 6b376a5 · 6b376a5
1 parent d11a5e0
commit 6b376a5
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 8 deletions.
diff --git a/lighthouse-core/report/handlebar-helpers.js b/lighthouse-core/report/handlebar-helpers.js
@@ -63,9 +63,9 @@ const handlebarHelpers = {
     return calculateRating(totalScore);
   },
 
-  // Converts an aggregation's score to a pass/fail rating.
+  // Converts an aggregation's score to a rating that can be used for styling.
   getAggregationScoreRating: score => {
-    return score === 1 ? 'good' : 'poor';
+    return calculateRating(Math.round(score * 100));
   },
 
   // Converts a value to a rating string, which can be used inside the report

diff --git a/lighthouse-core/report/styles/report.css b/lighthouse-core/report/styles/report.css
@@ -795,7 +795,7 @@ summary {
   align-items: flex-end;
 }
 
-.subitem-result__good, .subitem-result__poor, .subitem-result__unknown {
+.subitem-result__good, .subitem-result__average, .subitem-result__poor, .subitem-result__unknown {
   position: relative;
   display: block;
   overflow: hidden;
@@ -807,7 +807,7 @@ summary {
   background-color: #000;
 }
 
-.subitem-result__good::after, .subitem-result__poor::after, .subitem-result__unknown::after {
+.subitem-result__good::after, .subitem-result__average:after, .subitem-result__poor::after, .subitem-result__unknown::after {
   content: '';
   position: absolute;
   left: 0;
@@ -821,6 +821,8 @@ summary {
   background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>good</title><path d="M9.17 2.33L4.5 7 2.83 5.33 1.5 6.66l3 3 6-6z" fill="white" fill-rule="evenodd"/></svg>') no-repeat 50% 50%;
   background-size: 12px;
 }
+
+.subitem-result__average:after,
 .subitem-result__poor::after {
   background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>poor</title><path d="M8.33 2.33l1.33 1.33-2.335 2.335L9.66 8.33 8.33 9.66 5.995 7.325 3.66 9.66 2.33 8.33l2.335-2.335L2.33 3.66l1.33-1.33 2.335 2.335z" fill="white"/></svg>') no-repeat 50% 50%;
   background-size: 12px;

diff --git a/lighthouse-core/report/templates/report-template.html b/lighthouse-core/report/templates/report-template.html
@@ -136,10 +136,11 @@ <h2>{{ this.name }}</h2>
 
         <div class="js-report-by-user-feature">
           {{#each this.score as |aggregation|}}
-            <section class="aggregation" data-rating="{{ getAggregationScoreRating aggregation.overall }}">
+            <section class="aggregation" data-rating="{{ getAggregationScoreRating aggregation.overall }}"
+                     data-score="{{aggregation.overall}}">
 
             {{#if aggregation.name }}
-            <details class="aggregation__details" {{#ifEq (getAggregationScoreRating aggregation.overall) "poor"}}open{{/ifEq}}>
+            <details class="aggregation__details" {{#ifNotEq aggregation.overall 1}}open{{/ifNotEq}}>
               <summary>
                 <header class="aggregation__header">
                   <span class="aggregation__header__score score-{{ getAggregationScoreRating aggregation.overall }}-bg subitem-result__{{ getAggregationScoreRating aggregation.overall }}"></span>

diff --git a/lighthouse-core/test/report/handlebar-helpers-test.js b/lighthouse-core/test/report/handlebar-helpers-test.js
@@ -46,8 +46,8 @@ describe('Handlebar helpers', () => {
   it('`getAggregationScoreRating` calculates rating', () => {
     assert.equal(handlebarHelpers.getAggregationScoreRating(undefined), 'poor');
     assert.equal(handlebarHelpers.getAggregationScoreRating(1), 'good');
-    assert.equal(handlebarHelpers.getAggregationScoreRating(0.95), 'poor');
-    assert.equal(handlebarHelpers.getAggregationScoreRating(0.50), 'poor');
+    assert.equal(handlebarHelpers.getAggregationScoreRating(0.95), 'good');
+    assert.equal(handlebarHelpers.getAggregationScoreRating(0.50), 'average');
     assert.equal(handlebarHelpers.getAggregationScoreRating(0.10), 'poor');
   });
 });