Page MenuHomePhabricator

Enable dark mode on mobile visual editor
Closed, ResolvedPublic1 Estimated Story Points

Description

NOTE: Work on this shouldn't begin until a patch has been merged for T366197.

Background

Previously we marked all OOUI overlays to appear in light theme in mobile. This can be seen by clicking edit, and attempting to add a citation in VisualEditor

Screenshot 2024-06-06 at 11.05.49 AM.png (928×1 px, 80 KB)

User story

As a mobile user I want OOUI dialogs to appear in night theme

Requirements

  • The new OOUI release has occurred.
  • T366197 has been fixed.
  • Undo the previous workarounds to enable light mode e.g. notheme class on edit switcher and notheme on #mw-teleport-target

Refined Requirement

Enable dark mode on mobile VisualEditor.

BDD

Given a mobile user on the VisualEditor,
When dark mode is enabled,
Then OOUI dialogs should appear in night theme.

Test Steps

Test Case 1: Ensure dark mode in VisualEditor

  1. Open the mobile VisualEditor.
  2. Enable dark mode.
  3. Observe OOUI dialogs.

AC1: OOUI dialogs should appear in the night theme.

Out of scope

*The citation workflow should be fixed by T366197

Screenshot 2024-06-12 at 5.36.42 PM.png (1×3 px, 109 KB)

Design

  • Add mockups and design requirements

Acceptance criteria

  • Add acceptance criteria

Communication criteria - does this need an announcement or discussion?

  • Add communication criteria

Rollback plan

  • What is the rollback plan in production for this task if something goes wrong?

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

QA Results - Beta

ACStatusDetails
1T366832#9918338

QA Results - PROD

ACStatusDetails
1T366832#9987372

Event Timeline

Jdlrobson changed the task status from Open to Stalled.Jun 13 2024, 12:40 AM
Jdlrobson added a project: MobileFrontend.
Jdlrobson updated the task description. (Show Details)

This one looks pretty straightforward, if T366197 can be done. I don't see any shortcuts we can take on this one, if we are not comfortable with keeping it in light mode.

Jdlrobson updated the task description. (Show Details)
Jdlrobson set the point value for this task to 2.Jun 13 2024, 6:01 PM
Jdlrobson changed the point value for this task from 2 to 1.

The scope of this ticket is only removing the notheme class.

Jdlrobson changed the task status from Stalled to Open.Jun 20 2024, 4:57 PM

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

[mediawiki/extensions/MobileFrontend@master] [WIP] Remove `.notheme` class for mobile editor

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

The patch above enabled dark-mode in the mobile editor, however, it looks like there's a few more hard coded colors in VE that will need to be fixed before we merge that.

Screenshot 2024-06-20 at 3.02.26 PM.png (1×1 px, 422 KB)

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

[mediawiki/skins/MinervaNeue@master] Short term fix for enabling VisualEditor in night mode

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

Change #1048072 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Temporary fix for enabling Mobile VisualEditor in night mode

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

Change #1048063 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Remove `.notheme` class for mobile editor

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

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

Test Case 1: Ensure dark mode in VisualEditor

  1. Open the mobile VisualEditor.
  2. Enable dark mode.
  3. Observe OOUI dialogs.

AC1: OOUI dialogs should appear in the night theme.

No textW/text
2024-06-24_09-05-00.png (531×766 px, 37 KB)
2024-06-24_09-04-20.png (485×765 px, 31 KB)

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

Test Case 1: Ensure dark mode in VisualEditor

  1. Open the mobile VisualEditor (ex. https://en.m.wikipedia.org/wiki/California).
  2. Enable dark mode.
  3. Observe OOUI dialogs.

AC1: OOUI dialogs should appear in the night theme.

No textW/text
2024-06-24_09-05-00.png (531×766 px, 37 KB)
2024-06-24_09-04-20.png (485×765 px, 31 KB)