Dark Mode: Code Block in Test Report Details has bad colors

Summary

The <pre class="code-block rounded"> element in the modal window opened after clicking the View details button in CI/CD Pipeline's test report is not readable in dark theme.

Steps to reproduce

1. Swith to the Dark Mode (alpha)
2. Open any Test Report with a failed test containing some details about the failure
3. Click View details

Example Project

https://gitlab.com/himura/gitlab-test-reports/-/pipelines/322695440/test_report

What is the current bug behavior?

.code-block {
    background: #fff;
    color: #c4c4c4;
}

What is the expected correct behavior?

The code background is dark.

Relevant logs and/or screenshots

Results of GitLab environment info

Both GitLab.com and Self-hosted versions.

Possible fixes

• https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/stylesheets/framework/blocks.scss#L346
• https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/stylesheets/themes/_dark.scss#L83

changed title from Dark theme: Code block in test report details has bad colors to Dark Mode: Code Block in Test Report Details has bad colors

added automation:ml grouppipeline security labels

This issue was automatically tagged with the label grouptesting by TanukiStan, a machine learning classification model, with a probability of 0.64.

If this label is incorrect, please tag this issue with the correct group label as well as automation:ml wrong to help me learn from my mistakes.

Setting label(s) devopsverify sectionops based on grouptesting.

added devopsverify sectionops labels

mentioned in issue gitlab-org/quality/triage-reports#3559 (closed)

added Category:Code Testing and Coverage UX debt UX frontend labels

changed milestone to %Backlog

added [deprecated] Accepting merge requests label

Happening with any code block:

test code block

@CarlosAlbaladejo code blocks seem to respect whatever the user has selected as their preferred Syntax Highlighting

This works well for me now

added UI polish + 1 deleted label

removed UX debt label

Thanks @himura for creating this issue!

@tauriedavis @jeldergl I think this is on your lane. Could you please help assess this issue? Thanks!

Thanks @rayana. Foundations currently does not have capacity to take on dark mode at this time. That said, our direction is to create a systematized approach to dark mode UI that can scale across components. Currently, dark mode is in alpha so the expectation is that there may be bugs or issues such as this one. We really do hope to get to dark mode in the near future, but currently do not have anything planned.

I will add this issue to the epic tracking dark mode improvements.

@tauriedavis @rayana would an MVC approach to this be use either the default OR whatever syntax highlighting theme the user has selected?

cc @shampton @mfluharty as this applies to #336976 (comment 647849656) as well.

@jheimbuck_gl

would an MVC approach to this be use either the default

Making these blocks use a dark theme in dark mode and a light theme in normal mode might be as easy as removing these two lines to let the blocks use default dark/light styling instead of specific color definitions.

OR whatever syntax highlighting theme the user has selected?

We could make this use the user's code theme by adding the corresponding theme class and a code class to the <pre /> in code_block.vue:

diff --git a/app/assets/javascripts/vue_shared/components/code_block.vue b/app/assets/javascripts/vue_shared/components/code_block.vue
index 1928bf6dac5..9856f35c7f6 100644
--- a/app/assets/javascripts/vue_shared/components/code_block.vue
+++ b/app/assets/javascripts/vue_shared/components/code_block.vue
@@ -24,8 +24,13 @@ export default {
       return isScrollable ? scrollableStyles : null;
     },
   },
+  userColorScheme: window.gon.user_color_scheme,
 };
 </script>
 <template>
-  <pre class="code-block rounded" :style="styleObject"><code class="d-block">{{ code }}</code></pre>
+  <pre
+    class="code-block rounded code"
+    :class="$options.userColorScheme"
+    :style="styleObject"
+  ><code class="d-block">{{ code }}</code></pre>
 </template>

Either of these approaches would affect all <code-block />s, so we'd also have to figure out if that's what we want in these places:

/cc @shampton

Thanks for the update @mfluharty we'll want to loop in the folks in groupsource code and groupstatic analysis since it looks like some of those components touch their features. cc @sarahwaldner @mvanremmerden @tmccaslin @jmandell.

This is going to be groupthreat insights. We've seen a few other dark mode bugs in vuln management UI.

/cc @matt_wilson @andyvolpe @beckalippert

@jheimbuck_gl is this a ~bug for featureenhancement? If these are frontend -only changes, that might be something the groupthreat insights team can pick up in the near future.

@matt_wilson it's a ~bug and i'll apply the label. I think @mfluharty is saying if we make the change for the test details we'll impact all the other areas as well so you'd get this "free" but wanted to make sure you're in the loop / can review along with us.

@jheimbuck_gl Ah OK, I wasn't sure if this was something for us to change ourselves or just review. We can definitely review

Thanks @matt_wilson

@mfluharty can you make sure we get someone from groupthreat insights as a reviewer on the MR for this issue once it's ready? I'm guessing that'd be @beckalippert

added to epic &2902

marked #336976 (closed) as a duplicate of this issue

marked this issue as related to #336976 (closed)

mentioned in issue #336976 (closed)

added usability label

changed milestone to %14.4