playground/client: make results log toggle-able

* Results panel is toggle-able and hidden by default.
* Fix broken rendering in Safari.

Close vanadium/issues#425
Close vanadium/issues#426

Change-Id: Ia0556e73306410e0a5b0c3a2cfb501d6d10a020b

client/browser/api/index.js

@@ -88,7 +88,7 @@ API.prototype.url = function(options) {
     clone.query = { id: encodeURIComponent(options.uuid) };
   }
 
-  if (api.options.debug) {
+  if (api.options.debug || options.debug) {
     clone.query = clone.query || {};
     clone.query.debug = 1;
   }
@@ -207,7 +207,10 @@ API.prototype.done = function(uuid) {
 API.prototype.run = function(data, callback) {
   var api = this;
   var uuid = data.uuid;
-  var uri = api.url({ action: 'run' });
+  var uri = api.url({
+        action: 'run',
+        debug: true
+      });
 
   if (api.isPending(uuid)) {
     var message = format('%s is already running');

client/browser/components/bundle/index.js

@@ -27,6 +27,7 @@ function bundle(json) {
       stop: stop,
       save: save,
       fileChange: fileChange,
+      showResults: showResults
     }
   });
 
@@ -51,6 +52,7 @@ function bundle(json) {
 
     // If running clear previous logs and open the console.
     if (running) {
+      state.results.open.set(true);
       state.results.logs.set(hg.array([]));
       state.results.follow.set(true);
     }
@@ -59,6 +61,10 @@ function bundle(json) {
   return state;
 }
 
+function showResults(state, data) {
+  state.results.open.set(true);
+}
+
 // When a file's contents change via the editor update the state.
 function fileChange(state, data) {
   var current = state.files.get(data.name);

client/browser/components/bundle/render.js

@@ -40,8 +40,18 @@ function code(state, channels) {
 
 function tabs(state, channels) {
   var files = toArray(state.files);
+  var children = files.map(tab, state);
 
-  return h('.tabs', files.map(tab, state));
+  // .spacer for flex box pushing a.show-results to the far right
+  children.push(h('.spacer'));
+
+  children.push(h('a.show-results', {
+    title: 'Open the results console.',
+    href: '#',
+    'ev-click': click(channels.showResults)
+  }));
+
+  return h('.tabs', children);
 }
 
 function tab(file, index, array) {

client/browser/components/log/render.js

@@ -8,7 +8,7 @@ module.exports = render;
 
 // This is expected to be called an iterator fn passed to logs.map(render)
 function render(state, index, logs) {
-  var time = moment(state.timestamp).format('MMM D HH:mm:ss SSS');
+  var time = moment(state.timestamp).format('MMM D HH:mm:ss.SSS');
   var stream = state.stream || 'unknown';
 
   return h('.log', {

client/browser/components/results/index.js

@@ -14,7 +14,8 @@ function results() {
     debug: hg.value(false),
     channels: {
       follow: follow,
-      debug: debug
+      debug: debug,
+      toggle: toggle
     }
   });
 
@@ -40,3 +41,9 @@ function debug(state, data) {
     state.debug.set(data.debug);
   }
 }
+
+function toggle(state, data) {
+  var current = state.open();
+
+  state.open.set(!current);
+}

client/browser/components/results/render.js

@@ -8,20 +8,21 @@ var click = require('../../event-handlers/click');
 var followHook = require('./follow-hook');
 var log = require('../log');
 var format = require('format');
+var debug = require('debug')('components:results:render');
 
 module.exports = render;
 
 function render(state, channels) {
-  return h('.results', [
+  debug('update %o', state);
+
+  channels = channels || state.channels;
+
+  return h('.results', {
+    className: state.open ? 'opened' : 'closed'
+  },
+  [
     hg.partial(controls, state, channels),
-    h('.console', {
-      className: state.debug ? 'debug' : ''
-    }, [
-      h('.scroller', {
-        'ev-scroll': scroll(channels.follow, { scrolling: true }),
-        'follow-console': followHook(state.follow)
-      }, state.logs.map(log.render))
-    ])
+    hg.partial(terminal, state, channels)
   ]);
 }
 
@@ -30,12 +31,28 @@ function controls(state, channels) {
   var title = format('Toggle debug console output %s.', onOrOff);
   var text = format(' Debug: %s', onOrOff);
 
-  return h('.controls', [
-    'Results',
-    h('a.debug', {
+  return h('.results-controls', [
+    h('a.toggle-display', {
+      href: '#',
+      title: (state.open ? 'Close' : 'Open') + ' the results console.',
+      'ev-click': click(channels.toggle),
+    }),
+    h('.title', 'Results'),
+    h('a.debug-button', {
       href: '#',
       'ev-click': click(channels.debug, { debug: ! state.debug }),
       title: title
-    }, text)
+    }, text),
+  ]);
+}
+
+function terminal(state, channels) {
+  return h('.results-console', {
+    className: state.debug ? 'debug' : ''
+  }, [
+    h('.scroller', {
+      'ev-scroll': scroll(channels.follow, { scrolling: true }),
+      'follow-console': followHook(state.follow)
+    }, state.logs.map(log.render))
   ]);
 }

client/package.json

@@ -38,9 +38,11 @@
     "minimist": "^1.1.1",
     "myth": "^1.4.0",
     "pgbundle": "0.0.1",
-    "rework-inherit": "^0.2.3",
+    "raf": "^2.0.4",
     "rework": "^1.0.1",
+    "rework-inherit": "^0.2.3",
     "run-browser": "^2.0.2",
+    "synthetic-dom-events": "git://github.com/Raynos/synthetic-dom-events",
     "tape": "^3.5.0"
   },
   "repository": {

client/stylesheets/components/results.css

@@ -0,0 +1,127 @@
+.results {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--grey-50);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 35%;
+  right: 0;
+  z-index: 2000;
+  transition: transform ease-in-out 0.3s;
+}
+
+.results.closed {
+  transform: translateX(100%);
+}
+
+.results.opened {
+  transform: translateX(0);
+}
+
+.results-controls {
+  display: flex;
+  background-color: var(--cyan-600);
+  padding: var(--gutter-half) var(--gutter);
+  padding-left: var(--gutter-half);
+  color: var(--white);
+}
+
+.results-controls a.toggle-display {
+  inherit: .icon-base;
+  background-image: url(/icons/chevron-right.svg);
+}
+
+.results-controls a.toggle-display {
+  inherit: .icon-base;
+  margin-right: var(--gutter-half);
+}
+
+.opened .results-controls a.toggle-display {
+  background-image: url(/icons/chevron-right.svg);
+}
+
+.closed .results-controls a.toggle-display {
+  background-image: url(/icons/chevron-left.svg);
+}
+
+.results-controls .title {
+  inherit: .type-body;
+  margin: 0;
+  color: var(--white);
+  /* Push .debug-button to the end. */
+  flex: 1;
+}
+
+.results-controls .debug-button {
+  color: var(--blue-grey-700);
+}
+
+.results-console {
+  flex: 1;
+  position: relative;
+}
+
+.scroller {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  padding: var(--gutter);
+}
+
+.log {
+  margin-bottom: var(--gutter);
+}
+
+.log .meta {
+  display: flex;
+}
+
+.log .meta .source {
+  flex: 1;
+  font-weight: bold;
+}
+
+.log .meta .source .stream {
+  font-weight: normal;
+}
+
+.log .message {
+  font-family: "Source Code Pro", monospace;
+  padding-left: var(--gutter-half);
+  overflow: hidden;
+  overflow-y: scroll;
+}
+
+.log .message pre {
+  padding: 0;
+  margin: 0;
+  white-space: pre-wrap;       /* CSS 3 */
+  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+  white-space: -pre-wrap;      /* Opera 4-6 */
+  white-space: -o-pre-wrap;    /* Opera 7 */
+  word-wrap: break-word;
+}
+
+.log.debug pre {
+  color: #00B9F7;
+}
+
+.log.stdout {
+
+}
+
+.log.stderr pre {
+  color: #F03A76;
+}
+
+.log.debug {
+  display: none;
+}
+
+.results-console.debug .log.debug {
+  display: block;
+}

client/stylesheets/icons.css

@@ -80,8 +80,8 @@
   content: ' ';
   display: inline-block;
   /* matches typography line-height */
-  width: 28px;
-  height: 28px;
+  width: 24px;
+  height: 24px;
   vertical-align: middle;
   background-repeat: no-repeat;
   background-position: center center;