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
wikimedia · Feb 2, 2015 · c762da4 · c762da4
1 parent 51d361c
commit c762da4
Show file tree

Hide file tree

Showing 16 changed files with 68 additions and 36 deletions.
diff --git 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" ]
 	]
-}
+}
diff --git a/src/Widget.js b/src/Widget.js
@@ -104,7 +104,7 @@ OO.ui.Widget.prototype.toggle = function ( show ) {
 
 	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
@@ -465,9 +465,12 @@ OO.ui.Window.prototype.toggle = function ( show ) {
 		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 @@ OO.ui.Window.prototype.setup = function ( data ) {
 	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 @@ OO.ui.Window.prototype.teardown = function ( data ) {
 		// 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
@@ -206,14 +206,14 @@ OO.ui.ProcessDialog.prototype.showErrors = function ( errors ) {
 	}
 	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
@@ -132,7 +132,7 @@ OO.ui.DraggableGroupElement.prototype.onDragLeave = function () {
 	// This means the item was dragged outside the widget
 	this.$placeholder
 		.css( 'left', 0 )
-		.hide();
+		.addClass( 'oo-ui-element-hidden' );
 };
 
 /**
@@ -196,20 +196,20 @@ OO.ui.DraggableGroupElement.prototype.onDragOver = function ( e ) {
 		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.setDragItem = function ( item ) {
 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
@@ -84,6 +84,9 @@ OO.ui.StackLayout.prototype.unsetCurrentItem = function () {
  * @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 @@ OO.ui.StackLayout.prototype.clearItems = function () {
  * @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 @@ OO.ui.StackLayout.prototype.setItem = function ( item ) {
 
 	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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -39,9 +39,8 @@ OO.ui.MenuSelectWidget = function OoUiMenuSelectWidget( config ) {
 
 	// 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
@@ -60,14 +60,13 @@ OO.ui.PopupWidget = function OoUiPopupWidget( config ) {
 		.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
@@ -48,7 +48,7 @@ OO.ui.TextInputWidget = function OoUiTextInputWidget( config ) {
 		this.$clone = this.$input
 			.clone()
 			.insertAfter( this.$input )
-			.hide();
+			.addClass( 'oo-ui-element-hidden' );
 	}
 
 	this.setValidation( config.validate );