Removing mw.ui.checkbox dependency (take 2)

This reverts commit af90386c67.

Reason for revert: The codex-styles module is now only loaded when
the settings cog is clicked.

Bug: T348069
Change-Id: I1d3c3a7b5c74c3e2d64765274468e48c014a4047

extension.json

@@ -198,7 +198,6 @@
 				"mediawiki.jqueryMsg",
 				"mediawiki.storage",
 				"mediawiki.Title",
-				"mediawiki.ui.checkbox",
 				"mediawiki.Uri",
 				"mediawiki.user",
 				"mediawiki.util",

src/ui/settingsDialogRenderer.js

@@ -65,7 +65,14 @@ export default function createSettingsDialogRenderer( referencePreviewsAvaliable
 			 * Show the settings element and position it correctly
 			 */
 			show() {
-				overlay.style.display = '';
+				// Load additional styles for checkboxes
+				mw.loader.using( 'codex-styles' ).then( () => {
+					// RequestIdleCallback must be called to make sure
+					// the new stylesheet has been applied.
+					mw.requestIdleCallback( () => {
+						overlay.style.display = '';
+					} );
+				} );
 			},
 
 			/**

src/ui/templates/settingsDialog/settingsDialog.js

@@ -72,13 +72,15 @@ export function renderSettingsDialog( model ) {
 			<main id='mwe-popups-settings-form'>
 				<form>
 					${choices.map( ( { id, name, description, isChecked } ) => `
-					<p class="mw-ui-checkbox">
+					<p class="cdx-checkbox">
 						<input
 							${isChecked ? 'checked' : ''}
 							value='${id}'
 							type='checkbox'
-							id='mwe-popups-settings-${id}'>
-						<label for='mwe-popups-settings-${id}'>
+							id='mwe-popups-settings-${id}'
+							class='cdx-checkbox__input'>
+						<span class="cdx-checkbox__icon">&nbsp;</span>
+						<label class="cdx-checkbox__label" for='mwe-popups-settings-${id}'>
 							<span>${name}</span>
 							${description}
 						</label>

src/ui/templates/settingsDialog/settingsDialog.less

@@ -59,14 +59,12 @@
 				margin-right: 60px;
 			}
 
-			input {
-				margin-right: 10px;
-			}
-
 			label {
 				font-size: 13px;
 				line-height: 16px;
 				width: 300px;
+				margin-left: 10px;
+				flex-direction: column;
 
 				> span {
 					color: @color-emphasized;