feat: show Controller Info in elements registry

app/html/panel/ui5/index.html

@@ -120,6 +120,7 @@
                                     <tab id="elements-registry-tab-aggregations">Aggregations</tab>
                                     <tab id="elements-registry-tab-events">Events</tab>
                                     <tab id="elements-registry-tab-xmlview">XML View</tab>
+                                    <tab id="elements-registry-tab-controller">Controller Info</tab>
                                 </tabs>
                                 <contents>
                                     <content for="elements-registry-tab-properties">
@@ -143,6 +144,9 @@
                                     </content>
                                     <content for="elements-registry-tab-xmlview">
                                         <xml-view id="elements-registry-control-xmlview"></xml-view>
+                                    </content>
+									<content for="elements-registry-tab-controller">
+                                        <xml-view id="elements-registry-control-controller"></xml-view>
                                     </content>
                                 </contents>
                             </tabbar>

app/scripts/devtools/panel/ui5/main.js

@@ -1,5 +1,5 @@
 
-// jshint maxstatements:50
+// jshint maxstatements:52
 (function () {
     'use strict';
 
@@ -22,6 +22,7 @@
     var ODataDetailView = require('../../../modules/ui/ODataDetailView.js');
     var ODataMasterView = require('../../../modules/ui/ODataMasterView.js');
     var XMLDetailView = require('../../../modules/ui/XMLDetailView.js');
+    var ControllerDetailView = require('../../../modules/ui/ControllerDetailView.js');
     var OElementsRegistryMasterView = require('../../../modules/ui/OElementsRegistryMasterView.js');
 
     // Apply theme
@@ -245,8 +246,10 @@
 
     // XML visualization for XML Views
     var oXMLDetailView = new XMLDetailView('elements-registry-control-xmlview');
+    var oControllerDetailView = new ControllerDetailView('elements-registry-control-controller');
     var oElementsRegistryMasterView = new OElementsRegistryMasterView('elements-registry-tab-master', {
         XMLDetailView: oXMLDetailView,
+        ControllerDetailView: oControllerDetailView,
         /**
          * Method fired when a Control is selected.
          * @param {string} sControlId

app/scripts/modules/ui/ControllerDetailView.js

@@ -0,0 +1,78 @@
+
+'use strict';
+const NOCONTROLLERMESSAGE = 'Select a \'sap.ui.core.mvc.XMLView\' to see its Controller content. Click to filter on XMLViews';
+const CONTROLLERNAME = 'Name:';
+const CONTROLLERPATH = 'Relative Path:';
+/**
+ * @param {string} containerId - id of the DOM container
+ * @constructor
+ */
+function ControllerDetailView(containerId) {
+	this.oContainer = document.getElementById(containerId);
+	this.oEditorDOM = document.createElement('div');
+	this.oEditorDOM.id = 'controllerEditor';
+	this.oEditorDOM.classList.toggle('hidden', true);
+	this.oContainer.appendChild(this.oEditorDOM);
+
+	this.oNamePlaceholderDOM = document.createElement('div');
+	this.oNamePlaceholderDOM.classList.add('longTextReduce');
+	this.oNamePlaceholderDOM.onclick = this._selectAllText;
+	this.oPathPlaceholderDOM = document.createElement('div');
+	this.oPathPlaceholderDOM.classList.add('longTextReduce');
+	this.oPathPlaceholderDOM.onclick = this._selectAllText;
+	this.oNameDOM = document.createElement('div');
+	this.oNameDOM.classList.add('firstColAlignment');
+	this.oNameDOM.innerText = CONTROLLERNAME;
+	this.oPathDOM = document.createElement('div');
+	this.oPathDOM.classList.add('firstColAlignment');
+	this.oPathDOM.innerText = CONTROLLERPATH;
+	this.oEditorDOM.appendChild(this.oNameDOM);
+	this.oEditorDOM.appendChild(this.oNamePlaceholderDOM);
+	this.oEditorDOM.appendChild(this.oPathDOM);
+	this.oEditorDOM.appendChild(this.oPathPlaceholderDOM);
+
+	this.oEditorAltDOM = document.createElement('div');
+	this.oEditorAltDOM.classList.add('editorAlt');
+	this.oEditorAltDOM.classList.toggle('hidden', false);
+	this.oEditorAltMessageDOM = document.createElement('div');
+	this.oEditorAltMessageDOM.innerText = NOCONTROLLERMESSAGE;
+
+	this.oEditorAltMessageDOM.addEventListener('click', function() {
+		var searchField = document.getElementById('elementsRegistrySearch');
+		var filterCheckbox = document.getElementById('elementsRegistryCheckbox');
+		searchField.value = 'sap.ui.core.mvc.XMLView';
+		if (!filterCheckbox.checked) {
+			filterCheckbox.click();
+		}
+		return false;
+	});
+	this.oContainer.appendChild(this.oEditorAltDOM);
+	this.oEditorAltDOM.appendChild(this.oEditorAltMessageDOM);
+}
+
+/**
+ * Updates data.
+ * @param {Object} data - object structure as JSON
+ */
+ControllerDetailView.prototype.update = function (controllerInfo) {
+
+	var bIsDataValid = !!(controllerInfo.sControllerName && controllerInfo.sControllerRelPath);
+
+	this.oEditorDOM.classList.toggle('hidden', !bIsDataValid);
+	this.oEditorAltDOM.classList.toggle('hidden', bIsDataValid);
+
+	if (bIsDataValid) {
+		this.oNamePlaceholderDOM.innerText = controllerInfo.sControllerName;
+		this.oPathPlaceholderDOM.innerText = controllerInfo.sControllerRelPath;
+	}
+};
+
+ControllerDetailView.prototype._selectAllText = function (oEvent) {
+	var range = document.createRange();
+	range.selectNode(oEvent.target);
+	window.getSelection().removeAllRanges();
+	window.getSelection().addRange(range);
+};
+
+
+module.exports = ControllerDetailView;

app/scripts/modules/ui/OElementsRegistryMasterView.js

@@ -125,6 +125,7 @@ function OElementsRegistryMasterView(domId, options) {
     this.oContainerDOM = document.getElementById(domId);
     this.sNotSupportedMessage = '<h1>Current version of OpenUI5/SAPUI5 doesn\'t support element registry</h1>';
     this.XMLDetailView = options.XMLDetailView;
+    this.ControllerDetailView = options.ControllerDetailView;
 
     /**
      * Selects an element.
@@ -524,6 +525,7 @@ OElementsRegistryMasterView.prototype.sortHandler = function () {
 OElementsRegistryMasterView.prototype.selectHandler = function (oEvent) {
     this.onSelectItem(oEvent.data._data.id);
     this.XMLDetailView.update(oEvent.data._data);
+    this.ControllerDetailView.update(oEvent.data._data.controllerInfo);
     this._sSelectedItem = oEvent.data._data.id;
 };
 

app/styles/less/modules/ControllerDetailView.less

@@ -0,0 +1,42 @@
+xml-view {
+    height: 100%;
+}
+
+#elements-registry-control-controller {
+    .editorAlt {
+        display: flex;
+        div {
+            cursor: pointer;
+        }
+    }
+
+    div.hidden {
+        display: none !important;
+    }
+
+    .editorAlt {
+        position: absolute;
+        top: .5rem;
+        left: .5rem;
+        right: .5rem;
+        bottom: .5rem;
+        height: auto;
+    }
+
+	.firstColAlignment {
+		text-align: end;
+	}
+
+	.longTextReduce {
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+
+	#controllerEditor{
+		display: grid;
+		grid-template-columns: 25% auto;
+		gap: .5rem;
+		padding: .5rem;
+	}
+}

app/styles/less/themes/base/base.less

@@ -13,6 +13,7 @@
 @import "../../modules/SplitContainer.less";
 @import "../../modules/JSONView.less";
 @import "../../modules/ODataView.less";
+@import "../../modules/ControllerDetailView.less";
 @import "../../modules/XMLView.less";
 @import "../../modules/DataGrid.less";
 @import "../../modules/ElementsRegistry.less";

app/vendor/ToolsAPI.js

@@ -649,15 +649,19 @@ sap.ui.define(["jquery.sap.global", "sap/ui/core/ElementMetadata"],
                     Object.keys(oElements).forEach(function (sKey) {
                         var oElement = oElements[sKey];
                         var oParent = oElement.getParent();
+						var sElementId = oElement.getId();
+						var sControllerName = oElement._xContent && sap.ui.getCore().byId(sElementId).getControllerName();
+						var sControllerRelPath = sControllerName && sap.ui.require.toUrl(sControllerName.replaceAll('.', '/') + '.controller.js');
 
                         aRegisteredElements.push({
-                            id: oElement.getId(),
+                            id: sElementId,
                             type: oElement.getMetadata().getName(),
                             isControl: oElement.isA("sap.ui.core.Control"),
                             isRendered: oElement.isActive(),
                             parentId: oParent && (oParent.isA("sap.ui.core.Control") || oParent.isA("sap.ui.core.Element")) ? oParent.getId() : '',
                             aggregation: oElement.sParentAggregationName ? oElement.sParentAggregationName : '',
-                            xml: oElement._xContent && (new XMLSerializer()).serializeToString(oElement._xContent)
+                            xml: oElement._xContent && (new XMLSerializer()).serializeToString(oElement._xContent),
+                            controllerInfo: {sControllerName, sControllerRelPath}
                         })
                     });
                 }

tests/styles/themes/dark/dark.css

@@ -803,6 +803,40 @@ odata-detail-view {
 xml-view {
   height: 100%;
 }
+#elements-registry-control-controller .editorAlt {
+  display: flex;
+}
+#elements-registry-control-controller .editorAlt div {
+  cursor: pointer;
+}
+#elements-registry-control-controller div.hidden {
+  display: none !important;
+}
+#elements-registry-control-controller .editorAlt {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  right: 0.5rem;
+  bottom: 0.5rem;
+  height: auto;
+}
+#elements-registry-control-controller .firstColAlignment {
+  text-align: end;
+}
+#elements-registry-control-controller .longTextReduce {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+#elements-registry-control-controller #controllerEditor {
+  display: grid;
+  grid-template-columns: 25% auto;
+  gap: 0.5rem;
+  padding: 0.5rem;
+}
+xml-view {
+  height: 100%;
+}
 #elements-registry-control-xmlview .editorAlt {
   display: flex;
 }

tests/styles/themes/light/light.css

@@ -803,6 +803,40 @@ odata-detail-view {
 xml-view {
   height: 100%;
 }
+#elements-registry-control-controller .editorAlt {
+  display: flex;
+}
+#elements-registry-control-controller .editorAlt div {
+  cursor: pointer;
+}
+#elements-registry-control-controller div.hidden {
+  display: none !important;
+}
+#elements-registry-control-controller .editorAlt {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  right: 0.5rem;
+  bottom: 0.5rem;
+  height: auto;
+}
+#elements-registry-control-controller .firstColAlignment {
+  text-align: end;
+}
+#elements-registry-control-controller .longTextReduce {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+#elements-registry-control-controller #controllerEditor {
+  display: grid;
+  grid-template-columns: 25% auto;
+  gap: 0.5rem;
+  padding: 0.5rem;
+}
+xml-view {
+  height: 100%;
+}
 #elements-registry-control-xmlview .editorAlt {
   display: flex;
 }