Page MenuHomePhabricator
Create Task
Maniphest T368120

[Short term fix] Notification icon not same color as other icons
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT
Actions

Assigned To
ovasileva
Authored By
Jdlrobson
Jun 21 2024, 1:14 AM
Tags
Referenced Files
F56446425: 2024-07-15_13-44-15.png
Jul 15 2024, 8:45 PM
F56207391: 2024-07-03_14-59-34.png
Jul 5 2024, 4:02 PM
F56208065: Screenshot 2024-07-03 at 3.39.33 PM.png
Jul 3 2024, 10:40 PM
F56125614: Screenshot 2024-07-01 at 16.07.44.png
Jul 1 2024, 2:08 PM
F49974637: en.m.wikipedia.org_wiki_Ichthyotitan(iPhone SE).png
Jun 24 2024, 4:34 PM
Subscribers
Aklapper
GMikesell-WMF
Jdlrobson
Jdrewniak
ovasileva
Pcoombe

Description

NOTE: T364119 is the long term fix. On short term we'll update our filter. Steps to replicate the issue (include links if applicable):
  • Login on mobile
  • Turn on night mode.
  • Visit any page
  • The bell icon in the top right is not the

What happens?:
The icon is not the same color as the rest.

What should have happened instead?:
The icon should be the same.

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):
@Jdrewniak proposes updating the CSS filter just for this icon to use brightness to make it appear like the rest.

QA Results - Beta

ACStatusDetails
1✅T368120#9952240

QA Results - PROD

ACStatusDetails
1✅T368120#9983373

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
[POC] Add brightness filter to night-mode-invert-image() mixin.mediawiki/skins/MinervaNeuemaster+2 -2
Change color of notification icon in dark-modemediawiki/skins/MinervaNeuewmf/1.43.0-wmf.11+13 -0
Change color of notification icon in dark-modemediawiki/skins/MinervaNeuemaster+13 -0
Customize query in gerrit

Related Objects
Search...

Event Timeline

Jdlrobson created this task.Jun 21 2024, 1:14 AM
Restricted Application added a project: Growth-Team. · View Herald TranscriptJun 21 2024, 1:14 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Jdlrobson triaged this task as Medium priority.Jun 21 2024, 1:27 AM
gerritbot added a comment.Jun 21 2024, 4:09 PM

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

[mediawiki/skins/MinervaNeue@master] [POC] Add brightness filter to night-mode-invert-image() mixin.

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

gerritbot added a project: Patch-For-Review.Jun 21 2024, 4:09 PM
gerritbot added a comment.Jun 21 2024, 4:21 PM

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

[mediawiki/skins/MinervaNeue@master] Change color of notification icon in dark-mode

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

Jdrewniak added a comment.Jun 24 2024, 4:34 PM

@Jdrewniak proposes updating the CSS filter just for this icon to use brightness to make it appear like the rest.

Expanding on this, I think there are two ways to handle this. In the image below, the notification icon (bell) is lighter than the surrounding icons.
Therefore, we can either make the notification icon darker, or the surrounding icons lighter.

Interestingly, the notification icon is actually the correct color, it's the rest of the icons that are too dark. However, changing the rest of the icons by adding a brightness filter is somewhat risky, because it'll change the appearance of colored icons. So, as a temporary measure, changing the color of the notification icon (to make it incorrect but consistent) seems like the easiest path forward.

en.m.wikipedia.org_wiki_Ichthyotitan(iPhone SE).png (234×750 px, 17 KB)

ovasileva subscribed.Jun 24 2024, 5:47 PM
In T368120#9918517, @Jdrewniak wrote:

@Jdrewniak proposes updating the CSS filter just for this icon to use brightness to make it appear like the rest.

Expanding on this, I think there are two ways to handle this. In the image below, the notification icon (bell) is lighter than the surrounding icons.
Therefore, we can either make the notification icon darker, or the surrounding icons lighter.

Interestingly, the notification icon is actually the correct color, it's the rest of the icons that are too dark. However, changing the rest of the icons by adding a brightness filter is somewhat risky, because it'll change the appearance of colored icons. So, as a temporary measure, changing the color of the notification icon (to make it incorrect but consistent) seems like the easiest path forward.

Discussed in standup and decided to proceed with this ^ and change the notification icon color.

en.m.wikipedia.org_wiki_Ichthyotitan(iPhone SE).png (234×750 px, 17 KB)

ovasileva set the point value for this task to 2.Jun 24 2024, 5:49 PM
ovasileva moved this task from Ready for estimation to Ready for Development on the Web-Team-Backlog-Archived (FY2023-24 Q4 Sprint 6) board.
ovasileva added a parent task: T367151: [Config] Deploy dark mode to all users in tier 1 wikis on the Minerva skin .Jun 25 2024, 11:53 AM
Pcoombe subscribed.Jun 25 2024, 2:17 PM
Jdlrobson claimed this task.Jun 25 2024, 4:21 PM
Jdlrobson moved this task from Ready for Development to Code Review on the Web-Team-Backlog-Archived (FY2023-24 Q4 Sprint 6) board.
Jdrewniak attached a referenced file: F49974637: en.m.wikipedia.org_wiki_Ichthyotitan(iPhone SE).png. (Show Details)Jun 25 2024, 4:34 PM
Jdlrobson reassigned this task from Jdlrobson to GMikesell-WMF.Jun 25 2024, 10:44 PM
Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog-Archived (FY2023-24 Q4 Sprint 6) board.
ovasileva added a comment.Jul 1 2024, 2:08 PM

Screenshot 2024-07-01 at 16.07.44.png (980×992 px, 184 KB)

Confirming fix on beta cluster

ovasileva mentioned this in T367151: [Config] Deploy dark mode to all users in tier 1 wikis on the Minerva skin .Jul 1 2024, 2:09 PM
Jdlrobson edited projects, added Web-Team-Backlog-Archived (FY2024-25 Q1 Sprint 1); removed Web-Team-Backlog-Archived (FY2023-24 Q4 Sprint 6).Jul 1 2024, 5:35 PM
Jdlrobson moved this task from Needs analysis to QA on the Web-Team-Backlog-Archived (FY2024-25 Q1 Sprint 1) board.
gerritbot added a comment.Jul 1 2024, 6:25 PM

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

[mediawiki/skins/MinervaNeue@wmf/1.43.0-wmf.11] Change color of notification icon in dark-mode

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

gerritbot added a comment.Jul 1 2024, 6:28 PM

Change #1048507 abandoned by Jdlrobson:

[mediawiki/skins/MinervaNeue@master] Change color of notification icon in dark-mode

Reason:

This fix is only needed for wmf/1.43.0-wmf.11 - so I'll backport it there.

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

gerritbot added a comment.Jul 1 2024, 8:29 PM

Change #1051184 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@wmf/1.43.0-wmf.11] Change color of notification icon in dark-mode

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

Stashbot mentioned this in T368483: Regression: Global invert broke VisualEditor "Add a link" workflow.Jul 1 2024, 8:31 PM

Mentioned in SAL (#wikimedia-operations) [2024-07-01T20:31:44Z] <cjming@deploy1002> Started scap sync-world: Backport for [[gerrit:1050084|[July 1st] Mobile: Enable dark mode for all tier 1 wikis (logged in) (T367151)]], [[gerrit:1051184|Change color of notification icon in dark-mode (T368120)]], [[gerrit:1051186|Do not invert images that have been tagged with no invert classes (T368483)]]

Stashbot added a comment.Jul 1 2024, 8:34 PM

Mentioned in SAL (#wikimedia-operations) [2024-07-01T20:34:29Z] <cjming@deploy1002> cjming, jdlrobson: Backport for [[gerrit:1050084|[July 1st] Mobile: Enable dark mode for all tier 1 wikis (logged in) (T367151)]], [[gerrit:1051184|Change color of notification icon in dark-mode (T368120)]], [[gerrit:1051186|Do not invert images that have been tagged with no invert classes (T368483)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Jdlrobson added a project: MW-1.43-notes (1.43.0-wmf.11; 2024-06-25).Jul 1 2024, 8:39 PM
Stashbot added a comment.Jul 1 2024, 8:42 PM

Mentioned in SAL (#wikimedia-operations) [2024-07-01T20:42:24Z] <cjming@deploy1002> Finished scap: Backport for [[gerrit:1050084|[July 1st] Mobile: Enable dark mode for all tier 1 wikis (logged in) (T367151)]], [[gerrit:1051184|Change color of notification icon in dark-mode (T368120)]], [[gerrit:1051186|Do not invert images that have been tagged with no invert classes (T368483)]] (duration: 10m 39s)

Michael moved this task from Inbox to Triaged on the Growth-Team board.Jul 2 2024, 3:16 PM
GMikesell-WMF mentioned this in T367779: Verify 1.43.0-wmf.11 deployment.Jul 3 2024, 9:37 PM
Jdlrobson moved this task from QA to Ready for Signoff on the Web-Team-Backlog-Archived (FY2024-25 Q1 Sprint 1) board.Jul 3 2024, 10:40 PM

Test Result - Beta

Status: ✅
Environment: Beta
OS: macOS Sonoma 14.3
Browser: Chrome 126
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Notification icon matches user icon:

Screenshot 2024-07-03 at 3.39.33 PM.png (255×805 px, 21 KB)

Jdlrobson reassigned this task from GMikesell-WMF to ovasileva.Jul 3 2024, 10:40 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a subscriber: GMikesell-WMF.
GMikesell-WMF added a comment.Jul 5 2024, 4:02 PM

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
  1. Login on mobile
  2. Turn on night mode.
  3. Visit any page
  4. The bell icon in the top right is there

2024-07-03_14-59-34.png (496×341 px, 59 KB)

ovasileva closed this task as Resolved.Jul 8 2024, 10:16 AM

Looks good!

GMikesell-WMF added a comment.Jul 15 2024, 8:45 PM

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
  1. Login on mobile
  2. Turn on night mode.
  3. Visit any page
  4. The bell icon in the top right is there

2024-07-15_13-44-15.png (708×329 px, 94 KB)

GMikesell-WMF added a project: Verified.Jul 15 2024, 8:45 PM
GMikesell-WMF updated the task description. (Show Details)
gerritbot added a comment.Aug 27 2024, 2:06 PM

Change #1048506 abandoned by Jdrewniak:

[mediawiki/skins/MinervaNeue@master] [POC] Add brightness filter to night-mode-invert-image() mixin.

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

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits