Page MenuHomePhabricator

QA Editing-related OOUI updates (mobile + desktop)
Closed, ResolvedPublic

Description

To enable dark mode in OOUI (T364777), at least two changes are being made OOUI:

  1. Adding support for rem units
  2. Adding support for Codex 1.5.0 CSS variables

This task involves the work of testing the editing experiences the Editing Team is responsible so that we can identify and document any issues that these two changes the change to support Codex 1.5.0 CSS variables might've introduced.

Requirements

  1. Editing: generate a patch demo for the following patch https://gerrit.wikimedia.org/r/c/oojs/ui/+/1034592/4
  2. Editing: use the patch demo you'll have generated in "1." to enable Dark Mode in user preferences and test the following editing experiences:
    1. Visual editor (mobile + desktop)
    2. DiscussionTools (mobile + desktop)
  3. Editing: populate the first three columns in the === Issues table below with the issues you notice
  4. 📍Web + DST Teams: determine the cause of the issues the Editing Team will have identified in "1)"
  5. DST + Editing + Web Teams: work together to determine which team(s) are best equipped to address the issues we'll have identified in "1)" and "2)" determined causes for in "2)"

Timing

The Editing Team will work to have QA completed by Friday, June 21st.

Issues

IssueScreenshotAffected interfaceTeam responsible for fixStatusTicket (if needed)
Table header and cell content not visible
table header and content not visible.PNG (2×1 px, 141 KB)
Visual Editor (mobile)Resolved
Table Caption not visible
heading of the table is not visible.PNG (2×1 px, 385 KB)
Visual Editor (mobile)Resolved
Math nodes not visibleF44108368Visual Editor (mobile)Resolved
Screenshot 2024-05-20 at 12.03.07.png (1×2 px, 363 KB)
Table not rendering completely
IMG_4669.PNG (2×1 px, 178 KB)
Article read mode (mobile)Resolved
Reply Tool toolbar not visible
IMG_4673.PNG (2×1 px, 232 KB)
Reply Tool (mobile)TBDRe-test as part of T365509
Text labels within edit summary under not visible
IMG_4674.PNG (2×1 px, 461 KB)
Reply Tool (mobile)TBDRe-test as part of T365509
New Topic Tool toolbar not visible
IMG_4672.PNG (2×1 px, 216 KB)
New Topic Tool (mobile)TBDRe-test as part of T365509
Text labels within edit summary under not visible
IMG_4677.PNG (2×1 px, 211 KB)
New Topic Tool Tool (mobile)TBDRe-test as part of T365509
Affordance for editing/reporting a topic/section not visible:
IMG_4678.PNG (2×1 px, 229 KB)
Talk pages (mobile)TBDRe-test as part of T365509
Affordance for editing/reporting a comment not visible:
IMG_4679.PNG (2×1 px, 226 KB)
Talk pages (mobile)TBDRe-test as part of T365509
Icons are not visible because their color remain dark
Screenshot 2024-06-17 at 10.46.19 AM.png (356×846 px, 52 KB)
Screenshot 2024-06-17 at 11.15.35 AM.png (1×1 px, 287 KB)
Screenshot 2024-06-24 at 05.21.36.png (392×924 px, 86 KB)
Screenshot 2024-06-24 at 05.22.18.png (534×414 px, 54 KB)
Visual Editor (desktop and mobile)webResolved
Screenshot 2024-07-02 at 20.59.51.png (510×894 px, 39 KB)
Screenshot 2024-07-02 at 20.58.31.png (830×2 px, 573 KB)
Text is not visible in many dialogs
Screenshot 2024-06-17 at 3.52.51 PM.png (1×1 px, 91 KB)
Screenshot 2024-06-17 at 3.52.51 PM.png (1×1 px, 91 KB)
Screenshot 2024-06-17 at 3.56.34 PM.png (1×1 px, 115 KB)
Screenshot 2024-06-17 at 3.56.46 PM.png (1×998 px, 132 KB)
Visual Editor (desktop)web for initial passResolved
Screenshot 2024-07-02 at 21.00.57.png (1×996 px, 46 KB)
Screenshot 2024-07-02 at 21.03.10.png (1×1 px, 268 KB)
Highlighted texts are invisible
Screenshot 2024-06-24 at 05.24.27.png (580×422 px, 98 KB)
Screenshot 2024-06-24 at 05.24.38.png (74×936 px, 31 KB)
Discussion Tool (desktop and mobile)webRe-test as part of T365509
Text in <kbd /> are not visible because of the color
Screenshot 2024-06-24 at 05.33.30.png (152×933 px, 49 KB)
Discussion Tool (desktop and mobile)webRe-test as part of T365509
Template texts are invisible: Example in screenshot is Notice box template
Screenshot 2024-06-24 at 05.35.52.png (175×933 px, 28 KB)
Screenshot 2024-06-24 at 05.36.09.png (716×350 px, 64 KB)
Visual Editor(desktop and mobile)webResolved
Screenshot 2024-07-02 at 21.05.59.png (1×988 px, 212 KB)
Central Notice texts, as well as bracket surrounding hide link. This works in automatic, but not dark mode because html.skin-theme-clientpref-os .notheme styling is applied, as opposed to html.skin-theme-clientpref-night .notheme
Screenshot 2024-06-24 at 05.38.36.png (73×937 px, 10 KB)

Related Objects

StatusSubtypeAssignedTask
Resolvedovasileva
OpenNone
In ProgressDTorsani-WMF
Resolvedovasileva
OpenBUG REPORTGMikesell-WMF
DuplicateBUG REPORTNone
Resolvedovasileva
Openovasileva
Resolvedovasileva
Resolvedovasileva
ResolvedJdlrobson
Openovasileva
Resolvedovasileva
ResolvedJScherer-WMF
Resolvedovasileva
ResolvedSpikeSToyofuku-WMF
Openovasileva
Resolvedovasileva
ResolvedJdlrobson
Resolvedovasileva
ResolvedBUG REPORTJdlrobson
ResolvedBUG REPORTJScherer-WMF
ResolvedJdlrobson
DuplicateFeatureNone
ResolvedSpikeJdlrobson
ResolvedJdlrobson
Resolvedovasileva
ResolvedFeatureJdlrobson
DuplicateNone
ResolvedJdlrobson
Resolvedovasileva
DuplicateJdlrobson
ResolvedJdlrobson
DuplicateNone
ResolvedJdlrobson
ResolvedBUG REPORTovasileva
Resolvedovasileva
ResolvedVolker_E
InvalidNone
InvalidJdlrobson
DuplicateNone
DuplicateNone
DuplicateNone
DuplicateNone
Resolvedovasileva
ResolvedJdlrobson
ResolvedJdlrobson
ResolvedJdlrobson
ResolvedJdlrobson
DuplicateJdlrobson
ResolvedJdlrobson
ResolvedJdlrobson
DeclinedJdlrobson
ResolvedSToyofuku-WMF
ResolvedJdlrobson
ResolvedKSarabia-WMF
ResolvedNone
OpenNone
Resolvedovasileva
ResolvedJdlrobson
ResolvedBUG REPORTJdlrobson
DuplicateBUG REPORTNone
ResolvedBUG REPORTovasileva
Openovasileva
ResolvedBUG REPORTovasileva
ResolvedBUG REPORTabi_
ResolvedBUG REPORT Nikerabbit
ResolvedBUG REPORTovasileva
ResolvedJdlrobson
ResolvedBUG REPORTJdlrobson
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
ResolvedFeatureNone
OpenNone
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
ResolvedBUG REPORTovasileva
InvalidBUG REPORTNone
Resolvedovasileva
Resolvedovasileva
ResolvedBUG REPORTovasileva
ResolvedJdlrobson
ResolvedJdlrobson
ResolvedNone
ResolvedJdrewniak
Resolvedovasileva
ResolvedBUG REPORTovasileva
Resolvedovasileva
Resolvedovasileva
ResolvedJdlrobson
ResolvedJdlrobson
Resolvedovasileva
ResolvedJdrewniak
ResolvedJScherer-WMF
Resolvedovasileva
Resolvedovasileva
ResolvedBUG REPORTovasileva
ResolvedBUG REPORTovasileva
OpenNone
OpenKSarabia-WMF
Resolvedovasileva
Openovasileva
Resolvedovasileva
ResolvedJdlrobson
DeclinedFeatureegardner
Resolvedovasileva
DeclinedFeatureegardner
DuplicateCCiufo-WMF
Resolvedovasileva
ResolvedNBaca-WMF
DeclinedVolker_E

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

I checked VisualEditor, NWE and DiscussionTools so far on beta en.wiki with minervanightmode=1. Found the following issues:

VisualEditor:

Table header and cell content are not visible.

table header and content not visible.PNG (2×1 px, 141 KB)

Table Caption is not visible.
heading of the table is not visible.PNG (2×1 px, 385 KB)

Math nodes are not visible in night mode.
IMG_4671.PNG (2×1 px, 312 KB)

Article Read mode:
Table is not rendering completely.

IMG_4669.PNG (2×1 px, 178 KB)

DiscussionTools:

Reply tool toolbar is not visible:

IMG_4673.PNG (2×1 px, 232 KB)

None of the texts under Advanced section for Reply tool is visible:

IMG_4674.PNG (2×1 px, 461 KB)

Toolbar for new topic tool is not visible:

IMG_4672.PNG (2×1 px, 216 KB)

Texts under Advanced section for new topic tool is not visible:

IMG_4677.PNG (2×1 px, 211 KB)

The three dots for editing/reporting a topic/section on talk page is not visible:

IMG_4678.PNG (2×1 px, 229 KB)

The three dots for reporting a comment is not visible:

IMG_4679.PNG (2×1 px, 226 KB)

ppelberg updated the task description. (Show Details)

Now that the task description is updated with the issues @Ryasmeen identified in T360691#9678381, I'm assigning this task over to @ovasileva assess determine and document who might be best equipped to address each issue.

Note: if/when we come to learn any of these issues are relatively complex, the Editing and Web Teams will work together to determine what – if anything – we'll do in response.

In parallel, I've created T364420 where we will test Editing interfaces on desktop.

ppelberg renamed this task from QA Editing-related night mode changes to QA Editing-related night mode changes (mobile).May 7 2024, 6:33 PM
ppelberg updated the task description. (Show Details)

@Ryasmeen - we're having some trouble replicating the first two issues with tables appearing in light mode. Could you give us some steps for replication? Thank you!

@ovasileva: I am also not seeing those two issues anymore.

IMG_5483.PNG (2×1 px, 190 KB)

@ovasileva: I am also not seeing those two issues anymore.

IMG_5483.PNG (2×1 px, 190 KB)

Perfect!

ovasileva updated the task description. (Show Details)
ppelberg renamed this task from QA Editing-related night mode changes (mobile) to QA Editing-related OOUI updates (mobile + desktop).May 30 2024, 10:26 PM
ppelberg updated the task description. (Show Details)

Meta

Per offline discussions with @CCiufo-WMF and @Ryasmeen, the Editing Team is going to us a single ticket (this one) to document any and all changes we notice resulting from updating OOUI to use:

  1. REM units
  2. CSS variables

To put the above into practice, I've merged T364420 and T365521 into this task and expanded the scope of this task (and retitled it).

ppelberg moved this task from Incoming to QA on the Editing-team (Kanban Board) board.
ppelberg added a project: Editing QA.
ppelberg moved this task from Inbox to High Priority on the Editing QA board.

Per today's meeting with @Esanders, @Jdrewniak, @ovasileva, work on this task is blocked on DST merging the REM and dark mode changes into OOUI.

@CCiufo-WMF / @egardner: could y'all please comment here once the above is done so that the Editing Team knows when testing can begin?

Per today's meeting with @Esanders, @Jdrewniak, @ovasileva, work on this task is blocked on DST merging the REM and dark mode changes into OOUI.

@CCiufo-WMF / @egardner: could y'all please comment here once the above is done so that the Editing Team knows when testing can begin?

Hi @ppelberg – our goal is to finish up the work in OOUI this week, cut an OOUI release at the beginning of next week (tentatively called 0.50.rc-1) and then ship that to beta right away.

Per today's meeting with @Esanders, @Jdrewniak, @ovasileva, work on this task is blocked on DST merging the REM and dark mode changes into OOUI.

@CCiufo-WMF / @egardner: could y'all please comment here once the above is done so that the Editing Team knows when testing can begin?

Hi @ppelberg – our goal is to finish up the work in OOUI this week, cut an OOUI release at the beginning of next week (tentatively called 0.50.rc-1) and then ship that to beta right away.

All that you described above sounds great, @egardner.

Would it be alright for the Editing Team to expect a comment here y'all when everything is ready for testing by way of it landing on beta?

Per today's meeting with @Esanders, @Jdrewniak, @ovasileva, work on this task is blocked on DST merging the REM and dark mode changes into OOUI.

@CCiufo-WMF / @egardner: could y'all please comment here once the above is done so that the Editing Team knows when testing can begin?

Hi @ppelberg – our goal is to finish up the work in OOUI this week, cut an OOUI release at the beginning of next week (tentatively called 0.50.rc-1) and then ship that to beta right away.

All that you described above sounds great, @egardner.

Would it be alright for the Editing Team to expect a comment here y'all when everything is ready for testing by way of it landing on beta?

Hi @ppelberg – I'll comment on this task again when the new OOUI release is up on Beta. We plan to release it on Tuesday (June 11), after the train goes out.

However, it's possible to inspect things now in Patchdemo if you don't want to wait until then. This patchdemo instance applies the patches we are planning to merge into OOUI for the next release, and it also applies some config copied from production which disables dark-mode on most OOUI-intensive featuers like VE and special pages. You'll still want to make sure that the switch to rem units doesn't cause any sizing or alignment issues however (although in my own testing so far I only saw a few minor problems which have already been addressed).

https://patchdemo.wmflabs.org/wikis/61da5f7352/wiki/Main_Page

Per today's meeting with @Esanders, @Jdrewniak, @ovasileva, work on this task is blocked on DST merging the REM and dark mode changes into OOUI.

@CCiufo-WMF / @egardner: could y'all please comment here once the above is done so that the Editing Team knows when testing can begin?

Hi @ppelberg – our goal is to finish up the work in OOUI this week, cut an OOUI release at the beginning of next week (tentatively called 0.50.rc-1) and then ship that to beta right away.

All that you described above sounds great, @egardner.

Would it be alright for the Editing Team to expect a comment here y'all when everything is ready for testing by way of it landing on beta?

Hi @ppelberg – I'll comment on this task again when the new OOUI release is up on Beta. We plan to release it on Tuesday (June 11), after the train goes out.

However, it's possible to inspect things now in Patchdemo if you don't want to wait until then. This patchdemo instance applies the patches we are planning to merge into OOUI for the next release, and it also applies some config copied from production which disables dark-mode on most OOUI-intensive featuers like VE and special pages. You'll still want to make sure that the switch to rem units doesn't cause any sizing or alignment issues however (although in my own testing so far I only saw a few minor problems which have already been addressed).

https://patchdemo.wmflabs.org/wikis/61da5f7352/wiki/Main_Page

Wonderful – thank you for sharing this context and continuing to keep us informed, @egardner. We'll plan to start QA on Tuesday on Beta (if the release is on time) and on patchdemo if it is delayed.

cc @EAkinloose

Per what @egardner shared in Slack the latest OOUI release will NOT include a change to rem units.

I've updated the task description to reflect this.

Per what @egardner shared in Slack the latest OOUI release will NOT include a change to rem units.

I've updated the task description to reflect this.

Thanks @ppelberg. OOUI has been updated and released as of this morning, and it now includes the latest version of the Codex color tokens (which reference CSS custom properties, if defined, meaning that they should automatically change from light to dark colors along with the rest of the page). We performed this update manually and are (at least for now) not planning to move forward with updating OOUI to use rem units the way that Codex now does.

Hopefully this leads to few if any regressions in testing – especially since dark mode is disabled on many special pages still.

If you see any OOUI issues that will surface in production (as opposed to things that are limited to pages where dark mode is still disabled) please let us know!

Update

@ovasileva: the Editing Team is finished with steps "2." and "3." in the task description's ===Requirements section. Read: we've completed testing and documented the issues we've noticed.

Next up: I'm assigning this over to you to orchestrate the Web and DST Teams determining the issues we identified (read: "Step 4."). From there, I think we move on to"Step 5.": determining who is best positioned to address these issues.

In parallel, the Editing Team is assuming that we'll hear from y'all directly when T365509 has been worked on, and as a result, we can re-test the issues labeled Re-test as part of T365509 in the task description.

@ovasileva to review and and take screenshots of current state.

Talk page dark mode QA

Per what @ovasileva and I talked about offline just now, we're going to do the following:

  1. Web Team to retest issues labeled Re-test as part of T365509 in the task description
  2. Web Team to do exploratory testing
  3. Once "1)" and "2)" finish, Olga will ping Peter and at that point Editing can do comprehensive testing of talk pages in dark mode

Remaining tickets were reviewed in T365509: Enable night mode on talk page namespaces. Resolving this.