code-coverage-api-plugin
code-coverage-api-plugin copied to clipboard
jenkinsci
Dark Theme Issues
Version report
Jenkins and plugins versions report:
Jenkins: 2.311
OS: Linux - 4.14.238-125.422.amzn1.x86_64
---
ace-editor:1.1
analysis-model-api:10.3.0
ansicolor:1.0.0
ant:1.11
antisamy-markup-formatter:2.1
apache-httpcomponents-client-4-api:4.5.13-1.0
async-http-client:1.9.40.0
authentication-tokens:1.4
aws-codebuild:0.52
aws-codepipeline:0.44
aws-credentials:1.30
aws-java-sdk:1.12.68
bootstrap4-api:4.6.0-3
bootstrap5-api:5.1.1-1
bouncycastle-api:2.24
branch-api:2.6.5
build-timeout:1.20
caffeine-api:2.9.2-29.v717aac953ff3
checks-api:1.7.2
cloudbees-folder:6.16
cobertura:1.16
code-coverage-api:2.0.1
codedeploy:1.23
command-launcher:1.6
copyartifact:1.46.2
credentials:2.6.1
credentials-binding:1.27
dark-theme:0.0.12
dashboard-view:2.17
data-tables-api:1.11.2-1
display-url-api:2.3.5
docker-build-publish:1.3.3
docker-commons:1.17
docker-workflow:1.26
dockerhub-notification:2.5.2
durable-task:1.39
ec2:1.63
echarts-api:5.2.1-2
email-ext:2.83
envinject:2.4.0
envinject-api:1.7
external-monitor-job:1.7
ez-templates:1.3.4
font-awesome-api:5.15.4-1
forensics-api:1.4.0
git:4.8.2
git-client:3.9.0
git-server:1.10
github:1.34.1
github-api:1.123
github-branch-source:2.11.2
github-checks:1.0.13
github-oauth:0.33
github-pullrequest:0.3.0
gradle:1.37.1
groovy-label-assignment:1.2.0
handlebars:3.0.8
jackson2-api:2.12.4
javadoc:1.6
jdk-tool:1.5
jjwt-api:0.11.2-9.c8b45b8bb173
jobConfigHistory:2.28.1
jquery:1.12.4-1
jquery-detached:1.2.1
jquery3-api:3.6.0-2
jsch:0.1.55.2
junit:1.53
ldap:2.7
lockable-resources:2.11
mailer:1.34
mapdb-api:1.0.9.0
matrix-auth:2.6.8
matrix-project:1.19
maven-plugin:3.12
momentjs:1.1.1
monitoring:1.88.0
mstest:1.0.0
nested-view:1.21
node-iterator-api:1.5.1
okhttp-api:3.14.9
pam-auth:1.6
pipeline-build-step:2.15
pipeline-github-lib:1.0
pipeline-graph-analysis:1.11
pipeline-input-step:2.12
pipeline-milestone-step:1.3.2
pipeline-model-api:1.9.2
pipeline-model-definition:1.9.2
pipeline-model-extensions:1.9.2
pipeline-rest-api:2.19
pipeline-stage-step:2.5
pipeline-stage-tags-metadata:1.9.2
pipeline-stage-view:2.19
plain-credentials:1.7
plugin-util-api:2.5.0
popper-api:1.16.1-2
popper2-api:2.10.1-1
powershell:1.6
rebuild:1.32
resource-disposer:0.16
s3:0.11.8
scm-api:2.6.5
scmskip:1.0.3
script-security:1.78
slack:2.48
snakeyaml-api:1.29.1
ssh:2.6.1
ssh-credentials:1.19
ssh-slaves:1.33.0
sshd:3.1.0
structs:1.23
theme-manager:0.6
thinBackup:1.10
timestamper:1.13
token-macro:266.v44a80cf277fd
trilead-api:1.0.13
variant:1.4
warnings-ng:9.5.0
windows-slaves:1.8
workflow-api:2.46
workflow-basic-steps:2.24
workflow-cps:2.94
workflow-cps-global-lib:2.21
workflow-durable-task-step:2.39
workflow-job:2.41
workflow-multibranch:2.26
workflow-scm-step:2.13
workflow-step-api:2.24
workflow-support:3.8
ws-cleanup:0.39
- What Operating System are you using (both controller, and any agents involved in the problem)?
Linux controller, Linux and windows agents.
Reproduction steps
- Navigate to code coverage results for a job
Results
Expected result:
- Colors would look good when using dark theme.
Actual result:
- Colors look bad when using dark theme. -- text striped rows in coverage details are so dark impossible to read on the dark theme background. -- When hovering over a line the text goes black or so dark its impossible to read on the dark theme background. -- Pagination buttons and coverage detail tabs do not match the rest of the UI
Thanks for reporting, this is something that probably needs to be added to the DataTables plugin (and maybe to the Bootstrap plugin as well).
Has there been any progress on this? I am still facing issues with the default setup, thus I patch the offending sections through Tampermonkey (lines of interest from a bigger script):
// FIX: Colors for dark mode of coverage pages.
if (location.pathname.match('/coverage/')) {
// FIX: Display file coverage data with correct colors.
const source_table = document.getElementsByClassName('source')[0];
if (source_table.nodeName != 'TABLE') {
console.warn(source_table);
} else {
source_table.setAttribute('style', 'color: black;');
}
// FIX: File coverage and indirect file coverage table display for odd rows.
['absolute-coverage-table', 'indirect-coverage-table'].forEach(element_id => {
const source_table = document.getElementById(element_id);
if (!source_table) {
return;
}
const style = source_table.getAttribute('style');
source_table.setAttribute('style', style + '; --bs-body-color: var(--bs-gray-600);');
});
// FIX: Labels in the configuration modal.
const configuration_div = document.getElementById('chart-configuration-coverage-history');
console.log(configuration_div);
const head = document.getElementsByTagName('head')[0];
head.innerHTML += `
<style type="text/css">
#chart-configuration-label-coverage-history, label[for="build-domain-coverage-history"], label[for="date-domain-coverage-history"], label[for="builds"], label[for="days"] {
color: #6c757d !important;
}
</style>
`
}
Has there been any progress on this? I am still facing issues with the default setup, thus I patch the offending sections through Tampermonkey (lines of interest from a bigger script):
// FIX: Colors for dark mode of coverage pages. if (location.pathname.match('/coverage/')) { // FIX: Display file coverage data with correct colors. const source_table = document.getElementsByClassName('source')[0]; if (source_table.nodeName != 'TABLE') { console.warn(source_table); } else { source_table.setAttribute('style', 'color: black;'); } // FIX: File coverage and indirect file coverage table display for odd rows. ['absolute-coverage-table', 'indirect-coverage-table'].forEach(element_id => { const source_table = document.getElementById(element_id); if (!source_table) { return; } const style = source_table.getAttribute('style'); source_table.setAttribute('style', style + '; --bs-body-color: var(--bs-gray-600);'); }); // FIX: Labels in the configuration modal. const configuration_div = document.getElementById('chart-configuration-coverage-history'); console.log(configuration_div); const head = document.getElementsByTagName('head')[0]; head.innerHTML += ` <style type="text/css"> #chart-configuration-label-coverage-history, label[for="build-domain-coverage-history"], label[for="date-domain-coverage-history"], label[for="builds"], label[for="days"] { color: #6c757d !important; } </style> ` }
There is nothing to be done in the coverage plugin. The only missing part is the global styling in the https://github.com/jenkinsci/data-tables-api-plugin.
Before spending more time in hacking the existing CSS values using Tampermonkey I would rather recommend to invest some more time to create a simpler PR for the plugin that will fix the problems for all users 😄
Before spending more time in hacking the existing CSS values using Tampermonkey I would rather recommend to invest some more time to create a simpler PR for the plugin that will fix the problems for all users
While this would indeed be the cleaner solution, hacking together this script has been much easier for me than deep-diving into the Jenkins code (which I am absolutely not familiar with). Additionally, the fixes do not respect the dark-mode setting at all, and colors/styles are clearly debatable.
There is nothing to be done in the coverage plugin. The only missing part is the global styling in the https://github.com/jenkinsci/data-tables-api-plugin.
I am not completely sure about this, as I discovered at least three independent issues related to the dark theme:
- The line-based coverage detail pages uses white text on white or light background. My above code sets the text color to black here.
- The table display is wrong for odd rows by default and when hovering even rows. My above code basically disables highlighting for odd rows, while fixing the default display.
- The configuration modal for the history chart is barely readable. This appears to have been fixed since I last checked it, as it now looks correct with without the fix as well.
There is nothing to be done in the coverage plugin. The only missing part is the global styling in the https://github.com/jenkinsci/data-tables-api-plugin.
What about the source file view? Is that handled by the data-tables plugin as well?
This is how it currently looks like for me:
Screenshot
The warnings-ng plugin is able to display and highlight source code views just fine (well... it isn't perfect either, but at least it's readable).
Looks like warnings-ng is using https://github.com/jenkinsci/prism-api-plugin for source code rendering. Can this plugin do the same?
Yes, that is the idea at some point. I did not find a way yet to handle the line annotations (coverage) in prism. Interested in trying to add support for prism here?
I'm having the same issue as @Pesa, the source code view is impossible to read with dark mode enabled.
Well, I don't use the dark theme so switching to prism is not on my priory list.
Since this is a community project that evolves by volunteers it would make sense that the people who are actively using the dark theme would start a joint effort to get that fixed. Simply changing the text colors to use the active Jenkins color would be a first step that can even be contributed by total newbies.
Fixed in https://github.com/jenkinsci/code-coverage-api-plugin/releases/tag/v4.6.0