rename plain to cliView, have max height on console output and fix scroll to bottom

plugins/cockpit/lib/index.js

@@ -42,7 +42,7 @@ exports.startup = function(data, reason) {
   window.testCli = require('cockpit/test/testCli');
 
   require('cockpit/ui/settings').startup(data, reason);
-  require('cockpit/ui/plain').startup(data, reason);
+  require('cockpit/ui/cliView').startup(data, reason);
 };
 
 /*

plugins/cockpit/lib/ui/cliView.css

@@ -4,6 +4,7 @@
   border: none; outline: none;
   font-family: consolas, courier, monospace;
   font-size: 120%;
+  padding-left: 16px;
 }
 
 .cptOutput {
@@ -14,7 +15,7 @@
   padding: 10px;
   margin: 0 15px;
   background: #DDD; color: #000;
-  overflow: hidden;
+  overflow: auto;
   position: absolute;
   z-index: 999;
   font-family: consolas, courier, monospace;
@@ -26,7 +27,7 @@
 }
 
 .cptCompletion {
-  color: #666;
+  color: #999;
   padding: 0 0 5px 2px;
   position: absolute;
   z-index: -1000;
@@ -65,6 +66,7 @@
 .cptCompletion span.INCOMPLETE { color: #DDD; border-bottom: 2px dotted #F80; }
 .cptCompletion span.INVALID { color: #DDD; border-bottom: 2px dotted #F00; }
 
+span.cptPrompt { color: #66F; font-weight: bold; }
 
 
 
@@ -142,12 +144,6 @@
   height: 25px; right: 0; bottom: 0; left: 0;
 }
 
-.cptPrompt {
-  width: 40px; padding-left: 5px;
-  position: absolute;
-  top: 0; width: 40px; bottom: 0; left: 0;
-}
-
 .cptKbd {
   position: absolute;
   top: 0; right: 0; bottom: 0; left: 40px;  

plugins/cockpit/lib/ui/cliView.js

@@ -38,7 +38,7 @@
 define(function(require, exports, module) {
 
 
-var editorCss = require("text!cockpit/ui/plain.css");
+var editorCss = require("text!cockpit/ui/cliView.css");
 var dom = require("pilot/dom").dom;
 dom.importCssString(editorCss);
 
@@ -61,7 +61,7 @@ var NO_HINT = new Hint(Status.VALID, '', 0, 0);
  * 2. Attach a set of events so the command line works
  */
 exports.startup = function(data, reason) {
-    var plainUi = new CliView(data);
+    var cliView = new CliView(data);
 };
 
 /**
@@ -74,7 +74,7 @@ function CliView(data) {
     // TODO: we should have a better way to specify command lines???
     this.element = this.doc.getElementById('cockpit');
     if (!this.element) {
-        console.log('No element with an id of cockpit. Bailing on plain cli');
+        console.log('No element with an id of cockpit. Bailing on cli');
         return;
     }
 
@@ -88,6 +88,7 @@ function CliView(data) {
     this.hints = [];
 
     this.createElements();
+    this.update();
 }
 CliView.prototype = {
     /**
@@ -113,6 +114,12 @@ CliView.prototype = {
         this.outputDirection.addEventListener('change', this.resizer.bind(this));
         this.resizer();
 
+        var setMaxOutputHeight = function() {
+            this.output.style.maxHeight = this.outputHeight.get() + 'px';
+        }.bind(this);
+        this.outputHeight.addEventListener('change', setMaxOutputHeight);
+        setMaxOutputHeight();
+
         canon.addEventListener('output',  function(ev) {
             new RequestView(ev.request, this);
         }.bind(this));
@@ -125,6 +132,16 @@ CliView.prototype = {
         }.bind(this), false);
     },
 
+    /**
+     * We need to see the output of the latest command entered
+     */
+    scrollOutputToBottom: function() {
+        // Certain browsers have a bug such that scrollHeight is too small
+        // when content does not fill the client area of the element
+        var scrollHeight = Math.max(this.output.scrollHeight, this.output.clientHeight);
+        this.output.scrollTop = scrollHeight - this.output.clientHeight;
+    },
+
     /**
      * To be called on window resize or any time we want to align the elements
      * with the input box.
@@ -146,7 +163,7 @@ CliView.prototype = {
             this.hinter.style.bottom = (this.win.innerHeight - rect.top) + 'px';
         }
         this.hinter.style.left = (rect.left + 30) + 'px';
-        this.hinter.style.maxWidth = (rect.width - 90) + 'px';
+        this.hinter.style.maxWidth = (rect.width - 110) + 'px';
 
         if (this.outputDirection.get() === 'below') {
             this.output.style.top = rect.bottom + 'px';
@@ -157,7 +174,7 @@ CliView.prototype = {
             this.output.style.bottom = (this.win.innerHeight - rect.top) + 'px';
         }
         this.output.style.left = rect.left + 'px';
-        this.output.style.width = (rect.width - 60) + 'px';
+        this.output.style.width = (rect.width - 80) + 'px';
     },
 
     /**
@@ -240,7 +257,7 @@ CliView.prototype = {
         this.hints = this.cli.getHints();
 
         // Create a marked up version of the input
-        var highlightedInput = '';
+        var highlightedInput = '<span class="cptPrompt">&gt;</span> ';
         if (this.element.value.length > 0) {
             // 'scores' is an array which tells us what chars are errors
             // Initialize with everything VALID
@@ -292,7 +309,7 @@ CliView.prototype = {
 
             var onTab = display.predictions[0];
             onTab = onTab.name ? onTab.name : onTab;
-            this.completer.innerHTML = highlightedInput + ' &nbsp;&#x2192; ' + onTab;
+            this.completer.innerHTML = highlightedInput + ' &nbsp;&#x21E5; ' + onTab;
         }
         else {
             this.completer.innerHTML = highlightedInput;

plugins/cockpit/lib/ui/requestView.js

@@ -40,18 +40,18 @@ define(function(require, exports, module) {
 
 var util = require('pilot/util');
 
-var editorCss = require("text!cockpit/ui/requestView.css");
+var requestViewCss = require("text!cockpit/ui/requestView.css");
 var dom = require("pilot/dom").dom;
-dom.importCssString(editorCss);
+dom.importCssString(requestViewCss);
 
-var plainRow = require("text!cockpit/ui/requestView.html");
+var requestViewHtml = require("text!cockpit/ui/requestView.html");
 var Templater = require("pilot/domtemplate").Templater;
 
 /**
  * Pull the HTML into the DOM, but don't add it to the document
  */
 var templates = document.createElement('div');
-templates.innerHTML = plainRow;
+templates.innerHTML = requestViewHtml;
 var row = templates.querySelector('.cptRow');
 
 /**
@@ -138,8 +138,7 @@ RequestView.prototype = {
             }
             this.output.appendChild(node);
         }, this);
-        // TODO: Fix this
+        this.cliView.scrollOutputToBottom();
-        // this.cliView.scrollToBottom();
 
         util.setClass(this.output, 'cmd_error', this.request.error);