feature(background): refactor background file to use observables

Author: erwinmombay

background.js

@@ -5,9 +5,19 @@ var inspectedTabs = {};
 // tabId -> buffered data
 var data = {};
 
-function brokerMessage(message, sender) {
-  var tabId = sender.tab.id,
-      devToolsPort = inspectedTabs[tabId];
+var runtimeMessage = createRxFrom(chrome.runtime.onMessage, messageSelector);
+var runtimeConnect = createRxFrom(chrome.runtime.onConnect);
+var tabsRemoved = createRxFrom(chrome.tabs.onRemoved);
+
+runtimeMessage.forEach(brokerMessage);
+runtimeConnect.forEach(onConnect);
+tabsRemoved.forEach(onTabsRemoved);
+
+function brokerMessage(event) {
+  var message = event.message;
+  var sender = event.sender;
+  var tabId = sender.tab.id;
+  var devToolsPort = inspectedTabs[tabId];
 
   if (!data[tabId] || message === 'refresh') {
     resetState(tabId);
@@ -98,39 +108,37 @@ function bufferData(tabId, message) {
   // TODO: Handle digest timings
 }
 
-// context script –> background
-chrome.runtime.onMessage.addListener(brokerMessage);
-
-chrome.runtime.onConnect.addListener(function(devToolsPort) {
-
-  devToolsPort.onMessage.addListener(registerInspectedTabId);
-
-  function registerInspectedTabId(inspectedTabId) {
-    inspectedTabs[inspectedTabId] = devToolsPort;
-
-    if (!data[inspectedTabId]) {
-      resetState(inspectedTabId);
-    }
-    devToolsPort.postMessage({
-      event: 'hydrate',
-      data: data[inspectedTabId]
-    });
+function onConnect(devToolsPort) {
+  var devToolsMessage = createRxFrom(devToolsPort.onMessage);
+  devToolsMessage.forEach(registerInspectedTabId.bind(null, devToolsPort));
+  return event;
+}
 
-    devToolsPort.onDisconnect.addListener(function () {
-      delete inspectedTabs[inspectedTabId];
-    });
+function registerInspectedTabId(devToolsPort, inspectedTabId) {
+  inspectedTabs[inspectedTabId] = devToolsPort;
 
-    //devToolsPort.onMessage.removeListener(registerInspectedTabId);
+  if (!data[inspectedTabId]) {
+    resetState(inspectedTabId);
   }
+  devToolsPort.postMessage({
+    event: 'hydrate',
+    data: data[inspectedTabId]
+  });
 
-});
+  var devToolsDisconnect = createRxFrom(devToolsPort.onDisconnect);
+  devToolsDisconnect.forEach(onDisconnect);
+  return event;
+}
 
-chrome.tabs.onRemoved.addListener(function (tabId) {
+function onDisconnect(inspectedTabId) {
+  delete inspectedTabs[inspectedTabId];
+}
+
+function onTabsRemoved(tabId) {
   if (data[tabId]) {
     delete data[tabId];
   }
-});
-
+}
 
 function showPageAction(tabId) {
   chrome.pageAction.show(tabId);
@@ -139,3 +147,19 @@ function showPageAction(tabId) {
     title: 'Batarang Active'
   });
 }
+
+function createRxFrom(target, selector) {
+  return Rx.Observable.fromEventPattern(
+    function(handler) { target.addListener(handler); },
+    function(handler) { target.removeListener(handler); },
+    selector
+  );
+}
+
+function messageSelector() {
+  return {
+    message: arguments[0],
+    sender: arguments[1],
+    sendResponse: arguments[2]
+  };
+}

gulpfile.js

@@ -24,6 +24,7 @@ gulp.task('package', ['browserify'], function () {
       './dist/**',
       './img/**',
       './panel/**',
+      'libs/rx.all.js',
       'background.js',
       'devtoolsBackground.*',
       'inject.js',