Page MenuHomePhabricator

Sometimes, language button will not open language list if user is logged-in
Closed, DuplicatePublic

Description

In new Vector skin, an action button is placed at the article header which should open a language list of articles in other project languages. It seems that there are two different modes for (1) users not logged-in and (2) users logged-in. In the first case, a more comprehensive dialogue is shown with an input line for language search and preferences options. This seems working well.

In the second case a reduced dialogue with a language list and an "edit links" link occur. But this is often not working. If you press on the language button then in many cases nothing happens. You can predict if the list is shown or not. If you are pressing the button and the background color remains white and the border is dotted then a list will be opened. If you are pressing the button and the background color becomes gray and the border is solid then the list will not be opened. It seems that there is no event listener or a listener not working well.

No error report in this respect is given at the console. It seems that in case of the erroneous behavior an error message like "Uncaught ReferenceError: jQuery36006843335910066104_1626853792556 is not defined" (api.php:1:5) occurs.

I observed this erroneous behavior both on Wikipedias and Wikivoyages.

Event Timeline

Hi @RolandUnger, thanks for taking the time to report this! I cannot see an "Edit links" item, and I don't see any UI difference between logged in and not logged in. Could you please follow https://www.mediawiki.org/wiki/How_to_report_a_bug and, for future reference, use the bug report form instead?
Does this also happen in safemode (see https://www.mediawiki.org/wiki/Help:Locating_broken_scripts ) / can you use debug=true? Thanks.

Screenshot from 2021-07-21 10-40-51.png (766×1 px, 221 KB)

Firstly, I add a screenshot:

phab-language-list.jpg (838×1 px, 130 KB)

In HTML, in the header navigation is a checkbox:

<input type="checkbox" data-event-name="ui.dropdown-p-lang-btn" class="vector-menu-checkbox" aria-labelledby="p-lang-btn-label">

If this check box is not displayed, then the language selection is not working. The removal of the checkbox is done with the following CSS rule:

.client-js #p-lang-btn.vector-menu--hide-dropdown .vector-menu-checkbox, .client-js #p-lang-btn.vector-menu--hide-dropdown .vector-menu-content {
    display: none;
}

If the checkbox will be shown then the language list is working.

The error described occurs both in Wikipedia/de and in Wikivoyage/de. I am using on both sites only the following script

https://en.wikipedia.org/w/index.php?title=User:PerfektesChaos/js/pageTeaserHint/r.js

but I cannot say if this is the cause. I will deactivate the pageTeaserHint tool, checking the language selections for a while and ask User:PerfektesChaos if his script will damage the language selection.

Ah, thanks. Seeing what you see required me to first disable Use a compact language list, with languages relevant to you. on https://en.wikipedia.org/wiki/Special:Preferences#mw-prefsection-rendering

Working with safemode is difficult because the error does not occur at every time.

The error occurs after disabling pageTeaserHint, too. I think there is no (user) script affecting vector-menu-checkbox or vector-menu-dropdown classes.

Example: Working

<nav id="p-lang-btn" class="mw-portlet mw-portlet-lang vector-menu vector-menu-dropdown" aria-labelledby="p-lang-btn-label" role="navigation">
	<input type="checkbox" data-event-name="ui.dropdown-p-lang-btn" class="vector-menu-checkbox" aria-labelledby="p-lang-btn-label">
	<h3 id="p-lang-btn-label" class="vector-menu-heading mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-language mw-ui-button mw-ui-quiet">
		<span>19 Sprachen</span>
	</h3>
	<div class="vector-menu-content">
		
		<ul class="vector-menu-content-list"><li class="interlanguage-link interwiki-bn"><a href="https://bn.wikivoyage.org/wiki/%E0%A6%9C%E0%A6%B0%E0%A7%8D%E0%A6%A6%E0%A6%BE%E0%A6%A8" title="জর্দান – Bengalisch" hreflang="bn" class="interlanguage-link-target" lang="bn">বাংলা</a></li> ... <li class="interlanguage-link interwiki-zh"><a href="https://zh.wikivoyage.org/wiki/%E7%BA%A6%E6%97%A6" title="约旦 – Chinesisch" hreflang="zh" class="interlanguage-link-target" lang="zh">中文</a></li></ul>
		<div class="after-portlet after-portlet-lang"><span class="wb-langlinks-edit wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q810#sitelinks-wikivoyage" title="Links auf Artikel in anderen Sprachen bearbeiten" class="wbc-editpage">Links bearbeiten</a></span></div>
	</div>
</nav>

Example: Not working

<nav id="p-lang-btn" class="mw-portlet mw-portlet-lang vector-menu vector-menu-dropdown vector-menu--hide-dropdown" aria-labelledby="p-lang-btn-label" role="navigation">
	<input type="checkbox" data-event-name="ui.dropdown-p-lang-btn" class="vector-menu-checkbox" aria-labelledby="p-lang-btn-label">
	<h3 id="p-lang-btn-label" class="vector-menu-heading mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-language mw-ui-button mw-ui-quiet">
		<span>2 Sprachen</span>
	</h3><div class="vector-menu-content">
		
		<ul class="vector-menu-content-list"><li class="interlanguage-link interwiki-en"><a href="https://en.wikivoyage.org/wiki/Cairo/Ma%27adi" title="Cairo/Ma'adi – Englisch" hreflang="en" class="interlanguage-link-target" lang="en">English</a></li><li class="interlanguage-link interwiki-fa"><a href="https://fa.wikivoyage.org/wiki/%D9%85%D8%B9%D8%A7%D8%AF%DB%8C" title="معادی – Persisch" hreflang="fa" class="interlanguage-link-target" lang="fa">فارسی</a></li></ul>
		<div class="after-portlet after-portlet-lang"><span class="wb-langlinks-edit wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q589934#sitelinks-wikivoyage" title="Links auf Artikel in anderen Sprachen bearbeiten" class="wbc-editpage">Links bearbeiten</a></span></div>
	</div>
	
</nav>

Main difference

<nav id="p-lang-btn" class="mw-portlet mw-portlet-lang vector-menu vector-menu-dropdown" aria-labelledby="p-lang-btn-label" role="navigation">
<nav id="p-lang-btn" class="mw-portlet mw-portlet-lang vector-menu vector-menu-dropdown vector-menu--hide-dropdown" aria-labelledby="p-lang-btn-label" role="navigation">

is only one class vector-menu--hide-dropdown which was wrongly set or not removed.

I think this is an error or unpublished information made by the Desktop improvement team. It cannot be the task of wiki authors to analyze code made by others. I assume that the error was produced by a timing problem or a confusion with other Mediawiki errors like missing window.hunter.

phab-language-list-not-compact.jpg (967×1 px, 91 KB)

There are several problems to me:

  • why the errors occur both on Wikipedia and Wikivoyage with completely different user and local scripts?
  • why the compact language list mode is realized without setting the checkbox?
  • maybe the language list tool was not well tested for the compact language list mode.
Jdlrobson added a subscriber: Jdlrobson.

Unfortunately, despite all your comments I am not sure what the bug being reported is here. I need some clarity around where the bug happens. In particular 1) do you have the preference disabled or enabled? 2) DO you see the bug with safemode=1 in the URL?

Could you describe the bug in terms of what's happening to you as a user, rather than regarding the HTML, or even better upload a video? Is a gadget not working? Is the language button not working?

window.hunter and pageTeaserHint are provided by gadgets and it's not clear to me whether you are running safe mode and experiencing bugs with these gadgets. The vector-menu--hide-dropdown class is added if UniversalLanguageSelector is enabled so I don't see how the addition of that class could be a bug. More likely, something you are running as an incompatibility problem.

To make it more clear: The language button is not working properly, ie the languages list cannot be opened by pressing the language button. The failure occurs only sometimes not at all the time. That's why it is not easy to reproduce it. But it occurs both at German Wikipedia and at German Wikivoyage which use completely different gadgets. That's why I think that local gadgets are not the cause for this failure.

I have unset the option "Use a compact language list, with languages relevant to you." (checkbox is empty) which causes the narrow dialogue. Please see the figure above.

I think the only cause is the vector-menu--hide-dropdown class in the nav tag (the nav tag does not exist in case of missing languages). Normally it should not be set, if a language list with minimally one language exists. If I remove this class manually the list can opened as expected. I assume that this class was set or not removed by a Javascript.

Now, I am using the following CSS rule as a workaround:

.client-js #p-lang-btn.vector-menu--hide-dropdown .vector-menu-checkbox, .client-js #p-lang-btn.vector-menu--hide-dropdown .vector-menu-content {
    display: block !important;
}

It works. But I have no idea if there are any side effects.

it occurs both at German Wikipedia and at German Wikivoyage which use completely different gadgets.

Different broken gadgets could still create similar looking problems.
Does this also happen in safemode? See https://www.mediawiki.org/wiki/Help:Locating_broken_scripts