From 2896e87a1007202f5416fe506c691652b27c4ac9 Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Wed, 27 Mar 2019 17:06:35 -0700
Subject: [PATCH] History form can be collapsed

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

Bug: T220555
Change-Id: I3073359210bcc25625c9ec07629100130effaed1
---
 includes/actions/HistoryAction.php            |  1 +
 includes/htmlform/HTMLForm.php                | 26 +++++++++++++++++++
 includes/htmlform/OOUIHTMLForm.php            | 22 +++++++++++-----
 resources/Resources.php                       |  1 +
 .../jquery/jquery.makeCollapsible.styles.less |  6 +++++
 .../mediawiki.action.history.styles.less      |  6 -----
 6 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/includes/actions/HistoryAction.php b/includes/actions/HistoryAction.php
index 06e214f37e..bc1d351362 100644
--- 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 e5330b6674..aeeb934f93 100644
--- 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 e21d783fcc..22ece4c58e 100644
--- 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 a63b19bf37..ba614880ea 100644
--- 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 ec96cb6fcc..0f922c98ac 100644
--- 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 7e88f7c15f..257f153610 100644
--- 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;
-- 
2.20.1