report: new score display, metrics display, rich tooltips #5009

paulirish · 2018-04-21T19:31:46Z

Score display

New gauges, done in SVG instead of crazytime css. Added in the score scale.

Oh, they animate, too. :)

(easy to remove if everyone h8s it.)

Before:

After:

And check out the difference in CC layers:

Metrics display

Not 100% finished but getting there.

I've added in a rich tooltip system to support this and other things.. here's how it works:

<div class="tooltip-boundary">  <!-- any hover within this element will show the tooltip -->
	<!-- stuff that you see.. -->
    <div class="tooltip"> ... </div> <!-- hidden by default. can contain w/e -->
</div>

#ref #5008

vinamratasingal-zz · 2018-04-23T09:05:19Z

This looks AMAZING! CC: @hwikyounglee

I especially love the initial animation, makes the UI look #snazzy. Thanks @paulirish !

patrickhulce · 2018-04-23T17:07:04Z

lighthouse-core/report/v2/renderer/category-renderer.js

    const gauge = this.dom.find('.lh-gauge', tmpl);
-    gauge.setAttribute('data-progress', scoreOutOf100); // .dataset not supported in jsdom.
-    gauge.classList.add(`lh-gauge--${Util.calculateRating(category.score)}`);
+    wrapper.classList.add(`lh-gauge__wrapper--${Util.calculateRating(category.score)}`);


nit let's move this up to where we add the href?

patrickhulce · 2018-04-23T17:09:32Z

lighthouse-core/report/v2/renderer/performance-category-renderer.js

+    const otherMetrics = metricAudits.filter(a => a.weight < 3);
+
+    const metricsBoxesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-metrics-container');
+    const keyBox = this.dom.createChildOf(metricsBoxesEl, 'div', 'lh-metrics lh-metrics__key');


key is a bit confusing on it's own, but headline and primary aren't exactly much clearer 🤔 IDK

maybe just adding in Metrics is enough? like keyMetricsBox?

patrickhulce · 2018-04-23T17:10:17Z

lighthouse-core/report/v2/report-styles.css

+
+.lh-metrics {
+  flex: 1;
+  margin-right: 20px;


this is to separate the boxes, or just right padding?

yeah its just this gap in the middle.

gotcha, should we call this lh-metrics-column or something then?

good call. 👍

patrickhulce · 2018-04-23T17:11:34Z

lighthouse-core/report/v2/report-styles.css

-.lh-timeline-metric--fail .lh-timeline-metric__value {
-  color: var(--fail-color);
+.lh-perf-metric--pass .lh-perf-metric__value span::after {
+  background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2"><circle class="path circle" fill="#73AF55" cx="65.1" cy="65.1" r="62.1"/><polyline class="path check" fill="none" stroke="white" stroke-width="16" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/></svg>') no-repeat 50% 50%;


oooh this is the circle with a checkmark? could add a quick comment what shape each of these SVGs are? :) i.e. /* circle with checkmark */
/* triangle with exclamation point */..

great idea. will do when i update to hwi's new assets.

patrickhulce · 2018-04-23T17:13:16Z

lighthouse-core/report/v2/report-styles.css

+  position: absolute;
+  right: var(--section-padding);
+  bottom: var(--section-padding);
+  color: #757575;


stick this in var or reuse?

brendankenny · 2018-04-23T19:48:25Z

lighthouse-core/report/v2/renderer/performance-category-renderer.js

+    const otherMetrics = metricAudits.filter(a => a.weight < 3);
+
+    const metricsBoxesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-metrics-container');
+    const keyBox = this.dom.createChildOf(metricsBoxesEl, 'div', 'lh-metrics lh-metrics__key');


maybe just adding in Metrics is enough? like keyMetricsBox?

brendankenny · 2018-04-23T19:49:57Z

lighthouse-core/report/v2/templates.html

-        <div class="lh-timeline-metric__description"><!-- fill me --></div>
-      </details>
-    </div>
+<template id="tmpl-lh-perf-metric">


update comment above?

brendankenny · 2018-04-23T19:50:44Z

lighthouse-core/test/results/sample_v2.json

@@ -5347,6 +5347,6 @@
    }
  },
  "timing": {
-    "total": 830
+    "total": 1142


no need to update

patrickhulce

I'm not 100% sure I'm going to grok the SVG animation stuff, but LGTM outside bit o' cleanup/pending comments on incoming icons :)

so slick! awesome teamwork @hwikyounglee @paulirish !

patrickhulce · 2018-04-23T22:10:30Z

lighthouse-core/report/v2/renderer/performance-category-renderer.js

+
+    const metricsBoxesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-metrics-container');
+    const metricsColumn1El = this.dom.createChildOf(metricsBoxesEl, 'div',
+        'lh-metrics-column lh-metrics-column__key');


nit: seems like this should be a modifier on column rather than a child :) lh-metrics-column--key

lol i have been mixing up elements and modifier syntax for a while now.

patrickhulce · 2018-04-23T22:16:23Z

lighthouse-core/report/v2/templates.html

+
+      /* Contain the layout style paint & layers during animation*/
+      contain: content;
+      will-change: opacity;


does the opacity change? seems like it's just stroke-dasharray

it doesn't. just abusing it for a layer promotion.

patrickhulce · 2018-04-23T22:17:01Z

lighthouse-core/report/v2/templates.html

-      border-radius: 50%;
+
+    .lh-gauge {
+        text-anchor: middle;


so. much. TIL.

does any text actually go into the SVG though? what are the percentage elements for?

this property was old. removed now.

paulirish · 2018-04-23T22:22:45Z

example pages:

http://ambiguous-river.surge.sh/cnn.html
http://ambiguous-river.surge.sh/tinyhouse.html
http://ambiguous-river.surge.sh/dbwtester.html
http://ambiguous-river.surge.sh/example.html

http://ambiguous-river.surge.sh/cnn.devtools.html
http://ambiguous-river.surge.sh/tinyhouse.devtools.html
http://ambiguous-river.surge.sh/dbwtester.devtools.html
http://ambiguous-river.surge.sh/example.devtools.html

…e#5009)

paulirish added 8 commits April 20, 2018 16:42

set pass/avg/fail colors. stronger score gauge width

5214079

simplify metrics display. no more sparkline.

e2e3042

icons next to metric value.

2ff4f0c

remove UI.fragment test.

3e09cfa

side by side metrics, basics

b0ac9e4

tooltips. yay.

7abe8af

gauges redone in svg

36c52c0

add score scale.

1470de4

paulirish requested review from patrickhulce and vinamratasingal-zz as code owners April 21, 2018 19:31

devtools-bot added the waiting4reviewer label Apr 21, 2018

update category-renderer-test

964657e

vinamratasingal-zz approved these changes Apr 23, 2018

View reviewed changes

patrickhulce reviewed Apr 23, 2018

View reviewed changes

paulirish added waiting4committer and removed waiting4reviewer labels Apr 23, 2018

brendankenny reviewed Apr 23, 2018

View reviewed changes

paulirish added 3 commits April 23, 2018 14:27

update to hwi's icons

43f8e3a

feedback.

f34530e

Merge branch 'master' into report

2b53f6d

devtools-bot added waiting4reviewer and removed waiting4committer labels Apr 23, 2018

Update report-styles.css

14470b6

paulirish force-pushed the report branch from 8d45c08 to 14470b6 Compare April 23, 2018 21:56

correct gauge progress math.

d1324c3

patrickhulce approved these changes Apr 23, 2018

View reviewed changes

patrickhulce mentioned this pull request Apr 23, 2018

report(util): fix formatDuration, add tests #5023

Merged

feedback

4b9037b

paulirish merged commit d18e977 into master Apr 24, 2018

paulirish deleted the report branch April 24, 2018 23:40

brendankenny mentioned this pull request Apr 25, 2018

tests(viewer): add pptr test for viewer #5025

Merged

paulirish removed the waiting4reviewer label Apr 30, 2018

kdzwinel pushed a commit to kdzwinel/lighthouse that referenced this pull request Aug 16, 2018

report: score gauges, metrics display, add rich tooltips (GoogleChrom…

6eda27b

…e#5009)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

report: new score display, metrics display, rich tooltips #5009

report: new score display, metrics display, rich tooltips #5009

paulirish commented Apr 21, 2018 •

edited

Loading

vinamratasingal-zz commented Apr 23, 2018

patrickhulce Apr 23, 2018

patrickhulce Apr 23, 2018

brendankenny Apr 23, 2018

patrickhulce Apr 23, 2018

paulirish Apr 23, 2018

patrickhulce Apr 23, 2018 •

edited

Loading

paulirish Apr 23, 2018

patrickhulce Apr 23, 2018

paulirish Apr 23, 2018

patrickhulce Apr 23, 2018

brendankenny Apr 23, 2018

brendankenny Apr 23, 2018

brendankenny Apr 23, 2018 •

edited

Loading

patrickhulce left a comment

patrickhulce Apr 23, 2018

paulirish Apr 24, 2018

patrickhulce Apr 23, 2018

paulirish Apr 24, 2018

patrickhulce Apr 23, 2018

paulirish Apr 24, 2018

paulirish commented Apr 23, 2018

report: new score display, metrics display, rich tooltips #5009

report: new score display, metrics display, rich tooltips #5009

Conversation

paulirish commented Apr 21, 2018 • edited Loading

Score display

Before:

After:

Metrics display

vinamratasingal-zz commented Apr 23, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

patrickhulce Apr 23, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brendankenny Apr 23, 2018 • edited Loading

Choose a reason for hiding this comment

patrickhulce left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

paulirish commented Apr 23, 2018

paulirish commented Apr 21, 2018 •

edited

Loading

patrickhulce Apr 23, 2018 •

edited

Loading

brendankenny Apr 23, 2018 •

edited

Loading