Change 863394 had a related patch set uploaded (by Jsn.sherman; author: Jsn.sherman):

[mediawiki/core@master] WIP: Optimize mobile prefs modals

https://gerrit.wikimedia.org/r/863394

update: I think this is ready for us to talk about in engineering.

When I started going over this with a fine-tooth comb, I realized that we were not fully leveraging OOUI. I think I've arrived at at a pretty good optimization that takes full advantage of the OOUI that we're already paying the cost for calling while trimming down everything else.

I have not taken the time to carefully curate the patchsets (nor add as many educational comments) as I did with my previous optimization patch, because that took a whole lot of time to do. It might be more valuable for our team to just go through the changes synchronously.

I don't believe I've created any regressions here, though we should definitely QA it because I cut some CSS that I didn't *think* was needed, but wasn't sure about, eg.

.oo-ui-window-body > #preferences {
    position: sticky;
    bottom: 0;
}

performance-wise: I made a function to encapsulate the work done to make the sections clickable. This is work that has to be done before the user can do anything with the form:

original initDialogs: 16.32ms

optimized initDialogs: 0.77ms

I did not actually upload a patch for moving the original code to a named function, so I'll just paste that mobile.js code here to make the baseline clear:

/*!
 * JavaScript for Special:Preferences: mobileLayout.
 */
( function () {
	/*
	 * Adds a ToggleSwitchWidget to control each checkboxWidget
	 * Hides each checkboxWidget
	 */
	function insertToggles() {
		var checkboxes = document.querySelectorAll( 'span.oo-ui-checkboxInputWidget' );
		Array.prototype.forEach.call( checkboxes, function ( checkboxWidget ) {
			var checkboxInput = checkboxWidget.querySelector( 'input' );
			var toggleSwitchWidget = new OO.ui.ToggleSwitchWidget( {
				value: checkboxInput.checked,
				disabled: checkboxInput.disabled
			} );
			toggleSwitchWidget.on( 'change', function ( value ) {
				toggleSwitchWidget.setValue( value );
				checkboxInput.checked = value;
			} );
			checkboxWidget.insertAdjacentElement( 'afterend', toggleSwitchWidget.$element[ 0 ] );
			checkboxWidget.classList.add( 'hidden' );
		} );
	}
	$( function () {
		insertToggles();
		function initDialogs() {
			var options, windowManager, preferencesForm, prefOptionsContainer, prefContent, prefFormWrapper;
			options = OO.ui.infuse( document.querySelector( '.mw-mobile-preferences-container' ) );
			windowManager = new OO.ui.WindowManager();
			preferencesForm = document.querySelector( '#mw-prefs-form' );
			prefOptionsContainer = document.querySelector( '#mw-prefs-container' );
			prefFormWrapper = document.querySelector( '.mw-htmlform-ooui-wrapper' );

			function showContent( element ) {
				prefContent = document.querySelector( '#' + element.elementId + '-content' );
				prefContent.classList.remove( 'mw-prefs-hidden' );
				prefOptionsContainer.classList.add( 'mw-prefs-hidden' );
				prefOptionsContainer.removeAttribute( 'style' );
				preferencesForm.insertBefore( prefContent, preferencesForm.firstChild );

				function PrefDialog( config ) {
					PrefDialog.super.call( this, config );
				}

				OO.inheritClass( PrefDialog, OO.ui.Dialog );
				PrefDialog.static.name = element.elementId;
				PrefDialog.static.escapable = false;
				PrefDialog.prototype.initialize = function () {
					PrefDialog.super.prototype.initialize.call( this );
					this.content = new OO.ui.PanelLayout( { padded: true, expanded: true } );
					this.$body.append( preferencesForm );
				};

				PrefDialog.prototype.getBodyHeight = function () {
					return this.content.$element.outerHeight( true );
				};

				var prefDialog = new PrefDialog( { size: 'full' } );

				$( document.body ).append( windowManager.$element );
				windowManager.addWindows( [ prefDialog ] );
				windowManager.openWindow( prefDialog );

				if ( prefDialog.isOpening() ) {
					document.querySelector( '#mw-mf-viewport' ).classList.add( 'hidden' );
				}
			}

			options.items.forEach( function ( element ) {
				document.querySelector( '#' + element.elementId ).addEventListener( 'click', function () {
					showContent( element );
				} );

				var backButtonId = '#' + element.elementId + '-back-button';
				document.querySelector( backButtonId ).addEventListener( 'click', function () {
					prefContent.classList.add( 'mw-prefs-hidden' );
					prefOptionsContainer.classList.remove( 'mw-prefs-hidden' );
					prefFormWrapper.insertBefore( preferencesForm, prefFormWrapper.firstChild );
					document.querySelector( '#mw-mf-viewport' ).classList.remove( 'hidden' );
					windowManager.currentWindow.close();
				} );
			} );
		}
		initDialogs();
	} );
}() );

Test wiki created on Patch demo by JSherman (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/28cc8ff4b7/w

Test wiki created on Patch demo by JSherman (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/2c4097ba54/w

Just to follow up on a performance improvement that I failed to mention:
although the function run time is improved by a numerically significant (~21x) but imperceptible amount (~15.5ms), the total blocking time on the page offers a genuine improvement:

• original TBT: 3607.35ms
• optimized TBT: 955.20ms

Out of curiosity, I went and measured production en, which still didn't have the modals at time of measurement
TBT: 1010.70

Okay, I've gone ahead and implemented much of the design spec from T317110 where it was straightforward to do with CSS.
I also got some feedback from @Jdlrobson that using the close icon would be more consistent with other features. This actually makes a lot of sense for a modal dialog, so I went rogue and made the change. The spec wasn't explicit about the heading dimensions, so I made them match other areas more closely, eg.
https://en.m.wikipedia.beta.wmflabs.org/wiki/Main_Page#/languages

I adjusted things to keep the spacing between the dialog body and dialog head within spec.

Test wiki created on Patch demo by JSherman (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/e95758bde8/w

Test wiki created on Patch demo by JSherman (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/caede4ccd7/w

Ready for QA
Direct link to patchdemo for mobile preferences:
https://patchdemo.wmflabs.org/wikis/caede4ccd7/w/index.php?title=Special:Preferences&mobileaction=toggle_view_mobile

Test wiki created on Patch demo by JSherman (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/8f0898c995/w

This is looking great, thank you for addressing some of the submenu design elements @jsn.sherman!

I encountered a bug with the checkboxes, where they showed up alongside or instead of the toggles:

Unfortunately I can't figure out how to reproduce this at the moment. It happened after I saved a change to pronouns in the section above and navigated back to User Profile, but despite attempting all manner of combinations of settings changes and section clicks I haven't been able to make it happen again.

Happily I'm able to reproduce this as well as an intermittent save button issue that Derrick identified. I think the issue is that the modal code occasionally plucks things out of the dom too early. I should be able to shuffle around when things are happening to accommodate it.

Test wiki created on Patch demo by JSherman (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/1b66136f1f/w

@jsn.sherman:

I have verified the Preferences Submenus are displaying and functioning per the Acceptance Criteria listed in the ticket Description (note: the Acceptance Criteria mentions "Clicking the Back arrow should return users to the top of the Preferences main menu Acceptance Criteria", the Back arrow/left arrow has been changed to an X but still functions as originally intended).

Below are some screenshots of the Preferences Submenus with various devices:

@Djackson-ctr thanks for your work on this; I appreciate the quick turnaround!

@Samwalton9 you might do another quick check on the latest patchdemo to verify you don't see that checkbox issue pop up.
I'm going to leave this in the queue until Monday just to give a little more time for feedback.

Looks good to me!

Test wiki created on Patch demo by JSherman (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/359fe33c39/w

Change 863394 merged by jenkins-bot:

[mediawiki/core@master] Optimize mobile prefs modals

https://gerrit.wikimedia.org/r/863394

Final note on performance: We did end up walking back some of the optimizations that seemed to be causing us to run ahead of other js that needs to run first.
InitDialogs: 1.69ms
TBT: 997.14ms

That's still a ~10x speedup for the function, and a ~3.5x speedup for total blocking time

Test wiki on Patch demo by JSherman (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/28cc8ff4b7/w/

Test wiki on Patch demo by JSherman (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/2c4097ba54/w/

Test wiki on Patch demo by JSherman (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/e95758bde8/w/

Test wiki on Patch demo by JSherman (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/caede4ccd7/w/

Test wiki on Patch demo by JSherman (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/8f0898c995/w/

Test wiki on Patch demo by JSherman (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/1b66136f1f/w/

Test wiki on Patch demo by JSherman (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/359fe33c39/w/