Page MenuHomePhabricator

"Notices" hitbox overlaps "alerts"
Open, HighPublic

Description

Hi,

Since the last design change on frwikipedia (move of the Search bar), I noticed a bug in the behaviours of the "notices" and "alerts" buttons. Clicking on the "alerts" bell icon opens the "notices" box. The "alerts" box can still be opened using keyboard navigation. The "notices" button hitbox is far too wide (see image) and overlaps the "alerts" bell.

This bug happen whatever browser is used (checked with Firefox and Chrome), no matter the zoom level. It disappears if I use another account, but disabling all gadgets, all beta functionnalities and all scripts loaded in my .js and .css files didn’t fix it.

Several users are impacted: https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Le_Bistro/1_octobre_2020#Bug_de_l%E2%80%99ic%C3%B4ne_de_notification, but I do not know how to reproduce the bug.

Thanks in advance.

QA

  • Check Vector skin
  • Check Minerva (mobile) skin
  • Check Monobook skin
  • Check Timeless skin

Event Timeline

Pic-Sou created this task.Thu, Oct 1, 5:29 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptThu, Oct 1, 5:29 PM
Pic-Sou updated the task description. (Show Details)Sat, Oct 3, 8:32 AM
JeanFred added a subscriber: JeanFred.

I can confirm this.

(This sounds somewhat similar to T261171?)

As per the two merged bugs, this image can help explaining the issue:

Etonkovidova added a subscriber: Etonkovidova.

I can confirm this.

(This sounds somewhat similar to T261171?)

I checked frwiki - the issue seems not to be present anymore. See also my comment on T261171.

I can still reproduce the problem at frwiki (and all the other ones).

I checked frwiki - the issue seems not to be present anymore.

On frwiki the searchbox in header feature - causing this bug - is currently disabled, the searchbox is in its original location.

FWIW, on my Wikipedia screen, if put the cursor on the bell icon's clapper, the tiny bump at the bottom, I get Alerts; but if I put the cursor anywhere else on the bell icon I get Notices.

Same for me; the searchbox did not move (it is just on the right of the logo, at the top of the page) and the bug on the “alerts” and “notifications” buttons is still present.

Restricted Application added a project: Growth-Team. · View Herald TranscriptFri, Oct 9, 2:46 PM

Change 633243 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Vertically align personal tools

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

Change 633244 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/Echo@master] Drop text indent in modern Vector

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

ovasileva triaged this task as High priority.Tue, Oct 13, 11:21 AM

Change 633243 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Vertically align personal tools

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

Change 633244 merged by jenkins-bot:
[mediawiki/extensions/Echo@master] Drop text indent in modern Vector

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

This should be fixed. @ovasileva @MMiller_WMF we should QA this and potentially backport it, but it would be good to be clear which team should own doing these activities.

Change 634253 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@wmf/1.36.0-wmf.13] Vertically align personal tools

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

Change 634254 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/Echo@wmf/1.36.0-wmf.13] Drop text indent in modern Vector

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

Change 634253 merged by jenkins-bot:
[mediawiki/skins/Vector@wmf/1.36.0-wmf.13] Vertically align personal tools

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

Change 634254 merged by jenkins-bot:
[mediawiki/extensions/Echo@wmf/1.36.0-wmf.13] Drop text indent in modern Vector

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

Mentioned in SAL (#wikimedia-operations) [2020-10-15T19:09:52Z] <catrope@deploy1001> Synchronized php-1.36.0-wmf.13/skins/Vector/: Vertically align personal tools (T264339) (duration: 01m 43s)

Mentioned in SAL (#wikimedia-operations) [2020-10-15T19:14:20Z] <catrope@deploy1001> Synchronized php-1.36.0-wmf.13/extensions/Echo/: Drop text indent in modern Vector (T264339) (duration: 01m 51s)

It looks like the click areas have been fixed. Thanks for all the hard work!

Evrifaessa closed this task as Resolved.Mon, Oct 19, 11:22 AM
Evrifaessa added a subscriber: Evrifaessa.

This seems resolved. I can also confirm that the bug was fixed.

Vito-Genovese reopened this task as Open.Mon, Oct 19, 11:26 AM

No, it hasn't been resolved. It has only shifted to the right. See the following image:

They still overlap, and when I try to click on the first letter of [Mytalk], I end up clicking on the Notices icon.

Change 635019 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/Echo@master] Item label can now use overflow hidden

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

Change 635020 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/core@master] Wrap all menu items in a span in SkinMustache skins

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

I propose we start wrapping the text inside links with a span. As part of desktop improvements we're likely be seeing more icons, so I think this is a good strategic move and given the related regressions the current implementation of the Echo icon is too brittle. We could of course just apply the span wrapper to Echo if we wanted to be more conservative, but I would like to take the onus away from extensions of having to know about this implementation detail.

No, it hasn't been resolved. It has only shifted to the right. See the following image:


They still overlap, and when I try to click on the first letter of [Mytalk], I end up clicking on the Notices icon.

Indeed the fix did not take into account languages where "Alerts" translates to a longer word. The correct fix was to restore text-align: left to accommodate the old text hiding hack:
https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/585629/52/resources/skins.vector.styles/layout.less#95

The long-term solution however is to wrap the text in a span and hide it with position: absolute as I've implemented in T261171#6407969:
https://github.com/DemianX0/mediawiki-extensions-Echo/commit/888753f5442169a557a60e5b2ca959cc556144b5#diff-dd78c04f04087df48650282dbda56b61600df921903721f48beca0ce55616e5aR100
Which solution will break the client-side JS of Echo as that is mostly a redundant duplicate of the PHP code, necessitating some changes there too.

Change 635020 abandoned by Jdlrobson:
[mediawiki/core@master] Wrap all menu items in a span in SkinMustache skins

Reason:
I don't have time to investigate the implications of this so for now we'll just amend the Echo item itself https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Echo/ /635019

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

Jdlrobson removed Edtadros as the assignee of this task.Wed, Oct 21, 5:05 PM
Jdlrobson added a subscriber: Edtadros.

Needs review from growth team.

Change 635019 merged by jenkins-bot:
[mediawiki/extensions/Echo@master] Item label can now use overflow hidden

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

Change 635020 restored by Jdlrobson:
[mediawiki/core@master] Wrap all menu items in a span in SkinMustache skins

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

I think i must have had the core change checked out when i tested this. I'm not seeing the span wrapper.

Change 635907 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/core@master] Individual links can request span wrapping if needed

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

Sorry clearly I need to give this more focus than I have been. I thought this was a trivial fix but this is dredging out some deeper problems with the code.
While the situation is improved its still not perfect. I'll take a look Monday unless somebody beats me to it.

I see 3 options which I'll need to explore.

  1. Wrap all menu links in span https://gerrit.wikimedia.org/r/c/635020
  2. Allow individual menu links e.g. Echo to wrap in a span https://gerrit.wikimedia.org/r/635907
  3. Revise the icon styles to use ::before for the icon (no patch yet) .. something like #pt-notifications-notice { overflow: hidden; padding-right: ??px; }

It seems OOUI also changes the icon label when clicked to add even more complexity to this.

Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptMon, Oct 26, 4:47 PM