Page MenuHomePhabricator

Mobile editor inconsistently renders both night mode and light mode elements
Closed, ResolvedPublic3 Estimated Story PointsBUG REPORT

Description

NOTE: The scope of this ticket is to make sure that the editor is readable, NOT to switch it over to the night mode theme. NOTE: Jon to add QA steps for specific elements we care about on https://it.m.wikipedia.org/wiki/Spain_(gruppo_musicale)?minervanightmode=1#/editor/0

This was flagged in QA for T356427. The spike T353663 has not clarified what we should do about OOUI but this is arguably the most high profile bug relating to OOUI integration that requires a fix

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

What happens?:
The mobile editor consists of MobileFrontend components and OOUI components. This means that the overlay gets both night and light mode themed elements.

Screenshot 2024-02-26 at 2.43.55 PM.png (764×1 px, 121 KB)

Screenshot 2024-02-26 at 2.43.24 PM.png (1×1 px, 327 KB)

What should have happened instead?:

A good short term fix would be to target the problematic elements in a skin style via CSS targeting following elements

 .skin-night-mode-clientpref-1 .ve-ui-overlay-global-mobile {
   .oo-ui-toolbar-popups,
   .oo-ui-textInputWidget .oo-ui-inputWidget-input { background; color; }
    .oo-ui-window-head {
      .oo-ui-buttonElement-button { filter: invert(1); }
   }
}
.

Expected results from short-term fix:

  1. All of the wikitext editor appears in night mode. All elements are functional and accessible.
  2. The OOUI portions of VE appear in day mode. All elements are functional and accessible. The remainder of VE appears in night mode. All elements are functional and accessible

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

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

QA Results - Beta

ACStatusDetails
1T358528#9614185

QA Results - Prod

ACStatusDetails
1T358528#9647629
2T358528#9647629

Event Timeline

Jdlrobson set the point value for this task to 3.

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

[mediawiki/extensions/MobileFrontend@master] Switch editor overlay to light mode theme

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

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

[mediawiki/skins/MinervaNeue@master] Add `.notheme` class to teleportTarget

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

I've posted an alternative patch to the one @Jdlrobson originally wrote. This second approach adds the .notheme class to the teleportTarget element that VE uses for menus and overlays. This results in a state where the mobile editors are in light-mode but the content remains in night-mode. I might be overlooking some usecases here, but if it works, I think this produces a less jarring experience than switching the entire content to light mode.

Screenshot 2024-03-07 at 10.23.53 AM.png (2×1 px, 1 MB)
Screenshot 2024-03-07 at 10.21.43 AM.png (2×1 px, 882 KB)
Screenshot 2024-03-07 at 10.31.10 AM.png (2×1 px, 646 KB)
Screenshot 2024-03-07 at 10.31.17 AM.png (2×1 px, 797 KB)
Screenshot 2024-03-07 at 10.31.25 AM.png (2×1 px, 899 KB)

The teleportTarget is also used by Codex elements so this would break those. I can share examples later.

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

[mediawiki/extensions/MobileFrontend@master] Add `.notheme` class to teleportTarget for mobile editor

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

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

[mediawiki/skins/MinervaNeue@master] Add color: var( --color-base ); to .notheme class

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

Change 1009606 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Add color: var( --color-base ); to .notheme class

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

Change 1009570 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Add `.notheme` class to teleportTarget for mobile editor

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

Edtadros subscribed.

Test Result - Beta

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

Test Artifact(s):

QA Steps

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

Visit https://en.m.wikipedia.org/wiki/Dog?minervanightmode=1
Click edit
Make a change click preview
Go back
Switch to Visual editor mode
✅ AC1: NOTE: The scope of this ticket is to make sure that the editor is readable, NOT to switch it over to the night mode theme.
Everything is readable, but as expected based on the Note copied from the task description above, the scope isn't about making the elements all night mode. Below are the various screens in the edit workflow. There are some issues to take note of

source editor is fine readability and night mode theme wise.

screenshot 684.png (1×1 px, 220 KB)

@Jdlrobson, I wanted you to see this interim window prior to publishing because it has an issue with the "Publish" button being cut off, probably only visible since the background is dark vs when it was light.

screenshot 686.png (750×1 px, 96 KB)

the visual editor tool bar is not in night mode.

screenshot 685.png (1×1 px, 544 KB)

@Edtadros thanks for pointing out that scrollbar issue. That seems to be caused by the following rule in OOUI:

html.oo-ui-windowManager-modal-active {
    scrollbar-gutter: stable;
}

I can't speak to the necessity of that code (but I'm sure it's there for a reason).

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

[mediawiki/extensions/MobileFrontend@master] Followup to 113346f3 add .notheme class to mobile editor

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

Change 1009554 abandoned by Jdrewniak:

[mediawiki/skins/MinervaNeue@master] Add `.notheme` class to teleportTarget

Reason:

Abandoned in favour of https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/1009570

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

Change 1009773 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Followup to 113346f3 add .notheme class to mobile editor

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

The editor is now appearing in light mode as requested by the editing team.
On the long term we should seek to prioritize T353663 which would be the correct and simplest solution here for all the OOUI issues we are encountering.

The editor is now appearing in light mode as requested by the editing team.
On the long term we should seek to prioritize T353663 which would be the correct and simplest solution here for all the OOUI issues we are encountering.

Seems like this skipped QA. I'm still seeing the editor in night mode on the beta cluster.

Screenshot 2024-03-11 at 11.32.53 AM.png (1×2 px, 450 KB)

Discussed this and it's behaving as expected for the wikitext and VE editors. Will update task description.

Jdlrobson lowered the priority of this task from High to Medium.Mar 18 2024, 5:16 PM

Change 1008532 abandoned by Jdlrobson:

[mediawiki/extensions/MobileFrontend@master] Switch editor overlay to light mode theme

Reason:

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

Test Result - Prod

Status: ❌ FAIL
Environment: enwiki
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

Visit https://en.m.wikipedia.org/wiki/Dog?minervanightmode=1
Click edit
Make a change click preview
Go back
Switch to Visual editor mode
❌ AC1: All of the wikitext editor appears in night mode. All elements are functional and accessible.

screenshot 95.png (682×1 px, 142 KB)

✅ AC2: The OOUI portions of VE appear in day mode. All elements are functional and accessible. The remainder of VE appears in night mode. All elements are functional and accessible
screenshot 96.png (682×1 px, 388 KB)

@Edtadros thanks for catching this

screenshot 95.png (682×1 px, 142 KB)

It looks like the CSS causing that is specific to enwiki and srwiki:
https://en.wikipedia.org/wiki/MediaWiki:Minerva.css#L-110
https://sr.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B4%D0%B8%D1%98%D0%B0%D0%B2%D0%B8%D0%BA%D0%B8:Minerva.css

Which was added as a short-term fix for T358814

@Jdlrobson i think it's safe to remove that line now.

Fixed. @Edtadros do you want to test this again?

Test Result - Prod

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

Test Artifact(s):

QA Steps

Visit https://en.m.wikipedia.org/wiki/Dog?minervanightmode=1
Click edit
Make a change click preview
Go back
Switch to Visual editor mode
✅ AC1: All of the wikitext editor appears in night mode. All elements are functional and accessible.

screenshot 113.png (766×1 px, 157 KB)

✅ AC2: The OOUI portions of VE appear in day mode. All elements are functional and accessible. The remainder of VE appears in night mode. All elements are functional and accessible

screenshot 114.png (773×1 px, 389 KB)