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

Add dark mode #931

Merged
merged 2 commits into from Jun 28, 2020
Merged

Add dark mode #931

merged 2 commits into from Jun 28, 2020

Conversation

vsalvino
Copy link
Contributor

@vsalvino vsalvino commented Feb 10, 2020

Fixes #858

  • Use dark theme in HTML output when the user's browser/OS is set to prefer dark theme.
  • Minor improvements to HTML accessibility:
    • Use <button> instead of <span> for actionable elements (<span> is not navigable by pressing TAB on keyboard, the browser has no knowledge that it can be clicked).
    • Add outlines on links and buttons when focused to improve visibility

If the user's browser does not support the prefer dark theme media query, the light theme is visible as it is simply the default. This does not depend on any experimental features and will work fine in any browser.

The light theme looks mostly the same, there are only a few very minor changes. Colors were inspired by light and dark themes of VS Code editor.

Font settings were cleaned up a bit in the sass as well. This is somewhat opinionated, but Georgia/serif did not look very good in dark mode, therefore sans-serif is used. Also the index was changed to use monospace, so that the names of the files would nicely align in a tabular fashion. The browser's default sans-serif and monospace fonts are used, as most developers probably set the ones they like as the defaults in their browsers, rather than the report forcing a font on the user.

Let me know if you have any feedback - would love to get this merged in! I realize anything design related is always heavily opinionated, but hopefully these styles match up nicely and keep the same overall look and feel.

image

image

image

image

Lastly, thank you for this project. I have started using it heavily and really love the HTML report.

@nedbat
Copy link
Owner

nedbat commented Feb 10, 2020

@vsalvino Thanks for doing all this! I didn't know about the media queries for dark mode.

I like the <button> changes, thanks. I don't understand why the file names should be monospace? As it is, people complain about how long the file names are. What didn't line up?

And yes, font choice will be controversial. I wish there were a way to say, "If the user set a default serif, then use it, otherwise Georgia." I think most people have not changed the default, and so get Times. :(

@vsalvino
Copy link
Contributor Author

vsalvino commented Feb 11, 2020

Yea, the media query is pretty fun, and newer within the past year or so (MDN).

Regarding the fonts, I thought the serif font looked a bit odd in dark mode, and it also seemed odd to see the names of source code files in a book-style font. Purely personal opinion. As it is your project you get the final say :) It is easy to change the fonts with the sass variables.

Here are a few screenshots to compare:

Using Georgia/serif (current style):
image

Using the OS's system font stack, which is quite popular with websites nowadays (including github) - this is probably the most "natural" looking.

$font-normal:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
$font-code:    SFMono-Regular, Menlo, Monaco, Consolas, monospace;

image

Using OS system font plus monospace for the index (looks most natural to me... probably due to seeing those modules as imports in the source code frequently):
image

Of course, the least controversial design would be to use the browser defaults:

$font-normal: sans-serif;
$font-code:   monospace;

Feel free to check out my branch and play with the sass. Let me know what we think. On a related note, I would appreciate you trying it on a robust test suite that triggers every possible UI element to thoroughly test that it looks good in light and dark mode.

@codecov-io
Copy link

codecov-io commented Feb 11, 2020

Codecov Report

Merging #931 into master will decrease coverage by 8.62%.
The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #931      +/-   ##
==========================================
- Coverage   94.09%   85.46%   -8.63%     
==========================================
  Files          86       86              
  Lines       12089    12089              
  Branches     1210     1210              
==========================================
- Hits        11375    10332    -1043     
- Misses        580     1600    +1020     
- Partials      134      157      +23
Impacted Files Coverage Δ
tests/plugin2.py 0% <0%> (-62.97%) ⬇️
tests/test_plugins.py 50.25% <0%> (-48.97%) ⬇️
tests/test_api.py 61.36% <0%> (-37.72%) ⬇️
tests/test_context.py 64.73% <0%> (-35.27%) ⬇️
tests/test_oddball.py 67.4% <0%> (-32.6%) ⬇️
tests/test_debug.py 69.72% <0%> (-28.45%) ⬇️
tests/test_xml.py 73% <0%> (-27%) ⬇️
tests/test_coverage.py 73.72% <0%> (-25.92%) ⬇️
tests/test_html.py 73.72% <0%> (-25.9%) ⬇️
tests/test_annotate.py 77.14% <0%> (-22.86%) ⬇️
... and 19 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1c5f661...bcf70b4. Read the comment docs.

@vsalvino
Copy link
Contributor Author

vsalvino commented Feb 12, 2020

Also, it looks like the unit tests are failing due to the HTML change. Can you advise the appropriate way to fix those (i.e. does something need to be re-generated, hard-coded, etc.?).

@pawamoy
Copy link
Sponsor

pawamoy commented Mar 26, 2020

I'd love to see this merged.

Indeed the tests seem to fail because of the span to button change:

It seems to be the same error across the whole test log.

For example, in test_html.py, test_omit4 (https://github.com/nedbat/coveragepy/blob/master/tests/test_html.py#L838): it's comparing the result to the gold files html/omit_4, and I found these span lines that differ now: https://github.com/nedbat/coveragepy/blob/master/tests/gold/html/omit_4/m1_py.html#L25

I guess you should simply update these gold files to change spans to buttons?

@pawamoy
Copy link
Sponsor

pawamoy commented Mar 26, 2020

find tests/gold/html -type f -name "*.html" -exec sed -Ei 's/<span class="(run .*)>(.*)<\/span>/<button type="button" class="\1 title="Toggle lines run">\2<\/button>/' {} \;
find tests/gold/html -type f -name "*.html" -exec sed -Ei 's/<span class="(mis .*)>(.*)<\/span>/<button type="button" class="\1 title="Toggle lines missing">\2<\/button>/' {} \;
find tests/gold/html -type f -name "*.html" -exec sed -Ei 's/<span class="(exc .*)>(.*)<\/span>/<button type="button" class="\1 title="Toggle lines excluded">\2<\/button>/' {} \;
find tests/gold/html -type f -name "*.html" -exec sed -Ei 's/<span class="(par .*)>(.*)<\/span>/<button type="button" class="\1 title="Toggle lines partially run">\2<\/button>/' {} \;

Tests passing locally!

@pawamoy
Copy link
Sponsor

pawamoy commented Apr 30, 2020

@nedbat @vsalvino any chance you would update or review this PR? 🙂

@pawamoy
Copy link
Sponsor

pawamoy commented Jun 24, 2020

Here is another ping for you 😬

@codecov-commenter
Copy link

codecov-commenter commented Jun 25, 2020

Codecov Report

Merging #931 into master will increase coverage by 0.01%.
The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #931      +/-   ##
==========================================
+ Coverage   94.09%   94.10%   +0.01%     
==========================================
  Files          86       86              
  Lines       12089    12129      +40     
  Branches     1210     1214       +4     
==========================================
+ Hits        11375    11414      +39     
  Misses        580      580              
- Partials      134      135       +1     
Impacted Files Coverage Δ
coverage/control.py 91.66% <0.00%> (-0.27%) ⬇️
tests/test_xml.py 100.00% <0.00%> (ø)
coverage/plugin.py 85.07% <0.00%> (ø)
tests/test_arcs.py 100.00% <0.00%> (ø)
tests/test_json.py 100.00% <0.00%> (ø)
tests/test_config.py 100.00% <0.00%> (ø)
coverage/xmlreport.py 100.00% <0.00%> (ø)
tests/test_cmdline.py 100.00% <0.00%> (ø)
coverage/jsonreport.py 100.00% <0.00%> (ø)
coverage/cmdline.py 93.13% <0.00%> (+0.02%) ⬆️
... and 1 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1c5f661...bcd571b. Read the comment docs.

@vsalvino
Copy link
Contributor Author

vsalvino commented Jun 25, 2020

@pawamoy thanks for your help on the tests.

@nedbat - looks like there are two test failures, although the output in Travis is not making sense to me, it does not seem related to the HTML/CSS. Would you be able to take a look?

@nedbat
Copy link
Owner

nedbat commented Jun 28, 2020

I appreciate your persistence with this! I will merge it, and then make a few tweaks. I'm afraid I can't go along with the monospaced file names, but I'm going to resist the "change resistance" I feel on a few other points, and see what people think.

Thanks!

@nedbat nedbat merged commit 978ff8b into nedbat:master Jun 28, 2020
3 checks passed
@nedbat
Copy link
Owner

nedbat commented Jul 6, 2020

I went back to your original monospaced index page, and this is now released as part of coverage 5.2.

@vsalvino
Copy link
Contributor Author

vsalvino commented Jul 6, 2020

Thanks for getting this released. Feel free to change the design as necessary!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Dark theme for HTML report
5 participants