Last modified: 2013-06-24 15:57:15 UTC

Wikimedia Bugzilla is closed!

Wikimedia migrated from Bugzilla to Phabricator. Bug reports are handled in Wikimedia Phabricator.
This static website is read-only and for historical purposes. It is not possible to log in and except for displaying bug reports and their history, links might be broken. See T37059, the corresponding Phabricator task for complete and up-to-date bug report information.
Bug 35059 - Dialog has no style applied and therefore is transparent (jQuery.UI) for RTL languages and monobook
Dialog has no style applied and therefore is transparent (jQuery.UI) for RTL ...
Status: NEW
Product: MediaWiki
Classification: Unclassified
JavaScript (Other open bugs)
All All
: Normal normal with 1 vote (vote)
: ---
Assigned To: Nobody - You can work on this!
: i18n
Depends on:
Blocks: rtl
  Show dependency treegraph
Reported: 2012-03-08 10:52 UTC by Rainer Rillke @commons.wikimedia
Modified: 2013-06-24 15:57 UTC (History)
9 users (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---

Top left: Address bar; Center: The problem: Transparent dialog; Bottom-right: The executed js-code. (40.04 KB, image/png)
2012-03-08 10:52 UTC, Rainer Rillke @commons.wikimedia

Description Rainer Rillke @commons.wikimedia 2012-03-08 10:52:03 UTC
Created attachment 10199 [details]
Top left: Address bar; Center: The problem: Transparent dialog; Bottom-right: The executed js-code.

just did 

$('<div>').dialog({title:"Hello!", buttons: { "Hello": function(){} }})

on Commons with ?uselang=fa&useskin=monobook and got a horrible result.

Tested also on (needs loading jquery.ui explicitly before) with the same rendering.

Also tested with ?uselang=he&useskin=monobook showing the same problem.
Comment 1 Rainer Rillke @commons.wikimedia 2012-03-08 10:55:23 UTC
mw.loader.using('jquery.ui.dialog', function() { $('<div>').dialog({title:"Hello!", buttons: { "Hello": function(){} }}) })

now also tested on
Comment 2 Rainer Rillke @commons.wikimedia 2012-03-08 22:51:53 UTC
This means that the user *does not see* that there *is* a dialog. Did you have a look at the screenshot. The button with the "Hello!" has no style applied and the other Hello! should be in a tiltle bar. So there is -in fact- no dialog.
Comment 3 kipod 2012-03-20 20:45:19 UTC
More information:

This problem appear in non-vector styles.

-- log in to any wikipedia
-- go to "preferences"
-- under "editing" make sure you have both "Enable enhanced editing toolbar" and "Enable dialogs for inserting links, tables and more" enabled
-- under "appearance", change your style to monobook or modern
-- under "preferrences => user profile => internationalization", change your  language to an RTL language
-- open random article
-- press "edit" (well, the language equivalent - alt-e still works!)
-- open the "advanced" toolbar
-- press the "table" tool
note that the dialog box background is transparent. 

this practically means that all styles except "vector" are handicapped, and can't use dialog boxes (well, they can, but it's close to impossible).

will be grateful for any workaround, e.g. some magic that can be put in "Mediawiki:monobook.css", "Mediawiki:modern.css", etc., or better yet, in "common.css".

Comment 4 kipod 2012-03-20 21:31:55 UTC
(In reply to comment #3)
> More information:

as soon as you add "uselang=he", the jquery.ui.theme.css either does not get to the client, or else loses the ui-widget-content background style.

unfortunately it is not easy to say much more than that, because using "debug=true" causes this annoying bug to go away, so i can't say if we just do not load jquery.ui.theme.css at all, or do we load a different version of it that does not contain the part with ".ui-widget-content".

Comment 5 kipod 2012-03-20 21:43:28 UTC
(In reply to comment #4)

add to common.css the following lines:

.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; }
.ui-widget-content a { color: #222222/*{fcContent}*/; }
.ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/; background: #cccccc/*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/; color: #222222/*{fcHeader}*/; font-weight: bold; }
.ui-widget-header a { color: #222222/*{fcHeader}*/; }

this will solve the problem for non-vector users. this should not be the "fix", but it's a good idea to do on RTL wikis.

Comment 6 Eran Roz 2012-03-20 21:47:25 UTC
It seems to be related to jquery.ui.core. 
After a little debugging: the background color of dialogs is implemented as part of jquery.ui.core.
You may compare the following resources:**

And look for ui-widget-header class.

It is totaly unchecked, but MAYBE the resource:
is parsed by CSSJanus and "bgDefauLTRepeat" is replaced to "bgDefauRTLepeat", which causes some errors l8er?

Note You need to log in before you can comment on or make changes to this bug.