Page MenuHomePhabricator

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

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

Event Timeline

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.

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

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.

ovasileva triaged this task as Medium priority.May 4 2022, 12:30 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?

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).

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

@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)

@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?

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

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)

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

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

kostajh added a subscriber: kostajh.

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!

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

Etonkovidova claimed this task.
Etonkovidova added a subscriber: Etonkovidova.

Checked in wmf.12 - the issue is fixed.

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