sharing and UX improvements

app/assets/dash_v1.css

@@ -2,7 +2,7 @@
 @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
 
 html {
-	font-family: "Source Sans Pro";
+	font-family: "Source Sans Pro", sans-serif;
 }
 
 table, th, td {
@@ -17,7 +17,7 @@ th, td {
 }
 
 pre, code {
-	font-family: "Source Code Pro";
+	font-family: "Source Code Pro", monospace;
 	font-size: 10pt;
 }
 
@@ -25,11 +25,44 @@ a {
 	color: #004d4d;
 }
 
+.page-header {
+	background: #ccdddd;
+	width: 100%;
+	margin: 0;
+	padding: 0;
+	padding-left: 20px;
+	padding-right: 20px;
+	position: fixed;
+	top: 0;
+	left: 0;
+}
+
+.devbug-header {
+	background: #509d9d;
+	width: 100%;
+	position: relative;
+	margin: 0;
+	padding: 5px;
+	padding-left: 20px;
+	margin-left: -20px;
+	color: white;
+}
+
+.spacer {
+	min-height: 165px;
+}
+
 .navul {
 	list-style-type: none;
 	margin: 0;
-	padding: 5;
-	margin-bottom: 20px;
+	padding: 0;
+	padding-left: 20px;
+	padding-top: 10px;
+	padding-bottom: 10px;
+	margin-left: -20px;
+	position: relative;
+	width: 100%;
+	background: #004d4d;
 }
 
 .navli {
@@ -41,7 +74,7 @@ a {
 }
 
 .navli:hover {
-	background: #004d4d;
+	background: #509d9d;
 }
 
 .nava {
@@ -52,4 +85,11 @@ a {
 
 .nava:hover {
 	color: #eee;
-}
+}
+
+pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
+.string { color: darkslateblue; }
+.number { color: darkorange; }
+.boolean { color: blue; }
+.null { color: magenta; }
+.key { color: green; }

app/assets/dash_v1.js

@@ -0,0 +1,29 @@
+function output(inp) {
+    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
+}
+
+function syntaxHighlight(json) {
+    json = JSON.stringify(JSON.parse(json.replace(/"/g, '"')), undefined, 4)
+    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+        var cls = 'number';
+        if (/^"/.test(match)) {
+            if (/:$/.test(match)) {
+                cls = 'key';
+            } else {
+                cls = 'string';
+            }
+        } else if (/true|false/.test(match)) {
+            cls = 'boolean';
+        } else if (/null/.test(match)) {
+            cls = 'null';
+        }
+        return '<span class="' + cls + '">' + match + '</span>';
+    });
+}
+
+function from_server(json_string){
+    console.log(json_string)
+    json_string = JSON.parse(json_string.replace(/&quot;/g, '"'))
+    window.devbug = json_string
+}