Merge branch 'improve-messaging' into nice-ui

Author: localjo

background.js

@@ -14,8 +14,12 @@ chrome.runtime.onConnect.addListener(function (port) {
     if (i !== -1) ports.splice(i, 1);
   });
   port.onMessage.addListener(function (msg) {
-    console.log('Background.js Recieved Message', msg);
-    processBackgroundIncomingMessage(msg);
+    if (msg.tabId) {
+      tabInspected = msg.tabId;
+      getJsonResource(tabInspected);
+    } else {
+      console.log(msg);
+    }
   });
 });
 
@@ -25,21 +29,13 @@ chrome.tabs.onUpdated.addListener(function (tabId, changes) {
   }
 });
 
-function processBackgroundIncomingMessage(msg) {
-  console.log('Processing Message in Background', msg);
-  if (msg.tabId) {
-    tabInspected = msg.tabId;
-    getJsonResource(tabInspected);
-  } else {
-    console.log(msg);
-  }
-}
-
 // Function to send a message to main.js
-function notifyDevtools(msg) {
-  console.log('Background.js Sending Message', msg);
+function notifyDevtools(msgType, msg) {
+  var packagedMessage = {};
+  packagedMessage.msgType = msgType;
+  packagedMessage.msg = msg;
   ports.forEach(function (port) {
-    port.postMessage(msg);
+    port.postMessage(packagedMessage);
   });
 }
 
@@ -51,21 +47,22 @@ function getJsonResource(tabID) {
     xhr.onreadystatechange = function() {
       var isSolidus, errMsg;
       isSolidus = (xhr.getResponseHeader('X-Powered-By').match(/Solidus/i));
+      notifyDevtools('info', xhr.getResponseHeader('X-Powered-By'));
       if (xhr.readyState === 4 && isSolidus) { // Is complete Solidus response?
         if(xhr.status !== 200){ // Check that Solidus response didn't fail
           errMsg = 'Failed to get Solidus context. Status: ' + xhr.status;
-          notifyDevtools(JSON.parse('{"error":"' + errMsg + '"}'));
+          notifyDevtools('error', errMsg);
         } else {
           try {
             // Send Solidus JSON to devpanel
-            notifyDevtools(JSON.parse(xhr.responseText));
+            notifyDevtools('context', JSON.parse(xhr.responseText));
           } catch  (e) {
-            notifyDevtools(JSON.parse('{"error":"' + e + '"}'));
+            notifyDevtools('error', e);
           }
         }
       } else {
         errMsg = 'Looks like you\'re not inspecting a Solidus Page.';
-        notifyDevtools(JSON.parse('{"error":"' + errMsg + '"}'));
+        notifyDevtools('error', errMsg);
       }
     };
     xhr.send();

views/devpanel.js

@@ -11,32 +11,57 @@
 var inspector;
 
 function processMainIncomingMessage(msg) {
-  console.log('Devpanel Processing Message', msg);
-  if (msg.hasOwnProperty('page')) {
-    displayMessage('Looks like a Solidus page!');
-    //Check if there is an initialized InspectorJSON that hasn't been destroyed
-    if ((inspector instanceof InspectorJSON) && (inspector.page)) {
-      inspector.view(msg);
-    } else {
-      inspector = new InspectorJSON({
-        element: 'pagecontext',
-        url: msg.url.path,
-        json: msg
-      });
-    }
-  } else if (msg.hasOwnProperty('error')) {
-    if (inspector instanceof InspectorJSON) {
-      inspector.destroy();
-    }
-    displayMessage(msg.error);
+  switch(msg.msgType) {
+    case 'context':
+      setupInspector(msg.msg);
+      break;
+    case 'error':
+      destroyInspector();
+      showAlert(msg.msg, 'Error:');
+      //activateTab('info');
+      break;
+    case 'status':
+      updateStatus(msg.msg);
+      break;
+    default:
+      console.log('Unhandled Message', msg);
+  }
+}
+
+function setupInspector(context) {
+  if ((inspector instanceof InspectorJSON) && (inspector.page)) {
+    inspector.view(context);
   } else {
-    console.log('Message Not Processed', msg);
+    inspector = new InspectorJSON({
+      element: 'pagecontext',
+      url: context.url.path,
+      json: context
+    });
   }
 }
 
-function displayMessage(msg) {
-  document.querySelector('#messageholder').innerHTML = msg;
-  console.log('Updated Panel With Message', msg);
+function destroyInspector() {
+  if (inspector instanceof InspectorJSON) {
+    inspector.destroy();
+  }
+}
+
+function createAlert(info, label, alertClass) { //Create a Bootstrap HTML alert
+  var infoClass = alertClass?alertClass:'alert-info';
+  var infoLabel = label?'<strong>' + label +'</strong> ':'';
+  return '<div class="alert ' + infoClass +
+  ' alert-dismissible" role="alert"><button type="button" class="close"' +
+  ' data-dismiss="alert"><span aria-hidden="true">&times;</span>' +
+  '<span class="sr-only">Close</span></button>' + infoLabel + info + '</div>';
+}
+
+function showAlert(message, label, alertClass){ //Show an alert
+  var theAlert = createAlert(message, label, alertClass);
+  document.querySelector('#messageholder').innerHTML += theAlert;
+}
+
+function updateStatus(status) { //Update status panel in footer
+  document.querySelector('#pluginstatus').innerHTML = status;
 }
 
 var socket = io('http://localhost:8081');