Merge "Add colorblind-friendly scheme"

extension.json

@@ -25,6 +25,11 @@
 			"description": "Temporary feature flag for accessibility colors.",
 			"public": true
 		},
+		"CodeMirrorColorblindColors": {
+			"value": false,
+			"description": "Temporary feature flag for colorblind-friendly colors. Depends on the CodeMirrorAccessibilityColors setting being enabled as well.",
+			"public": true
+		},
 		"CodeMirrorLineNumberingNamespaces": {
 			"value": null,
 			"description": "List of namespace IDs where line numbering should be enabled, or `null` to enable for all namespaces. Set to [] to disable everywhere. Defaults to `null` for all namespaces.",
@@ -84,7 +89,8 @@
 			"scripts": "mode/mediawiki/mediawiki.js",
 			"styles": [
 				"mode/mediawiki/mediawiki.css",
-				"mode/mediawiki/accessible-colors.less"
+				"mode/mediawiki/accessible-colors.less",
+				"mode/mediawiki/colorblind-colors.less"
 			],
 			"dependencies": [
 				"ext.CodeMirror.lib"

i18n/en.json

@@ -5,5 +5,8 @@
 		]
 	},
 	"codemirror-desc": "Provides syntax highlighting in wikitext editor",
-	"codemirror-toggle-label": "Syntax highlighting"
+	"codemirror-toggle-label": "Syntax highlighting",
+	"codemirror-prefs-colorblind": "Enable colorblind-friendly scheme for syntax highlighting when editing wikitext",
+	"codemirror-prefs-colorblind-help": "If you use a gadget for syntax highlighting, this preference will not work.",
+	"prefs-accessibility": "Accessibility"
 }

i18n/qqq.json

@@ -9,5 +9,8 @@
 		]
 	},
 	"codemirror-desc": "{{desc|name=Code Mirror|url=https://www.mediawiki.org/wiki/Extension:CodeMirror}}\n\nAdditional info: Discription of \"Syntax highlighting\" in wiki\n[[mw:Extension:SyntaxHighlight GeSHi]]",
-	"codemirror-toggle-label": "Title tooltip for button to toggle CodeMirror in the editing toolbar."
+	"codemirror-toggle-label": "Title tooltip for button to toggle CodeMirror in the editing toolbar.",
+	"codemirror-prefs-colorblind": "Used in user preferences as label for enabling the colorblind-friendly option.",
+	"codemirror-prefs-colorblind-help": "Used in user preferences as remark on the colorblind-friendly option.",
+	"prefs-accessibility": "Section heading in the user prefences for accessibility topics."
 }

includes/Hooks.php

@@ -74,6 +74,8 @@ class Hooks {
 
 		$vars['wgCodeMirrorAccessibilityColors'] = $config->get( 'CodeMirrorAccessibilityColors' );
 
+		$vars['wgCodeMirrorColorblindColors'] = $config->get( 'CodeMirrorColorblindColors' );
+
 		$vars['wgCodeMirrorLineNumberingNamespaces'] = $config->get( 'CodeMirrorLineNumberingNamespaces' );
 	}
 
@@ -91,6 +93,16 @@ class Hooks {
 		$defaultPreferences['usecodemirror'] = [
 			'type' => 'api',
 		];
+
+		$config = MediaWikiServices::getInstance()->getMainConfig();
+		if ( $config->get( 'CodeMirrorAccessibilityColors' ) && $config->get( 'CodeMirrorColorblindColors' ) ) {
+			$defaultPreferences['usecodemirror-colorblind'] = [
+				'type' => 'toggle',
+				'label-message' => 'codemirror-prefs-colorblind',
+				'help-message' => 'codemirror-prefs-colorblind-help',
+				'section' => 'editing/accessibility',
+			];
+		}
 	}
 
 }

resources/ext.CodeMirror.js

@@ -252,6 +252,9 @@
 
 			if ( mw.config.get( 'wgCodeMirrorAccessibilityColors' ) ) {
 				$codeMirror.addClass( 'cm-mw-accessible-colors' );
+				if ( mw.config.get( 'wgCodeMirrorColorblindColors' ) && mw.user.options.get( 'usecodemirror-colorblind' ) ) {
+					$codeMirror.addClass( 'cm-mw-colorblind-colors' );
+				}
 			}
 
 			// T305333: Reload CodeMirror to fix a cursor caret issue.

resources/mode/mediawiki/accessible-colors.less

@@ -45,7 +45,7 @@
 	.cm-mw-table-delimiter,
 	.cm-mw-table-definition { color: #d08; }
 
-	/* templates */
+	/* variables */
 	.cm-mw-templatevariable,
 	.cm-mw-templatevariable-name,
 	.cm-mw-templatevariable-bracket,

resources/mode/mediawiki/colorblind-colors.less

@@ -0,0 +1,78 @@
+/* stylelint-disable selector-list-comma-newline-after, block-opening-brace-newline-before,
+	block-opening-brace-newline-after, block-closing-brace-space-after */
+
+/*
+ * This style sheet overrides colors in mediawiki.css & accessible-colors.less
+ * with more colorblind-friendly colors.
+ */
+
+.cm-mw-colorblind-colors {
+	/* misc */
+	.cm-mw-section-header,
+	.cm-mw-list,
+	.cm-mw-doubleUnderscore,
+	.cm-mw-signature,
+	.cm-mw-hr,
+	.cm-mw-indenting,
+	.cm-mw-apostrophes-bold,
+	.cm-mw-apostrophes-italic { color: #e4a400; }
+
+	/* tags */
+	.cm-mw-exttag-name,
+	.cm-mw-exttag-bracket,
+	.cm-mw-exttag-attribute,
+	.cm-mw-htmltag-name,
+	.cm-mw-htmltag-bracket,
+	.cm-mw-htmltag-attribute { color: #56b4e9; }
+
+	/* templates */
+	.cm-mw-template,
+	.cm-mw-template-name,
+	.cm-mw-template-name-mnemonic,
+	.cm-mw-template-argument-name,
+	.cm-mw-template-delimiter,
+	.cm-mw-template-bracket { color: #9c3a00; }
+
+	/* variables */
+	.cm-mw-templatevariable,
+	.cm-mw-templatevariable-name,
+	.cm-mw-templatevariable-bracket,
+	.cm-mw-templatevariable-delimiter { color: #009e73; }
+
+	/* remove background colors */
+	.cm-mw-matching,
+	.cm-mw-skipformatting,
+	.cm-mw-doubleUnderscore, .cm-mw-signature, .cm-mw-hr,
+	pre.CodeMirror-line-like.cm-mw-exttag,
+	.cm-mw-exttag, .cm-mw-tag-pre, .cm-mw-tag-nowiki,
+	.cm-mw-template2-ground,
+	.cm-mw-template3-ground,
+	.cm-mw-template-ext-ground,
+	.cm-mw-template-ext2-ground,
+	.cm-mw-template-ext3-ground,
+	.cm-mw-template-link-ground,
+	.cm-mw-template-ext-link-ground,
+	.cm-mw-template-ext2-link-ground,
+	.cm-mw-template-ext3-link-ground,
+	.cm-mw-template2-ext-ground,
+	.cm-mw-template2-ext2-ground,
+	.cm-mw-template2-ext3-ground,
+	.cm-mw-template2-link-ground,
+	.cm-mw-template2-ext-link-ground,
+	.cm-mw-template2-ext2-link-ground,
+	.cm-mw-template2-ext3-link-ground,
+	.cm-mw-template3-ext-ground,
+	.cm-mw-template3-ext2-ground,
+	.cm-mw-template3-ext3-ground,
+	.cm-mw-template3-link-ground,
+	.cm-mw-template3-ext-link-ground,
+	.cm-mw-template3-ext2-link-ground,
+	.cm-mw-template3-ext3-link-ground,
+	.cm-mw-ext-ground,
+	.cm-mw-ext2-ground,
+	.cm-mw-ext3-ground,
+	.cm-mw-ext-link-ground,
+	.cm-mw-ext2-link-ground,
+	.cm-mw-ext3-link-ground,
+	.cm-mw-link-ground { background-color: transparent; }
+}

resources/modules/ve-cm/ve.ui.CodeMirrorAction.js

@@ -123,6 +123,9 @@ ve.ui.CodeMirrorAction.prototype.toggle = function ( enable ) {
 
 				if ( mw.config.get( 'wgCodeMirrorAccessibilityColors' ) ) {
 					surfaceView.$element.addClass( 'cm-mw-accessible-colors' );
+					if ( mw.config.get( 'wgCodeMirrorColorblindColors' ) && mw.user.options.get( 'usecodemirror-colorblind' ) ) {
+						surfaceView.$element.addClass( 'cm-mw-colorblind-colors' );
+					}
 				}
 
 				var profile = $.client.profile();