Show sidebar controls only when multi-part content is present

Bug: T272482
Change-Id: I092438bc9c7d5569f758786ca6952beffdf37507

extension.json

@@ -2191,6 +2191,7 @@
 				"visualeditor-dialog-template-title",
 				"visualeditor-dialog-transclusion-action-save",
 				"visualeditor-dialog-transclusion-add-content",
+				"visualeditor-dialog-transclusion-add-wikitext",
 				"visualeditor-dialog-transclusion-add-param",
 				"visualeditor-dialog-transclusion-add-template",
 				"visualeditor-dialog-transclusion-collapse-options",

i18n/ve-mw/en.json

@@ -172,6 +172,7 @@
 	"visualeditor-dialog-transclusion-action-save": "Save",
 	"visualeditor-dialog-transclusion-absent-template": "The \"$1\" template doesn't yet exist.",
 	"visualeditor-dialog-transclusion-add-content": "Add content",
+	"visualeditor-dialog-transclusion-add-wikitext": "Add wikitext",
 	"visualeditor-dialog-transclusion-add-param": "Add more information",
 	"visualeditor-dialog-transclusion-add-template": "Add template",
 	"visualeditor-dialog-transclusion-collapse-options": "Hide options",

i18n/ve-mw/qqq.json

@@ -190,6 +190,7 @@
 	"visualeditor-dialog-transclusion-action-save": "Label for button that saves changes when editing an existing transclusion in the transclusion dialog.",
 	"visualeditor-dialog-transclusion-absent-template": "Message to user that the template they have selected does not exist on this wiki.\n\nParameters:\n* $1 - the title of the template",
 	"visualeditor-dialog-transclusion-add-content": "Label for button that adds parameter content to a transclusion.",
+	"visualeditor-dialog-transclusion-add-wikitext": "Label for button that adds parameter wikitext to a transclusion.",
 	"visualeditor-dialog-transclusion-add-param": "Label for button that adds a parameter to a transcluded template.",
 	"visualeditor-dialog-transclusion-add-template": "Label for button that adds the specified template to the page.\n{{Identical|Add template}}",
 	"visualeditor-dialog-transclusion-collapse-options": "Label for button that hides advanced options in transclusion dialog",

modules/ve-mw/ui/dialogs/ve.ui.MWTransclusionDialog.js

@@ -75,6 +75,7 @@ ve.ui.MWTransclusionDialog = function VeUiMWTransclusionDialog( config ) {
 	this.useInlineDescriptions = veConfig.transclusionDialogInlineDescriptions;
 	this.useBackButton = veConfig.transclusionDialogBackButton;
 	this.useSearchImprovements = veConfig.templateSearchImprovements;
+	this.useNewSidebar = veConfig.transclusionDialogNewSidebar;
 
 	if ( this.useInlineDescriptions ) {
 		this.$element.addClass( 've-ui-mwTransclusionDialog-bigger' );
@@ -82,6 +83,9 @@ ve.ui.MWTransclusionDialog = function VeUiMWTransclusionDialog( config ) {
 	if ( this.useSearchImprovements ) {
 		this.$element.addClass( 've-ui-mwTransclusionDialog-enhancedSearch' );
 	}
+	if ( this.useNewSidebar ) {
+		this.$element.addClass( 've-ui-mwTransclusionDialog-newSidebar' );
+	}
 };
 
 /* Inheritance */
@@ -161,6 +165,17 @@ ve.ui.MWTransclusionDialog.prototype.onOutlineControlsRemove = function () {
 	}
 };
 
+/**
+ * Handle booklet layout focus.
+ *
+ * @private
+ */
+ve.ui.MWTransclusionDialog.prototype.onBookletLayoutFocus = function () {
+	var currentPage = this.bookletLayout.getCurrentPage(),
+		isParameterPage = currentPage instanceof ve.ui.MWParameterPage;
+	this.bookletLayout.getOutlineControls().removeButton.setDisabled( isParameterPage );
+};
+
 /**
  * Handle add template button click events.
  *
@@ -497,7 +512,9 @@ ve.ui.MWTransclusionDialog.prototype.initialize = function () {
 	this.addContentButton = new OO.ui.ButtonWidget( {
 		framed: false,
 		icon: 'wikiText',
-		title: ve.msg( 'visualeditor-dialog-transclusion-add-content' )
+		title: ve.msg( this.useNewSidebar ?
+			'visualeditor-dialog-transclusion-add-wikitext' :
+			'visualeditor-dialog-transclusion-add-content' )
 	} );
 	this.addParameterButton = new OO.ui.ButtonWidget( {
 		framed: false,
@@ -505,21 +522,28 @@ ve.ui.MWTransclusionDialog.prototype.initialize = function () {
 		title: ve.msg( 'visualeditor-dialog-transclusion-add-param' )
 	} );
 
+	this.bookletLayout.getOutlineControls().addItems( [ this.addTemplateButton, this.addContentButton ] );
+	if ( !this.useNewSidebar ) {
+		this.bookletLayout.getOutlineControls().addItems( [ this.addParameterButton ] );
+	}
+
 	// Events
 	if ( this.useInlineDescriptions ) {
 		this.getManager().connect( this, { resize: ve.debounce( this.onWindowResize.bind( this ) ) } );
 	}
 	this.bookletLayout.connect( this, { set: 'onBookletLayoutSet' } );
-	this.bookletLayout.$menu.find( '[ role="listbox" ]' ).first().attr( 'aria-label', ve.msg( 'visualeditor-dialog-transclusion-templates-menu-aria-label' ) );
+	this.bookletLayout.$menu.find( '[ role="listbox" ]' ).first()
+		.attr( 'aria-label', ve.msg( 'visualeditor-dialog-transclusion-templates-menu-aria-label' ) );
 	this.addTemplateButton.connect( this, { click: 'onAddTemplateButtonClick' } );
 	this.addContentButton.connect( this, { click: 'onAddContentButtonClick' } );
 	this.addParameterButton.connect( this, { click: 'onAddParameterButtonClick' } );
-	this.bookletLayout.getOutlineControls()
-		.addItems( [ this.addTemplateButton, this.addContentButton, this.addParameterButton ] )
-		.connect( this, {
-			move: 'onOutlineControlsMove',
-			remove: 'onOutlineControlsRemove'
-		} );
+	this.bookletLayout.getOutlineControls().connect( this, {
+		move: 'onOutlineControlsMove',
+		remove: 'onOutlineControlsRemove'
+	} );
+	if ( this.useNewSidebar ) {
+		this.bookletLayout.$element.on( 'focusin', this.onBookletLayoutFocus.bind( this ) );
+	}
 };
 
 /**
@@ -537,6 +561,10 @@ ve.ui.MWTransclusionDialog.prototype.getSetupProcess = function ( data ) {
 				remove: !isReadOnly
 			} );
 
+			if ( this.useNewSidebar ) {
+				this.bookletLayout.getOutlineControls().toggle( !this.isSingleTemplateTransclusion() );
+			}
+
 			this.updateModeActionState();
 			this.toggleSidebar( 'auto' );
 		}, this );

modules/ve-mw/ui/styles/dialogs/ve.ui.MWTransclusionDialog.css

@@ -186,6 +186,26 @@
 	left: 10px;
 }
 
+.ve-ui-mwTransclusionDialog-newSidebar .oo-ui-outlineControlsWidget {
+	padding: 2px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.ve-ui-mwTransclusionDialog-newSidebar .oo-ui-outlineControlsWidget > .oo-ui-outlineControlsWidget-movers {
+	float: left;
+}
+
+.ve-ui-mwTransclusionDialog-newSidebar .oo-ui-outlineControlsWidget .oo-ui-buttonWidget {
+	margin-left: 16px !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.ve-ui-mwTransclusionDialog-newSidebar .oo-ui-outlineControlsWidget > .oo-ui-outlineControlsWidget-items > .oo-ui-buttonWidget:first-child,
+.ve-ui-mwTransclusionDialog-newSidebar .oo-ui-outlineControlsWidget > .oo-ui-outlineControlsWidget-movers > .oo-ui-buttonWidget:nth-child( 2 ) {
+	margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .ve-ui-mwTransclusionOutlineTemplateWidget-searchWidget {
 	margin: 8px 24px 8px 24px;
 	width: auto;