Page MenuHomePhabricator

The Swedish Wikimini animation is not working correctly
Open, HighPublic

Assigned To
None
Authored By
AxelPettersson_WMSE
Jan 24 2024, 8:09 AM
Referenced Files
F84903285: image.png
Thu, May 28, 3:04 PM
F84903191: image.png
Thu, May 28, 3:04 PM
F84310886: image.png
Tue, May 26, 7:20 AM
F41858878: Wikimini - Loaded JS on SV.jpg
Feb 12 2024, 12:07 AM
F41858877: Wikimini - Loaded JS on FR.jpg
Feb 12 2024, 12:07 AM
F41712984: bild.png
Jan 24 2024, 8:09 AM
F41712950: bild.png
Jan 24 2024, 8:09 AM

Description

The header of https://sv.wikimini.org/ does not work correctly. See the empty space:

image.png (1,920×925 px, 238 KB)

The crash in the console for the sv version is:

TypeError: can't redefine non-configurable property "__swiffy_override" TypeError: can't redefine non-configurable property "__swiffy_override"
    <anonymous> https://sv.wikimini.org/w/load.php?debug=false&lang=sv&modules=swiffy.fr.js&skin=wikimini&version=1yyc2s2:88
    <anonymous> https://sv.wikimini.org/w/load.php?debug=false&lang=sv&modules=swiffy.fr.js&skin=wikimini&version=1yyc2s2:428
    jQuery 8
    <anonymous> https://sv.wikimini.org/w/load.php?debug=false&lang=sv&modules=swiffy.fr.js&skin=wikimini&version=1yyc2s2:1
load.php:176:570
    jQuery 14
    <anonymous> https://sv.wikimini.org/w/load.php?debug=false&lang=sv&modules=swiffy.fr.js&skin=wikimini&version=1yyc2s2:1

Here what it should look like (for fr) instead:

image.png (1,920×925 px, 239 KB)

Note that it should work, and it should also be translated in Swedish.


Here the original task description:

The tabs at the top of Swedish Wikimini, https://sv.wikimini.org/wiki/Huvudsida, are in French.

bild.png (785×663 px, 210 KB)

Should be:

bild.png (853×311 px, 150 KB)

Related Objects

StatusSubtypeAssignedTask
StalledNone
OpenNone
OpenNone
OpenNone
OpenNone
Resolvedvalerio.bozzolan
Resolvedvalerio.bozzolan
Resolvedvalerio.bozzolan
Resolvedvalerio.bozzolan
OpenSeb35
ResolvedValerioBoz-WMCH
Resolvedvalerio.bozzolan
ResolvedValerioBoz-WMCH
ResolvedValerioBoz-WMCH
ResolvedValerioBoz-WMCH
ResolvedValerioBoz-WMCH
ResolvedValerioBoz-WMCH
OpenNone
ResolvedRaphoraph
OpenNone

Event Timeline

ValerioBoz-WMCH subscribed.

Thanks for this bug report! I was assigned to this Task as part of the WMCH Tech Boost.

I will do a better triage today, but I can already say that we need a sub-task to support internationalization (i18n) of that banner, to be able to localize it (l10n).

The interesting thing is that, that banner, was historically implemented as a Flash Player tool. Fortunately, since some years, it was re-converted as a JavaScript script, using a semi-automatic procedure. So this should be do-able.

Thanks! I was surprised when they were back to French, as I think we translated most everything way back when we started. Let me know when I should do something more with this, or if there are other translations we need to update.

Minor clarification to avoid double-work: is F41712984 a mockup? (or, is that online somewhere?) Thanks!

No, it's not a mockup. Everything was working fine before. The tabs were showing in Swedish before.

Everything related to the translation of Wikimini was organized here: https://lab.wikimini.org/wiki/Translation

The custom system messages that we needed (ex: the custom header tabs) were added to Wikimini through a custom extension that were created especially for that purpose. I forgot the name we gave to this extension, but I think it was something like "wikimini-messages" or "wikimini-system-messages" or something similar. Sorry, I do not have access to the server anymore. Actually, I don't know why an extension was created for this, because it is my understanding that we could have added these new custom system messages directly to the database (adding new "MediaWiki:ThisIsMyCustomSystemMessage" through the MediaWiki interface. Not sure about this).

I 've seen that some work had been recently done on the Wikimini skin (see https://phabricator.wikimedia.org/T320911). The header tabs are based on Javascript. Maybe the skin was calling the correct JS based on the user language before, and maybe a change was made on this aspect? Not sure...

Thanks for the precious details. I see now.

Premising that we have some extensions in the quarantine directory like "secure include" etc. so this is probably totally relevant (T331153)...

Anyway, the module was loaded in this way:

/var/www/wikimini.org/www/w/skins/Wikimini/SkinWikimini.php
if ( WIKIMINI_PROJECT_UID === 'sv' ) {
        $out->addModules( array( 'swiffy.sv.js' ) );
} else {
        $out->addModules( array( 'swiffy.fr.js' ) ) ;
}

$out->addModules( array( 'skins.wikimini.js' ) );
$out->addModules( array( 'skins.wikimini.js2' ) );
NOTE: According to the documentation (https://www.mediawiki.org/wiki/ResourceLoader/Developing_with_ResourceLoader) probably we should rename swiffy.sv.js to something like skins.swiffy.sv (so, starting with skin. and having no .js extension to avoid confusion since it's a module - that can load JS and CSS).

And this is the skin registration:

/var/www/wikimini.org/www/w/skins/Wikimini/skin.json
 "swiffy.sv.js": {
        "scripts": [
                "resources/js/sv/swiffy-runtime-7.3.js",
                "resources/js/sv/swiffy-object.js"
        ],
        "position": "top",
        "dependencies": [

        ]
},
"swiffy.fr.js": {
        "scripts": [
                "resources/js/swiffy-runtime.js",
                "resources/js/fr/swiffy-object.js"
        ],
        "position": "top",
        "dependencies": [

        ]
},

Now. If I understand correctly the "Google Swiffy" legacy logic

https://en.wikipedia.org/wiki/Google_Swiffy

The file swiffy-object.js contains a "somehow not readable but structured" eset of instructions to run the full animation loop, and other things, like strings (!) But, I was not able to find there the exact French strings that are shown on the sv version. Instead I somehow see them in the fr version that are online there.

So I'm on a dead end at the moment and this makes me frustrated since I would like to help more this beautiful project.

If - maybe thanks to this - anybody here have now ANY memory about how internationalization (i18n) was implemented, feel free to share and you will dramatically boost this activity. And I will offer you a pizza almost immediately.

Hi,

All the new custom system messages (see on the Lab) that we needed for the project were added to Wikimini with the help of an extension. This extension was created especially and only for this purpose, and its name is: WikiminiLanguage.

The text elements of the JS animated banner (previously built in Flash) are listed on this page: https://lab.wikimini.org/wiki/Translation/Other_elements/Flash_banner (<-- This page was used to help with translating). I don't know if these text elements were also being added through the WikiminiLanguage extension (as new System Messages), or if they were simply put directly into the swf/JS files.

In the HTML source code of the pages https://fr.wikimini.org and https://sv.wikimini.org we can see:

On FR:

mw.loader.load(["mediawiki.page.startup","mmv.head","ext.uls.init","ext.visualEditor.desktopArticleTarget.init","swiffy.fr.js","skins.wikimini.js"]);});

On SV:

mw.loader.load(["mediawiki.page.startup","mmv.head","ext.uls.init","ext.visualEditor.desktopArticleTarget.init","swiffy.sv.js","skins.wikimini.js"]);});

So everything seems OK.

But when inspecting this JS animated element (using Google Chrome) and showing the "Sources" tab (Chrome Developer Tools), I saw these differences:

Wikimini - Loaded JS on FR.jpg (787×595 px, 119 KB)

Wikimini - Loaded JS on SV.jpg (882×465 px, 82 KB)

On Wikimini SV we can see both the swiffy.fr and swiffy.sv. I don't know why.

Sorry if this doesn't solve the problem, but maybe it helps understand what's happening. And it's important to remember that this was working before.

Assuming this is about my fork of the Wikimini skin (ping T356324 etc.) ...

This seems to be because /resources/js/wikimini.js (a part of the skins.wikimini.js2 ResouceLoader module) loads the RL module swiffy.fr.js inline unconditionally if the HeaderState cookie is present. Changing the module's lang code on the offending line manually from fr to sv results in different JS errors than the ones we're used to (T356312), IIRC because the French code uses an older version of Swiffy than what the Swedish code tries to use.
I'm not sure why the module is loaded inline (I didn't introduce that code, it was already there prior to my changes) but I *think* it might've been needed? Ideally, as per SkinWikimini.php, if the LocalSettings.php (or equivalent) configuration file for the Swedish site has define( 'WIKIMINI_PROJECT_UID', 'sv' ); the Swedish Swiffy code is loaded, otherwise the French is; but as we can clearly see, it's not working right now as intended.

Anyway, Swiffy is a HUGE tech debt burden and IIRC its license is dubious and maybe not even really free enough and I strongly suggest phasing it out at the earliest possible opportunity. It'd allow fixing T356312, too, even. :-)

Hopefully fixed with https://gitlab.wikimedia.org/ashley/mediawiki-skins-Wikimini/-/commit/f2dbec0f6f5e8b73505559156d43d37765afaff0 ; note that it relies on the content language (on the JS file) so sticking ?uselang=sv to the URL on the French site won't load the Swedish code, and likewise, appending ?uselang=fr won't load the French code on the Swedish site. If the language code is neither fr or sv, the French (fr) code is used as a fallback. Oh, and as per SkinWikimini.php, the Swedish site's configuration file is assumed to have define( 'WIKIMINI_PROJECT_UID', 'sv' ); in it but as per my inline comment on that file, changing that is easy enough.

This seems to be fixed now. Suggest closing as resolved.

image.png (958×927 px, 314 KB)

This seems to be fixed now. Suggest closing as resolved.

image.png (958×927 px, 314 KB)

Thank you for this screenshot, but it looks like the relevant component in the the top part of the page is not shown. Maybe because it does not work :( Here my screenshot sv.wikimini.org:

image.png (1,920×925 px, 238 KB)

If you see the same (so, big empty space in the top of the page) this means te "Swiffy animation" is still broken for sv.

The crash in the console for the sv version is:

TypeError: can't redefine non-configurable property "__swiffy_override" TypeError: can't redefine non-configurable property "__swiffy_override"
    <anonymous> https://sv.wikimini.org/w/load.php?debug=false&lang=sv&modules=swiffy.fr.js&skin=wikimini&version=1yyc2s2:88
    <anonymous> https://sv.wikimini.org/w/load.php?debug=false&lang=sv&modules=swiffy.fr.js&skin=wikimini&version=1yyc2s2:428
    jQuery 8
    <anonymous> https://sv.wikimini.org/w/load.php?debug=false&lang=sv&modules=swiffy.fr.js&skin=wikimini&version=1yyc2s2:1
load.php:176:570
    jQuery 14
    <anonymous> https://sv.wikimini.org/w/load.php?debug=false&lang=sv&modules=swiffy.fr.js&skin=wikimini&version=1yyc2s2:1

Here what it should look like (for fr) instead:

image.png (1,920×925 px, 239 KB)

Unfortunately I cannot help more than this at the moment. This bug is stalled.

If you have a JavaScript patch or any solution, please feel free to get in touch and propose something.

I will keep the task opened, but unassigned, since this is the real situation: nobody is currently working on this, and I personally have found no solution - sorry :(

Raising priority since it's a confirmed bug since many months.

ValerioBoz-WMCH renamed this task from Tabs on Swedish Wikimini are in French to The Swedish Wikimini animation is not working correctly.Thu, May 28, 3:08 PM
ValerioBoz-WMCH updated the task description. (Show Details)

I've contacted Ilario Valdelli to receive the authorization to activate WikiValley for this specific JavaScript+mw activity. I bet WikiValley has strong experience in complicated frontend situations with obscured/minified JavaScript in very custom MediaWikis. Maybe thay can find a minimal JS patch without requiring a component rewrite/removal.

In the "wikimaxi" updated demo version (https://sv.wikimaxi.org/wiki/Huvudsida) (provided from T278033) I noticed that the swiffy banner does not load, at least to me in both Firefox and Chromium from Debian stable. This time I do not get any particular console warning.

Wikimaxi error missing swiffy banner in testing version.png (1,600×727 px, 172 KB)

So, setting T278033 as direct sub-task, to do not forget about this, before the production release.

Edited: disabling uBlock origin does not fixes to me.

Edited: same for the main fr version from https://fr.wikimaxi.org/wiki/Accueil

So I'm probably reporting an unrelated bug.

OK ignore my last comment, which is off-topic. We have just a problem in the testing version. Not limited to sv.