Limit the number of initially visible parameters in the parameter search widget

* Truncate beyond 3 parameters
* Add a special option class that, when clicked, shows the remaining parameters
* Use a special option class for the no parameters item instead of hacking the normal one
* Simplify the design of the no parameters item: no icon, centered text

Change-Id: Ia8259e91b42a59c2b08019df36217d485208ad99

VisualEditor.php

@@ -993,6 +993,8 @@ $wgResourceModules += array(
 
 			'modules/ve-mw/ui/widgets/ve.ui.MWParameterSearchWidget.js',
 			'modules/ve-mw/ui/widgets/ve.ui.MWParameterResultWidget.js',
+			'modules/ve-mw/ui/widgets/ve.ui.MWMoreParametersResultWidget.js',
+			'modules/ve-mw/ui/widgets/ve.ui.MWNoParametersResultWidget.js',
 
 			'modules/ve-mw/ui/pages/ve.ui.MWTemplatePage.js',
 			'modules/ve-mw/ui/pages/ve.ui.MWParameterPage.js',
@@ -1008,6 +1010,8 @@ $wgResourceModules += array(
 			'modules/ve-mw/ce/styles/ve.ce.MWTransclusionNode.css',
 			'modules/ve-mw/ui/styles/ve.ui.MWParameterPage.css',
 			'modules/ve-mw/ui/styles/ve.ui.MWParameterResultWidget.css',
+			'modules/ve-mw/ui/styles/ve.ui.MWMoreParametersResultWidget.css',
+			'modules/ve-mw/ui/styles/ve.ui.MWNoParametersResultWidget.css',
 			'modules/ve-mw/ui/styles/ve.ui.MWParameterSearchWidget.css',
 			'modules/ve-mw/ui/styles/ve.ui.MWTransclusionContentPage.css',
 			'modules/ve-mw/ui/styles/ve.ui.MWTransclusionDialog.css',
@@ -1039,6 +1043,7 @@ $wgResourceModules += array(
 			'visualeditor-dialogbutton-template-tooltip',
 			'visualeditor-dialogbutton-transclusion-tooltip',
 			'visualeditor-parameter-input-placeholder',
+			'visualeditor-parameter-search-more',
 			'visualeditor-parameter-search-no-unused',
 			'visualeditor-parameter-search-unknown',
 		),

modules/ve-mw/i18n/en.json

@@ -179,6 +179,7 @@
     "visualeditor-pagemenu-tooltip": "Page options",
     "visualeditor-pagetranslationwarning": "You are editing a translatable page. Editing these in VisualEditor is not yet officially supported.",
     "visualeditor-parameter-input-placeholder": "Parameter name",
+    "visualeditor-parameter-search-more": "Show $1 other {{PLURAL:$1|parameter|parameters}}",
     "visualeditor-parameter-search-no-unused": "No unused parameters",
     "visualeditor-parameter-search-unknown": "Unknown parameter",
     "visualeditor-preference-betatempdisable": "Temporarily disable VisualEditor while it is in beta",

modules/ve-mw/i18n/qqq.json

@@ -184,6 +184,7 @@
     "visualeditor-pagemenu-tooltip": "Tooltip text for the page menu which has the following items:\n* {{msg-mw|visualeditor-meta-tool}}\n* {{msg-mw|visualeditor-settings-tool}}\n* {{msg-mw|visualeditor-advancedsettings-tool}}\n* {{msg-mw|visualeditor-categories-tool}}\n* {{msg-mw|visualeditor-languages-tool}}\n* {{msg-mw|visualeditor-mweditmodesource-title}}\n* {{msg-mw|visualeditor-dialog-command-help-title}}",
     "visualeditor-pagetranslationwarning": "Edit notice shown when VisualEditor loads, warning users editing a translated page that it is not officially supported.",
     "visualeditor-parameter-input-placeholder": "Placeholder text label for an input for adding a parameter to a template.\n{{Identical|Parameter name}}",
+    "visualeditor-parameter-search-more": "Label for item in parameter list that, when clicked, reveals additional parameters that had been truncated to save space",
     "visualeditor-parameter-search-no-unused": "Message displayed in the transclusion dialog when no known parameters are unused by this template.",
     "visualeditor-parameter-search-unknown": "{{Identical|Unknown parameter}}",
     "visualeditor-preference-betatempdisable": "Label for the temporary user preference to disable VisualEditor while it is in beta.",

modules/ve-mw/ui/styles/ve.ui.MWMoreParametersResultWidget.css

@@ -0,0 +1,25 @@
+/*!
+ * VisualEditor MediaWiki UserInterface MWMoreParametersResultWidget styles.
+ *
+ * @copyright 2011-2014 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+.ve-ui-mwMoreParametersResultWidget {
+	padding-right: 0.25em;
+}
+
+.ve-ui-mwMoreParametersResultWidget .oo-ui-optionWidget-icon {
+	top: 0.25em;
+	margin-top: 0;
+}
+
+.ve-ui-mwMoreParametersResultWidget-label {
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	/* HACK: Based on the expected width of this widget, using % produces unreliable results*/
+	max-width: 33em;
+	font-weight: bold;
+	float: left;
+}

modules/ve-mw/ui/styles/ve.ui.MWNoParametersResultWidget.css

@@ -0,0 +1,17 @@
+/*!
+ * VisualEditor MediaWiki UserInterface MWNoParametersResultWidget styles.
+ *
+ * @copyright 2011-2014 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+.ve-ui-mwNoParametersResultWidget.oo-ui-widget-disabled {
+	opacity: 0.5;
+}
+
+.ve-ui-mwNoParametersResultWidget-label {
+	text-align: center;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}

modules/ve-mw/ui/styles/ve.ui.MWParameterResultWidget.css

@@ -14,10 +14,6 @@
 	margin-top: 0;
 }
 
-.ve-ui-mwParameterResultWidget.oo-ui-widget-disabled {
-	opacity: 0.5;
-}
-
 .ve-ui-mwParameterResultWidget-label,
 .ve-ui-mwParameterResultWidget-names,
 .ve-ui-mwParameterResultWidget-description {
@@ -43,14 +39,14 @@
 	padding: 0.125em 0.25em;
 	margin-left: 0.5em;
 	color: #999;
-	background-color: #fff;
+	background-color: #eee;
 	border: solid 1px #ddd;
 }
 
-.ve-ui-mwParameterResultWidget-names span:not(:first-child) {
+.ve-ui-mwParameterResultWidget-name:first-child {
-	background-color: #eee;
+	background-color: #fff;
 }
 
 .ve-ui-mwParameterResultWidget-description {
 	clear: both;
-}
+}

modules/ve-mw/ui/widgets/ve.ui.MWMoreParametersResultWidget.js

@@ -0,0 +1,42 @@
+/*!
+ * VisualEditor UserInterface MWMoreParametersResultWidget class.
+ *
+ * @copyright 2011-2014 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/**
+ * Creates an ve.ui.MWMoreParametersResultWidget object.
+ *
+ * @class
+ * @extends OO.ui.OptionWidget
+ *
+ * @constructor
+ * @param {Mixed} data Item data
+ * @param {number} [data.remainder] Remaining items that can be shown
+ * @param {Object} [config] Configuration options
+ */
+ve.ui.MWMoreParametersResultWidget = function VeUiMWMoreParametersResultWidget( data, config ) {
+	// Configuration initialization
+	config = ve.extendObject( { 'icon': 'parameter-set' }, config );
+
+	// Parent constructor
+	OO.ui.OptionWidget.call( this, data, config );
+
+	// Initialization
+	this.$element.addClass( 've-ui-mwMoreParametersResultWidget' );
+	this.setLabel( this.buildLabel() );
+};
+
+/* Inheritance */
+
+OO.inheritClass( ve.ui.MWMoreParametersResultWidget, OO.ui.OptionWidget );
+
+/* Methods */
+
+/** */
+ve.ui.MWMoreParametersResultWidget.prototype.buildLabel = function () {
+	return this.$( '<div>' )
+		.addClass( 've-ui-mwMoreParametersResultWidget-label' )
+		.text( ve.msg( 'visualeditor-parameter-search-more', this.data.remainder ) );
+};

modules/ve-mw/ui/widgets/ve.ui.MWNoParametersResultWidget.js

@@ -0,0 +1,38 @@
+/*!
+ * VisualEditor UserInterface MWNoParametersResultWidget class.
+ *
+ * @copyright 2011-2014 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/**
+ * Creates an ve.ui.MWNoParametersResultWidget object.
+ *
+ * @class
+ * @extends OO.ui.OptionWidget
+ *
+ * @constructor
+ * @param {Mixed} data Item data
+ * @param {Object} [config] Configuration options
+ */
+ve.ui.MWNoParametersResultWidget = function VeUiMWNoParametersResultWidget( data, config ) {
+	// Parent constructor
+	OO.ui.OptionWidget.call( this, data, config );
+
+	// Initialization
+	this.$element.addClass( 've-ui-mwNoParametersResultWidget' );
+	this.setLabel( this.buildLabel() );
+};
+
+/* Inheritance */
+
+OO.inheritClass( ve.ui.MWNoParametersResultWidget, OO.ui.OptionWidget );
+
+/* Methods */
+
+/** */
+ve.ui.MWNoParametersResultWidget.prototype.buildLabel = function () {
+	return this.$( '<div>' )
+		.addClass( 've-ui-mwNoParametersResultWidget-label' )
+		.text( ve.msg( 'visualeditor-parameter-search-no-unused' ) );
+};

modules/ve-mw/ui/widgets/ve.ui.MWParameterSearchWidget.js

@@ -13,11 +13,13 @@
  *
  * @constructor
  * @param {Object} [config] Configuration options
+ * @cfg {number|null} [limit=3] Limit on the number of initial options to show, null to show all
  */
 ve.ui.MWParameterSearchWidget = function VeUiMWParameterSearchWidget( template, config ) {
 	// Configuration intialization
 	config = ve.extendObject( {
-		'placeholder': ve.msg( 'visualeditor-parameter-input-placeholder' )
+		'placeholder': ve.msg( 'visualeditor-parameter-input-placeholder' ),
+		'limit': 3
 	}, config );
 
 	// Parent constructor
@@ -26,6 +28,8 @@ ve.ui.MWParameterSearchWidget = function VeUiMWParameterSearchWidget( template,
 	// Properties
 	this.template = template;
 	this.index = [];
+	this.showAll = false;
+	this.limit = config.limit || null;
 
 	// Events
 	this.template.connect( this, { 'add': 'buildIndex', 'remove': 'buildIndex' } );
@@ -70,7 +74,12 @@ ve.ui.MWParameterSearchWidget.prototype.onQueryChange = function () {
  * @fires select
  */
 ve.ui.MWParameterSearchWidget.prototype.onResultsSelect = function ( item ) {
-	this.emit( 'select', item && item.getData() ? item.getData().name : null );
+	if ( item instanceof ve.ui.MWParameterResultWidget ) {
+		this.emit( 'select', item.getData().name );
+	} else if ( item instanceof ve.ui.MWMoreParametersResultWidget ) {
+		this.showAll = true;
+		this.addResults();
+	}
 };
 
 /**
@@ -117,25 +126,34 @@ ve.ui.MWParameterSearchWidget.prototype.buildIndex = function () {
  * @method
  */
 ve.ui.MWParameterSearchWidget.prototype.addResults = function () {
-	var i, len, item, textMatch, nameMatch,
+	var i, len, item, textMatch, nameMatch, remainder,
 		exactMatch = false,
 		value = this.query.getValue().trim().replace( /[\|\{\}]/g, '' ),
 		query = value.toLowerCase(),
+		hasQuery = !!query.length,
 		items = [];
 
+	this.results.clearItems();
+
 	for ( i = 0, len = this.index.length; i < len; i++ ) {
 		item = this.index[i];
-		textMatch = item.text.indexOf( query ) >= 0;
+		if ( hasQuery ) {
-		nameMatch = item.names.indexOf( query ) >= 0;
+			textMatch = item.text.indexOf( query ) >= 0;
-		if ( textMatch || nameMatch ) {
+			nameMatch = item.names.indexOf( query ) >= 0;
+		}
+		if ( !hasQuery || textMatch || nameMatch ) {
 			items.push( new ve.ui.MWParameterResultWidget( item, { '$': this.$ } ) );
-			if ( nameMatch ) {
+			if ( hasQuery && nameMatch ) {
 				exactMatch = true;
 			}
 		}
+		if ( !hasQuery && !this.showAll && items.length >= this.limit ) {
+			remainder = len - i;
+			break;
+		}
 	}
 
-	if ( !exactMatch && value.length && !this.template.hasParameter( value ) ) {
+	if ( hasQuery && !exactMatch && value.length && !this.template.hasParameter( value ) ) {
 		items.unshift( new ve.ui.MWParameterResultWidget( {
 			'name': value,
 			'label': value,
@@ -145,14 +163,12 @@ ve.ui.MWParameterSearchWidget.prototype.addResults = function () {
 	}
 
 	if ( !items.length ) {
-		items.push( new ve.ui.MWParameterResultWidget(
+		items.push( new ve.ui.MWNoParametersResultWidget(
-			{
+			{}, { '$': this.$, 'disabled': true }
-				'name': null,
+		) );
-				'label': '',
+	} else if ( remainder ) {
-				'aliases': [],
+		items.push( new ve.ui.MWMoreParametersResultWidget(
-				'description': ve.msg( 'visualeditor-parameter-search-no-unused' )
+			{ 'remainder': remainder }, { '$': this.$ }
-			},
-			{ '$': this.$, 'disabled': true }
 		) );
 	}