senchalabs · arthurakay · Mar 4, 2014 · Mar 4, 2014 · Mar 4, 2014
diff --git a/app/AppInspector/app/util/Component.js b/app/AppInspector/app/util/Component.js
@@ -73,7 +73,7 @@ Ext.define('AI.util.Component', {
 
         // Ext JS 5 breaks the older ComponentManager API
         if (Ext.versions.extjs && Ext.versions.extjs.major > 4) {
-            all = Ext.Object.getValues(Ext.ComponentManager.all);
+            all = Ext.ComponentManager.getAll();
         }
         else {
             all = Ext.ComponentManager.all.getArray();

diff --git a/app/background.js b/app/background.js
diff --git a/app/background/background.html b/app/background/background.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+<script src="background.js"></script>
+</body>
+</html>
diff --git a/app/background/background.js b/app/background/background.js
@@ -0,0 +1,22 @@
+'use strict';
+
+// monitor page refresh
+chrome.extension.onConnect.addListener(function (port) {
+
+    //when devtools-page connects (when App Inspector is actually opened)
+    if (port.name === 'AppInspector') {
+
+        //add event listener for tab refresh
+        //NOTE: this fires across ALL tabs!
+        chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
+
+            //changeInfo has multiple statuses... only fire on complete
+            if (changeInfo.status === 'complete') {
+                port.postMessage({
+                    tabId   : tabId,
+                    message : 'refreshed!'
+                });
+            }
+        });
+    }
+});
diff --git a/app/devtools-page.html b/app/devtools-page.html
@@ -3,7 +3,9 @@
 
 <head>
     <title>App Inspector for Sencha</title>
-    <script type="text/javascript" src="devtools-page.js"></script>
+    <script type="text/javascript" src="devtools/panel.js"></script>
+    <script type="text/javascript" src="devtools/elements.js"></script>
+    <script type="text/javascript" src="devtools/right-click.js"></script>
 </head>
 
 <body>

diff --git a/app/devtools-page.js → app/devtools/elements.js b/app/devtools-page.js → app/devtools/elements.js
@@ -1,26 +1,10 @@
-// http://developer.chrome.com/extensions/devtools.html
 'use strict';
 
-/**
- * Sencha Panel
- */
-chrome.devtools.panels.create('Sencha', 'resources/images/panel_icon.png', 'AppInspector/index.html', function(senchaPanel) {
-    // right-click context menu
-    // chrome.contextMenus.create({
-    //     'title': 'Open App Inspector for Sencha...',
-    //     'contexts': ['all'],
-    //     'onclick': function(info, tab) {
-    //         //TODO: one day allow the user to open DevTools and navigate directly to the Sencha Tab
-    //         //      but right now this isn't possible
-    //         //      http://stackoverflow.com/questions/6801577/can-i-programmatically-open-the-devtools-from-a-google-chrome-extension
-    //     }
-    // });
-});
-
 /**
  * Elements Side Panel
  */
 var elementsPanel = chrome.devtools.panels.elements,
+
     pageDetectSenchaComponent = function pageDetectSenchaComponent() {
         var cmp, data, xtype,
             selectedEl = $0, //https://developers.google.com/chrome-developer-tools/docs/commandline-api#0_-_4
@@ -56,13 +40,13 @@ var elementsPanel = chrome.devtools.panels.elements,
         return data;
     };
 
-elementsPanel.createSidebarPane('Sencha Component', function(sidebar) {
+elementsPanel.createSidebarPane('Sencha Component', function (sidebar) {
-    var onSelectionChanged = function() {
+    var onSelectionChanged = function () {
         sidebar.setExpression('(' + pageDetectSenchaComponent.toString() + ')()');
     };
 
     onSelectionChanged();
 
     // selection listener
     elementsPanel.onSelectionChanged.addListener(onSelectionChanged);
-});
+});
diff --git a/app/devtools/panel.js b/app/devtools/panel.js
@@ -0,0 +1,35 @@
+'use strict';
+
+/**
+ * Create Sencha Panel
+ * http://developer.chrome.com/extensions/devtools.html
+ */
+chrome.devtools.panels.create(
+    'Sencha',
+    'resources/images/panel_icon.png',
+    'AppInspector/index.html',
+
+    function (senchaPanel) {
+        var READY;
+
+        senchaPanel.onShown.addListener(function (panelWindow) {
+            if (READY) { return; }
+            READY = true;
+
+            //connect to logic in background.js
+            var port = chrome.runtime.connect({ name : 'AppInspector' }),
+                tabId = chrome.devtools.inspectedWindow.tabId;
+
+            //when messages are received from background.js
+            port.onMessage.addListener(function (msg) {
+
+                //we only care about the tab which we're debugging
+                if (msg.tabId === tabId) {
+
+                    //refresh AppInspector
+                    panelWindow.location.reload(true);
+                }
+            });
+        });
+    }
+);
diff --git a/app/devtools/right-click.js b/app/devtools/right-click.js
@@ -0,0 +1,13 @@
+'use strict';
+
+// right-click context menu
+
+// chrome.contextMenus.create({
+//     'title': 'Open App Inspector for Sencha...',
+//     'contexts': ['all'],
+//     'onclick': function(info, tab) {
+//         //TODO: one day allow the user to open DevTools and navigate directly to the Sencha Tab
+//         //      but right now this isn't possible
+//         //      http://stackoverflow.com/questions/6801577/can-i-programmatically-open-the-devtools-from-a-google-chrome-extension
+//     }
+// });
diff --git a/app/manifest.json b/app/manifest.json
@@ -11,9 +11,7 @@
     },
     "default_locale"          : "en",
     "background"              : {
-        "scripts" : [
+        "page" : "background/background.html"
-            "background.js"
-        ]
     },
     "devtools_page"           : "devtools-page.html",
     "content_security_policy" : "script-src 'self' 'unsafe-eval'; object-src 'self'",