report: rework the DOM of audits #5045
Conversation
paulirish
requested review from
patrickhulce and
vinamratasingal-zz
as code owners
| .lh-score__value { | ||
| flex: none; | ||
| float: right; |
There was a problem hiding this comment.
shall we take bets on how quickly this converts back to flexbox/grid? 😆
| <span class="lh-score__title"><!-- fill me --></span> | ||
| <!-- Lighthouse audit --> | ||
| <template id="tmpl-lh-audit"> | ||
| <div class="lh-audit"> |
There was a problem hiding this comment.
awesome, I always thought score was weird 👍
| @@ -94,7 +94,7 @@ class ConsistentlyInteractive extends MetricArtifact { | |||
| } | |||
|
|
|||
| /** | |||
| * @param {Map<Node, LH.Gatherer.Simulation.NodeTiming>} nodeTimings | |||
There was a problem hiding this comment.
any chance you can rebase? :)
There was a problem hiding this comment.
oh, jk, this is additional updates?
| */ | ||
| renderAudit(audit) { | ||
| const element = this.dom.createElement('div', 'lh-audit'); | ||
| element.appendChild(this._renderAuditScore(audit)); |
| @@ -106,7 +106,7 @@ describe('Lighthouse chrome extension', function() { | |||
|
|
|||
| const selectors = { | |||
| audits: '.lh-audit,.lh-perf-metric,.lh-perf-hint', | |||
| titles: '.lh-score__title, .lh-perf-hint__title, .lh-perf-metric__title', | |||
There was a problem hiding this comment.
I believe you'll have to update viewer test too?
There was a problem hiding this comment.
I believe you'll have to update viewer test too?
yeah, needs an update. Doesn't fail the test because these selectors are only used to give a good error string when there's a test failure :)
| @@ -20,7 +20,9 @@ | |||
|
|
|||
| <div id="lh-log"></div> | |||
|
|
|||
| <script>%%LIGHTHOUSE_JAVASCRIPT%%</script> | |||
| <script>%%LIGHTHOUSE_JAVASCRIPT%% | |||
| //# sourceURL=report-renderer-js.js | |||
There was a problem hiding this comment.
does this work with anything?
There was a problem hiding this comment.
it enables a few things in devtools. like code coverage some other features that are wonky with inline <script> tags.
you can also just ctrl-p into the JS rather than jump to some line in the big huge HTML.
|
just the viewer test thing |
* driveby: update nodeTimings types
Everything has been within a
.lh-scorecomponent which makes very little sense.Things are simplified now, with things using proper names.
Before and after of the DOM of an audit:
Also yay, no more
<!-- fill me -->:)Also driveby upgrade for some nodeTiming types