Add dark mode #931

vsalvino · 2020-02-10T06:26:34Z

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.

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

nedbat · 2020-02-10T11:07:58Z

@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 · 2020-02-11T05:43:42Z

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):

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;

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):

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 · 2020-02-11T05:45:37Z

Codecov Report

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

@@            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 · 2020-02-12T23:22:44Z

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 · 2020-03-26T14:00:30Z

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 · 2020-03-26T14:09:24Z

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 · 2020-04-30T19:44:24Z

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

pawamoy · 2020-06-24T19:09:32Z

Here is another ping for you 😬

codecov-commenter · 2020-06-25T00:54:07Z

Codecov Report

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

@@            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 · 2020-06-25T17:20:04Z

@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 · 2020-06-28T20:22:59Z

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 · 2020-07-06T12:11:05Z

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

vsalvino · 2020-07-06T17:44:49Z

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

vsalvino mentioned this pull request Feb 10, 2020

Dark theme for HTML report #858

Closed

Add dark mode to HTML output; improve accessibility

bcf70b4

nedbat force-pushed the master branch from 5684a56 to 48c73b8 Compare February 29, 2020 13:08

pawamoy mentioned this pull request Apr 11, 2020

Support coveragepy HTML reports darkreader/darkreader#1646

Closed

Fix tests

bcd571b

nedbat merged commit 978ff8b into nedbat:master Jun 28, 2020

vsalvino deleted the darkmode branch July 6, 2020 17:44

This was referenced Jul 6, 2020

Scheduled weekly dependency update for week 27 PennyDreadfulMTG/Penny-Dreadful-Tools#7489

Closed

Bump coverage from 5.1 to 5.2 PennyDreadfulMTG/Penny-Dreadful-Tools#7492

Merged

This was referenced Mar 16, 2021

Bump coverage from 4.5.4 to 5.5 CSCfi/oidc-client#35

Merged

Bump coverage from 4.5.4 to 5.5 CSCfi/beacon-python#162

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add dark mode #931

Add dark mode #931

vsalvino commented Feb 10, 2020 •

edited

Loading

nedbat commented Feb 10, 2020

vsalvino commented Feb 11, 2020 •

edited

Loading

codecov-io commented Feb 11, 2020

vsalvino commented Feb 12, 2020

pawamoy commented Mar 26, 2020 •

edited

Loading

pawamoy commented Mar 26, 2020 •

edited

Loading

pawamoy commented Apr 30, 2020

pawamoy commented Jun 24, 2020

codecov-commenter commented Jun 25, 2020 •

edited

Loading

vsalvino commented Jun 25, 2020

nedbat commented Jun 28, 2020

nedbat commented Jul 6, 2020

vsalvino commented Jul 6, 2020

Add dark mode #931

Add dark mode #931

Conversation

vsalvino commented Feb 10, 2020 • edited Loading

nedbat commented Feb 10, 2020

vsalvino commented Feb 11, 2020 • edited Loading

codecov-io commented Feb 11, 2020

Codecov Report

vsalvino commented Feb 12, 2020

pawamoy commented Mar 26, 2020 • edited Loading

pawamoy commented Mar 26, 2020 • edited Loading

pawamoy commented Apr 30, 2020

pawamoy commented Jun 24, 2020

codecov-commenter commented Jun 25, 2020 • edited Loading

Codecov Report

vsalvino commented Jun 25, 2020

nedbat commented Jun 28, 2020

nedbat commented Jul 6, 2020

vsalvino commented Jul 6, 2020

vsalvino commented Feb 10, 2020 •

edited

Loading

vsalvino commented Feb 11, 2020 •

edited

Loading

pawamoy commented Mar 26, 2020 •

edited

Loading

pawamoy commented Mar 26, 2020 •

edited

Loading

codecov-commenter commented Jun 25, 2020 •

edited

Loading