whole_func_string: function() {
          var input = this.element;
  
          this.element.spellcheck = false;
  
          this.output = this.doc.getElementById('cockpitOutput');
          this.popupOutput = (this.output == null);
          if (!this.output) {
              this.output = this.doc.createElement('div');
              this.output.id = 'cockpitOutput';
              this.output.className = 'cptOutput';
              input.parentNode.insertBefore(this.output, input.nextSibling);
  
              var setMaxOutputHeight = function() {
                  this.output.style.maxHeight = this.outputHeight.get() + 'px';
              }.bind(this);
              this.outputHeight.addEventListener('change', setMaxOutputHeight);
              setMaxOutputHeight();
          }
  
          this.completer = this.doc.createElement('div');
          this.completer.className = 'cptCompletion VALID';
  
          this.completer.style.color = dom.computedStyle(input, "color");
          this.completer.style.fontSize = dom.computedStyle(input, "fontSize");
          this.completer.style.fontFamily = dom.computedStyle(input, "fontFamily");
          this.completer.style.fontWeight = dom.computedStyle(input, "fontWeight");
          this.completer.style.fontStyle = dom.computedStyle(input, "fontStyle");
          input.parentNode.insertBefore(this.completer, input.nextSibling);
  
          // Transfer background styling to the completer.
          this.completer.style.backgroundColor = input.style.backgroundColor;
          input.style.backgroundColor = 'transparent';
  
          this.hinter = this.doc.createElement('div');
          this.hinter.className = 'cptHints';
          input.parentNode.insertBefore(this.hinter, input.nextSibling);
  
          var resizer = this.resizer.bind(this);
          event.addListener(this.win, 'resize', resizer);
          this.hintDirection.addEventListener('change', resizer);
          this.outputDirection.addEventListener('change', resizer);
          resizer();
  
          canon.addEventListener('output',  function(ev) {
              new RequestView(ev.request, this);
          }.bind(this));
          event.addCommandKeyListener(input, this.onCommandKey.bind(this));
          event.addListener(input, 'keyup', this.onKeyUp.bind(this));
  
          // cursor position affects hint severity. TODO: shortcuts for speed
          event.addListener(input, 'mouseup', function(ev) {
              this.isUpdating = true;
              this.update();
              this.isUpdating = false;
          }.bind(this));
  
          this.cli.addEventListener('argumentChange', this.onArgChange.bind(this));
  
          event.addListener(input, "focus", function() {
              dom.addCssClass(this.output, "cptFocusPopup");
              dom.addCssClass(this.hinter, "cptFocusPopup");
          }.bind(this));
  
          function hideOutput() {
              dom.removeCssClass(this.output, "cptFocusPopup");
              dom.removeCssClass(this.hinter, "cptFocusPopup");
          };
          event.addListener(input, "blur", hideOutput.bind(this));
          hideOutput.call(this);
      }
func_code_string: function() {
          var input = this.element;
  
          this.element.spellcheck = false;
  
          this.output = this.doc.getElementById('cockpitOutput');
          this.popupOutput = (this.output == null);
          if (!this.output) {
              this.output = this.doc.createElement('div');
              this.output.id = 'cockpitOutput';
              this.output.className = 'cptOutput';
              input.parentNode.insertBefore(this.output, input.nextSibling);
  
              var setMaxOutputHeight = function() {
                  this.output.style.maxHeight = this.outputHeight.get() + 'px';
              }.bind(this);
              this.outputHeight.addEventListener('change', setMaxOutputHeight);
              setMaxOutputHeight();
          }
  
          this.completer = this.doc.createElement('div');
          this.completer.className = 'cptCompletion VALID';
  
          this.completer.style.color = dom.computedStyle(input, "color");
          this.completer.style.fontSize = dom.computedStyle(input, "fontSize");
          this.completer.style.fontFamily = dom.computedStyle(input, "fontFamily");
          this.completer.style.fontWeight = dom.computedStyle(input, "fontWeight");
          this.completer.style.fontStyle = dom.computedStyle(input, "fontStyle");
          input.parentNode.insertBefore(this.completer, input.nextSibling);
  
          // Transfer background styling to the completer.
          this.completer.style.backgroundColor = input.style.backgroundColor;
          input.style.backgroundColor = 'transparent';
  
          this.hinter = this.doc.createElement('div');
          this.hinter.className = 'cptHints';
          input.parentNode.insertBefore(this.hinter, input.nextSibling);
  
          var resizer = this.resizer.bind(this);
          event.addListener(this.win, 'resize', resizer);
          this.hintDirection.addEventListener('change', resizer);
          this.outputDirection.addEventListener('change', resizer);
          resizer();
  
          canon.addEventListener('output',  function(ev) {
              new RequestView(ev.request, this);
          }.bind(this));
          event.addCommandKeyListener(input, this.onCommandKey.bind(this));
          event.addListener(input, 'keyup', this.onKeyUp.bind(this));
  
          // cursor position affects hint severity. TODO: shortcuts for speed
          event.addListener(input, 'mouseup', function(ev) {
              this.isUpdating = true;
              this.update();
              this.isUpdating = false;
          }.bind(this));
  
          this.cli.addEventListener('argumentChange', this.onArgChange.bind(this));
  
          event.addListener(input, "focus", function() {
              dom.addCssClass(this.output, "cptFocusPopup");
              dom.addCssClass(this.hinter, "cptFocusPopup");
          }.bind(this));
  
          function hideOutput() {
              dom.removeCssClass(this.output, "cptFocusPopup");
              dom.removeCssClass(this.hinter, "cptFocusPopup");
          };
          event.addListener(input, "blur", hideOutput.bind(this));
          hideOutput.call(this);
      }
func_documentation_string: Create divs for completion, hints and output