From 5fe280c3cf6593b1a0439efa317bac013d74abab Mon Sep 17 00:00:00 2001
From: Thalia <thalia.e.chan@googlemail.com>
Date: Sun, 6 Dec 2015 22:35:25 +0000
Subject: [PATCH] Allow users to choose math inspector or math dialog

The context item for math nodes now has two edit buttons,
one for the inspector (edit inline) and one for the dialog
(edit). Creating a new math node automatically opens the
dialog.

Bug: T120382
Change-Id: Icd3ec75262fcc5e0cbc304051c651278b0d8b01c
---
 extension.json                               |   6 +-
 i18n/en.json                                 |   1 +
 i18n/qqq.json                                |   1 +
 modules/ve-math/ve.ui.MWMathContextItem.js   |  64 +++++++++
 modules/ve-math/ve.ui.MWMathDialog.js        |   2 +-
 modules/ve-math/ve.ui.MWMathDialogTool.js    |  53 +++++++
 modules/ve-math/ve.ui.MWMathInspector.css    |  10 ++
 modules/ve-math/ve.ui.MWMathInspector.js     | 143 +++++++++++++++++++
 modules/ve-math/ve.ui.MWMathInspectorTool.js |  46 ------
 9 files changed, 278 insertions(+), 48 deletions(-)
 create mode 100644 modules/ve-math/ve.ui.MWMathContextItem.js
 create mode 100644 modules/ve-math/ve.ui.MWMathDialogTool.js
 create mode 100644 modules/ve-math/ve.ui.MWMathInspector.css
 create mode 100644 modules/ve-math/ve.ui.MWMathInspector.js
 delete mode 100644 modules/ve-math/ve.ui.MWMathInspectorTool.js

diff --git a/extension.json b/extension.json
index 1d65200..5eefffb 100644
--- a/extension.json
+++ b/extension.json
@@ -142,19 +142,23 @@
 			"scripts": [
 				"ve-math/ve.dm.MWMathNode.js",
 				"ve-math/ve.ce.MWMathNode.js",
+				"ve-math/ve.ui.MWMathInspector.js",
+				"ve-math/ve.ui.MWMathContextItem.js",
 				"ve-math/ve.ui.MWMathDialog.js",
 				"ve-math/ve.ui.MWMathPage.js",
-				"ve-math/ve.ui.MWMathInspectorTool.js"
+				"ve-math/ve.ui.MWMathDialogTool.js"
 			],
 			"styles": [
 				"ve-math/ve.ce.MWMathNode.css",
 				"ve-math/ve.ui.MWMathIcons.css",
+				"ve-math/ve.ui.MWMathInspector.css",
 				"ve-math/ve.ui.MWMathDialog.css"
 			],
 			"dependencies": [
 				"ext.visualEditor.mwcore"
 			],
 			"messages": [
+				"math-visualeditor-mwmathcontextitem-quickedit",
 				"math-visualeditor-mwmathdialog-title",
 				"math-visualeditor-mwmathdialog-card-formula",
 				"math-visualeditor-mwmathdialog-card-options",
diff --git a/i18n/en.json b/i18n/en.json
index a4e2bc0..46838dd 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -18,6 +18,7 @@
 		]
 	},
 	"math-desc": "Render mathematical formulas between <code>&lt;math&gt;</code> ... <code>&lt;/math&gt;</code> tags",
+	"math-visualeditor-mwmathcontextitem-quickedit": "Quick edit",
 	"math-visualeditor-mwmathdialog-title": "Formula",
 	"math-visualeditor-mwmathdialog-card-formula": "Formula",
 	"math-visualeditor-mwmathdialog-card-options": "Options",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 46a7294..bb66879 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -17,6 +17,7 @@
 		]
 	},
 	"math-desc": "{{desc|name=Math|url=https://www.mediawiki.org/wiki/Extension:Math}}",
+	"math-visualeditor-mwmathcontextitem-quickedit": "Label for the quick edit button in the math context item",
 	"math-visualeditor-mwmathdialog-title": "Title for the dialog to edit <nowiki><math></nowiki> formula blocks.\n{{Identical|Formula}}",
 	"math-visualeditor-mwmathdialog-card-formula": "Label for the formula card of the math dialog\n{{Identical|Formula}}",
 	"math-visualeditor-mwmathdialog-card-options": "Label for the options card of the math dialog\n{{Identical|Options}}",
diff --git a/modules/ve-math/ve.ui.MWMathContextItem.js b/modules/ve-math/ve.ui.MWMathContextItem.js
new file mode 100644
index 0000000..41bcdd7
--- /dev/null
+++ b/modules/ve-math/ve.ui.MWMathContextItem.js
@@ -0,0 +1,64 @@
+/*!
+ * VisualEditor MWMathContextItem class.
+ *
+ * @copyright 2015 VisualEditor Team and others; see http://ve.mit-license.org
+ */
+
+/**
+ * Context item for a math node.
+ *
+ * @class
+ * @extends ve.ui.LinearContextItem
+ *
+ * @param {ve.ui.Context} context Context item is in
+ * @param {ve.dm.Model} model Model item is related to
+ * @param {Object} config Configuration options
+ */
+ve.ui.MWMathContextItem = function VeUiMWMathContextItem() {
+	// Parent constructor
+	ve.ui.MWMathContextItem.super.apply( this, arguments );
+
+	this.quickEditButton = new OO.ui.ButtonWidget( {
+		label: ve.msg( 'math-visualeditor-mwmathcontextitem-quickedit' ),
+		flags: [ 'progressive' ]
+	} );
+
+	this.actionButtons.addItems( [ this.quickEditButton ], 0 );
+
+	this.quickEditButton.connect( this, { click: 'onInlineEditButtonClick' } );
+
+	// Initialization
+	this.$element.addClass( 've-ui-mwMathContextItem' );
+};
+
+/* Inheritance */
+
+OO.inheritClass( ve.ui.MWMathContextItem, ve.ui.LinearContextItem );
+
+/* Static Properties */
+
+ve.ui.MWMathContextItem.static.name = 'math';
+
+ve.ui.MWMathContextItem.static.icon = 'math';
+
+ve.ui.MWMathContextItem.static.label = OO.ui.deferMsg( 'math-visualeditor-mwmathinspector-title' );
+
+ve.ui.MWMathContextItem.static.modelClasses = [ ve.dm.MWMathNode ];
+
+ve.ui.MWMathContextItem.static.embeddable = false;
+
+ve.ui.MWMathContextItem.static.commandName = 'mathDialog';
+
+/* Methods */
+
+/**
+ * Handle inline edit button click events.
+ */
+ve.ui.MWMathContextItem.prototype.onInlineEditButtonClick = function () {
+	var command = ve.init.target.commandRegistry.lookup( 'mathInspector' );
+	command.execute( this.context.getSurface() );
+};
+
+/* Registration */
+
+ve.ui.contextItemFactory.register( ve.ui.MWMathContextItem );
diff --git a/modules/ve-math/ve.ui.MWMathDialog.js b/modules/ve-math/ve.ui.MWMathDialog.js
index b46d1cc..b20c662 100644
--- a/modules/ve-math/ve.ui.MWMathDialog.js
+++ b/modules/ve-math/ve.ui.MWMathDialog.js
@@ -27,7 +27,7 @@ OO.inheritClass( ve.ui.MWMathDialog, ve.ui.MWExtensionPreviewDialog );
 
 /* Static properties */
 
-ve.ui.MWMathDialog.static.name = 'math';
+ve.ui.MWMathDialog.static.name = 'mathDialog';
 
 ve.ui.MWMathDialog.static.icon = 'math';
 
diff --git a/modules/ve-math/ve.ui.MWMathDialogTool.js b/modules/ve-math/ve.ui.MWMathDialogTool.js
new file mode 100644
index 0000000..0afc3d8
--- /dev/null
+++ b/modules/ve-math/ve.ui.MWMathDialogTool.js
@@ -0,0 +1,53 @@
+/*!
+ * VisualEditor UserInterface MWMathDialogTool class.
+ *
+ * @copyright 2011-2015 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/*global ve, OO */
+
+/**
+ * MediaWiki UserInterface math tool.
+ *
+ * @class
+ * @extends ve.ui.DialogTool
+ * @constructor
+ * @param {OO.ui.ToolGroup} toolGroup
+ * @param {Object} [config] Configuration options
+ */
+ve.ui.MWMathDialogTool = function VeUiMWMathDialogTool( toolGroup, config ) {
+	ve.ui.MWMathDialogTool.super.call( this, toolGroup, config );
+};
+OO.inheritClass( ve.ui.MWMathDialogTool, ve.ui.DialogTool );
+ve.ui.MWMathDialogTool.static.name = 'math';
+ve.ui.MWMathDialogTool.static.group = 'object';
+ve.ui.MWMathDialogTool.static.icon = 'math';
+ve.ui.MWMathDialogTool.static.title = OO.ui.deferMsg(
+	'math-visualeditor-mwmathinspector-title' );
+ve.ui.MWMathDialogTool.static.modelClasses = [ ve.dm.MWMathNode ];
+ve.ui.MWMathDialogTool.static.commandName = 'mathDialog';
+ve.ui.toolFactory.register( ve.ui.MWMathDialogTool );
+
+ve.ui.commandRegistry.register(
+	new ve.ui.Command(
+		'mathDialog', 'window', 'open',
+		{ args: [ 'mathDialog' ], supportedSelections: [ 'linear' ] }
+	)
+);
+
+ve.ui.commandRegistry.register(
+	new ve.ui.Command(
+		'mathInspector', 'window', 'open',
+		{ args: [ 'mathInspector' ], supportedSelections: [ 'linear' ] }
+	)
+);
+
+ve.ui.sequenceRegistry.register(
+	new ve.ui.Sequence( 'wikitextMath', 'mathDialog', '<math', 5 )
+);
+
+ve.ui.commandHelpRegistry.register( 'insert', 'mathDialog', {
+	sequences: [ 'wikitextMath' ],
+	label: OO.ui.deferMsg( 'math-visualeditor-mwmathinspector-title' )
+} );
diff --git a/modules/ve-math/ve.ui.MWMathInspector.css b/modules/ve-math/ve.ui.MWMathInspector.css
new file mode 100644
index 0000000..387b3b9
--- /dev/null
+++ b/modules/ve-math/ve.ui.MWMathInspector.css
@@ -0,0 +1,10 @@
+/*!
+ * VisualEditor UserInterface MWMathInspector styles.
+ *
+ * @copyright 2011-2015 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+.ve-ui-mwMathInspector-content .ve-ui-mwExtensionWindow-input textarea {
+	font-family: monospace, Courier;
+}
diff --git a/modules/ve-math/ve.ui.MWMathInspector.js b/modules/ve-math/ve.ui.MWMathInspector.js
new file mode 100644
index 0000000..ef1704d
--- /dev/null
+++ b/modules/ve-math/ve.ui.MWMathInspector.js
@@ -0,0 +1,143 @@
+/*!
+ * VisualEditor UserInterface MWMathInspector class.
+ *
+ * @copyright 2011-2015 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/*global ve, OO */
+
+/**
+ * MediaWiki math inspector.
+ *
+ * @class
+ * @extends ve.ui.MWLiveExtensionInspector
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ */
+ve.ui.MWMathInspector = function VeUiMWMathInspector( config ) {
+	// Parent constructor
+	ve.ui.MWMathInspector.super.call( this, config );
+};
+
+/* Inheritance */
+
+OO.inheritClass( ve.ui.MWMathInspector, ve.ui.MWLiveExtensionInspector );
+
+/* Static properties */
+
+ve.ui.MWMathInspector.static.name = 'mathInspector';
+
+ve.ui.MWMathInspector.static.icon = 'math';
+
+ve.ui.MWMathInspector.static.title = OO.ui.deferMsg( 'math-visualeditor-mwmathinspector-title' );
+
+ve.ui.MWMathInspector.static.modelClasses = [ ve.dm.MWMathNode ];
+
+ve.ui.MWMathInspector.static.dir = 'ltr';
+
+/* Methods */
+
+/**
+ * @inheritdoc
+ */
+ve.ui.MWMathInspector.prototype.initialize = function () {
+	var inputField, displayField, idField;
+
+	// Parent method
+	ve.ui.MWMathInspector.super.prototype.initialize.call( this );
+
+	this.displaySelect = new OO.ui.ButtonSelectWidget( {
+		items: [
+			new OO.ui.ButtonOptionWidget( {
+				data: 'default',
+				icon: 'math-display-default',
+				label: ve.msg( 'math-visualeditor-mwmathinspector-display-default' )
+			} ),
+			new OO.ui.ButtonOptionWidget( {
+				data: 'inline',
+				icon: 'math-display-inline',
+				label: ve.msg( 'math-visualeditor-mwmathinspector-display-inline' )
+			} ),
+			new OO.ui.ButtonOptionWidget( {
+				data: 'block',
+				icon: 'math-display-block',
+				label: ve.msg( 'math-visualeditor-mwmathinspector-display-block' )
+			} )
+		]
+	} );
+
+	this.idInput = new OO.ui.TextInputWidget();
+
+	inputField = new OO.ui.FieldLayout( this.input, {
+		align: 'top',
+		label: ve.msg( 'math-visualeditor-mwmathinspector-title' )
+	} );
+	displayField = new OO.ui.FieldLayout( this.displaySelect, {
+		align: 'top',
+		label: ve.msg( 'math-visualeditor-mwmathinspector-display' )
+	} );
+	idField = new OO.ui.FieldLayout( this.idInput, {
+		align: 'top',
+		label: ve.msg( 'math-visualeditor-mwmathinspector-id' )
+	} );
+
+	// Initialization
+	this.$content.addClass( 've-ui-mwMathInspector-content' );
+	this.form.$element.append(
+		inputField.$element,
+		this.generatedContentsError.$element,
+		displayField.$element,
+		idField.$element
+	);
+};
+
+/**
+ * @inheritdoc
+ */
+ve.ui.MWMathInspector.prototype.getSetupProcess = function ( data ) {
+	return ve.ui.MWMathInspector.super.prototype.getSetupProcess.call( this, data )
+		.next( function () {
+			var display = this.selectedNode.getAttribute( 'mw' ).attrs.display || 'default';
+			this.displaySelect.selectItemByData( display );
+			this.displaySelect.on( 'choose', this.onChangeHandler );
+		}, this );
+};
+
+/**
+ * @inheritdoc
+ */
+ve.ui.MWMathInspector.prototype.getTeardownProcess = function ( data ) {
+	return ve.ui.MWMathInspector.super.prototype.getTeardownProcess.call( this, data )
+		.first( function () {
+			this.displaySelect.off( 'choose', this.onChangeHandler );
+		}, this );
+};
+
+/**
+ * @inheritdoc
+ */
+ve.ui.MWMathInspector.prototype.updateMwData = function ( mwData ) {
+	var display, id;
+
+	// Parent method
+	ve.ui.MWMathInspector.super.prototype.updateMwData.call( this, mwData );
+
+	display = this.displaySelect.getSelectedItem().getData();
+	id = this.idInput.getValue();
+
+	mwData.attrs.display = display !== 'default' ? display : undefined;
+	mwData.attrs.id = id || undefined;
+};
+
+/**
+ * @inheritdoc
+ */
+ve.ui.MWMathInspector.prototype.formatGeneratedContentsError = function ( $element ) {
+	return $element.text().trim();
+};
+
+/* Registration */
+
+ve.ui.windowFactory.register( ve.ui.MWMathInspector );
diff --git a/modules/ve-math/ve.ui.MWMathInspectorTool.js b/modules/ve-math/ve.ui.MWMathInspectorTool.js
deleted file mode 100644
index dc65dfb..0000000
--- a/modules/ve-math/ve.ui.MWMathInspectorTool.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/*!
- * VisualEditor UserInterface MWMathInspectorTool class.
- *
- * @copyright 2011-2015 VisualEditor Team and others; see AUTHORS.txt
- * @license The MIT License (MIT); see LICENSE.txt
- */
-
-/*global ve, OO */
-
-/**
- * MediaWiki UserInterface math tool.
- *
- * @class
- * @extends ve.ui.InspectorTool
- * @constructor
- * @param {OO.ui.ToolGroup} toolGroup
- * @param {Object} [config] Configuration options
- */
-ve.ui.MWMathInspectorTool = function VeUiMWMathInspectorTool( toolGroup, config ) {
-	ve.ui.MWMathInspectorTool.super.call( this, toolGroup, config );
-};
-OO.inheritClass( ve.ui.MWMathInspectorTool, ve.ui.InspectorTool );
-ve.ui.MWMathInspectorTool.static.name = 'math';
-ve.ui.MWMathInspectorTool.static.group = 'object';
-ve.ui.MWMathInspectorTool.static.icon = 'math';
-ve.ui.MWMathInspectorTool.static.title = OO.ui.deferMsg(
-	'math-visualeditor-mwmathinspector-title' );
-ve.ui.MWMathInspectorTool.static.modelClasses = [ ve.dm.MWMathNode ];
-ve.ui.MWMathInspectorTool.static.commandName = 'math';
-ve.ui.toolFactory.register( ve.ui.MWMathInspectorTool );
-
-ve.ui.commandRegistry.register(
-	new ve.ui.Command(
-		'math', 'window', 'open',
-		{ args: [ 'math' ], supportedSelections: [ 'linear' ] }
-	)
-);
-
-ve.ui.sequenceRegistry.register(
-	new ve.ui.Sequence( 'wikitextMath', 'math', '<math', 5 )
-);
-
-ve.ui.commandHelpRegistry.register( 'insert', 'math', {
-	sequences: [ 'wikitextMath' ],
-	label: OO.ui.deferMsg( 'math-visualeditor-mwmathinspector-title' )
-} );