r113644 MediaWiki - Code Review archive

				var title = "{$this->data['htmlTitle']}";
				var scriptPath = "{$this->data['wgScriptPath']}";
-				var showText = "{$buttonShowText}";
-				var hideText = "{$buttonHideText}";
+				var locale = {
+					"expand-section": "{$buttonShowText}",
+					"collapse-section": "{$buttonHideText}"
+				};
 			</script>

These generic (global!) variables are becoming an issue. More then just a maintainability problem but a practical one as well. The browser has many default variables in the global 'window' object by default. One of the things many browsers put as alias into the window object are unique DOM element IDs.

So if any wiki or skin content would have <span id="locale"> .. </span> or <span id="title"> .. </span>, then this code is broken (some browsers allow overriding of those properties, some don't).

Code like this is asking to get broken.

My advice would be to either drop all front-end development temporarily and port to ResourceLoader asap, or spend more time on this.

Mobile RL looks problematic for compatibility (many mobile browsers support JS, but choke on its amount in jQuery) and traffic reasons. Any ideas?

See also bugzilla:31675. Afaik the decision was already made to port MobileFrontend to ResourceLoader, and move the bar of "get javascript" to "browser supports modern javascript" (instead of "browser supports basic javascript").

What are people's thoughts on this -> r113644.diff http://jonrobson.me.uk/tmp/r113644.diff - as a possible solution using data attributes [1]

Note some mobiles do not support JSON which would be the other way to pass data from the php code to the javascript.

[1] http://www.w3.org/TR/html5/elements.html#embedding-custom-non-visible-data-with-the-data-attributes

There's no need for work-around via DOM attributes. JavaScript objects work just fine and much easier and faster to manipulate.

JSON parsing from a string is indeed a modern API that isn't reliably available in a cross-browser environment. However it doesn't make sense to pass a JSON string to a browser. Browsers have javascript engines and JSON (JavaScript Object Notation) as a literal rather than a string is (naturally) supported in all javascript engines (even old ones (IE6..) and/or handicapped mobile javascript engines, its in the fundamentals of the language, it's even used in the return value visible in the diff above).

Outputting 'var mwMobileFrontendData = ' . FormatJSON::encode( $frontendData ) . ';' will be fine. Where $frontendData would be something like:

$frotendData = array(
    'messages' => array(
        'expand-section' => ..,
    ),
    'config' => array(
        'pageTitle' => ..
        , 'scriptPath' => ..,
    ),
);

Then from a javascript file you'd have something like:

( function ( mfData ) {

    var mf = {
        msg: function (key) {
            return mfData.messages[key];
        }
    };
    window.mwMobileFrontend = mf;

}( mwMobileFrontendData ) );

Just a short example :)

See follow up in r113695