mw.special.apisandbox: Use a real button for "Auto-fill the token"

I've never liked this interface. It is not obvious what the little
triangle does. Let's just use words.

Change-Id: Ica477713adf67a6e1909629eae6b6ee8b35a48f6

diff --git a/languages/i18n/qqq.json b/languages/i18n/qqq.json
index 08038ed..0f7f086 100644 (file)
--- a/languages/i18n/qqq.json
+++ b/languages/i18n/qqq.json
@@ -2250,7 +2250,7 @@
        "apisandbox-dynamic-parameters-add-placeholder": "JavaScript text field placeholder for the widget to add a new arbitrary parameter.",
        "apisandbox-dynamic-error-exists": "Displayed as an error message from JavaScript when trying to add a new arbitrary parameter with a name that already exists. Parameters:\n* $1 - Parameter name that failed.",
        "apisandbox-deprecated-parameters": "JavaScript button label and fieldset legend for separating deprecated parameters in the UI.",
-       "apisandbox-fetch-token": "Tooltop for the button that fetches a CSRF token.",
+       "apisandbox-fetch-token": "Label for the button that fetches a CSRF token.",
        "apisandbox-submit-invalid-fields-title": "Title for a JavaScript error message when fields are invalid.",
        "apisandbox-submit-invalid-fields-message": "Content for a JavaScript error message when fields are invalid.",
        "apisandbox-results": "JavaScript tab label for the tab displaying the API query results.\n{{Identical|Result}}",

diff --git a/resources/src/mediawiki.special/mediawiki.special.apisandbox.css b/resources/src/mediawiki.special/mediawiki.special.apisandbox.css
index 750a567..5f6c6dc 100644 (file)
--- a/resources/src/mediawiki.special/mediawiki.special.apisandbox.css
+++ b/resources/src/mediawiki.special/mediawiki.special.apisandbox.css
@@ -82,10 +82,6 @@
        padding-left: 0.5em;
 }
 
-.oo-ui-textInputWidget.oo-ui-widget-enabled > .oo-ui-indicatorElement-indicator.mw-apisandbox-clickable-indicator {
-       cursor: pointer;
-}
-
 .mw-apisandbox-textInputCode .oo-ui-inputWidget-input {
        font-family: monospace, monospace;
        font-size: 0.8125em;

diff --git a/resources/src/mediawiki.special/mediawiki.special.apisandbox.js b/resources/src/mediawiki.special/mediawiki.special.apisandbox.js
index 7029116..c62685a 100644 (file)
--- a/resources/src/mediawiki.special/mediawiki.special.apisandbox.js
+++ b/resources/src/mediawiki.special/mediawiki.special.apisandbox.js
@@ -335,15 +335,7 @@
 
                                case 'string':
                                case 'user':
-                                       if ( pi.tokentype ) {
-                                               widget = new TextInputWithIndicatorWidget( {
-                                                       input: {
-                                                               indicator: 'previous',
-                                                               indicatorTitle: mw.message( 'apisandbox-fetch-token' ).text(),
-                                                               required: Util.apiBool( pi.required )
-                                                       }
-                                               } );
-                                       } else if ( Util.apiBool( pi.multi ) ) {
+                                       if ( Util.apiBool( pi.multi ) ) {
                                                widget = new OO.ui.CapsuleMultiselectWidget( {
                                                        allowArbitrary: true,
                                                        allowDuplicates: Util.apiBool( pi.allowsduplicates ),
@@ -362,11 +354,9 @@
                                                widget.setValidation( Validators.generic );
                                        }
                                        if ( pi.tokentype ) {
+                                               widget.paramInfo = pi;
+                                               $.extend( widget, WidgetMethods.textInputWidget );
                                                $.extend( widget, WidgetMethods.tokenWidget );
-                                               widget.input.paramInfo = pi;
-                                               $.extend( widget.input, WidgetMethods.textInputWidget );
-                                               $.extend( widget.input, WidgetMethods.tokenWidget );
-                                               widget.on( 'indicator', widget.fetchToken, [], widget );
                                        }
                                        break;
 
@@ -1397,7 +1387,7 @@
 
                Util.fetchModuleInfo( this.apiModule )
                        .done( function ( pi ) {
-                               var prefix, i, j, descriptionContainer, widget, widgetField, helpField, tmp, flag, count,
+                               var prefix, i, j, descriptionContainer, widget, layoutConfig, button, widgetField, helpField, tmp, flag, count,
                                        items = [],
                                        deprecatedItems = [],
                                        buttons = [],
@@ -1622,14 +1612,22 @@
                                                        }
                                                );
 
-                                               widgetField = new OO.ui.FieldLayout(
-                                                       widget,
-                                                       {
-                                                               align: 'left',
-                                                               classes: [ 'mw-apisandbox-widget-field' ],
-                                                               label: prefix + pi.parameters[ i ].name
-                                                       }
-                                               );
+                                               layoutConfig = {
+                                                       align: 'left',
+                                                       classes: [ 'mw-apisandbox-widget-field' ],
+                                                       label: prefix + pi.parameters[ i ].name
+                                               };
+
+                                               if ( pi.parameters[ i ].tokentype ) {
+                                                       button = new OO.ui.ButtonWidget( {
+                                                               label: mw.message( 'apisandbox-fetch-token' ).text()
+                                                       } );
+                                                       button.on( 'click', widget.fetchToken, [], widget );
+
+                                                       widgetField = new OO.ui.ActionFieldLayout( widget, button, layoutConfig );
+                                               } else {
+                                                       widgetField = new OO.ui.FieldLayout( widget, layoutConfig );
+                                               }
 
                                                // We need our own click handler on the widget label to
                                                // turn off the disablement.
@@ -1821,66 +1819,6 @@
                return ret;
        };
 
-       /**
-        * A text input with a clickable indicator
-        *
-        * @class
-        * @private
-        * @constructor
-        * @param {Object} [config] Configuration options
-        */
-       function TextInputWithIndicatorWidget( config ) {
-               var k;
-
-               config = config || {};
-               TextInputWithIndicatorWidget[ 'super' ].call( this, config );
-
-               this.$indicator = $( '<span>' ).addClass( 'mw-apisandbox-clickable-indicator' );
-               OO.ui.mixin.TabIndexedElement.call(
-                       this, $.extend( {}, config, { $tabIndexed: this.$indicator } )
-               );
-
-               this.input = new OO.ui.TextInputWidget( $.extend( {
-                       $indicator: this.$indicator,
-                       disabled: this.isDisabled()
-               }, config.input ) );
-
-               // Forward most methods for convenience
-               for ( k in this.input ) {
-                       if ( $.isFunction( this.input[ k ] ) && !this[ k ] ) {
-                               this[ k ] = this.input[ k ].bind( this.input );
-                       }
-               }
-
-               this.$indicator.on( {
-                       click: this.onIndicatorClick.bind( this ),
-                       keypress: this.onIndicatorKeyPress.bind( this )
-               } );
-
-               this.$element.append( this.input.$element );
-       }
-       OO.inheritClass( TextInputWithIndicatorWidget, OO.ui.Widget );
-       OO.mixinClass( TextInputWithIndicatorWidget, OO.ui.mixin.TabIndexedElement );
-       TextInputWithIndicatorWidget.prototype.onIndicatorClick = function ( e ) {
-               if ( !this.isDisabled() && e.which === 1 ) {
-                       this.emit( 'indicator' );
-               }
-               return false;
-       };
-       TextInputWithIndicatorWidget.prototype.onIndicatorKeyPress = function ( e ) {
-               if ( !this.isDisabled() && ( e.which === OO.ui.Keys.SPACE || e.which === OO.ui.Keys.ENTER ) ) {
-                       this.emit( 'indicator' );
-                       return false;
-               }
-       };
-       TextInputWithIndicatorWidget.prototype.setDisabled = function ( disabled ) {
-               TextInputWithIndicatorWidget[ 'super' ].prototype.setDisabled.call( this, disabled );
-               if ( this.input ) {
-                       this.input.setDisabled( this.isDisabled() );
-               }
-               return this;
-       };
-
        /**
         * A wrapper for a widget that provides an enable/disable button
         *