@openui5/sap.ui.rta 1.100.0 → 1.102.1

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

@@ -30,7 +30,8 @@ sap.ui.define([
 	"sap/ui/rta/plugin/Settings",
 	"sap/ui/rta/plugin/Split",
 	"sap/ui/rta/plugin/Stretch",
-	"sap/ui/rta/plugin/LocalReset"
+	"sap/ui/rta/plugin/LocalReset",
+	"sap/ui/rta/plugin/Resize"
 ], function(
 	isEmptyObject,
 	values,
@@ -58,7 +59,8 @@ sap.ui.define([
 	SettingsPlugin,
 	SplitPlugin,
 	StretchPlugin,
-	LocalResetPlugin
+	LocalResetPlugin,
+	ResizePlugin
 ) {
 	"use strict";
 
@@ -66,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.100.0
+	 * @version 1.102.1
 	 * @constructor
 	 * @private
 	 * @since 1.86
@@ -181,6 +183,10 @@ sap.ui.define([
 				commandFactory: this._oCommandFactory
 			});
 
+			this._mDefaultPlugins["resize"] = new ResizePlugin({
+				commandFactory: this._oCommandFactory
+			});
+
 			this._mDefaultPlugins["contextMenu"] = new ContextMenuPlugin();
 
 			this._mDefaultPlugins["tabHandling"] = new TabHandlingPlugin();
@@ -207,7 +213,7 @@ sap.ui.define([
 			if (
 				oFlexSettings.layer === Layer.CUSTOMER
 				&& oSettings
-				&& !oSettings.isVersioningEnabled(oFlexSettings.layer)
+				&& oSettings.isPublicLayerAvailable()
 			) {
 				this._mDefaultPlugins["localReset"] = new LocalResetPlugin({
 					commandFactory: this._oCommandFactory

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.100.0
+	 * @version 1.102.1
 	 * @constructor
 	 * @private
 	 * @since 1.48

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

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

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

@@ -4,43 +4,59 @@
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 sap.ui.define([
-	"sap/ui/rta/RuntimeAuthoring",
+	"sap/base/Log",
 	"sap/ui/core/Control",
-	"sap/ui/fl/Utils",
-	"sap/ui/fl/Layer",
-	"sap/ui/fl/write/api/FeaturesAPI",
 	"sap/ui/core/UIComponent",
-	"sap/base/Log",
+	"sap/ui/fl/write/api/FeaturesAPI",
 	"sap/ui/fl/write/api/PersistenceWriteAPI",
-	"sap/ui/rta/util/showMessageBox"
+	"sap/ui/fl/Layer",
+	"sap/ui/fl/Utils",
+	"sap/ui/rta/util/showMessageBox",
+	"sap/ui/rta/RuntimeAuthoring"
 ], function(
-	RuntimeAuthoring,
+	Log,
 	Control,
-	FlexUtils,
-	Layer,
-	FeaturesAPI,
 	UIComponent,
-	Log,
+	FeaturesAPI,
 	PersistenceWriteAPI,
-	showMessageBox
+	Layer,
+	FlexUtils,
+	showMessageBox,
+	RuntimeAuthoring
 ) {
 	"use strict";
 
 	function checkKeyUser(sLayer) {
 		if (Layer.CUSTOMER === sLayer) {
 			return FeaturesAPI.isKeyUser()
-				.then(function (bIsKeyUser) {
+				.then(function(bIsKeyUser) {
 					if (!bIsKeyUser) {
-						throw new Error("Key user rights have not been granted to the current user");
+						var oError = Error("Key user rights have not been granted to the current user");
+						oError.reason = "isKeyUser";
+						throw oError;
 					}
 				});
 		}
 		return Promise.resolve();
 	}
 
+	function checkFlexEnabled(oAppComponent) {
+		var oManifest = oAppComponent.getManifest() || {};
+		var vFlexEnabled = oManifest["sap.ui5"] && oManifest["sap.ui5"].flexEnabled;
+
+		if (vFlexEnabled === false) {
+			var oError = Error("This app is not enabled for key user adaptation");
+			oError.reason = "flexEnabled";
+			throw oError;
+		}
+	}
+
 	/**
 	 * Starter util for UI adaptation.
 	 * With this API you are also able to modify the UI adaptation plugins list and or add some event handler functions to be called on start, failed and stop events.
+	 * The function also checks for the Key User authorization and the <code>flexEnabled</code> flag in the manifest.
+	 * If either check is not passed successfully the function returns a rejected Promise.
+	 *
 	 * @param {object} mOptions - Object with properties
 	 * @param {sap.ui.core.Control|sap.ui.core.UIComponent} mOptions.rootControl - Control instance to get the AppComponent. This then is used to start UI adaptation.
 	 * @param {function} [loadPlugins] - Callback function that enables the modification of the default plugin list of UI adaptation. UI adaptation is passed to this function and it should return a promise
@@ -51,78 +67,84 @@ sap.ui.define([
 	 * @private
 	 */
 	function adaptationStarter(mOptions, loadPlugins, onStart, onFailed, onStop) {
-		if (!(mOptions.rootControl instanceof Control) && !(mOptions.rootControl instanceof UIComponent)) {
-			return Promise.reject(new Error("An invalid root control was passed"));
-		}
-
 		var oRta;
-		return checkKeyUser(mOptions.flexSettings.layer)
-			.then(function () {
-				mOptions.rootControl = FlexUtils.getAppComponentForControl(mOptions.rootControl);
 
-				oRta = new RuntimeAuthoring(mOptions);
+		return Promise.resolve().then(function() {
+			if (!(mOptions.rootControl instanceof Control) && !(mOptions.rootControl instanceof UIComponent)) {
+				var oError = Error("An invalid root control was passed");
+				oError.reason = "rootControl";
+				throw oError;
+			}
+			mOptions.rootControl = FlexUtils.getAppComponentForControl(mOptions.rootControl);
+		})
+		.then(checkKeyUser.bind(undefined, mOptions.flexSettings.layer))
+		.then(function() {
+			return checkFlexEnabled(mOptions.rootControl);
+		})
+		.then(function() {
+			oRta = new RuntimeAuthoring(mOptions);
 
-				if (onStart) {
-					oRta.attachEvent("start", onStart);
-				}
-				if (onFailed) {
-					oRta.attachEvent("failed", onFailed);
-				}
-				var fnOnStop = onStop || function () {
-					oRta.destroy();
-				};
-				oRta.attachEvent("stop", fnOnStop);
+			if (onStart) {
+				oRta.attachEvent("start", onStart);
+			}
+			if (onFailed) {
+				oRta.attachEvent("failed", onFailed);
+			}
+			var fnOnStop = onStop || function() {
+				oRta.destroy();
+			};
+			oRta.attachEvent("stop", fnOnStop);
 
-				if (loadPlugins) {
-					return loadPlugins(oRta);
-				}
-			})
-			.then(function() {
-				return oRta.start();
-			})
-			.then(function() {
-				if (mOptions.flexSettings.layer === "CUSTOMER") {
-					var mPropertyBag = {
-						oComponent: mOptions.rootControl,
-						selector: mOptions.rootControl,
-						invalidateCache: false,
-						includeVariants: true,
-						includeCtrlVariants: true,
-						currentLayer: Layer.CUSTOMER
-					};
+			if (loadPlugins) {
+				return loadPlugins(oRta);
+			}
+		})
+		.then(function() {
+			return oRta.start();
+		})
+		.then(function() {
+			if (mOptions.flexSettings.layer === "CUSTOMER") {
+				var mPropertyBag = {
+					oComponent: mOptions.rootControl,
+					selector: mOptions.rootControl,
+					invalidateCache: false,
+					includeVariants: true,
+					includeCtrlVariants: true,
+					currentLayer: Layer.CUSTOMER
+				};
 
-					PersistenceWriteAPI.getChangesWarning(mPropertyBag)
-						.then(function(oWarningMessage) {
-							if (oWarningMessage.showWarning) {
-								var oRtaResourceBundle = sap.ui.getCore().getLibraryResourceBundle("sap.ui.rta");
-								var oMessageProps = oWarningMessage.warningType === "mixedChangesWarning"
-									? {
-										text: "MSG_ADAPTATION_STARTER_MIXED_CHANGES_WARNING",
-										title: "TIT_ADAPTATION_STARTER_MIXED_CHANGES_TITLE"
-									}
-									: {
-										text: "MSG_ADAPTATION_STARTER_NO_CHANGES_IN_P_WARNING",
-										title: "TIT_ADAPTATION_STARTER_NO_CHANGES_IN_P_TITLE"
-									};
+				PersistenceWriteAPI.getChangesWarning(mPropertyBag)
+					.then(function(oWarningMessage) {
+						if (oWarningMessage.showWarning) {
+							var oRtaResourceBundle = sap.ui.getCore().getLibraryResourceBundle("sap.ui.rta");
+							var oMessageProps = oWarningMessage.warningType === "mixedChangesWarning"
+								? {
+									text: "MSG_ADAPTATION_STARTER_MIXED_CHANGES_WARNING",
+									title: "TIT_ADAPTATION_STARTER_MIXED_CHANGES_TITLE"
+								}
+								: {
+									text: "MSG_ADAPTATION_STARTER_NO_CHANGES_IN_P_WARNING",
+									title: "TIT_ADAPTATION_STARTER_NO_CHANGES_IN_P_TITLE"
+								};
 
-								showMessageBox(
-									oRtaResourceBundle.getText(oMessageProps.text),
-									{
-										title: oRtaResourceBundle.getText(oMessageProps.title)
-									},
-									"warning"
-								);
-							}
-						});
-				}
-				return oRta;
-			})
-			.catch(function(vError) {
-				if (vError !== "Reload triggered") {
-					Log.error("UI Adaptation could not be started", vError.message);
-				}
-				throw vError;
-			});
+							showMessageBox(
+								oRtaResourceBundle.getText(oMessageProps.text),
+								{
+									title: oRtaResourceBundle.getText(oMessageProps.title)
+								},
+								"warning"
+							);
+						}
+					});
+			}
+			return oRta;
+		})
+		.catch(function(vError) {
+			if (vError !== "Reload triggered") {
+				Log.error("UI Adaptation could not be started", vError.message);
+			}
+			throw vError;
+		});
 	}
 	return adaptationStarter;
 });

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

@@ -48,7 +48,7 @@ sap.ui.define([
 	 * @alias sap.ui.rta.util.changeVisualization.ChangeIndicator
 	 * @author SAP SE
 	 * @since 1.84.0
-	 * @version 1.100.0
+	 * @version 1.102.1
 	 * @private
 	 */
 	var ChangeIndicator = Control.extend("sap.ui.rta.util.changeVisualization.ChangeIndicator", {
@@ -142,6 +142,9 @@ sap.ui.define([
 
 			this._fnHoverTrue = this._toggleHoverStyleClasses.bind(this, true);
 			this._fnHoverFalse = this._toggleHoverStyleClasses.bind(this, false);
+			// is needed to prevent that multiple events listeners are attached
+			// to the same overlay because setVisible is called multiple times
+			this._bEventAttachedToElement = false;
 		}
 	});
 
@@ -175,10 +178,13 @@ sap.ui.define([
 		var oOverlay = Core.byId(this.getOverlayId());
 		// needed because the change indicator cleanup is only triggered on save and exit
 		if (oOverlay) {
-			if (bVisible) {
+			if (bVisible && !this._bEventAttachedToElement) {
 				handleBrowserEventsOnElement.call(this, oOverlay, "attachBrowserEvent");
-			} else {
+				this._bEventAttachedToElement = true;
+			}
+			if (!bVisible) {
 				handleBrowserEventsOnElement.call(this, oOverlay, "detachBrowserEvent");
+				this._bEventAttachedToElement = false;
 				if (this.getAggregation("_popover")) {
 					this.getAggregation("_popover").destroy();
 				}
@@ -276,10 +282,11 @@ sap.ui.define([
 			return mPayload;
 		}, {});
 
+		var mPropertyBag = { appComponent: FlUtils.getAppComponentForControl(oAffectedElement) };
 		var oOverlay = Core.byId(this.getOverlayId());
 		var sElementLabel = oOverlay.getDesignTimeMetadata().getLabel(oAffectedElement);
 		var oVisualizationUtil = getVisualizationCategory(mChangeInformation.commandName);
-		var oDescription = oVisualizationUtil && oVisualizationUtil.getDescription(mPayload, sElementLabel);
+		var oDescription = oVisualizationUtil && oVisualizationUtil.getDescription(mPayload, sElementLabel, mPropertyBag);
 		var oRtaResourceBundle = Core.getLibraryResourceBundle("sap.ui.rta");
 		sElementLabel = sElementLabel && "'" + sElementLabel + "'";
 		var sShortenedElementLabel = ChangeVisualizationUtils.shortenString(sElementLabel);

package/src/sap/ui/rta/util/changeVisualization/ChangeIndicatorCategorySelection.fragment.xml

@@ -0,0 +1,30 @@
+<core:FragmentDefinition
+	xmlns:core="sap.ui.core"
+	xmlns="sap.m"
+	xmlns:l="sap.ui.layout">
+	<Popover
+		showHeader="false"
+		placement="Bottom">
+		<MessageStrip
+			text="{visualizationModel>/popupInfoMessage}"
+			type="Information"
+			showIcon="true"
+			visible="{= ${visualizationModel>/hiddenChanges}.length > 0 }">
+			<link>
+				<Link text="{i18n>BUT_CHANGEVISUALIZATION_LEARNMORE}"
+					target="_blank"
+					href="https://ui5.sap.com/1.101.0/#/topic/35274280504f42cd87cc4fd3d403ca91.html#loio35274280504f42cd87cc4fd3d403ca91/visualization" />
+			</link>
+		</MessageStrip>
+		<List
+			class="sapUiRtaChangesList"
+			items="{visualizationModel>/commandCategories/}">
+			<StandardListItem
+				title="{visualizationModel>title}"
+				counter="{visualizationModel>count}"
+				type="{= ${visualizationModel>count} > 0 ? 'Active' : 'Inactive'}"
+				icon="{visualizationModel>icon}"
+				press=".onCommandCategorySelection"/>
+		</List>
+	</Popover>
+</core:FragmentDefinition>

package/src/sap/ui/rta/util/changeVisualization/ChangeIndicatorPopover.fragment.xml

@@ -5,7 +5,7 @@
 	<Popover
 		showHeader="false"
 		placement="PreferredTopOrFlip"
-		class="sapUiRtaPopover">
+		class="sapUiRtaPopover sapUiRtaChangeVisualizationPopover">
 		<Table
 			ariaLabelledBy="Changes"
 			items="{details>/}"

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

@@ -25,7 +25,7 @@ sap.ui.define([
 	 * @alias sap.ui.rta.util.changeVisualization.ChangeIndicatorRegistry
 	 * @author SAP SE
 	 * @since 1.86.0
-	 * @version 1.100.0
+	 * @version 1.102.1
 	 * @private
 	 */
 	var ChangeIndicatorRegistry = ManagedObject.extend("sap.ui.rta.util.changeVisualization.ChangeIndicatorRegistry", {
@@ -168,11 +168,6 @@ sap.ui.define([
 			}
 		};
 
-		// Only register changes that are valid for visualization
-		if (oNewChangeInformation.commandCategory === undefined) {
-			return;
-		}
-
 		this._oChanges[oChange.getId()] = oNewChangeInformation;
 	};
 

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

@@ -5,6 +5,7 @@
  */
 
 sap.ui.define([
+	"sap/ui/core/Fragment",
 	"sap/base/util/restricted/_difference",
 	"sap/base/util/deepEqual",
 	"sap/base/Log",
@@ -22,6 +23,7 @@ sap.ui.define([
 	"sap/ui/rta/util/changeVisualization/ChangeIndicator",
 	"sap/ui/rta/util/changeVisualization/ChangeIndicatorRegistry"
 ], function(
+	Fragment,
 	difference,
 	deepEqual,
 	Log,
@@ -77,8 +79,9 @@ sap.ui.define([
 	 * When clicking anywhere on the application, the menu must close
 	 */
 	function _onClick() {
-		if (this.oMenuButton) {
-			this.oMenuButton.getMenu().close();
+		var oPopover = this.getPopover();
+		if (oPopover && oPopover.isOpen()) {
+			oPopover.close();
 		}
 	}
 
@@ -90,7 +93,7 @@ sap.ui.define([
 	 * @alias sap.ui.rta.util.changeVisualization.ChangeVisualization
 	 * @author SAP SE
 	 * @since 1.84.0
-	 * @version 1.100.0
+	 * @version 1.102.1
 	 * @private
 	 */
 	var ChangeVisualization = Control.extend("sap.ui.rta.util.changeVisualization.ChangeVisualization", {
@@ -110,6 +113,12 @@ sap.ui.define([
 					type: "boolean",
 					defaultValue: false
 				}
+			},
+			aggregations: {
+				popover: {
+					type: "sap.m.Popover",
+					multiple: false
+				}
 			}
 		},
 		constructor: function() {
@@ -161,9 +170,7 @@ sap.ui.define([
 
 	ChangeVisualization.prototype.exit = function() {
 		this._oChangeIndicatorRegistry.destroy();
-		if (this.oRootOverlay) {
-			this.oRootOverlay.getDomRef().removeEventListener("click", this._fnOnClickHandler, { capture: true });
-		}
+		this._toggleRootOverlayClickHandler(false);
 	};
 
 	ChangeVisualization.prototype._reset = function() {
@@ -171,12 +178,25 @@ sap.ui.define([
 	};
 
 	ChangeVisualization.prototype._updateVisualizationModelMenuData = function() {
+		var aVisualizedChanges = this._oChangeVisualizationModel.getData().visualizedChanges;
+		var aHiddenChanges = [];
+		var aRegisteredChanges = this._oChangeIndicatorRegistry.getChanges();
+		aRegisteredChanges.forEach(function(oChange) {
+			var oVisualizedChange = aVisualizedChanges.find(function(oVisualizedChange) {
+				return oChange.change.getId() === oVisualizedChange.id;
+			});
+			if (!oVisualizedChange && !oChange.dependent) {
+				aHiddenChanges.push(oChange);
+			}
+		});
 		var aCommandData = Object.keys(VALID_COMMANDS).map(function(sCommandCategoryName) {
-			var sTitle = this._getCommandCategoryLabel(sCommandCategoryName,
-				this._getChangesForCommandCategory(sCommandCategoryName).length);
+			var sTitle = this._getCommandCategoryLabel(
+				sCommandCategoryName,
+				this._getChangesForCommandCategory(sCommandCategoryName, aVisualizedChanges).length
+			);
 			return {
 				key: sCommandCategoryName,
-				count: this._getChangesForCommandCategory(sCommandCategoryName).length,
+				count: this._getChangesForCommandCategory(sCommandCategoryName, aVisualizedChanges).length,
 				title: sTitle,
 				icon: CATEGORY_ICONS[sCommandCategoryName]
 			};
@@ -184,19 +204,23 @@ sap.ui.define([
 
 		aCommandData.unshift({
 			key: CATEGORY_ALL,
-			count: this._getChangesForCommandCategory(CATEGORY_ALL).length,
-			title: this._getCommandCategoryLabel(CATEGORY_ALL, this._getChangesForCommandCategory(CATEGORY_ALL).length),
+			count: this._getChangesForCommandCategory(CATEGORY_ALL, aVisualizedChanges).length,
+			title: this._getCommandCategoryLabel(CATEGORY_ALL, this._getChangesForCommandCategory(CATEGORY_ALL, aVisualizedChanges).length),
 			icon: CATEGORY_ICONS[CATEGORY_ALL]
 		});
 
 		this._updateVisualizationModel({
-			commandCategories: aCommandData
+			commandCategories: aCommandData,
+			hiddenChanges: aHiddenChanges,
+			popupInfoMessage: this._oTextBundle.getText(
+				"MSG_CHANGEVISUALIZATION_HIDDEN_CHANGES_INFO",
+				[aHiddenChanges.length]
+			)
 		});
 	};
 
-	ChangeVisualization.prototype._getChangesForCommandCategory = function(sCommandCategory) {
-		var aRegisteredChanges = this._oChangeIndicatorRegistry.getChanges();
-		return aRegisteredChanges.filter(function(oChange) {
+	ChangeVisualization.prototype._getChangesForCommandCategory = function(sCommandCategory, aChanges) {
+		return aChanges.filter(function(oChange) {
 			return sCommandCategory === CATEGORY_ALL
 				? oChange.commandCategory !== undefined
 				: sCommandCategory === oChange.commandCategory;
@@ -213,6 +237,35 @@ sap.ui.define([
 		return this._oTextBundle.getText(sButtonKey);
 	};
 
+	ChangeVisualization.prototype.openChangeCategorySelectionPopover = function(oEvent) {
+		if (!this._oToolbarButton) {
+			// Event bubbled through the toolbar, get original source
+			this._oToolbarButton = sap.ui.getCore().byId(oEvent.getParameter("id"));
+		}
+		var oPopover = this.getPopover();
+
+		if (!oPopover) {
+			Fragment.load({
+				name: "sap.ui.rta.util.changeVisualization.ChangeIndicatorCategorySelection",
+				id: this._getComponent().createId("changeVisualization_changesListPopover"),
+				controller: this
+			})
+				.then(function(oPopover) {
+					this._oToolbarButton.addDependent(oPopover);
+					oPopover.setModel(this._oChangeVisualizationModel, "visualizationModel");
+					oPopover.openBy(this._oToolbarButton);
+					this.setPopover(oPopover);
+				}.bind(this));
+			return;
+		}
+
+		if (oPopover.isOpen()) {
+			oPopover.close();
+		} else {
+			oPopover.openBy(this._oToolbarButton);
+		}
+	};
+
 	/**
 	 * Sets the selected command category and visualizes all changes for the given category
 	 *
@@ -220,14 +273,16 @@ sap.ui.define([
 	 * @returns {Promise} - Promise of category change
 	 */
 	ChangeVisualization.prototype.onCommandCategorySelection = function(oEvent) {
-		var sSelectedCommandCategory = oEvent.getParameter("item").getKey();
+		var sSelectedCommandCategory = oEvent.getSource().getBindingContext("visualizationModel").getObject().key;
 		return this._selectCommandCategory(sSelectedCommandCategory);
 	};
 
 	ChangeVisualization.prototype._selectCommandCategory = function(sSelectedCommandCategory) {
 		this._sSelectedCommandCategory = sSelectedCommandCategory;
 
-		var aRelevantChanges = this._getChangesForCommandCategory(sSelectedCommandCategory);
+		var aRegisteredChanges = this._oChangeIndicatorRegistry.getChanges();
+		var aRelevantChanges = this._getChangesForCommandCategory(sSelectedCommandCategory, aRegisteredChanges);
+
 		var sCommandCategoryText = this._getCommandCategoryButton(sSelectedCommandCategory);
 
 		this._updateVisualizationModel({
@@ -425,20 +480,24 @@ sap.ui.define([
 	ChangeVisualization.prototype._updateChangeIndicators = function() {
 		var oSelectors = this._oChangeIndicatorRegistry.getChangeIndicatorData();
 		var oIndicators = {};
+		var aVisualizedChanges = [];
 		Object.keys(oSelectors)
 			.forEach(function(sSelectorId) {
 				var aChanges = oSelectors[sSelectorId];
 				var oOverlay = OverlayRegistry.getOverlay(sSelectorId);
-				if (!oOverlay || !oOverlay.getDomRef()) {
+				if (!oOverlay || !oOverlay.getDomRef() || !oOverlay.isVisible()) {
 					// Change is not visible
 					return undefined;
 				}
-
 				var oOverlayPosition = oOverlay.getDomRef().getClientRects()[0] || { left: 0, top: 0 };
+				var aRelevantChanges = this._filterRelevantChanges(aChanges);
+				aRelevantChanges.forEach(function (oChange) {
+					aVisualizedChanges.push(oChange);
+				});
 				oIndicators[sSelectorId] = {
 					posX: parseInt(oOverlayPosition.left),
 					posY: parseInt(oOverlayPosition.top),
-					changes: this._filterRelevantChanges(aChanges)
+					changes: aRelevantChanges
 				};
 
 				if (!this._oChangeIndicatorRegistry.hasChangeIndicator(sSelectorId)) {
@@ -451,10 +510,14 @@ sap.ui.define([
 			!deepEqual(
 				oIndicators,
 				this._oChangeVisualizationModel.getData().content
+			) || !deepEqual(
+				aVisualizedChanges,
+				this._oChangeVisualizationModel.getData().visualizedChanges
 			)
 		) {
 			this._updateVisualizationModel({
-				content: oIndicators
+				content: oIndicators,
+				visualizedChanges: aVisualizedChanges
 			});
 		}
 	};
@@ -522,6 +585,25 @@ sap.ui.define([
 		aVisibleIndicators[0].focus();
 	};
 
+	ChangeVisualization.prototype._toggleRootOverlayClickHandler = function (bEnable) {
+		var oRootOverlayDomRef = this.oRootOverlay && this.oRootOverlay.getDomRef();
+		if (oRootOverlayDomRef) {
+			if (bEnable) {
+				oRootOverlayDomRef.addEventListener(
+					"click",
+					this._fnOnClickHandler,
+					{ capture: true }
+				);
+			} else {
+				oRootOverlayDomRef.removeEventListener(
+					"click",
+					this._fnOnClickHandler,
+					{ capture: true }
+				);
+			}
+		}
+	};
+
 	/**
 	 * Triggers the mode switch (on/off).
 	 *
@@ -534,14 +616,10 @@ sap.ui.define([
 
 		if (this.getIsActive()) {
 			this.setIsActive(false);
-			if (this.oRootOverlay) {
-				this.oRootOverlay.getDomRef().removeEventListener("click", this._fnOnClickHandler, { capture: true });
-			}
+			this._toggleRootOverlayClickHandler(false);
 			return;
 		}
-		if (this.oRootOverlay) {
-			this.oRootOverlay.getDomRef().addEventListener("click", this._fnOnClickHandler, { capture: true });
-		}
+		this._toggleRootOverlayClickHandler(true);
 		if (!this.getRootControlId()) {
 			this.setRootControlId(oRootControl);
 		}