report: sticky topbar #8300

connorjclark · 2019-04-16T00:04:03Z

This is the skinny sticky header, containing the logo / URL.

I also put the export button in the top right. We aren't doing the sidebar menu yet, so it seems fine for that button to live there for now.

Removed the animation code for the previous header.

I disabled fireworks for now.

Help: Why won't the SVG logo show?

exterkamp

The design doesn't have the top left URL be a link, but I like it as a link, but maybe keep it black instead of "url blue" to be more subtle?

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

Co-Authored-By: Hoten <cjamcl@gmail.com>

googlebot · 2019-04-16T02:01:47Z

We found a Contributor License Agreement for you (the sender of this pull request), but were unable to find agreements for all the commit author(s) or Co-authors. If you authored these, maybe you used a different email address in the git commits than was used to sign the CLA (login here to double check)? If these were authored by someone else, then they will need to sign a CLA as well, and confirm that they're okay with these being contributed to Google.
In order to pass this check, please resolve this problem and have the pull request author add another comment and the bot will run again. If the bot doesn't comment, it means it doesn't think anything has changed.

ℹ️ Googlers: Go here for more info.

connorjclark · 2019-04-16T02:55:35Z

The design doesn't have the top left URL be a link, but I like it as a link, but maybe keep it black instead of "url blue" to be more subtle?

done

patrickhulce · 2019-04-16T03:55:44Z

wow this is really coming together! 😍

only the share button padding jumped out at me bumping height a tad on button and shrinking the width a touch might make it feel a bit better? shrinking the icon a touch is also on the table I suppose

connorjclark · 2019-04-16T04:44:03Z

better?

exterkamp · 2019-04-16T06:00:04Z

better?

I honestly can't get it to look 100%, it's either 4px or 5px from top? But it doesn't look right on either way. Since this is temporary, or is supposed to be, imo it looks good enough. If you really want to try to make it perfect I think it is 5px from top, so you could match that with right-padding. e.g.

patrickhulce · 2019-04-16T14:59:02Z

better?

much! :D

paulirish

some nits but this can land.

paulirish · 2019-04-17T05:05:19Z

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

  --topbar-padding: 0 8px;

+  --logo-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="192px" height="192px" viewBox="0 0 192 192" version="1.1"><g id="symbol_1_black" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Group"><g><rect id="Rectangle" x="0" y="0" width="192" height="192"/><path d="M67.7054588,179.352453 L70.3079591,158.532451 L119.643145,142.141282 L124.294541,179.352453 C115.41478,182.365787 105.898235,184 96,184 C86.1017646,184 76.5852201,182.365787 67.7054588,179.352453 L67.7054588,179.352453 Z M52.439998,172.48 C25.8942826,157.328 8,128.753717 8,96 C8,47.398942 47.398942,8 96,8 C144.601058,8 184,47.398942 184,96 C184,128.753717 166.105717,157.328 139.560002,172.48 L130,96 L136,96 L136,80 L128,80 L128,48 L96,28 L64,48 L64,80 L56,80 L56,96 L62,96 L52.4399988,172.48001 L52.439998,172.48 Z M113.875485,96 L116.756843,119.050869 L73.439198,133.48254 L78.1245155,96 L113.875485,96 Z M80,80 L80,56.8679623 L96,46.8679623 L112,56.8679623 L112,80 L80,80 Z" id="Shape" fill="%23000000"/></g></g></g></svg>');


can you run this through svgo? I think it'll knock some precision off those points.

and def the id="symbol_1_black" isn't used.

neat tool

544 bytes → 360 bytes 66.18%

paulirish · 2019-04-17T05:06:00Z

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

@@ -143,6 +149,7 @@
    --circle-size-big: 96px;
    --circle-size: 72px;
    --header-padding: 16px 0 16px 0;
+    --icon-size: 20px;


--topbar-icon-size is a bit more clear.

paulirish · 2019-04-17T05:07:16Z

lighthouse-core/report/html/templates.html

-      margin-right: 2px;
+
+    .lh-topbar__url {
+      margin-left: 8px;


seems like you could reuse --topbar-padding here.

report: sticky topbar (#8185)

ef4d249

connorjclark requested a review from paulirish as a code owner April 16, 2019 00:04

fix margin and height

d9f53b6

vercel bot deployed to staging April 16, 2019 00:08 View deployment

exterkamp reviewed Apr 16, 2019

View reviewed changes

lighthouse-core/report/html/report-styles.css Outdated Show resolved Hide resolved

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

d691d68

Co-Authored-By: Hoten <cjamcl@gmail.com>

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

style link

b9f2bb5

vercel bot deployed to staging April 16, 2019 02:55 View deployment

tweak export button

8b2a18b

vercel bot deployed to staging April 16, 2019 04:43 View deployment

exterkamp added the 5.0 label Apr 16, 2019

paulirish approved these changes Apr 17, 2019

View reviewed changes

pr changes

d648de3

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

Merge remote-tracking branch 'origin/master' into report-ui-topbar

7cabd48

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

paulirish merged commit e40e538 into master Apr 17, 2019

paulirish deleted the report-ui-topbar branch April 17, 2019 21:53

connorjclark mentioned this pull request Apr 18, 2019

Report redesign for v5 #8185

Closed

55 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

report: sticky topbar #8300

report: sticky topbar #8300

connorjclark commented Apr 16, 2019

exterkamp left a comment

googlebot commented Apr 16, 2019

connorjclark commented Apr 16, 2019

patrickhulce commented Apr 16, 2019

connorjclark commented Apr 16, 2019

exterkamp commented Apr 16, 2019

patrickhulce commented Apr 16, 2019

paulirish left a comment

paulirish Apr 17, 2019

connorjclark Apr 17, 2019

paulirish Apr 17, 2019

connorjclark Apr 17, 2019

paulirish Apr 17, 2019

connorjclark Apr 17, 2019

		--topbar-padding: 0 8px;

		--logo-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="192px" height="192px" viewBox="0 0 192 192" version="1.1"><g id="symbol_1_black" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Group"><g><rect id="Rectangle" x="0" y="0" width="192" height="192"/><path d="M67.7054588,179.352453 L70.3079591,158.532451 L119.643145,142.141282 L124.294541,179.352453 C115.41478,182.365787 105.898235,184 96,184 C86.1017646,184 76.5852201,182.365787 67.7054588,179.352453 L67.7054588,179.352453 Z M52.439998,172.48 C25.8942826,157.328 8,128.753717 8,96 C8,47.398942 47.398942,8 96,8 C144.601058,8 184,47.398942 184,96 C184,128.753717 166.105717,157.328 139.560002,172.48 L130,96 L136,96 L136,80 L128,80 L128,48 L96,28 L64,48 L64,80 L56,80 L56,96 L62,96 L52.4399988,172.48001 L52.439998,172.48 Z M113.875485,96 L116.756843,119.050869 L73.439198,133.48254 L78.1245155,96 L113.875485,96 Z M80,80 L80,56.8679623 L96,46.8679623 L112,56.8679623 L112,80 L80,80 Z" id="Shape" fill="%23000000"/></g></g></g></svg>');

report: sticky topbar #8300

report: sticky topbar #8300

Conversation

connorjclark commented Apr 16, 2019

exterkamp left a comment

Choose a reason for hiding this comment

googlebot commented Apr 16, 2019

connorjclark commented Apr 16, 2019

patrickhulce commented Apr 16, 2019

connorjclark commented Apr 16, 2019

exterkamp commented Apr 16, 2019

patrickhulce commented Apr 16, 2019

paulirish left a comment

Choose a reason for hiding this comment

paulirish Apr 17, 2019

Choose a reason for hiding this comment

connorjclark Apr 17, 2019

Choose a reason for hiding this comment

paulirish Apr 17, 2019

Choose a reason for hiding this comment

connorjclark Apr 17, 2019

Choose a reason for hiding this comment

paulirish Apr 17, 2019

Choose a reason for hiding this comment

connorjclark Apr 17, 2019

Choose a reason for hiding this comment