warn: fix dark mode (#1982)

* warn: fix dark mode

The bug is that the warn dialog is a mix of light and dark elements.

Two strategies come to mind. Either lighten everything, or darken everything. I chose to lighten everything.

Follow-up patches will be needed for other modules. This patch just focuses on the warn module.

- in the warn module, remove dark mode styling from everything but the submit button
- sprinkle the "notheme" class liberally
- most elements can have classes added in the Morebits module, but the select2 element (fancy searchable dropdown list similar to jquery-chosen) is a third party library so needs special code
- add comment to morebits describing how select2 works

* update snapshots

modules/twinklewarn.js

@@ -1482,7 +1482,14 @@ Twinkle.warn.callback.postCategoryCleanup = function twinklewarnCallbackPostCate
 			})
 			.change(Twinkle.warn.callback.change_subcategory);
 
-		$('.select2-selection').keydown(Morebits.select2.autoStart).focus();
+		$('.select2-selection')
+			.keydown(Morebits.select2.autoStart)
+			.focus()
+			.on('click', function () {
+				// This container doesn't exist until .select2-selection is clicked by the user.
+				// Opt out of dark mode for now.
+				$('.select2-container').addClass('notheme');
+			});
 
 		mw.util.addCSS(
 			// Increase height

morebits.js

@@ -459,6 +459,7 @@ Morebits.quickForm.element.prototype.compute = function QuickFormElementCompute(
 			node = document.createDocumentFragment();
 			// fragments can't have any attributes, so just return it straight away
 			return [ node, node ];
+		// Sometimes Twinkle uses fancy searchable "select" elements. This is powered by the third party library "select2". Activate it by creating a Morebits "select" element, then call `$('select[name=sub_group]').select2({});` or similar towards the end of your main code.
 		case 'select':
 			node = document.createElement('div');
 
@@ -470,6 +471,8 @@ Morebits.quickForm.element.prototype.compute = function QuickFormElementCompute(
 				label.style.marginRight = '3px';
 			}
 			var select = node.appendChild(document.createElement('select'));
+			// opt out of dark mode for now
+			select.classList.add('notheme');
 			if (data.event) {
 				select.addEventListener('change', data.event, false);
 			}
@@ -672,6 +675,9 @@ Morebits.quickForm.element.prototype.compute = function QuickFormElementCompute(
 			}
 
 			subnode = node.appendChild(document.createElement('input'));
+			// opt out of dark mode for now
+			subnode.classList.add('notheme');
+
 			subnode.setAttribute('name', data.name);
 
 			if (data.type === 'input') {
@@ -861,6 +867,8 @@ Morebits.quickForm.element.prototype.compute = function QuickFormElementCompute(
 				label.appendChild(labelElement);
 			}
 			subnode = node.appendChild(document.createElement('textarea'));
+			// opt out of dark mode for now
+			subnode.classList.add('notheme');
 			subnode.setAttribute('name', data.name);
 			if (data.cols) {
 				subnode.setAttribute('cols', data.cols);

tests/__snapshots__/morebits.quickForm.js.snap

@@ -112,6 +112,7 @@ exports[`quickform input element 1`] = `
     Label
   </label>
   <input
+    class="notheme"
     id="node_0"
     name="inputname"
     type="text"
@@ -167,6 +168,7 @@ exports[`quickform select element 1`] = `
     Select label
   </label>
   <select
+    class="notheme"
     id="node_1"
     name="selectname"
   >
@@ -203,6 +205,7 @@ exports[`quickform textarea element 1`] = `
   id="div_node_7"
 >
   <textarea
+    class="notheme"
     cols="4"
     id="node_7"
     name="textareaname1"