History form can be collapsed

A generic way for collapsing forms is added and used
on history.

Bug: T220555
Change-Id: I3073359210bcc25625c9ec07629100130effaed1

diff --git a/includes/actions/HistoryAction.php b/includes/actions/HistoryAction.php
index 06e214f..bc1d351 100644 (file)
--- a/includes/actions/HistoryAction.php
+++ b/includes/actions/HistoryAction.php
@@ -268,6 +268,7 @@ class HistoryAction extends FormlessAction {
                $htmlForm
                        ->setMethod( 'get' )
                        ->setAction( wfScript() )
+                       ->setCollapsible( true )
                        ->setId( 'mw-history-searchform' )
                        ->setSubmitText( $this->msg( 'historyaction-submit' )->text() )
                        ->setWrapperAttributes( [ 'id' => 'mw-history-search' ] )

diff --git a/includes/htmlform/HTMLForm.php b/includes/htmlform/HTMLForm.php
index e5330b6..aeeb934 100644 (file)
--- a/includes/htmlform/HTMLForm.php
+++ b/includes/htmlform/HTMLForm.php
@@ -221,6 +221,20 @@ class HTMLForm extends ContextSource {
         */
        protected $mAction = false;
 
+       /**
+        * Whether the HTML form can be collapsed
+        * @since 1.33
+        * @var bool
+        */
+       protected $mCollapsible = false;
+
+       /**
+        * Whether the HTML form IS collapsed by default
+        * @since 1.33
+        * @var bool
+        */
+       protected $mCollapsed = false;
+
        /**
         * Form attribute autocomplete. A typical value is "off". null does not set the attribute
         * @since 1.27
@@ -1047,6 +1061,18 @@ class HTMLForm extends ContextSource {
                return '' . $this->mPre . $html . $this->mPost;
        }
 
+       /**
+        * Make the form collapsible
+        * @since 1.33
+        * @param bool $collapsed whether it should be by default
+        * @return HTMLForm $this for chaining calls (since 1.20)
+        */
+       public function setCollapsible( $collapsed = false ) {
+               $this->mCollapsible = true;
+               $this->mCollapsed = $collapsed;
+               return $this;
+       }
+
        /**
         * Get HTML attributes for the `<form>` tag.
         * @return array

diff --git a/includes/htmlform/OOUIHTMLForm.php b/includes/htmlform/OOUIHTMLForm.php
index e21d783..22ece4c 100644 (file)
--- a/includes/htmlform/OOUIHTMLForm.php
+++ b/includes/htmlform/OOUIHTMLForm.php
@@ -281,20 +281,30 @@ class OOUIHTMLForm extends HTMLForm {
 
        public function wrapForm( $html ) {
                if ( is_string( $this->mWrapperLegend ) ) {
+                       $classes = $this->mCollapsible ? [ 'mw-collapsible' ] : [];
+                       if ( $this->mCollapsed ) {
+                               $classes[] = 'mw-collapsed';
+                       }
                        $content = new OOUI\FieldsetLayout( [
                                'label' => $this->mWrapperLegend,
-                               'items' => [
-                                       new OOUI\Widget( [
-                                               'content' => new OOUI\HtmlSnippet( $html )
-                                       ] ),
-                               ],
+                               'classes' => $classes,
+                               'group' => new OOUI\StackLayout( [
+                                       'expanded' => false,
+                                       'classes' => [ 'oo-ui-fieldsetLayout-group mw-collapsible-content' ],
+                                       'items' => [
+                                               new OOUI\Widget( [
+                                                       'content' => new OOUI\HtmlSnippet( $html )
+                                               ] ),
+                                       ],
+                               ] ),
                        ] + OOUI\Element::configFromHtmlAttributes( $this->mWrapperAttributes ) );
                } else {
                        $content = new OOUI\HtmlSnippet( $html );
                }
 
+               $classes = [ 'mw-htmlform', 'mw-htmlform-ooui' ];
                $form = new OOUI\FormLayout( $this->getFormAttributes() + [
-                       'classes' => [ 'mw-htmlform', 'mw-htmlform-ooui' ],
+                       'classes' => $classes,
                        'content' => $content,
                ] );
 

diff --git a/resources/Resources.php b/resources/Resources.php
index a63b19b..ba61488 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1435,6 +1435,7 @@ return [
                ],
        ],
        'mediawiki.action.history' => [
+               'dependencies' => [ 'jquery.makeCollapsible' ],
                'scripts' => 'resources/src/mediawiki.action/mediawiki.action.history.js',
                'styles' => 'resources/src/mediawiki.action/mediawiki.action.history.css',
        ],

diff --git a/resources/src/jquery/jquery.makeCollapsible.styles.less b/resources/src/jquery/jquery.makeCollapsible.styles.less
index ec96cb6..0f922c9 100644 (file)
--- a/resources/src/jquery/jquery.makeCollapsible.styles.less
+++ b/resources/src/jquery/jquery.makeCollapsible.styles.less
@@ -124,6 +124,12 @@ li,
        }
 }
 
+fieldset.mw-collapsible .mw-collapsible-toggle {
+       position: absolute;
+       right: 0;
+       z-index: 1;
+}
+
 // special treatment for list items to match above
 // !important necessary to override overly-specific float left and right above.
 ol.mw-collapsible:not( @{exclude} ):before,

diff --git a/resources/src/mediawiki.action/mediawiki.action.history.styles.less b/resources/src/mediawiki.action/mediawiki.action.history.styles.less
index 7e88f7c..257f153 100644 (file)
--- a/resources/src/mediawiki.action/mediawiki.action.history.styles.less
+++ b/resources/src/mediawiki.action/mediawiki.action.history.styles.less
@@ -1,10 +1,4 @@
 /* Basic styles for the history page */
-@import 'mediawiki.mixins';
-
-/* Visually hide repeating text, but leave in for better form navigation on screen readers. */
-.action-history .mw-htmlform-ooui .oo-ui-fieldsetLayout:first-child .oo-ui-fieldsetLayout-header {
-       .mixin-screen-reader-text();
-}
 
 #pagehistory .history-user {
        margin-left: 0.4em;