@openui5/sap.ui.rta 1.113.0 → 1.115.0

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.113.0
+	 * @version 1.115.0
 	 * @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.113.0
+	 * @version 1.115.0
 	 * @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.113.0
+	 * @version 1.115.0
 	 * @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,31 +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({
+		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
-				});
-			} else {
-				VersionsAPI.loadVersionForApplication({
-					control: oReloadInfo.selector,
-					layer: oReloadInfo.layer,
-					allContexts: oReloadInfo.allContexts
+					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;
 		});
 	}
@@ -268,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
 	 */
@@ -280,7 +291,7 @@ sap.ui.define([
 			URLParsingService: mUShellServices.URLParsing
 		});
 		return ReloadInfoAPI.getReloadReasonsForStart(mProperties).then(function(oReloadInfo) {
-			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.113.0
+	 * @version 1.115.0
 	 * @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.113.0
+	 * @version 1.115.0
 	 * @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) {
@@ -203,7 +210,6 @@ sap.ui.define([
 			sDescriptionText = oDescription.descriptionText;
 			sDescriptionTooltip = oDescription.descriptionTooltip || "";
 		} else {
-			sElementLabel = sElementLabel && "'" + sElementLabel + "'";
 			var sShortenedElementLabel = ChangeVisualizationUtils.shortenString(sElementLabel);
 			var sChangeTextKey = (
 				"TXT_CHANGEVISUALIZATION_CHANGE_"
@@ -258,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) {
@@ -267,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();
@@ -321,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);
 		}
 	};
 
@@ -335,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) {
@@ -354,7 +360,7 @@ sap.ui.define([
 	ChangeIndicator.prototype._onSelect = function(oEvent) {
 		this.focus();
 		oEvent.stopPropagation();
-		this._openDetailPopover();
+		this._toggleDetailPopover();
 	};
 
 	ChangeIndicator.prototype._onKeyDown = function(oEvent) {
@@ -367,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;
@@ -381,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");
@@ -394,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) {

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

@@ -6,7 +6,7 @@
 		showHeader="false"
 		placement="Bottom"
 		id="popover">
-		<SegmentedButton selectedKey="satellite" width="420px" selectionChange=".onVersioningCategoryChange">
+		<SegmentedButton selectedKey="{visualizationModel>/changeState}" width="420px" selectionChange=".onVersioningCategoryChange">
 			<items>
 				<SegmentedButtonItem
 					text="{i18n>BUT_CHANGEVISUALIZATION_VERSIONING_ALL}"

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

@@ -39,7 +39,7 @@ sap.ui.define([
 	 * @alias sap.ui.rta.util.changeVisualization.ChangeIndicatorRegistry
 	 * @author SAP SE
 	 * @since 1.86.0
-	 * @version 1.113.0
+	 * @version 1.115.0
 	 * @private
 	 */
 	var ChangeIndicatorRegistry = ManagedObject.extend("sap.ui.rta.util.changeVisualization.ChangeIndicatorRegistry", {
@@ -113,6 +113,7 @@ sap.ui.define([
 	 */
 	ChangeIndicatorRegistry.prototype.getSelectorsWithRegisteredChanges = function () {
 		var oChangeIndicators = {};
+		var sPreviousAffectedElementId;
 
 		function addSelector (sSelectorId, sAffectedElementId, oChangeIndicatorData, bDependent) {
 			if (oChangeIndicators[sSelectorId] === undefined) {
@@ -122,11 +123,13 @@ sap.ui.define([
 				{
 					id: oChangeIndicatorData.change.getId(),
 					dependent: bDependent,
-					affectedElementId: sAffectedElementId,
+					affectedElementId: sAffectedElementId || sPreviousAffectedElementId,
+					displayElementsKey: oChangeIndicatorData.visualizationInfo.displayElementIds.toString(),
 					descriptionPayload: oChangeIndicatorData.visualizationInfo.descriptionPayload || {}
 				},
 				_omit(oChangeIndicatorData, ["visualizationInfo"])
 			));
+			sPreviousAffectedElementId = sAffectedElementId || sPreviousAffectedElementId;
 		}
 
 		values(this._oRegisteredChanges)
@@ -135,11 +138,6 @@ sap.ui.define([
 				.forEach(function (sId, iIndex) {
 					addSelector(sId, oChangeIndicatorData.visualizationInfo.affectedElementIds[iIndex], oChangeIndicatorData, false);
 				});
-
-				oChangeIndicatorData.visualizationInfo.dependentElementIds
-					.forEach(function (sId) {
-						addSelector(sId, sId, oChangeIndicatorData, true);
-					});
 			});
 
 		return oChangeIndicators;
@@ -211,7 +209,7 @@ sap.ui.define([
 			} else if (aDraftChangesList && aDraftChangesList.includes(oChange.getId())) {
 				aChangeStates = [ChangeStates.DRAFT];
 			} else {
-				aChangeStates = [ChangeStates.ACTIVATED];
+				aChangeStates = [ChangeStates.ALL];
 			}
 
 			this._oRegisteredChanges[oChange.getId()] = {
@@ -242,12 +240,17 @@ sap.ui.define([
 		return getInfoFromChangeHandler(oAppComponent, oChange)
 			.then(function(oInfoFromChangeHandler) {
 				var mVisualizationInfo = oInfoFromChangeHandler || {};
-				var aAffectedElementIds = getSelectorIds(mVisualizationInfo.affectedControls || oChange.getSelector && [oChange.getSelector()] || []);
+				var aChangeSelectors = oChange.getSelector && oChange.getSelector() && [oChange.getSelector()];
+				var aAffectedElementSelectors = mVisualizationInfo.affectedControls || aChangeSelectors || [];
+				// If there is an original selector (e.g. control is inside a template),
+				// the indicator should be displayed on the host control (change selector)
+				var oChangeOriginalSelector = oChange.getOriginalSelector && oChange.getOriginalSelector();
+				var aDisplayElementSelectors = oChangeOriginalSelector ? aChangeSelectors : aAffectedElementSelectors;
 
 				return {
-					affectedElementIds: aAffectedElementIds,
+					affectedElementIds: getSelectorIds(aAffectedElementSelectors),
 					dependentElementIds: getSelectorIds(mVisualizationInfo.dependentControls) || [],
-					displayElementIds: getSelectorIds(mVisualizationInfo.displayControls) || aAffectedElementIds,
+					displayElementIds: getSelectorIds(mVisualizationInfo.displayControls || getSelectorIds(aDisplayElementSelectors)),
 					updateRequired: mVisualizationInfo.updateRequired,
 					descriptionPayload: mVisualizationInfo.descriptionPayload || {}
 				};
@@ -255,7 +258,11 @@ sap.ui.define([
 	}
 
 	function getInfoFromChangeHandler(oAppComponent, oChange) {
-		var oControl = oChange.getSelector && JsControlTreeModifier.bySelector(oChange.getSelector(), oAppComponent);
+		var oSelector = oChange.getOriginalSelector && oChange.getOriginalSelector();
+		if (!oSelector) {
+			oSelector = oChange.getSelector && oChange.getSelector();
+		}
+		var oControl = JsControlTreeModifier.bySelector(oSelector, oAppComponent);
 		if (oControl) {
 			return ChangesWriteAPI.getChangeHandler({
 				changeType: oChange.getChangeType(),

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

@@ -11,7 +11,7 @@ sap.ui.define([
 
 	var ChangeStates = {};
 
-	ChangeStates.ACTIVATED = "activated";
+	ChangeStates.ALL = "all";
 	ChangeStates.DRAFT = "draft";
 	ChangeStates.DIRTY = "dirty";
 

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

@@ -12,6 +12,7 @@ sap.ui.define([
 	"sap/ui/core/util/reflection/JsControlTreeModifier",
 	"sap/ui/core/Control",
 	"sap/ui/dt/OverlayRegistry",
+	"sap/ui/dt/OverlayUtil",
 	"sap/ui/dt/ElementUtil",
 	"sap/ui/fl/write/api/PersistenceWriteAPI",
 	"sap/ui/fl/Layer",
@@ -30,6 +31,7 @@ sap.ui.define([
 	JsControlTreeModifier,
 	Control,
 	OverlayRegistry,
+	OverlayUtil,
 	ElementUtil,
 	PersistenceWriteAPI,
 	Layer,
@@ -53,7 +55,7 @@ sap.ui.define([
 		}
 	}
 
-	function _isOverlayVisible(oOverlay) {
+	function _isOverlayInvisible(oOverlay) {
 		return !oOverlay || !oOverlay.getDomRef() || !oOverlay.isVisible();
 	}
 
@@ -65,7 +67,7 @@ sap.ui.define([
 	 * @alias sap.ui.rta.util.changeVisualization.ChangeVisualization
 	 * @author SAP SE
 	 * @since 1.84.0
-	 * @version 1.113.0
+	 * @version 1.115.0
 	 * @private
 	 */
 	var ChangeVisualization = Control.extend("sap.ui.rta.util.changeVisualization.ChangeVisualization", {
@@ -106,9 +108,10 @@ sap.ui.define([
 			}), "i18n");
 
 			this._oChangeVisualizationModel = new JSONModel({
-				active: this.getIsActive()
+				active: this.getIsActive(),
+				changeState: ChangeStates.ALL
 			});
-			this._oChangeVisualizationModel.setDefaultBindingMode("OneWay");
+			this._oChangeVisualizationModel.setDefaultBindingMode("TwoWay");
 			this._sSelectedChangeCategory = ChangeCategories.ALL;
 			this._bSetModeChanged = false;
 
@@ -176,7 +179,11 @@ sap.ui.define([
 	ChangeVisualization.prototype._determineChangeVisibility = function(aRegisteredIndependentChanges, aAllRelevantChanges, sVisualizedChangeState) {
 		function filterRelevantChanges(aChanges) {
 			return aChanges.filter(function(oChange) {
-				if (!sVisualizedChangeState || sVisualizedChangeState === "all" || oChange.changeStates.includes(sVisualizedChangeState)) {
+				if (
+					!sVisualizedChangeState ||
+					sVisualizedChangeState === ChangeStates.ALL ||
+					oChange.changeStates.includes(sVisualizedChangeState)
+				) {
 					return true;
 				}
 				return false;
@@ -206,7 +213,7 @@ sap.ui.define([
 
 			if (!aAllRelevantChangeIds.includes(oChange.change.getId())) {
 				aHiddenChanges.push(oChange);
-			} else if (_isOverlayVisible(oOverlay)) {
+			} else if (_isOverlayInvisible(oOverlay)) {
 				aHiddenChanges.push(oChange);
 			} else {
 				aVisualizedChanges.push(oChange);
@@ -492,13 +499,14 @@ sap.ui.define([
 	ChangeVisualization.prototype._updateChangeIndicators = function() {
 		var oSelectors = this._oChangeIndicatorRegistry.getSelectorsWithRegisteredChanges();
 		var oIndicators = {};
+		this._mDisplayElementsKeyMap = {};
 		Object.keys(oSelectors).forEach(function(sSelectorId) {
 			var aChangesOnIndicator = oSelectors[sSelectorId];
 			var aRelevantChanges = this._filterRelevantChanges(oSelectors[sSelectorId]);
 			var oOverlay = OverlayRegistry.getOverlay(sSelectorId);
 			if (!oOverlay) {
 				// When the selector has no Overlay, check if there is a relevant container Overlay
-				// e.g. when a SmartForm group is removed
+				// e.g. change on a SmartForm group (Selector: parent Form; Relevant Container: SmartForm)
 				aChangesOnIndicator.some(function(oChange) {
 					var oElementOverlay = OverlayRegistry.getOverlay(oChange.affectedElementId);
 					var oRelevantContainer = oElementOverlay && oElementOverlay.getRelevantContainer();
@@ -509,7 +517,7 @@ sap.ui.define([
 					return false;
 				});
 			}
-			if (_isOverlayVisible(oOverlay)) {
+			if (_isOverlayInvisible(oOverlay)) {
 				// Change is not visible
 				return undefined;
 			}
@@ -524,6 +532,14 @@ sap.ui.define([
 			var sOverlayId = oOverlay.getId();
 			if (!oChangeIndicator) {
 				this._createChangeIndicator(oOverlay, sSelectorId);
+				// Assumption: all changes on an indicator affect the same elements
+				var sDisplayElementsKey = aChangesOnIndicator[0].displayElementsKey;
+				// This map is built to collect indicators with the same display elements (e.g. OP Section & AnchorBar)
+				if (!this._mDisplayElementsKeyMap[sDisplayElementsKey]) {
+					this._mDisplayElementsKeyMap[sDisplayElementsKey] = [sSelectorId];
+				} else {
+					this._mDisplayElementsKeyMap[sDisplayElementsKey].push(sSelectorId);
+				}
 			} else if (oChangeIndicator.getOverlayId() !== sOverlayId) {
 				// Overlay id might change, e.g. during undo/redo of dirty changes
 				oChangeIndicator.setOverlayId(sOverlayId);
@@ -531,6 +547,8 @@ sap.ui.define([
 			return undefined;
 		}.bind(this));
 
+		this._registerIndicatorBrowserEvents();
+
 		if (
 			!deepEqual(
 				oIndicators,
@@ -543,6 +561,46 @@ sap.ui.define([
 		}
 	};
 
+	// Multiple indicators can refer to the same control (e.g. OP Section + AnchorBar),
+	// so when one of them is hovered/focused the other must also react to show the connection between them
+	ChangeVisualization.prototype._registerIndicatorBrowserEvents = function() {
+		Object.keys(this._mDisplayElementsKeyMap).forEach(function(sDisplayElementsKey) {
+			var aIndicators = this._mDisplayElementsKeyMap[sDisplayElementsKey].map(function(sSelectorId) {
+				return this._oChangeIndicatorRegistry.getChangeIndicator(sSelectorId);
+			}.bind(this));
+
+			function onIndicatorInteraction(bActivate, oEvent) {
+				aIndicators.forEach(function(oIndicator) {
+					if (oIndicator.getVisible()) {
+						oIndicator.onIndicatorBrowserInteraction(bActivate, oEvent);
+					}
+				});
+			}
+
+			// When the detail popover is opened all connected overlays should be selected
+			function onDetailPopoverOpened(oEvent) {
+				aIndicators.forEach(function(oIndicator) {
+					if (oIndicator.getVisible()) {
+						oIndicator.onDetailPopoverOpened(oEvent);
+					}
+				});
+			}
+
+			aIndicators.forEach(function(oIndicator) {
+				oIndicator.attachBrowserEvent("mouseover", onIndicatorInteraction.bind(this, true));
+				oIndicator.attachBrowserEvent("focusin", onIndicatorInteraction.bind(this, true));
+				oIndicator.attachBrowserEvent("mouseout", onIndicatorInteraction.bind(this, false));
+				oIndicator.attachBrowserEvent("focusout", onIndicatorInteraction.bind(this, false));
+				oIndicator.attachDetailPopoverOpened(onDetailPopoverOpened.bind(this));
+
+				var oOverlay = Core.byId(oIndicator.getOverlayId());
+				// De-selection of connected overlays must happen when the hover/focus leaves the overlay
+				oOverlay.attachBrowserEvent("mouseout", onIndicatorInteraction.bind(this, false));
+				oOverlay.attachBrowserEvent("focusout", onIndicatorInteraction.bind(this, false));
+			});
+		}.bind(this));
+	};
+
 	ChangeVisualization.prototype._filterRelevantChanges = function(aChangeVizInfo) {
 		if (!Array.isArray(aChangeVizInfo)) {
 			return aChangeVizInfo;
@@ -559,7 +617,7 @@ sap.ui.define([
 				)
 				&& (
 					!oRootData.changeState
-					|| oRootData.changeState === "all"
+					|| oRootData.changeState === ChangeStates.ALL
 					|| oChangeVizInfo.changeStates.includes(oRootData.changeState)
 				)
 			);

package/src/sap/ui/rta/view/RemoveElementDialog.fragment.xml

@@ -3,7 +3,7 @@
 	xmlns:sap.m="sap.m">
 	<sap.m:Dialog class="sapUiRtaConfirmationDialog" verticalScrolling="false" title="{/titleText}" icon="{/icon}">
 		<layout:VerticalLayout width="100%">
-			<commons:TextView class="sapUiRtaConfirmationDialogText" text="{/messageText}" />
+			<sap.m:Text class="sapUiRtaConfirmationDialogText" text="{/messageText}" />
 		</layout:VerticalLayout>
 		<sap.m:beginButton>
 			<sap.m:Button class="sapUiRtaConfirmationDialogRemoveButton" text="{/removeText}" press="removeField" />