Merge "CodeMirrorWikiEditor: use new icon and add text to toggle button"

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;
 								}
 							}
 						}