Page MenuHomePhabricator

Ugly namespace tab inserted when trying to add to legacy p-namespaces in Vector 2022
Closed, DuplicatePublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

  • Navigate to any page in Vactor 2022 skin
  • Open browser console and type mw.util.addPortletLink('p-namespaces', '#', 'Lorem ipsum')

What happens?:
The tab looks ugly.

image.png (146×358 px, 6 KB)

What should have happened instead?:
The tab should look like the other ones. The logic that maps p-namespaces to p-associated-pages in Vector 2022 should apply as well to the one that decides on the link styles.

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

Event Timeline

At least the class vector-tab-noicon should be added to the <li>, I assume.

This code is used on wikisource:

var mwskin = mw.config.get('skin');
var parentId = mwskin === "vector-2022" ? 'p-associated-pages' : 'p-namespaces';
var item = mw.util.addPortletLink( parentId, '#', "Lorem ipsum");
if (item && mwskin === "vector-2022") {
	item.classList.add('vector-tab-noicon');	// v22
}

Interestingly if you want an image icon you should add that class too. Like the book icon on Wikisource e.g.:
https://pl.wikisource.org/wiki/SJP:AKLAMACYA

It doesn't really work (the image is shifted up), but doesn't stand out too much. It was worse before adding the class.

Jdlrobson subscribed.

Please see the error console. Use of p-namespaces there is deprecated and will be removed soon. p-associated-pages should be used instead.

Please see the error console.

It says: "Please update call to mw.util.addPortletLink with ID p-namespaces. Use p-associatedPages instead."

  1. The new element has ID p-associated-pages (with a dash, not camelCase); using p-associatedPages doesn't have any effect.
  2. If you follow this advice, your item won't be added on Vector and Timeless which still have p-namespaces.
  3. The code mapping #p-namespaces to #p-associated-pages may cause a race condition if the script is smart enough to specifically look for the existence of #p-namespaces before adding its item (see T345491). (Update: and even break some things completely, see T345491#9138953.)

Why not just make sure all skins use the same IDs and do backwards compatibility by centralized means (in mw.util.addPortletLink() itself perhaps) instead of having pieces of code all around struggling to make sense of each other? (Otherwise, how is the update to p-associated-pages T316908 supposed to carry on? Will each skin have this mapping code that fixes one thing, breaks another?)

Please see the error console.

It says: "Please update call to mw.util.addPortletLink with ID p-namespaces. Use p-associatedPages instead."

  1. The new element has ID p-associated-pages (with a dash, not camelCase); using p-associatedPages doesn't have any effect.

This is a typo and fixed in T345488.

  1. If you follow this advice, your item won't be added on Vector and Timeless which still have p-namespaces.

Correct. It's up to the gadget to detect menu support first.

  1. The code mapping #p-namespaces to #p-associated-pages may cause a race condition if the script is smart enough to specifically look for the existence of #p-namespaces before adding its item (see T345491). (Update: and even break some things completely, see T345491#9138953.)

The issue here is the asynchronous hook. Please see T291700 where we are evaluating alternatives.

Why not just make sure all skins use the same IDs and do backwards compatibility by centralized means (in mw.util.addPortletLink() itself perhaps) instead of having pieces of code all around struggling to make sense of each other?
(Otherwise, how is the update to p-associated-pages T316908 supposed to carry on? Will each skin have this mapping code that fixes one thing, breaks another?)

We've been working towards standardizing the menu IDs however it's challenging. The challenge here is we have various gadgets that do not use addPortletLink and/or make queries on the DOM with the assumption that p-namespaces is there and no process for getting those fixed and low tolerance from editors for breakage. For this reason it was limited to certain skins. If we dropped the use of p-namespaces ID lots of user scripts/gadgets in Monobook and Vector would break. In short p-namespaces will eventually disappear.
Side note: I'm trying to clarify a few things in the policy area to make this easier to address in future.

Correct. It's up to the gadget to detect menu support first.

I think this is a classic "developer logic vs user logic" problem. From the user's (gadget developer's) POV, "Please update call to mw.util.addPortletLink with ID p-namespaces. Use p-associated-pages instead." means exactly that: replace all usages of p-namespaces with p-associated-pages. The user likely won't even notice that this warning comes from the Vector 2022 skin, assuming the instruction to be universal.