diff --git a/app/html/panel/ui5/index.html b/app/html/panel/ui5/index.html index e4a60b19..914ea113 100644 --- a/app/html/panel/ui5/index.html +++ b/app/html/panel/ui5/index.html @@ -120,6 +120,7 @@ Aggregations Events XML View + Controller Info @@ -143,6 +144,9 @@ + + + diff --git a/app/scripts/devtools/panel/ui5/main.js b/app/scripts/devtools/panel/ui5/main.js index 64d9e73b..4033a715 100644 --- a/app/scripts/devtools/panel/ui5/main.js +++ b/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 diff --git a/app/scripts/modules/ui/ControllerDetailView.js b/app/scripts/modules/ui/ControllerDetailView.js new file mode 100644 index 00000000..e8533c56 --- /dev/null +++ b/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; diff --git a/app/scripts/modules/ui/OElementsRegistryMasterView.js b/app/scripts/modules/ui/OElementsRegistryMasterView.js index 46a8158d..614c00c0 100644 --- a/app/scripts/modules/ui/OElementsRegistryMasterView.js +++ b/app/scripts/modules/ui/OElementsRegistryMasterView.js @@ -125,6 +125,7 @@ function OElementsRegistryMasterView(domId, options) { this.oContainerDOM = document.getElementById(domId); this.sNotSupportedMessage = '

Current version of OpenUI5/SAPUI5 doesn\'t support element registry

'; 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; }; diff --git a/app/styles/less/modules/ControllerDetailView.less b/app/styles/less/modules/ControllerDetailView.less new file mode 100644 index 00000000..c8a4976d --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/app/styles/less/themes/base/base.less b/app/styles/less/themes/base/base.less index 409392ec..a185f9de 100644 --- a/app/styles/less/themes/base/base.less +++ b/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"; diff --git a/app/vendor/ToolsAPI.js b/app/vendor/ToolsAPI.js index 88dea83c..9d292153 100644 --- a/app/vendor/ToolsAPI.js +++ b/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} }) }); } diff --git a/tests/styles/themes/dark/dark.css b/tests/styles/themes/dark/dark.css index c7adc114..d813d2f6 100644 --- a/tests/styles/themes/dark/dark.css +++ b/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; } diff --git a/tests/styles/themes/light/light.css b/tests/styles/themes/light/light.css index 175b8af0..d4d0261e 100644 --- a/tests/styles/themes/light/light.css +++ b/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; }