| Nemo_bis | |
| Sep 10 2015, 7:13 AM |
| F3039910: SpecialManageTranslatorSandbox_FOUC | |
| Dec 1 2015, 4:25 PM |
I opened https://translatewiki.net/wiki/Special:ManageTranslatorSandbox and the right hand side was blank (no buttons to approve/reject users). Moreover, clicking any of the items in the queue did not do anything.
After (hard) refreshing, the page was loaded correctly.
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Move document-ready to the bottom | mediawiki/extensions/Translate | master | +30 -30 |
Indeed. Maybe the ResourceLoader folks can write some docs on how to identify and fix FOUC, graphical glitches and load failures happening after the recent changes?
Today I opened https://translatewiki.net/wiki/Special:ManageTranslatorSandbox again for the first time in a while and it stalled for a long time (probably a minute) in "read translatewiki.net...", then it loaded correctly (or it looked like it did; didn't click anything).
However, when I did ctrl-f5, the page reloaded with the same issue originally reported (and relatively quickier; probably less than 15 seconds). No JavaScript errors in the console.
Could this be related to T115692: Flash of unstyled content (FOUC) on Login page and Preferences (and possibly other highly visible pages?) and possibly caused by T107399: Make top queue fully asynchronous ?
That's the list of the main suspects, yes. AFAIK we're still waiting for documentation on how special page and extension developers can make sure things are loaded in correct sequence.
"no buttons" sounds like an execution error... But I have no access to that page, anyone else have an easy test route for this ?
Try https://dev.translatewiki.net/wiki/Special:ManageTranslatorSandbox , I gave you permissions there.
JS execution error:
[Error] TypeError: $('.request-filter-box').translatorSearch is not a function. (In '$('.request-filter-box').translatorSearch()', '$('.request-filter-box').translatorSearch' is undefined)
log
handler
fire
fireWith
fire
track
runScript
checkCssHandles
(anonymous function)
fire
fireWith
fire
fireCallbacks
addEmbeddedCSS
(anonymous function)The problem is that ext.translate.special.managetranslatorsandbox has a document.ready function that uses "translatorSearch()". This document.ready is immediately executed when the JS code is being executed, because the dom is already available. However $.fn.translatorSearch() is only defined several lines below this execution, and thus we see an undefined.
The document.ready's should be at the bottom of your scripts, or split it out into multiple modules with dependencies.
Change 256178 had a related patch set uploaded (by Nikerabbit):
Move document-ready to the bottom
The document.ready's should be at the bottom of your scripts, or split it out into multiple modules with dependencies.
Can this be generalised into a general recommendation at [[CC/JS]] or some [[RL]] subpage?
Difficult. "define before you use" is already a recommendation for JS, but here the usage is somewhat hidden due to jQuery. You could argue that modules using a jquery collection should ideally be separate from modules publishing a jquery collection function...
Ok, I can't reproduce the bug any longer despite several attempts in Firefox 42 (though there is still a rather large FOUC: F3039910).