Add VisualEditor support for 'line' attribute

The line attribute sets line='1', as both Parsoid and VE
expect proper XML attributes.

Change-Id: I10b5717fcc4b8e84a3030425a4a6a9a865272830

extension.json

@@ -51,6 +51,7 @@
 				"VisualEditor/ve.ui.MWSyntaxHighlightInspectorTool.js"
 			],
 			"styles": [
+				"VisualEditor/ve.ce.MWSyntaxHighlightNode.css",
 				"VisualEditor/ve.ui.MWSyntaxHighlightInspector.css"
 			],
 			"dependencies": [
@@ -59,6 +60,7 @@
 			"messages": [
 				"syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-code",
 				"syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-language",
+				"syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-showlines",
 				"syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-title"
 			],
 			"targets": [ "desktop", "mobile" ]

i18n/en.json

@@ -10,6 +10,7 @@
     "syntaxhighlight-error-category-desc": "There was an error when attempting to highlight code included on the page.",
     "syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-code": "Code",
     "syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-language": "Language",
+    "syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-showlines": "Show line numbers",
     "syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-title": "Code block",
     "syntaxhighlight-error-pygments-invocation-failure": "Failed to invoke Pygments",
     "syntaxhighlight-error-unknown-language": "Unknown language \"$1\"",

i18n/qqq.json

@@ -15,6 +15,7 @@
 	"syntaxhighlight-error-category-desc": "Description on [[Special:TrackingCategories]] for the {{msg-mw|syntaxhighlight-error-category}} tracking category.",
 	"syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-code": "Label for the code input field\n{{Identical|Code}}",
 	"syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-language": "Label for the language field\n{{Identical|Language}}",
+	"syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-showlines": "Label for the checkbox to show line numbers",
 	"syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-title": "Title for the VisualEditor syntax highlighter inspector, above the text area for the code",
 	"syntaxhighlight-error-pygments-invocation-failure": "Error message shown when the syntax highlighting library failed with an unspecified error",
 	"syntaxhighlight-error-unknown-language": "Error message shown when the programming language name was not recognized by the syntax highlighting library. Parameters:\n* $1 - the language name",

modules/VisualEditor/ve.ce.MWSyntaxHighlightNode.css

@@ -0,0 +1,11 @@
+/*!
+ * VisualEditor ContentEditable MWSyntaxHighlightNode styles.
+ *
+ * @copyright 2011-2015 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+ .ve-ce-mwSyntaxHighlightNode pre {
+	/* Prevent silly wrapping on Safari and Chrome (https://bugs.webkit.org/show_bug.cgi?id=35935) */
+	word-wrap: normal;
+}

modules/VisualEditor/ve.ce.MWSyntaxHighlightNode.js

@@ -50,6 +50,13 @@ ve.ce.MWSyntaxHighlightNode.prototype.onSetup = function () {
 	this.$element.addClass( 've-ce-mwSyntaxHighlightNode' );
 };
 
+/** */
+ve.ce.MWSyntaxHighlightNode.prototype.getBoundingRect = function () {
+	// HACK: Because nodes can overflow due to the pre tag, just use the
+	// first rect (of the wrapper div) for placing the context.
+	return this.rects[0];
+};
+
 /* Registration */
 
 ve.ce.nodeFactory.register( ve.ce.MWSyntaxHighlightNode );

modules/VisualEditor/ve.ui.MWSyntaxHighlightInspector.js

@@ -52,6 +52,8 @@ ve.ui.MWSyntaxHighlightInspector.prototype.initialize = function () {
 		}
 	} );
 
+	this.showLinesCheckbox = new OO.ui.CheckboxInputWidget();
+
 	var languageField = new OO.ui.FieldLayout( this.language, {
 			align: 'top',
 			label: ve.msg( 'syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-language' )
@@ -59,11 +61,19 @@ ve.ui.MWSyntaxHighlightInspector.prototype.initialize = function () {
 		codeField = new OO.ui.FieldLayout( this.input, {
 			align: 'top',
 			label: ve.msg( 'syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-code' )
+		} ),
+		showLinesField = new OO.ui.FieldLayout( this.showLinesCheckbox, {
+			align: 'inline',
+			label: ve.msg( 'syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-showlines' )
 		} );
 
 	// Initialization
 	this.$content.addClass( 've-ui-mwSyntaxHighlightInspector-content' );
-	this.form.$element.prepend( languageField.$element, codeField.$element );
+	this.form.$element.prepend(
+		languageField.$element,
+		codeField.$element,
+		showLinesField.$element
+	);
 };
 
 /**
@@ -86,12 +96,18 @@ ve.ui.MWSyntaxHighlightInspector.prototype.getReadyProcess = function ( data ) {
 ve.ui.MWSyntaxHighlightInspector.prototype.getSetupProcess = function ( data ) {
 	return ve.ui.MWSyntaxHighlightInspector.super.prototype.getSetupProcess.call( this, data )
 		.next( function () {
-			var language = this.selectedNode.getAttribute( 'mw' ).attrs.lang || '';
+			var attrs = this.selectedNode.getAttribute( 'mw' ).attrs,
+				language = attrs.lang || '',
+				showLines = attrs.line !== undefined;
+
 			this.language.setValue( language );
 			if ( !language ) {
 				this.language.setValidityFlag( true );
 			}
 			this.language.on( 'change', this.onChangeHandler );
+
+			this.showLinesCheckbox.setSelected( showLines );
+			this.showLinesCheckbox.on( 'change', this.onChangeHandler );
 		}, this );
 };
 
@@ -102,6 +118,7 @@ ve.ui.MWSyntaxHighlightInspector.prototype.getTeardownProcess = function ( data
 	return ve.ui.MWSyntaxHighlightInspector.super.prototype.getTeardownProcess.call( this, data )
 		.first( function () {
 			this.language.off( 'change', this.onChangeHandler );
+			this.showLinesCheckbox.off( 'change', this.onChangeHandler );
 		}, this );
 };
 
@@ -112,7 +129,11 @@ ve.ui.MWSyntaxHighlightInspector.prototype.updateMwData = function ( mwData ) {
 	// Parent method
 	ve.ui.MWSyntaxHighlightInspector.super.prototype.updateMwData.call( this, mwData );
 
-	mwData.attrs.lang = this.language.getValue();
+	var language = this.language.getValue(),
+		showLines = this.showLinesCheckbox.isSelected();
+
+	mwData.attrs.lang = language || undefined;
+	mwData.attrs.line = showLines ? '1' : undefined;
 };
 
 /* Registration */