feat(flexibility-registry): add Flexibility Registry tab with change export

app/html/panel/ui5/index.html

@@ -17,6 +17,7 @@
                 <tab id="app-info-tab">Application Information</tab>
                 <tab id="odata-tab">OData Requests</tab>
                 <tab id="elements-registry-tab">Elements Registry</tab>
+                <tab id="flexibility-registry-tab">Flexibility Registry</tab>
                 <tab id="ai-tab">AI Assistant</tab>
             </tabs>
             <contents>
@@ -158,6 +159,24 @@
                 </content>
                 <!-- Elements registry /ends-->
 
+                <!-- Flexibility /start-->
+                <content for="flexibility-registry-tab" class="flexibilityTab">
+                    <splitter id="flexibility-horizontal-splitter">
+                        <!-- SplitContainer begin side /start-->
+                        <start>
+                            <flexibility-master-view id="flexibility-tab-master"/>
+                        </start>
+                        <!-- SplitContainer begin side /ends-->
+
+                        <!-- SplitContainer end side /start-->
+                        <end>
+                            <flexibility-detail-view id="flexibility-tab-detail"/>
+                        </end>
+                        <!-- SplitContainer end side /ends-->
+                    </splitter>
+                </content>
+                <!-- Flexibility /ends-->
+
                 <!-- AI Chat /start-->
                 <content for="ai-tab">
                     <ai-chat id="ai-chat"></ai-chat>

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

@@ -1,4 +1,5 @@
 
+// jshint maxstatements:70
 (function () {
     'use strict';
 
@@ -23,9 +24,10 @@
     var XMLDetailView = require('../../../modules/ui/XMLDetailView.js');
     var ControllerDetailView = require('../../../modules/ui/ControllerDetailView.js');
     var OElementsRegistryMasterView = require('../../../modules/ui/OElementsRegistryMasterView.js');
+    var FlexibilityRegistryDetailView = require('../../../modules/ui/FlexibilityRegistryDetailView.js');
+    var FlexibilityRegistryMasterView = require('../../../modules/ui/FlexibilityRegistryMasterView.js');
     var AIChat = require('../../../modules/ui/AIChat.js');
 
-
     // Apply theme
     // ================================================================================
     utils.applyTheme(chrome.devtools.panels.themeName);
@@ -53,6 +55,10 @@
     var framesSelect;
     var displayFrameData;
     var updateSupportabilityOverlay;
+    var oFlexibilityHorizontalSplitter;
+    var oFlexibilityDetailView;
+    var oFlexibilityRegistryMasterView;
+
     // Synthetic root inserted under the merged tree (mixed pages) to group all
     // WebC controls under one expandable header. Its id ('__webc_root__') is
     // reserved: selecting or hovering it in the tree must be a no-op since it
@@ -438,6 +444,7 @@
             UI5Data.selectedElementId && controlTree.setSelectedElement(UI5Data.selectedElementId);
             appInfo.setData(UI5Data.applicationInformation);
             UI5Data.elementRegistry && oElementsRegistryMasterView.setData(UI5Data.elementRegistry);
+            UI5Data.flexibilityInformation && oFlexibilityRegistryMasterView.setData(UI5Data.flexibilityInformation);
 
             controlProperties.setData(UI5Data.controlProperties || {});
             controlBindingInfoLeftDataView.setData(UI5Data.controlBindings || {});
@@ -542,6 +549,45 @@
         });
     }
 
+    // ================================================================================
+    // 'Flexibility information' tab
+    // ================================================================================
+
+    oFlexibilityHorizontalSplitter = new Splitter('flexibility-horizontal-splitter', {
+        endContainerWidth: '50%',
+        isEndContainerClosable: true,
+        hideEndContainer: true
+    });
+
+    oFlexibilityDetailView = new FlexibilityRegistryDetailView('flexibility-tab-detail');
+    oFlexibilityRegistryMasterView = new FlexibilityRegistryMasterView('flexibility-tab-master', {
+        /**
+         * Method fired when a flexibility entry is selected.
+         * @param {Object} data
+         */
+        onSelectItem: function (data) {
+            oFlexibilityHorizontalSplitter.showEndContainer();
+            oFlexibilityDetailView.update(data._original);
+        },
+
+        /**
+         * Clears all flexibility entry log items.
+         */
+        onClearItems: function () {
+            oFlexibilityDetailView.clear();
+            oFlexibilityHorizontalSplitter.hideEndContainer();
+        },
+
+        /**
+         * Downloads the registered flexibility changes.
+         */
+        onDownloadItems: function () {
+            port.postMessage({
+                action: 'do-flexibility-download'
+            });
+        }
+    });
+
     // ================================================================================
     // Communication
     // ================================================================================
@@ -594,6 +640,7 @@
             frameData[frameId].controlTreeUI5 = message.controlTree;
             frameData[frameId].applicationInformation = message.applicationInformation;
             frameData[frameId].elementRegistry = message.elementRegistry;
+            frameData[frameId].flexibilityInformation = message.flexibilityInformation;
 
             if (framesSelect.getSelectedId() === frameId) {
                 controlTree.setData(_getMergedControlTree(frameId));
@@ -602,6 +649,7 @@
                 aiChat.setUrl(frameData[frameId].url);
                 appInfo.setData(message.applicationInformation);
                 oElementsRegistryMasterView.setData(message.elementRegistry);
+                oFlexibilityRegistryMasterView.setData(message.flexibilityInformation);
             }
         },
 
@@ -850,6 +898,21 @@
             }
         },
 
+        /**
+         * Updates the Flexibility Registry with the registered flexibility changes.
+         * @param {Object} message
+         */
+        'on-control-flexibility-property-change': function (message, messageSender) {
+            var frameId = messageSender.frameId;
+            if (!frameData[frameId]) {
+                return;
+            }
+            frameData[frameId].flexibilityInformation = message.flexibilityInformation;
+            if (framesSelect.getSelectedId() === frameId) {
+                oFlexibilityRegistryMasterView.setData(message.flexibilityInformation);
+            }
+        },
+
         /**
          * Cache the console-errors snapshot pushed from the injected script.
          * @param {Object} message

app/scripts/injected/main.js

@@ -111,7 +111,8 @@ sap.ui.require(['ToolsAPI'], function (ToolsAPI) {
                     action: 'on-receiving-initial-data',
                     applicationInformation: applicationUtils.getApplicationInfo(frameworkInformation),
                     controlTree: controlUtils.getControlTreeModel(controlTreeModel, frameworkInformation.commonInformation),
-                    elementRegistry: ToolsAPI.getRegisteredElements()
+                    elementRegistry: ToolsAPI.getRegisteredElements(),
+                    flexibilityInformation: ToolsAPI.getFlexibilityInformation()
                 });
             });
         },
@@ -239,6 +240,12 @@ sap.ui.require(['ToolsAPI'], function (ToolsAPI) {
                 return;
             }
 
+            this['do-control-flexibility-property-change']({
+                detail: {
+                    data: oData
+                }
+            });
+
             _setControlProperties(oControl, oData);
 
             // Update the DevTools with the actual property value of the control
@@ -304,6 +311,49 @@ sap.ui.require(['ToolsAPI'], function (ToolsAPI) {
             });
         },
 
+        /**
+         * Change control property, based on editing in the DataView.
+         * @param {Object} event
+         */
+        'do-control-flexibility-property-change': function (event) {
+            var oData = event.detail.data;
+            var sControlId = oData.controlId;
+            var sProperty = oData.property;
+            var vNewValue = oData.value;
+            var oControl = controlUtils.getElementById(sControlId);
+
+            if (!oControl) {
+                return;
+            }
+
+            var sControlClass = oControl.getMetadata().getName();
+            var sChangeType = 'propertyChange';
+            var sStateKey = [sControlId, sChangeType, sProperty].join('_');
+            var vInitialValue;
+
+            oData.controlClass = sControlClass;
+            oData.type = sChangeType;
+
+            if (ToolsAPI.isStateExists(sStateKey)) {
+                oData.initial = ToolsAPI.getStateValue(sStateKey) === vNewValue;
+            } else {
+                try {
+                    vInitialValue = oControl['get' + sProperty]();
+                    ToolsAPI.setStateValue(sStateKey, vInitialValue);
+                } catch (error) {
+                    // The control may not expose a getter for this property; ignore gracefully.
+                }
+                oData.initial = false;
+            }
+
+            ToolsAPI.addFlexibilityInformation(oData);
+
+            message.send({
+                action: 'on-control-flexibility-property-change',
+                flexibilityInformation: ToolsAPI.getFlexibilityInformation()
+            });
+        },
+
         /**
          * Selects Control with context menu click.
          * @param {Object} event
@@ -316,6 +366,13 @@ sap.ui.require(['ToolsAPI'], function (ToolsAPI) {
             });
         },
 
+        /**
+         * Download the registered flexibility changes.
+         */
+        'do-flexibility-download': function () {
+            ToolsAPI.downloadFlexibilityInformation();
+        },
+
         /**
          * Copies HTML of Control to Console.
          * @param {Object} event

app/scripts/modules/ui/FlexibilityRegistryDetailView.js

@@ -0,0 +1,49 @@
+'use strict';
+
+/**
+ * @param {string} containerId - id of the DOM container
+ * @constructor
+ */
+function FlexibilityRegistryDetailView(containerId) {
+    this.oContainer = document.getElementById(containerId);
+    this.oEditorDOM = document.createElement('div');
+    this.oEditorDOM.id = 'flexibility-editor';
+    this.oContainer.appendChild(this.oEditorDOM);
+
+    this.oEditor = ace.edit('flexibility-editor');
+    this.oEditor.getSession().setUseWrapMode(true);
+    this.oEditor.getSession().setTabSize(2);
+    this.oEditor.getSession().setMode('ace/mode/json');
+
+    this._setTheme();
+}
+
+/**
+ * Updates data.
+ * @param {Object} data - object structure as JSON
+ */
+FlexibilityRegistryDetailView.prototype.update = function (data) {
+    const oEditor = this.oEditor;
+    const oData = data;
+    const oDataJSON = JSON.stringify(oData, null, '\t');
+
+    oEditor.setValue(oDataJSON);
+};
+
+/**
+ * Clears editor.
+ */
+FlexibilityRegistryDetailView.prototype.clear = function () {
+    this.oEditor.setValue('', -1);
+};
+
+/**
+ * Sets theme.
+ */
+FlexibilityRegistryDetailView.prototype._setTheme = function () {
+    const bDarkMode = chrome.devtools.panels.themeName === 'dark';
+
+    this.oEditor.setTheme(bDarkMode ? 'ace/theme/vibrant_ink' : 'ace/theme/chrome');
+};
+
+module.exports = FlexibilityRegistryDetailView;