jenkins-bot has submitted this change and it was merged.
Change subject: Use css class instead of jQuery .show()/hide()/toggle()
......................................................................
Use css class instead of jQuery .show()/hide()/toggle()
To decrease computation time, avoid using jQuery's .show() and
.toggle() by using our own hide css class.
Bug: T87420
Change-Id: Ibf7c99aa4aad1ccca67ae385612d0e45edcd3157
---
M build/typos.json
M src/Widget.js
M src/Window.js
M src/dialogs/ProcessDialog.js
M src/elements/DraggableGroupElement.js
M src/layouts/StackLayout.js
A src/styles/Element.less
M src/styles/core.less
M src/styles/layouts/StackLayout.less
M src/styles/theme.less
M src/themes/apex/elements.less
M src/themes/blank/elements.less
M src/themes/mediawiki/elements.less
M src/widgets/MenuSelectWidget.js
M src/widgets/PopupWidget.js
M src/widgets/TextInputWidget.js
16 files changed, 68 insertions(+), 36 deletions(-)
Approvals:
Trevor Parscal: Looks good to me, approved
jenkins-bot: Verified
diff --git a/build/typos.json b/build/typos.json
index faa0960..4554e3b 100644
--- a/build/typos.json
+++ b/build/typos.json
@@ -8,9 +8,9 @@
[ "visiblit(ies|y)", "visibilit$1" ],
[ "movablilties", "movabilities" ],
[ "inpsect(ors?|ion)", "inspect$1" ],
- [ "teh", "the" ],
+ [ "\bteh\b", "the" ],
[ "intialization", "initialization" ],
[ "durring", "during" ],
[ "occured", "occurred" ]
]
-}
\ No newline at end of file
+}
diff --git a/src/Widget.js b/src/Widget.js
index 78ef892..513a3ea 100644
--- a/src/Widget.js
+++ b/src/Widget.js
@@ -104,7 +104,7 @@
if ( show !== this.isVisible() ) {
this.visible = show;
- this.$element.toggle( show );
+ this.$element.toggleClass( 'oo-ui-element-hidden',
!this.visible );
this.emit( 'toggle', show );
}
diff --git a/src/Window.js b/src/Window.js
index 3119df1..a7871af 100644
--- a/src/Window.js
+++ b/src/Window.js
@@ -465,9 +465,12 @@
if ( this.isolated && !this.isLoaded() ) {
// Hide the window using visibility instead of display
until loading is complete
// Can't use display: none; because that prevents the
iframe from loading in Firefox
- this.$element.css( 'visibility', show ? 'visible' :
'hidden' );
+ this.$element
+ .css( 'visibility', show ? 'visible' : 'hidden'
);
} else {
- this.$element.toggle( show ).css( 'visibility', '' );
+ this.$element
+ .toggleClass( 'oo-ui-element-hidden',
!this.visible )
+ .css( 'visibility', '' );
}
this.emit( 'toggle', show );
}
@@ -646,8 +649,7 @@
var win = this,
deferred = $.Deferred();
- this.$element.show();
- this.visible = true;
+ this.toggle( true );
this.getSetupProcess( data ).execute().done( function () {
// Force redraw by asking the browser to measure the elements'
widths
win.$element.addClass( 'oo-ui-window-setup' ).width();
@@ -730,7 +732,7 @@
// Force redraw by asking the browser to measure the elements'
widths
win.$element.removeClass( 'oo-ui-window-load
oo-ui-window-setup' ).width();
win.$content.removeClass( 'oo-ui-window-content-setup'
).width();
- win.$element.hide();
+ win.$element.addClass( 'oo-ui-element-hidden' );
win.visible = false;
deferred.resolve();
} );
diff --git a/src/dialogs/ProcessDialog.js b/src/dialogs/ProcessDialog.js
index 2cdaee4..98658cc 100644
--- a/src/dialogs/ProcessDialog.js
+++ b/src/dialogs/ProcessDialog.js
@@ -206,14 +206,14 @@
}
this.retryButton.toggle( recoverable );
this.$errorsTitle.after( this.$errorItems );
- this.$errors.show().scrollTop( 0 );
+ this.$errors.removeClass( 'oo-ui-widget-hidden' ).scrollTop( 0 );
};
/**
* Hide errors.
*/
OO.ui.ProcessDialog.prototype.hideErrors = function () {
- this.$errors.hide();
+ this.$errors.addClass( 'oo-ui-widget-hidden' );
this.$errorItems.remove();
this.$errorItems = null;
};
diff --git a/src/elements/DraggableGroupElement.js
b/src/elements/DraggableGroupElement.js
index a4c0a57..b09e4bc 100644
--- a/src/elements/DraggableGroupElement.js
+++ b/src/elements/DraggableGroupElement.js
@@ -132,7 +132,7 @@
// This means the item was dragged outside the widget
this.$placeholder
.css( 'left', 0 )
- .hide();
+ .addClass( 'oo-ui-element-hidden' );
};
/**
@@ -196,20 +196,20 @@
if ( this.sideInsertion ) {
this.$placeholder
.css( cssOutput )
- .show();
+ .removeClass( 'oo-ui-element-hidden' );
} else {
this.$placeholder
.css( {
left: 0,
top: 0
} )
- .hide();
+ .addClass( 'oo-ui-element-hidden' );
}
} else {
// This means the item was dragged outside the widget
this.$placeholder
.css( 'left', 0 )
- .hide();
+ .addClass( 'oo-ui-element-hidden' );
}
// Prevent default
e.preventDefault();
@@ -229,7 +229,7 @@
OO.ui.DraggableGroupElement.prototype.unsetDragItem = function () {
this.dragItem = null;
this.itemDragOver = null;
- this.$placeholder.hide();
+ this.$placeholder.addClass( 'oo-ui-element-hidden' );
this.sideInsertion = '';
};
diff --git a/src/layouts/StackLayout.js b/src/layouts/StackLayout.js
index 02f613e..507993b 100644
--- a/src/layouts/StackLayout.js
+++ b/src/layouts/StackLayout.js
@@ -84,6 +84,9 @@
* @chainable
*/
OO.ui.StackLayout.prototype.addItems = function ( items, index ) {
+ // Update the visibility
+ this.updateHiddenState( items, this.currentItem );
+
// Mixin method
OO.ui.GroupElement.prototype.addItems.call( this, items, index );
@@ -146,18 +149,10 @@
* @fires set
*/
OO.ui.StackLayout.prototype.setItem = function ( item ) {
- var i, len;
-
if ( item !== this.currentItem ) {
- if ( !this.continuous ) {
- for ( i = 0, len = this.items.length; i < len; i++ ) {
- this.items[ i ].$element.css( 'display', '' );
- }
- }
+ this.updateHiddenState( this.items, item );
+
if ( $.inArray( item, this.items ) !== -1 ) {
- if ( !this.continuous ) {
- item.$element.css( 'display', 'block' );
- }
this.currentItem = item;
this.emit( 'set', item );
} else {
@@ -167,3 +162,27 @@
return this;
};
+
+/**
+ * Update the visibility of all items in case of non-continuous view.
+ *
+ * Ensure all items are hidden except for the selected one.
+ * This method does nothing when the stack is continuous.
+ *
+ * @param {OO.ui.Layout[]} items Item list iterate over
+ * @param {OO.ui.Layout} [selectedItem] Selected item to show
+ */
+OO.ui.StackLayout.prototype.updateHiddenState = function ( items, selectedItem
) {
+ var i, len;
+
+ if ( !this.continuous ) {
+ for ( i = 0, len = items.length; i < len; i++ ) {
+ if ( !selectedItem || selectedItem !== items[ i ] ) {
+ items[ i ].$element.addClass(
'oo-ui-element-hidden' );
+ }
+ }
+ if ( selectedItem ) {
+ selectedItem.$element.removeClass(
'oo-ui-element-hidden' );
+ }
+ }
+};
diff --git a/src/styles/Element.less b/src/styles/Element.less
new file mode 100644
index 0000000..f8f3389
--- /dev/null
+++ b/src/styles/Element.less
@@ -0,0 +1,9 @@
+@import 'common';
+
+.oo-ui-element {
+ &-hidden {
+ display: none !important;
+ }
+
+ .theme-oo-ui-element();
+}
diff --git a/src/styles/core.less b/src/styles/core.less
index cdc0a08..d2a4d07 100644
--- a/src/styles/core.less
+++ b/src/styles/core.less
@@ -16,6 +16,7 @@
direction: ltr;
}
+@import 'Element.less';
@import 'elements/ButtonElement.less';
@import 'elements/ClippableElement.less';
@import 'elements/FlaggedElement.less';
diff --git a/src/styles/layouts/StackLayout.less
b/src/styles/layouts/StackLayout.less
index 103556b..6dd4fa7 100644
--- a/src/styles/layouts/StackLayout.less
+++ b/src/styles/layouts/StackLayout.less
@@ -1,10 +1,6 @@
@import '../common';
.oo-ui-stackLayout {
- > .oo-ui-panelLayout {
- display: none;
- }
-
&-continuous > .oo-ui-panelLayout {
display: block;
position: relative;
diff --git a/src/styles/theme.less b/src/styles/theme.less
index 7d696b8..f6bf590 100644
--- a/src/styles/theme.less
+++ b/src/styles/theme.less
@@ -6,6 +6,7 @@
//
.theme-oo-ui-layout () {}
+.theme-oo-ui-element () {}
.theme-oo-ui-widget () {}
.theme-oo-ui-window () {}
.theme-oo-ui-dialog () {}
diff --git a/src/themes/apex/elements.less b/src/themes/apex/elements.less
index dd38afd..5ca5b3e 100644
--- a/src/themes/apex/elements.less
+++ b/src/themes/apex/elements.less
@@ -1,5 +1,7 @@
@import 'common';
+.theme-oo-ui-element () {}
+
.theme-oo-ui-buttonElement () {
> .oo-ui-buttonElement-button {
color: #333;
diff --git a/src/themes/blank/elements.less b/src/themes/blank/elements.less
index 923176c..89b9664 100644
--- a/src/themes/blank/elements.less
+++ b/src/themes/blank/elements.less
@@ -1,5 +1,7 @@
@import 'common';
+.theme-oo-ui-element () {}
+
.theme-oo-ui-buttonElement () {}
.theme-oo-ui-clippableElement () {}
diff --git a/src/themes/mediawiki/elements.less
b/src/themes/mediawiki/elements.less
index 80579e4..fe89c87 100644
--- a/src/themes/mediawiki/elements.less
+++ b/src/themes/mediawiki/elements.less
@@ -1,5 +1,7 @@
@import 'common';
+.theme-oo-ui-element () {}
+
.theme-oo-ui-buttonElement () {
> .oo-ui-buttonElement-button {
font-weight: bold;
diff --git a/src/widgets/MenuSelectWidget.js b/src/widgets/MenuSelectWidget.js
index cfd1c92..3e1fa84 100644
--- a/src/widgets/MenuSelectWidget.js
+++ b/src/widgets/MenuSelectWidget.js
@@ -39,9 +39,8 @@
// Initialization
this.$element
- .hide()
- .attr( 'role', 'menu' )
- .addClass( 'oo-ui-menuSelectWidget' );
+ .addClass( 'oo-ui-menuSelectWidget oo-ui-element-hidden' )
+ .attr( 'role', 'menu' );
};
/* Setup */
diff --git a/src/widgets/PopupWidget.js b/src/widgets/PopupWidget.js
index c9bd2a1..e8bf928 100644
--- a/src/widgets/PopupWidget.js
+++ b/src/widgets/PopupWidget.js
@@ -60,14 +60,13 @@
.addClass( 'oo-ui-popupWidget-head' )
.append( this.$label, this.closeButton.$element );
if ( !config.head ) {
- this.$head.hide();
+ this.$head.addClass( 'oo-ui-element-hidden' );
}
this.$popup
.addClass( 'oo-ui-popupWidget-popup' )
.append( this.$head, this.$body );
this.$element
- .hide()
- .addClass( 'oo-ui-popupWidget' )
+ .addClass( 'oo-ui-popupWidget oo-ui-element-hidden' )
.append( this.$popup, this.$anchor );
// Move content, which was added to #$element by OO.ui.Widget, to the
body
if ( config.$content instanceof jQuery ) {
diff --git a/src/widgets/TextInputWidget.js b/src/widgets/TextInputWidget.js
index 5d6ee94..5dc88ad 100644
--- a/src/widgets/TextInputWidget.js
+++ b/src/widgets/TextInputWidget.js
@@ -48,7 +48,7 @@
this.$clone = this.$input
.clone()
.insertAfter( this.$input )
- .hide();
+ .addClass( 'oo-ui-element-hidden' );
}
this.setValidation( config.validate );
--
To view, visit https://gerrit.wikimedia.org/r/187614
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ibf7c99aa4aad1ccca67ae385612d0e45edcd3157
Gerrit-PatchSet: 7
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <[email protected]>
Gerrit-Reviewer: Catrope <[email protected]>
Gerrit-Reviewer: Krinkle <[email protected]>
Gerrit-Reviewer: Mooeypoo <[email protected]>
Gerrit-Reviewer: Trevor Parscal <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
