[llvm-cov] Add HTML dark theme support

[EdJoPaTo]

Personally I use cargo-llvm-cov which creates helpful HTML coverage reports, but they don't support a dynamic dark themes.

I updated the styling to support both dark and bright color themes based on the browser preference. The bright theme should look similar to the current theme.

I also improved some color contrasts (Firefox accessibility tool reported them) and ensured that line-number links keep their text-decoration.

Things that both have .tooltip and .red look kinda odd as the coloring is now based on tinting with transparency. Given that the tooltip should always show 0 in such cases (otherwise it wouldn't be red) the tooltip could be removed there on the HTML generation, but that seemed out of scope for my style only change.

[github-actions]

Thank you for submitting a Pull Request (PR) to the LLVM Project!

This PR will be automatically labeled and the relevant teams will be
notified.

If you wish to, you can add reviewers by using the "Reviewers" section on this page.

If this is not working for you, it is probably because you do not have write
permissions for the repository. In which case you can instead tag reviewers by
name in a comment by using @ followed by their GitHub username.

If you have received no comments on your PR for a week, you can request a review
by "ping"ing the PR by adding a comment “Ping”. The common courtesy "ping" rate
is once a week. Please remember that you are asking for valuable time from other developers.

If you have further questions, they may be answered by the LLVM GitHub User Guide.

You can also ask questions in a comment on this PR, on the LLVM Discord or on the forums.

[EdJoPaTo]

I am not sure a simple "Ping" would do much as there are no participants yet? Also, @llvmbot has not labeled this PR like it did others (probably because the infrequent additions to llvm-cov?)

@efriedma-quic is in the moment of writing the last one to commit to this repo so I "randomly" choose you asking for steps to continue with this PR. Maybe you can point me in a good direction? :)

[hanickadot]

Can you provide screenshots of before/after?

[EdJoPaTo]

With the Firefox Dev Tools its relatively simple to test stylesheets. Copy the new ones and replace the style.css in the Dev Tools. That way the given styles can be previewed with the given output.

I spontaneously picked a personal Rust project of mine which hopefully includes a bunch of different styling to be viewed here.

The css_sort.rs file is hovered, Line 65 is selected (#L65 at the end of the URL)

Overview

Before

After (bright)

After (dark)

Code view

Before

After (bright)

After (dark)

[hanickadot]

Interesting the line 65 with url.clone() is now block and before it was yellow only to end of line. Can't find the corresponded change in diff.

[hanickadot]

Personally I liked the previous color palette better as it was pastel colors, now it's a bit more saturated for me (in light mode).

[EdJoPaTo]

Personally I liked the previous color palette better as it was pastel colors, now it's a bit more saturated for me (in light mode).

That's from improving the color contrasts:

I also improved some color contrasts (Firefox accessibility tool reported them) and ensured that line-number links keep their text-decoration.

---

Interesting the line 65 with url.clone() is now block and before it was yellow only to end of line. Can't find the corresponded change in diff.

It's now at line 234: tr:has(> td >a:target)

[hanickadot]

@chapuni do you like the style?

[hanickadot]

Do you want me to merge it? Or do you have rights to do so?

[EdJoPaTo]

Going to more pastel colors on bright requires different colors for bright / dark. With my changes I tried to have minimal differences based on the theme (@media (prefers-color-scheme: dark)) and worked with semi-transparent colors above the background. The dark theme requires darker colors with more contrast while the bright theme would work with less. Changing that would be possible but requires more differences based on the actual theme.

I like the pastel ones a bit better too, but that would result in more lines of style sheets. So I went for simplicity on my current approach.

[hanickadot]

That can be changed later, I like we support dark theme now :)

[EdJoPaTo]

Do you want me to merge it? Or do you have rights to do so?

In case this asks me: I never contributed to this repo, I have no permissions to do so.

[hanickadot]

Merged :)

[github-actions]

@EdJoPaTo Congratulations on having your first Pull Request (PR) merged into the LLVM Project!

Your changes will be combined with recent changes from other authors, then tested
by our build bots. If there is a problem with a build, you may receive a report in an email or a comment on this PR.

Please check whether problems have been caused by your change specifically, as
the builds can include changes from many authors. It is not uncommon for your
change to be included in a build that fails due to someone else's changes, or
infrastructure issues.

How to do this, and the rest of the post-merge process, is covered in detail here.

If your change does cause a problem, it may be reverted, or you can revert it yourself.
This is a normal part of LLVM development. You can fix your changes and open a new PR to merge them again.

If you don't get any reports, no action is required from you. Your changes are working as expected, well done!

[EdJoPaTo]

Now I got a bunch of Emails regarding this merge, not sure what to interpret from that:

https://lab.llvm.org/buildbot/#/builders/188/builds/46756

[hanickadot]

I didn't know about this test as I didn't trip it last time when I changed the style.

[jplehr]

HI,
Can you please fix the test (and in the meantime revert if the fix takes longer)?
You should be able to reproduce the fail locally via ninja check-llvm (or make check-llvm, depending on your build tool).
Thank you!

[hanickadot]

I have PR which fixes the test #94469

[hanickadot]

IMHO the test is really rigid, testing if something is in CSS is just a duplication

[chapuni]

Fair enough. Thanks.

[jplehr]

Thanks for the quick fix!

[whentojump]

Nit: expansion views in dark mode are not super legible

[EdJoPaTo]

@whentojump which html classes does it have?

I‘m curious why it changes the font color to white as I tried to only use a background and keep the text color of the text. Maybe I have overlooked something?

[whentojump]

@EdJoPaTo It can be reproduced with

#!/bin/bash

cat > test.c << EOF
#define FOO(x) (x)

int main(void) {
    return FOO(2);
}
EOF

clang -fprofile-instr-generate -fcoverage-mapping test.c -o test
./test
llvm-profdata merge default.profraw -o default.profdata
llvm-cov show -format=html --show-expansions -instr-profile default.profdata test > output.html

It results in

<span class="region cyan">FOO</span>

So I guess it's because of this hardwired background color

llvm-project/llvm/tools/llvm-cov/SourceCoverageViewHTML.cpp

Lines 202 to 204 in 19cf8de

	.cyan {
	background-color: cyan;
	}

[EdJoPaTo]

Ah yeah, I confused myself there with the font color. I haven't touched cyan in my PR but yeah, looks like that can be improved too.

I'm not entirely sure what the meaning of the cyan marking is or where it might be relevant. Haven't seen it from Rust (which is where I use this) so far I think. (Mainly out of curiosity as "cyan" isn't really a speaking name)

I ran your example and used the updated styles manually (having an older version installed which doesn't have this yet).
Changing the background-color to #0ff6 for cyan seems to work. The accessibility tool in Firefox is happy about its contrast in both light and dark theme. Sadly it's not as clear in the dark theme but having it more obvious also results in less contrast. And for now the basic approach is to have as little theme specifics as possible, so I wouldn't override the font color only for this one.

I can do a follow-up PR. You could also change that. Not really important to me who improves this.

[whentojump]

I believe "cyan" specifically refers to #00ffff? The color is also used in llvm-cov's text output for expansions.
Maybe let's not change either (font) color or background-color yet.

[EdJoPaTo]

I also changed the class red (.red) to something more useful for light and dark themes (The first change in the diff). So I would also change .cyan to background-color: #0ff6 for the same reason. It still looks cyan, just not as bright.

[chapuni]

Could we rename it as more functional name?

[hanickadot]

I think whole HTML output needs a bit of improvement / redoing. Get rid of table for source view. Make instantiations foldable on click...