Page MenuHomePhabricator

Vector 2022: VisualEditor toolbar and overlays should appear in night theme
Closed, ResolvedPublic3 Estimated Story Points

Description

Background

VisualEditor toolbar and overlays currently appears in the light theme. This is done via a rule inside the Vector skin. Removing this uncovers over issues. I cannot see a short term fix using invert that can be applied here, given VisualEditor itself is embedded in the page.

User story

As a reader I want my editor in night theme.

Requirements

  • OOUI has support for night theme.
  • T365764 has been fixed.

Requirement

Ensure that the VisualEditor toolbar and overlays in the Vector 2022 skin appear in the night theme, fixing specified issues to ensure all elements are legible and properly styled.

BDD

Feature: VisualEditor Toolbar and Overlays in Night Theme

  Scenario: Ensure toolbar and overlays appear in night theme
    Given the user has enabled night mode
    When the user opens VisualEditor in the Vector 2022 skin
    Then the toolbar and overlays should appear in the night theme
    And all elements should be legible and properly styled

Test Steps

Test Case 1: Verify VisualEditor Toolbar and Overlays in Night Theme

  1. Enable night mode.
  2. Open VisualEditor in the Vector 2022 skin.
  3. AC1: Confirm the toolbar appears in the night theme.
  4. AC2: Confirm overlays appear in the night theme.
  5. AC3: Confirm all elements are legible and properly styled.

Acceptance criteria

  • Fix all issues defined in the scope section that result from enabling OOUI's night theme are fixed.
  • The notheme class is removed from Vector and VisualEditor is opted into night theme with a note that we have approval from Olga/Editing team that this is "shippable".
  • Fixing any issues with input elements which are using light theme e.g. musical notation/add code/chemical formulation are out of scope for this ticket - as they require changes in other extensions.
NOTE: If we do find another major issue that is not documented here, we will create another ticket and descope AC 2.

Scope

  • Fix the omega menu

Screenshot 2024-06-12 at 4.36.06 PM.png (354×1 px, 56 KB)

  • Fix gallery caption

Screenshot 2024-06-12 at 4.39.45 PM.png (854×1 px, 95 KB)

  • Invert images in chemical and math formula areas.

Screenshot 2024-06-12 at 4.41.18 PM.png (286×1 px, 41 KB)

Out of scope

Communication criteria - does this need an announcement or discussion?

N/A

Rollback plan

N/A

This task was created by Version 1.0.0 of the Web team task template using phabulous

QA Results - Beta

QA Results - Prod

ACStatusDetails
1T366737#9975770
2T366737#9975770
3T366737#9975770

Related Objects

StatusSubtypeAssignedTask
ResolvedDTorsani-WMF
Resolvedegardner
Resolvedovasileva
Resolvedovasileva
ResolvedFeatureovasileva
Resolvedovasileva
Resolvedovasileva
ResolvedJdlrobson
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
DuplicateBUG REPORTNone
Resolvedovasileva
ResolvedNone
DuplicateBUG REPORTNone
Resolvedovasileva
ResolvedJScherer-WMF
ResolvedDesignovasileva
DuplicateNone
ResolvedBUG REPORTJdlrobson
ResolvedAnneT
ResolvedBUG REPORTJdlrobson
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
ResolvedDTorsani-WMF
Resolvedovasileva
ResolvedBUG REPORTovasileva
ResolvedGMikesell-WMF
Resolvedovasileva
ResolvedJdlrobson
DeclinedFeatureegardner
DuplicateNone
Resolvedovasileva
DuplicateBUG REPORTNone
DeclinedFeatureegardner
DuplicateCCiufo-WMF
Resolvedovasileva
ResolvedNBaca-WMF
DeclinedVolker_E
ResolvedBUG REPORTovasileva
ResolvedBUG REPORTovasileva
Resolvedovasileva
ResolvedBUG REPORTovasileva
Resolvedovasileva
ResolvedBUG REPORTovasileva
ResolvedSpikeovasileva
Resolvedovasileva

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Jdlrobson renamed this task from VisualEditor toolbar and overlays should appear in night theme to Vector 2022: VisualEditor toolbar and overlays should appear in night theme.Jun 6 2024, 6:04 PM

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

[mediawiki/skins/Vector@master] WIP: Enable night mode in VisualEditor

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

I've scoped this down as much as I possibly can for estimation by prioritizing the broken experiences. It would be nice to get this in before Monday if possible - since this regresses the editor in several places based on how it currently works...

Jdlrobson set the point value for this task to 3.

Test wiki created on Patch demo by JDrewniak (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/7d24f5ac63/w

Yep! with caveat, we may need to block merging this on T366197 if we discover the scope is not enough to make it "shippable" :-).

Sounds good! Currently struggling to even get the extension set up locally, so we'll cross that bridge when we get to it haha

Once https://phabricator.wikimedia.org/T366197 is merged, we can merge this patch. After this we'll need to QA this change

The VE submodule in Extension:VisualEditor has just been merged https://gerrit.wikimedia.org/r/c/mediawiki/extensions/VisualEditor/+/1048001
So the following patch that removes the .notheme class from VE in Vector is ready to be reviewed now :)
https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/1039804

Change #1048049 had a related patch set uploaded (by Jdlrobson; author: Bernard Wang):

[mediawiki/skins/Vector@master] Remove OOUI popup from OOUI overrides in order to enable dark mode in echo

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

Change #1039804 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] Enable night mode in VisualEditor

Reason:

Merged into https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/1048049?usp=search

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

Change #1048049 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Remove OOUI overrides

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

@Jdlrobson @ovasileva Please review AC2 and AC4, thanks!

Test Result - Beta

Status: ❓AC2; ❌AC4
Environment: Beta
OS: macOS Sonoma 14.5
Browser: Chrome 126
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1: Ensure Omega Menu Displays Correctly in Night Theme

  1. Open Wikipedia on the Vector 2022 skin and enable night theme mode.
  2. Open the VisualEditor.
  3. Open the omega menu.

✅AC1: Confirm that the omega menu displays correctly.

2024-06-24_09-41-44.mp4.gif (254×970 px, 747 KB)

Test Case 2: Fix unreadable warning text in citation, template workflows

  1. Open Wikipedia on the Vector 2022 skin and enable night theme mode.
  2. Open the VisualEditor.
  3. Open the citation menu. (News, Insert:Infobox)

❓AC2: Confirm that the warning text is readable.
Look like the screenshots above. Are they supposed to be lighter or is this fine?

2024-06-24_09-43-54.png (416×980 px, 78 KB)

2024-06-24_09-54-49.png (396×1 px, 41 KB)

Test Case 3: Fix gallery caption

  1. Open Wikipedia on the Vector 2022 skin and enable night theme mode.
  2. Open the VisualEditor.
  3. Open the Gallery menu.

✅AC3: Confirm that the Gallery menu displays correctly.

2024-06-24_09-47-11.png (654×703 px, 55 KB)

Test Case 4: Invert images in chemical and math formula areas

  1. Open Wikipedia on the Vector 2022 skin and enable night theme mode.
  2. Open the VisualEditor.
  3. View images in the specified overlays.

❌AC4: Confirm that the chemical and math formulas are correctly inverted.

Formulas are still inverted

2024-06-24_09-49-55.png (706×1 px, 82 KB)

2024-06-24_09-49-04.png (655×894 px, 65 KB)

@JScherer-WMF what do you think of AC2? From what I can tell it passes color contrast, but I agree it's a bit hard to read

Change #1049641 had a related patch set uploaded (by Stoyofuku-wmf; author: Stoyofuku-wmf):

[mediawiki/extensions/Math@master] Invert mathematical formulas in visual editor

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

Moving to code review for the formulas - pending a response from @JScherer-WMF on whether we need to do anything about the text

Change #1049641 merged by jenkins-bot:

[mediawiki/extensions/Math@master] Invert mathematical formulas in visual editor

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

I opened T368480 in case AC2 is more complicated than expected. @SToyofuku-WMF the text does not look color compliant to me.

Screenshot 2024-06-25 at 5.14.44 PM.png (235×749 px, 49 KB)

AC4 is ready for another round of QA.

ovasileva raised the priority of this task from High to Needs Triage.Jun 27 2024, 4:49 PM
ovasileva triaged this task as High priority.

@Jdlrobson Please review the operator section on light vs dark. If that is fine, we can move it to sign-off, thanks!

Test Case 4: Invert images in chemical and math formula areas

Open Wikipedia on the Vector 2022 skin and enable night theme mode.
Open the VisualEditor.
View images in the specified overlays.
✅AC4: Confirm that the chemical and math formulas are correctly inverted.

Chemical Formula
2024-06-27_11-17-22.mp4.gif (652×896 px, 604 KB)
Math Formula
2024-06-27_11-18-57.mp4.gif (650×900 px, 828 KB)

❓Why are you some of the operators light and some are darker?

2024-06-27_11-19-45.png (647×900 px, 47 KB)

❓Why are you some of the operators light and some are darker?

This is fine and tracked in T364119. It is one of the downsides of the invert approach we're taking. A better fix is planned :)

Thank you for the secondary QA @GMikesell-WMF! I think this one is ready to sign off.

Test wiki on Patch demo by JDrewniak (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/7d24f5ac63/w/

Edtadros subscribed.

Test Result - Prod

Status: ✅ PASS / ❓Need More Info / ❌ FAIL
Environment: enwiki
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1: Verify VisualEditor Toolbar and Overlays in Night Theme

  1. Enable night mode.
  2. Open VisualEditor in the Vector 2022 skin.
  3. AC1: Confirm the toolbar appears in the night theme.

screenshot 152.png (1×1 px, 292 KB)

screenshot 153.png (1×1 px, 295 KB)

screenshot 154.png (1×1 px, 290 KB)

screenshot 158.png (1×1 px, 325 KB)

screenshot 161.png (1×1 px, 340 KB)

screenshot 162.png (1×1 px, 337 KB)

screenshot 163.png (1×1 px, 325 KB)

screenshot 164.png (1×1 px, 325 KB)

  1. AC2: Confirm overlays appear in the night theme.

screenshot 155.png (1×1 px, 377 KB)

screenshot 156.png (1×1 px, 299 KB)

screenshot 157.png (1×1 px, 291 KB)

screenshot 159.png (1×1 px, 274 KB)

screenshot 160.png (1×1 px, 299 KB)

  1. AC3: Confirm all elements are legible and properly styled.

See AC1 and AC2

Edtadros updated the task description. (Show Details)