Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

report: introduce the new report api, add dom.rootEl #13277

Merged
merged 48 commits into from
Nov 3, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
48 commits
Select commit Hold shift + click to select a range
60e38ee
report api. (and psi thinger)
paulirish Jul 9, 2021
9d0326b
cleanup
paulirish Jul 10, 2021
f059abd
'proper' psi variant
paulirish Jul 10, 2021
da84011
Merge remote-tracking branch 'origin/master' into reportapi
paulirish Jul 20, 2021
c18bd48
fixup psi dist
paulirish Jul 20, 2021
349a655
new tabs. distinguished screenshots
paulirish Jul 21, 2021
f6003b6
Merge remote-tracking branch 'origin/master' into reportapi
paulirish Jul 21, 2021
4c2f18f
cleanup psi more
paulirish Jul 21, 2021
743b1ea
moved that other stuff to #12815
paulirish Jul 21, 2021
94823f3
one-shot functions
paulirish Jul 21, 2021
5e84263
latest report api proposal
paulirish Jul 21, 2021
e122e5d
address all feedback
paulirish Jul 23, 2021
38db26b
Merge remote-tracking branch 'origin/master' into reportapi
paulirish Oct 18, 2021
d8aa593
update
paulirish Oct 18, 2021
399cd3c
drop renderGaugeForCategory
paulirish Oct 18, 2021
96cbb47
report api impl
paulirish Oct 25, 2021
2b08fc2
omittopbar
paulirish Oct 25, 2021
0c2f103
broken because features is enabled before reportEl is added to dom
paulirish Oct 25, 2021
bff39ee
rootEl in a good spot
paulirish Oct 25, 2021
501a980
rootEl all the things
paulirish Oct 25, 2021
37bf128
root for fallback scenario
paulirish Oct 25, 2021
69a7fed
happy tests
paulirish Oct 26, 2021
cdac9fc
Merge branch 'reportapidom' into reportapi
paulirish Oct 28, 2021
5f95ff3
Merge remote-tracking branch 'origin/master' into reportapi
paulirish Oct 28, 2021
cc6f08a
fix types
paulirish Oct 28, 2021
c1f94cb
cleanup of remainign _document references
paulirish Oct 28, 2021
ce7dd3e
drop unimplemented options.
paulirish Oct 28, 2021
cc119a2
disableAutoDarkModeAndFireworks
paulirish Oct 28, 2021
7779f25
add overlayParentEl option. but since the overlay is pos:fixed, it do…
paulirish Oct 28, 2021
69e7a48
Revert "add overlayParentEl option. but since the overlay is pos:fixe…
paulirish Oct 28, 2021
a572b9c
renderReport 2nd arg is now optional
paulirish Oct 28, 2021
66216a9
format types
paulirish Oct 29, 2021
3058b57
standalone using new api. tsc errrs tho
paulirish Oct 30, 2021
e0bf5a5
fixtest
paulirish Nov 2, 2021
c9ba910
Merge remote-tracking branch 'origin/master' into reportapi-impl
paulirish Nov 2, 2021
6e19522
move lh-vars classes to main rather than body
paulirish Nov 2, 2021
88b6c23
tsc in standalone
paulirish Nov 2, 2021
7c21389
container and lh-root shenanigans
paulirish Nov 2, 2021
871e8e5
reword
paulirish Nov 2, 2021
91390dc
fix flow
paulirish Nov 2, 2021
6c4d3df
margin
paulirish Nov 2, 2021
eeb5a2b
Merge remote-tracking branch 'origin/master' into reportapi-impl
paulirish Nov 3, 2021
b6aaf01
latest feedback. new report creates an article. keep main as container
paulirish Nov 3, 2021
4187992
tsc
paulirish Nov 3, 2021
033a453
fix report tests
paulirish Nov 3, 2021
536f4cf
handle flow legacy ussage
paulirish Nov 3, 2021
db94ac1
fix FPSS. css var was installed too low in the DOM
paulirish Nov 3, 2021
7384079
optional fpss cleanup and renaming
paulirish Nov 3, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion build/build-report-components.js
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ function compileTemplate(tmpEl) {
}

const fragmentVarName = makeOrGetVarName(tmpEl);
lines.push(`const ${fragmentVarName} = dom.document().createDocumentFragment();`);
lines.push(`const ${fragmentVarName} = dom.createFragment();`);

for (const topLevelEl of tmpEl.content.children) {
process(topLevelEl);
Expand Down
5 changes: 3 additions & 2 deletions flow-report/assets/standalone-flow-template.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,12 @@
<title>Lighthouse Flow Report</title>
<style>/*%%LIGHTHOUSE_CSS%%*/</style>
<style>/*%%LIGHTHOUSE_FLOW_CSS%%*/</style>
<style>body {margin: 0}</style>
</head>
<body class="flow-vars lh-root lh-vars">
<body>
<noscript>Lighthouse report requires JavaScript. Please enable.</noscript>

<main><!-- report populated here --></main>
<main class="flow-vars lh-root lh-vars"><!-- report populated here --></main>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Todo for me to add these programmatically in the flow report.


<script>window.__LIGHTHOUSE_FLOW_JSON__ = %%LIGHTHOUSE_FLOW_JSON%%;</script>
<script>%%LIGHTHOUSE_FLOW_JAVASCRIPT%%
Expand Down
1 change: 1 addition & 0 deletions flow-report/src/wrappers/report-renderer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ function useReportRenderer() {

const ReportRendererProvider: FunctionComponent = ({children}) => {
const globals = useMemo(() => {
// @ts-expect-error Still using legacy
const dom = new DOM(document);
const detailsRenderer = new DetailsRenderer(dom);
const categoryRenderer = new CategoryRenderer(dom, detailsRenderer);
Expand Down
5 changes: 2 additions & 3 deletions flow-report/src/wrappers/report.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,10 @@ const Report: FunctionComponent<{hashState: LH.FlowResult.HashState}> =
convertChildAnchors(ref.current, hashState.index);
const fullPageScreenshot = getFullPageScreenshot(hashState.currentLhr);
if (fullPageScreenshot) {
const container = dom.find('.lh-container', ref.current);
ElementScreenshotRenderer.installOverlayFeature({
dom,
reportEl: container,
overlayContainerEl: container,
rootEl: ref.current,
overlayContainerEl: ref.current,
fullPageScreenshot,
});
}
Expand Down
7 changes: 4 additions & 3 deletions flow-report/standalone-flow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,10 @@ import {App} from './src/app';

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

window.__initLighthouseFlowReport__ = __initLighthouseFlowReport__;
5 changes: 2 additions & 3 deletions report/assets/standalone-template.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<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">
<title>Lighthouse Report</title>
<style>body {margin: 0}</style>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add this to the flow template as well, or maybe put in shared styles somehow?

</head>
<body class="lh-root lh-vars">
<body>
<noscript>Lighthouse report requires JavaScript. Please enable.</noscript>

<main><!-- report populated here --></main>

<div id="lh-log"></div>

<script>window.__LIGHTHOUSE_JSON__ = %%LIGHTHOUSE_JSON%%;</script>
Expand Down
2 changes: 1 addition & 1 deletion report/assets/styles.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions report/clients/bundle.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,4 @@
export {DOM} from '../renderer/dom.js';
export {ReportRenderer} from '../renderer/report-renderer.js';
export {ReportUIFeatures} from '../renderer/report-ui-features.js';
export {renderReport} from '../renderer/api.js';
19 changes: 6 additions & 13 deletions report/clients/standalone.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,32 +13,25 @@

/* global ga */

import {DOM} from '../renderer/dom.js';
import {renderReport} from '../renderer/api.js';
import {Logger} from '../renderer/logger.js';
import {ReportRenderer} from '../renderer/report-renderer.js';
import {ReportUIFeatures} from '../renderer/report-ui-features.js';

function __initLighthouseReport__() {
const dom = new DOM(document);
const renderer = new ReportRenderer(dom);
const container = dom.find('main', document);
/** @type {LH.ReportResult} */
/** @type {LH.Result} */
// @ts-expect-error
const lhr = window.__LIGHTHOUSE_JSON__;
renderer.renderReport(lhr, container);

// Hook in JS features and page-level event listeners after the report
// is in the document.
const features = new ReportUIFeatures(dom);
features.initFeatures(lhr);
const reportRootEl = renderReport(lhr);
document.body.append(reportRootEl);

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

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

const logger = new Logger(el);
// @ts-expect-error
Expand Down
32 changes: 32 additions & 0 deletions report/renderer/api.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
/**
* @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
* 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
* 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.
*/
'use strict';


import {DOM} from '../renderer/dom.js';
import {ReportRenderer} from '../renderer/report-renderer.js';
import {ReportUIFeatures} from '../renderer/report-ui-features.js';

/**
* @param {LH.Result} lhr
* @param {LH.Renderer.Options} opts
* @return {HTMLElement}
*/
export function renderReport(lhr, opts = {}) {
const rootEl = document.createElement('article');
rootEl.classList.add('lh-root', 'lh-vars');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The standalone template HTML already includes these classes in a main tag. WDYT about making rootEl a normal div, and removing the classes from the template files?

Standalone renderer would still look for the main tag.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

basically did the same kinda thing. just avoiding a double-main scenario. :)


const dom = new DOM(rootEl.ownerDocument, rootEl);
const renderer = new ReportRenderer(dom);

renderer.renderReport(lhr, rootEl, opts);

// Hook in JS features and page-level event listeners after the report
// is in the document.
const features = new ReportUIFeatures(dom, opts);
features.initFeatures(lhr);
return rootEl;
}
2 changes: 1 addition & 1 deletion report/renderer/category-renderer.js
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ export class CategoryRenderer {
const warningsEl = this.dom.createChildOf(summaryEl, 'div', 'lh-warnings');
this.dom.createChildOf(warningsEl, 'span').textContent = strings.warningHeader;
if (warnings.length === 1) {
warningsEl.appendChild(this.dom.document().createTextNode(warnings.join('')));
warningsEl.appendChild(this.dom.createTextNode(warnings.join('')));
} else {
const warningsUl = this.dom.createChildOf(warningsEl, 'ul');
for (const warning of warnings) {
Expand Down
Loading