Target init: Add edit mode switch icons to VE and WE toolbars

VE already has a a switch icon in the options menu, so bring that
up to the main toolbar.

Append an OOUI button to the WikiEditor toolbar if present, and bind
to the same functon as the edit tab.

Bug: T49779
Change-Id: Ic1e83ea7b13c4fef68024bf05ffc244060666103

extension.json

@@ -974,7 +974,8 @@
 			],
 			"dependencies": [
 				"oojs",
-				"oojs-ui"
+				"oojs-ui",
+				"oojs-ui.styles.icons-editing-core"
 			],
 			"messages": [
 				"visualeditor-mweditmodeve-title",

modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget.init-monobook.css

@@ -22,3 +22,11 @@
 	background-image: -o-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
 	background-image: linear-gradient(to bottom, #eaf4fa 0%, #b0d9ee 100%);
 }
+
+.ve-init-mw-desktopArticleTarget-editSwitch {
+	font-size: 1.0079em;
+}
+
+.ve-init-mw-desktopArticleTarget-editSwitch .oo-ui-buttonElement-button {
+	padding: 0.35em;
+}

modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget.init-vector.css

@@ -17,3 +17,11 @@
 	height: 0.75em;
 	background: #347bff;
 }
+
+.ve-init-mw-desktopArticleTarget-editSwitch {
+	font-size: 0.9143em;
+}
+
+.ve-init-mw-desktopArticleTarget-editSwitch .oo-ui-buttonElement-button {
+	padding: 0.3em;
+}

modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget.init.css

@@ -49,6 +49,15 @@
 	cursor: default;
 }
 
+.ve-init-mw-desktopArticleTarget-editSwitch {
+	float: right;
+	margin: 0;
+}
+
+.ve-init-mw-desktopArticleTarget-editSwitch .oo-ui-iconElement-icon {
+	opacity: 0.8;
+}
+
 /* Progress bar mimicking OOUI */
 
 .ve-activated #content {

modules/ve-mw/init/targets/ve.init.mw.DesktopArticleTarget.init.js

@@ -418,6 +418,16 @@
 				// Allow instant switching to edit mode, without refresh
 				mw.loader.load( 'ext.visualEditor.switching' );
 				$caVeEdit.click( init.onEditTabClick );
+				$( '#wpTextbox1' ).on( 'wikiEditor-toolbar-doneInitialSections', function () {
+					$( '.wikiEditor-ui-toolbar' ).prepend(
+						new OO.ui.ButtonWidget( {
+							framed: false,
+							icon: 'edit',
+							title: mw.msg( 'visualeditor-mweditmodeve-tool' ),
+							classes: [ 've-init-mw-desktopArticleTarget-editSwitch' ]
+						} ).on( 'click', init.activateVe ).$element
+					);
+				} );
 			}
 		},
 
@@ -503,8 +513,6 @@
 		},
 
 		onEditTabClick: function ( e ) {
-			var wikitextModified = $( '#wpTextbox1' ).val() !== initialWikitext;
-
 			// Default mouse button is normalised by jQuery to key code 1.
 			// Only do our handling if no keys are pressed, mouse button is 1
 			// (e.g. not middle click or right click) and no modifier keys
@@ -512,6 +520,12 @@
 			if ( ( e.which && e.which !== 1 ) || e.shiftKey || e.altKey || e.ctrlKey || e.metaKey ) {
 				return;
 			}
+			e.preventDefault();
+			init.activateVe();
+		},
+
+		activateVe: function () {
+			var wikitextModified = $( '#wpTextbox1' ).val() !== initialWikitext;
 
 			if (
 				mw.config.get( 'wgAction' ) === 'submit' ||
@@ -541,8 +555,6 @@
 			} else {
 				activatePageTarget();
 			}
-
-			e.preventDefault();
 		},
 
 		onEditSectionLinkClick: function ( e ) {

modules/ve-mw/init/targets/ve.init.mw.DesktopArticleTarget.js

@@ -877,8 +877,9 @@ ve.init.mw.DesktopArticleTarget.prototype.attachToolbarSaveButton = function ()
 			type: 'list',
 			icon: 'menu',
 			title: ve.msg( 'visualeditor-pagemenu-tooltip' ),
-			include: [ 'meta', 'settings', 'advancedSettings', 'categories', 'languages', 'editModeSource', 'findAndReplace' ]
-		}
+			include: [ 'meta', 'settings', 'advancedSettings', 'categories', 'languages', 'findAndReplace' ]
+		},
+		{ include: [ 'editModeSource' ] }
 	], this.getSurface() );
 
 	this.toolbar.$actions.append( this.actionsToolbar.$element, this.toolbarSaveButton.$element );