Bartosz Dziewoński has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/328380 )
Change subject: ve.ui.MWParameterPage: Restructure constructor to reduce
needless work
......................................................................
ve.ui.MWParameterPage: Restructure constructor to reduce needless work
We were constructing a lot of widgets, and never using them all
(they were forever hidden or not even appended to DOM). For large
transclusions this was causing a noticeable performance hit.
I don't think this quite resolves T134814, but it should improve the
situation.
* this.rawFallbackButton is now constructed and appended only when needed.
* this.removeButton is now constructed and appended only when needed.
* this.infoButton can now be a PopupButtonWidget or a disabled ButtonWidget.
Bug: T134814
Change-Id: I2ea00a88a1ea22b73b0c6d10334a94f45734ec3b
---
M modules/ve-mw/ui/pages/ve.ui.MWParameterPage.js
1 file changed, 80 insertions(+), 67 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/80/328380/1
diff --git a/modules/ve-mw/ui/pages/ve.ui.MWParameterPage.js
b/modules/ve-mw/ui/pages/ve.ui.MWParameterPage.js
index e832115..72cd892 100644
--- a/modules/ve-mw/ui/pages/ve.ui.MWParameterPage.js
+++ b/modules/ve-mw/ui/pages/ve.ui.MWParameterPage.js
@@ -42,73 +42,17 @@
this.$more = $( '<div>' );
this.$description = $( '<div>' );
- this.rawFallbackButton = new OO.ui.ButtonWidget( {
- framed: false,
- icon: 'wikiText',
- title: ve.msg( 'visualeditor-dialog-transclusion-raw-fallback' )
- } ).connect( this, { click: 'onRawFallbackButtonClick' } );
-
+ // Note: Calling createValueInput() sets some properties we rely on
later in this function
this.valueInput = this.createValueInput()
.setValue( this.parameter.getValue() )
.connect( this, { change: 'onValueInputChange' } );
-
- this.removeButton = new OO.ui.ButtonWidget( {
- framed: false,
- icon: 'remove',
- title: ve.msg( 'visualeditor-dialog-transclusion-remove-param'
),
- flags: [ 'destructive' ],
- classes: [ 've-ui-mwParameterPage-removeButton' ]
- } )
- .connect( this, { click: 'onRemoveButtonClick' } )
- .toggle( !this.parameter.isRequired() );
-
- this.infoButton = new OO.ui.PopupButtonWidget( {
- framed: false,
- icon: 'info',
- title: ve.msg( 'visualeditor-dialog-transclusion-param-info' ),
- classes: [ 've-ui-mwParameterPage-infoButton' ]
- } );
-
- this.addButton = new OO.ui.ButtonWidget( {
- framed: false,
- icon: 'parameter',
- label: ve.msg( 'visualeditor-dialog-transclusion-add-param' ),
- tabIndex: -1
- } )
- .connect( this, { click: 'onAddButtonFocus' } );
this.statusIndicator = new OO.ui.IndicatorWidget( {
classes: [ 've-ui-mwParameterPage-statusIndicator' ]
} );
- // Events
- this.$labelElement.on( 'click', this.onLabelClick.bind( this ) );
+ // Construct the description popup
- // Initialization
- this.$info
- .addClass( 've-ui-mwParameterPage-info' )
- .append( this.$labelElement, this.statusIndicator.$element );
- this.$actions
- .addClass( 've-ui-mwParameterPage-actions' )
- .append(
- this.rawFallbackButton.$element,
- this.infoButton.$element,
- this.removeButton.$element
- );
- this.$labelElement
- .addClass( 've-ui-mwParameterPage-label' )
- .text( this.spec.getParameterLabel( paramName ) );
- this.$field
- .addClass( 've-ui-mwParameterPage-field' )
- .append(
- this.valueInput.$element
- );
- this.$more
- .addClass( 've-ui-mwParameterPage-more' )
- .append( this.addButton.$element );
- this.$element
- .addClass( 've-ui-mwParameterPage' )
- .append( this.$info, this.$field, this.$actions, this.$more );
this.$description
.addClass( 've-ui-mwParameterPage-description' )
.append( $( '<p>' ).text( this.spec.getParameterDescription(
paramName ) || '' ) );
@@ -164,15 +108,85 @@
);
}
- if ( this.$description.text().trim() === '' ) {
- this.infoButton
- .setDisabled( true )
- .setTitle(
- ve.msg(
'visualeditor-dialog-transclusion-param-info-missing' )
- );
- } else {
- this.infoButton.getPopup().$body.append( this.$description );
+ // Construct the action buttons
+
+ if ( !this.rawValueInput ) {
+ this.rawFallbackButton = new OO.ui.ButtonWidget( {
+ framed: false,
+ icon: 'wikiText',
+ title: ve.msg(
'visualeditor-dialog-transclusion-raw-fallback' )
+ } )
+ .connect( this, { click: 'onRawFallbackButtonClick' } );
+
+ this.$actions.append( this.rawFallbackButton.$element );
}
+
+ if ( this.$description.text().trim() === '' ) {
+ this.infoButton = new OO.ui.ButtonWidget( {
+ disabled: true,
+ title: ve.msg(
'visualeditor-dialog-transclusion-param-info-missing' ),
+ framed: false,
+ icon: 'info',
+ classes: [ 've-ui-mwParameterPage-infoButton' ]
+ } );
+ } else {
+ this.infoButton = new OO.ui.PopupButtonWidget( {
+ popup: {
+ $content: this.$description
+ },
+ title: ve.msg(
'visualeditor-dialog-transclusion-param-info' ),
+ framed: false,
+ icon: 'info',
+ classes: [ 've-ui-mwParameterPage-infoButton' ]
+ } );
+ }
+
+ this.$actions.append( this.infoButton.$element );
+
+ if ( !this.parameter.isRequired() ) {
+ this.removeButton = new OO.ui.ButtonWidget( {
+ framed: false,
+ icon: 'remove',
+ title: ve.msg(
'visualeditor-dialog-transclusion-remove-param' ),
+ flags: [ 'destructive' ],
+ classes: [ 've-ui-mwParameterPage-removeButton' ]
+ } )
+ .connect( this, { click: 'onRemoveButtonClick' } );
+
+ this.$actions.append( this.removeButton.$element );
+ }
+
+ this.addButton = new OO.ui.ButtonWidget( {
+ framed: false,
+ icon: 'parameter',
+ label: ve.msg( 'visualeditor-dialog-transclusion-add-param' ),
+ tabIndex: -1
+ } )
+ .connect( this, { click: 'onAddButtonFocus' } );
+
+ // Events
+ this.$labelElement.on( 'click', this.onLabelClick.bind( this ) );
+
+ // Initialization
+ this.$info
+ .addClass( 've-ui-mwParameterPage-info' )
+ .append( this.$labelElement, this.statusIndicator.$element );
+ this.$actions
+ .addClass( 've-ui-mwParameterPage-actions' );
+ this.$labelElement
+ .addClass( 've-ui-mwParameterPage-label' )
+ .text( this.spec.getParameterLabel( paramName ) );
+ this.$field
+ .addClass( 've-ui-mwParameterPage-field' )
+ .append(
+ this.valueInput.$element
+ );
+ this.$more
+ .addClass( 've-ui-mwParameterPage-more' )
+ .append( this.addButton.$element );
+ this.$element
+ .addClass( 've-ui-mwParameterPage' )
+ .append( this.$info, this.$field, this.$actions, this.$more );
};
/* Inheritance */
@@ -265,7 +279,6 @@
} else if ( type !== 'line' ) {
this.rawValueInput = true;
valueInputConfig.multiline = true;
- this.rawFallbackButton.$element.toggle( false );
}
return new OO.ui.TextInputWidget( valueInputConfig );
--
To view, visit https://gerrit.wikimedia.org/r/328380
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I2ea00a88a1ea22b73b0c6d10334a94f45734ec3b
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
