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: add options disableFireworks and disableDarkMode #13649

Merged
merged 4 commits into from
Feb 16, 2022

Conversation

connorjclark
Copy link
Collaborator

@connorjclark connorjclark commented Feb 9, 2022

Deciding to use the dark theme should be left to the embedder, in case it wouldn't mesh with the site theme. We tried to do this with disableAutoDarkModeAndFireworks but:

  • the name is ambiguous (does it disable dark mode AND fireworks, or just the auto "use dark mode" on fireworks?)
  • apparently we wanted the former, but we missed part of it (report: disable fireworks with flag #13610)
  • Forces embedder to drop dark mode support if they simply don't want / can't support the fireworks

This PR:

  • deprecates disableAutoDarkModeAndFireworks
  • adds disableDarkMode option (embedders such as DevTools can set this and defer to the DevTools theme system to toggle the dark theme; or they can set it because the site should never be displayed in a dark theme and having just LH be dark would be jarring)
  • adds disableFireworks option
  • automatically switches to dark mode because it makes fireworks looks cool only if neither of the new options are disabled

@connorjclark connorjclark requested a review from a team as a code owner February 9, 2022 20:02
@connorjclark connorjclark requested review from adamraine and removed request for a team February 9, 2022 20:02

// Fireworks look better in dark mode.
if (reportRootEl.querySelector('.lh-score100')) {
toggleDarkTheme(new DOM(document, reportRootEl), true);
Copy link
Member

@adamraine adamraine Feb 9, 2022

Choose a reason for hiding this comment

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

I like the idea of abstracting DOM behind renderReport. IMO it would be better to have a enableDarkModeWithFireworks option and moving this logic back to ReportUIFeatures. We could also use it for the report viewer.

There is also an argument to remove this feature, it can be unexpected for some users #13631.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

It was unexpected because there were no fireworks. With fireworks, there is context, and it is clearly an easter egg.

I like the idea of abstracting DOM behind renderReport.

If only the standalone report needs this, I'm fine keeping this internal.

Copy link
Member

Choose a reason for hiding this comment

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

If only the standalone report needs this, I'm fine keeping this internal.

What about report viewer?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

hmmm forgot about that... ok how's the new changeset?

@connorjclark connorjclark changed the title report: opts.disableFireworks and opts.disableDarkMode report: add options disableFireworks and disableDarkMode Feb 9, 2022
@connorjclark connorjclark merged commit fa7b543 into master Feb 16, 2022
@connorjclark connorjclark deleted the fix-report-opts-fireworks branch February 16, 2022 22:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants