Gilles has uploaded a new change for review. https://gerrit.wikimedia.org/r/115196
Change subject: Wait for CSS to be truly loaded before opening the viewer ...................................................................... Wait for CSS to be truly loaded before opening the viewer This is a workaround for core bug #61852 Change-Id: If7d830866993eddbf5784694514ff89aece56c5b Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/258 --- M MultimediaViewer.php M resources/mmv/mmv.bootstrap.js A resources/mmv/mmv.loaded.css M tests/qunit/mmv.bootstrap.test.js 4 files changed, 59 insertions(+), 4 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MultimediaViewer refs/changes/96/115196/1 diff --git a/MultimediaViewer.php b/MultimediaViewer.php index 29abb0e..b4ea1c2 100644 --- a/MultimediaViewer.php +++ b/MultimediaViewer.php @@ -398,6 +398,8 @@ 'styles' => array( 'mmv.less', + // Always make this one the last of the list (Bug 61852) + 'mmv.loaded.css', ), 'dependencies' => array( diff --git a/resources/mmv/mmv.bootstrap.js b/resources/mmv/mmv.bootstrap.js index cad5a87..0d446bf 100755 --- a/resources/mmv/mmv.bootstrap.js +++ b/resources/mmv/mmv.bootstrap.js @@ -41,6 +41,10 @@ this.processThumbs(); this.hash(); + // Exposed for tests + this.readinessCSSClass = 'mw-mmv-has-been-loaded'; + this.readinessWaitDuration = 100; + $( window ).on( 'popstate.mmvb', function () { self.hash(); } ); @@ -56,7 +60,9 @@ var deferred = $.Deferred(), bs = this; - mw.loader.using( 'mmv', function () { + mw.loader.using( 'mmv', function() { bs.isCSSReady( deferred ); } ); + + return $.when( deferred ).then( function () { if ( !bs.viewerInitialized ) { if ( bs.thumbs.length ) { mw.mediaViewer.initWithThumbs( bs.thumbs ); @@ -64,11 +70,27 @@ bs.viewerInitialized = true; } - - deferred.resolve(); } ); + }; - return deferred.promise(); + /** + * Checks if the mmv CSS has been correctly added to the page + * This is a workaround for core bug 61852 + * @param {jQuery.promise} deferred + */ + MMVB.isCSSReady = function ( deferred ) { + var $dummy = $( '<div class="' + this.readinessCSSClass + '">' ) + .appendTo( $( document.body ) ), + bs = this; + + if ( $dummy.css( 'display' ) === 'inline' ) { + // Let's be clean and remove the test item before resolving the deferred + $dummy.remove(); + deferred.resolve(); + } else { + $dummy.remove(); + setTimeout( function () { bs.isCSSReady( deferred ); }, this.readinessWaitDuration ); + } }; /** diff --git a/resources/mmv/mmv.loaded.css b/resources/mmv/mmv.loaded.css new file mode 100644 index 0000000..77c1e09 --- /dev/null +++ b/resources/mmv/mmv.loaded.css @@ -0,0 +1,3 @@ +.mw-mmv-has-been-loaded { + display: inline; +} \ No newline at end of file diff --git a/tests/qunit/mmv.bootstrap.test.js b/tests/qunit/mmv.bootstrap.test.js index a2511f7..d795152 100644 --- a/tests/qunit/mmv.bootstrap.test.js +++ b/tests/qunit/mmv.bootstrap.test.js @@ -196,4 +196,32 @@ window.location.hash = ''; } ); + + QUnit.test( 'isCSSReady', 3, function ( assert ) { + var bootstrap = new mw.mmv.MultimediaViewerBootstrap(), + deferred = $.Deferred(), + CSSclass = 'foo-' + $.now(), + $style = $( '<style type="text/css" />' ) + .text( '.' + CSSclass + ' { display: inline; }' ); + + bootstrap.readinessCSSClass = CSSclass; + // This speeds up the test execution + // It's not zero because if the test fails, the browser would get hammered indefinitely + bootstrap.readinessWaitDuration = 30; + + bootstrap.isCSSReady( deferred ); + + assert.strictEqual( deferred.state(), 'pending', 'The style isn\'t on the page yet' ); + + QUnit.stop(); + + deferred.then( function() { + QUnit.start(); + assert.ok( true, 'The style is on the page' ); + assert.strictEqual( $( '.' + CSSclass ).length, 0, 'There are no leftover test elements' ); + $style.remove(); + } ); + + $style.appendTo( 'head' ); + } ); }( mediaWiki, jQuery ) ); -- To view, visit https://gerrit.wikimedia.org/r/115196 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: If7d830866993eddbf5784694514ff89aece56c5b Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/MultimediaViewer Gerrit-Branch: master Gerrit-Owner: Gilles <[email protected]> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
