@openui5/sap.ui.rta 1.114.0 → 1.115.1

package/src/sap/ui/rta/service/Outline.js

@@ -44,7 +44,7 @@ sap.ui.define([
 	 * @author SAP SE
 	 * @experimental Since 1.56
 	 * @since 1.56
-	 * @version 1.114.0
+	 * @version 1.115.1
 	 * @private
 	 * @ui5-restricted
 	 */

package/src/sap/ui/rta/service/Property.js

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * @author SAP SE
 	 * @experimental Since 1.58
 	 * @since 1.58
-	 * @version 1.114.0
+	 * @version 1.115.1
 	 * @private
 	 * @ui5-restricted
 	*/

package/src/sap/ui/rta/service/Selection.js

@@ -15,7 +15,7 @@ sap.ui.define(function () {
 	 * @author SAP SE
 	 * @experimental Since 1.58
 	 * @since 1.58
-	 * @version 1.114.0
+	 * @version 1.115.1
 	 * @private
 	 * @ui5-restricted
 	*/

package/src/sap/ui/rta/service/SupportTools.js

@@ -27,7 +27,7 @@ sap.ui.define([
 	 * @author SAP SE
 	 * @experimental Since 1.106
 	 * @since 1.106
-	 * @version 1.114.0
+	 * @version 1.115.1
 	 * @private
 	 * @ui5-restricted
 	 */
@@ -122,6 +122,11 @@ sap.ui.define([
 			.then(console.log); // eslint-disable-line no-console
 	}
 
+	function printDesignTimeMetadata(oRta, mPayload) {
+		var oOverlay = Core.byId(mPayload.overlayId);
+		console.log(oOverlay.getDesignTimeMetadata().getData()); // eslint-disable-line no-console
+	}
+
 	// List of supported handlers
 	var mHandlers = {
 		getOverlayInfo: {
@@ -132,6 +137,10 @@ sap.ui.define([
 		printChangeHandler: {
 			handler: printChangeHandler,
 			id: "ui5FlexibilitySupport.submodules.overlayInfo"
+		},
+		printDesignTimeMetadata: {
+			handler: printDesignTimeMetadata,
+			id: "ui5FlexibilitySupport.submodules.overlayInfo"
 		}
 	};
 
@@ -143,6 +152,7 @@ sap.ui.define([
 	 *  - type: specifies, what action should be taken. Possible values:
 	 *   - getOverlayInfo (request information about an overlay)
 	 *   - printChangeHandler (a specified change handler object is to be printed to the console)
+	 *   - printDesignTimeMetadata (the calculated designtime metadata of the overlay is to be printed to the console)
 	 * - content: type-specific information, e.g. for getOverlayInfo, an 'overlayId' is provided
 	 *
 	 * @method sap.ui.rta.service.SupportTools.onMessageReceived

package/src/sap/ui/rta/toolbar/Adaptation.js

@@ -53,7 +53,7 @@ sap.ui.define([
 	 * @extends sap.ui.rta.toolbar.Base
 	 *
 	 * @author SAP SE
-	 * @version 1.114.0
+	 * @version 1.115.1
 	 *
 	 * @constructor
 	 * @private
@@ -352,15 +352,34 @@ sap.ui.define([
 	}
 
 	function onSaveAsAdaptation() {
-		this.getExtension("contextBasedSaveAs", SaveAsAdaptation).openAddAdaptationDialog(this.getRtaInformation().flexSettings.layer);
+		Utils.checkDraftOverwrite(this.getModel("versions"))
+		.then(function() {
+			this.getExtension("contextBasedSaveAs", SaveAsAdaptation).openAddAdaptationDialog(this.getRtaInformation().flexSettings.layer);
+		}.bind(this))
+		.catch(handleError);
 	}
 
 	function onEditAdaptation() {
-		this.getExtension("contextBasedSaveAs", SaveAsAdaptation).openAddAdaptationDialog(this.getRtaInformation().flexSettings.layer, true /*bIsEditMode*/);
+		Utils.checkDraftOverwrite(this.getModel("versions"))
+		.then(function() {
+			this.getExtension("contextBasedSaveAs", SaveAsAdaptation).openAddAdaptationDialog(this.getRtaInformation().flexSettings.layer, true /*bIsEditMode*/);
+		}.bind(this))
+		.catch(handleError);
+	}
+
+	function handleError(oError) {
+		if (oError !== "cancel") {
+			Utils.showMessageBox("error", "MSG_LREP_TRANSFER_ERROR", {error: oError});
+			Log.error("sap.ui.rta: " + oError.stack || oError.message || oError);
+		}
 	}
 
 	function onDeleteAdaptation() {
-		this.fireEvent("deleteAdaptation");
+		Utils.checkDraftOverwrite(this.getModel("versions"))
+		.then(function() {
+			this.fireEvent("deleteAdaptation");
+		}.bind(this))
+		.catch(handleError);
 	}
 
 	function onManageAdaptations() {

package/src/sap/ui/rta/toolbar/Base.js

@@ -27,7 +27,7 @@ sap.ui.define([
 	 * @extends sap.m.HBox
 	 *
 	 * @author SAP SE
-	 * @version 1.114.0
+	 * @version 1.115.1
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/rta/toolbar/Fiori.js

@@ -32,7 +32,7 @@ function(
 	 * @extends sap.ui.rta.toolbar.Adaptation
 	 *
 	 * @author SAP SE
-	 * @version 1.114.0
+	 * @version 1.115.1
 	 *
 	 * @constructor
 	 * @private
@@ -50,7 +50,7 @@ function(
 
 	Fiori.prototype.init = function () {
 		this._oRenderer = Utils.getFiori2Renderer();
-		this._oFioriHeader = this._oRenderer.getRootControl().getOUnifiedShell().getHeader();
+		this._oFioriHeader = this._oRenderer.getRootControl().getShellHeader();
 		Adaptation.prototype.init.apply(this, arguments);
 	};
 

package/src/sap/ui/rta/toolbar/FioriLike.js

@@ -20,7 +20,7 @@ function(
 	 * @extends sap.ui.rta.toolbar.Adaptation
 	 *
 	 * @author SAP SE
-	 * @version 1.114.0
+	 * @version 1.115.1
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/rta/toolbar/OverflowToolbarButton.js

@@ -23,7 +23,7 @@ sap.ui.define([
 	 * @extends sap.m.OverflowToolbarButton
 	 *
 	 * @author SAP SE
-	 * @version 1.114.0
+	 * @version 1.115.1
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/rta/toolbar/Personalization.js

@@ -22,7 +22,7 @@ function(
 	 * @extends sap.ui.rta.toolbar.Base
 	 *
 	 * @author SAP SE
-	 * @version 1.114.0
+	 * @version 1.115.1
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/rta/toolbar/Standalone.js

@@ -20,7 +20,7 @@ function(
 	 * @extends sap.ui.rta.toolbar.Adaptation
 	 *
 	 * @author SAP SE
-	 * @version 1.114.0
+	 * @version 1.115.1
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/rta/toolbar/contextBased/ManageAdaptations.js

@@ -77,6 +77,8 @@ function(
 					moveDown: moveDown.bind(this),
 					onDropSelectedAdaptation: onDropSelectedAdaptation.bind(this),
 					onSaveReorderedAdaptations: onSaveReorderedAdaptations.bind(this),
+					isAdaptationsSelected: isAdaptationsSelected.bind(this),
+					getIndexOfSelectedAdaptation: getIndexOfSelectedAdaptation.bind(this),
 					onClose: onCloseDialog.bind(this)
 				}
 			}).then(function(oDialog) {
@@ -85,7 +87,7 @@ function(
 				this.getToolbar().addDependent(this._oManageAdaptationDialog);
 			}.bind(this));
 		} else {
-			setEnabledPropertyOfMoveButton.call(this, false);
+			syncEnabledPropertyOfMoveButtons.call(this);
 			enableDragAndDropForAdaptationTable.call(this, true);
 			enableSaveButton.call(this, false);
 		}
@@ -127,26 +129,36 @@ function(
 		var oOptions = {
 			year: "numeric",
 			month: "short",
-			day: "numeric"
+			day: "numeric",
+			hour: "numeric",
+			minute: "numeric"
 		};
 		var sLanguage = sap.ui.getCore().getConfiguration().getLanguage();
-		return sModifiedBy + "\n" + oUi5Date.toLocaleDateString(sLanguage, oOptions);
+		return sModifiedBy + "\n" + oUi5Date.toLocaleTimeString(sLanguage, oOptions);
 	}
 
 	function onSelectionChange(oEvent) {
 		if (oEvent.getParameter("selected") === true) {
 			this._oControlConfigurationModel.setProperty("/isTableItemSelected", true);
-			if (isSearchFieldValueEmpty.call(this)) {
-				setEnabledPropertyOfMoveButton.call(this, true);
-			}
+			syncEnabledPropertyOfMoveButtons.call(this);
 		}
 	}
 
-	function setEnabledPropertyOfMoveButton(bIsEnabled) {
+	function syncEnabledPropertyOfMoveButtons() {
 		var oUpButton = getControlInDialog.call(this, "moveUpButton");
 		var oDownButton = getControlInDialog.call(this, "moveDownButton");
-		oUpButton.setEnabled(bIsEnabled);
-		oDownButton.setEnabled(bIsEnabled);
+		if (isSearchFieldValueEmpty.call(this)) {
+			if (isAdaptationsSelected.call(this)) {
+				oUpButton.setEnabled(getIndexOfSelectedAdaptation.call(this) > 0);
+				oDownButton.setEnabled(getIndexOfSelectedAdaptation.call(this) < this.oAdaptationsModel.getProperty("/count") - 1);
+			} else {
+				oUpButton.setEnabled(false);
+				oDownButton.setEnabled(false);
+			}
+		} else {
+			oUpButton.setEnabled(false);
+			oDownButton.setEnabled(false);
+		}
 	}
 
 	// ------ search field ------
@@ -157,7 +169,7 @@ function(
 		var oDefaultApplicationTable = getDefaultApplicationTable.call(this);
 		var sDefaultTableText = getDefaultApplicationTitle.call(this);
 		if (sQuery && sQuery.length > 0) {
-			setEnabledPropertyOfMoveButton.call(this, false);
+			syncEnabledPropertyOfMoveButtons.call(this);
 			enableDragAndDropForAdaptationTable.call(this, false);
 			//filter Table context
 			var oFilterByTitle = new Filter("title", FilterOperator.Contains, sQuery);
@@ -181,7 +193,7 @@ function(
 		} else {
 			enableDragAndDropForAdaptationTable.call(this, true);
 			if (this._oControlConfigurationModel.getProperty("/isTableItemSelected")) {
-				setEnabledPropertyOfMoveButton.call(this, true);
+				syncEnabledPropertyOfMoveButtons.call(this);
 			}
 			oDefaultApplicationTable.setVisible(true);
 		}
@@ -235,6 +247,7 @@ function(
 		// after move select the sibling
 		oTable.getItems()[iSiblingItemIndex].setSelected(true).focus();
 		enableSaveButton.call(this, didAdaptationsPriorityChange.call(this));
+		syncEnabledPropertyOfMoveButtons.call(this);
 	}
 
 	function onDropSelectedAdaptation(oEvent) {
@@ -318,20 +331,37 @@ function(
 		getAdaptationsTable.call(this).getDragDropConfig()[0].setEnabled(bIsEnabled);
 	}
 
+	function isAdaptationsSelected() {
+		var oAdaptationsTable = getAdaptationsTable.call(this);
+		return oAdaptationsTable.getSelectedContextPaths().length > 0;
+	}
+
+	function getIndexOfSelectedAdaptation() {
+		var oAdaptationsTable = getAdaptationsTable.call(this);
+		if (oAdaptationsTable.getSelectedContextPaths().length > 0) {
+			var aSplitedPath = oAdaptationsTable.getSelectedContextPaths()[0].split("/");
+			var iIndexOfSelectedItem = Number(aSplitedPath[aSplitedPath.length - 1]);
+			return iIndexOfSelectedItem;
+		}
+		return -1;
+	}
+
 	function onSaveReorderedAdaptations() {
-		var oRtaInformation = this.getToolbar().getRtaInformation();
-		var aAdaptationPriorities = this.oAdaptationsModel.getProperty("/adaptations").map(function(oAdaptation) { return oAdaptation.id; });
-		ContextBasedAdaptationsAPI.reorder({control: oRtaInformation.rootControl, layer: oRtaInformation.flexSettings.layer, parameters: {priorities: aAdaptationPriorities}})
+		Utils.checkDraftOverwrite(this.getModel("versions")).then(function() {
+			var oRtaInformation = this.getToolbar().getRtaInformation();
+			var aAdaptationPriorities = this.oAdaptationsModel.getProperty("/adaptations").map(function(oAdaptation) { return oAdaptation.id; });
+			return ContextBasedAdaptationsAPI.reorder({control: oRtaInformation.rootControl, layer: oRtaInformation.flexSettings.layer, parameters: {priorities: aAdaptationPriorities}});
+		}.bind(this)).then(function() {
+			var oAllUpdatedAdaptations = Object.assign(this.oAdaptationsModel.getProperty("/allAdaptations"), this.oAdaptationsModel.getProperty("/adaptations"));
+			this.oAdaptationsModel.updateAdaptations(oAllUpdatedAdaptations);
+			onCloseDialog.call(this);
+		}.bind(this))
 		.catch(function(oError) {
-			Log.error(oError.stack);
-			var sMessage = "MSG_LREP_TRANSFER_ERROR";
-			var oOptions = { titleKey: "BTN_MANAGE_APP_CTX" };
-			oOptions.details = oError.userMessage;
-			Utils.showMessageBox("error", sMessage, oOptions);
+			if (oError !== "cancel") {
+				Utils.showMessageBox("error", "MSG_LREP_TRANSFER_ERROR", { titleKey: "BTN_MANAGE_APP_CTX", error: oError});
+				Log.error("sap.ui.rta: " + oError.stack || oError.message || oError);
+			}
 		});
-		var oAllUpdatedAdaptations = Object.assign(this.oAdaptationsModel.getProperty("/allAdaptations"), this.oAdaptationsModel.getProperty("/adaptations"));
-		this.oAdaptationsModel.updateAdaptations(oAllUpdatedAdaptations);
-		onCloseDialog.call(this);
 	}
 
 	function onCloseDialog() {

package/src/sap/ui/rta/toolbar/contextBased/SaveAsAdaptation.js

@@ -43,7 +43,7 @@ sap.ui.define([
 	 * @class
 	 *
 	 * @author SAP SE
-	 * @version 1.114.0
+	 * @version 1.115.1
 	 *
 	 * @constructor
 	 * @private
@@ -279,7 +279,8 @@ sap.ui.define([
 		var oInputField = this.getToolbar().getControl("addAdaptationDialog--saveAdaptation-title-input");
 		var bEnable;
 		var bRolesSelectedAndValidTitle = this._oContextComponentInstance.getSelectedContexts().role.length > 0
-			&& oInputField.getValueState() === ValueState.None;
+			&& oInputField.getValueState() === ValueState.None
+			&& oInputField.getValue().length > 0;
 		if (this._bIsEditMode && this._mEditProperties && this.oDialogModel) {
 			bEnable = bRolesSelectedAndValidTitle
 				// check that some of the properties title, priority, roles have been changed

package/src/sap/ui/rta/toolbar/translation/Translation.js

@@ -49,7 +49,7 @@ sap.ui.define([
 	 * @class
 	 *
 	 * @author SAP SE
-	 * @version 1.114.0
+	 * @version 1.115.1
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/rta/toolbar/versioning/Versioning.js

@@ -36,7 +36,7 @@ sap.ui.define([
 	 * @class
 	 *
 	 * @author SAP SE
-	 * @version 1.114.0
+	 * @version 1.115.1
 	 *
 	 * @constructor
 	 * @private
@@ -124,7 +124,7 @@ sap.ui.define([
 
 		return DateFormat.getInstance({
 			format: "yMMMdjm"
-		}).format(new Date(sTimeStamp));
+		}).format(new Date(sTimeStamp + "Z"));
 	}
 
 	function getGroupHeaderFactory(oGroup) {

package/src/sap/ui/rta/util/PluginManager.js

@@ -68,7 +68,7 @@ sap.ui.define([
 	 * Constructor for a new sap.ui.rta.util.PluginManager
 	 * @extends sap.ui.base.ManagedObject
 	 * @author SAP SE
-	 * @version 1.114.0
+	 * @version 1.115.1
 	 * @constructor
 	 * @private
 	 * @since 1.86

package/src/sap/ui/rta/util/PopupManager.js

@@ -42,7 +42,7 @@ sap.ui.define([
 	 * Constructor for a new sap.ui.rta.util.PopupManager
 	 * @extends sap.ui.base.ManagedObject
 	 * @author SAP SE
-	 * @version 1.114.0
+	 * @version 1.115.1
 	 * @constructor
 	 * @private
 	 * @since 1.48

package/src/sap/ui/rta/util/ReloadManager.js

@@ -30,7 +30,7 @@ sap.ui.define([
 	 * @namespace sap.ui.rta.util.ReloadManager
 	 * @alias sap.ui.rta.util.ReloadManager
 	 * @since 1.104
-	 * @version 1.114.0
+	 * @version 1.115.1
 	 * @private
 	 * @ui5-restricted
 	 */
@@ -77,7 +77,7 @@ sap.ui.define([
 			sReason = "MSG_DRAFT_EXISTS";
 		} else if (oReloadInfo.allContexts) {
 			sReason = "MSG_RESTRICTED_CONTEXT_EXIST";
-		} // TODO add app descr changes case for start?
+		}// TODO add app descr changes case for start?
 		return sReason;
 	}
 
@@ -94,6 +94,9 @@ sap.ui.define([
 			if (oReloadInfo.allContexts) {
 				return "MSG_RELOAD_WITH_PERSONALIZATION_AND_RESTRICTED_CONTEXT";
 			}
+			if (oReloadInfo.switchEndUserAdaptation) {
+				return "MSG_RELOAD_WITH_PERSONALIZATION_AND_CONTEXT_BASED_ADAPTATION";
+			}
 			return "MSG_RELOAD_WITH_PERSONALIZATION_AND_VIEWS";
 		}
 
@@ -112,6 +115,10 @@ sap.ui.define([
 		if (oReloadInfo.allContexts) {
 			return "MSG_RELOAD_WITHOUT_ALL_CONTEXT";
 		}
+
+		if (oReloadInfo.switchEndUserAdaptation) {
+			return "MSG_RELOAD_OTHER_CONTEXT_BASED_ADAPTATION";
+		}
 		return undefined;
 	}
 
@@ -127,33 +134,34 @@ sap.ui.define([
 	}
 
 	function triggerReloadOnStart(oReloadInfo, bVersioningEnabled, bDeveloperMode) {
-		if (mUShellServices.CrossApplicationNavigation && bVersioningEnabled) {
-			// clears FlexState and triggers reloading of the flex data without blocking
-			if (oReloadInfo.isDraftAvailable) {
-				VersionsAPI.loadDraftForApplication({
-					control: oReloadInfo.selector,
-					layer: oReloadInfo.layer,
-					allContexts: oReloadInfo.allContexts,
-					adaptationId: oReloadInfo.adaptationId
-				});
-			} else {
-				VersionsAPI.loadVersionForApplication({
+		return Promise.resolve().then(function() {
+			if (mUShellServices.CrossApplicationNavigation && bVersioningEnabled) {
+				// clears FlexState and triggers reloading of the flex data without blocking
+				if (oReloadInfo.isDraftAvailable) {
+					return VersionsAPI.loadDraftForApplication({
+						control: oReloadInfo.selector,
+						layer: oReloadInfo.layer,
+						allContexts: oReloadInfo.allContexts,
+						adaptationId: oReloadInfo.adaptationId
+					});
+				}
+				return VersionsAPI.loadVersionForApplication({
 					control: oReloadInfo.selector,
 					layer: oReloadInfo.layer,
 					allContexts: oReloadInfo.allContexts,
 					adaptationId: oReloadInfo.adaptationId
 				});
 			}
-		}
-		var sReason = getReloadMessageOnStart(oReloadInfo);
-		// showing messages in visual editor is leading to blocked screen. In this case we should reload without message
-		var pMessageBox = bDeveloperMode ? Promise.resolve() : Utils.showMessageBox("information", sReason);
-		return pMessageBox.then(function() {
+			return undefined;
+		}).then(function() {
+			var sReason = getReloadMessageOnStart(oReloadInfo);
+			// showing messages in visual editor is leading to blocked screen. In this case we should reload without message
+			return bDeveloperMode ? undefined : Utils.showMessageBox("information", sReason);
+		}).then(function() {
 			ReloadManager.enableAutomaticStart(oReloadInfo.layer, oReloadInfo.selector);
 			oReloadInfo.onStart = true;
 			return ReloadManager.triggerReload(oReloadInfo);
-		})
-		.then(function() {
+		}).then(function() {
 			return true;
 		});
 	}
@@ -270,6 +278,7 @@ sap.ui.define([
 	 * @param {sap.ui.fl.Selector} mProperties.selector - Root control
 	 * @param {boolean} mProperties.versioningEnabled - Whether versioning is enabled
 	 * @param {boolean} mProperties.developerMode - Whether the developer mode is set
+	 * @param {string} mProperties.adaptationId - Context-based adaptation ID of the currently displayed adaptation
 	 *
 	 * @return {Promise<boolean>} Resolving to <code>false</code> means that reload is not necessary
 	 */
@@ -282,8 +291,7 @@ sap.ui.define([
 			URLParsingService: mUShellServices.URLParsing
 		});
 		return ReloadInfoAPI.getReloadReasonsForStart(mProperties).then(function(oReloadInfo) {
-			//TODO: add reload trigger for context-based adaptations
-			if (oReloadInfo.hasHigherLayerChanges || oReloadInfo.isDraftAvailable || oReloadInfo.allContexts) {
+			if (oReloadInfo.hasHigherLayerChanges || oReloadInfo.isDraftAvailable || oReloadInfo.allContexts || oReloadInfo.switchAdaptation) {
 				return triggerReloadOnStart(oReloadInfo, mProperties.versioningEnabled, mProperties.developerMode);
 			}
 			return undefined;

package/src/sap/ui/rta/util/ServiceEventBus.js

@@ -19,7 +19,7 @@ function(
 	 *
 	 * @extends sap.ui.core.EventBus
 	 * @author SAP SE
-	 * @version 1.114.0
+	 * @version 1.115.1
 	 * @private
 	 * @since 1.56.0
 	 * @alias sap.ui.rta.util.ServiceEventBus

package/src/sap/ui/rta/util/changeVisualization/ChangeIndicator.js

@@ -40,7 +40,7 @@ sap.ui.define([
 	 * @alias sap.ui.rta.util.changeVisualization.ChangeIndicator
 	 * @author SAP SE
 	 * @since 1.84.0
-	 * @version 1.114.0
+	 * @version 1.115.1
 	 * @private
 	 */
 	var ChangeIndicator = Control.extend("sap.ui.rta.util.changeVisualization.ChangeIndicator", {
@@ -106,6 +106,8 @@ sap.ui.define([
 							type: "object"
 						}
 					}
+				},
+				detailPopoverOpened: {
 				}
 			}
 		},
@@ -140,8 +142,8 @@ sap.ui.define([
 		constructor: function() {
 			this._oDetailModel = new JSONModel();
 			this._oDetailModel.setDefaultBindingMode("OneWay");
-			this._fnHoverTrue = this._toggleHoverStyleClasses.bind(this, true);
-			this._fnHoverFalse = this._toggleHoverStyleClasses.bind(this, false);
+			this._fnHoverTrue = this._setHoverStyleClasses.bind(this, true);
+			this._fnHoverFalse = this._setHoverStyleClasses.bind(this, false);
 			Control.prototype.constructor.apply(this, arguments);
 			// is needed to prevent that multiple events listeners are attached
 			// to the same overlay because setVisible is called multiple times
@@ -149,14 +151,19 @@ sap.ui.define([
 		}
 	});
 
-	function handleBrowserEventsOnElement(oElement, sEventHandler) {
-		oElement[sEventHandler]("click", this._onSelect, this);
-		oElement[sEventHandler]("tap", this._onSelect, this);
-		oElement[sEventHandler]("keydown", this._onKeyDown, this);
-		oElement[sEventHandler]("mouseout", this._fnHoverFalse);
-		oElement[sEventHandler]("focusout", this._fnHoverFalse);
-		oElement[sEventHandler]("mouseover", this._fnHoverTrue);
-		oElement[sEventHandler]("focusin", this._fnHoverTrue);
+	function handleBrowserEventsOnOverlay(oOverlay, sEventHandler) {
+		oOverlay[sEventHandler]("click", this._onSelect, this);
+		oOverlay[sEventHandler]("tap", this._onSelect, this);
+		oOverlay[sEventHandler]("keydown", this._onKeyDown, this);
+		oOverlay[sEventHandler]("mouseover", this._fnHoverTrue);
+		oOverlay[sEventHandler]("focusin", this._fnHoverTrue);
+	}
+
+	// Hover/focus events are handled by the ChangeVisualization (because it can affect multiple indicators at once)
+	function handleBrowserEventsOnIndicator(oIndicator, sEventHandler) {
+		oIndicator[sEventHandler]("click", this._onSelect, this);
+		oIndicator[sEventHandler]("tap", this._onSelect, this);
+		oIndicator[sEventHandler]("keydown", this._onKeyDown, this);
 	}
 
 	function centerVertically(oIndicator) {
@@ -257,7 +264,7 @@ sap.ui.define([
 
 	ChangeIndicator.prototype.init = function() {
 		this._iOldTabIndex = 0;
-		handleBrowserEventsOnElement.call(this, this, "attachBrowserEvent");
+		handleBrowserEventsOnIndicator.call(this, this, "attachBrowserEvent");
 	};
 
 	ChangeIndicator.prototype.setVisible = function(bVisible) {
@@ -266,11 +273,11 @@ sap.ui.define([
 		// needed because the change indicator cleanup is only triggered on save and exit
 		if (oOverlay) {
 			if (bVisible && !this._bEventAttachedToElement) {
-				handleBrowserEventsOnElement.call(this, oOverlay, "attachBrowserEvent");
+				handleBrowserEventsOnOverlay.call(this, oOverlay, "attachBrowserEvent");
 				this._bEventAttachedToElement = true;
 			}
 			if (!bVisible) {
-				handleBrowserEventsOnElement.call(this, oOverlay, "detachBrowserEvent");
+				handleBrowserEventsOnOverlay.call(this, oOverlay, "detachBrowserEvent");
 				this._bEventAttachedToElement = false;
 				if (this.getAggregation("_popover")) {
 					this.getAggregation("_popover").destroy();
@@ -320,7 +327,7 @@ sap.ui.define([
 		if (this._bScheduledForFocus) {
 			// Element was supposed to be focused before rendering
 			this.focus();
-			this._toggleHoverStyleClasses(true);
+			this._setHoverStyleClasses(true);
 		}
 	};
 
@@ -334,9 +341,9 @@ sap.ui.define([
 			if (this.getAggregation("_popover")) {
 				this.getAggregation("_popover").destroy();
 			}
-			handleBrowserEventsOnElement.call(this, oOverlay, "detachBrowserEvent");
+			handleBrowserEventsOnOverlay.call(this, oOverlay, "detachBrowserEvent");
 		}
-		handleBrowserEventsOnElement.call(this, this, "detachBrowserEvent");
+		handleBrowserEventsOnIndicator.call(this, this, "detachBrowserEvent");
 	};
 
 	ChangeIndicator.prototype.setChanges = function(aChanges) {
@@ -353,7 +360,7 @@ sap.ui.define([
 	ChangeIndicator.prototype._onSelect = function(oEvent) {
 		this.focus();
 		oEvent.stopPropagation();
-		this._openDetailPopover();
+		this._toggleDetailPopover();
 	};
 
 	ChangeIndicator.prototype._onKeyDown = function(oEvent) {
@@ -366,11 +373,19 @@ sap.ui.define([
 		});
 	};
 
-	ChangeIndicator.prototype._toggleHoverStyleClasses = function(bAdd, oEvent) {
-		if (oEvent) {
-			oEvent.stopPropagation();
-			oEvent.preventDefault();
-		}
+	// When the detail popover is opened the overlay should be selected
+	ChangeIndicator.prototype.onDetailPopoverOpened = function(oEvent) {
+		oEvent.preventDefault();
+		this._setHoverStyleClasses(true);
+	};
+
+	ChangeIndicator.prototype.onIndicatorBrowserInteraction = function(bAdd, oEvent) {
+		oEvent.stopPropagation();
+		oEvent.preventDefault();
+		this._setHoverStyleClasses(bAdd);
+	};
+
+	ChangeIndicator.prototype._setHoverStyleClasses = function(bAdd) {
 		var oOverlay = Core.byId(this.getOverlayId());
 		if (oOverlay.getMetadata().getName() !== "sap.ui.dt.ElementOverlay") {
 			return;
@@ -380,7 +395,7 @@ sap.ui.define([
 		this[sFunctionName]("sapUiRtaHover");
 	};
 
-	ChangeIndicator.prototype._openDetailPopover = function() {
+	ChangeIndicator.prototype._toggleDetailPopover = function() {
 		if (!this.getAggregation("_popover")) {
 			//store the tabindex (tabindex will be removed on opening the popover)
 			this._iOldTabIndex = this.getDomRef().getAttribute("tabindex");
@@ -393,13 +408,16 @@ sap.ui.define([
 				this.setAggregation("_popover", oPopover);
 				oPopover.setModel(this._oDetailModel, "details");
 				oPopover.openBy(this);
+				this.fireDetailPopoverOpened();
 			}.bind(this));
 		} else {
 			if (this.getAggregation("_popover").isOpen()) {
 				return this.getAggregation("_popover").close();
 			}
 			this.getAggregation("_popover").openBy(this);
+			this.fireDetailPopoverOpened();
 		}
+		return undefined;
 	};
 
 	ChangeIndicator.prototype._showDependentElements = function(oEvent) {