Page MenuHomePhabricator
Create Task
Maniphest T307134

[Bug] Notices and Alerts icons should not move around in the header
Closed, ResolvedPublic
Actions

Assigned To
Etonkovidova
Authored By
• alexhollender_WMF
Apr 28 2022, 7:06 PM
Tags
Referenced Files
F35146037: Kapture 2022-05-16 at 13.25.49.webm
May 16 2022, 7:26 PM
F35146011: image.png
May 16 2022, 7:09 PM
F35131065: Screen Shot 2022-05-11 at 11.35.23 AM.png
May 11 2022, 6:36 PM
F35131063: Screen Shot 2022-05-11 at 11.35.07 AM.png
May 11 2022, 6:35 PM
F35072350: legacy vector.webm
Apr 28 2022, 7:09 PM
F35072345: notificaitons moving.webm
Apr 28 2022, 7:06 PM
Subscribers
Aklapper
• alexhollender_WMF
alistair3149
Etonkovidova
Jdlrobson
kostajh
• mewoph
View All 11 Subscribers

Description

Description

When either the Notices or Alerts icon receives a "notification indicator" (i.e. a number with a box around it), they grow in size causing the other elements around them to move around in the header.

This should not happen. The Notices and Alerts icon should not change in size, and the elements around them should not move.

Notes

It seems like this bug may have been introduced in Vector 2022. It doesn't seem to be happening in Legacy Vector:

Acceptance criteria

  • touch area should always be 44x44
  • The icon should not move when the blue dot is toggled to turn on/off notifications

Details

SubjectRepoBranchLines +/-
WIP: Echo icons should be consistent with other Vector/Minerva menu icons.mediawiki/extensions/Echomaster+55 -37
Don't change width of Vector when more than 0 notificationsmediawiki/extensions/Echomaster+2 -5
Customize query in gerrit

Related Objects

Event Timeline

• alexhollender_WMF created this task.Apr 28 2022, 7:06 PM
Restricted Application added a project: Growth-Team. · View Herald TranscriptApr 28 2022, 7:06 PM
• alexhollender_WMF added projects: Desktop Improvements (Vector 2022), Web-Team-Backlog (Kanbanana-FY-2021-22).Apr 28 2022, 7:09 PM
• alexhollender_WMF updated the task description. (Show Details)
• alexhollender_WMF added subscribers: ovasileva, Jdlrobson.
Jdlrobson assigned this task to ovasileva.Apr 28 2022, 9:20 PM

When Echo icon is clicked, OOUI is loaded and replaces the icons. This is a longstanding pain point. We can keep trying to patch over this, but none of these solutions is future proof and we'll be revisiting this again.

@ovasileva this is a problem with the Echo extension, suggest talking to Growth team, since historically they've been pretty stretched for reviewing Echo changes and we can't do this without their help. While Echo is built with OOUI not Vue/mediawiki ui these issues will likely continue.

Jdlrobson added a project: OOUI.May 3 2022, 2:56 PM
Jdlrobson added a comment.May 3 2022, 4:46 PM

(This is arguably a duplicate of T257143)

gerritbot added a comment.May 3 2022, 11:03 PM

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

[mediawiki/extensions/Echo@master] WIP: Echo icons should be consistent with other Vector/Minerva menu icons.

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

gerritbot added a project: Patch-For-Review.May 3 2022, 11:03 PM
Jdlrobson added a comment.EditedMay 3 2022, 11:04 PM

I've confirmed the patch from September we started to fix T257143 also fixes this issue. It needs a discussion with Growth team, more work and support from Growth team for code review to get over the finish line. It's also blocked on the currently in flight T301263.

Jdlrobson moved this task from Incoming to Header, Userlinks and logos on the Desktop Improvements (Vector 2022) board.May 3 2022, 11:11 PM
ovasileva triaged this task as Medium priority.May 4 2022, 12:30 PM
• mewoph edited projects, added Growth-Team (Sprint 0 (Growth Team)); removed Growth-Team.May 5 2022, 10:02 PM
• mewoph moved this task from Incoming to Code Review on the Growth-Team (Sprint 0 (Growth Team)) board.
MMiller_WMF subscribed.May 6 2022, 3:29 PM
• mewoph subscribed.May 9 2022, 6:22 PM

Hi @Jdlrobson, would it make sense to merge this task with T257143: Clean up the technical debt and inconsistencies of notification icon (Echo badge) positioning in different skins and consolidate the discussions there? Or should we keep this task to track another potential one-off fix for this issue?

Tgr subscribed.May 9 2022, 7:34 PM

This seems somewhat intentional: the Vector-specific styling for Echo changes the width when the notification counter shows up. Removing that rule seems to fix the jumping issue (although the counter positioning would have to be changed a bit to adjust for that).

gerritbot added a comment.May 11 2022, 6:34 PM

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

[mediawiki/extensions/Echo@master] Don't change width of Vector when more than 0 notifications

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

Jdlrobson added a comment.EditedMay 11 2022, 6:35 PM

@mewoph now I see @Tgr's comment I see this is slightly different from that one (likely a workaround for that issue), and something probably the web teamcan look into.

@alexhollender_WMF here's a before / after (can start a patchdemo if needed). Do you think this is okay on the short term?:

Screen Shot 2022-05-11 at 11.35.23 AM.png (62×292 px, 3 KB)

Screen Shot 2022-05-11 at 11.35.07 AM.png (90×317 px, 3 KB)

Jdlrobson removed ovasileva as the assignee of this task.May 11 2022, 6:36 PM
Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
alistair3149 subscribed.May 13 2022, 9:03 PM
• alexhollender_WMF added a comment.May 16 2022, 5:20 PM
In T307134#7922118, @Jdlrobson wrote:

@mewoph now I see @Tgr's comment I see this is slightly different from that one (likely a workaround for that issue), and something probably the web teamcan look into.

@alexhollender_WMF here's a before / after (can start a patchdemo if needed). Do you think this is okay on the short term?:

Screen Shot 2022-05-11 at 11.35.23 AM.png (62×292 px, 3 KB)

Screen Shot 2022-05-11 at 11.35.07 AM.png (90×317 px, 3 KB)

I can't quite tell what the result of the change is. Does the icon no longer get wider when the badge appears?

PatchDemoBot added a comment.May 16 2022, 7:08 PM

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

• alexhollender_WMF added a comment.May 16 2022, 7:09 PM

to further clarify how this should work, when the icon has a badge:

  • the size of the icon (including the touch area) should not change
  • the spacing between the icons should no change
  • basically nothing should change, except the badge appearing : )

image.png (298×384 px, 7 KB)

Jdlrobson updated the task description. (Show Details)May 16 2022, 7:20 PM
PatchDemoBot added a comment.May 16 2022, 7:20 PM

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

• alexhollender_WMF added a comment.May 16 2022, 7:26 PM

looking perfect in the latest patchdemo from @Jdlrobson https://patchdemo.wmflabs.org/wikis/f1bbf8d2d4/wiki/Main_Page (logged in as Patch Demo, patchdemo1)

kostajh moved this task from Code Review to QA on the Growth-Team (Sprint 0 (Growth Team)) board.May 16 2022, 7:51 PM
kostajh subscribed.
In T307134#7932286, @alexhollender_WMF wrote:

looking perfect in the latest patchdemo from @Jdlrobson https://patchdemo.wmflabs.org/wikis/f1bbf8d2d4/wiki/Main_Page (logged in as Patch Demo, patchdemo1)

Thank you both!

gerritbot added a comment.May 16 2022, 8:04 PM

Change 791066 merged by jenkins-bot:

[mediawiki/extensions/Echo@master] Don't change width of Vector when more than 0 notifications

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

Jdlrobson moved this task from Upcoming to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.May 16 2022, 8:37 PM
ReleaseTaggerBot added a project: MW-1.39-notes (1.39.0-wmf.13; 2022-05-23).May 17 2022, 8:00 AM
Etonkovidova closed this task as Resolved.May 21 2022, 1:20 AM
Etonkovidova claimed this task.
Etonkovidova subscribed.

Checked in wmf.12 - the issue is fixed.

gerritbot added a comment.Jun 7 2022, 12:01 AM

Change 716609 abandoned by Jdlrobson:

[mediawiki/extensions/Echo@master] WIP: Echo icons should be consistent with other Vector/Minerva menu icons.

Reason:

Continuing in https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Echo/+/803369

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

Maintenance_bot removed a project: Patch-For-Review.Jun 7 2022, 12:30 AM
PatchDemoBot added a comment.Oct 18 2022, 2:09 PM

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

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

PatchDemoBot added a comment.Oct 18 2022, 2:10 PM

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

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

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