From b6046dff660fd5609e5a497b7907fb20004076c8 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Bartosz=20Dziewo=C5=84ski?= <matma.rex@gmail.com>
Date: Tue, 11 Aug 2015 17:12:36 +0200
Subject: [PATCH] Refactor NamespaceInputWidget

* Refactor NamespaceInputWidget into two widgets: NamespaceInputWidget
  and ComplexNamespaceInputWidget. The former is now only the dropdown
  (and inherits from DropdownInputWidget), the latter is the dropdown
  plus two checkboxes.
* Change ComplexNamespaceInputWidget configuration to take nested config
  for `invert`, `associated`, and `namespace`, rather than require
  parameters like `invertName` and so on for every combination.
* Implement standalone JavaScript versions of both widgets (previously
  mw.widgets.NamespaceInputWidget could only be created via infusion
  of the PHP widget).

Bug: T99256
Bug: T106138
Bug: T109559
Change-Id: Ie2fee6d035339ceb934fca991675480db3d630d1
---
 autoload.php                                  |   1 +
 includes/htmlform/HTMLSelectNamespace.php     |   7 +-
 .../widget/ComplexNamespaceInputWidget.php    | 110 ++++++++++++++++
 includes/widget/NamespaceInputWidget.php      |  84 ++-----------
 resources/Resources.php                       |   8 +-
 ...dgets.ComplexNamespaceInputWidget.base.css |  26 ++++
 .../mw.widgets.ComplexNamespaceInputWidget.js | 118 ++++++++++++++++++
 .../mw.widgets.NamespaceInputWidget.base.css  |  26 ----
 .../mw.widgets.NamespaceInputWidget.js        |  69 +++++-----
 9 files changed, 307 insertions(+), 142 deletions(-)
 create mode 100644 includes/widget/ComplexNamespaceInputWidget.php
 create mode 100644 resources/src/mediawiki.widgets/mw.widgets.ComplexNamespaceInputWidget.base.css
 create mode 100644 resources/src/mediawiki.widgets/mw.widgets.ComplexNamespaceInputWidget.js
 delete mode 100644 resources/src/mediawiki.widgets/mw.widgets.NamespaceInputWidget.base.css

diff --git a/autoload.php b/autoload.php
index 48e0b8824a..8a6a34078d 100644
--- a/autoload.php
+++ b/autoload.php
@@ -762,6 +762,7 @@ $wgAutoloadLocalClasses = array(
 	'MediaWiki\\Logger\\Monolog\\WikiProcessor' => __DIR__ . '/includes/debug/logger/monolog/WikiProcessor.php',
 	'MediaWiki\\Logger\\NullSpi' => __DIR__ . '/includes/debug/logger/NullSpi.php',
 	'MediaWiki\\Logger\\Spi' => __DIR__ . '/includes/debug/logger/Spi.php',
+	'MediaWiki\\Widget\\ComplexNamespaceInputWidget' => __DIR__ . '/includes/widget/ComplexNamespaceInputWidget.php',
 	'MediaWiki\\Widget\\NamespaceInputWidget' => __DIR__ . '/includes/widget/NamespaceInputWidget.php',
 	'MediaWiki\\Widget\\TitleInputWidget' => __DIR__ . '/includes/widget/TitleInputWidget.php',
 	'MediaWiki\\Widget\\UserInputWidget' => __DIR__ . '/includes/widget/UserInputWidget.php',
diff --git a/includes/htmlform/HTMLSelectNamespace.php b/includes/htmlform/HTMLSelectNamespace.php
index d6d564e91f..4efdfbf306 100644
--- a/includes/htmlform/HTMLSelectNamespace.php
+++ b/includes/htmlform/HTMLSelectNamespace.php
@@ -23,13 +23,10 @@ class HTMLSelectNamespace extends HTMLFormField {
 
 	public function getInputOOUI( $value ) {
 		return new MediaWiki\Widget\NamespaceInputWidget( array(
-			'valueNamespace' => $value,
-			'nameNamespace' => $this->mName,
+			'value' => $value,
+			'name' => $this->mName,
 			'id' => $this->mID,
 			'includeAllValue' => $this->mAllValue,
-			// Disable additional checkboxes
-			'nameInvert' => null,
-			'nameAssociated' => null,
 		) );
 	}
 }
diff --git a/includes/widget/ComplexNamespaceInputWidget.php b/includes/widget/ComplexNamespaceInputWidget.php
new file mode 100644
index 0000000000..21c57099fb
--- /dev/null
+++ b/includes/widget/ComplexNamespaceInputWidget.php
@@ -0,0 +1,110 @@
+<?php
+/**
+ * MediaWiki Widgets – ComplexNamespaceInputWidget class.
+ *
+ * @copyright 2011-2015 MediaWiki Widgets Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+namespace MediaWiki\Widget;
+
+/**
+ * Namespace input widget. Displays a dropdown box with the choice of available namespaces, plus two
+ * checkboxes to include associated namespace or to invert selection.
+ */
+class ComplexNamespaceInputWidget extends \OOUI\Widget {
+
+	protected $config;
+	protected $namespace;
+	protected $associated = null;
+	protected $associatedLabel = null;
+	protected $invert = null;
+	protected $invertLabel = null;
+
+	/**
+	 * @param array $config Configuration options
+	 * @param array $config['namespace'] Configuration for the NamespaceInputWidget dropdown with list
+	 *     of namespaces
+	 * @param string $config['namespace']['includeAllValue'] If specified, add a "all namespaces"
+	 *     option to the dropdown, and use this as the input value for it
+	 * @param array|null $config['invert'] Configuration for the "invert selection" CheckboxInputWidget. If
+	 *     null, the checkbox will not be generated.
+	 * @param array|null $config['associated'] Configuration for the "include associated namespace"
+	 *     CheckboxInputWidget. If null, the checkbox will not be generated.
+	 * @param array $config['invertLabel'] Configuration for the FieldLayout with label wrapping the
+	 *     "invert selection" checkbox
+	 * @param string $config['invertLabel']['label'] Label text for the label
+	 * @param array $config['associatedLabel'] Configuration for the FieldLayout with label wrapping
+	 *     the "include associated namespace" checkbox
+	 * @param string $config['associatedLabel']['label'] Label text for the label
+	 */
+	public function __construct( array $config = array() ) {
+		// Configuration initialization
+		$config = array_merge(
+			array(
+				// Config options for nested widgets
+				'namespace' => array(),
+				'invert' => array(),
+				'invertLabel' => array(),
+				'associated' => array(),
+				'associatedLabel' => array(),
+			),
+			$config
+		);
+
+		// Parent constructor
+		parent::__construct( $config );
+
+		// Properties
+		$this->config = $config;
+
+		$this->namespace = new NamespaceInputWidget( $config['namespace'] );
+		if ( $config['associated'] !== null ) {
+			$this->associated = new \OOUI\CheckboxInputWidget( array_merge(
+				array( 'value' => '1' ),
+				$config['associated']
+			) );
+			// TODO Should use a LabelWidget? But they don't work like HTML <label>s yet
+			$this->associatedLabel = new \OOUI\FieldLayout(
+				$this->associated,
+				array_merge(
+					array( 'align' => 'inline' ),
+					$config['associatedLabel']
+				)
+			);
+		}
+		if ( $config['invert'] !== null ) {
+			$this->invert = new \OOUI\CheckboxInputWidget( array_merge(
+				array( 'value' => '1' ),
+				$config['invert']
+			) );
+			// TODO Should use a LabelWidget? But they don't work like HTML <label>s yet
+			$this->invertLabel = new \OOUI\FieldLayout(
+				$this->invert,
+				array_merge(
+					array( 'align' => 'inline' ),
+					$config['invertLabel']
+				)
+			);
+		}
+
+		// Initialization
+		$this
+			->addClasses( array( 'mw-widget-complexNamespaceInputWidget' ) )
+			->appendContent( $this->namespace, $this->associatedLabel, $this->invertLabel );
+	}
+
+	protected function getJavaScriptClassName() {
+		return 'mw.widgets.ComplexNamespaceInputWidget';
+	}
+
+	public function getConfig( &$config ) {
+		$config = array_merge(
+			$config,
+			array_intersect_key(
+				$this->config,
+				array_fill_keys( array( 'namespace', 'invert', 'invertLabel', 'associated', 'associatedLabel' ), true )
+			)
+		);
+		return parent::getConfig( $config );
+	}
+}
diff --git a/includes/widget/NamespaceInputWidget.php b/includes/widget/NamespaceInputWidget.php
index f10ea709e9..a99227e6c4 100644
--- a/includes/widget/NamespaceInputWidget.php
+++ b/includes/widget/NamespaceInputWidget.php
@@ -8,93 +8,29 @@
 namespace MediaWiki\Widget;
 
 /**
- * Namespace input widget. Displays a dropdown box with the choice of available namespaces, plus two
- * checkboxes to include associated namespace or to invert selection.
+ * Namespace input widget. Displays a dropdown box with the choice of available namespaces.
  */
-class NamespaceInputWidget extends \OOUI\Widget {
+class NamespaceInputWidget extends \OOUI\DropdownInputWidget {
 
-	protected $namespace = null;
-	protected $associated = null;
-	protected $invert = null;
-	protected $allValue = null;
+	protected $includeAllValue = null;
 
 	/**
 	 * @param array $config Configuration options
-	 * @param string $config['nameNamespace'] HTML input name for the namespace dropdown box (default:
-	 *     'namespace')
-	 * @param string $config['nameInvert'] HTML input name for the "invert selection" checkbox. If
-	 *     null, the checkbox will not be generated. (default: 'invert')
-	 * @param string $config['nameAssociated'] HTML input name for the "include associated namespace"
-	 *     checkbox. If null, the checkbox will not be generated. (default: 'associated')
 	 * @param string $config['includeAllValue'] If specified, add a "all namespaces" option to the
 	 *     namespace dropdown, and use this as the input value for it
-	 * @param int|string $config['valueNamespace'] Input value of the namespace dropdown box. May be a
-	 *     string only if 'includeAllValue' is set.
-	 * @param boolean $config['valueInvert'] Input value of the "invert selection" checkbox (default:
-	 *     false)
-	 * @param boolean $config['valueAssociated'] Input value of the "include associated namespace"
-	 *     checkbox (default: false)
-	 * @param string $config['labelInvert'] Text of label to use for "invert selection" checkbox
-	 * @param string $config['labelAssociated'] Text of label to use for "include associated
-	 *     namespace" checkbox
 	 */
 	public function __construct( array $config = array() ) {
 		// Configuration initialization
-		$config = array_merge(
-			array(
-				'nameNamespace' => 'namespace',
-				'nameInvert' => 'invert',
-				'nameAssociated' => 'associated',
-				// Choose first available: either main namespace or the "all namespaces" option
-				'valueNamespace' => null,
-				'valueInvert' => false,
-				'valueAssociated' => false,
-			),
-			$config
-		);
+		$config['options'] = $this->getNamespaceDropdownOptions( $config );
 
 		// Parent constructor
 		parent::__construct( $config );
 
 		// Properties
-		$this->allValue = isset( $config['includeAllValue'] ) ? $config['includeAllValue'] : null;
-		$this->namespace = new \OOUI\DropdownInputWidget( array(
-			'name' => $config['nameNamespace'],
-			'value' => $config['valueNamespace'],
-			'options' => $this->getNamespaceDropdownOptions( $config ),
-		) );
-		if ( $config['nameAssociated'] !== null ) {
-			// FIXME Should use a LabelWidget? But they don't work like HTML <label>s yet
-			$this->associated = new \OOUI\FieldLayout(
-				new \OOUI\CheckboxInputWidget( array(
-					'name' => $config['nameAssociated'],
-					'selected' => $config['valueAssociated'],
-					'value' => '1',
-				) ),
-				array(
-					'align' => 'inline',
-					'label' => $config['labelAssociated'],
-				)
-			);
-		}
-		if ( $config['nameInvert'] !== null ) {
-			$this->invert = new \OOUI\FieldLayout(
-				new \OOUI\CheckboxInputWidget( array(
-					'name' => $config['nameInvert'],
-					'selected' => $config['valueInvert'],
-					'value' => '1',
-				) ),
-				array(
-					'align' => 'inline',
-					'label' => $config['labelInvert'],
-				)
-			);
-		}
+		$this->includeAllValue = isset( $config['includeAllValue'] ) ? $config['includeAllValue'] : null;
 
 		// Initialization
-		$this
-			->addClasses( array( 'mw-widget-namespaceInputWidget' ) )
-			->appendContent( $this->namespace, $this->associated, $this->invert );
+		$this->addClasses( array( 'mw-widget-namespaceInputWidget' ) );
 	}
 
 	protected function getNamespaceDropdownOptions( array $config ) {
@@ -118,10 +54,8 @@ class NamespaceInputWidget extends \OOUI\Widget {
 	}
 
 	public function getConfig( &$config ) {
-		$config['namespace'] = $this->namespace;
-		$config['associated'] = $this->associated;
-		$config['invert'] = $this->invert;
-		$config['allValue'] = $this->allValue;
-		return parent::getConfig( $config );
+		$config['includeAllValue'] = $this->includeAllValue;
+		// Skip DropdownInputWidget's getConfig(), we don't need 'options' config
+		return \OOUI\InputWidget::getConfig( $config );
 	}
 }
diff --git a/resources/Resources.php b/resources/Resources.php
index d575c8d6db..5ac00fe444 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1813,6 +1813,7 @@ return array(
 			'resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.js',
 			'resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js',
 			'resources/src/mediawiki.widgets/mw.widgets.NamespaceInputWidget.js',
+			'resources/src/mediawiki.widgets/mw.widgets.ComplexNamespaceInputWidget.js',
 			'resources/src/mediawiki.widgets/mw.widgets.TitleInputWidget.js',
 			'resources/src/mediawiki.widgets/mw.widgets.TitleOptionWidget.js',
 			'resources/src/mediawiki.widgets/mw.widgets.UserInputWidget.js',
@@ -1833,9 +1834,14 @@ return array(
 			'oojs-ui',
 		),
 		'messages' => array(
+			// DateInputWidget
 			'mw-widgets-dateinput-no-date',
 			'mw-widgets-dateinput-placeholder-day',
 			'mw-widgets-dateinput-placeholder-month',
+			// NamespaceInputWidget
+			'blanknamespace',
+			'namespacesall',
+			// TitleInputWidget
 			'mw-widgets-titleinput-description-new-page',
 			'mw-widgets-titleinput-description-redirect',
 		),
@@ -1844,7 +1850,7 @@ return array(
 	'mediawiki.widgets.styles' => array(
 		'skinStyles' => array(
 			'default' => array(
-				'resources/src/mediawiki.widgets/mw.widgets.NamespaceInputWidget.base.css',
+				'resources/src/mediawiki.widgets/mw.widgets.ComplexNamespaceInputWidget.base.css',
 			),
 		),
 		'position' => 'top',
diff --git a/resources/src/mediawiki.widgets/mw.widgets.ComplexNamespaceInputWidget.base.css b/resources/src/mediawiki.widgets/mw.widgets.ComplexNamespaceInputWidget.base.css
new file mode 100644
index 0000000000..b60883e997
--- /dev/null
+++ b/resources/src/mediawiki.widgets/mw.widgets.ComplexNamespaceInputWidget.base.css
@@ -0,0 +1,26 @@
+/*!
+ * MediaWiki Widgets - base ComplexNamespaceInputWidget styles.
+ *
+ * @copyright 2011-2015 MediaWiki Widgets Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+.mw-widget-complexNamespaceInputWidget .mw-widget-namespaceInputWidget,
+.mw-widget-complexNamespaceInputWidget .oo-ui-fieldLayout {
+	display: inline-block;
+	margin-right: 1em;
+}
+
+/* TODO FieldLayout is not supposed to be used the way we use it here */
+.mw-widget-complexNamespaceInputWidget .oo-ui-fieldLayout {
+	vertical-align: middle;
+	margin-bottom: 0;
+}
+
+.mw-widget-complexNamespaceInputWidget .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label {
+	padding-left: 0.5em;
+}
+
+.mw-widget-complexNamespaceInputWidget .mw-widget-namespaceInputWidget {
+	max-width: 20em;
+}
diff --git a/resources/src/mediawiki.widgets/mw.widgets.ComplexNamespaceInputWidget.js b/resources/src/mediawiki.widgets/mw.widgets.ComplexNamespaceInputWidget.js
new file mode 100644
index 0000000000..f67ed3de65
--- /dev/null
+++ b/resources/src/mediawiki.widgets/mw.widgets.ComplexNamespaceInputWidget.js
@@ -0,0 +1,118 @@
+/*!
+ * MediaWiki Widgets - ComplexNamespaceInputWidget class.
+ *
+ * @copyright 2011-2015 MediaWiki Widgets Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+( function ( $, mw ) {
+
+	/**
+	 * Namespace input widget. Displays a dropdown box with the choice of available namespaces, plus
+	 * two checkboxes to include associated namespace or to invert selection.
+	 *
+	 * @class
+	 * @extends OO.ui.Widget
+	 *
+	 * @constructor
+	 * @param {Object} [config] Configuration options
+	 * @cfg {Object} namespace Configuration for the NamespaceInputWidget dropdown with list
+	 *     of namespaces
+	 * @cfg {string} namespace.includeAllValue If specified, add a "all namespaces"
+	 *     option to the dropdown, and use this as the input value for it
+	 * @cfg {Object} invert Configuration for the "invert selection" CheckboxInputWidget. If
+	 *     null, the checkbox will not be generated.
+	 * @cfg {Object} associated Configuration for the "include associated namespace"
+	 *     CheckboxInputWidget. If null, the checkbox will not be generated.
+	 * @cfg {Object} invertLabel Configuration for the FieldLayout with label wrapping the
+	 *     "invert selection" checkbox
+	 * @cfg {string} invertLabel.label Label text for the label
+	 * @cfg {Object} associatedLabel Configuration for the FieldLayout with label wrapping
+	 *     the "include associated namespace" checkbox
+	 * @cfg {string} associatedLabel.label Label text for the label
+	 */
+	mw.widgets.ComplexNamespaceInputWidget = function MwWidgetsComplexNamespaceInputWidget( config ) {
+		// Configuration initialization
+		config = $.extend(
+			{
+				// Config options for nested widgets
+				namespace: {},
+				invert: {},
+				invertLabel: {},
+				associated: {},
+				associatedLabel: {}
+			},
+			config
+		);
+
+		// Parent constructor
+		mw.widgets.ComplexNamespaceInputWidget.parent.call( this, config );
+
+		// Properties
+		this.config = config;
+
+		this.namespace = new mw.widgets.NamespaceInputWidget( config.namespace );
+		if ( config.associated !== null ) {
+			this.associated = new OO.ui.CheckboxInputWidget( $.extend(
+				{ value: '1' },
+				config.associated
+			) );
+			// TODO Should use a LabelWidget? But they don't work like HTML <label>s yet
+			this.associatedLabel = new OO.ui.FieldLayout(
+				this.associated,
+				$.extend(
+					{ align: 'inline' },
+					config.associatedLabel
+				)
+			);
+		}
+		if ( config.invert !== null ) {
+			this.invert = new OO.ui.CheckboxInputWidget( $.extend(
+				{ value: '1' },
+				config.invert
+			) );
+			// TODO Should use a LabelWidget? But they don't work like HTML <label>s yet
+			this.invertLabel = new OO.ui.FieldLayout(
+				this.invert,
+				$.extend(
+					{ align: 'inline' },
+					config.invertLabel
+				)
+			);
+		}
+
+		// Events
+		this.namespace.connect( this, { change: 'updateCheckboxesState' } );
+
+		// Initialization
+		this.$element
+			.addClass( 'mw-widget-complexNamespaceInputWidget' )
+			.append(
+				this.namespace.$element,
+				this.invert ? this.invertLabel.$element : '',
+				this.associated ? this.associatedLabel.$element : ''
+			);
+		this.updateCheckboxesState();
+	};
+
+	/* Setup */
+
+	OO.inheritClass( mw.widgets.ComplexNamespaceInputWidget, OO.ui.Widget );
+
+	/* Methods */
+
+	/**
+	 * Update the disabled state of checkboxes when the value of namespace dropdown changes.
+	 *
+	 * @private
+	 */
+	mw.widgets.ComplexNamespaceInputWidget.prototype.updateCheckboxesState = function () {
+		var disabled = this.namespace.getValue() === this.namespace.allValue;
+		if ( this.invert ) {
+			this.invert.setDisabled( disabled );
+		}
+		if ( this.associated ) {
+			this.associated.setDisabled( disabled );
+		}
+	};
+
+}( jQuery, mediaWiki ) );
diff --git a/resources/src/mediawiki.widgets/mw.widgets.NamespaceInputWidget.base.css b/resources/src/mediawiki.widgets/mw.widgets.NamespaceInputWidget.base.css
deleted file mode 100644
index 3ce92efb2b..0000000000
--- a/resources/src/mediawiki.widgets/mw.widgets.NamespaceInputWidget.base.css
+++ /dev/null
@@ -1,26 +0,0 @@
-/*!
- * MediaWiki Widgets - base NamespaceInputWidget styles.
- *
- * @copyright 2011-2015 MediaWiki Widgets Team and others; see AUTHORS.txt
- * @license The MIT License (MIT); see LICENSE.txt
- */
-
-.mw-widget-namespaceInputWidget .oo-ui-dropdownInputWidget,
-.mw-widget-namespaceInputWidget .oo-ui-fieldLayout {
-	display: inline-block;
-	margin-right: 1em;
-}
-
-/* FIXME FieldLayout is not supposed to be used the way we use it here */
-.mw-widget-namespaceInputWidget .oo-ui-fieldLayout {
-	vertical-align: middle;
-	margin-bottom: 0;
-}
-
-.mw-widget-namespaceInputWidget .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label {
-	padding-left: 0.5em;
-}
-
-.mw-widget-namespaceInputWidget .oo-ui-dropdownInputWidget {
-	width: 20em;
-}
diff --git a/resources/src/mediawiki.widgets/mw.widgets.NamespaceInputWidget.js b/resources/src/mediawiki.widgets/mw.widgets.NamespaceInputWidget.js
index 05e6f27110..ef42dc1e07 100644
--- a/resources/src/mediawiki.widgets/mw.widgets.NamespaceInputWidget.js
+++ b/resources/src/mediawiki.widgets/mw.widgets.NamespaceInputWidget.js
@@ -7,62 +7,61 @@
 ( function ( $, mw ) {
 
 	/**
-	 * Creates a mw.widgets.NamespaceInputWidget object.
-	 *
-	 * This is not a complete implementation and is not intended for public usage. It only exists
-	 * because of HTMLForm shenanigans.
+	 * Namespace input widget. Displays a dropdown box with the choice of available namespaces.
 	 *
 	 * @class
-	 * @private
-	 * @extends OO.ui.Widget
+	 * @extends OO.ui.DropdownInputWidget
 	 *
 	 * @constructor
 	 * @param {Object} [config] Configuration options
-	 * @cfg {OO.ui.DropdownInputWidget} namespace Widget to include
-	 * @cfg {OO.ui.CheckboxInputWidget|null} invert Widget to include
-	 * @cfg {OO.ui.CheckboxInputWidget|null} associated Widget to include
-	 * @cfg {string|null} allValue Value for "all namespaces" option, if any
+	 * @cfg {string|null} includeAllValue Value for "all namespaces" option, if any
 	 */
 	mw.widgets.NamespaceInputWidget = function MwWidgetsNamespaceInputWidget( config ) {
+		// Configuration initialization
+		config = $.extend( {}, config, { options: this.getNamespaceDropdownOptions( config ) } );
+
 		// Parent constructor
 		mw.widgets.NamespaceInputWidget.parent.call( this, config );
 
-		// Properties
-		this.namespace = config.namespace;
-		this.invert = config.invert;
-		this.associated = config.associated;
-		this.allValue = config.allValue;
-
-		// Events
-		this.namespace.connect( this, { change: 'updateCheckboxesState' } );
-
 		// Initialization
-		this.$element
-			.addClass( 'mw-widget-namespaceInputWidget' )
-			.append(
-				this.namespace.$element,
-				this.invert ? this.invert.$element : '',
-				this.associated ? this.associated.$element : ''
-			);
-		this.updateCheckboxesState();
+		this.$element.addClass( 'mw-widget-namespaceInputWidget' );
 	};
 
 	/* Setup */
 
-	OO.inheritClass( mw.widgets.NamespaceInputWidget, OO.ui.Widget );
+	OO.inheritClass( mw.widgets.NamespaceInputWidget, OO.ui.DropdownInputWidget );
 
 	/* Methods */
 
 	/**
-	 * Update the disabled state of checkboxes when the value of namespace dropdown changes.
+	 * @private
 	 */
-	mw.widgets.NamespaceInputWidget.prototype.updateCheckboxesState = function () {
-		if ( this.invert ) {
-			this.invert.getField().setDisabled( this.namespace.getValue() === this.allValue );
-		}
-		if ( this.associated ) {
-			this.associated.getField().setDisabled( this.namespace.getValue() === this.allValue );
+	mw.widgets.NamespaceInputWidget.prototype.getNamespaceDropdownOptions = function ( config ) {
+		var options,
+			NS_MAIN = 0;
+
+		options = $.map( mw.config.get( 'wgFormattedNamespaces' ), function ( name, ns ) {
+			if ( ns < NS_MAIN ) {
+				return null; // skip
+			}
+			ns = String( ns );
+			if ( ns === String( NS_MAIN ) ) {
+				name = mw.message( 'blanknamespace' ).text();
+			}
+			return { data: ns, label: name };
+		} ).sort( function ( a, b ) {
+			// wgFormattedNamespaces is an object, and so technically doesn't have to be ordered
+			return a.data - b.data;
+		} );
+
+		if ( config.includeAllValue !== null && config.includeAllValue !== undefined ) {
+			options.unshift( {
+				data: config.includeAllValue,
+				label: mw.message( 'namespacesall' ).text()
+			} );
 		}
+
+		return options;
 	};
 
 }( jQuery, mediaWiki ) );
-- 
2.20.1