From: James D. Forrester Date: Wed, 4 Feb 2015 16:52:31 +0000 (-0800) Subject: Update OOjs UI to v0.6.6 X-Git-Tag: 1.31.0-rc.0~12515 X-Git-Url: https://git.heureux-cyclage.org/?a=commitdiff_plain;h=c0b0c8a03ab91ff54b9f4123cf6d3eb3d81854d6;p=lhc%2Fweb%2Fwiklou.git Update OOjs UI to v0.6.6 Release notes: https://git.wikimedia.org/blob/oojs%2Fui.git/v0.6.6/History.md Change-Id: I8e0ea18c23df5fe0530cc841799830c4f0082eff --- diff --git a/composer.json b/composer.json index 4d51a4508b..bae3b554fb 100644 --- a/composer.json +++ b/composer.json @@ -18,7 +18,7 @@ "require": { "cssjanus/cssjanus": "1.1.1", "leafo/lessphp": "0.5.0", - "oojs/oojs-ui": "0.6.5", + "oojs/oojs-ui": "0.6.6", "php": ">=5.3.3", "psr/log": "1.0.0", "wikimedia/cdb": "1.0.1", diff --git a/resources/lib/oojs-ui/oojs-ui-mediawiki.css b/resources/lib/oojs-ui/oojs-ui-mediawiki.css index e4143ce19c..3c297ed289 100644 --- a/resources/lib/oojs-ui/oojs-ui-mediawiki.css +++ b/resources/lib/oojs-ui/oojs-ui-mediawiki.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.6.5 + * OOjs UI v0.6.6 * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2015 OOjs Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2015-02-02T03:29:03Z + * Date: 2015-02-04T16:52:04Z */ .oo-ui-progressBarWidget-slide-frames from { margin-left: -40%; @@ -62,6 +62,9 @@ .oo-ui-ltr { direction: ltr; } +.oo-ui-element-hidden { + display: none !important; +} .oo-ui-buttonElement > .oo-ui-buttonElement-button { cursor: pointer; display: inline-block; @@ -609,6 +612,26 @@ left: 0; top: 0; } +.oo-ui-menuLayout-top .oo-ui-menuLayout-content { + right: 0 !important; + bottom: 0 !important; + left: 0 !important; +} +.oo-ui-menuLayout-after .oo-ui-menuLayout-content { + bottom: 0 !important; + left: 0 !important; + top: 0 !important; +} +.oo-ui-menuLayout-bottom .oo-ui-menuLayout-content { + left: 0 !important; + top: 0 !important; + right: 0 !important; +} +.oo-ui-menuLayout-before .oo-ui-menuLayout-content { + top: 0 !important; + right: 0 !important; + bottom: 0 !important; +} .oo-ui-panelLayout { position: relative; } @@ -625,9 +648,6 @@ .oo-ui-panelLayout-padded { padding: 1.25em; } -.oo-ui-stackLayout > .oo-ui-panelLayout { - display: none; -} .oo-ui-stackLayout-continuous > .oo-ui-panelLayout { display: block; position: relative; @@ -1268,13 +1288,13 @@ } .oo-ui-progressBarWidget { max-width: 50em; - border: solid 1px #0274ff; + border: solid 1px #cccccc; border-radius: 0.1em; overflow: hidden; } .oo-ui-progressBarWidget-bar { height: 1em; - background: #0274ff; + background: #dddddd; -webkit-transition: width 200ms, margin-left 200ms; -moz-transition: width 200ms, margin-left 200ms; -ms-transition: width 200ms, margin-left 200ms; @@ -1292,7 +1312,7 @@ border-left-width: 1px; } .oo-ui-progressBarWidget.oo-ui-widget-disabled { - opacity: 0.2; + opacity: 0.6; } .oo-ui-actionWidget.oo-ui-pendingElement-pending { background-image: /* @embed */ url(themes/mediawiki/images/textures/pending.gif); diff --git a/resources/lib/oojs-ui/oojs-ui-mediawiki.js b/resources/lib/oojs-ui/oojs-ui-mediawiki.js index 3ef200b5b5..07f220df42 100644 --- a/resources/lib/oojs-ui/oojs-ui-mediawiki.js +++ b/resources/lib/oojs-ui/oojs-ui-mediawiki.js @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.6.5 + * OOjs UI v0.6.6 * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2015 OOjs Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2015-02-02T03:28:54Z + * Date: 2015-02-04T16:51:55Z */ /** * @class diff --git a/resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css b/resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css index e99bb037e4..0d0267da24 100644 --- a/resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css +++ b/resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.6.5 + * OOjs UI v0.6.6 * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2015 OOjs Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2015-02-02T03:29:03Z + * Date: 2015-02-04T16:52:04Z */ .oo-ui-progressBarWidget-slide-frames from { margin-left: -40%; @@ -62,6 +62,9 @@ .oo-ui-ltr { direction: ltr; } +.oo-ui-element-hidden { + display: none !important; +} .oo-ui-buttonElement > .oo-ui-buttonElement-button { cursor: pointer; display: inline-block; @@ -609,6 +612,26 @@ left: 0; top: 0; } +.oo-ui-menuLayout-top .oo-ui-menuLayout-content { + right: 0 !important; + bottom: 0 !important; + left: 0 !important; +} +.oo-ui-menuLayout-after .oo-ui-menuLayout-content { + bottom: 0 !important; + left: 0 !important; + top: 0 !important; +} +.oo-ui-menuLayout-bottom .oo-ui-menuLayout-content { + left: 0 !important; + top: 0 !important; + right: 0 !important; +} +.oo-ui-menuLayout-before .oo-ui-menuLayout-content { + top: 0 !important; + right: 0 !important; + bottom: 0 !important; +} .oo-ui-panelLayout { position: relative; } @@ -625,9 +648,6 @@ .oo-ui-panelLayout-padded { padding: 1.25em; } -.oo-ui-stackLayout > .oo-ui-panelLayout { - display: none; -} .oo-ui-stackLayout-continuous > .oo-ui-panelLayout { display: block; position: relative; @@ -1268,13 +1288,13 @@ } .oo-ui-progressBarWidget { max-width: 50em; - border: solid 1px #0274ff; + border: solid 1px #cccccc; border-radius: 0.1em; overflow: hidden; } .oo-ui-progressBarWidget-bar { height: 1em; - background: #0274ff; + background: #dddddd; -webkit-transition: width 200ms, margin-left 200ms; -moz-transition: width 200ms, margin-left 200ms; -ms-transition: width 200ms, margin-left 200ms; @@ -1292,7 +1312,7 @@ border-left-width: 1px; } .oo-ui-progressBarWidget.oo-ui-widget-disabled { - opacity: 0.2; + opacity: 0.6; } .oo-ui-actionWidget.oo-ui-pendingElement-pending { background-image: /* @embed */ url(themes/mediawiki/images/textures/pending.gif); diff --git a/resources/lib/oojs-ui/oojs-ui.js b/resources/lib/oojs-ui/oojs-ui.js index 1c4adba322..3cc067eeda 100644 --- a/resources/lib/oojs-ui/oojs-ui.js +++ b/resources/lib/oojs-ui/oojs-ui.js @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.6.5 + * OOjs UI v0.6.6 * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2015 OOjs Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2015-02-02T03:28:54Z + * Date: 2015-02-04T16:51:55Z */ ( function ( OO ) { @@ -1445,7 +1445,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 ); } @@ -1929,9 +1929,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 ); } @@ -2120,8 +2123,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(); @@ -2204,7 +2206,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(); } ); @@ -3742,6 +3744,9 @@ OO.ui.TabIndexedElement = function OoUiTabIndexedElement( config ) { this.$tabIndexed = null; this.tabIndex = null; + // Events + this.connect( this, { disable: 'onDisable' } ); + // Initialization this.setTabIndex( config.tabIndex || 0 ); this.setTabIndexedElement( config.$tabIndexed || this.$element ); @@ -3762,12 +3767,17 @@ OO.initClass( OO.ui.TabIndexedElement ); */ OO.ui.TabIndexedElement.prototype.setTabIndexedElement = function ( $tabIndexed ) { if ( this.$tabIndexed ) { - this.$tabIndexed.removeAttr( 'tabindex' ); + this.$tabIndexed.removeAttr( 'tabindex aria-disabled' ); } this.$tabIndexed = $tabIndexed; if ( this.tabIndex !== null ) { - this.$tabIndexed.attr( 'tabindex', this.tabIndex ); + this.$tabIndexed.attr( { + // Do not index over disabled elements + tabindex: this.isDisabled() ? -1 : this.tabIndex, + // ChromeVox and NVDA do not seem to inherit this from parent elements + 'aria-disabled': this.isDisabled().toString() + } ); } }; @@ -3783,9 +3793,14 @@ OO.ui.TabIndexedElement.prototype.setTabIndex = function ( tabIndex ) { if ( this.tabIndex !== tabIndex ) { if ( this.$tabIndexed ) { if ( tabIndex !== null ) { - this.$tabIndexed.attr( 'tabindex', tabIndex ); + this.$tabIndexed.attr( { + // Do not index over disabled elements + tabindex: this.isDisabled() ? -1 : tabIndex, + // ChromeVox and NVDA do not seem to inherit this from parent elements + 'aria-disabled': this.isDisabled().toString() + } ); } else { - this.$tabIndexed.removeAttr( 'tabindex' ); + this.$tabIndexed.removeAttr( 'tabindex aria-disabled' ); } } this.tabIndex = tabIndex; @@ -3794,6 +3809,22 @@ OO.ui.TabIndexedElement.prototype.setTabIndex = function ( tabIndex ) { return this; }; +/** + * Handle disable events. + * + * @param {boolean} disabled Element is disabled + */ +OO.ui.TabIndexedElement.prototype.onDisable = function ( disabled ) { + if ( this.$tabIndexed && this.tabIndex !== null ) { + this.$tabIndexed.attr( { + // Do not index over disabled elements + tabindex: disabled ? -1 : this.tabIndex, + // ChromeVox and NVDA do not seem to inherit this from parent elements + 'aria-disabled': disabled.toString() + } ); + } +}; + /** * Get tab index value. * @@ -4492,7 +4523,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' ); }; /** @@ -4556,20 +4587,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(); @@ -4589,7 +4620,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 = ''; }; @@ -7189,14 +7220,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; }; @@ -7714,11 +7745,9 @@ OO.ui.MenuLayout = function OoUiMenuLayout( config ) { */ this.$content = this.$( '
' ); - // Events - this.$element.on( 'DOMNodeInsertedIntoDocument', this.onElementAttach.bind( this ) ); - // Initialization this.toggleMenu( this.showMenu ); + this.updateSizes(); this.$menu .addClass( 'oo-ui-menuLayout-menu' ) .css( this.menuPosition.sizeProperty, this.menuSize ); @@ -7737,40 +7766,24 @@ OO.inheritClass( OO.ui.MenuLayout, OO.ui.Layout ); OO.ui.MenuLayout.static.menuPositions = { top: { sizeProperty: 'height', - positionProperty: 'top', className: 'oo-ui-menuLayout-top' }, after: { sizeProperty: 'width', - positionProperty: 'right', - rtlPositionProperty: 'left', className: 'oo-ui-menuLayout-after' }, bottom: { sizeProperty: 'height', - positionProperty: 'bottom', className: 'oo-ui-menuLayout-bottom' }, before: { sizeProperty: 'width', - positionProperty: 'left', - rtlPositionProperty: 'right', className: 'oo-ui-menuLayout-before' } }; /* Methods */ -/** - * Handle DOM attachment events - */ -OO.ui.MenuLayout.prototype.onElementAttach = function () { - // getPositionProperty won't know about directionality until the layout is attached - if ( this.showMenu ) { - this.$content.css( this.getPositionProperty(), this.menuSize ); - } -}; - /** * Toggle menu. * @@ -7812,18 +7825,32 @@ OO.ui.MenuLayout.prototype.setMenuSize = function ( size ) { /** * Update menu and content CSS based on current menu size and visibility + * + * This method is called internally when size or position is changed. */ OO.ui.MenuLayout.prototype.updateSizes = function () { if ( this.showMenu ) { this.$menu .css( this.menuPosition.sizeProperty, this.menuSize ) .css( 'overflow', '' ); - this.$content.css( this.getPositionProperty(), this.menuSize ); + // Set offsets on all sides. CSS resets all but one with + // 'important' rules so directionality flips are supported + this.$content.css( { + top: this.menuSize, + right: this.menuSize, + bottom: this.menuSize, + left: this.menuSize + } ); } else { this.$menu .css( this.menuPosition.sizeProperty, 0 ) .css( 'overflow', 'hidden' ); - this.$content.css( this.getPositionProperty(), 0 ); + this.$content.css( { + top: 0, + right: 0, + bottom: 0, + left: 0 + } ); } }; @@ -7844,15 +7871,13 @@ OO.ui.MenuLayout.prototype.getMenuSize = function () { * @chainable */ OO.ui.MenuLayout.prototype.setMenuPosition = function ( position ) { - var positionProperty, positions = this.constructor.static.menuPositions; + var positions = this.constructor.static.menuPositions; if ( !positions[ position ] ) { throw new Error( 'Cannot set position; unsupported position value: ' + position ); } - positionProperty = this.getPositionProperty(); this.$menu.css( this.menuPosition.sizeProperty, '' ); - this.$content.css( positionProperty, '' ); this.$element.removeClass( this.menuPosition.className ); this.menuPosition = positions[ position ]; @@ -7872,19 +7897,6 @@ OO.ui.MenuLayout.prototype.getMenuPosition = function () { return this.menuPosition; }; -/** - * Get the menu position property. - * - * @return {string} Menu position CSS property - */ -OO.ui.MenuLayout.prototype.getPositionProperty = function () { - if ( this.menuPosition.rtlPositionProperty && this.$element.css( 'direction' ) === 'rtl' ) { - return this.menuPosition.rtlPositionProperty; - } else { - return this.menuPosition.positionProperty; - } -}; - /** * Layout containing a series of pages. * @@ -8085,7 +8097,7 @@ OO.ui.BookletLayout.prototype.toggleOutline = function ( show ) { if ( this.outlined ) { show = show === undefined ? !this.outlineVisible : !!show; this.outlineVisible = show; - this.gridLayout.layout( show ? [ 1, 2 ] : [ 0, 1 ], [ 1 ] ); + this.toggleMenu( show ); } return this; @@ -8574,6 +8586,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 ); @@ -8636,18 +8651,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 { @@ -8658,6 +8665,30 @@ 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' ); + } + } +}; + /** * Horizontal bar layout of tools as icon buttons. * @@ -9815,8 +9846,11 @@ OO.ui.ButtonWidget.prototype.onClick = function () { * @inheritdoc */ OO.ui.ButtonWidget.prototype.onMouseDown = function ( e ) { - // Remove the tab-index while the button is down to prevent the button from stealing focus - this.$button.removeAttr( 'tabindex' ); + if ( !this.isDisabled() ) { + // Remove the tab-index while the button is down to prevent the button from stealing focus + this.$button.removeAttr( 'tabindex' ); + } + return OO.ui.ButtonElement.prototype.onMouseDown.call( this, e ); }; @@ -9824,8 +9858,11 @@ OO.ui.ButtonWidget.prototype.onMouseDown = function ( e ) { * @inheritdoc */ OO.ui.ButtonWidget.prototype.onMouseUp = function ( e ) { - // Restore the tab-index after the button is up to restore the button's accessibility - this.$button.attr( 'tabindex', this.tabIndex ); + if ( !this.isDisabled() ) { + // Restore the tab-index after the button is up to restore the button's accessibility + this.$button.attr( 'tabindex', this.tabIndex ); + } + return OO.ui.ButtonElement.prototype.onMouseUp.call( this, e ); }; @@ -11011,14 +11048,13 @@ OO.ui.TextInputWidget = function OoUiTextInputWidget( config ) { this.autosize = !!config.autosize; this.maxRows = config.maxRows; this.validate = null; - this.attached = false; // Clone for resizing if ( this.autosize ) { this.$clone = this.$input .clone() .insertAfter( this.$input ) - .hide(); + .addClass( 'oo-ui-element-hidden' ); } this.setValidation( config.validate ); @@ -11030,7 +11066,6 @@ OO.ui.TextInputWidget = function OoUiTextInputWidget( config ) { blur: this.setValidityFlag.bind( this ) } ); this.$element.on( 'DOMNodeInsertedIntoDocument', this.onElementAttach.bind( this ) ); - this.$element.on( 'DOMNodeRemovedFromDocument', this.onElementDetach.bind( this ) ); this.$icon.on( 'mousedown', this.onIconMouseDown.bind( this ) ); this.$indicator.on( 'mousedown', this.onIndicatorMouseDown.bind( this ) ); this.on( 'labelChange', this.updatePosition.bind( this ) ); @@ -11136,22 +11171,12 @@ OO.ui.TextInputWidget.prototype.onKeyPress = function ( e ) { * @param {jQuery.Event} e Element attach event */ OO.ui.TextInputWidget.prototype.onElementAttach = function () { - this.attached = true; - // If we reattached elsewhere, the valCache is now invalid + // Any previously calculated size is now probably invalid if we reattached elsewhere this.valCache = null; this.adjustSize(); this.positionLabel(); }; -/** - * Handle element detach events. - * - * @param {jQuery.Event} e Element detach event - */ -OO.ui.TextInputWidget.prototype.onElementDetach = function () { - this.attached = false; -}; - /** * @inheritdoc */ @@ -11207,7 +11232,7 @@ OO.ui.TextInputWidget.prototype.setReadOnly = function ( state ) { OO.ui.TextInputWidget.prototype.adjustSize = function () { var scrollHeight, innerHeight, outerHeight, maxInnerHeight, measurementError, idealHeight; - if ( this.multiline && this.autosize && this.attached && this.$input.val() !== this.valCache ) { + if ( this.multiline && this.autosize && this.$input.val() !== this.valCache ) { this.$clone .val( this.$input.val() ) .attr( 'rows', '' ) @@ -12103,14 +12128,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 ) { @@ -13116,9 +13140,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 */