Update OOjs UI to v0.21.2

Release notes:
 https://phabricator.wikimedia.org/diffusion/GOJU/browse/master/History.md;v0.21.2

Change-Id: Id7cae80a4f3d84ea5d50003f2409537b307c0c58

diff --git a/composer.json b/composer.json
index be8ce15..ed42b60 100644 (file)
--- a/composer.json
+++ b/composer.json
@@ -25,7 +25,7 @@
                "ext-xml": "*",
                "liuggio/statsd-php-client": "1.0.18",
                "mediawiki/at-ease": "1.1.0",
-               "oojs/oojs-ui": "0.21.1",
+               "oojs/oojs-ui": "0.21.2",
                "oyejorge/less.php": "1.7.0.14",
                "php": ">=5.5.9",
                "psr/log": "1.0.2",

diff --git a/resources/lib/oojs-ui/i18n/sr-ec.json b/resources/lib/oojs-ui/i18n/sr-ec.json
index 9d3b926..87b7c2b 100644 (file)
--- a/resources/lib/oojs-ui/i18n/sr-ec.json
+++ b/resources/lib/oojs-ui/i18n/sr-ec.json
@@ -4,11 +4,12 @@
                        "Milicevic01",
                        "Nikola Smolenski",
                        "Милан Јелисавчић",
-                       "Zoranzoki21"
+                       "Zoranzoki21",
+                       "Obsuser"
                ]
        },
-       "ooui-outline-control-move-down": "Премести ставку на доле",
-       "ooui-outline-control-move-up": "Премести ставку на горе",
+       "ooui-outline-control-move-down": "Премести ставку надоле",
+       "ooui-outline-control-move-up": "Премести ставку нагоре",
        "ooui-outline-control-remove": "Уклони ставку",
        "ooui-toolbar-more": "Више",
        "ooui-toolgroup-expand": "Више",

diff --git a/resources/lib/oojs-ui/oojs-ui-apex.js b/resources/lib/oojs-ui/oojs-ui-apex.js
index ef48f5b..bb0f603 100644 (file)
--- a/resources/lib/oojs-ui/oojs-ui-apex.js
+++ b/resources/lib/oojs-ui/oojs-ui-apex.js
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:49Z
+ * Date: 2017-04-26T01:05:10Z
  */
 ( function ( OO ) {
 

diff --git a/resources/lib/oojs-ui/oojs-ui-core-apex.css b/resources/lib/oojs-ui/oojs-ui-core-apex.css
index 29b0874..cecff46 100644 (file)
--- a/resources/lib/oojs-ui/oojs-ui-core-apex.css
+++ b/resources/lib/oojs-ui/oojs-ui-core-apex.css
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:54Z
+ * Date: 2017-04-26T01:05:15Z
  */
 .oo-ui-element-hidden {
   display: none !important;
@@ -1332,6 +1332,9 @@ body:not( :-moz-handler-blocked ) .oo-ui-fieldsetLayout {
   margin-right: 0;
 }
 .oo-ui-progressBarWidget {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
   max-width: 50em;
   background-color: #fff;
   border: 1px solid #ccc;

diff --git a/resources/lib/oojs-ui/oojs-ui-core-mediawiki.css b/resources/lib/oojs-ui/oojs-ui-core-mediawiki.css
index a994e00..393ff59 100644 (file)
--- a/resources/lib/oojs-ui/oojs-ui-core-mediawiki.css
+++ b/resources/lib/oojs-ui/oojs-ui-core-mediawiki.css
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:54Z
+ * Date: 2017-04-26T01:05:15Z
  */
 .oo-ui-element-hidden {
   display: none !important;
@@ -209,11 +209,13 @@
   opacity: 0.51;
 }
 .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
-  min-height: 2.5em;
   border-radius: 2px;
-  padding: 0.625em 0.9375em 0.546875em;
+  padding-left: 0.9375em;
+  padding-right: 0.9375em;
 }
 .oo-ui-buttonElement-framed.oo-ui-iconElement > .oo-ui-buttonElement-button {
+  padding-top: 2.34375em;
+  padding-bottom: 0;
   padding-left: 2.03125em;
 }
 .oo-ui-buttonElement-framed.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
@@ -228,7 +230,9 @@
   left: 0.46875em;
 }
 .oo-ui-buttonElement-framed.oo-ui-indicatorElement > .oo-ui-buttonElement-button {
+  padding-top: 2.34375em;
   padding-right: 2.03125em;
+  padding-bottom: 0;
 }
 .oo-ui-buttonElement-framed.oo-ui-indicatorElement > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator {
   right: 1.015625em;
@@ -237,6 +241,10 @@
 .oo-ui-buttonElement-framed.oo-ui-indicatorElement.oo-ui-iconElement > .oo-ui-buttonElement-button {
   padding-right: 2.5em;
 }
+.oo-ui-buttonElement-framed.oo-ui-labelElement > .oo-ui-buttonElement-button {
+  padding-top: 0.625em;
+  padding-bottom: 0.546875em;
+}
 .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
   background-color: #c8ccd1;
   color: #fff;
@@ -318,7 +326,7 @@
   outline: 0;
 }
 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
-  color: #d33;
+  color: #d73333;
 }
 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover {
   background-color: #fff;
@@ -1536,7 +1544,7 @@ body:not( :-moz-handler-blocked ) .oo-ui-fieldsetLayout {
 .oo-ui-textInputWidget.oo-ui-widget-disabled .oo-ui-indicatorElement-indicator {
   opacity: 0.51;
 }
-.oo-ui-textInputWidget.oo-ui-widget-disabled .oo-ui-labelElement-label {
+.oo-ui-textInputWidget.oo-ui-widget-disabled > .oo-ui-labelElement-label {
   color: #72777d;
   text-shadow: 0 1px 1px #fff;
 }
@@ -1546,6 +1554,8 @@ body:not( :-moz-handler-blocked ) .oo-ui-fieldsetLayout {
 }
 .oo-ui-textInputWidget.oo-ui-iconElement .oo-ui-iconElement-icon {
   left: 0.46875em;
+}
+.oo-ui-textInputWidget.oo-ui-iconElement textarea + .oo-ui-iconElement-icon {
   max-height: 2.5em;
 }
 .oo-ui-textInputWidget.oo-ui-indicatorElement input,
@@ -1836,6 +1846,9 @@ body:not( :-moz-handler-blocked ) .oo-ui-fieldsetLayout {
   margin-right: 0;
 }
 .oo-ui-progressBarWidget {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
   max-width: 50em;
   background-color: #fff;
   border: 1px solid #a2a9b1;

diff --git a/resources/lib/oojs-ui/oojs-ui-core.js b/resources/lib/oojs-ui/oojs-ui-core.js
index c00d9a7..cab24e4 100644 (file)
--- a/resources/lib/oojs-ui/oojs-ui-core.js
+++ b/resources/lib/oojs-ui/oojs-ui-core.js
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:49Z
+ * Date: 2017-04-26T01:05:10Z
  */
 ( function ( OO ) {
 
@@ -584,6 +584,7 @@ OO.ui.Element = function OoUiElement( config ) {
 
        // Properties
        this.$ = $;
+       this.elementId = null;
        this.visible = true;
        this.data = config.data;
        this.$element = config.$element ||
@@ -595,7 +596,7 @@ OO.ui.Element = function OoUiElement( config ) {
                this.$element.addClass( config.classes.join( ' ' ) );
        }
        if ( config.id ) {
-               this.$element.attr( 'id', config.id );
+               this.setElementId( config.id );
        }
        if ( config.text ) {
                this.$element.text( config.text );
@@ -1375,6 +1376,31 @@ OO.ui.Element.prototype.setData = function ( data ) {
        return this;
 };
 
+/**
+ * Set the element has an 'id' attribute.
+ *
+ * @param {string} id
+ * @chainable
+ */
+OO.ui.Element.prototype.setElementId = function ( id ) {
+       this.elementId = id;
+       this.$element.attr( 'id', id );
+       return this;
+};
+
+/**
+ * Ensure that the element has an 'id' attribute, setting it to an unique value if it's missing,
+ * and return its value.
+ *
+ * @return {string}
+ */
+OO.ui.Element.prototype.getElementId = function () {
+       if ( this.elementId === null ) {
+               this.setElementId( OO.ui.generateElementId() );
+       }
+       return this.elementId;
+};
+
 /**
  * Check if element supports one or more methods.
  *
@@ -5320,6 +5346,7 @@ OO.ui.mixin.PopupElement.prototype.getPopup = function () {
  * @cfg {jQuery} [$overlay] Render the popup into a separate layer. This configuration is useful in cases where
  *  the expanded popup is larger than its containing `<div>`. The specified overlay layer is usually on top of the
  *  containing `<div>` and has a larger area. By default, the popup uses relative positioning.
+ *  See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
  */
 OO.ui.PopupButtonWidget = function OoUiPopupButtonWidget( config ) {
        // Parent constructor
@@ -5764,6 +5791,7 @@ OO.ui.SelectWidget = function OoUiSelectWidget( config ) {
        this.$element
                .addClass( 'oo-ui-selectWidget oo-ui-selectWidget-depressed' )
                .attr( 'role', 'listbox' );
+       this.setFocusOwner( this.$element );
        if ( Array.isArray( config.items ) ) {
                this.addItems( config.items );
        }
@@ -5856,7 +5884,7 @@ OO.ui.SelectWidget.prototype.onFocus = function ( event ) {
        }
 
        if ( event.target !== this.$element[ 0 ] ) {
-               this.$element.focus();
+               this.$focusOwner.focus();
        }
 };
 
@@ -6270,6 +6298,11 @@ OO.ui.SelectWidget.prototype.highlightItem = function ( item ) {
                }
        }
        if ( changed ) {
+               if ( item ) {
+                       this.$focusOwner.attr( 'aria-activedescendant', item.getElementId() );
+               } else {
+                       this.$focusOwner.removeAttr( 'aria-activedescendant' );
+               }
                this.emit( 'highlight', item );
        }
 
@@ -6368,6 +6401,13 @@ OO.ui.SelectWidget.prototype.selectItem = function ( item ) {
                }
        }
        if ( changed ) {
+               if ( item && !item.constructor.static.highlightable ) {
+                       if ( item ) {
+                               this.$focusOwner.attr( 'aria-activedescendant', item.getElementId() );
+                       } else {
+                               this.$focusOwner.removeAttr( 'aria-activedescendant' );
+                       }
+               }
                this.emit( 'select', item );
        }
 
@@ -6544,6 +6584,18 @@ OO.ui.SelectWidget.prototype.clearItems = function () {
        return this;
 };
 
+/**
+ * Set the DOM element which has focus while the user is interacting with this SelectWidget.
+ *
+ * Currently this is just used to set `aria-activedescendant` on it.
+ *
+ * @protected
+ * @param {jQuery} $focusOwner
+ */
+OO.ui.SelectWidget.prototype.setFocusOwner = function ( $focusOwner ) {
+       this.$focusOwner = $focusOwner;
+};
+
 /**
  * DecoratedOptionWidgets are {@link OO.ui.OptionWidget options} that can be configured
  * with an {@link OO.ui.mixin.IconElement icon} and/or {@link OO.ui.mixin.IndicatorElement indicator}.
@@ -6618,9 +6670,7 @@ OO.ui.MenuOptionWidget = function OoUiMenuOptionWidget( config ) {
        OO.ui.MenuOptionWidget.parent.call( this, config );
 
        // Initialization
-       this.$element
-               .attr( 'role', 'menuitem' )
-               .addClass( 'oo-ui-menuOptionWidget' );
+       this.$element.addClass( 'oo-ui-menuOptionWidget' );
 };
 
 /* Setup */
@@ -6765,9 +6815,10 @@ OO.ui.MenuSelectWidget = function OoUiMenuSelectWidget( config ) {
        this.highlightOnFilter = !!config.highlightOnFilter;
 
        // Initialization
-       this.$element
-               .addClass( 'oo-ui-menuSelectWidget' )
-               .attr( 'role', 'menu' );
+       this.$element.addClass( 'oo-ui-menuSelectWidget' );
+       if ( config.widget ) {
+               this.setFocusOwner( config.widget.$tabIndexed );
+       }
 
        // Initially hidden - using #toggle may cause errors if subclasses override toggle with methods
        // that reference properties not initialized at that time of parent class construction
@@ -7023,6 +7074,7 @@ OO.ui.MenuSelectWidget.prototype.toggle = function ( visible ) {
                        this.toggleClipping( true );
 
                        if ( this.getSelectedItem() ) {
+                               this.$focusOwner.attr( 'aria-activedescendant', this.getSelectedItem().getElementId() );
                                this.getSelectedItem().scrollElementIntoView( { duration: 0 } );
                        }
 
@@ -7031,6 +7083,7 @@ OO.ui.MenuSelectWidget.prototype.toggle = function ( visible ) {
                                this.getElementDocument().addEventListener( 'mousedown', this.onDocumentMouseDownHandler, true );
                        }
                } else {
+                       this.$focusOwner.removeAttr( 'aria-activedescendant' );
                        this.unbindKeyDownListener();
                        this.unbindKeyPressListener();
                        this.getElementDocument().removeEventListener( 'mousedown', this.onDocumentMouseDownHandler, true );
@@ -7095,6 +7148,7 @@ OO.ui.MenuSelectWidget.prototype.toggle = function ( visible ) {
  * @cfg {jQuery} [$overlay] Render the menu into a separate layer. This configuration is useful in cases where
  *  the expanded menu is larger than its containing `<div>`. The specified overlay layer is usually on top of the
  *  containing `<div>` and has a larger area. By default, the menu uses relative positioning.
+ *  See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
  */
 OO.ui.DropdownWidget = function OoUiDropdownWidget( config ) {
        // Configuration initialization
@@ -7136,6 +7190,11 @@ OO.ui.DropdownWidget = function OoUiDropdownWidget( config ) {
        // Initialization
        this.$handle
                .addClass( 'oo-ui-dropdownWidget-handle' )
+               .attr( {
+                       role: 'combobox',
+                       'aria-owns': this.menu.getElementId(),
+                       'aria-autocomplete': 'list'
+               } )
                .append( this.$icon, this.$label, this.$indicator );
        this.$element
                .addClass( 'oo-ui-dropdownWidget' )
@@ -10291,6 +10350,7 @@ OO.ui.SearchInputWidget.prototype.setReadOnly = function ( state ) {
  * @cfg {jQuery} [$overlay] Render the menu into a separate layer. This configuration is useful in cases where
  *  the expanded menu is larger than its containing `<div>`. The specified overlay layer is usually on top of the
  *  containing `<div>` and has a larger area. By default, the menu uses relative positioning.
+ *  See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
  */
 OO.ui.ComboBoxInputWidget = function OoUiComboBoxInputWidget( config ) {
        // Configuration initialization
@@ -10343,6 +10403,7 @@ OO.ui.ComboBoxInputWidget = function OoUiComboBoxInputWidget( config ) {
        // Initialization
        this.$input.attr( {
                role: 'combobox',
+               'aria-owns': this.menu.getElementId(),
                'aria-autocomplete': 'list'
        } );
        // Do not override options set via config.menu.items
@@ -10521,6 +10582,7 @@ OO.ui.ComboBoxInputWidget.prototype.setOptions = function ( options ) {
  *  in the upper-right corner of the rendered field; clicking it will display the text in a popup.
  *  For important messages, you are advised to use `notices`, as they are always shown.
  * @cfg {jQuery} [$overlay] Passed to OO.ui.PopupButtonWidget for help popup, if `help` is given.
+ *  See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
  *
  * @throws {Error} An error is thrown if no widget is specified
  */
@@ -10885,6 +10947,7 @@ OO.inheritClass( OO.ui.ActionFieldLayout, OO.ui.FieldLayout );
  *  in the upper-right corner of the rendered field; clicking it will display the text in a popup.
  *  For important messages, you are advised to use `notices`, as they are always shown.
  * @cfg {jQuery} [$overlay] Passed to OO.ui.PopupButtonWidget for help popup, if `help` is given.
+ *  See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
  */
 OO.ui.FieldsetLayout = function OoUiFieldsetLayout( config ) {
        // Configuration initialization

diff --git a/resources/lib/oojs-ui/oojs-ui-mediawiki.js b/resources/lib/oojs-ui/oojs-ui-mediawiki.js
index 60c67b6..726248c 100644 (file)
--- 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.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:49Z
+ * Date: 2017-04-26T01:05:10Z
  */
 ( function ( OO ) {
 

diff --git a/resources/lib/oojs-ui/oojs-ui-toolbars-apex.css b/resources/lib/oojs-ui/oojs-ui-toolbars-apex.css
index 53c5bf3..0bc7c94 100644 (file)
--- a/resources/lib/oojs-ui/oojs-ui-toolbars-apex.css
+++ b/resources/lib/oojs-ui/oojs-ui-toolbars-apex.css
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:54Z
+ * Date: 2017-04-26T01:05:15Z
  */
 .oo-ui-popupTool .oo-ui-popupWidget-popup,
 .oo-ui-popupTool .oo-ui-popupWidget-anchor {

diff --git a/resources/lib/oojs-ui/oojs-ui-toolbars-mediawiki.css b/resources/lib/oojs-ui/oojs-ui-toolbars-mediawiki.css
index a82a8b2..f046fa5 100644 (file)
--- a/resources/lib/oojs-ui/oojs-ui-toolbars-mediawiki.css
+++ b/resources/lib/oojs-ui/oojs-ui-toolbars-mediawiki.css
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:54Z
+ * Date: 2017-04-26T01:05:15Z
  */
 .oo-ui-tool.oo-ui-widget-enabled {
   -webkit-transition: background-color 100ms;

diff --git a/resources/lib/oojs-ui/oojs-ui-toolbars.js b/resources/lib/oojs-ui/oojs-ui-toolbars.js
index 9ef478b..97c99ef 100644 (file)
--- a/resources/lib/oojs-ui/oojs-ui-toolbars.js
+++ b/resources/lib/oojs-ui/oojs-ui-toolbars.js
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:49Z
+ * Date: 2017-04-26T01:05:10Z
  */
 ( function ( OO ) {
 

diff --git a/resources/lib/oojs-ui/oojs-ui-widgets-apex.css b/resources/lib/oojs-ui/oojs-ui-widgets-apex.css
index dc149fb..77b6b81 100644 (file)
--- a/resources/lib/oojs-ui/oojs-ui-widgets-apex.css
+++ b/resources/lib/oojs-ui/oojs-ui-widgets-apex.css
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:54Z
+ * Date: 2017-04-26T01:05:15Z
  */
 .oo-ui-draggableElement-handle:not( .oo-ui-draggableElement-undraggable ).oo-ui-widget {
   cursor: move;
@@ -663,22 +663,21 @@
 }
 .oo-ui-tabOptionWidget {
   display: inline-block;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
   vertical-align: bottom;
-  padding: 0.5em 1em;
   margin: 0.5em 0 0 0.75em;
-  border: 1px solid transparent;
-  border-bottom: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 1px 1px 0 1px;
   border-top-left-radius: 0.5em;
   border-top-right-radius: 0.5em;
+  padding: 0.5em 1em;
 }
-.oo-ui-tabOptionWidget.oo-ui-indicatorElement .oo-ui-labelElement-label {
-  padding-right: 1.5em;
-}
-.oo-ui-tabOptionWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
-  opacity: 0.5;
-}
-.oo-ui-selectWidget-pressed .oo-ui-tabOptionWidget.oo-ui-optionWidget-pressed {
-  background-color: transparent;
+.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
+  background-color: #fff;
+  border-color: #ddd;
 }
 .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
   background-color: rgba(255, 255, 255, 0.2);
@@ -688,11 +687,8 @@
   background-color: #fff;
   border-color: #ddd;
 }
-.oo-ui-selectWidget-pressed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
-.oo-ui-selectWidget-depressed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
-.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected:hover {
+.oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
   background-color: #fff;
-  border-color: #ddd;
 }
 .oo-ui-tagMultiselectWidget {
   display: inline-block;
@@ -1059,13 +1055,10 @@
   max-width: 50em;
 }
 .oo-ui-numberInputWidget-buttoned .oo-ui-buttonWidget,
-.oo-ui-numberInputWidget-buttoned .oo-ui-textInputWidget {
+.oo-ui-numberInputWidget-buttoned .oo-ui-inputWidget-input {
   display: table-cell;
   height: 100%;
 }
-.oo-ui-numberInputWidget-buttoned .oo-ui-textInputWidget input {
-  height: 100%;
-}
 .oo-ui-numberInputWidget-field {
   display: table;
   table-layout: fixed;
@@ -1084,6 +1077,6 @@
   border-bottom-left-radius: 0;
   border-left-width: 0;
 }
-.oo-ui-numberInputWidget-buttoned .oo-ui-textInputWidget input {
+.oo-ui-numberInputWidget-buttoned .oo-ui-inputWidget-input {
   border-radius: 0;
 }

diff --git a/resources/lib/oojs-ui/oojs-ui-widgets-mediawiki.css b/resources/lib/oojs-ui/oojs-ui-widgets-mediawiki.css
index 9b06573..d83f97f 100644 (file)
--- a/resources/lib/oojs-ui/oojs-ui-widgets-mediawiki.css
+++ b/resources/lib/oojs-ui/oojs-ui-widgets-mediawiki.css
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:54Z
+ * Date: 2017-04-26T01:05:15Z
  */
 .oo-ui-draggableElement {
   padding: 1.0546875em 0.9375em 0.9375em;
@@ -769,36 +769,39 @@
 }
 .oo-ui-tabOptionWidget {
   display: inline-block;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
   vertical-align: bottom;
   color: #222;
-  margin: 0.5em 0 0 0.75em;
-  border: 1px solid transparent;
-  border-bottom: 0;
+  margin: 0.46875em 0 0 0.46875em;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 1px 1px 0 1px;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
-  padding: 0.35em 1em;
+  padding: 0.625em 1.015625em 0.546875em;
   font-weight: bold;
+  line-height: 1;
   -webkit-transition: background-color 100ms, color 100ms;
   -moz-transition: background-color 100ms, color 100ms;
   transition: background-color 100ms, color 100ms;
 }
+.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
+  background-color: #fff;
+  color: #000;
+}
+.oo-ui-tabOptionWidget .oo-ui-labelElement-label {
+  line-height: 1.172em;
+}
 .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
   background-color: rgba(255, 255, 255, 0.3);
 }
 .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active {
   background-color: rgba(255, 255, 255, 0.8);
 }
-.oo-ui-tabOptionWidget.oo-ui-indicatorElement .oo-ui-labelElement-label {
-  padding-right: 1.5em;
-}
-.oo-ui-tabOptionWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
-  opacity: 0.5;
-}
-.oo-ui-selectWidget-pressed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
-.oo-ui-selectWidget-depressed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
-.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected:hover {
+.oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
   background-color: #fff;
-  color: #000;
 }
 .oo-ui-tagMultiselectWidget {
   display: inline-block;
@@ -918,7 +921,7 @@
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
-.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle .oo-ui-tagItemWidget.oo-ui-widget-enabled {
+.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
   background-color: #fff;
 }
 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-inputWidget-input {
@@ -961,16 +964,6 @@
   overflow: hidden;
   cursor: text;
 }
-.oo-ui-tagItemWidget.oo-ui-flaggedElement-invalid {
-  border-color: #d33;
-}
-.oo-ui-tagItemWidget.oo-ui-flaggedElement-invalid:hover {
-  border-color: #d33;
-}
-.oo-ui-tagItemWidget.oo-ui-flaggedElement-invalid:focus {
-  border-color: #d33;
-  box-shadow: inset 0 0 0 1px #d33;
-}
 .oo-ui-tagItemWidget.oo-ui-widget-enabled {
   background-color: #f8f9fa;
   color: #222;
@@ -989,6 +982,16 @@
   box-shadow: inset 0 0 0 1px #36c;
   outline: 0;
 }
+.oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid {
+  border-color: #d33;
+}
+.oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid:hover {
+  border-color: #d33;
+}
+.oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid:focus {
+  border-color: #d33;
+  box-shadow: inset 0 0 0 1px #d33;
+}
 .oo-ui-tagItemWidget.oo-ui-widget-enabled > .oo-ui-buttonElement {
   display: block;
   position: absolute;
@@ -1234,16 +1237,17 @@
   overflow-y: auto;
 }
 .oo-ui-searchWidget-query {
-  height: 4em;
-  padding: 0 1em;
-  border-bottom: 1px solid #a2a9b1;
+  height: 4.375em;
+  padding: 0 1.25em;
+  border-bottom: 1px solid #c8ccd1;
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
 }
 .oo-ui-searchWidget-query .oo-ui-textInputWidget {
-  margin: 0.75em 0;
+  margin: 0.9375em 0;
 }
 .oo-ui-searchWidget-results {
-  top: 4em;
-  padding: 1em;
+  top: 4.375em;
+  padding: 1.25em;
   line-height: 0;
 }
 .oo-ui-numberInputWidget {
@@ -1252,13 +1256,10 @@
   max-width: 50em;
 }
 .oo-ui-numberInputWidget-buttoned .oo-ui-buttonWidget,
-.oo-ui-numberInputWidget-buttoned .oo-ui-textInputWidget {
+.oo-ui-numberInputWidget-buttoned .oo-ui-inputWidget-input {
   display: table-cell;
   height: 100%;
 }
-.oo-ui-numberInputWidget-buttoned .oo-ui-textInputWidget input {
-  height: 100%;
-}
 .oo-ui-numberInputWidget-field {
   display: table;
   table-layout: fixed;
@@ -1274,7 +1275,7 @@
   padding-left: 0;
   padding-right: 0;
 }
-.oo-ui-numberInputWidget-buttoned .oo-ui-textInputWidget input {
+.oo-ui-numberInputWidget-buttoned .oo-ui-inputWidget-input {
   border-radius: 0;
 }
 .oo-ui-numberInputWidget-minusButton.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {

diff --git a/resources/lib/oojs-ui/oojs-ui-widgets.js b/resources/lib/oojs-ui/oojs-ui-widgets.js
index a2e6e34..58ff9e5 100644 (file)
--- a/resources/lib/oojs-ui/oojs-ui-widgets.js
+++ b/resources/lib/oojs-ui/oojs-ui-widgets.js
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:49Z
+ * Date: 2017-04-26T01:05:10Z
  */
 ( function ( OO ) {
 
@@ -628,7 +628,8 @@ OO.ui.mixin.RequestManager.prototype.getRequestCacheDataFromResponse = null;
  *
  * @constructor
  * @param {Object} [config] Configuration options
- * @cfg {jQuery} [$overlay] Overlay for the lookup menu; defaults to relative positioning
+ * @cfg {jQuery} [$overlay] Overlay for the lookup menu; defaults to relative positioning.
+ *  See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
  * @cfg {jQuery} [$container=this.$element] The container element. The lookup menu is rendered beneath the specified element.
  * @cfg {boolean} [allowSuggestionsWhenEmpty=false] Request and display a lookup menu when the text input is empty.
  *  By default, the lookup menu is not generated and displayed until the user begins to type.
@@ -669,6 +670,11 @@ OO.ui.mixin.LookupElement = function OoUiMixinLookupElement( config ) {
        } );
 
        // Initialization
+       this.$input.attr( {
+               role: 'combobox',
+               'aria-owns': this.lookupMenu.getElementId(),
+               'aria-autocomplete': 'list'
+       } );
        this.$element.addClass( 'oo-ui-lookupElement' );
        this.lookupMenu.$element.addClass( 'oo-ui-lookupElement-menu' );
        this.$overlay.append( this.lookupMenu.$element );
@@ -3701,6 +3707,7 @@ OO.ui.CapsuleItemWidget.prototype.focus = function () {
  *  its containing `<div>`. The specified overlay layer is usually on top of
  *  the containing `<div>` and has a larger area. By default, the menu uses
  *  relative positioning.
+ *  See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
  */
 OO.ui.CapsuleMultiselectWidget = function OoUiCapsuleMultiselectWidget( config ) {
        var $tabFocus;
@@ -3795,6 +3802,7 @@ OO.ui.CapsuleMultiselectWidget = function OoUiCapsuleMultiselectWidget( config )
                this.$input.prop( 'disabled', this.isDisabled() );
                this.$input.attr( {
                        role: 'combobox',
+                       'aria-owns': this.menu.getElementId(),
                        'aria-autocomplete': 'list'
                } );
        }
@@ -5512,7 +5520,8 @@ OO.ui.TagMultiselectWidget.prototype.isValid = function () {
  * @mixins OO.ui.mixin.PopupElement
  *
  * @param {Object} config Configuration object
- * @cfg {jQuery} [$overlay] An overlay for the popup
+ * @cfg {jQuery} [$overlay] An overlay for the popup.
+ *  See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
  * @cfg {Object} [popup] Configuration options for the popup
  * @cfg {OO.ui.InputWidget} [popupInput] An input widget inside the popup that will be
  *  focused when the popup is opened and will be used as replacement for the
@@ -5566,6 +5575,7 @@ OO.ui.PopupTagMultiselectWidget = function OoUiPopupTagMultiselectWidget( config
        }
 
        // Events
+       this.on( 'resize', this.popup.updateDimensions.bind( this.popup ) );
        this.popup.connect( this, { toggle: 'onPopupToggle' } );
        this.$tabIndexed
                .on( 'focus', this.focus.bind( this ) );
@@ -5675,7 +5685,8 @@ OO.ui.PopupTagMultiselectWidget.prototype.addTagByPopupValue = function ( data,
  * @constructor
  * @param {Object} [config] Configuration object
  * @cfg {Object} [menu] Configuration object for the menu widget
- * @cfg {jQuery} [$overlay] An overlay for the menu
+ * @cfg {jQuery} [$overlay] An overlay for the menu.
+ *  See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
  * @cfg {Object[]} [options=[]] Array of menu options in the format `{ data: …, label: … }`
  */
 OO.ui.MenuTagMultiselectWidget = function OoUiMenuTagMultiselectWidget( config ) {
@@ -6546,14 +6557,13 @@ OO.ui.SearchWidget.prototype.getResults = function () {
  *     $( 'body' ).append( numberInput.$element );
  *
  * @class
- * @extends OO.ui.Widget
+ * @extends OO.ui.TextInputWidget
  *
  * @constructor
  * @param {Object} [config] Configuration options
- * @cfg {Object} [input] Configuration options to pass to the {@link OO.ui.TextInputWidget text input widget}.
  * @cfg {Object} [minusButton] Configuration options to pass to the {@link OO.ui.ButtonWidget decrementing button widget}.
  * @cfg {Object} [plusButton] Configuration options to pass to the {@link OO.ui.ButtonWidget incrementing button widget}.
- * @cfg {boolean} [isInteger=false] Whether the field accepts only integer values.
+ * @cfg {boolean} [allowInteger=false] Whether the field accepts only integer values.
  * @cfg {number} [min=-Infinity] Minimum allowed value
  * @cfg {number} [max=Infinity] Maximum allowed value
  * @cfg {number} [step=1] Delta when using the buttons or up/down arrow keys
@@ -6561,6 +6571,9 @@ OO.ui.SearchWidget.prototype.getResults = function () {
  * @cfg {boolean} [showButtons=true] Whether to show the plus and minus buttons.
  */
 OO.ui.NumberInputWidget = function OoUiNumberInputWidget( config ) {
+       var $field = $( '<div>' )
+               .addClass( 'oo-ui-numberInputWidget-field' );
+
        // Configuration initialization
        config = $.extend( {
                isInteger: false,
@@ -6571,17 +6584,15 @@ OO.ui.NumberInputWidget = function OoUiNumberInputWidget( config ) {
                showButtons: true
        }, config );
 
+       // For backward compatibility
+       $.extend( config, config.input );
+       this.input = this;
+
        // Parent constructor
-       OO.ui.NumberInputWidget.parent.call( this, config );
+       OO.ui.NumberInputWidget.parent.call( this, $.extend( config, {
+               type: 'number'
+       } ) );
 
-       // Properties
-       this.input = new OO.ui.TextInputWidget( $.extend(
-               {
-                       disabled: this.isDisabled(),
-                       type: 'number'
-               },
-               config.input
-       ) );
        if ( config.showButtons ) {
                this.minusButton = new OO.ui.ButtonWidget( $.extend(
                        {
@@ -6604,11 +6615,7 @@ OO.ui.NumberInputWidget = function OoUiNumberInputWidget( config ) {
        }
 
        // Events
-       this.input.connect( this, {
-               change: this.emit.bind( this, 'change' ),
-               enter: this.emit.bind( this, 'enter' )
-       } );
-       this.input.$input.on( {
+       this.$input.on( {
                keydown: this.onKeyDown.bind( this ),
                'wheel mousewheel DOMMouseScroll': this.onWheel.bind( this )
        } );
@@ -6621,40 +6628,31 @@ OO.ui.NumberInputWidget = function OoUiNumberInputWidget( config ) {
                } );
        }
 
-       // Initialization
-       this.setIsInteger( !!config.isInteger );
-       this.setRange( config.min, config.max );
-       this.setStep( config.step, config.pageStep );
-
-       this.$field = $( '<div>' ).addClass( 'oo-ui-numberInputWidget-field' )
-               .append( this.input.$element );
-       this.$element.addClass( 'oo-ui-numberInputWidget' ).append( this.$field );
+       // Build the field
+       $field.append( this.$input );
        if ( config.showButtons ) {
-               this.$field
+               $field
                        .prepend( this.minusButton.$element )
                        .append( this.plusButton.$element );
-               this.$element.addClass( 'oo-ui-numberInputWidget-buttoned' );
        }
-       this.input.setValidation( this.validateNumber.bind( this ) );
-};
-
-/* Setup */
 
-OO.inheritClass( OO.ui.NumberInputWidget, OO.ui.Widget );
+       // Initialization
+       this.setAllowInteger( config.isInteger || config.allowInteger );
+       this.setRange( config.min, config.max );
+       this.setStep( config.step, config.pageStep );
+       // Set the validation method after we set isInteger and range
+       // so that it doesn't immediately call setValidityFlag
+       this.setValidation( this.validateNumber.bind( this ) );
 
-/* Events */
+       this.$element
+               .addClass( 'oo-ui-numberInputWidget' )
+               .toggleClass( 'oo-ui-numberInputWidget-buttoned', config.showButtons )
+               .append( $field );
+};
 
-/**
- * A `change` event is emitted when the value of the input changes.
- *
- * @event change
- */
+/* Setup */
 
-/**
- * An `enter` event is emitted when the user presses 'enter' inside the text box.
- *
- * @event enter
- */
+OO.inheritClass( OO.ui.NumberInputWidget, OO.ui.TextInputWidget );
 
 /* Methods */
 
@@ -6663,19 +6661,23 @@ OO.inheritClass( OO.ui.NumberInputWidget, OO.ui.Widget );
  *
  * @param {boolean} flag
  */
-OO.ui.NumberInputWidget.prototype.setIsInteger = function ( flag ) {
+OO.ui.NumberInputWidget.prototype.setAllowInteger = function ( flag ) {
        this.isInteger = !!flag;
-       this.input.setValidityFlag();
+       this.setValidityFlag();
 };
+// Backward compatibility
+OO.ui.NumberInputWidget.prototype.setIsInteger = OO.ui.NumberInputWidget.prototype.setAllowInteger;
 
 /**
  * Get whether only integers are allowed
  *
  * @return {boolean} Flag value
  */
-OO.ui.NumberInputWidget.prototype.getIsInteger = function () {
+OO.ui.NumberInputWidget.prototype.getAllowInteger = function () {
        return this.isInteger;
 };
+// Backward compatibility
+OO.ui.NumberInputWidget.prototype.getIsInteger = OO.ui.NumberInputWidget.prototype.getAllowInteger;
 
 /**
  * Set the range of allowed values
@@ -6689,7 +6691,7 @@ OO.ui.NumberInputWidget.prototype.setRange = function ( min, max ) {
        }
        this.min = min;
        this.max = max;
-       this.input.setValidityFlag();
+       this.setValidityFlag();
 };
 
 /**
@@ -6729,31 +6731,13 @@ OO.ui.NumberInputWidget.prototype.getStep = function () {
        return [ this.step, this.pageStep ];
 };
 
-/**
- * Get the current value of the widget
- *
- * @return {string}
- */
-OO.ui.NumberInputWidget.prototype.getValue = function () {
-       return this.input.getValue();
-};
-
 /**
  * Get the current value of the widget as a number
  *
  * @return {number} May be NaN, or an invalid number
  */
 OO.ui.NumberInputWidget.prototype.getNumericValue = function () {
-       return +this.input.getValue();
-};
-
-/**
- * Set the value of the widget
- *
- * @param {string} value Invalid values are allowed
- */
-OO.ui.NumberInputWidget.prototype.setValue = function ( value ) {
-       this.input.setValue( value );
+       return +this.getValue();
 };
 
 /**
@@ -6783,7 +6767,6 @@ OO.ui.NumberInputWidget.prototype.adjustValue = function ( delta ) {
                this.setValue( n );
        }
 };
-
 /**
  * Validate input
  *
@@ -6793,6 +6776,10 @@ OO.ui.NumberInputWidget.prototype.adjustValue = function ( delta ) {
  */
 OO.ui.NumberInputWidget.prototype.validateNumber = function ( value ) {
        var n = +value;
+       if ( value === '' ) {
+               return !this.isRequired();
+       }
+
        if ( isNaN( n ) || !isFinite( n ) ) {
                return false;
        }
@@ -6827,7 +6814,7 @@ OO.ui.NumberInputWidget.prototype.onButtonClick = function ( dir ) {
 OO.ui.NumberInputWidget.prototype.onWheel = function ( event ) {
        var delta = 0;
 
-       if ( !this.isDisabled() && this.input.$input.is( ':focus' ) ) {
+       if ( !this.isDisabled() && this.$input.is( ':focus' ) ) {
                // Standard 'wheel' event
                if ( event.originalEvent.deltaMode !== undefined ) {
                        this.sawWheelEvent = true;
@@ -6892,9 +6879,6 @@ OO.ui.NumberInputWidget.prototype.setDisabled = function ( disabled ) {
        // Parent method
        OO.ui.NumberInputWidget.parent.prototype.setDisabled.call( this, disabled );
 
-       if ( this.input ) {
-               this.input.setDisabled( this.isDisabled() );
-       }
        if ( this.minusButton ) {
                this.minusButton.setDisabled( this.isDisabled() );
        }

diff --git a/resources/lib/oojs-ui/oojs-ui-windows-apex.css b/resources/lib/oojs-ui/oojs-ui-windows-apex.css
index c9c4c1b..422dbd2 100644 (file)
--- a/resources/lib/oojs-ui/oojs-ui-windows-apex.css
+++ b/resources/lib/oojs-ui/oojs-ui-windows-apex.css
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:54Z
+ * Date: 2017-04-26T01:05:15Z
  */
 .oo-ui-actionWidget.oo-ui-pendingElement-pending {
   background-image: /* @embed */ url(themes/apex/images/textures/pending.gif);
@@ -213,7 +213,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 2;
+  z-index: 4;
   overflow-x: hidden;
   overflow-y: auto;
 }

diff --git a/resources/lib/oojs-ui/oojs-ui-windows-mediawiki.css b/resources/lib/oojs-ui/oojs-ui-windows-mediawiki.css
index f6828e2..8a69c0f 100644 (file)
--- a/resources/lib/oojs-ui/oojs-ui-windows-mediawiki.css
+++ b/resources/lib/oojs-ui/oojs-ui-windows-mediawiki.css
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:54Z
+ * Date: 2017-04-26T01:05:15Z
  */
 .oo-ui-window {
   background: transparent;
@@ -212,7 +212,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 2;
+  z-index: 4;
   overflow-x: hidden;
   overflow-y: auto;
 }

diff --git a/resources/lib/oojs-ui/oojs-ui-windows.js b/resources/lib/oojs-ui/oojs-ui-windows.js
index c955919..5a06841 100644 (file)
--- a/resources/lib/oojs-ui/oojs-ui-windows.js
+++ b/resources/lib/oojs-ui/oojs-ui-windows.js
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:49Z
+ * Date: 2017-04-26T01:05:10Z
  */
 ( function ( OO ) {
 
@@ -1636,6 +1636,26 @@ OO.ui.Window = function OoUiWindow( config ) {
        this.manager = null;
        this.size = config.size || this.constructor.static.size;
        this.$frame = $( '<div>' );
+       /**
+        * Overlay element to use for the `$overlay` configuration option of widgets that support it.
+        * Things put inside of it are overlaid on top of the window and are not bound to its dimensions.
+        * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
+        *
+        *     MyDialog.prototype.initialize = function () {
+        *       ...
+        *       var popupButton = new OO.ui.PopupButtonWidget( {
+        *         $overlay: this.$overlay,
+        *         label: 'Popup button',
+        *         popup: {
+        *           $content: $( '<p>Popup contents.</p><p>Popup contents.</p><p>Popup contents.</p>' ),
+        *           padded: true
+        *         }
+        *       } );
+        *       ...
+        *     };
+        *
+        * @property {jQuery}
+        */
        this.$overlay = $( '<div>' );
        this.$content = $( '<div>' );
 
@@ -2492,21 +2512,15 @@ OO.ui.Dialog.prototype.getTeardownProcess = function ( data ) {
  * @inheritdoc
  */
 OO.ui.Dialog.prototype.initialize = function () {
-       var titleId;
-
        // Parent method
        OO.ui.Dialog.parent.prototype.initialize.call( this );
 
-       titleId = OO.ui.generateElementId();
-
        // Properties
-       this.title = new OO.ui.LabelWidget( {
-               id: titleId
-       } );
+       this.title = new OO.ui.LabelWidget();
 
        // Initialization
        this.$content.addClass( 'oo-ui-dialog-content' );
-       this.$element.attr( 'aria-labelledby', titleId );
+       this.$element.attr( 'aria-labelledby', this.title.getElementId() );
        this.setPendingElement( this.$head );
 };