Merge "Show "edit source" section edit links in addition to VE ones"

VisualEditor.i18n.php

@@ -22,6 +22,7 @@ $messages['en'] = array(
 	'visualeditor-browserwarning' => 'You are using a browser which is not officially supported by VisualEditor.',
 	'visualeditor-ca-createsource' => 'Create source',
 	'visualeditor-ca-editsource' => 'Edit source',
+	'visualeditor-ca-editsource-section' => 'edit source',
 	'visualeditor-ca-ve-create' => 'VisualEditor',
 	'visualeditor-ca-ve-edit' => 'VisualEditor',
 	'visualeditor-clearbutton-tooltip' => 'Clear formatting',
@@ -181,6 +182,8 @@ If the page exists, the following link text is used: {{msg-mw|Visualeditor-ca-ed
 	'visualeditor-ca-editsource' => 'Text for the "Edit source" tab, if the page exists.
 
 If the page doesn\'t exist, the following link text is used: {{msg-mw|Visualeditor-ca-createsource}}',
+	'visualeditor-ca-editsource-section' => 'Text for "edit source" mode of section edit links.
+Corresponds to the {{msg-mw|editsection}} message for default mode.',
 	'visualeditor-ca-ve-create' => 'Link text of the dedicated VisualEditor "Create" tab.',
 	'visualeditor-ca-ve-edit' => 'Link text of the dedicated VisualEditor "Edit" tab.',
 	'visualeditor-clearbutton-tooltip' => 'Tooltip text for the clear formatting button',

VisualEditor.php

@@ -163,8 +163,10 @@ $wgResourceModules += array(
 			'tooltip-ca-createsource',
 			'tooltip-ca-editsource',
 			'tooltip-ca-ve-edit',
+			'pipe-separator',
 			'visualeditor-ca-createsource',
 			'visualeditor-ca-editsource',
+			'visualeditor-ca-editsource-section',
 			'visualeditor-ca-ve-create',
 			'visualeditor-ca-ve-edit',
 			'visualeditor-loadwarning',

modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget.css

@@ -306,6 +306,41 @@
 	outline: none;
 }
 
+/* Section edit links */
+
+.mw-editsection {
+	white-space: nowrap;
+	padding-right: 0.25em;
+}
+
+.mw-editsection-divider {
+	color: #ccc;
+}
+
+.mw-editsection-bracket {
+	-webkit-transition: color 100ms ease-out, margin 100ms ease-out;
+	-moz-transition: color 100ms ease-out, margin 100ms ease-out;
+	-ms-transition: color 100ms ease-out, margin 100ms ease-out;
+	-o-transition: color 100ms ease-out, margin 100ms ease-out;
+	transition: color 100ms ease-out, margin 100ms ease-out;
+}
+
+/* @noflip */
+.mw-content-ltr .mw-editsection-expanded .mw-editsection-bracket:first-of-type,
+.mw-content-rtl .mw-editsection-expanded .mw-editsection-bracket:not(:first-of-type) {
+	margin-left: -0.25em;
+	margin-right: 0.25em;
+	color: #ccc;
+}
+
+/* @noflip */
+.mw-content-rtl .mw-editsection-expanded .mw-editsection-bracket:first-of-type,
+.mw-content-ltr .mw-editsection-expanded .mw-editsection-bracket:not(:first-of-type) {
+	margin-right: -0.25em;
+	margin-left: 0.25em;
+	color: #ccc;
+}
+
 /* Images */
 
 .ve-init-mw-viewPageTarget-loading,

modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js

@@ -1056,18 +1056,82 @@ ve.init.mw.ViewPageTarget.prototype.setupSectionEditLinks = function () {
 	if ( mw.user.options.get( 'visualeditor-nosectionedit' ) ) {
 		return;
 	}
+
 	var veEditUri = this.veEditUri,
-		$links = $( '#mw-content-text .mw-editsection a' );
-	if ( this.isViewPage ) {
-		$links.click( ve.bind( this.onEditSectionLinkClick, this ) );
-	} else {
-		$links.each( function () {
-			var veSectionEditUri = new mw.Uri( veEditUri.toString() ),
-				sectionEditUri = new mw.Uri( $( this ).attr( 'href' ) );
-			veSectionEditUri.extend( { 'vesection': sectionEditUri.query.section } );
-			$( this ).attr( 'href', veSectionEditUri );
-		} );
+		$editsections = $( '#mw-content-text .mw-editsection' ),
+		handler = ve.bind( this.onEditSectionLinkClick, this );
+
+	$editsections.each( function () {
+		var $brackets, $expandedOnly, $middleBracket, $hiddenBracket, closingBracketSymbol,
+			expandTimeout, contractTimeout,
+			$this = $( this ),
+			$heading = $this.closest( 'h1,h2,h3,h4,h5,h6' ),
+			$edit = $this.find( 'a' ).eq( 0 ),
+			$editSource = $edit.clone(),
+			$links = $edit.add( $editSource ),
+			$divider = $( '<span>' ),
+			dividerSymbol = $.trim( ve.msg( 'pipe-separator' ) ),
+			veSectionEditUri = new mw.Uri( veEditUri.toString() ),
+			sectionEditUri = new mw.Uri( $edit.attr( 'href' ) );
+
+		function expandSoon() {
+			clearTimeout( contractTimeout );
+			expandTimeout = setTimeout( expand, 100 );
 		}
+
+		function contractSoon() {
+			clearTimeout( expandTimeout );
+			contractTimeout = setTimeout( contract, 100 );
+		}
+
+		function expand() {
+			clearTimeout( contractTimeout );
+			$middleBracket.css( 'visibility', 'hidden' );
+			$expandedOnly.css( 'visibility', 'visible' );
+			$heading.addClass( 'mw-editsection-expanded' );
+		}
+
+		function contract() {
+			clearTimeout( expandTimeout );
+			if ( !$links.is( ':focus' ) ) {
+				$middleBracket.css( 'visibility', 'visible' );
+				$expandedOnly.css( 'visibility', 'hidden' );
+				$heading.removeClass( 'mw-editsection-expanded' );
+			}
+		}
+
+		$brackets = $( [ this.firstChild, this.lastChild ] );
+		// @until Id27555c6 - essentially does this for us
+		if ( !$brackets.hasClass( 'mw-editsection-bracket' ) ) {
+			$brackets = $brackets
+				.wrap( $( '<span>' ).addClass( 'mw-editsection-bracket' ) )
+				.parent();
+		}
+		closingBracketSymbol = $brackets.eq( 1 ).text();
+		$expandedOnly = $divider.add( $editSource ).add( $brackets.last() );
+		$middleBracket = $brackets.last().clone();
+		$hiddenBracket = $brackets.last().clone().css( 'visibility', 'hidden' );
+
+		// Events
+		$heading.on( { 'mouseenter': expandSoon, 'mouseleave': contractSoon } );
+		$links.on( { 'focus': expand, 'blur': contract } );
+		$edit.attr( 'href', veSectionEditUri.extend( {
+			'vesection': sectionEditUri.query.section
+		} ) );
+		$edit.click( handler );
+
+		// Initialization
+		$expandedOnly.css( 'visibility', 'hidden' );
+		$editSource
+			.addClass( 'mw-editsection-link-secondary' )
+			.text( mw.msg( 'visualeditor-ca-editsource-section' ) );
+		$divider
+			.addClass( 'mw-editsection-divider' )
+			.text( dividerSymbol );
+		$edit
+			.addClass( 'mw-editsection-link-primary' )
+			.after( $middleBracket, $divider, $hiddenBracket, $editSource );
+	} );
 };
 
 /**