Page MenuHomePhabricator

Prepare syntax highlighting for night mode
Closed, ResolvedPublic1 Estimated Story PointsBUG REPORT

Description

NOTE: Blocks deployment on mediawiki.org (15% of all errors there)

Steps to replicate the issue (include links if applicable):

What happens?:
Code block is unreadable

Screenshot 2024-02-07 at 8.13.50 PM.png (722×1 px, 109 KB)

What should have happened instead?:
Code block should be readable.

Software version (skip for WMF-hosted wikis like Wikipedia):

Solutions

  • Quick short term fix ***

Assert a color.

div.mw-highlight {
    background-color: white;
    color: @color-base;
}
  • Long term fix ***

We likely need to introduce a night mode set of styles.

QA Results - Beta

ACStatusDetails
1T356956#9728498

QA Results - PROD

ACStatusDetails
1T356956#9761477

Event Timeline

Change 1003569 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/SyntaxHighlight_GeSHi@master] Make syntax highlighting readable in night mode

https://gerrit.wikimedia.org/r/1003569

Jdlrobson raised the priority of this task from Medium to High.Mar 8 2024, 11:57 PM
Jdlrobson updated the task description. (Show Details)

Change #1003569 merged by jenkins-bot:

[mediawiki/extensions/SyntaxHighlight_GeSHi@master] Make syntax highlighting readable in night mode

https://gerrit.wikimedia.org/r/1003569

Change #1020857 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/SyntaxHighlight_GeSHi@master] Adjust colors for remaining color contrast issues in night mode

https://gerrit.wikimedia.org/r/1020857

Change #1020857 merged by jenkins-bot:

[mediawiki/extensions/SyntaxHighlight_GeSHi@master] Adjust colors for remaining color contrast issues in night mode

https://gerrit.wikimedia.org/r/1020857

Jdlrobson lowered the priority of this task from High to Medium.
Jdlrobson set the point value for this task to 1.
Edtadros subscribed.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

Visit https://m.mediawiki.org/wiki/Extension:MobileFrontend?minervanightmode=1 or https://m.mediawiki.org/wiki/Manual:Configuring_file_uploads?minervanightmode=1 or https://en.m.wikipedia.beta.wmflabs.org/wiki/SyntaxHighlight?minervanightmode=1
Scroll to code block
✅ AC1: Code block should be readable.

screenshot 229.png (932×429 px, 41 KB)

screenshot 228.png (932×429 px, 71 KB)

screenshot 227.png (932×429 px, 73 KB)

Looks good, resolving.

Test Result - PROD

Status: ✅ PASS
Environment: PROD
OS: macOS Sonoma 14.4.1
Browser: Chrome 124
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

Visit https://en.m.wikipedia.org/wiki/Code_folding?minervanightmode=1
Scroll to code block
✅ AC1: Code block should be readable.

2024-05-01_10-58-52.png (649×743 px, 113 KB)

Change #1032792 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/SyntaxHighlight_GeSHi@master] Apply background to

https://gerrit.wikimedia.org/r/1032792

Change #1032792 merged by jenkins-bot:

[mediawiki/extensions/SyntaxHighlight_GeSHi@master] Apply background to pre tags

https://gerrit.wikimedia.org/r/1032792

Change #1035658 had a related patch set uploaded (by Steven Rawson; author: Steven Rawson):

[mediawiki/extensions/SyntaxHighlight_GeSHi@master] SyntaxHighlight: Add color to override skin

https://gerrit.wikimedia.org/r/1035658

Change #1035658 merged by jenkins-bot:

[mediawiki/extensions/SyntaxHighlight_GeSHi@master] SyntaxHighlight: Add color to override skin

https://gerrit.wikimedia.org/r/1035658