From 27b6aaebccf4d82b3958a68221993a47c807daae Mon Sep 17 00:00:00 2001 From: MusikAnimal Date: Fri, 9 Aug 2024 02:04:19 -0400 Subject: [PATCH] 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 . 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 | 3 +- i18n/en.json | 1 + i18n/qqq.json | 3 +- package.json | 2 +- resources/codemirror.icon.svg | 7 +++++ resources/codemirror.less | 48 +++++++++++++++++++++++++++--- resources/codemirror.wikieditor.js | 18 +++++++---- 7 files changed, 69 insertions(+), 13 deletions(-) create mode 100644 resources/codemirror.icon.svg diff --git a/extension.json b/extension.json index adb55a9d..98e8eda5 100644 --- a/extension.json +++ b/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": { diff --git a/i18n/en.json b/i18n/en.json index bab86ef5..f8331a09 100644 --- a/i18n/en.json +++ b/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", diff --git a/i18n/qqq.json b/i18n/qqq.json index 71599dd4..274f4cd3 100644 --- a/i18n/qqq.json +++ b/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.", diff --git a/package.json b/package.json index c0a9d467..5424a035 100644 --- a/package.json +++ b/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" diff --git a/resources/codemirror.icon.svg b/resources/codemirror.icon.svg new file mode 100644 index 00000000..3eb8c850 --- /dev/null +++ b/resources/codemirror.icon.svg @@ -0,0 +1,7 @@ + + + + highlight + + + diff --git a/resources/codemirror.less b/resources/codemirror.less index 95f9ae84..9a0f8b2f 100644 --- a/resources/codemirror.less +++ b/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). diff --git a/resources/codemirror.wikieditor.js b/resources/codemirror.wikieditor.js index 8edb6af6..5fca7e6f 100644 --- a/resources/codemirror.wikieditor.js +++ b/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; } } }