jenkins-bot has submitted this change and it was merged. 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(-) Approvals: Gergő Tisza: Looks good to me, approved jenkins-bot: Verified diff --git a/MultimediaViewer.php b/MultimediaViewer.php index b47866e..7ea99c8 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 187bac6..63ea297 100755 --- a/resources/mmv/mmv.bootstrap.js +++ b/resources/mmv/mmv.bootstrap.js @@ -40,6 +40,10 @@ this.$thumbs = $( '.gallery .image img, a.image img' ); this.processThumbs(); + // Exposed for tests + this.readinessCSSClass = 'mw-mmv-has-been-loaded'; + this.readinessWaitDuration = 100; + $( window ).hashchange( function () { self.hash(); } ).hashchange(); @@ -59,7 +63,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 ); @@ -67,11 +73,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 7238618..23a9bfc 100644 --- a/tests/qunit/mmv.bootstrap.test.js +++ b/tests/qunit/mmv.bootstrap.test.js @@ -220,4 +220,32 @@ assert.strictEqual( window.location.hash, hash, 'Window\'s hash has been updated correctly' ); } ); + + 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: merged Gerrit-Change-Id: If7d830866993eddbf5784694514ff89aece56c5b Gerrit-PatchSet: 3 Gerrit-Project: mediawiki/extensions/MultimediaViewer Gerrit-Branch: master Gerrit-Owner: Gilles <gdu...@wikimedia.org> Gerrit-Reviewer: Aarcos <aarcos.w...@gmail.com> Gerrit-Reviewer: Gergő Tisza <gti...@wikimedia.org> Gerrit-Reviewer: Gilles <gdu...@wikimedia.org> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
