From b4b9da7e51e09992513d2497f4668a437030aee9 Mon Sep 17 00:00:00 2001
From: Sam Wilson <sam@samwilson.id.au>
Date: Mon, 11 Sep 2017 10:23:22 +0800
Subject: [PATCH] Join the popup label into one message

The popup label was being styled as two words from two different
i18n messages, each a different colour. This combines them into
one, moves the identifing class name up to the outer span, and
colours both words blue (the outer braces are left black).

Bug: T174219
Change-Id: Id1166f48ae4b3b8daff29be56dd92ef330dd9cef
---
 extension.json               |  3 +--
 i18n/en.json                 |  3 +--
 i18n/qqq.json                |  3 +--
 resources/ext.CodeMirror.js  | 18 ++++++------------
 resources/modules/popup.less |  2 +-
 5 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/extension.json b/extension.json
index 00f95b3c..51b67fed 100644
--- a/extension.json
+++ b/extension.json
@@ -44,8 +44,7 @@
 			],
 			"messages": [
 				"codemirror-toggle-label",
-				"codemirror-popup-syntax",
-				"codemirror-popup-highlighting",
+				"codemirror-popup-label",
 				"codemirror-popup-desc",
 				"codemirror-popup-btn-yes",
 				"codemirror-popup-btn-no"
diff --git a/i18n/en.json b/i18n/en.json
index 020bf828..09bba136 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -8,8 +8,7 @@
 	"codemirror-toggle-label": "Syntax highlighting",
 	"codemirror-beta-title": "Wikitext syntax highlighting",
 	"codemirror-beta-desc": "Syntax highlighting makes editing easier by using color and shade to visually separate page text from the code for links, references and templates.",
-	"codemirror-popup-syntax": "Syntax",
-	"codemirror-popup-highlighting": "Highlighting",
+	"codemirror-popup-label": "Syntax Highlighting",
 	"codemirror-popup-desc": "Syntax highlighting will help you easily distinguish different parts of your edit by color coding them.",
 	"codemirror-popup-btn-yes": "Try it",
 	"codemirror-popup-btn-no": "No, thank you"
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 614b16b0..508f693a 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -12,8 +12,7 @@
 	"codemirror-toggle-label": "Title tooltip for button to toggle CodeMirror in the editing toolbar.",
 	"codemirror-beta-title": "Title for syntax highlighting beta feature",
 	"codemirror-beta-desc": "Description for syntax highlight beta feature",
-	"codemirror-popup-syntax": "This message appears before the message {{msg-mw|codemirror-popup-highlighting}} to form the title \"Syntax Highlighting\" (with the two words having different styling). If you would translate \"Syntax Highlighting\" as \"Highlighting of Syntax\", translate this message as \"Highlighting\" and {{msg-mw|codemirror-popup-highlighting}} as \"Syntax\".",
-	"codemirror-popup-highlighting": "This message appears after the message {{msg-mw|codemirror-popup-syntax}} to form the title \"Syntax Highlighting\" (with the two words having different styling). If you would translate \"Syntax Highlighting\" as \"Highlighting of Syntax\", translate {{msg-mw|codemirror-popup-highlighting}} as \"Highlighting\" and this message as \"Syntax\".",
+	"codemirror-popup-label": "The title of the popup",
 	"codemirror-popup-desc": "Description of the syntax highlighting feature in the popup",
 	"codemirror-popup-btn-yes": "Text on the button for trying out codemirror",
 	"codemirror-popup-btn-no": "Text on the button for dismissing popup"
diff --git a/resources/ext.CodeMirror.js b/resources/ext.CodeMirror.js
index 072df3cb..a54ae13c 100644
--- a/resources/ext.CodeMirror.js
+++ b/resources/ext.CodeMirror.js
@@ -398,10 +398,8 @@
 	 * If popup hasn't been shown before, show popup and add a localStorage entry.
 	 * check it before showing popup in future.
 	 */
-	/**
-	 */
 	function handlePopup() {
-		var yesButton, noButton, $title, $content, popup;
+		var yesButton, noButton, $labelText, $label, $content, popup;
 
 		// If CodeMirror button doesn't exist, don't show popup
 		if ( !$( '#mw-editbutton-codemirror' ).length ) {
@@ -422,14 +420,10 @@
 			label: mw.msg( 'codemirror-popup-btn-no' ),
 			flags: [ 'destructive' ]
 		} );
-		$title =
-			$( '<span>' ).append(
-				'{ ',
-				$( '<span>' ).addClass( 'codemirror-popup-color-blue' ).text( mw.msg( 'codemirror-popup-syntax' ) ),
-				' ',
-				document.createTextNode( mw.msg( 'codemirror-popup-highlighting' ) ),
-				' }'
-			);
+		$labelText = $( '<span>' ).text( mw.msg( 'codemirror-popup-label' ) );
+		$label = $( '<span>' )
+			.addClass( 'codemirror-popup-label' )
+			.append( '{ ', $labelText, ' }' );
 		$content =
 			$( '<div>' ).addClass( 'codemirror-popup-div' ).append(
 				$( '<div>' ).addClass( 'codemirror-popup-text' ).text( mw.msg( 'codemirror-popup-desc' ) ),
@@ -439,7 +433,7 @@
 
 		popup = new OO.ui.PopupWidget( {
 			head: true,
-			label: $title,
+			label: $label,
 			classes: [ 'codemirror-popup' ],
 			$content: $content,
 			$floatableContainer: $( '#mw-editbutton-codemirror' ),
diff --git a/resources/modules/popup.less b/resources/modules/popup.less
index 1b0ced5c..53f4fbaf 100644
--- a/resources/modules/popup.less
+++ b/resources/modules/popup.less
@@ -13,7 +13,7 @@
 		}
 	}
 
-	.codemirror-popup-color-blue {
+	.codemirror-popup-label span {
 		color: #1e90ff;
 	}