Esanders has uploaded a new change for review.
https://gerrit.wikimedia.org/r/192072
Change subject: Show the toolbar as soon as the target has been activated
......................................................................
Show the toolbar as soon as the target has been activated
Still to load at this point are
* Additional modules (first load only)
* Parsoid HTML
To account for this we disable the toolFactory event listeners
to prevent flickering, and create a hidden blank dummy surface to
attach the toolbar to.
Bug: T76523
Change-Id: Iab24858f23f4db944dcaa6683a82b950ea9ee1b1
---
M modules/ve-mw/init/styles/ve.init.mw.ViewPageTarget.css
M modules/ve-mw/init/targets/ve.init.mw.ViewPageTarget.js
M modules/ve-mw/init/ve.init.mw.Target.js
3 files changed, 65 insertions(+), 24 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/72/192072/1
diff --git a/modules/ve-mw/init/styles/ve.init.mw.ViewPageTarget.css
b/modules/ve-mw/init/styles/ve.init.mw.ViewPageTarget.css
index 73d0f37..1b903f1 100644
--- a/modules/ve-mw/init/styles/ve.init.mw.ViewPageTarget.css
+++ b/modules/ve-mw/init/styles/ve.init.mw.ViewPageTarget.css
@@ -40,6 +40,18 @@
/* Toolbar */
+.ve-init-mw-viewPageTarget-toolbar > .oo-ui-toolbar-bar {
+ overflow: hidden;
+ -webkit-transition: height 200ms;
+ -moz-transition: height 200ms;
+ -o-transition: height 200ms;
+ transition: height 200ms;
+}
+
+.ve-init-mw-viewPageTarget-toolbar-open > .oo-ui-toolbar-bar {
+ overflow: visible;
+}
+
.ve-init-mw-viewPageTarget-toolbar-utilities,
.ve-init-mw-viewPageTarget-toolbar-actions {
display: inline-block;
diff --git a/modules/ve-mw/init/targets/ve.init.mw.ViewPageTarget.js
b/modules/ve-mw/init/targets/ve.init.mw.ViewPageTarget.js
index 02097f0..82ab1de 100644
--- a/modules/ve-mw/init/targets/ve.init.mw.ViewPageTarget.js
+++ b/modules/ve-mw/init/targets/ve.init.mw.ViewPageTarget.js
@@ -174,37 +174,50 @@
* @inheritdoc
*/
ve.init.mw.ViewPageTarget.prototype.setupToolbar = function ( surface ) {
- var target = this;
+ var initPromise, toolbar, height,
+ target = this,
+ wasSetup = !!this.toolbar;
+
ve.track( 'trace.setupToolbar.enter' );
// Parent method
ve.init.mw.Target.prototype.setupToolbar.call( this, surface );
- // Keep it hidden so that we can slide it down smoothly (avoids sudden
- // offset flash when original content is hidden, and replaced in-place
with a
- // similar-looking surface).
- // FIXME: This is not ideal, the parent class creates it and appends
- // to target (visibly), only for us to hide it again 0ms later.
- // Though we can't hide it by default because it needs visible
dimensions
- // to compute stuff during setup.
- this.getToolbar().$bar.hide();
-
- this.getToolbar().$element
- .addClass( 've-init-mw-viewPageTarget-toolbar' );
-
+ toolbar = this.getToolbar();
ve.track( 'trace.setupToolbar.exit' );
+ if ( !wasSetup ) {
+ // Keep it hidden so that we can slide it down smoothly (avoids
sudden
+ // offset flash when original content is hidden, and replaced
in-place with a
+ // similar-looking surface).
+ height = toolbar.$bar.height();
+ toolbar.$bar.css( 'height', 0 );
+ toolbar.$element.addClass( 've-init-mw-viewPageTarget-toolbar'
);
+ setTimeout( function () {
+ toolbar.$bar.css( 'height', height );
+ setTimeout( function () {
+ toolbar.$element.addClass(
've-init-mw-viewPageTarget-toolbar-open' );
+ toolbar.$bar.css( 'height', '' );
+ }, 200 );
+ } );
- this.getToolbar().$bar.slideDown( 'fast', function () {
- // Check the surface wasn't torn down while the toolbar was
animating
- if ( target.getSurface() ) {
- ve.track( 'trace.initializeToolbar.enter' );
- target.getToolbar().initialize();
- target.getSurface().getView().emit( 'position' );
- target.getSurface().getContext().updateDimensions();
- ve.track( 'trace.initializeToolbar.exit' );
+ initPromise = toolbar.$bar.slideDown( 'fast' ).promise();
+ } else {
+ initPromise = $.Deferred().resolve().promise();
+ }
+ initPromise.done(
+ function () {
+ var surface = target.getSurface();
+ // Check the surface wasn't torn down while the toolbar
was animating
+ if ( surface ) {
+ ve.track( 'trace.initializeToolbar.enter' );
+ target.getToolbar().initialize();
+ surface.getView().emit( 'position' );
+ surface.getContext().updateDimensions();
+ ve.track( 'trace.initializeToolbar.exit' );
+ }
}
- } );
+ );
};
/**
@@ -301,6 +314,19 @@
this.setupLocalNoticeMessages();
this.saveScrollPosition();
+
+ // Create dummy surface to show toolbar while loading
+ var surface = this.addSurface( [] );
+ surface.disable();
+ // setSurface creates dummy toolbar
+ this.setSurface( surface );
+ // Disconnect the tool factory listeners so the toolbar
+ // doesn't start showing new tools as they load, too
+ // much flickering
+ this.getToolbar().getToolFactory().off( 'register' );
+ // Disable all the tools
+ this.getToolbar().updateToolState();
+ this.attachToolbar();
this.load( [ 'site', 'user' ] );
}
@@ -1348,6 +1374,9 @@
.addClass( 've-hide' )
.fadeOut( 'fast' );
+ // Move all native content inside the target
+ this.$element.append( this.$element.siblings() );
+
// Push veaction=edit url in history (if not already. If we got here by
a veaction=edit
// permalink then it will be there already and the constructor called
#activate)
if ( !this.actFromPopState && history.pushState &&
this.currentUri.query.veaction !== 'edit' ) {
diff --git a/modules/ve-mw/init/ve.init.mw.Target.js
b/modules/ve-mw/init/ve.init.mw.Target.js
index 181964c..29e9fbf 100644
--- a/modules/ve-mw/init/ve.init.mw.Target.js
+++ b/modules/ve-mw/init/ve.init.mw.Target.js
@@ -1400,8 +1400,8 @@
dmDoc.buildNodeTree();
ve.track( 'trace.buildModelTree.exit' );
setTimeout( function () {
- // Move all native content inside the target
- target.$element.append( target.$element.siblings() );
+ // Clear dummy surfaces
+ target.clearSurfaces();
// Create ui.Surface (also creates ce.Surface and
dm.Surface and builds CE tree)
ve.track( 'trace.createSurface.enter' );
--
To view, visit https://gerrit.wikimedia.org/r/192072
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Iab24858f23f4db944dcaa6683a82b950ea9ee1b1
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Esanders <esand...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
