feat: copy control to console (#215)

A click on the id of a control in the properties
tab or on the button 'Copy to console' in the
Action tab will create a temp global variable
starting with 'ui5$' and a number e.g. 'ui5$0'
that refers to the control. All controls
will be collected in the variable 'ui5$temp' for
convenience.

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

@@ -183,6 +183,13 @@
                 action: 'do-control-focus',
                 data: changeData
             });
+        },
+
+        onCopyControlToConsole: function(changeData) {
+            port.postMessage({
+                action: 'do-copy-control-to-console',
+                data: changeData
+            });
         }
     });
 
@@ -392,6 +399,20 @@
         onSelectionChange: displayFrameData
     });
 
+    var updateControlIdLinks = () => {
+        document.querySelectorAll('.controlId').forEach(element => element.addEventListener('click', function() {
+            const controlId = element.innerText;
+            if (controlId) {
+                const changeData = {
+                    controlId: controlId
+                };
+                port.postMessage({
+                    action: 'do-copy-control-to-console',
+                    data: changeData
+                });
+            }
+        }));
+    };
     // ================================================================================
     // Communication
     // ================================================================================
@@ -511,6 +532,8 @@
 
                 // Close possible open binding info and/or methods info
                 controlBindingsSplitter.hideEndContainer();
+                // Make control ids clickable
+                updateControlIdLinks();
             }
         },
 
@@ -535,6 +558,8 @@
                 document.querySelector('#tab-bindings count').innerHTML = ' (' + Object.keys(message.controlBindings).length + ')';
                 // Close possible open binding info and/or methods info
                 controlBindingsSplitterElementsRegistry.hideEndContainer();
+                // Make control ids clickable
+                updateControlIdLinks();
             }
         },
 

app/scripts/injected/main.js

@@ -7,6 +7,12 @@ sap.ui.require(['ToolsAPI'], function (ToolsAPI) {
     var rightClickHandler = require('../modules/injected/rightClickHandler.js');
     var applicationUtils = require('../modules/injected/applicationUtils');
 
+    var ui5TempName = 'ui5$temp';
+	var ui5Temp = window[ui5TempName] = {}; // Container for all temp. variables
+	var tempVarCount = 0;
+
+    const log = (m) => console.log(`ui5-inspector: ${m}`);
+
     // Create global reference for the extension.
     ui5inspector.createReferences();
 
@@ -320,6 +326,32 @@ sap.ui.require(['ToolsAPI'], function (ToolsAPI) {
 
             selectedElement = document.getElementById(elementID);
             _writeInClipboardFromDevTools(selectedElement.outerHTML);
+        },
+        /**
+         * Handler to copy the element into a temp variable on the console
+         * @param {Object} event
+         */
+        'do-copy-control-to-console': function (event) {
+            var oData = event.detail.data;
+            var sControlId = oData.controlId;
+            const control = sap.ui.getCore().byId(sControlId);
+            if (control) {
+                try {
+                    const tempVarName = ui5Temp[sControlId] && ui5Temp[sControlId].savedAs || `ui5$${tempVarCount++}`;
+                    const instance = window[tempVarName] = ui5Temp[sControlId] = {
+                        control: control,
+                        isA: control.getMetadata().getName(),
+                        savedAs: tempVarName
+                    };
+
+                    log(`Control copied to global var ${tempVarName}, all vars are collected in global var ${ui5TempName}`);
+                    console.log(instance);
+                } catch (exc) {
+                    // Ignore errors gracefully
+                }
+            } else {
+                log(`No Control with id ${sControlId} exists`);
+            }
         }
     };
 

app/scripts/modules/injected/controlUtils.js

@@ -387,7 +387,7 @@ var controlProperties = (function () {
         });
         properties[OWN].data = formatedProps;
         properties[OWN].types = types;
-        properties[OWN].options.title = '#' + controlId + ' <span gray>(' + title + ')</span>';
+        properties[OWN].options.title = '#<span class="controlId" title="Click to copy control to console">' + controlId + '</span><span gray>(' + title + ')</span>';
 
         _formatInheritedProperties(controlId, properties);
         _getControlPropertiesAssociations(controlId, properties[OWN]);
@@ -871,7 +871,7 @@ module.exports = {
     getControlActionsFormattedForDataView: function (controlId) {
         return {
             actions: {
-                data: ['Focus', 'Invalidate']
+                data: ['Focus', 'Invalidate', 'Copy to Console']
             },
             own: {
                 options: {

app/scripts/modules/ui/DataView.js

@@ -52,6 +52,13 @@ function DataView(target, options) {
      this.onControlFocused = function (target) {
     };
 
+        /**
+     * Method fired when the Copy to Console button is clicked.
+     * @param {Object} target - arget control to be focused
+     */
+        this.onCopyControlToConsole = function (target) {
+        };
+
     /**
      * Method fired when the Invalidate button is clicked.
      * @param {Object} target - target control to be invalidated
@@ -71,6 +78,7 @@ function DataView(target, options) {
         this.onPropertyUpdated = options.onPropertyUpdated || this.onPropertyUpdated;
         this.onControlInvalidated = options.onControlInvalidated || this.onControlInvalidated;
         this.onControlFocused = options.onControlFocused || this.onControlFocused;
+        this.onCopyControlToConsole = options.onCopyControlToConsole || this.onCopyControlToConsole;
 
         this.onValueClick = options.onValueClick || this.onValueClick;
 
@@ -425,6 +433,7 @@ DataView.prototype._onClickHandler = function () {
             switch (targetElement.id) {
                 case 'control-invalidate' : that._onInvalidateElement(targetElement); break;
                 case 'control-focus' : that._onFocusElement(targetElement); break;
+                case 'control-copy to console' : that._onCopyElementToConsole(targetElement); break;
             }
         }
 
@@ -478,6 +487,15 @@ DataView.prototype._onFocusElement = function (target) {
 
 };
 
+DataView.prototype._onCopyElementToConsole = function (target) {
+    var that = this;
+    var propertyData = {};
+
+    propertyData.controlId = target.getAttribute('data-control-id');
+    that.onCopyControlToConsole(propertyData);
+
+};
+
 /**
  * Blur event handler for the editable values.
  * @param {element} target - HTML DOM element

app/styles/less/modules/DataView.less

@@ -93,4 +93,8 @@ data-view {
         padding-left: 5px;
         color: lightcoral;
     }
+
+    .controlId {
+        cursor: pointer;
+    }
 }

tests/styles/themes/dark/dark.css

@@ -387,6 +387,9 @@ data-view .disclaimer {
   padding-left: 5px;
   color: lightcoral;
 }
+data-view .controlId {
+  cursor: pointer;
+}
 /* ==========================================================================
    FrameSelect
    ========================================================================== */

tests/styles/themes/light/light.css

@@ -387,6 +387,9 @@ data-view .disclaimer {
   padding-left: 5px;
   color: lightcoral;
 }
+data-view .controlId {
+  cursor: pointer;
+}
 /* ==========================================================================
    FrameSelect
    ========================================================================== */