Page MenuHomePhabricator
Create Task
Maniphest T111685

Unstable interface bug in the Translate form
Closed, ResolvedPublic
Actions

Description

For several weeks, I see an annoying bug: when you click on the link to "translate" link in the translatable page, and then begin to translate any item, the translation form opens in a corrupt view:

pasted_file (664×1 px, 131 KB)

I don't see suggestions ;(

After page refresh, this restored to good view, until the next translatable page:

pasted_file (490×1 px, 84 KB)

OS: Win7,
Browser: Yandex-Browser (based on Chromium)
Site: Meta-wiki

Another example from translatewiki.net:

See also: T112047: Special:ManageTranslatorSandbox fails to finish loading

Details

SubjectRepoBranchLines +/-
Fix typo in previous commitmediawiki/extensions/Translatemaster+1 -1
Temporary fix for broken infocolumn (part 2)mediawiki/extensions/Translatemaster+10 -5
Temporary fix for broken infocolumnmediawiki/extensions/Translatemaster+2 -1
Customize query in gerrit

Related Objects

Event Timeline

Kaganer created this task.Sep 7 2015, 12:38 PM
Kaganer assigned this task to Pginer-WMF.
Kaganer raised the priority of this task from to Needs Triage.
Kaganer updated the task description. (Show Details)
Kaganer added a project: MediaWiki-extensions-Translate.
Kaganer added subscribers: Kaganer, Amire80, Nikerabbit.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 7 2015, 12:38 PM
Kaganer updated the task description. (Show Details)Sep 7 2015, 12:40 PM
Kaganer set Security to None.
Kaganer updated the task description. (Show Details)
Nikerabbit added a subscriber: Krinkle.Sep 7 2015, 12:49 PM

I have seen this myself once or twice on Chrome. Most likely related to the recent changes of async loading of resources or the changes to styles I did.

Probably related is that on translatewiki.net main page I sometimes see the buttons without the usual styles.

In both cases cache bypassing refresh will clear the issue.

I didn't bother reporting this because I though it was just a temporary glitch and I because it might be part of the screen corruption issues (parts of pages not redrawing) on Fedora 22 I am having a lot.

Nikerabbit removed Pginer-WMF as the assignee of this task.Sep 7 2015, 12:50 PM
Nikerabbit triaged this task as High priority.
Nikerabbit updated the task description. (Show Details)
Nemo_bis subscribed.Sep 7 2015, 12:56 PM
Nikerabbit merged a task: T111453: Translation help missing, translations rendered as wikitext.Sep 9 2015, 6:42 AM
Nikerabbit added a subscriber: • Purodha.

From the duplicate report, it seems this might also affect JavaScript, not only CSS.

Nikerabbit moved this task from Backlog to tux on the MediaWiki-extensions-Translate board.Sep 9 2015, 7:07 AM
Nemo_bis added a project: MediaWiki-ResourceLoader.Sep 10 2015, 6:42 AM
Nemo_bis updated the task description. (Show Details)Sep 11 2015, 10:35 AM
Nemo_bis added a project: JavaScript.
Nemo_bis added a subscriber: Liuxinyu970226.
Nemo_bis updated the task description. (Show Details)Sep 22 2015, 1:01 PM
Nemo_bis mentioned this in T114239: Special:Translate in mediawiki.org shows empty list due to Gadget-ajaxrecentchanges.js and Gadget-oldeditor.js.Oct 1 2015, 7:37 AM
Nemo_bis added a project: MW-1.26-release.
• demon subscribed.Oct 22 2015, 4:46 PM

Not sure why this is tagged MW-1.26-release, it isn't bundled.

• demon removed a project: MW-1.26-release.Oct 22 2015, 4:47 PM
Nikerabbit merged a task: T116635: Translation memory doesn't work with Firefox.Nov 3 2015, 3:30 PM
Nikerabbit added a subscriber: Stryn.

From the duplicate report, it might be related to localstorage being full (NS_ERROR_DOM_QUOTA_REACHED) and confirms it also affects JavaScript.

Nikerabbit mentioned this in T112047: Special:ManageTranslatorSandbox fails to finish loading.Nov 3 2015, 3:56 PM
Nemo_bis added a project: MW-1.26-release.Nov 3 2015, 5:22 PM
In T111685#1745761, @demon wrote:

Not sure why this is tagged MW-1.26-release, it isn't bundled.

ResourceLoader definitely is. :)

Nemo_bis merged a task: T117648: Message documentation sometimes invisible in translation UI.Nov 7 2015, 9:19 PM
Nemo_bis added subscribers: matmarex, StudiesWorld.
In T117648#1780626, @matmarex wrote:

This seems to depend on the order in which CSS is loaded/applied.

.grid .column, .grid .columns {
    float: left;
    min-height: 1px;
    padding: 0 5px;
    position: relative;
}
.tux-message-editor .infocolumn-block {
    font-size: 12pt;
    background: #FCFCFC;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    -webkit-transition: width 0.5s;
    transition: width 0.5s;
}

If the first block loads first, and the second later (position: absolute wins), everything is fine. If the order is reversed, see the screenshot.

• demon moved this task from Backlog to To be fixed on the MW-1.26-release board.Nov 9 2015, 7:06 PM
• demon moved this task from To be fixed to Backlog on the MW-1.26-release board.Nov 25 2015, 5:49 PM
• demon moved this task from Backlog to To be fixed on the MW-1.26-release board.Nov 25 2015, 8:05 PM
saper subscribed.Nov 29 2015, 1:10 PM

Can you check if reverting T107399: Make top queue fully asynchronous makes this work fine? In this case it would be related to T115692: Flash of unstyled content (FOUC) on Login page and Preferences (and possibly other highly visible pages?), maybe.

matmarex added a comment.Nov 29 2015, 2:44 PM

If it will, then only by chance. The problem is missing dependency between the two modules with the stylesheets, or insufficiently specific CSS rules in the second one (if you can't or don't want to declare the dependency).

Nikerabbit added a comment.Nov 29 2015, 5:01 PM
In T117648#1780626, @matmarex wrote:

This seems to depend on the order in which CSS is loaded/applied.
If the first block loads first, and the second later (position: absolute wins), everything is fine. If the order is reversed, see the screenshot.

The first block is added with addModuleStyles. The second block is added with addModules. This sounds like ResourceLoader is not fulfilling the expectation of applying modules added with addModuleStyles first in all cases.

matmarex added a comment.Nov 29 2015, 9:04 PM

The first block ('jquery.uls.grid' in mediawiki/extensions/UniversalLanguageSelector) is added with addModuleStyles, but is *also* set as a dependency on like half a dozen of modules loaded with addModules or dynamically on the client-side. Due to T87871, that means it will be loaded twice. The second load probably happens after the second block ('ext.translate.editor').

Nikerabbit added a comment.Nov 30 2015, 6:35 AM

jquery.uls.grid is not an explicit dependency of any module in Translate: the grid is used for basic page layout. It is dependency of some modules in ULS, because it is used for the dialogs that are only shown after a click.

It is not very large module, so loading it always with addModuleStyles could be done. But we got complaints in the past for not lazy-loading stuff, so I am hesitant to do it. T87871 is currently set to have low priority, so it seems we are stuck here.

Nemo_bis added a subscriber: Performance Issue.Nov 30 2015, 8:51 AM
In T111685#1837591, @Nikerabbit wrote:

jquery.uls.grid is not an explicit dependency of any module in Translate: the grid is used for basic page layout. It is dependency of some modules in ULS, because it is used for the dialogs that are only shown after a click.

It is not very large module, so loading it always with addModuleStyles could be done. But we got complaints in the past for not lazy-loading stuff, so I am hesitant to do it.

CC Performance-Team

matmarex added a comment.Nov 30 2015, 12:47 PM

It's not clear to me what the problem is here. I already explained what is causing this bug and how to fix it. Do you want me to submit a patch?

Nikerabbit added a comment.Dec 1 2015, 8:07 AM

My worry is that if we implement your proposed fix (adding more specificity to the CSS rules), it will start chase game where we will keep finding more and more places where more specificity is needed (e.g. T112047) . Given that it is currently impossible to force the loading order of modules to test this systematically, that is slow and annoying process.

On the other hand, if ResourceLoader was changed, it would solve both double loading of styles and order of module loading for once and all.

Nemo_bis mentioned this in T123755: Similar translation offers broken.Jan 22 2016, 10:35 PM
Luke081515 merged a task: T123755: Similar translation offers broken.Feb 1 2016, 2:33 PM
Luke081515 added a project: Beta-Cluster-reproducible.
Luke081515 subscribed.
gerritbot subscribed.Feb 1 2016, 3:13 PM

Change 267676 had a related patch set uploaded (by Nikerabbit):
Temporary fix for broken infocolumn

https://gerrit.wikimedia.org/r/267676

gerritbot added a project: Patch-For-Review.Feb 1 2016, 3:13 PM
gerritbot added a comment.Feb 1 2016, 3:25 PM

Change 267676 merged by jenkins-bot:
Temporary fix for broken infocolumn

https://gerrit.wikimedia.org/r/267676

gerritbot added a comment.Feb 1 2016, 3:29 PM

Change 267680 had a related patch set uploaded (by Nikerabbit):
Temporary fix for broken infocolumn (part 2)

https://gerrit.wikimedia.org/r/267680

gerritbot added a comment.Feb 1 2016, 3:35 PM

Change 267680 merged by jenkins-bot:
Temporary fix for broken infocolumn (part 2)

https://gerrit.wikimedia.org/r/267680

Nemo_bis added a comment.Feb 1 2016, 3:44 PM

Thanks for some refreshing water on the fire. :)

Nikerabbit added a comment.Feb 1 2016, 3:45 PM

Storing thoughts from IRC:

The thing is that Translate adds addModuleStyles() on the special pages where it is needed, but ULS uses dependencies. Translate cannot do without addModuleStyles because that causes FOUC etc., so the options are

  1. wait a fix in RL
  2. sprinkle dependencies on Translate modules and double load the styles
  3. add specificity to CSS selectors

I did 3 hoping that 1 is not too far away. @matmarex thinks 2. would be more future proof.

ReleaseTaggerBot added a project: MW-1.27-release (WMF-deploy-2016-02-02_(1.27.0-wmf.12)).Feb 1 2016, 4:00 PM
gerritbot added a comment.Feb 2 2016, 9:54 AM

Change 267851 had a related patch set uploaded (by Nikerabbit):
Fix typo in previous commit

https://gerrit.wikimedia.org/r/267851

gerritbot added a comment.Feb 2 2016, 10:05 AM

Change 267851 merged by jenkins-bot:
Fix typo in previous commit

https://gerrit.wikimedia.org/r/267851

matmarex added a comment.Feb 2 2016, 7:10 PM

Should be fixed now?

Nikerabbit added a comment.Feb 3 2016, 7:16 AM

I am considering keeping this open because I am not not too happy with the current solution and would like to switch to better one when possible.

Krinkle removed projects: MW-1.27-release (WMF-deploy-2016-02-02_(1.27.0-wmf.12)), Patch-For-Review, MW-1.26-release.Feb 18 2016, 1:32 PM
Krinkle moved this task from Inbox to Backlog on the MediaWiki-ResourceLoader board.
Nikerabbit lowered the priority of this task from High to Low.Apr 20 2016, 1:33 PM
Nikerabbit edited projects, added Technical-Debt; removed Beta-Cluster-reproducible.
Danny_B added a project: Performance Issue.Jul 3 2016, 10:59 PM
Danny_B removed a subscriber: Performance Issue.
• demon unsubscribed.Mar 9 2017, 9:38 PM
Krinkle removed projects: Performance Issue, MediaWiki-ResourceLoader.Sep 20 2017, 7:05 PM
Nikerabbit closed this task as Resolved.Apr 6 2018, 2:18 PM
Nikerabbit claimed this task.

To my knowledge this has now been fixed in core.

Liuxinyu970226 unsubscribed.Apr 9 2018, 10:09 AM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL