report(redesign): score icons, audit group headers, colors #8222

connorjclark · 2019-04-12T17:29:24Z

Design reference: https://yuinchien.github.io/sandbox/lighthouse/

Some questions that came up:

PWA badge icons (the ones in the audit group headers) - do we still want the grayed version when incomplete, and the new green versions when completed? Also, am missing the green icon for PWA Optimized
want to confirm that we are removing the clump icons (check mark/mangnifying glass/dash-in-circle)

Will fix tests after comments on design.

connorjclark · 2019-04-12T17:29:31Z

(just noticed I need to add back the description for clumps when expanded, ex: "Run these additional validators on your site to check additional SEO best practices.")

patrickhulce · 2019-04-12T18:25:59Z

looks good! haven't taken an deep look yet but the text color jumped out, is the split between icon and text colors for color contrast purposes in an upcoming PR?

brendankenny

last comments, otherwise LGTM

brendankenny · 2019-04-18T23:58:45Z

lighthouse-core/test/report/html/renderer/psi-test.js

+        const expectedDescription = Util.UIStrings.lsPerformanceCategoryDescription
+          // Replacing markdown because ".textContent" will be post-markdown.
+          .replace('[Lighthouse](https://developers.google.com/web/tools/lighthouse/)', 'Lighthouse');
+
        // Assume using default locale.


this comment should be above expectedDescription too

brendankenny · 2019-04-19T00:02:31Z

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


+    // Group header DOM roughly matches the clump header DOM, and that's OK.


should remove this comment. See reasoning in earlier thread, but, more importantly, this wouldn't be the place to put the comment anyways :)

This group header is using group class names, nothing weird about that or worth commenting on; it's the clump header using group class names that's the aberration.

brendankenny · 2019-04-19T00:04:07Z

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

@@ -113,11 +110,21 @@
  --score-title-line-height-big: 36px;
  --score-title-line-height: 26px;
  --section-padding: 40px;
+  --shape-margin: 7px 12px 0 4px;
+  --shape-size: 12px;


this would probably be a little more helpful with an additional qualifier in the variable name. Which shape? (same with circle and square?)

it's used for both metric icons and audit score icons so I went with --icon-shape-size...

it's used for both metric icons and audit score icons so I went with --icon-shape-size...

"icon" and "shape" mean basically the same thing :)

what about --score-shape-size, etc?

codecov · 2019-04-19T01:00:13Z

Codecov Report

Merging #8222 into master will decrease coverage by 0.02%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #8222      +/-   ##
==========================================
- Coverage   90.82%   90.79%   -0.03%     
==========================================
  Files         283      283              
  Lines        9534     9529       -5     
==========================================
- Hits         8659     8652       -7     
- Misses        875      877       +2

Flag	Coverage Δ
#smoke	`83.63% <ø> (-0.02%)`	⬇️
#unit	`88.96% <100%> (-0.02%)`	⬇️

Impacted Files	Coverage Δ
...use-core/report/html/renderer/category-renderer.js	`93.92% <100%> (-0.14%)`	⬇️
...ort/html/renderer/performance-category-renderer.js	`93.45% <100%> (-0.07%)`	⬇️
lighthouse-core/audits/user-timings.js	`96% <0%> (-4%)`	⬇️
lighthouse-core/gather/driver.js	`92.84% <0%> (-0.21%)`	⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f33d559...357292f. Read the comment docs.

codecov · 2019-04-19T01:00:15Z

Codecov Report

Merging #8222 into master will decrease coverage by 0.02%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #8222      +/-   ##
==========================================
- Coverage   90.82%   90.79%   -0.03%     
==========================================
  Files         283      283              
  Lines        9534     9529       -5     
==========================================
- Hits         8659     8652       -7     
- Misses        875      877       +2

Flag	Coverage Δ
#smoke	`83.63% <ø> (-0.02%)`	⬇️
#unit	`88.96% <100%> (-0.02%)`	⬇️

Impacted Files	Coverage Δ
...use-core/report/html/renderer/category-renderer.js	`93.92% <100%> (-0.14%)`	⬇️
...ort/html/renderer/performance-category-renderer.js	`93.45% <100%> (-0.07%)`	⬇️
lighthouse-core/audits/user-timings.js	`96% <0%> (-4%)`	⬇️
lighthouse-core/gather/driver.js	`92.84% <0%> (-0.21%)`	⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f33d559...357292f. Read the comment docs.

codecov · 2019-04-19T01:00:17Z

Codecov Report

Merging #8222 into master will decrease coverage by 0.02%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #8222      +/-   ##
==========================================
- Coverage   90.82%   90.79%   -0.03%     
==========================================
  Files         283      283              
  Lines        9534     9529       -5     
==========================================
- Hits         8659     8652       -7     
- Misses        875      877       +2

Flag	Coverage Δ
#smoke	`83.63% <ø> (-0.02%)`	⬇️
#unit	`88.96% <100%> (-0.02%)`	⬇️

Impacted Files	Coverage Δ
...use-core/report/html/renderer/category-renderer.js	`93.92% <100%> (-0.14%)`	⬇️
...ort/html/renderer/performance-category-renderer.js	`93.45% <100%> (-0.07%)`	⬇️
lighthouse-core/audits/user-timings.js	`96% <0%> (-4%)`	⬇️
lighthouse-core/gather/driver.js	`92.84% <0%> (-0.21%)`	⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f33d559...357292f. Read the comment docs.

codecov · 2019-04-19T01:00:17Z

Codecov Report

Merging #8222 into master will decrease coverage by 0.02%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #8222      +/-   ##
==========================================
- Coverage   90.82%   90.79%   -0.03%     
==========================================
  Files         283      283              
  Lines        9534     9529       -5     
==========================================
- Hits         8659     8652       -7     
- Misses        875      877       +2

Flag	Coverage Δ
#smoke	`83.63% <ø> (-0.02%)`	⬇️
#unit	`88.96% <100%> (-0.02%)`	⬇️

Impacted Files	Coverage Δ
...use-core/report/html/renderer/category-renderer.js	`93.92% <100%> (-0.14%)`	⬇️
...ort/html/renderer/performance-category-renderer.js	`93.45% <100%> (-0.07%)`	⬇️
lighthouse-core/audits/user-timings.js	`96% <0%> (-4%)`	⬇️
lighthouse-core/gather/driver.js	`92.84% <0%> (-0.21%)`	⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f33d559...6b563f5. Read the comment docs.

codecov · 2019-04-19T01:02:30Z

Codecov Report

Merging #8222 into master will decrease coverage by 0.02%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #8222      +/-   ##
==========================================
- Coverage   90.82%   90.79%   -0.03%     
==========================================
  Files         283      283              
  Lines        9534     9529       -5     
==========================================
- Hits         8659     8652       -7     
- Misses        875      877       +2

Flag	Coverage Δ
#smoke	`83.63% <ø> (-0.02%)`	⬇️
#unit	`88.96% <100%> (-0.02%)`	⬇️

Impacted Files	Coverage Δ
...use-core/report/html/renderer/category-renderer.js	`93.92% <100%> (-0.14%)`	⬇️
...ort/html/renderer/performance-category-renderer.js	`93.45% <100%> (-0.07%)`	⬇️
lighthouse-core/audits/user-timings.js	`96% <0%> (-4%)`	⬇️
lighthouse-core/gather/driver.js	`92.84% <0%> (-0.21%)`	⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f33d559...6b563f5. Read the comment docs.

connorjclark · 2019-04-19T20:34:52Z

Let's defer the RTL to a follow up PR. Everything else look swell?

brendankenny · 2019-04-19T20:55:39Z

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

@@ -152,6 +160,7 @@
    --score-title-line-height-big: 26px;
    --score-title-line-height: 20px;
    --section-padding: 24px;
+    --shape-margin: 5px 12px 0 2px;


--score-shape-margin here too?

…ults

connorjclark and others added 24 commits April 9, 2019 17:46

renderer: update gauges

c00d6f1

unsticky for now

3b42a26

score scale

7dd6eb4

tweak score scale

75881d3

tweak gauge outline

80579e9

font size and line height for doc

459afd2

narrow header width

fad00c9

add wrapper to category so that line sep spans width of page

1d9d2ac

better cat wrapper. meow

0fb2be2

fix paddinng in header

86fbabf

Section header text

6db4bee

section header margin

9e68ea5

make score scale round

1846132

fix gauge width

743ed49

fix gauge size and arc

b3da26b

Merge branch 'master' into report-ui-gauges

6ce6bcf

first pass

3a037c3

metric rows

a952a09

slightly better metric/audit coloring

acb2db4

orange

d4137ba

use more new colors

91702bf

add score icon for opps

23f30a1

manual and na

0a8b6ea

remove some unused vars

5cb289d

connorjclark requested review from brendankenny, exterkamp and paulirish as code owners April 12, 2019 17:29

connorjclark changed the base branch from master to report-ui-gauges April 12, 2019 17:29

triangle

0dfe4c3

vercel bot deployed to staging April 18, 2019 17:30 View deployment

--color-(average, pass, fail)

d9203cc

vercel bot deployed to staging April 18, 2019 18:34 View deployment

brendankenny approved these changes Apr 19, 2019

View reviewed changes

pr changes

357292f

vercel bot deployed to staging April 19, 2019 00:59 View deployment

gauge circle size

6b563f5

vercel bot deployed to staging April 19, 2019 01:02 View deployment

connorjclark mentioned this pull request Apr 19, 2019

report(redesign): dark theme #8425

Merged

brendankenny reviewed Apr 19, 2019

View reviewed changes

--icon-shape-size

a171abe

vercel bot deployed to staging April 19, 2019 21:50 View deployment

--score-shape-margin

dbf1a72

vercel bot deployed to staging April 19, 2019 21:53 View deployment

dedupe some -big stuff

c35403a

vercel bot deployed to staging April 19, 2019 22:08 View deployment

connorjclark mentioned this pull request Apr 19, 2019

report: plugin badge for plugin score gauges #8307

Merged

Merge remote-tracking branch 'origin/master' into report-ui-audit-res…

769900a

…ults

vercel bot deployed to staging April 19, 2019 23:17 View deployment

brendankenny merged commit 85be5c6 into master Apr 19, 2019

brendankenny deleted the report-ui-audit-results branch April 19, 2019 23:42

This was referenced Apr 22, 2019

Report redesign for v5 #8185

Closed

report(redesign): pwa icons #8532

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

report(redesign): score icons, audit group headers, colors #8222

report(redesign): score icons, audit group headers, colors #8222

connorjclark commented Apr 12, 2019 •

edited

Loading

connorjclark commented Apr 12, 2019

patrickhulce commented Apr 12, 2019

brendankenny left a comment

brendankenny Apr 18, 2019

connorjclark Apr 19, 2019

brendankenny Apr 19, 2019

connorjclark Apr 19, 2019

brendankenny Apr 19, 2019

connorjclark Apr 19, 2019

brendankenny Apr 19, 2019

codecov bot commented Apr 19, 2019 •

edited

Loading

codecov bot commented Apr 19, 2019

codecov bot commented Apr 19, 2019

codecov bot commented Apr 19, 2019 •

edited

Loading

codecov bot commented Apr 19, 2019

connorjclark commented Apr 19, 2019

brendankenny Apr 19, 2019


		// Group header DOM roughly matches the clump header DOM, and that's OK.

report(redesign): score icons, audit group headers, colors #8222

report(redesign): score icons, audit group headers, colors #8222

Conversation

connorjclark commented Apr 12, 2019 • edited Loading

connorjclark commented Apr 12, 2019

patrickhulce commented Apr 12, 2019

brendankenny 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

Choose a reason for hiding this comment

codecov bot commented Apr 19, 2019 • edited Loading

Codecov Report

codecov bot commented Apr 19, 2019

Codecov Report

codecov bot commented Apr 19, 2019

Codecov Report

codecov bot commented Apr 19, 2019 • edited Loading

Codecov Report

codecov bot commented Apr 19, 2019

Codecov Report

connorjclark commented Apr 19, 2019

Choose a reason for hiding this comment

connorjclark commented Apr 12, 2019 •

edited

Loading

codecov bot commented Apr 19, 2019 •

edited

Loading

codecov bot commented Apr 19, 2019 •

edited

Loading