Page MenuHomePhabricator

Fix 2010 Wikitext editor in night theme
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT

Description

Follow up work to T365764.

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

  • In Special:preferences enable the wikitext editor 2010.
  • Go to a page and click edit
  • Click advanced in the toolbar to open up submenu

What happens?:
It looks like this:

Screenshot 2024-06-12 at 1.30.34 PM.png (816×1 px, 276 KB)

Screenshot 2024-06-12 at 1.35.32 PM.png (612×779 px, 190 KB)

What should have happened instead?

  • .ext-WikiEditor-ManualWidget should be updated to use a token (@background-color-base)
  • The icons are white on gray background - either the background should be disabled in night theme, or the standard theme should use a token for this background (suggested .wikiEditor-ui-toolbar {background-color: @background-color-base;} with slight visual change
  • The editor should stop defining its own link color for .wikiEditor-ui-toolbar .tabs span.tab a
  • The footer has a background that is not using a design token. This seems to only require two tokens update in resources/src/mediawiki.action/mediawiki.action.edit.styles.less in core: Proposed: background-color: @background-color-base; color: @color-base);

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

Additional QA

Repeat test g, l in T363780#9844863

QA Results - Beta

ACStatusDetails
1T367362#9932202

QA Results - PROD

ACStatusDetails
1T367362#9971573

Event Timeline

Path of least resistance to fix this:

  • Add notheme class to turn off the night theme on the toolbar.
ovasileva triaged this task as Medium priority.Jun 13 2024, 5:34 PM
ovasileva raised the priority of this task from Medium to High.Jun 18 2024, 11:01 AM
Jdlrobson renamed this task from [Regression] 2010 Wikitext editor broken by global icon invert to Fix 2010 Wikitext editor in night theme.Jun 20 2024, 7:10 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a project: WikiEditor (2010).
Jdlrobson updated the task description. (Show Details)

In this situation, I think using the invert approach to achieve dark-mode compatibility could be problematic for the following technical reasons:

  • The Wikitext editor includes an embedded content preview. This preview already uses the dark-mode color palette
  • The Wikitext editor includes OOUI icons which have already been inverted
  • The Wikitext editor includes OOUI dialogs which use the dark-mode color palette.

Applying an invert with this mix of approaches could lead to items being double inverted. Therefore, I think the best approach is to update extension:Wikieditor and replace hardcoded color values with design tokens. The following is a list of values that should be replaced with design tokens (from codesearch):

I'm unsure about the maintenance status of this extension though, the maintainers page list the Editing-team as the stewards of this extension and @TheDJ as the maintainer. @TheDJ are these changes something you'd be interested in implementing?

Change #1049948 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/core@master] Replace `.editOptions` colors with Codex tokens

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

I'm unsure about the maintenance status of this extension though, the maintainers page list the Editing-team as the stewards of this extension and @TheDJ as the maintainer. @TheDJ are these changes something you'd be interested in implementing?

I'm a maintainer in so far that I do stuff, if WMF doesn't do it. But I can't make promises as to what and when.

Change #1049958 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/extensions/WikiEditor@master] Partially replace hardcoded colors with Codex tokens

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

I'm a maintainer in so far that I do stuff, if WMF doesn't do it. But I can't make promises as to what and when.

@TheDJ thanks, just wasn't sure what the maintenance status of this extension was.

The patches provided above address the Web team's concerns about extension:Wikieditor legibility in dark-mode (i.e. white text on white backgound). More updates can certainly be made in this direction, but I think this gets it to a usable state.

Screenshot 2024-06-26 at 11.01.35 AM.png (1×2 px, 479 KB)
Screenshot 2024-06-26 at 11.01.48 AM.png (1×2 px, 469 KB)
Screenshot 2024-06-26 at 11.01.59 AM.png (1×2 px, 428 KB)

@Jdrewniak I fixed the arrows with skin-invert, and updated a few more borders.

Do you think we should set notheme for the jquery windows ?

Screenshot 2024-06-26 at 20.45.47.png (660×1 px, 57 KB)

And i'll make a subticket for MediaWiki-extensions-TemplateWizard, which has this gem. T368575: Fix 2010 TemplateWizard in night theme

Screenshot 2024-06-26 at 20.38.24.png (940×1 px, 73 KB)

Change #1049948 merged by jenkins-bot:

[mediawiki/core@master] Replace `.editOptions` colors with Codex tokens

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

Change #1049958 merged by jenkins-bot:

[mediawiki/extensions/WikiEditor@master] Partially replace hardcoded colors with Codex tokens

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

Test Result - Beta

Status: ✅ PASS
Environment: Beta
OS: macOS Sonoma 14.5
Browser: Chrome 126
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps
  1. Repeat test g, l in T363780#9844863
g
2024-06-27_11-37-06.png (1×2 px, 385 KB)
l
2024-06-27_11-35-18.png (1×2 px, 458 KB)
ovasileva claimed this task.

There seems to be other issues on this page but specific for this task, this passes.

Test Result - PROD

Status: ✅ PASS
Environment: PROD
OS: macOS Sonoma 14.5
Browser: Chrome 126
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps
  1. Repeat test g, l in T363780#9844863
g
2024-07-10_14-56-19.png (1×3 px, 641 KB)
l
2024-07-10_14-58-01.png (703×2 px, 437 KB)