feat: support inspection of nested iframes content (#196)

SAP · Oct 13, 2022 · 197dfd3 · 197dfd3
1 parent 784a2e2
commit 197dfd3
Show file tree

Hide file tree

Showing 15 changed files with 397 additions and 78 deletions.
diff --git a/app/html/panel/ui5/index.html b/app/html/panel/ui5/index.html
@@ -7,6 +7,10 @@
 
     </head>
     <body>
+        <frame-select id="frame-select">
+            <label>Frame: </label>
+            <select hidden></select>
+        </frame-select>
         <tabbar id="ui5-tabbar">
             <tabs>
                 <tab id="control-tree-tab" selected>Control Inspector</tab>

diff --git a/app/manifest.json b/app/manifest.json
@@ -10,6 +10,7 @@
             "js": [
                 "/scripts/content/detectUI5.js"
             ],
+            "all_frames": true,
             "matches": [
                 "http://*/*",
                 "https://*/*"

diff --git a/app/scripts/background/main.js b/app/scripts/background/main.js
@@ -25,7 +25,9 @@
     contextMenu.onClicked = function (info, tab) {
         utils.sendToAll({
             action: 'do-context-menu-control-select',
-            target: contextMenu._rightClickTarget
+            target: contextMenu._rightClickTarget,
+            // specify the frame in which the user clicked
+            frameId: info.frameId
         }, tab.id);
     };
 
@@ -37,7 +39,8 @@
      contextMenuCopyHtml.onClicked = function (info, tab) {
         utils.sendToAll({
             action: 'do-context-menu-copy-html',
-            target: contextMenu._rightClickTarget
+            target: contextMenu._rightClickTarget,
+            frameId: info.frameId
         }, tab.id);
     };
 
@@ -80,7 +83,9 @@
                 chrome.tabs.query({ active: true, windowId: w.id }, tabs => {
                     chrome.scripting.executeScript({
                         target: {
-                            tabId: tabs[0].id
+                            // inject the script only into the frame
+                            // specified in the request from the devTools UI5 panel script
+                            tabId: tabs[0].id, frameIds: [message.frameId]
                         },
                         files: [message.file]
                     });
@@ -112,6 +117,39 @@
         'on-ui5-devtool-hide': function (message) {
             contextMenu.removeAll();
             contextMenuCopyHtml.removeAll();
+        },
+
+        'do-ping-frames': function (message, messageSender) {
+            var frameIds = message.frameIds;
+            var liveFrameIds = [];
+            var pingFrame = function (i) {
+                    if (i >= frameIds.length) {
+                        // no more frameId to ping
+                        // => done with pinging each frame
+                        // => send a message [to the devTools UI5 panel]
+                        // with the updated list of 'live' frame ids
+                        chrome.runtime.sendMessage(messageSender.id, {
+                            action: 'on-ping-frames',
+                            frameIds: liveFrameIds
+                        });
+                        return;
+                    }
+
+                    var frameId = frameIds[i];
+                    // ping the next frame
+                    // from the <code>frameIds</code> list
+                    utils.sendToAll({
+                        action: 'do-ping',
+                        frameId: frameId
+                    }, function (isAlive) {
+                        if (isAlive) {
+                            liveFrameIds.push(frameId);
+                        }
+                        pingFrame(i + 1);
+                    });
+                };
+
+                pingFrame(0);
         }
     };
 

diff --git a/app/scripts/content/main.js b/app/scripts/content/main.js
@@ -65,6 +65,15 @@
          */
         'on-control-tree-hover': function (message) {
             highLighter.setDimensions(message.target);
+        },
+
+        'on-hide-highlight': function () {
+            highLighter.hide();
+        },
+
+        'do-ping': function (message, messageSender, sendResponse) {
+            // respond to ping
+            sendResponse(true /* alive status */);
         }
     };