Page MenuHomePhabricator

Notify gadget users to update Vector scripts and styles
Open, MediumPublic

Description

On 20th and 21st May, as part of T249372: [Dev] DRY up the menu templating code, a minor technical change will be made to Vector to standardise menu HTML which will cause any gadgets or user styles containing the following selectors to break

#p-variants > ul
#p-namespaces > ul
#p-personal > ul
#p-views > ul
#p-cactions > ul

Related: T252467: Notify editors and users to update their Vector gadgets and user scripts/styles on portal CSS selector simplification

Migration strategy

for JS

The supported (official) solution to add menu items is using the mw.util.addPortletLink() JavaScript API (documented on mediawiki).
Using this API your code will be resilient to this change and will also work for all skins (presumably).

Adding a menu item with id #pt-somemenuitem to the START of #p-personal (the user menu):
mw.util.addPortletLink( 'p-personal', '<link href>', '<link text>', 'pt-somemenuitem', '<tooltip>', '<accesskey>', 'li:first' );

Adding a menu item with id #pt-somemenuitem to the END of #p-personal (the user menu):
mw.util.addPortletLink( 'p-personal', '<link href>', '<link text>', 'pt-somemenuitem', '<tooltip>', '<accesskey>', null );

for CSS

The above links should be updated to support the new selector by dropping the '>' character e.g. or strengthening the selectors to contain .vector-menu-content

e.g.

#p-variants  ul
#p-namespaces  ul
#p-personal  ul
#p-views  ul
#p-cactions  ul

Note: removed vector internals. Gadgets should use the public ids.

Possibly Impacted users

@Wetitpig0 @Yiyetianxiang @FTBabin @Wikimäths @נרו יאיר @Trooper777 @Grunny @Peterdownunder @BurritoBazooka @CoolCanuck @Stwalton @Xijia37 aokomoriuta @Wikisaurus @Алекснадр_Мехоношин @Green_WU @Frozen-mikan @ציון הלוי @Macedonia Apple @Atmark-chan @Thesecretaryofwar SalixAlba @Tobin.r.bell @Nka.eee @Yiyetianxiang @Geagea @:דולב @George_Orwell_III @~riley @Cole.ziegler @Steinsplitter @Mtorolite @Slomox @T_kns @George8211 @Vector2.0 @Iunknown110 @Speravir @Hanay @Se4598 @Fitindia @Geagea @Unready @NickTheTurtle @Nka.eee @SoledadKabocha @He7d3r

If you know any of the users above that are not linked - please help by messaging them and asking them to setup a Phabricator account as similar changes are likely over the next few months.

Potentially impacted pages

The change is limited to Vector and may impact the following pages:

https://no.wikipedia.org/wiki/MediaWiki:Gadget-Slett-mellomlager-fane.js
https://zh.wikipedia.org/wiki/User:Wetitpig0/更多.css
https://commons.wikimedia.org/wiki/User:CoolCanuck/userpage.css
https://en.wikibooks.org/wiki/User:Yiyetianxiang/common.css
https://en.wikisource.org/wiki/User:FTBabin/vector.css
https://fi.wikipedia.org/wiki/Käyttäjä:Wikimäths/common.css
https://he.wikipedia.org/wiki/שיחת_משתמש:קיפודנחש/ארכיון_7_-_ארצ'י_בנקר
https://he.wikipedia.org/wiki/משתמש:נרו_יאיר/common.js
https://ja.wikipedia.org/wiki/Wikipedia:バグの報告/MediaWiki1.20
https://pt.wikipedia.org/wiki/Usuário(a):Trooper777/vector.css
https://simple.wikipedia.org/wiki/User:Grunny/enwikitab.js
https://simple.wikipedia.org/wiki/User:Grunny/simplewikitab.js
https://simple.wikipedia.org/wiki/User:Peterdownunder/common.js
https://simple.wiktionary.org/wiki/User:Peterdownunder/common.js
https://en.wikipedia.org/wiki/User:BurritoBazooka/vector.css
https://he.wikipedia.org/wiki/שיחת_משתמש:קיפודנחש/ארכיון_8_-_ארכיפלג_גולג
https://meta.wikimedia.org/wiki/User:CoolCanuck/userpage.css
https://en.wikipedia.org/wiki/User:Stwalton/vector.css
https://en.wikipedia.org/wiki/User:Xijia37/common.css
https://ja.wikipedia.org/wiki/プロジェクト:ウィキ技術部/スクリプト開発/trunk/CollapseTabWhenNarrow.js
https://ja.wikipedia.org/wiki/利用者:青子守歌/trunk/CollapseTabWhenNarrow.js
https://ru.wikipedia.org/wiki/Участник:Wikisaurus/vector.js
https://en.wikipedia.org/wiki/User:Алекснадр_Мехоношин/vector.css
https://ja.wikipedia.org/wiki/Wikipedia:井戸端/subj/ビジュアルエディタでCitation_toolを使う時に書誌情報が英語になる問題
https://meta.wikimedia.org/wiki/User:George8211/global.css
https://meta.wikimedia.org/wiki/User:Green_WU/global.js
https://ja.wikipedia.org/wiki/利用者:Frozen-mikan/vector.js
https://commons.wikimedia.org/wiki/User:ציון_הלוי/common.js
https://en.wikipedia.org/wiki/User:Macedonia_Apple/common.css
https://ja.wikipedia.org/wiki/利用者:Atmark-chan/WTECH/CollapseTabWhenNarrow.js
https://meta.wikimedia.org/wiki/User:Thesecretaryofwar/global.css
https://en.wikipedia.org/wiki/Wikipedia:VisualEditor/Feedback/Archive_2013_8
https://en.wikipedia.org/wiki/User:Salix_alba/common.css
https://en.wikipedia.org/wiki/User:Peterdownunder/common.js
https://en.wikipedia.org/wiki/User:Tobin.r.bell/vector.css
https://en.wikipedia.org/wiki/User:Nka.eee/vector.js
https://en.wikibooks.org/wiki/User:Yiyetianxiang/common.css
https://he.wikipedia.org/wiki/משתמש:Geagea/header.js
https://he.wikipedia.org/wiki/משתמש:דולב/vector.js
https://hu.wikipedia.org/wiki/Wikipédia:Kocsmafal_(műszaki)/Archív82
https://test2.wikipedia.org/wiki/User:George_Orwell_III/vector.js
https://test.wikipedia.org/wiki/MediaWiki:Gadget-teahouse/main.js
https://commons.wikimedia.org/wiki/User:~riley/adminwatch.js
https://en.wikipedia.org/wiki/User:Cole.ziegler/vector.css
https://hu.wikipedia.org/wiki/MediaWiki:Vector.css
https://commons.wikimedia.org/wiki/User:Steinsplitter/adminwatch.js
https://en.wikipedia.org/wiki/User:Mtorolite/vector.css
https://meta.wikimedia.org/wiki/User:Slomox/global.css
https://meta.wikimedia.org/wiki/User_talk:予弦
https://ru.wikipedia.org/wiki/Участник:T_kns/pagesinnamespace.js
https://ru.wikipedia.org/wiki/Участник:Wikisaurus/vector.js
https://de.wikipedia.org/wiki/MediaWiki:Gadget-teahouse/main.js
https://meta.wikimedia.org/wiki/User:George8211/global.css
https://en.wikipedia.org/wiki/User:Vector2.0/common.css
https://en.wikipedia.org/wiki/User:Iunknown110/vector.css
https://ja.wikipedia.org/wiki/利用者:Iunknown110/vector.css
https://meta.wikimedia.org/wiki/User:Speravir/global.css
https://commons.wikimedia.org/wiki/User:Hanay/userwatch.js
https://meta.wikimedia.org/wiki/User:Se4598/global.js
https://commons.wikimedia.org/wiki/User:Fitindia/common.js
https://commons.wikimedia.org/wiki/User:Geagea/adminwatch.js
https://en.wikipedia.org/wiki/User:Unready/ui.clock.js
https://en.wikipedia.org/wiki/User:NickTheTurtle/vector.js
https://en.wikipedia.org/wiki/User:Nka.eee/vector.js
https://en.wikipedia.org/wiki/User:SoledadKabocha/common.css
https://github.com/he7d3r/mw-gadget-LanguageConverter/blob/e70d5505ac463e9432dcce65152f8a100d48fd48/src/LanguageConverter.js#L136-L152
https://github.com/he7d3r/mw-gadget-UserPages/blob/ed1db47cf7df10eeb2dac8969a5d6de912c6d942/src/UserPages.js#L62-L72
The following changes have been taken care of:
https://hu.wikipedia.org/wiki/MediaWiki:Vector.css

Event Timeline

Restricted Application added subscribers: Masumrezarock100, jeblad, Danmichaelo and 2 others. · View Herald TranscriptMay 11 2020, 7:23 PM
Jdlrobson updated the task description. (Show Details)May 11 2020, 7:24 PM

Can someone check if https://en.wikipedia.org/wiki/User:RhinosF1/StatusChange.js is impacted?

mw.util.addPortletLink(

"p-personal", //target tab - personal links

And fix if you can?

Jdlrobson renamed this task from Notify gadget users to update scripts and styles to Notify gadget users to update Vector scripts and styles.May 11 2020, 8:27 PM
Jdlrobson edited projects, added Vector (Vector (Tracking)); removed Vector.
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)

Can someone check if https://en.wikipedia.org/wiki/User:RhinosF1/StatusChange.js is impacted?

mw.util.addPortletLink(

"p-personal", //target tab - personal links

And fix if you can?

@RhinosF1 Your script should not be affected by change above.

Volker_E updated the task description. (Show Details)May 11 2020, 8:52 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)
JJMC89 updated the task description. (Show Details)May 11 2020, 9:50 PM
JJMC89 added subscribers: SalixAlba, Riley_Huntley.
JJMC89 updated the task description. (Show Details)May 11 2020, 9:54 PM
JJMC89 added a subscriber: aokomoriuta.
Johan added a subscriber: Johan.May 14 2020, 12:46 PM

Added to Tech/News/2020/21 to be distributed on Monday.

Jar added a subscriber: Jar.May 18 2020, 6:51 PM
Restricted Application added a subscriber: alanajjar. · View Herald TranscriptMay 18 2020, 6:51 PM
ovasileva triaged this task as Medium priority.May 20 2020, 9:40 AM
ovasileva moved this task from Backlog to Q1 2020-2021 on the Desktop Improvements board.
Volker_E updated the task description. (Show Details)May 27 2020, 4:33 PM
Volker_E added a subscriber: aokomoriuta.
Geagea added a comment.EditedMay 31 2020, 5:45 AM

adminwatch.js does not works to me. What should I need to do to fix it?

OK, fixed it.

adminwatch.js does not works to me. What should I need to do to fix it?
OK, fixed it.

@Geagea $( '#p-personal ul > li:first' ) will work for all skins. The > is removed between #p-personal and ul.

Yes thanks. fixed it.

Yes thanks. fixed it.

I see. I just wanted to say that .vector-menu-content matches a few more menus, not just the personal menu. I'm not sure if that's important to you, but the following line would be more reliable:
.insertBefore( $( '#p-personal ul > li:first' ) );

ok, changed it.

Demian updated the task description. (Show Details)May 31 2020, 9:40 AM
Demian updated the task description. (Show Details)
Demian added a subscriber: aokomoriuta.
Demian removed a subscriber: aokomoriuta.

ok, changed it.

Is there any reason you can't use mw.util.addPortletLink here ?

Geagea added a comment.Jun 1 2020, 2:16 AM

and how to add it? nstead of what?

Demian added a comment.EditedJun 1 2020, 3:08 AM

and how to add it? nstead of what?

That needs quite a bit of tinkering. If you are interested in making this change, I've implemented it for you, just copy it: https://commons.wikimedia.org/wiki/User:Aron_Manning/adminwatch.js

If you're interested in the details, mediawiki has the documentation for mw.util.addPortletLink(). That is the supported (official) JS solution to add menu items.

Demian updated the task description. (Show Details)Jun 1 2020, 3:28 AM
Geagea added a comment.Jun 1 2020, 9:32 AM

Ok I'v changed it.

Sunny00217 updated the task description. (Show Details)Jun 1 2020, 2:33 PM
Sunny00217 added a subscriber: SalixAlba.
Demian updated the task description. (Show Details)Jun 1 2020, 3:33 PM
Demian updated the task description. (Show Details)
Demian added a subscriber: SalixAlba.
Demian removed a subscriber: SalixAlba.
He7d3r updated the task description. (Show Details)Jun 18 2020, 11:22 AM
He7d3r added a subscriber: He7d3r.

@Jdlrobson for better discoverability I believe this task is a child of T249372: [Dev] DRY up the menu templating code
You don't mind if I set that relation?