Skip to content

Commit 5d8ea1a

Browse files
paulirishpaulirish
authored
report: introduce the new report api, add dom.rootEl (#13277)
1 parent 5430f02 commit 5d8ea1a

33 files changed

+265
-185
lines changed

‎build/build-report-components.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ function compileTemplate(tmpEl) {
143143
}
144144

145145
const fragmentVarName = makeOrGetVarName(tmpEl);
146-
lines.push(`const ${fragmentVarName} = dom.document().createDocumentFragment();`);
146+
lines.push(`const ${fragmentVarName} = dom.createFragment();`);
147147

148148
for (const topLevelEl of tmpEl.content.children) {
149149
process(topLevelEl);

‎flow-report/assets/standalone-flow-template.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,12 @@
2323
<title>Lighthouse Flow Report</title>
2424
<style>/*%%LIGHTHOUSE_CSS%%*/</style>
2525
<style>/*%%LIGHTHOUSE_FLOW_CSS%%*/</style>
26+
<style>body {margin: 0}</style>
2627
</head>
27-
<body class="flow-vars lh-root lh-vars">
28+
<body>
2829
<noscript>Lighthouse report requires JavaScript. Please enable.</noscript>
2930

30-
<main><!-- report populated here --></main>
31+
<main class="flow-vars lh-root lh-vars"><!-- report populated here --></main>
3132

3233
<script>window.__LIGHTHOUSE_FLOW_JSON__ = %%LIGHTHOUSE_FLOW_JSON%%;</script>
3334
<script>%%LIGHTHOUSE_FLOW_JAVASCRIPT%%

‎flow-report/src/wrappers/report-renderer.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ function useReportRenderer() {
2929

3030
const ReportRendererProvider: FunctionComponent = ({children}) => {
3131
const globals = useMemo(() => {
32+
// @ts-expect-error Still using legacy
3233
const dom = new DOM(document);
3334
const detailsRenderer = new DetailsRenderer(dom);
3435
const categoryRenderer = new CategoryRenderer(dom, detailsRenderer);

‎flow-report/src/wrappers/report.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,10 @@ const Report: FunctionComponent<{hashState: LH.FlowResult.HashState}> =
5050
convertChildAnchors(ref.current, hashState.index);
5151
const fullPageScreenshot = getFullPageScreenshot(hashState.currentLhr);
5252
if (fullPageScreenshot) {
53-
const container = dom.find('.lh-container', ref.current);
5453
ElementScreenshotRenderer.installOverlayFeature({
5554
dom,
56-
reportEl: container,
57-
overlayContainerEl: container,
55+
rootEl: ref.current,
56+
overlayContainerEl: ref.current,
5857
fullPageScreenshot,
5958
});
6059
}

‎flow-report/standalone-flow.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,10 @@ import {App} from './src/app';
1515

1616
// Used by standalone-flow.html
1717
function __initLighthouseFlowReport__() {
18-
const root = document.body.querySelector('main');
19-
if (!root) throw Error('Root element not found');
20-
render(<App flowResult={window.__LIGHTHOUSE_FLOW_JSON__} />, root);
18+
// TODO(adamraine): add lh-vars, etc classes programmatically instead of in the HTML template
19+
const container = document.body.querySelector('main');
20+
if (!container) throw Error('Container element not found');
21+
render(<App flowResult={window.__LIGHTHOUSE_FLOW_JSON__} />, container);
2122
}
2223

2324
window.__initLighthouseFlowReport__ = __initLighthouseFlowReport__;

‎report/assets/standalone-template.html

+2-3
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,11 @@
2121
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
2222
<link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEhklEQVR4AWJxL/BhIAesev1U5tcflpncgNrKIsqNIwzC9feMpDUzs70kOczMzMzJJcxwCTMzncPMnOwtzBwzMzPb0vRfeZPp0VhPS5I39V5fdiXV1/VD+9QC7OVn9BsyH1XIoEI1PfmJvLFowVV564+34DFUHudbmfDh4kVXh//7XwE+WjS/YfXZe3yr4j2rqj1AIhSB7hZ8ZtPZu/zw8cK523U4wE1/rvPfWrz4zs0m9ZdC9yUJAlASdBAgocRegfF/f3/h/PuaFsxMdwjAR0vm1+06eMMfIrhLqTWqdH4EumU2SPfMhigJAlRQbZrgrRsl9U+Y2DYDFCz3ILC9kiAiqSrMwbWT0nceEnR+9Kggc2zjOJCASDENkg0a5HfZZgDP81CM3CrQs2Z1+o7DJ6ePr8sK0AOCHv5Jjdt3evyYSaZ351VIStIxPRAUtrBYbxC6w+BZ0ivVSBKkIhJhemSyZpfB00EiPO2VjzYkxhcqXQqCWCShGplvi3y0QxqbuBurMjyJeWnkHZuAEgIQGsUBqwrfjZ+IlBgKyRJzVVYF8O6qFWdh86YzQzMrZigYmxAyfvHgLZQ/LC1CbeniW2Hkqr/PH16SgvGuf2/uzNMBwJA/njxizGPtSyAf7EziJCMGRDRdhoAC4PL1A/SrKQMAAQkEfpJAcRQdrBJ7gNwjSpJsdwK+CANBkqa1LgQB4IicV9nYUct7gaxuDJUErQIiEAiMxLVOFlKzIktPpT0ggpdpC/8YAHnxbgkUY4tAAFSR7AAXNyAAWHJrA/kHGjzg5nleuwFO7Nd/IoDw4Pm58+4jNLmYG0wRA5bErc2Mr3Y+dXTDW1VvwqbJkzMCHQ4S1GTCBOIgUHJrGdEwqzR+jAp/o2qAZelUDoQnruEEdDclJI6576AlNVfc+22XN/+Y1vnJD0Yind6UpEEvn/Hqq15EYjCW7jZCJEpnNvDgkyelDjs106kuux2AAXCSobULOWP8mLhYlpoDMK4qAFXJGk+grtH8YXVz5KJblqaG1+VUdTc0I290bmUQAriGITRbdQnom0aoFj8kx1+wMD2ifncAXUQE4SkDqN1hE0jEophs1SUwZAOhUAiMCLwRtamtTZtbbmZErSAUHbSysaoEmnrsakiMiUAURi283gN6wans9oX8rOCrj7/JP35DFD+iQ7Au/K2KE1jzx6ujjUnXFH9KjEq6ZlhsTBICrNLJf47Pv/pkHzvup1w4dmUbEei0+bcXRqJuh5kVARQ8byyYxOwNGr7A87xh1tp8sGT+uMInrwi++Xj7TQz2d27NvwEkrOflAFQGIDA5khASBCGdO2/Z/MnLPwYfv5TFhjW7QhVKAB6afwe2LpFlFsCnlQEosgQgDsdOG1/LKeNqJS4JCSPJ/i+TakwEARor7gER1Iva5JmPOJK0RUqmoPnnlzFCtmIAhAAQEIQRgDaiYPIauNXcnDlRIrWNFY3hm7PG9YRqr7IV7HrCgAC17befjEvRq2nGhAHtBqDpOuI/I1diUUAMYIxEdyejBJqLnNoszGZtfiX/CztGv2mq+sdaAAAAAElFTkSuQmCC">
2323
<title>Lighthouse Report</title>
24+
<style>body {margin: 0}</style>
2425
</head>
25-
<body class="lh-root lh-vars">
26+
<body>
2627
<noscript>Lighthouse report requires JavaScript. Please enable.</noscript>
2728

28-
<main><!-- report populated here --></main>
29-
3029
<div id="lh-log"></div>
3130

3231
<script>window.__LIGHTHOUSE_JSON__ = %%LIGHTHOUSE_JSON%%;</script>

‎report/assets/styles.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎report/clients/bundle.js

+1
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,4 @@
1515
export {DOM} from '../renderer/dom.js';
1616
export {ReportRenderer} from '../renderer/report-renderer.js';
1717
export {ReportUIFeatures} from '../renderer/report-ui-features.js';
18+
export {renderReport} from '../renderer/api.js';

‎report/clients/standalone.js

+6-13
Original file line numberDiff line numberDiff line change
@@ -13,32 +13,25 @@
1313

1414
/* global ga */
1515

16-
import {DOM} from '../renderer/dom.js';
16+
import {renderReport} from '../renderer/api.js';
1717
import {Logger} from '../renderer/logger.js';
18-
import {ReportRenderer} from '../renderer/report-renderer.js';
19-
import {ReportUIFeatures} from '../renderer/report-ui-features.js';
2018

2119
function __initLighthouseReport__() {
22-
const dom = new DOM(document);
23-
const renderer = new ReportRenderer(dom);
24-
const container = dom.find('main', document);
25-
/** @type {LH.ReportResult} */
20+
/** @type {LH.Result} */
2621
// @ts-expect-error
2722
const lhr = window.__LIGHTHOUSE_JSON__;
28-
renderer.renderReport(lhr, container);
2923

30-
// Hook in JS features and page-level event listeners after the report
31-
// is in the document.
32-
const features = new ReportUIFeatures(dom);
33-
features.initFeatures(lhr);
24+
const reportRootEl = renderReport(lhr);
25+
document.body.append(reportRootEl);
3426

3527
document.addEventListener('lh-analytics', /** @param {Event} e */ e => {
3628
// @ts-expect-error
3729
if (window.ga) ga(e.detail.cmd, e.detail.fields);
3830
});
3931

4032
document.addEventListener('lh-log', /** @param {Event} e */ e => {
41-
const el = dom.find('div#lh-log', document);
33+
const el = document.querySelector('div#lh-log');
34+
if (!el) return;
4235

4336
const logger = new Logger(el);
4437
// @ts-expect-error

‎report/renderer/api.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/**
2+
* @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
3+
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
4+
* Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
5+
*/
6+
'use strict';
7+
8+
9+
import {DOM} from '../renderer/dom.js';
10+
import {ReportRenderer} from '../renderer/report-renderer.js';
11+
import {ReportUIFeatures} from '../renderer/report-ui-features.js';
12+
13+
/**
14+
* @param {LH.Result} lhr
15+
* @param {LH.Renderer.Options} opts
16+
* @return {HTMLElement}
17+
*/
18+
export function renderReport(lhr, opts = {}) {
19+
const rootEl = document.createElement('article');
20+
rootEl.classList.add('lh-root', 'lh-vars');
21+
22+
const dom = new DOM(rootEl.ownerDocument, rootEl);
23+
const renderer = new ReportRenderer(dom);
24+
25+
renderer.renderReport(lhr, rootEl, opts);
26+
27+
// Hook in JS features and page-level event listeners after the report
28+
// is in the document.
29+
const features = new ReportUIFeatures(dom, opts);
30+
features.initFeatures(lhr);
31+
return rootEl;
32+
}

‎report/renderer/category-renderer.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ export class CategoryRenderer {
133133
const warningsEl = this.dom.createChildOf(summaryEl, 'div', 'lh-warnings');
134134
this.dom.createChildOf(warningsEl, 'span').textContent = strings.warningHeader;
135135
if (warnings.length === 1) {
136-
warningsEl.appendChild(this.dom.document().createTextNode(warnings.join('')));
136+
warningsEl.appendChild(this.dom.createTextNode(warnings.join('')));
137137
} else {
138138
const warningsUl = this.dom.createChildOf(warningsEl, 'ul');
139139
for (const warning of warnings) {

0 commit comments

Comments
 (0)