@openui5/sap.ui.rta 1.93.3 → 1.96.2

package/src/sap/ui/rta/RuntimeAuthoring.js

@@ -45,7 +45,6 @@ sap.ui.define([
 	"sap/base/Log",
 	"sap/ui/events/KeyCodes",
 	"sap/ui/model/json/JSONModel",
-	"sap/ui/core/Fragment",
 	"sap/ui/rta/util/validateFlexEnabled",
 	"sap/ui/rta/util/changeVisualization/ChangeVisualization"
 ],
@@ -89,7 +88,6 @@ function(
 	Log,
 	KeyCodes,
 	JSONModel,
-	Fragment,
 	validateFlexEnabled,
 	ChangeVisualization
 ) {
@@ -109,7 +107,7 @@ function(
 	 * @class The runtime authoring allows to adapt the fields of a running application.
 	 * @extends sap.ui.base.ManagedObject
 	 * @author SAP SE
-	 * @version 1.93.3
+	 * @version 1.96.2
 	 * @constructor
 	 * @private
 	 * @since 1.30
@@ -121,7 +119,7 @@ function(
 			// ---- control specific ----
 			library: "sap.ui.rta",
 			associations: {
-				/** The root control which the runtime authoring should handle. Can only be sap.ui.core.Element or sap.ui.core.UIComponent */
+				/** The root control which the runtime authoring should handle. Can only be sap.ui.core.Control or sap.ui.core.UIComponent */
 				rootControl: {
 					type: "sap.ui.base.ManagedObject"
 				}
@@ -168,7 +166,7 @@ function(
 					}
 				},
 
-				/** Defines view state of the RTA. Possible values: adaptation, navigation */
+				/** Defines view state of key user adaptation. Possible values: adaptation, navigation, visualization */
 				mode: {
 					type: "string",
 					defaultValue: "adaptation"
@@ -227,6 +225,7 @@ function(
 			this._dependents = {};
 			this._mServices = {};
 			this._mCustomServicesDictinary = {};
+			this._mUShellServices = {};
 
 			this.addDependent(new PluginManager(), "pluginManager");
 			this.addDependent(new PopupManager(), "popupManager");
@@ -246,6 +245,11 @@ function(
 			if (this._shouldValidateFlexEnabled()) {
 				this.attachEvent("start", validateFlexEnabled.bind(null, this));
 			}
+
+			this._loadUShellServicesPromise = FlexUtils.getUShellServices(["URLParsing", "AppLifeCycle", "CrossApplicationNavigation"])
+				.then(function (mUShellServices) {
+					this._mUShellServices = mUShellServices;
+				}.bind(this));
 		},
 		_RELOAD: {
 			NOT_NEEDED: "NO_RELOAD",
@@ -307,7 +311,7 @@ function(
 	};
 
 	RuntimeAuthoring.prototype.onPopupClose = function(oEvent) {
-		if (oEvent.getParameters() instanceof sap.m.Dialog) {
+		if (oEvent.getParameters().isA("sap.m.Dialog")) {
 			this.getToolbar().setColor();
 		}
 	};
@@ -413,6 +417,15 @@ function(
 		}).then(this._setVersionsModel.bind(this));
 	};
 
+	function addOrRemoveStyleClass(oRootControl, bAdd) {
+		if (oRootControl.isA("sap.ui.core.UIComponent")) {
+			oRootControl = oRootControl.getRootControl();
+		}
+		if (oRootControl) {
+			oRootControl[bAdd ? "addStyleClass" : "removeStyleClass"]("sapUiRtaRoot");
+		}
+	}
+
 	/**
 	 * Start UI adaptation at runtime (RTA).
 	 * @return {Promise} Returns a Promise with the initialization of RTA
@@ -431,7 +444,8 @@ function(
 				return Promise.reject(vError);
 			}
 
-			return this._initVersioning()
+			return this._loadUShellServicesPromise
+			.then(this._initVersioning.bind(this))
 			/*
 			Check if the application has personalized changes and reload without them;
 			Also Check if the application has an available draft and if yes, reload with those changes.
@@ -497,15 +511,9 @@ function(
 			// this is needed to initially check if undo is available, e.g. when the stack gets initialized with changes
 			.then(this._onStackModified.bind(this))
 			.then(function () {
-				// non-blocking style loading
-				StylesLoader
-				.loadStyles("InPageStyles")
-				.then(function (sData) {
-					var sStyles = sData.replace(/%scrollWidth%/g, DOMUtil.getScrollbarWidth() + "px");
-					DOMUtil.insertStyles(sStyles, Overlay.getOverlayContainer().get(0));
-				});
-			})
-			.then(function () {
+				//Resolve the CSS variable set in themes/base/OverlayWithScrollbar.css
+				Overlay.getOverlayContainer().get(0).style.setProperty("--sap-ui-rta-scrollbar-scrollWidth", DOMUtil.getScrollbarWidth() + "px");
+				Overlay.getOverlayContainer().get(0).style.setProperty("--sap-ui-rta-scrollbar-scrollWidthPlusTwo", DOMUtil.getScrollbarWidth() + 2 + "px");
 				return oDesignTimePromise;
 			})
 			.then(function () {
@@ -518,11 +526,6 @@ function(
 					return this.getToolbar().show();
 				}
 			}.bind(this))
-			.then(function () {
-				if (this.getShowToolbars() && this.getChangeVisualization) {
-					this.getChangeVisualization().setRootControlId(this.getRootControl());
-				}
-			}.bind(this))
 			.then(function () {
 				if (Device.browser.name === "ff") {
 					// in FF shift+f10 also opens a browser context menu.
@@ -534,11 +537,7 @@ function(
 				this.fnKeyDown = this._onKeyDown.bind(this);
 				jQuery(document).on("keydown", this.fnKeyDown);
 
-				var oRootOverlay = OverlayRegistry.getOverlay(this.getRootControl());
-				this._$RootControl = oRootOverlay.getAssociatedDomRef();
-				if (this._$RootControl) {
-					this._$RootControl.addClass("sapUiRtaRoot");
-				}
+				addOrRemoveStyleClass(this.getRootControlInstance(), true);
 			}.bind(this))
 			.then(function () {
 				this._sStatus = STARTED;
@@ -914,7 +913,7 @@ function(
 		}
 		var bTriggerReload = true;
 		this.getCommandStack().removeAllCommands();
-		var mParsedHash = this._removeVersionParameterForFLP(oReloadInfo, FlexUtils.getParsedURLHash(), bTriggerReload);
+		var mParsedHash = this._removeVersionParameterForFLP(oReloadInfo, FlexUtils.getParsedURLHash(this._getUShellService("URLParsing")), bTriggerReload);
 		this._triggerCrossAppNavigation(mParsedHash);
 		return this.stop(true, true);
 	};
@@ -933,6 +932,7 @@ function(
 				})
 				.then(this._handleDiscard.bind(this));
 			}
+			return undefined;
 		}.bind(this));
 	};
 
@@ -947,23 +947,23 @@ function(
 
 		if (this.canUndo()) {
 			this._nSwitchToVersion = nVersion;
-			return Utils.showMessageBox("warning", "MSG_SWITCH_VERSION_DIALOG", {
+			Utils.showMessageBox("warning", "MSG_SWITCH_VERSION_DIALOG", {
 				titleKey: "TIT_SWITCH_VERSION_DIALOG",
 				actions: [MessageBox.Action.YES, MessageBox.Action.NO, MessageBox.Action.CANCEL],
 				emphasizedAction: MessageBox.Action.YES
 			}).then(function (sAction) {
-				switch (sAction) {
-					case MessageBox.Action.YES:
-						return this._serializeToLrep(this)
-							.then(this._switchVersion.bind(this, this._nSwitchToVersion));
-					case MessageBox.Action.NO:
-						// avoids the data loss popup; a reload is triggered later and will destroy RTA & the command stack
-						this.getCommandStack().removeAllCommands(true);
-						this._switchVersion(this._nSwitchToVersion);
+				if (sAction === MessageBox.Action.YES) {
+					this._serializeToLrep(this)
+						.then(this._switchVersion.bind(this, this._nSwitchToVersion));
+				} else if (sAction === MessageBox.Action.NO) {
+					// avoids the data loss popup; a reload is triggered later and will destroy RTA & the command stack
+					this.getCommandStack().removeAllCommands(true);
+					this._switchVersion(this._nSwitchToVersion);
 				}
+				return undefined;
 			}.bind(this));
+			return;
 		}
-
 		this._switchVersion(nVersion);
 	};
 
@@ -973,7 +973,7 @@ function(
 		RuntimeAuthoring.enableRestart(this.getLayer(), this.getRootControlInstance());
 
 		if (!FlexUtils.getUshellContainer()) {
-			if (!ReloadInfoAPI.hasVersionParameterWithValue({value: sVersion})) {
+			if (!ReloadInfoAPI.hasVersionParameterWithValue({value: sVersion}, this._getUShellService("URLParsing"))) {
 				var oReloadInfo = {
 					versionSwitch: true,
 					version: sVersion
@@ -982,20 +982,25 @@ function(
 			}
 			return this._reloadPage();
 		}
-		var mParsedHash = FlexUtils.getParsedURLHash();
+		var mParsedHash = FlexUtils.getParsedURLHash(this._getUShellService("URLParsing"));
 		VersionsAPI.loadVersionForApplication({
 			selector: this.getRootControlInstance(),
 			layer: this.getLayer(),
 			version: nVersion
 		});
 		var aVersionsParameter = mParsedHash.params[sap.ui.fl.Versions.UrlParameter];
-		if (aVersionsParameter && aVersionsParameter[0] === sVersion) {
+		if (
+			aVersionsParameter &&
+			aVersionsParameter[0] === sVersion &&
+			this._getUShellService("AppLifeCycle")
+		) {
 			// RTA was started with a version parameter, the displayed version has changed and the key user switches back
-			FlexUtils.getUshellContainer().getService("AppLifeCycle").reloadCurrentApp();
+			this._getUShellService("AppLifeCycle").reloadCurrentApp();
 		} else {
 			mParsedHash.params[sap.ui.fl.Versions.UrlParameter] = sVersion;
 			this._triggerCrossAppNavigation(mParsedHash);
 		}
+		return undefined;
 	};
 
 	RuntimeAuthoring.prototype._setUriParameter = function (sParameters) {
@@ -1004,45 +1009,40 @@ function(
 
 	RuntimeAuthoring.prototype._createToolsMenu = function(aButtonsVisibility) {
 		if (!this.getDependent("toolbar")) {
-			var ToolbarConstructor;
+			var bUserLayer = this.getLayer() === Layer.USER;
+			var oProperties = {
+				rtaInformation: {
+					flexSettings: this.getFlexSettings(),
+					rootControl: this.getRootControlInstance(),
+					commandStack: this.getCommandStack()
+				},
+				textResources: this._getTextResources(),
+				restore: this._onRestore.bind(this),
+				exit: this.stop.bind(this, false, bUserLayer)
+			};
 
-			if (this.getLayer() === Layer.USER) {
-				ToolbarConstructor = PersonalizationToolbar;
+			if (!bUserLayer) {
+				oProperties.transport = this._onTransport.bind(this);
+				oProperties.undo = this._onUndo.bind(this);
+				oProperties.redo = this._onRedo.bind(this);
+				oProperties.modeChange = this._onModeChange.bind(this);
+				oProperties.activate = this._onActivate.bind(this);
+				oProperties.discardDraft = this._onDiscardDraft.bind(this);
+				oProperties.switchVersion = this._onSwitchVersion.bind(this);
+				oProperties.onCommandCategorySelection = this.getChangeVisualization
+					? this.getChangeVisualization().onCommandCategorySelection.bind(this.getChangeVisualization())
+					: function () {};
+			}
+
+			var oToolbar;
+			if (bUserLayer) {
+				oToolbar = new PersonalizationToolbar(oProperties);
 			} else if (Utils.isOriginalFioriToolbarAccessible()) {
-				ToolbarConstructor = FioriToolbar;
+				oToolbar = new FioriToolbar(oProperties);
 			} else if (Utils.getFiori2Renderer()) {
-				ToolbarConstructor = FioriLikeToolbar;
+				oToolbar = new FioriLikeToolbar(oProperties);
 			} else {
-				ToolbarConstructor = StandaloneToolbar;
-			}
-			var oToolbar;
-			if (this.getLayer() === Layer.USER) {
-				oToolbar = new ToolbarConstructor({
-					textResources: this._getTextResources(),
-					//events
-					exit: this.stop.bind(this, false, true),
-					restore: this._onRestore.bind(this)
-				});
-			} else {
-				oToolbar = new ToolbarConstructor({
-					textResources: this._getTextResources(),
-					//events
-					exit: this.stop.bind(this, false, false),
-					transport: this._onTransport.bind(this),
-					restore: this._onRestore.bind(this),
-					undo: this._onUndo.bind(this),
-					redo: this._onRedo.bind(this),
-					modeChange: this._onModeChange.bind(this),
-					manageApps: RtaAppVariantFeature.onGetOverview.bind(null, true, this.getLayer()),
-					appVariantOverview: this._onGetAppVariantOverview.bind(this),
-					saveAs: RtaAppVariantFeature.onSaveAs.bind(RtaAppVariantFeature, true, true, this.getLayer(), null),
-					activate: this._onActivate.bind(this),
-					discardDraft: this._onDiscardDraft.bind(this),
-					switchVersion: this._onSwitchVersion.bind(this),
-					toggleChangeVisualization: this.getChangeVisualization
-						? this.getChangeVisualization().toggleActive.bind(this.getChangeVisualization())
-						: function () {}
-				});
+				oToolbar = new StandaloneToolbar(oProperties);
 			}
 			this.addDependent(oToolbar, "toolbar");
 
@@ -1088,13 +1088,6 @@ function(
 		return Promise.resolve();
 	};
 
-	RuntimeAuthoring.prototype._onGetAppVariantOverview = function(oEvent) {
-		var oItem = oEvent.getParameter("item");
-
-		var bTriggeredForKeyUser = oItem.getId() === "keyUser";
-		return RtaAppVariantFeature.onGetOverview(bTriggeredForKeyUser, this.getLayer());
-	};
-
 	/**
 	 * Exit Runtime Authoring - destroy all controls and plugins
 	 *
@@ -1119,8 +1112,8 @@ function(
 			jQuery(document).off("keydown", this.fnKeyDown);
 		}
 
-		if (this._$RootControl) {
-			this._$RootControl.removeClass("sapUiRtaRoot");
+		if (this.getRootControlInstance()) {
+			addOrRemoveStyleClass(this.getRootControlInstance(), false);
 		}
 
 		this.setCommandStack(null);
@@ -1188,7 +1181,7 @@ function(
 	 * the changes for both places will be deleted. For App Variants all the changes are saved in one place.
 	 *
 	 * @private
-	 * @returns {Promise}
+	 * @returns {Promise} Resolves when change persistence is resetted
 	 */
 	RuntimeAuthoring.prototype._deleteChanges = function() {
 		var sLayer = this.getLayer();
@@ -1199,7 +1192,7 @@ function(
 		}).then(function () {
 			ReloadInfoAPI.removeInfoSessionStorage(oSelector);
 			var oReloadInfo = {
-				isDraftAvailable: ReloadInfoAPI.hasVersionParameterWithValue({value: sLayer}),
+				isDraftAvailable: ReloadInfoAPI.hasVersionParameterWithValue({value: sLayer}, this._getUShellService("URLParsing")),
 				layer: sLayer,
 				deleteMaxLayer: false,
 				triggerHardReload: true
@@ -1280,25 +1273,28 @@ function(
 	 */
 	RuntimeAuthoring.prototype._onRestore = function() {
 		var sLayer = this.getLayer();
-		var sMessage = sLayer === Layer.USER
-			? this._getTextResources().getText("FORM_PERS_RESET_MESSAGE_PERSONALIZATION")
-			: this._getTextResources().getText("FORM_PERS_RESET_MESSAGE");
-		var sTitle = sLayer === Layer.USER
-			? this._getTextResources().getText("BTN_RESTORE")
-			: this._getTextResources().getText("FORM_PERS_RESET_TITLE");
+		var sMessageKey = sLayer === Layer.USER
+			? "FORM_PERS_RESET_MESSAGE_PERSONALIZATION"
+			: "FORM_PERS_RESET_MESSAGE";
+		var sTitleKey = sLayer === Layer.USER
+			? "BTN_RESTORE"
+			: "FORM_PERS_RESET_TITLE";
 
 		this.getPluginManager().handleStopCutPaste();
 
-		return Utils.showMessageBox("warning", sMessage, {
-			titleKey: sTitle,
+		return Utils.showMessageBox("warning", sMessageKey, {
+			titleKey: sTitleKey,
 			actions: [MessageBox.Action.OK, MessageBox.Action.CANCEL],
 			emphasizedAction: MessageBox.Action.OK
 		}).then(function(sAction) {
 			if (sAction === MessageBox.Action.OK) {
 				RuntimeAuthoring.enableRestart(sLayer, this.getRootControlInstance());
-				this._deleteChanges();
-				this.getCommandStack().removeAllCommands();
+				return this._deleteChanges()
+					.then(function () {
+						this.getCommandStack().removeAllCommands();
+					}.bind(this));
 			}
+			return undefined;
 		}.bind(this));
 	};
 
@@ -1439,12 +1435,15 @@ function(
 	};
 
 	RuntimeAuthoring.prototype._triggerCrossAppNavigation = function(mParsedHash) {
-		if (this.getLayer() !== Layer.USER) {
-			return FlexUtils.ifUShellContainerThen(function(aServices) {
-				aServices[0].toExternal(this._buildNavigationArguments(mParsedHash));
-				return Promise.resolve(true);
-			}.bind(this), ["CrossApplicationNavigation"]);
+		if (
+			(this.getLayer() !== Layer.USER) &&
+			this._getUShellService("CrossApplicationNavigation")
+		) {
+			this._getUShellService("CrossApplicationNavigation")
+				.toExternal(this._buildNavigationArguments(mParsedHash));
+			return true;
 		}
+		return false;
 	};
 
 	RuntimeAuthoring.prototype._removeVersionParameterForFLP = function(oReloadInfo, mParsedHash, bTriggerReload) {
@@ -1453,13 +1452,16 @@ function(
 			return mParsedHash;
 		}
 
-		var sVersionParameter = FlexUtils.getParameter(flexLibrary.Versions.UrlParameter);
+		var sVersionParameter = FlexUtils.getParameter(flexLibrary.Versions.UrlParameter, this._getUShellService("URLParsing"));
 		if (sVersionParameter) {
 			delete mParsedHash.params[flexLibrary.Versions.UrlParameter];
-		} else if ((this._isDraftAvailable() || bTriggerReload /* for discarding of dirty changes */)
-			&& !oReloadInfo.hasHigherLayerChanges) {
+		} else if (
+			(this._isDraftAvailable() || bTriggerReload /* for discarding of dirty changes */) &&
+			!oReloadInfo.hasHigherLayerChanges &&
+			this._getUShellService("AppLifeCycle")
+		) {
 			// reloading this way only works when we dont have to remove max-layer parameter, see _removeMaxLayerParameterForFLP
-			FlexUtils.getUshellContainer().getService("AppLifeCycle").reloadCurrentApp();
+			this._getUShellService("AppLifeCycle").reloadCurrentApp();
 		}
 		return mParsedHash;
 	};
@@ -1487,14 +1489,18 @@ function(
 			return this._triggerHardReload(oReloadInfo);
 		}
 
-		var mParsedHash = FlexUtils.getParsedURLHash();
+		var mParsedHash = FlexUtils.getParsedURLHash(this._getUShellService("URLParsing"));
 		if (!mParsedHash) {
-			return;
+			return undefined;
 		}
 
 		// allContexts do not change the url parameter to trigger a reload
-		if (oReloadInfo.allContexts && !oReloadInfo.hasHigherLayerChanges) {
-			FlexUtils.getUshellContainer().getService("AppLifeCycle").reloadCurrentApp();
+		if (
+			oReloadInfo.allContexts &&
+			!oReloadInfo.hasHigherLayerChanges &&
+			this._getUShellService("AppLifeCycle")
+		) {
+			this._getUShellService("AppLifeCycle").reloadCurrentApp();
 		}
 
 		mParsedHash = this._removeMaxLayerParameterForFLP(oReloadInfo, mParsedHash);
@@ -1601,7 +1607,7 @@ function(
 	};
 
 	RuntimeAuthoring.prototype._triggerReloadOnStart = function(oReloadInfo) {
-		FlexUtils.ifUShellContainerThen(function() {
+		if (this._getUShellService("CrossApplicationNavigation")) {
 			if (oReloadInfo.isDraftAvailable) {
 				// clears FlexState and triggers reloading of the flex data without blocking
 				VersionsAPI.loadDraftForApplication({
@@ -1615,7 +1621,7 @@ function(
 					allContexts: oReloadInfo.allContexts
 				});
 			}
-		}, ["CrossApplicationNavigation"]);
+		}
 		var sReason = this._getReloadMessageOnStart(oReloadInfo);
 		if (!sReason) {
 			return Promise.resolve();
@@ -1624,8 +1630,12 @@ function(
 		.then(function() {
 			RuntimeAuthoring.enableRestart(oReloadInfo.layer, this.getRootControlInstance());
 			// allContexts do not change the url parameter to trigger a reload
-			if (oReloadInfo.allContexts && !oReloadInfo.hasHigherLayerChanges) {
-				FlexUtils.getUshellContainer().getService("AppLifeCycle").reloadCurrentApp();
+			if (
+				oReloadInfo.allContexts &&
+				!oReloadInfo.hasHigherLayerChanges &&
+				this._getUShellService("AppLifeCycle")
+			) {
+				this._getUShellService("AppLifeCycle").reloadCurrentApp();
 			}
 			if (FlexUtils.getUshellContainer()) {
 				// clears FlexState and triggers reloading of the flex data without blocking
@@ -1651,7 +1661,8 @@ function(
 			layer: this.getLayer(),
 			selector: this.getRootControlInstance(),
 			ignoreMaxLayerParameter: false,
-			includeCtrlVariants: true
+			includeCtrlVariants: true,
+			URLParsingService: this._getUShellService("URLParsing")
 		};
 		return ReloadInfoAPI.getReloadReasonsForStart(oReloadInfo)
 		.then(function (oReloadInfo) {
@@ -1661,6 +1672,7 @@ function(
 			if (oReloadInfo.hasHigherLayerChanges || oReloadInfo.isDraftAvailable || oReloadInfo.allContexts) {
 				return this._triggerReloadOnStart(oReloadInfo);
 			}
+			return undefined;
 		}.bind(this));
 	};
 
@@ -1669,10 +1681,11 @@ function(
 	 * This function must only be called outside of the ushell.
 	 *
 	 * @param {Object} oReloadInfo - Information to determine reload is needed
-	 * @returns {Promise}
+	 * @returns {Promise} Resolves when page reload is triggered
 	 */
 	RuntimeAuthoring.prototype._triggerHardReload = function(oReloadInfo) {
 		oReloadInfo.parameters = document.location.search;
+		oReloadInfo.URLParsingService = this._getUShellService("URLParsing");
 		var sParameters = ReloadInfoAPI.handleUrlParametersForStandalone(oReloadInfo);
 		if (document.location.search !== sParameters) {
 			this._setUriParameter(sParameters);
@@ -1701,7 +1714,8 @@ function(
 				changesNeedReload: bChangesNeedReload,
 				isDraftAvailable: this._oVersionsModel.getProperty("/draftAvailable"),
 				versioningEnabled: this._oVersionsModel.getProperty("/versioningEnabled"),
-				activeVersion: this._oVersionsModel.getProperty("/activeVersion")
+				activeVersion: this._oVersionsModel.getProperty("/activeVersion"),
+				URLParsingService: this._getUShellService("URLParsing")
 			};
 			oReloadInfo = ReloadInfoAPI.getReloadMethod(oReloadInfo);
 			return this._handleReloadMessageBoxOnExit(oReloadInfo).then(function () {
@@ -1719,10 +1733,31 @@ function(
 	 * @param {string} sNewMode The new value for the 'mode' property
 	 */
 	RuntimeAuthoring.prototype.setMode = function (sNewMode) {
-		if (this.getMode() !== sNewMode) {
-			var bOverlaysEnabled = sNewMode === "adaptation";
-			this._oDesignTime.setEnabled(bOverlaysEnabled);
-			this.getPluginManager().getPlugin("tabHandling")[bOverlaysEnabled ? "removeTabIndex" : "restoreTabIndex"]();
+		var sCurrentMode = this.getMode();
+		if (sCurrentMode !== sNewMode) {
+			var oChangeVisualization = this.getChangeVisualization && this.getChangeVisualization();
+			if (sNewMode === "visualization" || sCurrentMode === "visualization") {
+				oChangeVisualization.triggerModeChange(this.getRootControl(), this.getToolbar());
+			}
+			var oTabHandlingPlugin = this.getPluginManager().getPlugin("tabHandling");
+			var oSelectionPlugin = this.getPluginManager().getPlugin("selection");
+
+			// Switch between another mode and navigation -> toggle overlay & App-Tabindex enablement
+			if (sCurrentMode === "navigation" || sNewMode === "navigation") {
+				this._oDesignTime.setEnabled(sNewMode !== "navigation");
+				oTabHandlingPlugin[(sNewMode === "navigation") ? "restoreTabIndex" : "removeTabIndex"]();
+			}
+
+			oTabHandlingPlugin[(sNewMode === "adaptation") ? "restoreOverlayTabIndex" : "removeOverlayTabIndex"]();
+			oSelectionPlugin.setIsActive(!(sNewMode === "visualization"));
+
+			Overlay.getOverlayContainer().toggleClass("sapUiRtaVisualizationMode", (sNewMode === "visualization"));
+			if (sNewMode === "visualization") {
+				jQuery(".sapUiDtOverlayMovable").css("cursor", "default");
+			} else {
+				jQuery(".sapUiDtOverlayMovable").css("cursor", "move");
+			}
+
 			this._oToolbarControlsModel.setProperty("/modeSwitcher", sNewMode);
 			this.setProperty("mode", sNewMode);
 			this.fireModeChanged({mode: sNewMode});
@@ -1938,5 +1973,9 @@ function(
 		return this.startService(sName);
 	};
 
+	RuntimeAuthoring.prototype._getUShellService = function(sServiceName) {
+		return FlexUtils.getUshellContainer() && this._mUShellServices[sServiceName];
+	};
+
 	return RuntimeAuthoring;
 });

package/src/sap/ui/rta/Utils.js

@@ -12,6 +12,9 @@ sap.ui.define([
 	"sap/ui/fl/LayerUtils",
 	"sap/ui/dt/OverlayUtil",
 	"sap/ui/dt/DOMUtil",
+	"sap/ui/dt/ElementUtil",
+	"sap/ui/dt/MetadataPropagationUtil",
+	"sap/ui/rta/util/hasStableId",
 	"sap/m/MessageBox",
 	"sap/ui/rta/util/BindingsExtractor",
 	"sap/base/util/restricted/_omit",
@@ -26,6 +29,9 @@ function(
 	FlexLayerUtils,
 	OverlayUtil,
 	DOMUtil,
+	ElementUtil,
+	MetadataPropagationUtil,
+	hasStableId,
 	MessageBox,
 	BindingsExtractor,
 	_omit,
@@ -40,7 +46,7 @@ function(
 	 * @class Utility functionality to work with controls, e.g. iterate through aggregations, find parents, etc.
 	 *
 	 * @author SAP SE
-	 * @version 1.93.3
+	 * @version 1.96.2
 	 *
 	 * @private
 	 * @static
@@ -553,5 +559,71 @@ function(
 		}, {});
 	};
 
+	/**
+	 * Checks drop ability for aggregation overlays
+	 * @param {sap.ui.dt.Overlay} oAggregationOverlay Aggregation overlay object
+	 * @param {sap.ui.dt.ElementOverlay} oMovedOverlay Overlay being moved/added
+	 * @param {sap.ui.rta.Plugin} oPlugin RTA plugin calling this method
+	 * @param {boolean} [bOverlayNotInDom] Flag defining if overlay is not in DOM
+	 * @return {Promise.<boolean>} Promise with true value if overlay can be added to the aggregation overlay or false value if not.
+	 * @override
+	 */
+	Utils.checkTargetZone = function(oAggregationOverlay, oMovedOverlay, oPlugin, bOverlayNotInDom) {
+		function fnHasMoveAction(oAggregationOverlay, oElement, oRelevantContainer, oPlugin) {
+			var oAggregationDTMetadata = oAggregationOverlay.getDesignTimeMetadata();
+			var oMoveAction = oAggregationDTMetadata.getAction("move", oElement);
+			if (!oMoveAction) {
+				return Promise.resolve(false);
+			}
+			// moveChangeHandler information is always located on the relevant container
+			return oPlugin.hasChangeHandler(oMoveAction.changeType, oRelevantContainer);
+		}
+
+		return ElementUtil.checkTargetZone(oAggregationOverlay, oMovedOverlay, bOverlayNotInDom)
+			.then(function(bTargetZone) {
+				if (!bTargetZone) {
+					return false;
+				}
+
+				var oMovedElement = oMovedOverlay.getElement();
+				var oTargetOverlay = oAggregationOverlay.getParent();
+				var oMovedRelevantContainer = oMovedOverlay.getRelevantContainer();
+
+				// the element or the parent overlay might be destroyed or not available
+				if (!oMovedElement || !oTargetOverlay) {
+					return false;
+				}
+
+				var oTargetElement = oTargetOverlay.getElement();
+				var oAggregationDtMetadata = oAggregationOverlay.getDesignTimeMetadata();
+
+				// determine target relevantContainer
+				var vTargetRelevantContainerAfterMove = MetadataPropagationUtil.getRelevantContainerForPropagation(oAggregationDtMetadata.getData(), oMovedElement);
+				vTargetRelevantContainerAfterMove = vTargetRelevantContainerAfterMove || oTargetElement;
+
+				// check for same relevantContainer
+				if (
+					!oMovedRelevantContainer
+					|| !vTargetRelevantContainerAfterMove
+					|| !hasStableId(oTargetOverlay)
+					|| oMovedRelevantContainer !== vTargetRelevantContainerAfterMove
+				) {
+					return false;
+				}
+
+				// check if binding context is the same
+				if (
+					// binding context is not relevant if the element is being moved inside its parent
+					oMovedOverlay.getParent().getElement() !== oTargetElement
+					&& !Utils.checkSourceTargetBindingCompatibility(oMovedElement, oTargetElement)
+				) {
+					return false;
+				}
+
+				// check if movedOverlay is movable into the target aggregation
+				return fnHasMoveAction(oAggregationOverlay, oMovedElement, vTargetRelevantContainerAfterMove, oPlugin);
+			});
+	};
+
 	return Utils;
 }, /* bExport= */true);

package/src/sap/ui/rta/appVariant/AppVariantDialog.js

@@ -143,9 +143,10 @@ function(
 		var aIcons = [];
 
 		aUI5Icons.forEach(function(sName) {
+			var iconInfo = IconPool.getIconInfo(sName);
 			aIcons.push({
-				icon: IconPool.getIconInfo(sName).uri,
-				name: sName.toLowerCase()
+				icon: iconInfo.uri,
+				name: (iconInfo.text === "") ? sName.toLowerCase() : iconInfo.text
 			});
 		});
 
@@ -283,7 +284,7 @@ function(
 
 			// initialize dialog and create member variables.
 			this.setTitle(oResources.getText("CREATE_APP_VARIANT_DIALOG_TITLE"));
-			this.setContentWidth("620px");
+			this.setContentWidth("700px");
 			this.setContentHeight("250px");
 
 			oCustomTileModel = new JSONModel({