Merge "ApiSandbox: Move labels outside progress bars"

diff --combined resources/src/mediawiki.special.apisandbox/apisandbox.js
index d31a109,f56c0db..631a5c6
--- 1/resources/src/mediawiki.special.apisandbox/apisandbox.js
--- 2/resources/src/mediawiki.special.apisandbox/apisandbox.js
+++ b/resources/src/mediawiki.special.apisandbox/apisandbox.js
@@@ -724,32 -724,37 +724,32 @@@
                 * @return {OO.ui.MenuOptionWidget[]} Each item's data should be an OO.ui.FieldLayout
                 */
                formatRequest: function ( displayParams, rawParams ) {
 -                      var jsonInput,
 +                      var jsonLayout,
                                items = [
                                        new OO.ui.MenuOptionWidget( {
                                                label: Util.parseMsg( 'apisandbox-request-format-url-label' ),
 -                                              data: new OO.ui.FieldLayout(
 -                                                      new OO.ui.TextInputWidget( {
 -                                                              readOnly: true,
 -                                                              value: mw.util.wikiScript( 'api' ) + '?' + $.param( displayParams )
 -                                                      } ), {
 -                                                              label: Util.parseMsg( 'apisandbox-request-url-label' )
 -                                                      }
 -                                              )
 +                                              data: new mw.widgets.CopyTextLayout( {
 +                                                      label: Util.parseMsg( 'apisandbox-request-url-label' ),
 +                                                      copyText: mw.util.wikiScript( 'api' ) + '?' + $.param( displayParams )
 +                                              } )
                                        } ),
                                        new OO.ui.MenuOptionWidget( {
                                                label: Util.parseMsg( 'apisandbox-request-format-json-label' ),
 -                                              data: new OO.ui.FieldLayout(
 -                                                      jsonInput = new OO.ui.MultilineTextInputWidget( {
 +                                              data: jsonLayout = new mw.widgets.CopyTextLayout( {
 +                                                      label: Util.parseMsg( 'apisandbox-request-json-label' ),
 +                                                      copyText: JSON.stringify( displayParams, null, '\t' ),
 +                                                      multiline: true,
 +                                                      textInput: {
                                                                classes: [ 'mw-apisandbox-textInputCode' ],
 -                                                              readOnly: true,
                                                                autosize: true,
 -                                                              maxRows: 6,
 -                                                              value: JSON.stringify( displayParams, null, '\t' )
 -                                                      } ), {
 -                                                              label: Util.parseMsg( 'apisandbox-request-json-label' )
 +                                                              maxRows: 6
                                                        }
 -                                              ).on( 'toggle', function ( visible ) {
 +                                              } ).on( 'toggle', function ( visible ) {
                                                        if ( visible ) {
                                                                // Call updatePosition instead of adjustSize
                                                                // because the latter has weird caching
                                                                // behavior and the former bypasses it.
 -                                                              jsonInput.updatePosition();
 +                                                              jsonLayout.textInput.updatePosition();
                                                        }
                                                } )
                                        } )
@@@ -1078,12 -1083,11 +1078,11 @@@
                                progressLoading = false;
                                $progressText = $( '<span>' ).text( mw.message( 'apisandbox-sending-request' ).text() );
                                progress = new OO.ui.ProgressBarWidget( {
-                                       progress: false,
-                                       $content: $progressText
+                                       progress: false
                                } );
  
                                $result = $( '<div>' )
-                                       .append( progress.$element );
+                                       .append( $progressText, progress.$element );
  
                                resultPage = page = new OO.ui.PageLayout( '|results|', { expanded: false } );
                                page.setupOutlineItem = function () {
@@@ -1776,10 -1780,12 +1775,12 @@@
                        };
  
                this.$element.empty()
-                       .append( new OO.ui.ProgressBarWidget( {
-                               progress: false,
-                               text: mw.message( 'apisandbox-loading', this.displayText ).text()
-                       } ).$element );
+                       .append(
+                               document.createTextNode(
+                                       mw.message( 'apisandbox-loading', this.displayText ).text()
+                               ),
+                               new OO.ui.ProgressBarWidget( { progress: false } ).$element
+                       );
  
                Util.fetchModuleInfo( this.apiModule )
                        .done( function ( pi ) {