Mobile preferences: Use a OO.ui.ProcessDialog

Remove custom code and styling around setting up the
header and footer.

Bug: T328791
Change-Id: I1765bf28907c5a77b28223648687e0f81687b8a4

6 files changed, 40 insertions, 55 deletions

diff --git a/includes/specials/forms/PreferencesFormOOUI.php b/includes/specials/forms/PreferencesFormOOUI.php
index 219d9c4ca89b..b6483f74ff66 100644
--- a/includes/specials/forms/PreferencesFormOOUI.php
+++ b/includes/specials/forms/PreferencesFormOOUI.php
@@ -287,15 +287,6 @@ class PreferencesFormOOUI extends OOUIHTMLForm {
 				'id' => 'mw-mobile-prefs-' . $key . '-head'
 			] );
 			$contentHeader->addClasses( [ 'mw-prefs-content-head' ] );
-			$contentHeaderBackButton = new OOUI\IconWidget( [
-				'icon' => 'close',
-				'label' => $this->msg( "prefs-back-label" ),
-				'title' => $this->msg( "prefs-back-title" ),
-				'classes' => [ 'mw-prefs-header-icon', 'mw-ui-icon' ],
-			] );
-			$contentHeaderBackButton->setAttributes( [
-				'id' => 'mw-mobile-prefs-' . $key . '-back-button',
-			] );
 			$contentHeaderTitle = ( new OOUI\Tag( 'h5' ) )->setAttributes( [
 				'id' => 'mw-mobile-prefs-' . $key . '-title',
 			] );
@@ -304,7 +295,6 @@ class PreferencesFormOOUI extends OOUIHTMLForm {
 				'content' => new OOUI\HtmlSnippet( $content )
 			] );
 			$hiddenForm = ( new OOUI\Tag( 'div' ) )->appendContent( $formContent );
-			$contentHeader->appendContent( $contentHeaderBackButton );
 			$contentHeader->appendContent( $contentHeaderTitle );
 			$contentDiv->appendContent( $contentHeader );
 			$contentDiv->appendContent( $hiddenForm );
diff --git a/languages/i18n/en.json b/languages/i18n/en.json
index 31cb177b2b96..f6a6622db6da 100644
--- a/languages/i18n/en.json
+++ b/languages/i18n/en.json
@@ -1114,7 +1114,6 @@
 	"recentchangesdays": "Days to show in recent changes:",
 	"recentchangesdays-max": "Maximum $1 {{PLURAL:$1|day|days}}",
 	"recentchangescount": "Number of edits to show in recent changes, page histories, and in logs, by default:",
-	"prefs-back-label": "Back",
 	"prefs-back-title": "Back to preferences",
 	"prefs-description-personal": "Control how you appear, connect, and communicate.",
 	"prefs-description-rendering": "Configure skin, size, and reading options.",
diff --git a/languages/i18n/qqq.json b/languages/i18n/qqq.json
index 650ea1883a65..248e498c2585 100644
--- a/languages/i18n/qqq.json
+++ b/languages/i18n/qqq.json
@@ -1360,7 +1360,6 @@
 	"recentchangesdays": "Used in [[Special:Preferences]], tab \"Recent changes\".",
 	"recentchangesdays-max": "Shown as hint in [[Special:Preferences]], tab \"Recent changes\". Parameters:\n* $1 - number of days\nSee also:\n* {{msg-mw|Prefs-watchlist-days-max}}",
 	"recentchangescount": "Used in [[Special:Preferences]], tab \"Recent changes\".",
-	"prefs-back-label": "Used in [[Special:Preferences]] as a label for a back button",
 	"prefs-back-title": "Used in [[Special:Preferences]] as the title for a back button",
 	"prefs-description-personal": "Used in [[Special:Preferences]] for mobile to describe the User Profile section.",
 	"prefs-description-rendering": "Used in [[Special:Preferences]] for mobile to describe the Appearance section.",
diff --git a/resources/Resources.php b/resources/Resources.php
index 5670e875f01f..cd31bc0bd34b 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -2309,6 +2309,7 @@ return [
 		'messages' => [
 			'prefs-tabs-navigation-hint',
 			'prefs-signature-highlight-error',
+			'prefs-back-title',
 		],
 		'dependencies' => [
 			'mediawiki.language',
diff --git a/resources/src/mediawiki.special.preferences.ooui/mobile.js b/resources/src/mediawiki.special.preferences.ooui/mobile.js
index 2739cd6aa00f..748c1043af28 100644
--- a/resources/src/mediawiki.special.preferences.ooui/mobile.js
+++ b/resources/src/mediawiki.special.preferences.ooui/mobile.js
@@ -47,24 +47,36 @@
 	/*
 	 * Configure and register a dialog for a pref section
 	 */
-	function sectionDialog( sectionId, sectionHead, sectionBody ) {
+	function createSectionDialog( sectionId, sectionTitle, sectionBody ) {
 		function PrefDialog() {
 			var conf = { classes: [ 'overlay-content', 'mw-mobile-pref-window' ] };
 			PrefDialog.super.call( this, conf );
 		}
-		OO.inheritClass( PrefDialog, OO.ui.Dialog );
+
+		OO.inheritClass( PrefDialog, OO.ui.ProcessDialog );
 		PrefDialog.static.name = sectionId;
 		PrefDialog.static.escapable = true;
 		PrefDialog.static.size = 'larger';
+		PrefDialog.static.title = sectionTitle;
+		PrefDialog.static.actions = [
+			{ action: 'cancel', label: mw.msg( 'prefs-back-title' ), flags: [ 'safe', 'close' ] }
+		];
 		PrefDialog.prototype.initialize = function () {
 			insertToggles( sectionBody.querySelectorAll( 'span.oo-ui-checkboxInputWidget' ) );
 			this.name = sectionId;
 			PrefDialog.super.prototype.initialize.call( this );
-			this.$head.append( sectionHead );
-			this.$head[ 0 ].classList.add( 'mw-mobile-pref-dialog-head' );
 			this.$body.append( sectionBody );
 			this.content = new OO.ui.PanelLayout( { padded: true, expanded: true } );
-			this.$body[ 0 ].classList.add( 'mw-mobile-pref-dialog-body' );
+			this.$body.addClass( 'mw-mobile-pref-dialog-body' );
+		};
+		PrefDialog.prototype.getActionProcess = function ( action ) {
+			var dialog = this;
+			if ( action ) {
+				return new OO.ui.Process( function () {
+					dialog.close( { action: action } );
+				} );
+			}
+			return PrefDialog.super.prototype.getActionProcess.call( this, action );
 		};
 
 		dialogFactory.register( PrefDialog );
@@ -97,14 +109,11 @@
 		Array.prototype.forEach.call( sections, function ( section ) {
 			var sectionContent = document.getElementById( section.id + '-content' );
 			var sectionBody = sectionContent.querySelector( 'div > div.oo-ui-widget' );
-			var sectionHead = document.getElementById( section.id + '-head' );
-			document.getElementById( section.id + '-back-button' ).addEventListener( 'click', function () {
-				windowManager.closeWindow( section.id );
-			} );
+			var sectionTitle = document.getElementById( section.id + '-title' ).textContent;
 			document.getElementById( section.id ).addEventListener( 'click', function () {
 				setSection( section.id );
 			} );
-			sectionDialog( section.id, sectionHead, sectionBody );
+			createSectionDialog( section.id, sectionTitle, sectionBody );
 		} );
 	}
 	// DOM-dependant code
diff --git a/resources/src/mediawiki.special.preferences.styles.ooui.less b/resources/src/mediawiki.special.preferences.styles.ooui.less
index b495c2f5191a..06652bebe16d 100644
--- a/resources/src/mediawiki.special.preferences.styles.ooui.less
+++ b/resources/src/mediawiki.special.preferences.styles.ooui.less
@@ -26,26 +26,32 @@
 .mw-email-authenticated .oo-ui-labelWidget { }
 */
 
-/*
- * Use `position: sticky` on supported browsers, degrades gracefully in
- * all others, therefore no `@supports` feature query to reduce code complexity.
- */
+// Mobile footer buttons
 .mw-prefs-buttons {
-	.position-sticky();
-	bottom: 0;
-	margin-top: -1px;
-	background-color: #fff;
-	border-top: 1px solid #c8ccd1;
-	padding: 1em 0;
-	// Add top box shadow on top only to emphasize content is scrollable underneath `sticky`.
-	box-shadow: 0 -4px 4px -4px rgba( 0, 0, 0, 0.25 );
+	padding: 16px 0;
 }
 
-// Support Edge: The `position: sticky` rule above causes the buttons to
-// disappear in RTL languages on Microsoft Edge. This magically fixes the issue. See T220706.
+// Non-dialog styling for mobile footer buttons
 #preferences {
+	// Support Edge: The `position: sticky` rule above causes the buttons to
+	// disappear in RTL languages on Microsoft Edge. This magically fixes the issue. See T220706.
 	/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 	filter: brightness( 1 );
+
+	/*
+	 * Use `position: sticky` on supported browsers, degrades gracefully in
+	 * all others, therefore no `@supports` feature query to reduce code complexity.
+	 */
+	> .mw-prefs-buttons {
+		.position-sticky();
+		bottom: 0;
+		margin: -1px -16px 0 -16px;
+		padding: 16px;
+		background-color: #fff;
+		border-top: 1px solid #c8ccd1;
+		// Add top box shadow on top only to emphasize content is scrollable underneath `sticky`.
+		box-shadow: 0 -4px 4px -4px rgba( 0, 0, 0, 0.25 );
+	}
 }
 
 /* This is needed because add extra buttons in a weird way */
@@ -264,26 +270,7 @@ with params ?useskin=vector&useformat=mobile
 	max-height: 100% !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.oo-ui-window-head.mw-mobile-pref-dialog-head {
-	width: 100%;
-	height: 3em;
-	display: flex;
-	align-items: center;
-	border-bottom: 1px solid @colorGray12;
-	box-shadow: 0 0.25em 0.125em -0.1875em rgba( 0, 0, 0, 0.25 );
-	position: fixed;
-	background: #fff;
-}
-
-.oo-ui-window-head.mw-mobile-pref-dialog-head > div > h5.mw-prefs-header-title {
-	font-size: 1em;
-	font-weight: bold;
-	line-height: 1.25em;
-}
-
 .oo-ui-window-body.mw-mobile-pref-dialog-body {
-	margin-right: 5px;
-	margin-top: 49px;
 	padding-bottom: 66px;
 }