Skip to content

Commit a93c5ce

Browse files
plamenivanov91plamenivanov91
authored
feat: show Controller Info in elements registry (#230)
Now when we select a view from the Elements Registry tab we can inspect some information about the controller of the given XML View. The information that we provide is the name of the given controller and its relative path to the given XML view.
1 parent a4f597b commit a93c5ce

File tree

9 files changed

+205
-3
lines changed

9 files changed

+205
-3
lines changed

‎app/html/panel/ui5/index.html

+4
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,7 @@
120120
<tab id="elements-registry-tab-aggregations">Aggregations</tab>
121121
<tab id="elements-registry-tab-events">Events</tab>
122122
<tab id="elements-registry-tab-xmlview">XML View</tab>
123+
<tab id="elements-registry-tab-controller">Controller Info</tab>
123124
</tabs>
124125
<contents>
125126
<content for="elements-registry-tab-properties">
@@ -143,6 +144,9 @@
143144
</content>
144145
<content for="elements-registry-tab-xmlview">
145146
<xml-view id="elements-registry-control-xmlview"></xml-view>
147+
</content>
148+
<content for="elements-registry-tab-controller">
149+
<xml-view id="elements-registry-control-controller"></xml-view>
146150
</content>
147151
</contents>
148152
</tabbar>

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

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
// jshint maxstatements:50
2+
// jshint maxstatements:52
33
(function () {
44
'use strict';
55

@@ -22,6 +22,7 @@
2222
var ODataDetailView = require('../../../modules/ui/ODataDetailView.js');
2323
var ODataMasterView = require('../../../modules/ui/ODataMasterView.js');
2424
var XMLDetailView = require('../../../modules/ui/XMLDetailView.js');
25+
var ControllerDetailView = require('../../../modules/ui/ControllerDetailView.js');
2526
var OElementsRegistryMasterView = require('../../../modules/ui/OElementsRegistryMasterView.js');
2627

2728
// Apply theme
@@ -245,8 +246,10 @@
245246

246247
// XML visualization for XML Views
247248
var oXMLDetailView = new XMLDetailView('elements-registry-control-xmlview');
249+
var oControllerDetailView = new ControllerDetailView('elements-registry-control-controller');
248250
var oElementsRegistryMasterView = new OElementsRegistryMasterView('elements-registry-tab-master', {
249251
XMLDetailView: oXMLDetailView,
252+
ControllerDetailView: oControllerDetailView,
250253
/**
251254
* Method fired when a Control is selected.
252255
* @param {string} sControlId

‎app/scripts/modules/ui/ControllerDetailView.js

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
2+
'use strict';
3+
const NOCONTROLLERMESSAGE = 'Select a \'sap.ui.core.mvc.XMLView\' to see its Controller content. Click to filter on XMLViews';
4+
const CONTROLLERNAME = 'Name:';
5+
const CONTROLLERPATH = 'Relative Path:';
6+
/**
7+
* @param {string} containerId - id of the DOM container
8+
* @constructor
9+
*/
10+
function ControllerDetailView(containerId) {
11+
this.oContainer = document.getElementById(containerId);
12+
this.oEditorDOM = document.createElement('div');
13+
this.oEditorDOM.id = 'controllerEditor';
14+
this.oEditorDOM.classList.toggle('hidden', true);
15+
this.oContainer.appendChild(this.oEditorDOM);
16+
17+
this.oNamePlaceholderDOM = document.createElement('div');
18+
this.oNamePlaceholderDOM.classList.add('longTextReduce');
19+
this.oNamePlaceholderDOM.onclick = this._selectAllText;
20+
this.oPathPlaceholderDOM = document.createElement('div');
21+
this.oPathPlaceholderDOM.classList.add('longTextReduce');
22+
this.oPathPlaceholderDOM.onclick = this._selectAllText;
23+
this.oNameDOM = document.createElement('div');
24+
this.oNameDOM.classList.add('firstColAlignment');
25+
this.oNameDOM.innerText = CONTROLLERNAME;
26+
this.oPathDOM = document.createElement('div');
27+
this.oPathDOM.classList.add('firstColAlignment');
28+
this.oPathDOM.innerText = CONTROLLERPATH;
29+
this.oEditorDOM.appendChild(this.oNameDOM);
30+
this.oEditorDOM.appendChild(this.oNamePlaceholderDOM);
31+
this.oEditorDOM.appendChild(this.oPathDOM);
32+
this.oEditorDOM.appendChild(this.oPathPlaceholderDOM);
33+
34+
this.oEditorAltDOM = document.createElement('div');
35+
this.oEditorAltDOM.classList.add('editorAlt');
36+
this.oEditorAltDOM.classList.toggle('hidden', false);
37+
this.oEditorAltMessageDOM = document.createElement('div');
38+
this.oEditorAltMessageDOM.innerText = NOCONTROLLERMESSAGE;
39+
40+
this.oEditorAltMessageDOM.addEventListener('click', function() {
41+
var searchField = document.getElementById('elementsRegistrySearch');
42+
var filterCheckbox = document.getElementById('elementsRegistryCheckbox');
43+
searchField.value = 'sap.ui.core.mvc.XMLView';
44+
if (!filterCheckbox.checked) {
45+
filterCheckbox.click();
46+
}
47+
return false;
48+
});
49+
this.oContainer.appendChild(this.oEditorAltDOM);
50+
this.oEditorAltDOM.appendChild(this.oEditorAltMessageDOM);
51+
}
52+
53+
/**
54+
* Updates data.
55+
* @param {Object} data - object structure as JSON
56+
*/
57+
ControllerDetailView.prototype.update = function (controllerInfo) {
58+
59+
var bIsDataValid = !!(controllerInfo.sControllerName && controllerInfo.sControllerRelPath);
60+
61+
this.oEditorDOM.classList.toggle('hidden', !bIsDataValid);
62+
this.oEditorAltDOM.classList.toggle('hidden', bIsDataValid);
63+
64+
if (bIsDataValid) {
65+
this.oNamePlaceholderDOM.innerText = controllerInfo.sControllerName;
66+
this.oPathPlaceholderDOM.innerText = controllerInfo.sControllerRelPath;
67+
}
68+
};
69+
70+
ControllerDetailView.prototype._selectAllText = function (oEvent) {
71+
var range = document.createRange();
72+
range.selectNode(oEvent.target);
73+
window.getSelection().removeAllRanges();
74+
window.getSelection().addRange(range);
75+
};
76+
77+
78+
module.exports = ControllerDetailView;

‎app/scripts/modules/ui/OElementsRegistryMasterView.js

+2
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ function OElementsRegistryMasterView(domId, options) {
125125
this.oContainerDOM = document.getElementById(domId);
126126
this.sNotSupportedMessage = '<h1>Current version of OpenUI5/SAPUI5 doesn\'t support element registry</h1>';
127127
this.XMLDetailView = options.XMLDetailView;
128+
this.ControllerDetailView = options.ControllerDetailView;
128129

129130
/**
130131
* Selects an element.
@@ -524,6 +525,7 @@ OElementsRegistryMasterView.prototype.sortHandler = function () {
524525
OElementsRegistryMasterView.prototype.selectHandler = function (oEvent) {
525526
this.onSelectItem(oEvent.data._data.id);
526527
this.XMLDetailView.update(oEvent.data._data);
528+
this.ControllerDetailView.update(oEvent.data._data.controllerInfo);
527529
this._sSelectedItem = oEvent.data._data.id;
528530
};
529531

‎app/styles/less/modules/ControllerDetailView.less

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
xml-view {
2+
height: 100%;
3+
}
4+
5+
#elements-registry-control-controller {
6+
.editorAlt {
7+
display: flex;
8+
div {
9+
cursor: pointer;
10+
}
11+
}
12+
13+
div.hidden {
14+
display: none !important;
15+
}
16+
17+
.editorAlt {
18+
position: absolute;
19+
top: .5rem;
20+
left: .5rem;
21+
right: .5rem;
22+
bottom: .5rem;
23+
height: auto;
24+
}
25+
26+
.firstColAlignment {
27+
text-align: end;
28+
}
29+
30+
.longTextReduce {
31+
text-overflow: ellipsis;
32+
white-space: nowrap;
33+
overflow: hidden;
34+
}
35+
36+
#controllerEditor{
37+
display: grid;
38+
grid-template-columns: 25% auto;
39+
gap: .5rem;
40+
padding: .5rem;
41+
}
42+
}

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

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
@import "../../modules/SplitContainer.less";
1414
@import "../../modules/JSONView.less";
1515
@import "../../modules/ODataView.less";
16+
@import "../../modules/ControllerDetailView.less";
1617
@import "../../modules/XMLView.less";
1718
@import "../../modules/DataGrid.less";
1819
@import "../../modules/ElementsRegistry.less";

‎app/vendor/ToolsAPI.js

+6-2
Original file line numberDiff line numberDiff line change
@@ -649,15 +649,19 @@ sap.ui.define(["jquery.sap.global", "sap/ui/core/ElementMetadata"],
649649
Object.keys(oElements).forEach(function (sKey) {
650650
var oElement = oElements[sKey];
651651
var oParent = oElement.getParent();
652+
var sElementId = oElement.getId();
653+
var sControllerName = oElement._xContent && sap.ui.getCore().byId(sElementId).getControllerName();
654+
var sControllerRelPath = sControllerName && sap.ui.require.toUrl(sControllerName.replaceAll('.', '/') + '.controller.js');
652655

653656
aRegisteredElements.push({
654-
id: oElement.getId(),
657+
id: sElementId,
655658
type: oElement.getMetadata().getName(),
656659
isControl: oElement.isA("sap.ui.core.Control"),
657660
isRendered: oElement.isActive(),
658661
parentId: oParent && (oParent.isA("sap.ui.core.Control") || oParent.isA("sap.ui.core.Element")) ? oParent.getId() : '',
659662
aggregation: oElement.sParentAggregationName ? oElement.sParentAggregationName : '',
660-
xml: oElement._xContent && (new XMLSerializer()).serializeToString(oElement._xContent)
663+
xml: oElement._xContent && (new XMLSerializer()).serializeToString(oElement._xContent),
664+
controllerInfo: {sControllerName, sControllerRelPath}
661665
})
662666
});
663667
}

‎tests/styles/themes/dark/dark.css

+34
Original file line numberDiff line numberDiff line change
@@ -803,6 +803,40 @@ odata-detail-view {
803803
xml-view {
804804
height: 100%;
805805
}
806+
#elements-registry-control-controller .editorAlt {
807+
display: flex;
808+
}
809+
#elements-registry-control-controller .editorAlt div {
810+
cursor: pointer;
811+
}
812+
#elements-registry-control-controller div.hidden {
813+
display: none !important;
814+
}
815+
#elements-registry-control-controller .editorAlt {
816+
position: absolute;
817+
top: 0.5rem;
818+
left: 0.5rem;
819+
right: 0.5rem;
820+
bottom: 0.5rem;
821+
height: auto;
822+
}
823+
#elements-registry-control-controller .firstColAlignment {
824+
text-align: end;
825+
}
826+
#elements-registry-control-controller .longTextReduce {
827+
text-overflow: ellipsis;
828+
white-space: nowrap;
829+
overflow: hidden;
830+
}
831+
#elements-registry-control-controller #controllerEditor {
832+
display: grid;
833+
grid-template-columns: 25% auto;
834+
gap: 0.5rem;
835+
padding: 0.5rem;
836+
}
837+
xml-view {
838+
height: 100%;
839+
}
806840
#elements-registry-control-xmlview .editorAlt {
807841
display: flex;
808842
}

‎tests/styles/themes/light/light.css

+34
Original file line numberDiff line numberDiff line change
@@ -803,6 +803,40 @@ odata-detail-view {
803803
xml-view {
804804
height: 100%;
805805
}
806+
#elements-registry-control-controller .editorAlt {
807+
display: flex;
808+
}
809+
#elements-registry-control-controller .editorAlt div {
810+
cursor: pointer;
811+
}
812+
#elements-registry-control-controller div.hidden {
813+
display: none !important;
814+
}
815+
#elements-registry-control-controller .editorAlt {
816+
position: absolute;
817+
top: 0.5rem;
818+
left: 0.5rem;
819+
right: 0.5rem;
820+
bottom: 0.5rem;
821+
height: auto;
822+
}
823+
#elements-registry-control-controller .firstColAlignment {
824+
text-align: end;
825+
}
826+
#elements-registry-control-controller .longTextReduce {
827+
text-overflow: ellipsis;
828+
white-space: nowrap;
829+
overflow: hidden;
830+
}
831+
#elements-registry-control-controller #controllerEditor {
832+
display: grid;
833+
grid-template-columns: 25% auto;
834+
gap: 0.5rem;
835+
padding: 0.5rem;
836+
}
837+
xml-view {
838+
height: 100%;
839+
}
806840
#elements-registry-control-xmlview .editorAlt {
807841
display: flex;
808842
}

0 commit comments

Comments
 (0)