CodeMirrorWikiEditor: use new icon and add text to toggle button

For years, users have complained that the CodeMirror toggle button is
confusing and concealed. The icon looked too similar to the edit icon,
when it was supposed to be a highlighter. The new icon is similar but
has a highlighted line to help clarify what it is. We also now have the
text 'Syntax' accompanying the icon. Translators are instructed to try
to be brief to conserve space in the toolbar. "Syntax highlighting" is
the full correct term, and remains the text for the button's tooltip.

The new icon is ~0.3KB uncompressed, just meeting performance guidelines
for using @embed <https://w.wiki/AsPW>. This is also only temporary until the icon is upstreamed in Codex/OOUI.

New icon courtesy of Thiemo Kreuz (WMDE)

A corresponding change for the 2017 editor will follow I15453b33e7.

Bug: T174145
Change-Id: Ib6dbfc261214ed6672c1a54738e3401fa2f5d262

extension.json

@@ -267,7 +267,8 @@
 				"codemirror.wikieditor.js"
 			],
 			"messages": [
-				"codemirror-toggle-label"
+				"codemirror-toggle-label",
+				"codemirror-toggle-label-short"
 			]
 		},
 		"ext.CodeMirror.v6.WikiEditor.init": {

i18n/en.json

@@ -7,6 +7,7 @@
 	},
 	"codemirror-desc": "Provides syntax highlighting in wikitext editor",
 	"codemirror-toggle-label": "Syntax highlighting",
+	"codemirror-toggle-label-short": "Syntax",
 	"codemirror-prefs-summary": "You can learn more about this feature by reading the [https://www.mediawiki.org/wiki/Special:MyLanguage/Help:Extension:CodeMirror help page].",
 	"codemirror-prefs-enable": "Enable syntax highlighting for wikitext",
 	"codemirror-v6-prefs-colorblind": "Use colorblind-friendly scheme",

i18n/qqq.json

@@ -9,8 +9,9 @@
 			"pastakhov"
 		]
 	},
-	"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-desc": "{{desc|name=Code Mirror|url=https://www.mediawiki.org/wiki/Extension:CodeMirror}}\n\nAdditional info: Description 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-short": "Label shown next to the CodeMirror icon in the editing toolbar. This message should be as brief as possible. {{msg-mw|codemirror-toggle-label}} is the full message, and is shown as the tooltip for the button.",
 	"codemirror-prefs-summary": "Used in [[Special:Preferences]] in the section titled {{msg-mw|prefs-syntax-highlighting}}, at the top as a summary for the whole section.",
 	"codemirror-prefs-enable": "Used in user preferences as label for enabling syntax highlighting.",
 	"codemirror-v6-prefs-colorblind": "Used in user preferences as label for enabling the colorblind-friendly option. This is a shorter version of {{msg-mw|codemirror-prefs-colorblind}} shown under section {{msg-mw|prefs-syntax-highlighting}} on wikis using CodeMirror 6.",

package.json

@@ -9,7 +9,7 @@
 		"test:lint:styles": "stylelint \"resources/**/*.less\"",
 		"test:lint:i18n": "banana-checker i18n/",
 		"test:unit": "jest",
-		"check-built-assets": "{ git status src/ | grep \"nothing to commit, working tree clean\"; } && { echo 'CHECKING BUILD SOURCES ARE COMMITTED' && npm run build && git status resources/lib/ | grep \"nothing to commit, working tree clean\" || { npm run node-debug; false; }; }",
+		"check-built-assets": "{ git status resources/lib/ | grep \"nothing to commit, working tree clean\"; } && { echo 'CHECKING BUILD SOURCES ARE COMMITTED' && npm run build && git status resources/lib/ | grep \"nothing to commit, working tree clean\" || { npm run node-debug; false; }; }",
 		"node-debug": "node -v && npm -v && echo 'ERROR: Please ensure that production assets have been built with `npm run build` and commited, and that you are using the correct version of Node/NPM.'",
 		"selenium-test": "wdio tests/selenium/wdio.conf.js",
 		"doc": "jsdoc -c jsdoc.json"

resources/codemirror.icon.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+	<title>
+		highlight
+	</title>
+	<path d="m5.5 11 9-9L16 3.5l-8 8 1.3 3.3zm10-10h-2L3 11.5 4.5 13 3 14v1.5l-2 2v.5h2.5l1-1H6l1-1.5L8.5 17 19 6.5v-2zm2 17H10v-.5l1.5-1.5H19v.5z"/>
+</svg>

resources/codemirror.less

@@ -1,10 +1,8 @@
+@import 'mediawiki.skin.variables.less';
+
 .cm-editor {
 	border: 1px solid #c8ccd1;
 }
-// Override for WikiEditor.
-.wikiEditor-ui-text .cm-editor {
-	border: inherit;
-}
 
 .cm-matchingBracket,
 .cm-focused .cm-matchingBracket {
@@ -33,6 +31,48 @@
 	height: 100%;
 }
 
+// Overrides for WikiEditor.
+
+.wikiEditor-ui-text .cm-editor {
+	border: inherit;
+}
+
+.cm-mw-toggle-wikieditor {
+	.oo-ui-icon-syntax-highlight {
+		background-color: @color-base;
+		// The SVG is just barely over 300 bytes, and is also only temporary
+		// until an official icon has been established in Codex/OOUI (T174145).
+		/* @embed */
+		@url: url( codemirror.icon.svg );
+		-webkit-mask-image: @url;
+		mask-image: @url;
+		-webkit-mask-size: @size-icon-medium;
+		mask-size: @size-icon-medium;
+		-webkit-mask-repeat: no-repeat;
+		mask-repeat: no-repeat;
+		-webkit-mask-position: center;
+		mask-position: center;
+	}
+
+	&:hover {
+		background-color: @background-color-interactive;
+	}
+
+	&.oo-ui-toggleWidget-on {
+		.oo-ui-labelElement-label {
+			color: @color-progressive;
+		}
+
+		.oo-ui-icon-syntax-highlight {
+			background-color: @color-progressive;
+		}
+	}
+
+	&.oo-ui-buttonElement-frameless.oo-ui-labelElement.oo-ui-iconElement:first-child {
+		margin-left: 0;
+	}
+}
+
 // Hide all buttons except CodeMirror on read only pages (T301615)
 // This is the same hack that CodeEditor uses to customize the toolbar.
 // WikiEditor should be updated to better handle read only pages (T188817).

resources/codemirror.wikieditor.js

@@ -166,12 +166,18 @@ class CodeMirrorWikiEditor extends CodeMirror {
 					codemirror: {
 						tools: {
 							CodeMirror: {
-								label: mw.msg( 'codemirror-toggle-label' ),
-								type: 'toggle',
-								oouiIcon: 'highlight',
-								action: {
-									type: 'callback',
-									execute: () => this.switchCodeMirror()
+								type: 'element',
+								element: () => {
+									// OOUI has already been loaded by WikiEditor.
+									const button = new OO.ui.ToggleButtonWidget( {
+										label: mw.msg( 'codemirror-toggle-label-short' ),
+										icon: 'syntax-highlight',
+										value: this.useCodeMirror,
+										framed: false,
+										classes: [ 'tool', 'cm-mw-toggle-wikieditor' ]
+									} );
+									button.on( 'change', this.switchCodeMirror.bind( this ) );
+									return button.$element;
 								}
 							}
 						}