docs: add html report overview writeup #5059

paulirish · 2018-04-27T20:11:40Z

LS folks need this, so I figured why not document in the repo. ;)

brendankenny · 2018-04-27T23:09:51Z

docs/report.md

+
+Lighthouse has an indepedent report renderer that takes the **LHR** (Lighthouse Result object) and creates a DOM tree of the report. It's all done client-side.
+
+Example standalone HTML report, delivered by the CLI: https://crazy-roll.surge.sh/dbwtester.html _(View the source! 📖)_


should we point to viewer or post something on gh-pages?

brendankenny · 2018-04-27T23:10:06Z

docs/report.md

+
+### Report Renderer components
+
+1. [`report-generator`](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/report/report-generator.js) is the current entry point.  It compiles together the HTML string with everything required within it


single space after period

brendankenny · 2018-04-27T23:10:52Z

docs/report.md

+### Report Renderer components
+
+1. [`report-generator`](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/report/report-generator.js) is the current entry point.  It compiles together the HTML string with everything required within it
+   - It runs natively in Node.js, but can run in the browser after a compile step applied during our bundling pipeline. That compile step uses a browserify transform that replaces any `fs.readFileSync()` calls to with the file content as strings.


compile step is applied

brendankenny · 2018-04-27T23:11:32Z

docs/report.md

+### Report Renderer components
+
+1. [`report-generator`](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/report/report-generator.js) is the current entry point.  It compiles together the HTML string with everything required within it
+   - It runs natively in Node.js, but can run in the browser after a compile step applied during our bundling pipeline. That compile step uses a browserify transform that replaces any `fs.readFileSync()` calls to with the file content as strings.


calls to with the file content as strings

calls to fs

no?

brendankenny · 2018-04-27T23:12:23Z

docs/report.md

+1. [`lighthouse-core/report/html/`](https://github.com/GoogleChrome/lighthouse/tree/master/lighthouse-core/report/html) has everything required to create the HTML report
+1. [`lighthouse-core/report/html/renderer`](https://github.com/GoogleChrome/lighthouse/tree/master/lighthouse-core/report/html/renderer) are all client-side JS files and transform an LHR object into a report DOM tree. They are all executed within the browser.
+1. The DOM report is kicked off clientside with these four lines:
+https://github.com/GoogleChrome/lighthouse/blob/63c999789dc08b9a3b56b22f25f478f13050da29/lighthouse-core/report/html/report-template.html#L27-L31


shorter link like is done at the start of the above bullet points? (unfortunately looks like the github auto-quoting doesn't work in md files)

brendankenny · 2018-04-27T23:13:45Z

docs/report.md

+
+
+### Data Hydration
+`innerHTML` is avoided, the renderer relies on basic `createElement` as well as multiple components defined in `<template>` tags that are added via [`document.importNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode) and filled in via the `querySelector`/`textContent` combo.


"is avoided" -> "is not used", just to be concrete about it?

, -> ; :D

brendankenny · 2018-04-27T23:24:29Z

docs/report.md

+
+1. _LH Chrome Extension_: It [creates the HTML as the runner finishes up](https://github.com/GoogleChrome/lighthouse/blob/440155cdda377c458c0efce006bc3a69ce2a351c/lighthouse-core/runner.js#L137-L138) and transforms it [into a blob url in the background page](https://github.com/GoogleChrome/lighthouse/blob/440155cdda377c458c0efce006bc3a69ce2a351c/lighthouse-extension/app/src/lighthouse-ext-background.js#L129-L143).
+1. _LH CLI_: It [creates the HTML as the runner finishes up](https://github.com/GoogleChrome/lighthouse/blob/440155cdda377c458c0efce006bc3a69ce2a351c/lighthouse-core/runner.js#L137-L138) and [saves it to disk](https://github.com/GoogleChrome/lighthouse/blob/440155cdda377c458c0efce006bc3a69ce2a351c/lighthouse-cli/printer.js#L71-L92).
+1. _Chrome DevTools Audits Panel_: It gets the `renderer` files rolled into the Chromium repo, and they execute within the DevTools context. The audits panel [receives the LHR object within a WebWorker](https://github.com/ChromeDevTools/devtools-frontend/blob/master/front_end/audits2/Audits2ProtocolService.js#L27-L35), `postMessage`'s it back to the page, and runs [the renderer within DevTools UI](https://github.com/ChromeDevTools/devtools-frontend/blob/fee00605cada877c1f8e3aae758a0f8d05b64476/front_end/audits2/Audits2Panel.js#L519-L542), making a few upgrades ([one](https://github.com/ChromeDevTools/devtools-frontend/blob/fee00605cada877c1f8e3aae758a0f8d05b64476/front_end/audits2/Audits2Panel.js#L570-L583), [two](https://github.com/ChromeDevTools/devtools-frontend/blob/fee00605cada877c1f8e3aae758a0f8d05b64476/front_end/audits2/Audits2Panel.js#L596-L637)) and [simplifications](https://github.com/ChromeDevTools/devtools-frontend/blob/fee00605cada877c1f8e3aae758a0f8d05b64476/front_end/audits2/Audits2Panel.js#L275-L304).


maybe "The renderer files are rolled into the Chromium repo, and they execute within the DevTools context. The audits panel receives the LHR object from a WebWorker...."

also not sure what "page" is referring to in "postMessage's it back to the page". Is it the panel?

yeah page -> panel might be a little more clear

patrickhulce

just had to tagalong to brendan's comments :)

patrickhulce · 2018-04-27T23:36:14Z

docs/report.md

+### Report Renderer components
+
+1. [`report-generator`](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/report/report-generator.js) is the current entry point.  It compiles together the HTML string with everything required within it
+   - It runs natively in Node.js, but can run in the browser after a compile step applied during our bundling pipeline. That compile step uses a browserify transform that replaces any `fs.readFileSync()` calls to with the file content as strings.


calls to fs

no?

patrickhulce · 2018-04-27T23:36:52Z

docs/report.md

+### Report Renderer components
+
+1. [`report-generator`](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/report/report-generator.js) is the current entry point.  It compiles together the HTML string with everything required within it
+   - It runs natively in Node.js, but can run in the browser after a compile step applied during our bundling pipeline. That compile step uses a browserify transform that replaces any `fs.readFileSync()` calls to with the file content as strings.


nit: no comma in Node.js but

patrickhulce · 2018-04-27T23:37:49Z

docs/report.md

+
+
+### Data Hydration
+`innerHTML` is avoided, the renderer relies on basic `createElement` as well as multiple components defined in `<template>` tags that are added via [`document.importNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode) and filled in via the `querySelector`/`textContent` combo.


, -> ; :D

patrickhulce · 2018-04-27T23:38:50Z

docs/report.md

+
+1. _LH Chrome Extension_: It [creates the HTML as the runner finishes up](https://github.com/GoogleChrome/lighthouse/blob/440155cdda377c458c0efce006bc3a69ce2a351c/lighthouse-core/runner.js#L137-L138) and transforms it [into a blob url in the background page](https://github.com/GoogleChrome/lighthouse/blob/440155cdda377c458c0efce006bc3a69ce2a351c/lighthouse-extension/app/src/lighthouse-ext-background.js#L129-L143).
+1. _LH CLI_: It [creates the HTML as the runner finishes up](https://github.com/GoogleChrome/lighthouse/blob/440155cdda377c458c0efce006bc3a69ce2a351c/lighthouse-core/runner.js#L137-L138) and [saves it to disk](https://github.com/GoogleChrome/lighthouse/blob/440155cdda377c458c0efce006bc3a69ce2a351c/lighthouse-cli/printer.js#L71-L92).
+1. _Chrome DevTools Audits Panel_: It gets the `renderer` files rolled into the Chromium repo, and they execute within the DevTools context. The audits panel [receives the LHR object within a WebWorker](https://github.com/ChromeDevTools/devtools-frontend/blob/master/front_end/audits2/Audits2ProtocolService.js#L27-L35), `postMessage`'s it back to the page, and runs [the renderer within DevTools UI](https://github.com/ChromeDevTools/devtools-frontend/blob/fee00605cada877c1f8e3aae758a0f8d05b64476/front_end/audits2/Audits2Panel.js#L519-L542), making a few upgrades ([one](https://github.com/ChromeDevTools/devtools-frontend/blob/fee00605cada877c1f8e3aae758a0f8d05b64476/front_end/audits2/Audits2Panel.js#L570-L583), [two](https://github.com/ChromeDevTools/devtools-frontend/blob/fee00605cada877c1f8e3aae758a0f8d05b64476/front_end/audits2/Audits2Panel.js#L596-L637)) and [simplifications](https://github.com/ChromeDevTools/devtools-frontend/blob/fee00605cada877c1f8e3aae758a0f8d05b64476/front_end/audits2/Audits2Panel.js#L275-L304).


yeah page -> panel might be a little more clear

paulirish · 2018-04-28T01:47:40Z

lgtm plx :D

[skip ci]

brendankenny · 2018-04-28T01:49:59Z

docs/report.md

+
+### Report Renderer components
+
+1. [`lighthouse-core/report/report-generator.js`](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/report/report-generator.js) is the current entry point. It compiles together the HTML string with everything required within it


brendankenny · 2018-04-28T01:50:09Z

docs/report.md

+### Report Renderer components
+
+1. [`lighthouse-core/report/report-generator.js`](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/report/report-generator.js) is the current entry point. It compiles together the HTML string with everything required within it
+   - It runs natively in Node.js but can run in the browser after a compile step is applied during our bundling pipeline. That compile step uses a browserify transform that takes any `fs.readFileSync()` calls and replaces them the stringified file content.


replaces them with the stringified file content

brendankenny · 2018-04-28T01:50:18Z

docs/report.md

+
+1. [`lighthouse-core/report/report-generator.js`](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/report/report-generator.js) is the current entry point. It compiles together the HTML string with everything required within it
+   - It runs natively in Node.js but can run in the browser after a compile step is applied during our bundling pipeline. That compile step uses a browserify transform that takes any `fs.readFileSync()` calls and replaces them the stringified file content.
+1. [`lighthouse-core/report/html/`](https://github.com/GoogleChrome/lighthouse/tree/master/lighthouse-core/report/html) has everything required to create the HTML report


brendankenny · 2018-04-28T01:50:55Z

docs/report.md

+1. [`lighthouse-core/report/report-generator.js`](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/report/report-generator.js) is the current entry point. It compiles together the HTML string with everything required within it
+   - It runs natively in Node.js but can run in the browser after a compile step is applied during our bundling pipeline. That compile step uses a browserify transform that takes any `fs.readFileSync()` calls and replaces them the stringified file content.
+1. [`lighthouse-core/report/html/`](https://github.com/GoogleChrome/lighthouse/tree/master/lighthouse-core/report/html) has everything required to create the HTML report
+1. [`lighthouse-core/report/html/renderer`](https://github.com/GoogleChrome/lighthouse/tree/master/lighthouse-core/report/html/renderer) are all client-side JS files and transform an LHR object into a report DOM tree. They are all executed within the browser.


maybe

are all client-side JS files. They transform an LHR object into a report DOM tree. They are all executed within the browser.

brendankenny · 2018-04-28T01:51:27Z

docs/report.md

+
+
+### Data Hydration
+`innerHTML` is deliberated not used. The renderer relies on basic `createElement` as well as multiple components defined in `<template>` tags that are added via [`document.importNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode) and filled in via the `querySelector`/`textContent` combo.


deliberately

brendankenny · 2018-04-28T01:51:48Z

docs/report.md

+
+The renderer was designed to be portable across various environments.
+
+1. _LH Chrome Extension_: It [creates the HTML as the runner finishes up](https://github.com/GoogleChrome/lighthouse/blob/440155cdda377c458c0efce006bc3a69ce2a351c/lighthouse-core/runner.js#L137-L138) and transforms it [into a blob url in the background page](https://github.com/GoogleChrome/lighthouse/blob/440155cdda377c458c0efce006bc3a69ce2a351c/lighthouse-extension/app/src/lighthouse-ext-background.js#L129-L143).


brendankenny · 2018-04-28T01:52:09Z

docs/report.md

+
+1. _LH Chrome Extension_: It [creates the HTML as the runner finishes up](https://github.com/GoogleChrome/lighthouse/blob/440155cdda377c458c0efce006bc3a69ce2a351c/lighthouse-core/runner.js#L137-L138) and transforms it [into a blob url in the background page](https://github.com/GoogleChrome/lighthouse/blob/440155cdda377c458c0efce006bc3a69ce2a351c/lighthouse-extension/app/src/lighthouse-ext-background.js#L129-L143).
+1. _LH CLI_: It [creates the HTML as the runner finishes up](https://github.com/GoogleChrome/lighthouse/blob/440155cdda377c458c0efce006bc3a69ce2a351c/lighthouse-core/runner.js#L137-L138) and [saves it to disk](https://github.com/GoogleChrome/lighthouse/blob/440155cdda377c458c0efce006bc3a69ce2a351c/lighthouse-cli/printer.js#L71-L92).
+1. _Chrome DevTools Audits Panel_: The `renderer` are rolled into the Chromium repo, and they execute within the DevTools context. The audits panel [receives the LHR object from a WebWorker](https://github.com/ChromeDevTools/devtools-frontend/blob/master/front_end/audits2/Audits2ProtocolService.js#L27-L35), `postMessage`'s it back to the panel, and runs [the renderer within DevTools UI](https://github.com/ChromeDevTools/devtools-frontend/blob/fee00605cada877c1f8e3aae758a0f8d05b64476/front_end/audits2/Audits2Panel.js#L519-L542), making a few upgrades ([one](https://github.com/ChromeDevTools/devtools-frontend/blob/fee00605cada877c1f8e3aae758a0f8d05b64476/front_end/audits2/Audits2Panel.js#L570-L583), [two](https://github.com/ChromeDevTools/devtools-frontend/blob/fee00605cada877c1f8e3aae758a0f8d05b64476/front_end/audits2/Audits2Panel.js#L596-L637)) and [simplifications](https://github.com/ChromeDevTools/devtools-frontend/blob/fee00605cada877c1f8e3aae758a0f8d05b64476/front_end/audits2/Audits2Panel.js#L275-L304).


The renderer files are?

now it's saying that the panel gets the LHR and postmessages it to the panel :)

brendankenny

LGTM!

docs: add html report overview writeup

5612e18

paulirish requested review from brendankenny and patrickhulce April 27, 2018 20:11

paulirish requested a review from vinamratasingal-zz as a code owner April 27, 2018 20:11

devtools-bot added the waiting4reviewer label Apr 27, 2018

example report link.

f89425d

brendankenny requested changes Apr 27, 2018

View reviewed changes

patrickhulce reviewed Apr 27, 2018

View reviewed changes

feedback.

c57db34

ghpages for example.

861b0ad

[skip ci]

paulirish force-pushed the reportmd branch from 714182b to 861b0ad Compare April 28, 2018 01:48

brendankenny reviewed Apr 28, 2018

View reviewed changes

.

3049054

brendankenny approved these changes Apr 28, 2018

View reviewed changes

paulirish merged commit 3ede0eb into master Apr 28, 2018

paulirish deleted the reportmd branch April 28, 2018 01:57

paulirish removed the waiting4reviewer label Apr 30, 2018

kdzwinel pushed a commit to kdzwinel/lighthouse that referenced this pull request Aug 16, 2018

docs: add html report overview writeup (GoogleChrome#5059)

9747814

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: add html report overview writeup #5059

docs: add html report overview writeup #5059

paulirish commented Apr 27, 2018

brendankenny Apr 27, 2018

brendankenny Apr 27, 2018

brendankenny Apr 27, 2018

brendankenny Apr 27, 2018

patrickhulce Apr 27, 2018

brendankenny Apr 27, 2018

brendankenny Apr 27, 2018

patrickhulce Apr 27, 2018

brendankenny Apr 27, 2018

patrickhulce Apr 27, 2018

patrickhulce left a comment

patrickhulce Apr 27, 2018

patrickhulce Apr 27, 2018

patrickhulce Apr 27, 2018

patrickhulce Apr 27, 2018

paulirish commented Apr 28, 2018

brendankenny Apr 28, 2018

brendankenny Apr 28, 2018

brendankenny Apr 28, 2018

brendankenny Apr 28, 2018

brendankenny Apr 28, 2018

brendankenny Apr 28, 2018

brendankenny Apr 28, 2018

brendankenny Apr 28, 2018

brendankenny left a comment


		Lighthouse has an indepedent report renderer that takes the LHR (Lighthouse Result object) and creates a DOM tree of the report. It's all done client-side.

		Example standalone HTML report, delivered by the CLI: https://crazy-roll.surge.sh/dbwtester.html _(View the source! 📖)_


		### Report Renderer components

		1. [`report-generator`](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/report/report-generator.js) is the current entry point. It compiles together the HTML string with everything required within it



		### Data Hydration
		`innerHTML` is avoided, the renderer relies on basic `createElement` as well as multiple components defined in `<template>` tags that are added via [`document.importNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode) and filled in via the `querySelector`/`textContent` combo.


		### Report Renderer components

		1. [`lighthouse-core/report/report-generator.js`](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/report/report-generator.js) is the current entry point. It compiles together the HTML string with everything required within it



		### Data Hydration
		`innerHTML` is deliberated not used. The renderer relies on basic `createElement` as well as multiple components defined in `<template>` tags that are added via [`document.importNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode) and filled in via the `querySelector`/`textContent` combo.


		The renderer was designed to be portable across various environments.

		1. _LH Chrome Extension_: It [creates the HTML as the runner finishes up](https://github.com/GoogleChrome/lighthouse/blob/440155cdda377c458c0efce006bc3a69ce2a351c/lighthouse-core/runner.js#L137-L138) and transforms it [into a blob url in the background page](https://github.com/GoogleChrome/lighthouse/blob/440155cdda377c458c0efce006bc3a69ce2a351c/lighthouse-extension/app/src/lighthouse-ext-background.js#L129-L143).

docs: add html report overview writeup #5059

docs: add html report overview writeup #5059

Conversation

paulirish commented Apr 27, 2018

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

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

paulirish commented Apr 28, 2018

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

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