Page MenuHomePhabricator

Evaluate how Wikistories is impacted by night mode
Open, MediumPublic

Description

The Wikistories UI is prominent when displayed
e.g. https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Dog&minervanightmode=1

We will need to decide how to display it in night mode.

Task Description:

QA Results - Beta

ACStatusDetails
1T356529#9865924
2T356529#9865924
3T356529#9865924

Event Timeline

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

Hi @Jdlrobson, we have a notice component with background-color: @background-color-notice-subtle. This is what it looks like in day and night reading modes:

DayNight
Screenshot 2024-02-28 at 3.17.13 PM.png (114×1 px, 17 KB)
Screenshot 2024-02-28 at 3.19.43 PM.png (118×1 px, 14 KB)

Text, icons, and borders adjust correctly but @background-color-notice-subtle doesn't seem to be redefined. Should it be? Is there a better-suited variable to use in this case? Thanks

Change 1007435 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/Wikistories@master] Support night reading mode

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

@SBisson thanks for flagging. We'll define the @background-color-notice-subtle our side https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/1006981 - that's definitely our bug.

@SGautam_WMF this is what the text highlight currently looks like in day and night modes:

Screenshot 2024-02-29 at 10.08.53 AM.png (204×1 px, 83 KB)

Screenshot 2024-02-29 at 10.18.26 AM.png (178×1 px, 81 KB)

Let me know what you think of the white on yellow.

@Jdlrobson is there an official mechanism for us to specify light and dark colors for those special cases where we're not using existing variables? The yellow highlighting above is one such example.

We don't currently have an official mechanism but my expectation is we will. For now you can do this and we'll clean that up for you later:

.ext-wikistories-article-view-content-sentence-selected {
   /* FIXME: Hardcoded light version of @color-base  until T358826 has been resolved */
    color-scheme: light;
    color: #333;
    background-color: #fc3;
    position: relative;
}

}

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

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

https://patchdemo.wmflabs.org/wikis/86a47ae45b/w/

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

https://patchdemo.wmflabs.org/wikis/3975ae0319/w/

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

https://patchdemo.wmflabs.org/wikis/65ec70057b/w/

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

https://patchdemo.wmflabs.org/wikis/d4140638e9/w/

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

https://patchdemo.wmflabs.org/wikis/30f3f39dcd/w/

Change 1007435 merged by jenkins-bot:

[mediawiki/extensions/Wikistories@master] Support night reading mode

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

Change 1009602 had a related patch set uploaded (by Eamedina; author: Eamedina):

[mediawiki/extensions/Wikistories@master] Update style

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

@Jdlrobson What if we need to hardcode different custom colors for day and night modes, what would be the preferred way?

You can use the CSS classes html.skin-night-mode-clientpref-1 and html.skin-night-mode-clientpref-2 to target the element to give it different colors (see https://www.mediawiki.org/wiki/Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis#Target_night_mode_using_standard_media_query for more information). Does this answer your question?

Yes. I saw those classes but I wasn't sure if they were too "internal" for us to use.

No those are stable for use! Go ahead and use.

If we ever change the classes, we'll make sure to make them in a backwards-compatible way.

Change 1009602 merged by jenkins-bot:

[mediawiki/extensions/Wikistories@master] Update night mode style

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

@SBisson Seems like most of the basic functions are looking and working correctly except for the ones I found below in the Issue section. Please let me know if you want me to create separate tasks or leave those issues on this task.

Status: ❌ FAIL
Environment: Beta: 1.42.0-alpha (2a65e7f)
OS: macOS Sonoma 14.4.1
Browser: Chrome 123
Skins. Minerva
Device: MBA M2
Emulated Device:: n/a
Test Links:
https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Dog&minervanightmode=1
https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:StoryBuilder/Story:Testing_post_dark_theme?frameid=0&minervanightmode=1#story

✅AC1: https://phabricator.wikimedia.org/T356529 - Looks like most of the basic functions are working correctly.

DesktopMobile- iPhone 14 Pro Max

❌Issues:

  1. Icon- Can the Duplicate Icon be a different color like the others to have it stick out more? Being dark grey makes it look hidden on a black background compared to yellow like the others.
DuplicateRemoving TextOutdated Text
2024-03-27_13-09-26.png (1×921 px, 504 KB)
2024-03-27_13-10-09.png (1×856 px, 376 KB)
2024-03-27_13-11-44.png (1×845 px, 353 KB)
  1. Replacing a picture on a phone vs desktop- On the phone, it switches up pictures from the one I'm trying to select.
Desktop-OKMobile- Error?

@SGautam_WMF what do you think about the icon contrast issue reported above?

  1. Replacing a picture on a phone vs desktop- On the phone, it switches up pictures from the one I'm trying to select.

@SBisson Not sure what happened after checking it today, but it works now. I guess it was just a weird one-off? I'll wait to see what you say about the duplicate icon before I move this task, if you want a separate task for it, or if that is fine.

@SGautam_WMF what do you think about the icon contrast issue reported above?

Sorry for late reply, is it possible for us to invert it or shall I provide dark mode friendly icon for this case?

Change #1017301 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/Wikistories@master] 3 more night mode fixes

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

@SGautam_WMF what do you think about the icon contrast issue reported above?

Sorry for late reply, is it possible for us to invert it or shall I provide dark mode friendly icon for this case?

I have made the inversion in a new patch.

Change #1017301 merged by jenkins-bot:

[mediawiki/extensions/Wikistories@master] 3 more night mode fixes

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

@SBisson I am noticing the following color contrast issues on https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=T352930
I think the + should be black? The latter seems like a false positive though.

Screenshot 2024-04-17 at 8.59.56 AM.png (232×564 px, 28 KB)

Screenshot 2024-04-17 at 9.01.16 AM.png (184×630 px, 102 KB)

@SBisson So I see the duplicate icon having skin invert with a lighter grey icon and the "skin invert" tag. For the image icons, I did not see a difference and did not see the "skin invert tag". When I put "skin invert" in, it didn't work since the exclamation point was black. As for the menu items, I do see it got a little lighter. Was that what you were talking about in the screenshots?

Status: ❌FAIL
Environment: Beta: 1.43.0-alpha (6c53f10)
OS: macOS Sonoma 14.4.1
Browser: Chrome 123
Skins. Minerva
Device: MBA M2
Emulated Device:: n/a
Test Links:
https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Dog&minervanightmode=1
https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:StoryBuilder/Story:Testing_post_dark_theme?frameid=0&minervanightmode=1#story

❌AC1: https://phabricator.wikimedia.org/T356529

UpdatesPreviousCurrent
Duplicate icon
2024-04-19_10-23-31.png (1×553 px, 630 KB)
2024-04-19_10-25-19.png (753×3 px, 412 KB)
Images icon
2024-04-19_10-37-15.png (373×3 px, 193 KB)
2024-04-19_10-35-27.png (618×3 px, 332 KB)
Menu content
2024-04-19_10-44-35.png (1×560 px, 585 KB)
2024-04-19_10-44-55.png (1×3 px, 610 KB)

@Jdlrobson About the "Create a Wikistories" button, when looking at day/night modes side-by-side I agree it could look better inverted by since background-color and color are both hardcoded, and as a result the same in both modes, I'm not sure this creates a contrast issue. So for this and the other screenshot, I would defer to our designer, @SGautam_WMF.

Change #1024480 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/Wikistories@master] Night mode: invert warning icons on thumbnails

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

@GMikesell-WMF If I understand correctly the results in the table above, the only issue is the warning icon in the bottom-right corner of the image thumbnail not being inverted. I have made new patch to actually invert it, just like it's counterpart in the second section of the story text box.

Change #1024480 merged by jenkins-bot:

[mediawiki/extensions/Wikistories@master] Night mode: invert warning icons on thumbnails

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

@SBisson The duplicate image icons have now been resolved. From above and below which are now passed, I will move this to Design sign-off. Thanks for all your work!

Status: ✅ PASS
Environment: Beta: 1.43.0-alpha (2c7e3ad)
OS: macOS Sonoma 14.4.1
Browser: Chrome 124
Skins. Minerva
Device: MBA M2
Emulated Device:: n/a
Test Links:
https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Dog&minervanightmode=1
https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:StoryBuilder/Story:Testing_post_dark_theme?frameid=0&minervanightmode=1#story

✅ AC1: https://phabricator.wikimedia.org/T356529

Night ModeDesktopiPad ProiPhone 14
Wikistories
2024-04-29_12-19-45.png (720×2 px, 306 KB)
2024-04-29_12-27-08.png (791×785 px, 239 KB)
2024-04-29_12-26-55.png (891×989 px, 233 KB)
Duplicate Icon
2024-04-29_09-20-00.png (427×547 px, 158 KB)
2024-04-29_12-03-49.png (1×3 px, 826 KB)
2024-04-29_11-43-04.png (1×3 px, 737 KB)

@SBisson I am noticing the following color contrast issues on https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=T352930
I think the + should be black? The latter seems like a false positive though.

Screenshot 2024-04-17 at 8.59.56 AM.png (232×564 px, 28 KB)

Screenshot 2024-04-17 at 9.01.16 AM.png (184×630 px, 102 KB)

@SBisson is background color for circle on which (+) icon sits hardcoded? and is it #B0ADAD?

Few more items to test for this one.


Screenshot 2024-05-01 at 7.11.53 PM.png (1×780 px, 1 MB)
Screenshot 2024-05-01 at 7.12.02 PM.png (1×770 px, 1 MB)
  1. Open a wikistory using the share link. Viewer experience looks broker here.
{F49635998 width=240}
  1. Author name from the attribution space is not visible.
Screenshot 2024-05-01 at 3.40.40 PM.png (1×860 px, 1 MB)
  1. We have text fade to long story text. We need to adjust it for dark mode too.

@SBisson how about we try this for Thumbnail placeholder? I didn't find the border in the code

For Light Mode:
.ext-wikistories-discover-item-btn, .ext-wikistories-discover-item-cta-btn {

background-color: #54595D; 
color: #eaecf0;

}
For Dark Mode:
.ext-wikistories-discover-item-btn, .ext-wikistories-discover-item-cta-btn {

background-color: #eaecf0; 
color: #54595D;

}

@Jdlrobson would you know how to write a linear-gradient that goes from @background-color-base to transparent? This is what we currently have: background: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ) 0%, #fff 100% ); I would like it to be implemented with variables so it inverts correctly.

EDIT: apparently I can just write linear-gradient( to bottom, transparent 0%, @background-color-base 100% );

I tried simply writing a night mode version of it under the html.skin-theme-clientpref-night selector but I ran into a different issue: we have custom action that outputs a custom version of the story viewer that is used for sharing on social media. It doesn't have the usual mediawiki chrome because of $out->setArticleBodyOnly( true );. While it has the skin-theme-clientpref-night class on the body, the colors are not inverted. See https://en.m.wikipedia.beta.wmflabs.org/wiki/Story:Dogs?action=storyview&minervanightmode=1

Change #1026179 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/Wikistories@master] Night mode fixes

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

GMikesell-WMF updated the task description. (Show Details)
GMikesell-WMF updated the task description. (Show Details)

Pending patch update

Test Result - Beta

Status: ❌ Fail
Environment: Beta
OS: macOS Sonoma 14.4.1
Browser: Chrome 124
Device: MBA
Emulated Device:BrowserStack

Test Artifact(s):

Test Steps

T356529#9760694
❌AC1: "+"Go to https://en.m.wikipedia.beta.wmflabs.org/wiki/South_Park?minervanightmode=1

"+" black
2024-05-06_13-31-15.png (363×1 px, 73 KB)

❌AC2: Open BrowserStack ex. Samsung S22 Ultra and go to https://en.m.wikipedia.beta.wmflabs.org/wiki/Dog?minervanightmode=1#/story/278684

text fading- Mobile
2024-05-06_13-20-32.png (1×674 px, 758 KB)

❌AC3: Go to https://en.m.wikipedia.beta.wmflabs.org/wiki/Dog?minervanightmode=1#/story/278684

Author visibility- MobileAuthor visibility- Desktop
2024-05-06_13-22-07.png (1×697 px, 893 KB)
2024-05-06_13-46-56.png (1×2 px, 1 MB)

Change #1026179 merged by jenkins-bot:

[mediawiki/extensions/Wikistories@master] Night mode fixes

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

@SBisson This task has now passed. I just have a quick question regarding "+" icon being dark since it may be hard to see. I will move this to design sign-off. Thanks for all your work!

Status: ✅PASS
Environment: Beta
OS: macOS Sonoma 14.5
Browser: Chrome 125
Device: MBA
Emulated Device: BrowserStack

❌AC1: "+"Go to https://en.m.wikipedia.beta.wmflabs.org/wiki/South_Park?minervanightmode=1

✅ "+" is now dark. It does look a little hard to see though, is this what you want?

2024-06-05_13-32-56.png (441×2 px, 104 KB)

❌AC2: Open BrowserStack ex. Samsung S22 Ultra and go to https://en.m.wikipedia.beta.wmflabs.org/wiki/Dog?minervanightmode=1#/story/278684

✅ Text fade has been resolved

2024-06-05_13-34-35.png (1×630 px, 750 KB)

❌AC3: Go to https://en.m.wikipedia.beta.wmflabs.org/wiki/Dog?minervanightmode=1#/story/278684

✅ Author is now visible

2024-06-05_13-35-11.png (1×644 px, 882 KB)