Page MenuHomePhabricator
Create Task
Maniphest T371071

Dark mode not compatible with Translate extension Special:Translate page
Open, MediumPublic4 Estimated Story Points
Actions

Assigned To
None
Authored By
XtexChooser
Jul 26 2024, 1:30 AM
Tags
Referenced Files
F57701142: image.png
Nov 14 2024, 12:57 PM
F57701140: image.png
Nov 14 2024, 12:57 PM
F57631564: image.png
Oct 21 2024, 8:48 PM
F56689311: image.png
Jul 26 2024, 1:30 AM
Subscribers
abi_
Aklapper
jhsoby
Nikerabbit
stjn
Tacsipacsi
XtexChooser

Description

I don't want to see Special:Translate in night mode now, as the contrast there is not enough, therefore texts there are hard to read.

image.png (771×1 px, 178 KB)

Pending issues

Scoping this to Special:Translate page only.

  • ULS is not using dark theme - Handle separately.
  • Mode switcher at the bottom is not styled appropriately for the dark theme
  • Hints that appear on pressing Alt are practically unreadable with the current hack. See: https://phabricator.wikimedia.org/T371071#10248401
  • Validation errors in tux are not properly styled.
  • Text and background contrast for disabled button is not adequate.

Details

SubjectRepoBranchLines +/-
Lessify LESS files, part 3mediawiki/extensions/Translatemaster+230 -224
Lessify LESS files, part 2mediawiki/extensions/Translatemaster+534 -499
Lessify LESS files, part 1mediawiki/extensions/Translatemaster+492 -479
Change CSS files into LESS filesmediawiki/extensions/Translatemaster+20 -20
Use less variables to accommodate dark modemediawiki/extensions/Translatemaster+42 -37
Fix dark mode border on 'mark this page for translation' barmediawiki/extensions/Translatemaster+4 -2
Use Codex variables in stats table componentmediawiki/extensions/Translatemaster+12 -9
Make the group selector readable in night modemediawiki/extensions/Translatemaster+6 -5
Support dark mode with skin-invert and notheme on translate special pagemediawiki/extensions/Translatemaster+2 -1
Customize query in gerrit

Related Objects
Search...

Event Timeline

XtexChooser created this task.Jul 26 2024, 1:30 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 26 2024, 1:30 AM
Jdlrobson edited projects, added MediaWiki-extensions-Translate, dark-mode; removed Web-Team-Backlog.Jul 26 2024, 1:46 AM
Jdlrobson removed a project: Wikimedia-Site-requests.
gerritbot added a comment.Jul 26 2024, 1:49 AM

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

[mediawiki/extensions/Translate@master] Add temporary dark mode with skin-invert and notheme to translate special page

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

gerritbot added a project: Patch-For-Review.Jul 26 2024, 1:49 AM
Jdlrobson renamed this task from Disable night-mode for Special:Translate temporary to Dark mode not compatible with Special:Translate page.Jul 26 2024, 1:49 AM
Jdlrobson subscribed.

Thanks for the report. We are in the process of dismantling the code for allowing exceptions for dark mode, but we can make this work in dark mode with the small change above.

Jdlrobson added a project: Language-Team.Jul 26 2024, 5:27 AM
Jdlrobson moved this task from Backlog to Web (MediaWiki) on the dark-mode board.Jul 26 2024, 4:27 PM
gerritbot added a comment.Jul 30 2024, 5:59 AM

Change #1057038 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] Support dark mode with skin-invert and notheme on translate special page

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

ReleaseTaggerBot added a project: MW-1.43-notes (1.43.0-wmf.17; 2024-08-06).Jul 30 2024, 6:00 AM
Maintenance_bot removed a project: Patch-For-Review.Jul 30 2024, 6:30 AM
abi_ triaged this task as Medium priority.Aug 8 2024, 8:24 AM
abi_ moved this task from Backlog to tux on the MediaWiki-extensions-Translate board.
Jdlrobson added a comment.Aug 13 2024, 11:42 AM

Can this be resolved or did you want to do some QA/additional work here to improve the experience?

Jdlrobson unsubscribed.Aug 13 2024, 11:42 AM
Tacsipacsi subscribed.Aug 13 2024, 1:27 PM

84f6ebaf9716ca812ba8e5acc5133f170f332045 was merged with a FIXME comment, so I guess either this task or a follow-up one needs to remain open.

Tacsipacsi mentioned this in T375696: Translate should use Codex markup, not unsupported message markup.Sep 26 2024, 7:19 AM
Nikerabbit removed a project: Language-Team.Oct 16 2024, 7:47 AM
gerritbot added a comment.Oct 18 2024, 6:51 PM

Change #1081438 had a related patch set uploaded (by Tacsipacsi; author: Tacsipacsi):

[mediawiki/extensions/Translate@master] Make the group selector readable in night mode

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

gerritbot added a project: Patch-For-Review.Oct 18 2024, 6:51 PM
stjn subscribed.Oct 21 2024, 8:48 PM

To log an additional problem: the hints that appear on pressing Alt are practically unreadable with the current hack —

image.png (519×1 px, 96 KB)

The proper night mode support is needed, especially since Translate extension is used not just on translatewiki.net, but in many Wikimedia projects.

stjn added a comment.Oct 22 2024, 11:29 AM

https://translatewiki.net/w/i.php?title=Special:LanguageStats&suppresscomplete=1 special page is also blindingly white, which affects every project page. The most colours there use Codex values already, so should be easy to fix.

gerritbot added a comment.Oct 22 2024, 9:16 PM

Change #1082276 had a related patch set uploaded (by Saint Johann; author: Saint Johann):

[mediawiki/extensions/Translate@master] Use Codex variables in stats table component

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

gerritbot added a comment.Oct 23 2024, 7:51 PM

Change #1081438 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] Make the group selector readable in night mode

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

ReleaseTaggerBot added a project: MW-1.44-notes (1.44.0-wmf.1; 2024-10-29).Oct 23 2024, 8:00 PM
Nikerabbit added projects: Unplanned-Sprint-Work, LPL Essential (LPL Essential 2024 Nov-Dec).Nov 12 2024, 10:23 AM
Nikerabbit set the point value for this task to 2.
Nikerabbit subscribed.

Tagging for review.

Nikerabbit moved this task from Backlog to Needs Review on the LPL Essential (LPL Essential 2024 Nov-Dec) board.Nov 12 2024, 10:23 AM
gerritbot added a comment.Nov 13 2024, 5:43 PM

Change #1082276 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] Use Codex variables in stats table component

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

ReleaseTaggerBot edited projects, added MW-1.44-notes (1.44.0-wmf.4; 2024-11-19); removed MW-1.44-notes (1.44.0-wmf.1; 2024-10-29).Nov 13 2024, 6:00 PM
Maintenance_bot removed a project: Patch-For-Review.Nov 13 2024, 6:31 PM
Nikerabbit moved this task from Needs Review to Pending Deployment on the LPL Essential (LPL Essential 2024 Nov-Dec) board.Nov 14 2024, 8:15 AM
abi_ subscribed.EditedNov 14 2024, 12:57 PM

Current status on translatewiki.net:

image.png (1×1 px, 153 KB)

image.png (1×1 px, 94 KB)

Issues noticed:

  1. ULS is not using dark theme
  2. Mode switcher at the bottom is not styled appropriately for the dark theme

We should fix the second item, I think the first one can be handled separately.

stjn added a comment.Nov 14 2024, 1:31 PM

Current status would be better looked at by running $( '.skin-invert' ).removeClass( 'skin-invert notheme' ) in console. Special:Translate currently isn’t actually adapted to the night mode, it just uses CSS filters to invert the interface. Which leads to a bunch of issues.

stjn added a comment.Nov 14 2024, 1:42 PM

Ideally would be great to have a list of components and checkmarks in the task description. Some are updated already (like statstable) but others are not, especially Special:Translate, which just has a blanket notheme skin-invert applied. The proper fix to this task would be to transition every component to Codex variables kind of like abandoned https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Translate/+/1082216 did.

Nikerabbit added a comment.Nov 14 2024, 3:12 PM

To me it looks usable. I would just keep the scope of this task at that (fix glaring issues).

We want to reimplement the translation interface using Codex some unknown time in the future. That's a bigger rewrite but will also bring a proper dark mode support.

stjn added a comment.Nov 14 2024, 3:20 PM

I already logged one bug with it here:

In T371071#10248401, @stjn wrote:

To log an additional problem: the hints that appear on pressing Alt are practically unreadable with the current hack —

image.png (519×1 px, 96 KB)

The proper night mode support is needed, especially since Translate extension is used not just on translatewiki.net, but in many Wikimedia projects.

Current night mode support is very insufficient. I don’t think this task should be resolved without fixing it correctly, and not just by the hack that Jdlrobson added.

Nikerabbit added a comment.Nov 14 2024, 3:25 PM

We can file another bug with the scope of fixing it properly. I want to "capture" the effort that has been put into by closing this task and not leaving it hanging open for years.

stjn added a comment.Nov 14 2024, 3:37 PM

As long as night mode support will be actually added so components like those hints can be actually seen (currently I have to guess every time I use it), this task won’t be left hanging open for years. skin-invert solution is a hack, not a fix. Special:Translate wasn’t fixed by it.

Though I guess if ‘ULS support’ in night mode is also just slapping skin-invert notheme at the component and calling it a day (as it seems in Vector-2022), there’s no point to my objections. I’ll just ask that Alt hints also get fixed at least.

jhsoby renamed this task from Dark mode not compatible with Special:Translate page to Dark mode not compatible with Translate extension.Nov 16 2024, 1:43 PM
gerritbot added a comment.Nov 16 2024, 1:43 PM

Change #1091857 had a related patch set uploaded (by Jon Harald Søby; author: Jon Harald Søby):

[mediawiki/extensions/Translate@master] Use less variables to accomodate dark mode

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

gerritbot added a project: Patch-For-Review.Nov 16 2024, 1:43 PM
Tacsipacsi added a comment.Nov 16 2024, 4:20 PM
In T371071#10322780, @Nikerabbit wrote:

To me it looks usable. I would just keep the scope of this task at that (fix glaring issues).

“Usable” is not the same as “compatible”. Apart from the completely unreadable Alt texts and the dark-on-light language selector, skin-invert brings in a number of issues because of which I wouldn’t call it compatible: for example, the background color of the message table is weirdly subtly different from the rest of the page (in light mode, both are #fff, but in night mode, the message table is #000 while the rest is #101418), and images in message documentation are inverted (e.g. translate-manage-intro-other or the especially weirdly-looking wikilove-image).

We want to reimplement the translation interface using Codex some unknown time in the future. That's a bigger rewrite but will also bring a proper dark mode support.

This doesn’t mean that there shouldn’t be a short-term solution for the dark mode compatibility. Even if you don’t want to work on it, I think there are enough volunteers (including myself) who are able and willing to fix the dark mode compatibility.

Nikerabbit added a comment.Nov 16 2024, 4:47 PM

We will review patches to improve dark mode support and I appreciate your efforts. For tracking and reporting purposes, I would appreciate if we can find a way to split the work over multiple smaller tasks under one epic.

Nikerabbit moved this task from Pending Deployment to Needs Review on the LPL Essential (LPL Essential 2024 Nov-Dec) board.Nov 18 2024, 11:56 AM
Nikerabbit added a subtask: T380138: Special:SearchTranslations is not dark mode compatible.Nov 18 2024, 1:30 PM
gerritbot added a comment.Nov 19 2024, 8:41 AM

Change #1091740 had a related patch set uploaded (by Abijeet Patro; author: Majavah):

[mediawiki/extensions/Translate@master] Fix dark mode border on 'mark this page for translation' bar

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

gerritbot added a comment.Nov 19 2024, 9:03 AM

Change #1091740 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] Fix dark mode border on 'mark this page for translation' bar

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

ReleaseTaggerBot edited projects, added MW-1.44-notes (1.44.0-wmf.5; 2024-11-25); removed MW-1.44-notes (1.44.0-wmf.4; 2024-11-19).Nov 19 2024, 10:00 AM
gerritbot added a comment.Nov 19 2024, 10:47 AM

Change #1091857 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] Use less variables to accommodate dark mode

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

Maintenance_bot removed a project: Patch-For-Review.Nov 19 2024, 11:31 AM
abi_ moved this task from Needs Review to Ready for dev on the LPL Essential (LPL Essential 2024 Nov-Dec) board.Nov 22 2024, 1:46 PM

All the latest changes are deployed on translatewiki.net

Still needs some more work. See task details for more information.

abi_ renamed this task from Dark mode not compatible with Translate extension to Dark mode not compatible with Translate extension Special:Translate page.Nov 22 2024, 1:48 PM
abi_ updated the task description. (Show Details)
abi_ added a project: patch-welcome.
abi_ updated the task description. (Show Details)
abi_ added a comment.Nov 22 2024, 1:51 PM

I recommend we create a bigger epic ticket to track work on the entire Translate extension as a whole. I've scoped this to Special:Translate page.

Nikerabbit removed a project: LPL Essential (LPL Essential 2024 Nov-Dec).Wed, Nov 27, 11:58 AM
gerritbot added a comment.Thu, Nov 28, 8:05 AM

Change #1098872 had a related patch set uploaded (by Jon Harald Søby; author: Jon Harald Søby):

[mediawiki/extensions/Translate@master] Change CSS files into LESS files

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

gerritbot added a project: Patch-For-Review.Thu, Nov 28, 8:05 AM
gerritbot added a comment.Thu, Nov 28, 12:02 PM

Change #1098872 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] Change CSS files into LESS files

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

Maintenance_bot removed a project: Patch-For-Review.Thu, Nov 28, 12:32 PM
ReleaseTaggerBot edited projects, added MW-1.44-notes (1.44.0-wmf.6; 2024-12-03); removed MW-1.44-notes (1.44.0-wmf.5; 2024-11-25).Thu, Nov 28, 1:00 PM
gerritbot added a comment.Thu, Nov 28, 2:51 PM

Change #1098968 had a related patch set uploaded (by Jon Harald Søby; author: Jon Harald Søby):

[mediawiki/extensions/Translate@master] Lessify LESS files, part 1

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

gerritbot added a project: Patch-For-Review.Thu, Nov 28, 2:51 PM
gerritbot added a comment.Thu, Nov 28, 6:40 PM

Change #1099015 had a related patch set uploaded (by Jon Harald Søby; author: Jon Harald Søby):

[mediawiki/extensions/Translate@master] Lessify LESS files, part 2

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

gerritbot added a comment.Thu, Nov 28, 7:27 PM

Change #1099018 had a related patch set uploaded (by Jon Harald Søby; author: Jon Harald Søby):

[mediawiki/extensions/Translate@master] Lessify LESS files, part 3

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

gerritbot added a comment.Wed, Dec 4, 5:09 AM

Change #1098968 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] Lessify LESS files, part 1

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

ReleaseTaggerBot edited projects, added MW-1.44-notes (1.44.0-wmf.8; 2024-12-17); removed MW-1.44-notes (1.44.0-wmf.6; 2024-12-03).Wed, Dec 4, 6:00 AM
abi_ changed the point value for this task from 2 to 4.Thu, Dec 5, 7:14 AM
gerritbot added a comment.Mon, Dec 9, 8:59 AM

Change #1099015 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] Lessify LESS files, part 2

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

gerritbot added a comment.Mon, Dec 9, 8:59 AM

Change #1099018 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] Lessify LESS files, part 3

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

Maintenance_bot removed a project: Patch-For-Review.Mon, Dec 9, 9:30 AM
jhsoby subscribed.Tue, Dec 10, 12:02 AM
jhsoby mentioned this in T381834: Support dark mode in the Translate extension.Tue, Dec 10, 12:26 AM
jhsoby removed a subtask: T380138: Special:SearchTranslations is not dark mode compatible.
jhsoby added a parent task: T381834: Support dark mode in the Translate extension.
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits