ApiSandbox: Resize layout to fit content, and remove fullscreen mode

Avoids unpleasant nested scrollbars, and hacky fullscren mode.

Make toolbar position:sticky to keep buttons visible.

Bug: T129157
Change-Id: Ia3c3176c1bd7cac6af2c35f53d820f1272df72a5

diff --git a/languages/i18n/en.json b/languages/i18n/en.json
index a791440..741738a 100644 (file)
--- a/languages/i18n/en.json
+++ b/languages/i18n/en.json
@@ -2066,10 +2066,6 @@
        "apisandbox-jsonly": "JavaScript is required to use the API sandbox.",
        "apisandbox-api-disabled": "The API is disabled on this site.",
        "apisandbox-intro": "Use this page to experiment with the <strong>MediaWiki web service API</strong>.\nRefer to [[mw:API:Main page|the API documentation]] for further details of API usage. Example: [https://www.mediawiki.org/wiki/API#A_simple_example get the content of a Main Page]. Select an action to see more examples.\n\nNote that, although this is a sandbox, actions you carry out on this page may modify the wiki.",
-       "apisandbox-fullscreen": "Expand panel",
-       "apisandbox-fullscreen-tooltip": "Expand the sandbox panel to fill the browser window.",
-       "apisandbox-unfullscreen": "Show page",
-       "apisandbox-unfullscreen-tooltip": "Reduce the sandbox panel, so MediaWiki navigation links are available.",
        "apisandbox-submit": "Make request",
        "apisandbox-reset": "Clear",
        "apisandbox-retry": "Retry",

diff --git a/languages/i18n/qqq.json b/languages/i18n/qqq.json
index cc0fc01..29869a1 100644 (file)
--- a/languages/i18n/qqq.json
+++ b/languages/i18n/qqq.json
@@ -2263,10 +2263,6 @@
        "apisandbox-jsonly": "Displayed as an error message if the browser does not have JavaScript enabled.",
        "apisandbox-api-disabled": "Displayed as an error message if the API is disabled on this site.",
        "apisandbox-intro": "Displayed (from JavaScript) as a header on [[Special:ApiSandbox]].",
-       "apisandbox-fullscreen": "JavaScript button label for enabling full-page mode.\n\nSee https://phabricator.wikimedia.org/T129632#2465838 for details.",
-       "apisandbox-fullscreen-tooltip": "Tooltip for the {{msg-mw|apisandbox-fullscreen}} button.",
-       "apisandbox-unfullscreen": "JavaScript button label for disabling full-page mode.\n\nSee https://phabricator.wikimedia.org/T129632#2465838 for details.",
-       "apisandbox-unfullscreen-tooltip": "Tooltip for the {{msg-mw|apisandbox-unfullscreen}} button.",
        "apisandbox-submit": "JavaScript button label for submitting the request.",
        "apisandbox-reset": "JavaScript button label for clearing the form.\n{{Identical|Clear}}",
        "apisandbox-retry": "JavaScript button label for retrying the submission.\n{{Identical|Retry}}",

diff --git a/resources/Resources.php b/resources/Resources.php
index 3d0165b..d3e1b65 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -2007,10 +2007,6 @@ return [
                        'apisandbox-intro',
                        'apisandbox-submit',
                        'apisandbox-reset',
-                       'apisandbox-fullscreen',
-                       'apisandbox-fullscreen-tooltip',
-                       'apisandbox-unfullscreen',
-                       'apisandbox-unfullscreen-tooltip',
                        'apisandbox-retry',
                        'apisandbox-loading',
                        'apisandbox-load-error',

diff --git a/resources/src/mediawiki.special/mediawiki.special.apisandbox.css b/resources/src/mediawiki.special/mediawiki.special.apisandbox.css
index 60f83ad..fe5ac41 100644 (file)
--- a/resources/src/mediawiki.special/mediawiki.special.apisandbox.css
+++ b/resources/src/mediawiki.special/mediawiki.special.apisandbox.css
@@ -1,10 +1,13 @@
-.mw-apisandbox-fullscreen {
-       overflow: hidden;
-}
-
 .mw-apisandbox-toolbar {
+       background: #fff;
+       -webkit-position: sticky;
+       position: sticky;
+       top: 0;
+       margin-bottom: -1px;
+       padding: 0.5em 0;
+       border-bottom: 1px solid #a2a9b1;
        text-align: right;
-       padding: 0.5em;
+       z-index: 1;
 }
 
 #mw-apisandbox-ui .mw-apisandbox-link {
@@ -35,20 +38,6 @@
        width: 1%;
 }
 
-.mw-apisandbox-fullscreen #mw-apisandbox-ui {
-       position: fixed;
-       top: 0;
-       left: 0;
-       bottom: 0;
-       right: 0;
-       background: #fff;
-}
-
-.mw-apisandbox-fullscreen .mw-apisandbox-container {
-       border-width: 1px 0 0 0;
-       border-radius: 0;
-}
-
 .mw-apisandbox-spacer {
        display: inline-block;
        height: 1px;

diff --git a/resources/src/mediawiki.special/mediawiki.special.apisandbox.js b/resources/src/mediawiki.special/mediawiki.special.apisandbox.js
index 009f47b..523a62e 100644 (file)
--- a/resources/src/mediawiki.special/mediawiki.special.apisandbox.js
+++ b/resources/src/mediawiki.special/mediawiki.special.apisandbox.js
@@ -1,7 +1,7 @@
 ( function ( $, mw, OO ) {
        'use strict';
        var ApiSandbox, Util, WidgetMethods, Validators,
-               $content, panel, booklet, oldhash, windowManager, fullscreenButton,
+               $content, panel, booklet, oldhash, windowManager,
                formatDropdown,
                api = new mw.Api(),
                bookletPages = [],
@@ -774,8 +774,6 @@
                init: function () {
                        var $toolbar;
 
-                       ApiSandbox.isFullscreen = false;
-
                        $content = $( '#mw-apisandbox' );
 
                        windowManager = new OO.ui.WindowManager();
@@ -784,15 +782,9 @@
                                errorAlert: new OO.ui.MessageDialog()
                        } );
 
-                       fullscreenButton = new OO.ui.ButtonWidget( {
-                               label: mw.message( 'apisandbox-fullscreen' ).text(),
-                               title: mw.message( 'apisandbox-fullscreen-tooltip' ).text()
-                       } ).on( 'click', ApiSandbox.toggleFullscreen );
-
                        $toolbar = $( '<div>' )
                                .addClass( 'mw-apisandbox-toolbar' )
                                .append(
-                                       fullscreenButton.$element,
                                        new OO.ui.ButtonWidget( {
                                                label: mw.message( 'apisandbox-submit' ).text(),
                                                flags: [ 'primary', 'progressive' ]
@@ -804,6 +796,7 @@
                                );
 
                        booklet = new OO.ui.BookletLayout( {
+                               expanded: false,
                                outlined: true,
                                autoFocus: false
                        } );
@@ -832,52 +825,6 @@
                                                .append( $toolbar )
                                                .append( panel.$element )
                                );
-
-                       $( window ).on( 'resize', ApiSandbox.resizePanel );
-
-                       ApiSandbox.resizePanel();
-               },
-
-               /**
-                * Toggle "fullscreen" mode
-                */
-               toggleFullscreen: function () {
-                       var $body = $( document.body ),
-                               $ui = $( '#mw-apisandbox-ui' );
-
-                       ApiSandbox.isFullscreen = !ApiSandbox.isFullscreen;
-
-                       $body.toggleClass( 'mw-apisandbox-fullscreen', ApiSandbox.isFullscreen );
-                       $ui.toggleClass( 'mw-body-content', ApiSandbox.isFullscreen );
-                       if ( ApiSandbox.isFullscreen ) {
-                               fullscreenButton.setLabel( mw.message( 'apisandbox-unfullscreen' ).text() );
-                               fullscreenButton.setTitle( mw.message( 'apisandbox-unfullscreen-tooltip' ).text() );
-                               OO.ui.getDefaultOverlay().prepend( $ui );
-                       } else {
-                               fullscreenButton.setLabel( mw.message( 'apisandbox-fullscreen' ).text() );
-                               fullscreenButton.setTitle( mw.message( 'apisandbox-fullscreen-tooltip' ).text() );
-                               $content.append( $ui );
-                       }
-                       ApiSandbox.resizePanel();
-               },
-
-               /**
-                * Set the height of the panel based on the current viewport.
-                */
-               resizePanel: function () {
-                       var height = $( window ).height(),
-                               contentTop = $content.offset().top;
-
-                       if ( ApiSandbox.isFullscreen ) {
-                               height -= panel.$element.offset().top - $( '#mw-apisandbox-ui' ).offset().top;
-                               panel.$element.height( height - 1 );
-                       } else {
-                               // Subtract the height of the intro text
-                               height -= panel.$element.offset().top - contentTop;
-
-                               panel.$element.height( height - 10 );
-                               $( window ).scrollTop( contentTop - 5 );
-                       }
                },
 
                /**
@@ -1123,7 +1070,7 @@
                                $result = $( '<div>' )
                                        .append( progress.$element );
 
-                               resultPage = page = new OO.ui.PageLayout( '|results|' );
+                               resultPage = page = new OO.ui.PageLayout( '|results|', { expanded: false } );
                                page.setupOutlineItem = function () {
                                        this.outlineItem.setLabel( mw.message( 'apisandbox-results' ).text() );
                                };
@@ -1375,7 +1322,7 @@
         * @param {Object} [config] Configuration options
         */
        ApiSandbox.PageLayout = function ( config ) {
-               config = $.extend( { prefix: '' }, config );
+               config = $.extend( { prefix: '', expanded: false }, config );
                this.displayText = config.key;
                this.apiModule = config.path;
                this.prefix = config.prefix;