From c3cda7edd7fb33c98c263e54dfd708d26fd48963 Mon Sep 17 00:00:00 2001 From: WMDE-Fisch Date: Wed, 6 Apr 2022 12:06:07 +0200 Subject: [PATCH] Add colorblind-friendly scheme Including an user options to enable/disable the scheme. Defaults to false. Feature is only availible together with the new more accessibile color scheme as the CSS depends on each other. Set behind a new temporary feature flag. Bug: T305027 Change-Id: I46d240a30eda5a1526ada1fe9b724f7b4594b426 --- extension.json | 8 +- i18n/en.json | 5 +- i18n/qqq.json | 5 +- includes/Hooks.php | 12 +++ resources/ext.CodeMirror.js | 3 + .../mode/mediawiki/accessible-colors.less | 2 +- .../mode/mediawiki/colorblind-colors.less | 78 +++++++++++++++++++ .../modules/ve-cm/ve.ui.CodeMirrorAction.js | 3 + 8 files changed, 112 insertions(+), 4 deletions(-) create mode 100644 resources/mode/mediawiki/colorblind-colors.less diff --git a/extension.json b/extension.json index db79da7b..7e943031 100644 --- a/extension.json +++ b/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" diff --git a/i18n/en.json b/i18n/en.json index 4ed7044d..cbed392e 100644 --- a/i18n/en.json +++ b/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" } diff --git a/i18n/qqq.json b/i18n/qqq.json index 88fa156d..dd446975 100644 --- a/i18n/qqq.json +++ b/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." } diff --git a/includes/Hooks.php b/includes/Hooks.php index ae9460aa..17e4861e 100644 --- a/includes/Hooks.php +++ b/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', + ]; + } } } diff --git a/resources/ext.CodeMirror.js b/resources/ext.CodeMirror.js index 80a44ab8..22f41250 100644 --- a/resources/ext.CodeMirror.js +++ b/resources/ext.CodeMirror.js @@ -246,6 +246,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. diff --git a/resources/mode/mediawiki/accessible-colors.less b/resources/mode/mediawiki/accessible-colors.less index 3146a527..4448d6fd 100644 --- a/resources/mode/mediawiki/accessible-colors.less +++ b/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, diff --git a/resources/mode/mediawiki/colorblind-colors.less b/resources/mode/mediawiki/colorblind-colors.less new file mode 100644 index 00000000..f7cbe416 --- /dev/null +++ b/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; } +} diff --git a/resources/modules/ve-cm/ve.ui.CodeMirrorAction.js b/resources/modules/ve-cm/ve.ui.CodeMirrorAction.js index 55a0542e..96e90f34 100644 --- a/resources/modules/ve-cm/ve.ui.CodeMirrorAction.js +++ b/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();