fix(background): hydrate inspected app data on devtools connect

background.js

@@ -2,21 +2,67 @@
 // tabId -> devtool port
 var inspectedTabs = {};
 
-// TODO: keep track of app state here
-// tabId -> list of buffered events
-var buffer = {};
+// tabId -> buffered data
+var data = {};
 
 function bufferOrForward(message, sender) {
   var tabId = sender.tab.id,
       devToolsPort = inspectedTabs[tabId];
 
+  if (!data[tabId] || message === 'refresh') {
+    resetState(tabId);
+  }
+
+  // TODO: not sure how I feel about special-casing `refresh`
+  if (message !== 'refresh') {
+    message = JSON.parse(message);
+  }
+
+  bufferData(tabId, message);
   if (devToolsPort) {
     devToolsPort.postMessage(message);
   }
-  if (!buffer[tabId] || message === 'refresh') {
-    resetState(tabId);
+}
+
+function resetState(tabId) {
+  data[tabId] = {
+    hints: [],
+    scopes: {}
+  };
+}
+
+function bufferData(tabId, message) {
+  var tabData = data[tabId],
+      scope;
+
+  if (message.message) {
+    return tabData.hints.push(message);
+  }
+
+  if (message.event) {
+    if (message.event === 'scope:new') {
+      tabData.scopes[message.child] = {
+        parent: message.parent,
+        children: [],
+        models: {}
+      };
+      if (tabData.scopes[message.parent]) {
+        tabData.scopes[message.parent].children.push(message.child);
+      }
+    } else if (message.id && (scope = tabData.scopes[message.id])) {
+      if (message.event === 'scope:destroy') {
+        if (scope.parent) {
+          scope.parent.children.splice(scope.parent.children.indexOf(child), 1);
+        }
+        delete scopes[message.id];
+      } else if (message.event === 'model:change') {
+        scope.models[message.path] = (typeof message.value === 'undefined') ?
+                                              undefined : JSON.parse(message.value);
+      } else if (message.event === 'scope:link') {
+        scope.descriptor = message.descriptor;
+      }
+    }
   }
-  buffer[tabId].push(message);
 }
 
 // context script –> background
@@ -29,11 +75,12 @@ chrome.runtime.onConnect.addListener(function(devToolsPort) {
   function registerInspectedTabId(inspectedTabId) {
     inspectedTabs[inspectedTabId] = devToolsPort;
 
-    if (!buffer[inspectedTabId]) {
+    if (!data[inspectedTabId]) {
       resetState(inspectedTabId);
     }
-    buffer[inspectedTabId].forEach(function(msg) {
-      devToolsPort.postMessage(msg);
+    devToolsPort.postMessage({
+      event: 'hydrate',
+      data: data[inspectedTabId]
     });
 
     devToolsPort.onDisconnect.addListener(function () {
@@ -44,7 +91,3 @@ chrome.runtime.onConnect.addListener(function(devToolsPort) {
   }
 
 });
-
-function resetState(tabId) {
-  buffer[tabId] = [];
-}

panel/components/inspected-app/inspected-app.js

@@ -67,6 +67,8 @@ function inspectedAppService($rootScope, $q) {
       } else if (typeof msg === 'string') {
         var hint = JSON.parse(msg);
         onHintMessage(hint);
+      } else if (typeof msg === 'object') {
+        onHintMessage(msg);
       }
     });
   });
@@ -78,7 +80,14 @@ function inspectedAppService($rootScope, $q) {
     if (hint.message) {
       hints.push(hint);
     } else if (hint.event) {
-      if (hint.event === 'scope:new') {
+      if (hint.event === 'hydrate') {
+        Object.keys(hint.data.scopes).forEach(function (scopeId) {
+          scopes[scopeId] = hint.data.scopes[scopeId];
+        });
+        hint.data.hints.forEach(function (hint) {
+          hints.push(hint);
+        });
+      } else if (hint.event === 'scope:new') {
         addNewScope(hint);
       } else if (hint.id && scopes[hint.id]) {
         var scope = scopes[hint.id];