fix a bug that sometimes caused the http bodies to not be displayed. fix a bug that caused syntax highlighting to no longer work

assets/ngrok.js

@@ -47,17 +47,15 @@ ngrok.factory("txnSvc", function() {
         body.exists = body.Length > 0;
         body.hasError = !!body.Error;
 
-        body.syntaxClass = function() {
-            return {
-                "text/xml":               "xml",
-                "application/xml":        "xml",
-                "text/html":              "xml",
-                "text/css":               "css",
-                "application/json":       "json",
-                "text/javascript":        "javascript",
-                "application/javascript": "javascript",
-            }[body.ContentType];
-        }
+        body.syntaxClass = {
+            "text/xml":               "xml",
+            "application/xml":        "xml",
+            "text/html":              "xml",
+            "text/css":               "css",
+            "application/json":       "json",
+            "text/javascript":        "javascript",
+            "application/javascript": "javascript",
+        }[body.ContentType];
 
         // decode body
         if (binary) {
@@ -236,7 +234,7 @@ ngrok.directive({
         };
     },
 
-    "body": function($timeout) {
+    "body": function() {
         return {
             scope: {
                 "body": "=",
@@ -260,11 +258,15 @@ ngrok.directive({
             '</div>',
 
             link: function($scope, $elem) {
-                $timeout(function() {
-                    $code = $elem.find("code").get(0);
-                    hljs.highlightBlock($code);
+                $scope.$watch(function() { return $scope.body; }, function() {
+                    $code = $elem.find("code");
+                    // if we highlight when the code is empty, hljs manipulates the dom in a
+                    // a bad way that causes angular to fail
+                    if (!!$code.text()) {
+                        hljs.highlightBlock($code.get(0));
+                    }
 
-                    if ($scope.body.ErrorOffset > -1) {
+                    if ($scope.body && $scope.body.ErrorOffset > -1) {
                         var offset = $scope.body.ErrorOffset;
 
                         function textNodes(node) {
@@ -335,18 +337,26 @@ ngrok.controller({
             });
         }
         var setReq = function() {
-            $scope.Req = txnSvc.active().Req;
+            var txn = txnSvc.active();
+            if (!!txn && txn.Req) {
+                $scope.Req = txnSvc.active().Req;
+            } else {
+                $scope.Req = null;
+            }
         };
-        setReq();
-        $scope.$watch(function() { return txnSvc.active().Id }, setReq);
+        $scope.$watch(function() { return txnSvc.active() }, setReq);
     },
 
-    "HttpResponse": function($scope, txnSvc) {
+    "HttpResponse": function($scope, $element, $timeout, txnSvc) {
         var setResp = function() {
-            $scope.Resp = txnSvc.active().Resp;
+            var txn = txnSvc.active();
+            if (!!txn && txn.Resp) {
+                $scope.Resp = txnSvc.active().Resp;
+            } else {
+                $scope.Resp = null;
+            }
         };
-        setResp();
-        $scope.$watch(function() { return txnSvc.active().Id }, setResp);
+        $scope.$watch(function() { return txnSvc.active() }, setResp);
     },
 
     "TxnNavItem": function($scope, txnSvc) {

assets/page.html

@@ -7,7 +7,6 @@
         <script src="/static/vkbeautify.js"></script>
         <script src="/static/jquery-1.9.1.min.js"></script>
         <script src="/static/angular.js"></script>
-        <script>hljs.initHighlightingOnLoad();</script>
         <script src="/static/base64.js"></script>
         <script src="/static/ngrok.js"></script>
         <script type="text/javascript">
@@ -51,7 +50,7 @@
                     </div>
                 </div>
             </div>
-            <div class="row">
+            <div ng-show="txns.length>0" class="row">
                 <div class="span6">
                     <h4>All Requests</h4>
                     <table class="table txn-selector">
@@ -63,7 +62,7 @@
                     </table>
                 </div>
                 <div class="span6">
-                    <div ng-controller="HttpRequest">
+                    <div ng-show="!!Req" ng-controller="HttpRequest">
                         <h3>{{ Req.MethodPath }}</h3>
                         <div onbtnclick="replay()" btn="Replay" tabs="Summary,Headers,Raw,Binary">
                         </div>
@@ -82,14 +81,14 @@
                         </div>
 
                         <div ng-show="isTab('Binary')">
-                            <pre><code class="http">{{ Req.RawBytes }}</code></pre>
+                            <pre><code>{{ Req.RawBytes }}</code></pre>
                         </div>
 
                     </div>
 
                     <hr style="margin: 40px 0 20px" />
 
-                    <div ng-controller="HttpResponse">
+                    <div ng-show="!!Resp" ng-controller="HttpResponse">
                         <h3 ng-class="Resp.statusClass">{{ Resp.Status }}</h3>
 
                         <div tabs="Summary,Headers,Raw,Binary"></div>
@@ -106,7 +105,7 @@
                         </div>
 
                         <div ng-show="isTab('Binary')">
-                            <pre><code class="http">{{ Resp.RawBytes }}</code></pre>
+                            <pre><code>{{ Resp.RawBytes }}</code></pre>
                         </div>
                     </div>
                 </div>