devtools: enable sticky header, top bar, and report ui features #9023

connorjclark · 2019-05-22T05:04:19Z

LH changes for #9019.

lighthouse-core/report/html/renderer/report-ui-features.js

connorjclark · 2019-05-25T02:19:30Z

We're bringing report ui features (mostly) to DevTools. Plus, the sticky heady and the topbar.

connorjclark · 2019-05-25T02:46:13Z

Small issue: when you resize the docked DevTools, the highlighter becomes off:

Normally, resizing is handled easily w/ a resize event handler. But how can listen to the DevTools dock resizing?

connorjclark · 2019-05-25T02:56:09Z

fireworks:

patrickhulce

exciting times ahead for devtools :D

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

patrickhulce · 2019-05-25T04:13:06Z

lighthouse-core/report/html/renderer/report-ui-features.js

+
+    if (this._dom.isDevTools()) {
+      // Not ready for DevTools.
+      // Saving as HTML save the entire AuditsPanel.


hm it's not super clear what's being enabled in DT and what's not since the comments sorta line up with what's in the else.

not sure how to fix this maybe it's just moving to have a comment for each line explaining why it can't be enabled and/or when it might be moved out of the else?

sure - ...does not work. is not a good comment :)

lighthouse-core/report/html/renderer/report-ui-features.js

patrickhulce · 2019-05-25T04:16:38Z

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

@@ -260,6 +261,10 @@
  --audit-group-indent: 16px;
  --audit-indent: 16px;
  --expandable-indent: 16px;
+  --gauge-circle-size-big: 96px;
+  --gauge-circle-size: 72px;
+  /* Consider offset of the DevTools UI. */


these feels slightly magical is there anyway we can link to how to compute this number in the future? :)

So I actually just increased the offset value until the topbar was 100% visible and there was no gap between the DevTools UI + the topbar.

Think I should look into computing the offset at runtime, and somehow injecting the CSS variable?

oh haha, nah maybe just make a note of "this is the height of the devtools UI as eyeballed by a developer in styles panel" or something? 😆

patrickhulce

LGTM

brendankenny · 2019-05-28T18:32:19Z

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

-    }
-
-    if (scoreHeader && !this._dom.isDevTools()) {
+    if (scoreHeader) {


can we combine these if (scoreHeader) blocks now?

connorjclark · 2019-05-30T00:54:25Z

lighthouse-core/report/html/renderer/report-ui-features.js

+      // We can't rely on listening to the window resize event for DevTools, so we first
+      // attempt the new ResizeObserver web platform feature. It has poor cross browser
+      // support, so we should check that it's supported. However, there are some performance
+      // issues with using window.ResizeObserver - it updates much more often than the 'resize'


When using the ResizeObserver in the deploy report (It's disabled outside devtools but if you revert that bit), and add some logging to the callback:

// Show sticky header when the score scale begins to go underneath the topbar. const topbarBottom = this.topbarEl.getBoundingClientRect().bottom; const scoreScaleTop = this.scoreScaleEl.getBoundingClientRect().top; const showStickyHeader = topbarBottom >= scoreScaleTop; // add this line console.log(topbarBottom, scoreScaleTop, showStickyHeader);

You see that the position of our topbar is jumping all over the place!

So we should just disable it outside DevTools for now, luckily it works there perfectly.

brendankenny

last things, otherwise LGTM

brendankenny · 2019-05-30T00:34:11Z

lighthouse-core/report/html/templates.html

+    }
+
+    /* Disable the gauge arc animation for the sticky header, so toggling display: none
+       does not play the animation. */


evidence number 25 that these different uses of the score gauges should share less than they do :)

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

brendankenny · 2019-05-30T01:17:23Z

lighthouse-core/report/html/renderer/report-ui-features.js

+      // support, so we should check that it's supported. However, there are some performance
+      // issues with using window.ResizeObserver - it updates much more often than the 'resize'
+      // event fires, and the experience is choppy in LH. For now, limit use to just DevTools,
+      // which doesn't seem affected for some reason.


since in theory ResizeObserver is more efficient and the future path to monitoring resizes, what about
// Use ResizeObserver where available. TODO: there is an issue with incorrect position numbers and, as a result, performance issues due to layout thrashing. See https://github.com/GoogleChrome/lighthouse/pull/9023/files#r288822287 for details.

are you also suggesting removing the devtools check?

are you also suggesting removing the devtools check?

whoops, no, good point. I like your version

lighthouse-core/report/html/renderer/report-ui-features.js

brendankenny · 2019-05-30T06:35:54Z

there's a type check error...the type definition isn't working? It should be declared on window...

connorjclark · 2019-05-30T06:51:06Z

tsconfig for viewer was wrong. Compiler option typeRoots don't resolve to the nearest node_modules as one would expect.

connorjclark · 2019-05-30T07:19:36Z

friggen flakes...

vercel bot deployed to staging May 22, 2019 05:11 View deployment

connorjclark commented May 22, 2019

View reviewed changes

lighthouse-core/report/html/renderer/report-ui-features.js Show resolved Hide resolved

vercel bot deployed to staging May 25, 2019 02:13 View deployment

vercel bot deployed to staging May 25, 2019 02:18 View deployment

vercel bot deployed to staging May 25, 2019 02:43 View deployment

connorjclark marked this pull request as ready for review May 25, 2019 02:46

connorjclark requested a review from paulirish as a code owner May 25, 2019 02:46

vercel bot deployed to staging May 25, 2019 02:48 View deployment

vercel bot deployed to staging May 25, 2019 02:57 View deployment

connorjclark changed the title ~~report(redesign): update styles for devtools~~ devtools: enable sticky header, top bar, and report ui features May 25, 2019

patrickhulce reviewed May 25, 2019

View reviewed changes

connorjclark added the 5.1 label May 28, 2019

vercel bot deployed to staging May 28, 2019 16:49 View deployment

vercel bot deployed to staging May 28, 2019 16:54 View deployment

vercel bot deployed to staging May 28, 2019 17:37 View deployment

patrickhulce approved these changes May 28, 2019

View reviewed changes

vercel bot deployed to staging May 28, 2019 18:12 View deployment

vercel bot deployed to staging May 28, 2019 18:15 View deployment

connorjclark force-pushed the rd-devtools branch from 6121826 to 18662ee Compare May 28, 2019 18:18

vercel bot deployed to staging May 28, 2019 18:18 View deployment

vercel bot deployed to staging May 28, 2019 18:36 View deployment

vercel bot deployed to staging May 28, 2019 18:40 View deployment

brendankenny reviewed May 28, 2019

View reviewed changes

vercel bot deployed to staging May 28, 2019 18:44 View deployment

connorjclark added 3 commits May 28, 2019 11:54

report(redesign): update styles for devtools

41aa187

sc

000f841

report ui features in devtools. add sticky header and topbar

c0bf21d

types

8ded84e

vercel bot deployed to staging May 30, 2019 00:18 View deployment

bump

6dabf64

vercel bot deployed to staging May 30, 2019 00:20 View deployment

limit resize observer to devtools

df79fcb

vercel bot deployed to staging May 30, 2019 00:47 View deployment

connorjclark commented May 30, 2019

View reviewed changes

brendankenny approved these changes May 30, 2019

View reviewed changes

create highlight div in report ui feats

427baf5

vercel bot deployed to staging May 30, 2019 01:30 View deployment

comment

d383120

vercel bot deployed to staging May 30, 2019 01:32 View deployment

pr

b6879b1

vercel bot deployed to staging May 30, 2019 01:34 View deployment

lint

26f2864

vercel bot deployed to staging May 30, 2019 01:43 View deployment

fix config for viewer tsconfig

018a64b

vercel bot deployed to staging May 30, 2019 06:50 View deployment

Merge remote-tracking branch 'origin/master' into rd-devtools

2f3da14

vercel bot deployed to staging May 30, 2019 06:57 View deployment

connorjclark closed this May 30, 2019

connorjclark reopened this May 30, 2019

connorjclark merged commit a11dec4 into master May 30, 2019

brendankenny deleted the rd-devtools branch May 30, 2019 07:58

brendankenny mentioned this pull request Jun 6, 2019

Style issues with PWA header gauge #9139

Closed

connorjclark mentioned this pull request Nov 11, 2019

report: fix flicker in normal case report #9955

Merged

snyk-bot mentioned this pull request Mar 21, 2020

[Snyk] Upgrade lighthouse from 5.1.0 to 5.6.0 godaddy/lighthouse4u#13

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

devtools: enable sticky header, top bar, and report ui features #9023

devtools: enable sticky header, top bar, and report ui features #9023

connorjclark commented May 22, 2019 •

edited

Loading

connorjclark commented May 25, 2019

connorjclark commented May 25, 2019

connorjclark commented May 25, 2019

patrickhulce left a comment

patrickhulce May 25, 2019

connorjclark May 28, 2019

patrickhulce May 25, 2019

connorjclark May 25, 2019

patrickhulce May 28, 2019

patrickhulce left a comment

brendankenny May 28, 2019

connorjclark May 28, 2019

connorjclark May 30, 2019 •

edited

Loading

connorjclark May 30, 2019

brendankenny left a comment

brendankenny May 30, 2019

brendankenny May 30, 2019

connorjclark May 30, 2019 •

edited

Loading

brendankenny May 30, 2019

brendankenny commented May 30, 2019

connorjclark commented May 30, 2019

connorjclark commented May 30, 2019

devtools: enable sticky header, top bar, and report ui features #9023

devtools: enable sticky header, top bar, and report ui features #9023

Conversation

connorjclark commented May 22, 2019 • edited Loading

connorjclark commented May 25, 2019

connorjclark commented May 25, 2019

connorjclark commented May 25, 2019

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

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

connorjclark May 30, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

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

connorjclark May 30, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brendankenny commented May 30, 2019

connorjclark commented May 30, 2019

connorjclark commented May 30, 2019

connorjclark commented May 22, 2019 •

edited

Loading

connorjclark May 30, 2019 •

edited

Loading

connorjclark May 30, 2019 •

edited

Loading