Page MenuHomePhabricator

[Regression wmf.10] Notification icons in the personal toolbar don't appear when using Monobook
Closed, ResolvedPublicBUG REPORT

Description

Since this morning the notification icons provided by Notifications at the top toolbar on the MonoBook skin have vanished.

Issue confirmed by @Cohaf a couple of minutes ago as well.

They display okay on Vector (legacy skin) and on Modern.

Edit: I've noticed this on Meta-Wiki. However MonoBook on eswiki works as expected. I'll check other wikis too and see if this is just a local issue.

Event Timeline

MarcoAurelio renamed this task from Notification icons gone on Monobook since this morning to Notification icons gone on Monobook since this morning (Meta-Wiki).Jun 25 2019, 1:42 PM

Indeed. Going to https://meta.wikimedia.org/wiki/?useskin=monobook&debug=true and looking at the Developer Tools (see https://www.mediawiki.org/wiki/Help:Locating_broken_scripts how to use them), I see Error: Unknown module: ext.echo.badgeicons. Full trace is:

load.php?debug=true&lang=en&modules=startup&only=scripts&skin=monobook:227 Error: Unknown module: ext.echo.badgeicons
    at sortDependencies (load.php?debug=true&lang=en&modules=startup&only=scripts&skin=monobook:1039)
    at sortDependencies (load.php?debug=true&lang=en&modules=startup&only=scripts&skin=monobook:1069)
    at resolveStubbornly (load.php?debug=true&lang=en&modules=startup&only=scripts&skin=monobook:1110)
    at Object.load (load.php?debug=true&lang=en&modules=startup&only=scripts&skin=monobook:2156)
    at load.php?debug=true&lang=en&modules=startup&only=scripts&skin=monobook:10949
    at load.php?debug=true&lang=en&modules=startup&only=scripts&skin=monobook:10986
Aklapper renamed this task from Notification icons gone on Monobook since this morning (Meta-Wiki) to Notification icons gone on meta wiki when using Monobook: "Error: Unknown module: ext.echo.badgeicons".Jun 25 2019, 1:47 PM

Mostly the same message on my Error Log:

load.php?debug=true&lang=en&modules=startup&only=scripts&safemode=1&skin=monobook:227 Error: Unknown module: ext.echo.badgeicons
    at sortDependencies (load.php?debug=true&lang=en&modules=startup&only=scripts&safemode=1&skin=monobook:1039)
    at sortDependencies (load.php?debug=true&lang=en&modules=startup&only=scripts&safemode=1&skin=monobook:1069)
    at resolveStubbornly (load.php?debug=true&lang=en&modules=startup&only=scripts&safemode=1&skin=monobook:1110)
    at Object.load (load.php?debug=true&lang=en&modules=startup&only=scripts&safemode=1&skin=monobook:2156)
    at load.php?debug=true&lang=en&modules=startup&only=scripts&safemode=1&skin=monobook:10476
    at load.php?debug=true&lang=en&modules=startup&only=scripts&safemode=1&skin=monobook:10513
MarcoAurelio changed the subtype of this task from "Task" to "Bug Report".Jun 25 2019, 1:54 PM

ext.echo.badgeicons got removed in https://phabricator.wikimedia.org/rECHOc86a1a5cf34cc4b64d6479a57e734f1fa4926431

Monobook still tries to use it in ./includes/SkinMonoBook.php which includes the line 'dependencies' => [ 'ext.echo.badgeicons', 'mediawiki.util' ],

I guess you simply need to replace ext.echo.badgeicons with oojs-ui.styles.icons-alerts

Any idea why, if this is a MonoBook skin issue, it only fails on Meta and not on eswiki, for example?

Yes: eswiki is group2 which is still on version 1.34.0-wmf.8, metawiki is group1 which is already on 1.34.0-wmf.10

I recommend https://tools.wmflabs.org/versions/ to quickly check.

Okay thanks. I wrongly thought the wmf.10 train was still blocked due to the JobQueue issues. I now saw some pending notifications that the blocking tasks for the train were resolved and the train indeed did, this time, "depart from the station" ;-)

Not a hard blocker for T220735 as it's all functional, but still going to add it as this issue is highly visible and a patch in git master should be backported...

ext.echo.badgeicons got removed in https://phabricator.wikimedia.org/rECHOc86a1a5cf34cc4b64d6479a57e734f1fa4926431

Monobook still tries to use it in ./includes/SkinMonoBook.php which includes the line 'dependencies' => [ 'ext.echo.badgeicons', 'mediawiki.util' ],

I guess you simply need to replace ext.echo.badgeicons with oojs-ui.styles.icons-alerts

I'll make a patch.

Change 519031 had a related patch set uploaded (by MarcoAurelio; owner: MarcoAurelio):
[mediawiki/skins/MonoBook@master] Use oojs-ui.styles.icons-alerts

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

Change 519031 merged by jenkins-bot:
[mediawiki/skins/MonoBook@master] Use oojs-ui.styles.icons-alerts

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

Change 519045 had a related patch set uploaded (by Jforrester; owner: MarcoAurelio):
[mediawiki/skins/MonoBook@wmf/1.34.0-wmf.10] Use oojs-ui.styles.icons-alerts

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

Change 519045 merged by jenkins-bot:
[mediawiki/skins/MonoBook@wmf/1.34.0-wmf.10] Use oojs-ui.styles.icons-alerts

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

Mentioned in SAL (#wikimedia-operations) [2019-06-25T15:28:29Z] <jforrester@deploy1001> Synchronized php-1.34.0-wmf.10/skins/MonoBook/includes/SkinMonoBook.php: T226503 Fix Notifications RL module dependency (duration: 00m 57s)

Looks like it needs further work. :-(

Monobook... sigh. https://meta.wikimedia.org/w/load.php?debug=true&lang=en&modules=ext.echo.styles.badge&only=styles&skin=monobook has:

/* We have to include the #pt-notifications selector due to monobook */
#pt-notifications-notice .mw-echo-notifications-badge,
#pt-notifications-alert .mw-echo-notifications-badge {
  display: inline-block;
  width: 16px;
  height: 16px;
  top: -1001px;
}

If you disable the top value you at least get the bell displayed, but not the notification number.

Probably needs fiddling in
https://phabricator.wikimedia.org/diffusion/ECHO/browse/master/modules/nojs/mw.echo.badge.less and https://phabricator.wikimedia.org/diffusion/ECHO/browse/master/modules/nojs/mw.echo.badge.monobook.less or such.

(Personal opinion: No idea how many folks use Monobook, or how maintained that is, and whether to really block 1.34.0-wmf.10 on this.)

This code was recently changed to use text-align instead. I'll take a look.

On dewiki, the icons are missing too.

This is a re-run of T161302: Invisible link to notifications can overlap link to personal talk page, the trick that we came up with on that task broke because this change by @Shivanshbindal9 changed the structure of the badge. Previously, the icon was a background-image on a :before pseudo-element, now it's a background-image on the badge itself. Previously, we hid the text by positioning the badge above the top of the page (top: -1000px), then positioning the :before: (icon) and :after` (counter) pseudo-elements back down. Now, we hide the text by setting text-indent: -9999px on the badge (and unsetting that on the counter). That works in most skins because the badge is display: block, but it breaks in Monobook because the badge is display: inline-block there. That causes the text-indent rule not to push the text out all the way beyond the edge of the screen, instead it only gets right-aligned within the badge.

Screenshot from 2019-06-25 12-47-10.png (44×713 px, 17 KB)

I thought about a number of alternatives, and rejected the following:

  • Positioning the badge up then pushing the icon down using positioning is no longer possible, because the icon is no longer a pseudo-element and so it's no longer separately styleable
  • text-indent: -9999px doesn't work on inline-block elements, the text remains visible just to the left of (and over top of) the badge
  • color: transparent hides the text but causes tooltips to be wrong on adjacent elements, per T161302
  • color: transparent; overflow: hidden fixes the tooltip overlap issue, but also cuts off the counter (which is positioned partly outside the badge)
  • font-size: 0 doesn't work in Opera because it enforces a minimum font size, according to @matmarex . I'm curious whether this is still an issue in modern versions of Opera that use Blink

I'm going to submit a patch that uses the color: transparent approach, which we know has a minor issue with tooltips (T161302) but otherwise works, and which we used for a while; and a second patch that uses a new approach that I came up with: the badge is positioned off-screen with top: -100px, but it's 120px tall (100px plus the icon height), and the background is positioned at the bottom. Since this is more experimental, I wanted to make sure that we also had a patch using an approach that's known to mostly work with minor issues, so that that can be deployed quickly. (Both of these would only affect Monobook, other skins would be unaffected.)

Epiphany: negative text-indent doesn't work with display: inline-block, but positive text-indent does. So I'm just going to do that, but only in Monobook, and make the text color: transparent, just in case someone views the page on a super high resolution monitor (where the viewport with is more than 10k px).

Change 519127 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/Echo@master] Fix badge icons in Monobook

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

Change 519127 merged by jenkins-bot:
[mediawiki/extensions/Echo@master] Fix badge icons in Monobook

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

Change 519142 had a related patch set uploaded (by Jforrester; owner: Catrope):
[mediawiki/extensions/Echo@wmf/1.34.0-wmf.11] Fix badge icons in Monobook

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

Change 519143 had a related patch set uploaded (by Jforrester; owner: Catrope):
[mediawiki/extensions/Echo@wmf/1.34.0-wmf.10] Fix badge icons in Monobook

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

Change 519143 merged by jenkins-bot:
[mediawiki/extensions/Echo@wmf/1.34.0-wmf.10] Fix badge icons in Monobook

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

Change 519142 merged by jenkins-bot:
[mediawiki/extensions/Echo@wmf/1.34.0-wmf.11] Fix badge icons in Monobook

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

Mentioned in SAL (#wikimedia-operations) [2019-06-25T22:48:52Z] <jforrester@deploy1001> Synchronized php-1.34.0-wmf.10/extensions/Echo/modules/nojs/: T226503 Fix badge icons in Monobook (duration: 00m 57s)

Mentioned in SAL (#wikimedia-operations) [2019-06-25T22:50:14Z] <jforrester@deploy1001> Synchronized php-1.34.0-wmf.11/extensions/Echo/modules/nojs/: T226503 Fix badge icons in Monobook (duration: 00m 56s)

Jdforrester-WMF renamed this task from Notification icons gone on meta wiki when using Monobook: "Error: Unknown module: ext.echo.badgeicons" to [Regression wmf.10] Notification icons in the personal toolbar don't appear when using Monobook.Jun 25 2019, 10:51 PM
Jdforrester-WMF closed this task as Resolved.

@Catrope: Now, in multiple browsers, document.body.scrollWidth > 10000 in MonoBook, producing a huge amount of empty space to the right of the content. Seemed to start with this fix.

@Catrope: Now, in multiple browsers, document.body.scrollWidth > 10000 in MonoBook, producing a huge amount of empty space to the right of the content. Seemed to start with this fix.

Correct, that's the fix for working around the mess that is MonoBook.

The forced width on monobook isn't really a "fix" now then, it is a new problem. T226597 opened on that. Why wasn't the breaking action on this reverted instead of causing new headaches?

This bug (defined by its task summary) is fixed, hence closing as resolved again.

This bug (defined by its task summary) is fixed, hence closing as resolved again.

Thanks to all who have worked on fixing this so quickly! :-)

@Raymond & @Nikerabbit - This bug is currently showing on translatewiki.net - Could you please port the fixes done on MW/WMF for us there as well? Thanks.