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);
    }
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);

        
        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));

        
        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);
    }
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 ) ; }
Create divs for completion, hints and output
Create divs for completion hints and output