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.

Sign up for GitHub

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

Jump to bottom

report: add options disableFireworks and disableDarkMode #13649

Merged
merged 4 commits into from
Feb 16, 2022
Merged

report: add options disableFireworks and disableDarkMode #13649

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d5d993d
report: opts.disableFireworks and opts.disableDarkMode
connorjclark Feb 9, 2022
d293571
gotta keep that
connorjclark Feb 9, 2022
1a38456
..
connorjclark Feb 9, 2022
a6ffae0
hmm
connorjclark Feb 9, 2022
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
3 changes: 2 additions & 1 deletion flow-report/src/wrappers/report.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ export const Report: FunctionComponent<{hashState: LH.FlowResult.HashState}> =
({hashState}) => {
const ref = useExternalRenderer<HTMLDivElement>(() => {
return renderReport(hashState.currentLhr, {
disableAutoDarkModeAndFireworks: true,
disableFireworks: true,
disableDarkMode: true,
omitTopbar: true,
connorjclark marked this conversation as resolved.
Show resolved Hide resolved
omitGlobalStyles: true,
onPageAnchorRendered: link => convertAnchor(link, hashState.index),
Expand Down
18 changes: 9 additions & 9 deletions report/renderer/report-ui-features.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,12 +70,13 @@ export class ReportUIFeatures {
this._setupThirdPartyFilter();
this._setupElementScreenshotOverlay(this._dom.rootEl);

let turnOffTheLights = false;
// Do not query the system preferences for DevTools - DevTools should only apply dark theme
// if dark is selected in the settings panel.
const disableDarkMode = this._dom.isDevTools() || this._opts.disableAutoDarkModeAndFireworks;
// TODO: set `disableDarkMode` in devtools and delete this special case.
const disableDarkMode = this._dom.isDevTools() ||
this._opts.disableDarkMode || this._opts.disableAutoDarkModeAndFireworks;
if (!disableDarkMode && window.matchMedia('(prefers-color-scheme: dark)').matches) {
turnOffTheLights = true;
toggleDarkTheme(this._dom, true);
}

// Fireworks!
Expand All @@ -85,13 +86,12 @@ export class ReportUIFeatures {
const cat = lhr.categories[id];
return cat && cat.score === 1;
});
if (scoresAll100 && !this._opts.disableAutoDarkModeAndFireworks) {
turnOffTheLights = true;
const disableFireworks =
this._opts.disableFireworks || this._opts.disableAutoDarkModeAndFireworks;
if (scoresAll100 && !disableFireworks) {
this._enableFireworks();
}

if (turnOffTheLights) {
toggleDarkTheme(this._dom, true);
// If dark mode is allowed, force it on because it looks so much better.
if (!disableDarkMode) toggleDarkTheme(this._dom, true);
}

// Show the metric descriptions by default when there is an error.
Expand Down
3 changes: 2 additions & 1 deletion report/test-assets/faux-psi.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,8 @@ async function renderLHReport() {

const reportRootEl = lighthouseRenderer.renderReport(lhr, {
omitTopbar: true,
disableAutoDarkModeAndFireworks: true,
disableFireworks: true,
disableDarkMode: true,
});
// TODO: display warnings if appropriate.
for (const el of reportRootEl.querySelectorAll('.lh-warnings--toplevel')) {
Expand Down
12 changes: 10 additions & 2 deletions report/types/report-renderer.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,16 @@ declare module Renderer {

interface Options {
/**
* Don't automatically apply dark-mode to dark based on (prefers-color-scheme: dark). (DevTools and PSI don't want this.)
* Also, the fireworks easter-egg will want to flip to dark, so this setting will also disable chance of fireworks. */
* Disables automatically applying dark mode based on `prefers-color-scheme: dark`. Dark mode can still
* be manually applied by assigning the class `lh-dark` to the report element.
*/
disableDarkMode?: boolean;
/** Disables the fireworks animation that plays when all core categories have a 100 score. */
disableFireworks?: boolean;
/**
* Disable dark mode and fireworks.
* @deprecated Use `disableDarkMode` and `disableFireworks` instead.
*/
disableAutoDarkModeAndFireworks?: boolean;

/** Disable the topbar UI component */
Expand Down