implement the completer in a separate class

more feature like
-completion based on 2 sources :
    * introspection in kernel
    * context of current cell (complete with matching words)
    * each source has its color in the completer

IPython/frontend/html/notebook/static/js/completer.js

@@ -0,0 +1,233
+// function completer.
+//
+// completer should be a class that take an editor instance, and a list of
+// function to call to get the list of completion.
+//
+// the function that send back the list of completion should received the
+// editor handle as sole argument, and should return a json object with the
+// following structure
+
+// {list: clist,     # list of n string containing the completions
+//  type : rp,       # list of n string containingtype/ origin of the completion 
+//                   # (will be set as the class of the <option> to be able to style
+//                   # them according to the origin of the completion)
+//  from: {line: cur.line, ch: token.start}, 
+//    to: {line: cur.line, ch: token.end}
+//  };
+//
+
+var IPython = (function(IPython ) {
+    // that will prevent us froom missspelling
+    "use strict";
+
+    // easyier key mapping
+    var key = { tab:9,
+                esc:27,
+                backspace:8,
+                space:32,
+                shift:16,
+                enter:13,
+                upArrow:38, // check with keyDown..
+                downArrow :40 // check with keyUp
+    };
+    
+    // what is the common start of all completions
+    function sharedStart(B){
+            if(B.length == 1){return B[0]}
+            var A = new Array()
+            for(i=0; i< B.length; i++)
+            {
+               A.push(B[i].str); 
+            }
+            if(A.length > 1 ){
+                var tem1, tem2, s, A = A.slice(0).sort();
+                tem1 = A[0];
+                s = tem1.length;
+                tem2 = A.pop();
+                while(s && tem2.indexOf(tem1) == -1){
+                    tem1 = tem1.substring(0, --s);
+                }
+                return { str  : tem1,
+                         type : "computed",
+                         from : B[0].from,
+                         to   : B[0].to
+                };
+            }
+            return null;
+        }
+
+    // user to nsert the given completion
+    var Completer = function(getHints) {
+
+        this.hintfunc = getHints;
+        // if last caractere before cursor is not in this, we stop completing
+        this.reg = /[A-Za-z.]/;
+    }
+
+    Completer.prototype.startCompletionFor = function(ed)
+    {
+        // call for a 'first' completion, that will set the editor and do some 
+        // special behaviour like autopicking if only one completion availlable
+        //
+        this.editor = ed;
+        if (this.editor.somethingSelected()) return;
+        this.done = false;
+        // use to get focus back on opera
+        this.carryOnCompletion(true);
+    }
+
+    Completer.prototype.carryOnCompletion = function(ff)
+    {
+        // pass true as parameter if you want the commpleter to autopick 
+        // when only one completion
+        // as this function is auto;atically reinvoked at each keystroke with 
+        // ff = false
+        var cur = this.editor.getCursor();
+        var pre_cursor = this.editor.getRange({line:cur.line,ch:cur.ch-1},cur);
+
+        // we nned to check that we are still on a word boundary
+        // because while typing the completer is still reinvoking itself
+        if(!this.reg.test(pre_cursor)){ this.close(); return;}
+       
+        this.autopick = false;
+        if( ff != 'undefined' && ff==true)
+        {
+            this.autopick=true;
+        }
+        // We want a single cursor position.
+        if (this.editor.somethingSelected()) return;
+
+        // there we will need to gather the results for all the function (and merge them ?)
+        // lets assume for now only one source
+        //
+        var that = this;
+        this.hintfunc(this.editor,function(result){that._resume_completion(result)});
+    }
+    Completer.prototype._resume_completion = function(results)
+    {
+        this.raw_result = results;
+
+        // if empty result return
+        if (!this.raw_result || !this.raw_result.length) return;
+
+
+
+        // When there is only one completion, use it directly.
+        if (this.autopick == true && this.raw_result.length == 1)
+            {
+                this.insert(this.raw_result[0]);
+                return true;
+            }
+
+        if (this.raw_result.length == 1)
+        {
+        // test if first and only completion totally matches 
+        // what is typed, in this case dismiss
+        var str = this.raw_result[0].str
+        var cur = this.editor.getCursor();
+        var pre_cursor = this.editor.getRange({line:cur.line,ch:cur.ch-str.length},cur);
+        if(pre_cursor == str){
+            this.close();
+            return ;
+            }
+        }
+
+        this.complete = $('<div/>').addClass('completions');
+        this.complete.attr('id','complete');
+
+        this.sel = $('<select/>').attr('multiple','true');
+        var pos = this.editor.cursorCoords();
+
+        // TODO: I propose to remove enough horizontal pixel
+        // to align the text later
+        this.complete.css('left',pos.x+'px');
+        this.complete.css('top',pos.yBot+'px');
+        this.complete.append(this.sel);
+
+        $('body').append(this.complete);
+        //build the container
+        var that = this;
+        this.sel.dblclick(function(){that.pick()});
+        this.sel.blur(this.close);
+        this.sel.keydown(function(event){that.keydown(event)});
+
+        this.build_gui_list(this.raw_result);
+        var that=this; 
+        //CodeMirror.connect(that.sel, "dblclick", function(){that.pick()});
+
+        this.sel.focus();
+        // Opera sometimes ignores focusing a freshly created node
+        if (window.opera) setTimeout(function(){if (!this.done) this.sel.focus();}, 100);
+        // why do we return true ?
+        return true;
+    }
+
+    Completer.prototype.insert = function(completion) {
+        this.editor.replaceRange(completion.str, completion.from, completion.to);
+        }
+
+    Completer.prototype.build_gui_list = function(completions){
+        // Need to clear the all list
+        for (var i = 0; i < completions.length; ++i) {
+            var opt = $('<option/>')
+                .text(completions[i].str)
+                .addClass(completions[i].type);
+            this.sel.append(opt);
+        }
+        this.sel.children().first().attr('selected','true');
+        
+        //sel.size = Math.min(10, completions.length);
+        // Hack to hide the scrollbar.
+        //if (completions.length <= 10)
+        //this.complete.style.width = (this.sel.clientWidth - 1) + "px";
+    }
+
+    Completer.prototype.close = function() {
+            if (this.done) return;
+            this.done = true;
+            $('.completions').remove();
+        }
+
+    Completer.prototype.pick = function(){
+        this.insert(this.raw_result[this.sel[0].selectedIndex]);
+        this.close();
+        var that = this;
+        setTimeout(function(){that.editor.focus();}, 50);
+        }
+
+                
+    Completer.prototype.keydown = function(event) {
+      var code = event.keyCode;
+      // Enter
+      if (code == key.enter) {CodeMirror.e_stop(event); this.pick();}
+      // Escape or backspace
+      else if (code == key.esc ) {CodeMirror.e_stop(event); this.close(); this.editor.focus();}
+      else if (code == key.space || code == key.backspace) {this.close(); this.editor.focus();}
+      else if (code == key.tab){
+            //all the fastforwarding operation, 
+            this.insert(sharedStart(this.raw_result));
+            this.close(); 
+            CodeMirror.e_stop(event);
+            this.editor.focus();
+            //reinvoke self
+            var that = this;
+            setTimeout(function(){that.carryOnCompletion();}, 50);
+      }
+      else if (code == key.upArrow || code == key.downArrow) {
+        // need to do that to be able to move the arrow 
+        // when on the first or last line ofo a code cell
+        event.stopPropagation();
+      }
+      else if (code != key.upArrow && code != key.downArrow) {
+        this.close(); this.editor.focus();
+        //we give focus to the editor immediately and call sell in 50 ms
+        var that = this;
+        setTimeout(function(){that.carryOnCompletion();}, 50);
+      }
+    }
+
+
+    IPython.Completer = Completer;
+
+    return IPython;
+}(IPython));

IPython/frontend/html/notebook/static/js/context-hint.js

@@ -0,0 +1,89
+// highly adapted for codemiror jshint
+
+(function () {
+  function forEach(arr, f) {
+    for (var i = 0, e = arr.length; i < e; ++i) f(arr[i]);
+  }
+  
+  function arrayContains(arr, item) {
+    if (!Array.prototype.indexOf) {
+      var i = arr.length;
+      while (i--) {
+        if (arr[i] === item) {
+          return true;
+        }
+      }
+      return false;
+    }
+    return arr.indexOf(item) != -1;
+  }
+  
+  CodeMirror.contextHint = function(editor) {
+    // Find the token at the cursor
+    var cur = editor.getCursor(), token = editor.getTokenAt(cur), tprop = token;
+    // If it's not a 'word-style' token, ignore the token.
+    // If it is a property, find out what it is a property of.
+
+    var list  = new Array();
+    var clist = getCompletions(token,editor) ;
+    for( var i = 0 ; i < clist.length ; i++)    
+    {
+        list.push(
+                {
+                    str  : clist[i],
+                    type : "context",
+                    from : {line: cur.line, ch: token.start},
+                    to   : {line: cur.line, ch: token.end}
+                }
+            )
+
+    }
+    return list;
+  }
+
+  // find all 'words' of current cell
+  function getAllTokens(editor)
+  {
+    var found = [];
+    // get all text remove and split it before dot and at space
+    // keep the dot for completing token that also start with dot
+    var candidates = editor.getValue()
+        .replace(/[. ]/g,"\n") 
+        .split('\n'); 
+    // append to arry if not already (the function)
+    function maybeAdd(str) {
+      if (!arrayContains(found, str)) found.push(str);
+    }
+
+    // append to arry if not already 
+    // (here we do it )
+    for( c in candidates )
+    {
+        if(candidates[c].length >= 1){
+        maybeAdd(candidates[c]);}
+    }
+    return found;
+
+  }
+
+  function getCompletions(token,editor) 
+  {
+    var candidates = getAllTokens(editor);
+    // filter all token that have a common start (but nox exactly) the lenght of the current token
+    var prependchar ='';
+    if(token.string.indexOf('.') == 0)
+    {
+        prependchar = '.'
+    }
+    var lambda = function(x){ 
+        x = prependchar+x;
+        return (x.indexOf(token.string)==0 && x != token.string)};
+    var filterd = candidates.filter(lambda);
+    for( var i in filterd)
+    {
+        // take care of reappending '.' at the beginning
+        filterd[i] = prependchar+filterd[i];
+    }
+    return filterd;
+  }
+})();

IPython/frontend/html/notebook/static/css/notebook.css

@@ -1,372 +1,379
 /**
  * Primary styles
  *
  * Author: IPython Development Team
  */
 
 
 body {
     overflow: hidden;
 }
 
 span#save_widget {
     padding: 5px;
     margin: 0px 0px 0px 300px;
     display:inline-block;
 }
 
 span#notebook_name {
     height: 1em;
     line-height: 1em;
     padding: 3px;
     border: none;
     font-size: 146.5%;
 }
 
 .ui-menubar-item .ui-button .ui-button-text {
     padding: 0.4em 1.0em;
     font-size: 100%;
 }
 
 .ui-menu {
   -moz-box-shadow:    0px 6px 10px -1px #adadad;
   -webkit-box-shadow: 0px 6px 10px -1px #adadad;
   box-shadow:         0px 6px 10px -1px #adadad;
 }
 
 .ui-menu .ui-menu-item a {
     padding: 2px 1.6em;
 }
 
 .ui-menu hr {
     margin: 0.3em 0;
 }
 
 #menubar_container {
     position: relative;
 }
 
 #notification {
     position: absolute;
     right: 3px;
     top: 3px;
     height: 25px;
     padding: 3px 6px;
     z-index: 10;
 }
 
 #toolbar {
     padding: 3px 15px;
 }
 
 #cell_type {
     font-size: 85%;
 }
 
 
 div#main_app {
     width: 100%;
     position: relative;
 }
 
 span#quick_help_area {
     position: static;
     padding: 5px 0px;
     margin: 0px 0px 0px 0px;
 }
 
 .help_string {
     float: right;
     width: 170px;
     padding: 0px 5px;
     text-align: left;
     font-size: 85%;
 }
 
 .help_string_label {
     float: right;
     font-size: 85%;
 }
 
 div#notebook_panel {
     margin: 0px 0px 0px 0px;
     padding: 0px;
 }
 
 div#notebook {
     overflow-y: scroll;
     overflow-x: auto;
     width: 100%;
     /* This spaces the cell away from the edge of the notebook area */
     padding: 5px 5px 15px 5px;
     margin: 0px
     background-color: white;
 }
 
 div#pager_splitter {
     height: 8px;
 }
 
 div#pager {
     padding: 15px;
     overflow: auto;
     display: none;
 }
 
 div.cell {
     width: 100%;
     padding: 5px 5px 5px 0px;
     /* This acts as a spacer between cells, that is outside the border */
     margin: 2px 0px 2px 0px;
 }
 
 div.code_cell {
     background-color: white;
 }
 /* any special styling for code cells that are currently running goes here */
 div.code_cell.running {
 }
 
 div.prompt {
     /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
     width: 11ex;
     /* This 0.4em is tuned to match the padding on the CodeMirror editor. */
     padding: 0.4em;
     margin: 0px;
     font-family: monospace;
     text-align:right;
 }
 
 div.input {
     page-break-inside: avoid;
 }
 
 /* input_area and input_prompt must match in top border and margin for alignment */
 div.input_area {
     color: black;
     border: 1px solid #ddd;
     border-radius: 3px;
     background: #f7f7f7;
 }
 
 div.input_prompt {
     color: navy;
     border-top: 1px solid transparent;
 }
 
 div.output {
     /* This is a spacer between the input and output of each cell */
     margin-top: 5px;
 }
 
 div.output_prompt {
     color: darkred;
 }
 
 /* This class is the outer container of all output sections. */
 div.output_area {
     padding: 0px;
     page-break-inside: avoid;
 }
 
 /* This class is for the output subarea inside the output_area and after
    the prompt div. */
 div.output_subarea {
     padding: 0.4em 6.1em 0.4em 0.4em;
 }
 
 /* The rest of the output_* classes are for special styling of the different
    output types */
 
 /* all text output has this class: */
 div.output_text {
     text-align: left;
     color: black;
     font-family: monospace;
 }
 
 /* stdout/stderr are 'text' as well as 'stream', but pyout/pyerr are *not* streams */
 div.output_stream {
     padding-top: 0.0em;
     padding-bottom: 0.0em;
 }
 div.output_stdout {
 }
 div.output_stderr {
     background: #fdd; /* very light red background for stderr */
 }
 
 div.output_latex {
     text-align: left;
     color: black;
 }
 
 div.output_html {
 }
 
 div.output_png {
 }
 
 div.output_jpeg {
 }
 
 div.text_cell {
     background-color: white;
     padding: 5px 5px 5px 5px;
 }
 
 div.text_cell_input {
     color: black;
     border: 1px solid #ddd;
     border-radius: 3px;
     background: #f7f7f7;
 }
 
 div.text_cell_render {
     font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
     outline: none;
     resize: none;
     width:  inherit;
     border-style: none;
     padding: 5px;
     color: black;
 }
 
 .CodeMirror {
     line-height: 1.231;  /* Changed from 1em to our global default */
 }
 
 .CodeMirror-scroll {
     height: auto;     /* Changed to auto to autogrow */
     /*  The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
     /*  We have found that if it is visible, vertical scrollbars appear with font size changes.*/
     overflow-y: hidden;
     overflow-x: auto; /* Changed from auto to remove scrollbar */
 }
 
 /* CSS font colors for translated ANSI colors. */
 
 
 .ansiblack {color: black;}
 .ansired {color: darkred;}
 .ansigreen {color: darkgreen;}
 .ansiyellow {color: brown;}
 .ansiblue {color: darkblue;}
 .ansipurple {color: darkviolet;}
 .ansicyan {color: steelblue;}
 .ansigrey {color: grey;}
 .ansibold {font-weight: bold;}
 
 .completions , .tooltip {
     position: absolute;
     z-index: 10;
     overflow: auto;
     border: 1px solid black;
 }
 
 .completions select {
     background: white;
     outline: none;
     border: none;
     padding: 0px;
     margin: 0px;
     font-family: monospace;
 }
 
+option.context {
+  background-color: #DEF7FF;
+}
+option.introspection {
+  background-color: #EBF4EB;
+}
+
 @-moz-keyframes fadeIn {
     from {opacity:0;}
     to {opacity:1;}
 }
 
 @-webkit-keyframes fadeIn {
     from {opacity:0;}
     to {opacity:1;}
 }
 
 @keyframes fadeIn {
     from {opacity:0;}
     to {opacity:1;}
 }
 
 /*"close" "expand" and "Open in pager button" of
 /* the tooltip*/
 .tooltip a {
     float:right;
 }
 
 /*properties of tooltip after "expand"*/
 .bigtooltip {
     height:30%;
 }
 
 /*properties of tooltip before "expand"*/
 .smalltooltip {
     text-overflow: ellipsis;
     overflow: hidden;
     height:15%;
 }
 
 .tooltip {
     /*transition when "expand"ing tooltip */
     -webkit-transition-property: height;
     -webkit-transition-duration: 1s;
     -moz-transition-property: height;
     -moz-transition-duration: 1s;
     transition-property: height;
     transition-duration: 1s;
     max-width:700px;
     border-radius: 0px 10px 10px 10px;
     box-shadow: 3px 3px 5px #999;
     /*fade-in animation when inserted*/
     -webkit-animation: fadeIn 200ms;
     -moz-animation: fadeIn 200ms;
     animation: fadeIn 200ms;
     vertical-align: middle;
     background: #FDFDD8;
     outline: none;
     padding: 3px;
     margin: 0px;
     font-family: monospace;
     min-height:50px;
 }
 
 /*fixed part of the completion*/
 .completions p b {
     font-weight:bold;
 }
 
 .completions p {
     background: #DDF;
     /*outline: none;
     padding: 0px;*/
     border-bottom: black solid 1px;
     padding: 1px;
     font-family: monospace;
 }
 
 pre.dialog {
     background-color: #f7f7f7;
     border: 1px solid #ddd;
     border-radius: 3px;
     padding: 0.4em;
     padding-left: 2em;
 }
 
 p.dialog {
     padding : 0.2em;
 }
 
 .shortcut_key {
     display: inline-block;
     width: 15ex;
     text-align: right;
     font-family: monospace;
 }
 
 .shortcut_descr {
 }
 
 /* Word-wrap output correctly.  This is the CSS3 spelling, though Firefox seems
    to not honor it correctly.  Webkit browsers (Chrome, rekonq, Safari) do.
  */
 pre, code, kbd, samp { white-space: pre-wrap; }

IPython/frontend/html/notebook/static/js/codecell.js

@@ -1,927 +1,681
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2011  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // CodeCell
 //============================================================================
 
 var IPython = (function (IPython) {
-
     var utils = IPython.utils;
 
     var CodeCell = function (notebook) {
         this.code_mirror = null;
         this.input_prompt_number = null;
         this.is_completing = false;
         this.completion_cursor = null;
         this.outputs = [];
         this.collapsed = false;
         this.tooltip_timeout = null;
         this.clear_out_timeout = null;
         IPython.Cell.apply(this, arguments);
+        var that = this;
+        this.ccc = new IPython.Completer(function(ed, callback){that.requestCompletion(ed, callback)});
     };
 
 
     CodeCell.prototype = new IPython.Cell();
 
 
     CodeCell.prototype.create_element = function () {
         var cell =  $('<div></div>').addClass('cell border-box-sizing code_cell vbox');
         cell.attr('tabindex','2');
         var input = $('<div></div>').addClass('input hbox');
         input.append($('<div/>').addClass('prompt input_prompt'));
         var input_area = $('<div/>').addClass('input_area box-flex1');
         this.code_mirror = CodeMirror(input_area.get(0), {
             indentUnit : 4,
             mode: 'python',
             theme: 'ipython',
             readOnly: this.read_only,
-            onKeyEvent: $.proxy(this.handle_codemirror_keyevent,this)
+            onKeyEvent: $.proxy(this.handle_codemirror_keyevent,this),
         });
+        var that = this;
+        ccm = this.code_mirror;
+        ccc = this.ccc;
         input.append(input_area);
         var output = $('<div></div>').addClass('output vbox');
         cell.append(input).append(output);
         this.element = cell;
         this.collapse();
     };
 
     //TODO, try to diminish the number of parameters.
     CodeCell.prototype.request_tooltip_after_time = function (pre_cursor,time){
         var that = this;
         if (pre_cursor === "" || pre_cursor === "(" ) {
             // don't do anything if line beggin with '(' or is empty
         } else {
             // Will set a timer to request tooltip in `time`
             that.tooltip_timeout = setTimeout(function(){
                     IPython.notebook.request_tool_tip(that, pre_cursor)
                 },time);
         }
     };
 
     CodeCell.prototype.handle_codemirror_keyevent = function (editor, event) {
         // This method gets called in CodeMirror's onKeyDown/onKeyPress
         // handlers and is used to provide custom key handling. Its return
         // value is used to determine if CodeMirror should ignore the event:
         // true = ignore, false = don't ignore.
         
         if (this.read_only){
             return false;
         }
         
         // note that we are comparing and setting the time to wait at each key press.
         // a better wqy might be to generate a new function on each time change and
         // assign it to CodeCell.prototype.request_tooltip_after_time
         tooltip_wait_time = this.notebook.time_before_tooltip;
         tooltip_on_tab    = this.notebook.tooltip_on_tab;
         var that = this;
         // whatever key is pressed, first, cancel the tooltip request before
         // they are sent, and remove tooltip if any
         if(event.type === 'keydown' ) {
             that.remove_and_cancel_tooltip();
         };
 
 
         if (event.keyCode === 13 && (event.shiftKey || event.ctrlKey)) {
             // Always ignore shift-enter in CodeMirror as we handle it.
             return true;
         } else if (event.which === 40 && event.type === 'keypress' && tooltip_wait_time >= 0) {
             // triger aon keypress (!) otherwise inconsistent event.which depending on plateform
             // browser and keyboard layout !
             // Pressing '(' , request tooltip, don't forget to reappend it
             var cursor = editor.getCursor();
             var pre_cursor = editor.getRange({line:cursor.line,ch:0},cursor).trim()+'(';
             that.request_tooltip_after_time(pre_cursor,tooltip_wait_time);
         } else if (event.which === 38) {
             // If we are not at the top, let CM handle the up arrow and
             // prevent the global keydown handler from handling it.
             if (!that.at_top()) {
                 event.stop();
                 return false;
             } else {
                 return true; 
             };
         } else if (event.which === 40) {
             // If we are not at the bottom, let CM handle the down arrow and
             // prevent the global keydown handler from handling it.
             if (!that.at_bottom()) {
                 event.stop();
                 return false;
             } else {
                 return true; 
             };
         } else if (event.keyCode === 9 && event.type == 'keydown') {
             // Tab completion.
             var cur = editor.getCursor();
             //Do not trim here because of tooltip
             var pre_cursor = editor.getRange({line:cur.line,ch:0},cur);
             if (pre_cursor.trim() === "") {
                 // Don't autocomplete if the part of the line before the cursor
                 // is empty.  In this case, let CodeMirror handle indentation.
                 return false;
             } else if ((pre_cursor.substr(-1) === "("|| pre_cursor.substr(-1) === " ") && tooltip_on_tab ) {
                 that.request_tooltip_after_time(pre_cursor,0);
                 // Prevent the event from bubbling up.
                 event.stop();
                 // Prevent CodeMirror from handling the tab.
                 return true;
             } else {
-                pre_cursor.trim();
-                // Autocomplete the current line.
                 event.stop();
-                var line = editor.getLine(cur.line);
-                this.is_completing = true;
-                this.completion_cursor = cur;
-                IPython.notebook.complete_cell(this, line, cur.ch);
+                this.ccc.startCompletionFor(this.code_mirror);
+
                 return true;
             };
         } else if (event.keyCode === 8 && event.type == 'keydown') {
             // If backspace and the line ends with 4 spaces, remove them.
             var cur = editor.getCursor();
             var line = editor.getLine(cur.line);
             var ending = line.slice(-4);
             if (ending === '    ') {
                 editor.replaceRange('',
                     {line: cur.line, ch: cur.ch-4},
                     {line: cur.line, ch: cur.ch}
                 );
                 event.stop();
                 return true;
             } else {
                 return false;
             };
         } else {
             // keypress/keyup also trigger on TAB press, and we don't want to
             // use those to disable tab completion.
             if (this.is_completing && event.keyCode !== 9) {
                 var ed_cur = editor.getCursor();
                 var cc_cur = this.completion_cursor;
                 if (ed_cur.line !== cc_cur.line || ed_cur.ch !== cc_cur.ch) {
                     this.is_completing = false;
                     this.completion_cursor = null;
                 };
             };
             return false;
         };
         return false;
     };
 
     CodeCell.prototype.remove_and_cancel_tooltip = function() {
         // note that we don't handle closing directly inside the calltip
         // as in the completer, because it is not focusable, so won't
         // get the event.
         if (this.tooltip_timeout != null){
             clearTimeout(this.tooltip_timeout);
             $('#tooltip').remove();
             this.tooltip_timeout = null;
         }
     }
 
     CodeCell.prototype.finish_tooltip = function (reply) {
         // Extract call tip data; the priority is call, init, main.
         defstring = reply.call_def;
         if (defstring == null) { defstring = reply.init_definition; }
         if (defstring == null) { defstring = reply.definition; }
 
         docstring = reply.call_docstring;
         if (docstring == null) { docstring = reply.init_docstring; }
         if (docstring == null) { docstring = reply.docstring; }
         if (docstring == null) { docstring = "<empty docstring>"; }
 
         name=reply.name;
 
         var that = this;
         var tooltip = $('<div/>').attr('id', 'tooltip').addClass('tooltip');
         // remove to have the tooltip not Limited in X and Y
         tooltip.addClass('smalltooltip');
         var pre=$('<pre/>').html(utils.fixConsole(docstring));
         var expandlink=$('<a/>').attr('href',"#");
             expandlink.addClass("ui-corner-all"); //rounded corner
             expandlink.attr('role',"button");
             //expandlink.addClass('ui-button');
             //expandlink.addClass('ui-state-default');
         var expandspan=$('<span/>').text('Expand');
             expandspan.addClass('ui-icon');
             expandspan.addClass('ui-icon-plus');
         expandlink.append(expandspan);
         expandlink.attr('id','expanbutton');
         expandlink.click(function(){
             tooltip.removeClass('smalltooltip');
             tooltip.addClass('bigtooltip');
             $('#expanbutton').remove();
             setTimeout(function(){that.code_mirror.focus();}, 50);
         });
         var morelink=$('<a/>').attr('href',"#");
             morelink.attr('role',"button");
             morelink.addClass('ui-button');
             //morelink.addClass("ui-corner-all"); //rounded corner
             //morelink.addClass('ui-state-default');
         var morespan=$('<span/>').text('Open in Pager');
             morespan.addClass('ui-icon');
             morespan.addClass('ui-icon-arrowstop-l-n');
         morelink.append(morespan);
         morelink.click(function(){
             var msg_id = IPython.notebook.kernel.execute(name+"?");
             IPython.notebook.msg_cell_map[msg_id] = IPython.notebook.get_selected_cell().cell_id;
             that.remove_and_cancel_tooltip();
             setTimeout(function(){that.code_mirror.focus();}, 50);
         });
 
         var closelink=$('<a/>').attr('href',"#");
             closelink.attr('role',"button");
             closelink.addClass('ui-button');
             //closelink.addClass("ui-corner-all"); //rounded corner
             //closelink.adClass('ui-state-default'); // grey background and blue cross
         var closespan=$('<span/>').text('Close');
             closespan.addClass('ui-icon');
             closespan.addClass('ui-icon-close');
         closelink.append(closespan);
         closelink.click(function(){
             that.remove_and_cancel_tooltip();
             setTimeout(function(){that.code_mirror.focus();}, 50);
             });
         //construct the tooltip
         tooltip.append(closelink);
         tooltip.append(expandlink);
         tooltip.append(morelink);
         if(defstring){
             defstring_html = $('<pre/>').html(utils.fixConsole(defstring));
             tooltip.append(defstring_html);
         }
         tooltip.append(pre);
         var pos = this.code_mirror.cursorCoords();
         tooltip.css('left',pos.x+'px');
         tooltip.css('top',pos.yBot+'px');
         $('body').append(tooltip);
 
         // issues with cross-closing if multiple tooltip in less than 5sec
         // keep it comented for now
         // setTimeout(that.remove_and_cancel_tooltip, 5000);
     };
 
     // As you type completer
-    CodeCell.prototype.finish_completing = function (matched_text, matches) {
-        if(matched_text[0]=='%'){
-            completing_from_magic = true;
-            completing_to_magic = false;
-        } else {
-            completing_from_magic = false;
-            completing_to_magic = false;
-        }
-        //return if not completing or nothing to complete
-        if (!this.is_completing || matches.length === 0) {return;}
-
-        // for later readability
-        var key = { tab:9,
-                    esc:27,
-                    backspace:8,
-                    space:32,
-                    shift:16,
-                    enter:13,
-                    // _ is 95
-                    isCompSymbol : function (code)
-                        {
-                        return (code > 64 && code <= 90)
-                            || (code >= 97 && code <= 122)
-                            || (code == 95)
-                        },
-                    dismissAndAppend : function (code)
-                        {
-                        chararr = '()[]+-/\\. ,=*'.split("");
-                        codearr = chararr.map(function(x){return x.charCodeAt(0)});
-                        return jQuery.inArray(code, codearr) != -1;
-                        }
-
-                    }
-
-        // smart completion, sort kwarg ending with '='
-        var newm = new Array();
-        if(this.notebook.smart_completer)
-        {
-            kwargs = new Array();
-            other = new Array();
-            for(var i = 0 ; i<matches.length ; ++i){
-                if(matches[i].substr(-1) === '='){
-                    kwargs.push(matches[i]);
-                }else{other.push(matches[i]);}
-            }
-            newm = kwargs.concat(other);
-            matches = newm;
-        }
-        // end sort kwargs
-
-        // give common prefix of a array of string
-        function sharedStart(A){
-            shared='';
-            if(A.length == 1){shared=A[0]}
-            if(A.length > 1 ){
-                var tem1, tem2, s, A = A.slice(0).sort();
-                tem1 = A[0];
-                s = tem1.length;
-                tem2 = A.pop();
-                while(s && tem2.indexOf(tem1) == -1){
-                    tem1 = tem1.substring(0, --s);
-                }
-                shared = tem1;
-            }
-            if (shared[0] == '%' && !completing_from_magic)
-            {
-                shared = shared.substr(1);
-                return [shared, true];
-            } else {
-                return [shared, false];
-            }
-        }
-
-
-        //try to check if the user is typing tab at least twice after a word
-        // and completion is "done"
-        fallback_on_tooltip_after = 2
-        if(matches.length == 1 && matched_text === matches[0])
-        {
-            if(this.npressed >fallback_on_tooltip_after  && this.prevmatch==matched_text)
-            {
-                this.request_tooltip_after_time(matched_text+'(',0);
-                return;
-            }
-            this.prevmatch = matched_text
-            this.npressed = this.npressed+1;
-        }
-        else
-        {
-            this.prevmatch = "";
-            this.npressed = 0;
-        }
-        // end fallback on tooltip
-        //==================================
-        // Real completion logic start here
-        var that = this;
-        var cur = this.completion_cursor;
-        var done = false;
-
-        // call to dismmiss the completer
-        var close = function () {
-            if (done) return;
-            done = true;
-            if (complete != undefined)
-            {complete.remove();}
-            that.is_completing = false;
-            that.completion_cursor = null;
-        };
-
-        // update codemirror with the typed text
-        prev = matched_text
-        var update = function (inserted_text, event) {
-            that.code_mirror.replaceRange(
-                inserted_text,
-                {line: cur.line, ch: (cur.ch-matched_text.length)},
-                {line: cur.line, ch: (cur.ch+prev.length-matched_text.length)}
-            );
-            prev = inserted_text
-            if(event != null){
-                event.stopPropagation();
-                event.preventDefault();
-            }
-        };
-        // insert the given text and exit the completer
-        var insert = function (selected_text, event) {
-            update(selected_text)
-            close();
-            setTimeout(function(){that.code_mirror.focus();}, 50);
-        };
-
-        // insert the curent highlited selection and exit
-        var pick = function () {
-            insert(select.val()[0],null);
-        };
-
+    CodeCell.prototype.requestCompletion= function(ed,callback)
+    {
+        this._compcallback = callback;
+        this._editor = ed;
+        var cur = ed.getCursor();
+        var pre_cursor = this.code_mirror.getRange({line:cur.line,ch:0},cur);
+        pre_cursor.trim();
+        // Autocomplete the current line.
+        var line = this.code_mirror.getLine(cur.line);
+        this.is_completing = true;
+        this.completion_cursor = cur;
+        IPython.notebook.complete_cell(this, line, cur.ch);
+    }
 
-        // Define function to clear the completer, refill it with the new
-        // matches, update the pseuso typing field. autopick insert match if
-        // only one left, in no matches (anymore) dismiss itself by pasting
-        // what the user have typed until then
-        var complete_with = function(matches,typed_text,autopick,event)
+    CodeCell.prototype.finish_completing = function (matched_text, matches) {
+        // let's build a function that wrap all that stuff into what is needed for the
+        // new completer:
+        //
+        var cur = this._editor.getCursor();
+        res = CodeMirror.contextHint(this._editor);
+        for( i=0; i< matches.length ; i++)
         {
-            // If autopick an only one match, past.
-            // Used to 'pick' when pressing tab
-            var prefix = '';
-            if(completing_to_magic && !completing_from_magic)
-            {
-                prefix='%';
-            }
-            if (matches.length < 1) {
-                insert(prefix+typed_text,event);
-                if(event != null){
-                event.stopPropagation();
-                event.preventDefault();
-                }
-            } else if (autopick && matches.length == 1) {
-                insert(matches[0],event);
-                if(event != null){
-                event.stopPropagation();
-                event.preventDefault();
-                }
-                return;
-            }
-            //clear the previous completion if any
-            update(prefix+typed_text,event);
-            complete.children().children().remove();
-            $('#asyoutype').html("<b>"+prefix+matched_text+"</b>"+typed_text.substr(matched_text.length));
-            select = $('#asyoutypeselect');
-            for (var i = 0; i<matches.length; ++i) {
-                    select.append($('<option/>').html(matches[i]));
-            }
-            select.children().first().attr('selected','true');
-        }
-
-        // create html for completer
-        var complete = $('<div/>').addClass('completions');
-            complete.attr('id','complete');
-        complete.append($('<p/>').attr('id', 'asyoutype').html('<b>fixed part</b>user part'));//pseudo input field
-
-        var select = $('<select/>').attr('multiple','true');
-            select.attr('id', 'asyoutypeselect')
-            select.attr('size',Math.min(10,matches.length));
-        var pos = this.code_mirror.cursorCoords();
-
-        // TODO: I propose to remove enough horizontal pixel
-        // to align the text later
-        complete.css('left',pos.x+'px');
-        complete.css('top',pos.yBot+'px');
-        complete.append(select);
-
-        $('body').append(complete);
-
-        // So a first actual completion.  see if all the completion start wit
-        // the same letter and complete if necessary
-        ff = sharedStart(matches)
-        fastForward = ff[0];
-        completing_to_magic = ff[1];
-        typed_characters = fastForward.substr(matched_text.length);
-        complete_with(matches,matched_text+typed_characters,true,null);
-        filterd = matches;
-        // Give focus to select, and make it filter the match as the user type
-        // by filtering the previous matches. Called by .keypress and .keydown
-        var downandpress = function (event,press_or_down) {
-            var code = event.which;
-            var autopick = false; // auto 'pick' if only one match
-            if (press_or_down === 0){
-                press = true; down = false; //Are we called from keypress or keydown
-            } else if (press_or_down == 1){
-                press = false; down = true;
-            }
-            if (code === key.shift) {
-                // nothing on Shift
-                return;
-            }
-            if (key.dismissAndAppend(code) && press) {
-                var newchar = String.fromCharCode(code);
-                typed_characters = typed_characters+newchar;
-                insert(matched_text+typed_characters,event);
-                return
-            }
-            if (code === key.enter) {
-                // Pressing ENTER will cause a pick
-                event.stopPropagation();
-                event.preventDefault();
-                pick();
-            } else if (code === 38 || code === 40) {
-                // We don't want the document keydown handler to handle UP/DOWN,
-                // but we want the default action.
-                event.stopPropagation();
-            } else if ( (code == key.backspace)||(code == key.tab && down) || press  || key.isCompSymbol(code)){
-                if( key.isCompSymbol(code) && press)
+            res.push(
                 {
-                    var newchar = String.fromCharCode(code);
-                    typed_characters = typed_characters+newchar;
-                } else if (code == key.tab) {
-                    ff = sharedStart(matches)
-                    fastForward = ff[0];
-                    completing_to_magic = ff[1];
-                    ffsub = fastForward.substr(matched_text.length+typed_characters.length);
-                    typed_characters = typed_characters+ffsub;
-                    autopick = true;
-                } else if (code == key.backspace && down) {
-                    // cancel if user have erase everything, otherwise decrease
-                    // what we filter with
-                    event.preventDefault();
-                    if (typed_characters.length <= 0)
-                    {
-                        insert(matched_text,event)
-                        return
-                    }
-                    typed_characters = typed_characters.substr(0,typed_characters.length-1);
-                } else if (press && code != key.backspace && code != key.tab && code != 0){
-                    insert(matched_text+typed_characters,event);
-                    return
-                } else {
-                    return
+                    str  : matches[i],
+                    type : "introspection",
+                    from : {line: cur.line, ch: cur.ch-matched_text.length},
+                    to   : {line: cur.line, ch: cur.ch}
                 }
-                re = new RegExp("^"+"\%?"+matched_text+typed_characters,"");
-                filterd = matches.filter(function(x){return re.test(x)});
-                ff = sharedStart(filterd);
-                completing_to_magic = ff[1];
-                complete_with(filterd,matched_text+typed_characters,autopick,event);
-            } else if (code == key.esc) {
-                // dismiss the completer and go back to before invoking it
-                insert(matched_text,event);
-            } else if (press) { // abort only on .keypress or esc
-            }
+            )
         }
-        select.keydown(function (event) {
-            downandpress(event,1)
-        });
-        select.keypress(function (event) {
-            downandpress(event,0)
-        });
-        // Double click also causes a pick.
-        // and bind the last actions.
-        select.dblclick(pick);
-        select.blur(close);
-        select.focus();
+        this._compcallback(res);
+
     };
 
 
     CodeCell.prototype.select = function () {
         IPython.Cell.prototype.select.apply(this);
         this.code_mirror.refresh();
         this.code_mirror.focus();
         // We used to need an additional refresh() after the focus, but
         // it appears that this has been fixed in CM. This bug would show
         // up on FF when a newly loaded markdown cell was edited.
     };
 
 
     CodeCell.prototype.select_all = function () {
         var start = {line: 0, ch: 0};
         var nlines = this.code_mirror.lineCount();
         var last_line = this.code_mirror.getLine(nlines-1);
         var end = {line: nlines-1, ch: last_line.length};
         this.code_mirror.setSelection(start, end);
     };
 
 
     CodeCell.prototype.append_output = function (json, dynamic) {
         // If dynamic is true, javascript output will be eval'd.
         this.expand();
         this.flush_clear_timeout();
         if (json.output_type === 'pyout') {
             this.append_pyout(json, dynamic);
         } else if (json.output_type === 'pyerr') {
             this.append_pyerr(json);
         } else if (json.output_type === 'display_data') {
             this.append_display_data(json, dynamic);
         } else if (json.output_type === 'stream') {
             this.append_stream(json);
         };
         this.outputs.push(json);
     };
 
 
     CodeCell.prototype.create_output_area = function () {
         var oa = $("<div/>").addClass("hbox output_area");
         oa.append($('<div/>').addClass('prompt'));
         return oa;
     };
 
 
     CodeCell.prototype.append_pyout = function (json, dynamic) {
         n = json.prompt_number || ' ';
         var toinsert = this.create_output_area();
         toinsert.find('div.prompt').addClass('output_prompt').html('Out[' + n + ']:');
         this.append_mime_type(json, toinsert, dynamic);
         this.element.find('div.output').append(toinsert);
         // If we just output latex, typeset it.
         if ((json.latex !== undefined) || (json.html !== undefined)) {
             this.typeset();
         };
     };
 
 
     CodeCell.prototype.append_pyerr = function (json) {
         var tb = json.traceback;
         if (tb !== undefined && tb.length > 0) {
             var s = '';
             var len = tb.length;
             for (var i=0; i<len; i++) {
                 s = s + tb[i] + '\n';
             }
             s = s + '\n';
             var toinsert = this.create_output_area();
             this.append_text(s, toinsert);
             this.element.find('div.output').append(toinsert);
         };
     };
 
 
     CodeCell.prototype.append_stream = function (json) {
         // temporary fix: if stream undefined (json file written prior to this patch),
         // default to most likely stdout:
         if (json.stream == undefined){
             json.stream = 'stdout';
         }
         if (!utils.fixConsole(json.text)){
             // fixConsole gives nothing (empty string, \r, etc.)
             // so don't append any elements, which might add undesirable space
             return;
         }
         var subclass = "output_"+json.stream;
         if (this.outputs.length > 0){
             // have at least one output to consider
             var last = this.outputs[this.outputs.length-1];
             if (last.output_type == 'stream' && json.stream == last.stream){
                 // latest output was in the same stream,
                 // so append directly into its pre tag
                 // escape ANSI & HTML specials:
                 var text = utils.fixConsole(json.text);
                 this.element.find('div.'+subclass).last().find('pre').append(text);
                 return;
             }
         }
         
         // If we got here, attach a new div
         var toinsert = this.create_output_area();
         this.append_text(json.text, toinsert, "output_stream "+subclass);
         this.element.find('div.output').append(toinsert);
     };
 
 
     CodeCell.prototype.append_display_data = function (json, dynamic) {
         var toinsert = this.create_output_area();
         this.append_mime_type(json, toinsert, dynamic);
         this.element.find('div.output').append(toinsert);
         // If we just output latex, typeset it.
         if ( (json.latex !== undefined) || (json.html !== undefined) ) {
             this.typeset();
         };
     };
 
 
     CodeCell.prototype.append_mime_type = function (json, element, dynamic) {
         if (json.javascript !== undefined && dynamic) {
             this.append_javascript(json.javascript, element, dynamic);
         } else if (json.html !== undefined) {
             this.append_html(json.html, element);
         } else if (json.latex !== undefined) {
             this.append_latex(json.latex, element);
         } else if (json.svg !== undefined) {
             this.append_svg(json.svg, element);
         } else if (json.png !== undefined) {
             this.append_png(json.png, element);
         } else if (json.jpeg !== undefined) {
             this.append_jpeg(json.jpeg, element);
         } else if (json.text !== undefined) {
             this.append_text(json.text, element);
         };
     };
 
 
     CodeCell.prototype.append_html = function (html, element) {
         var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_html rendered_html");
         toinsert.append(html);
         element.append(toinsert);
     };
 
 
     CodeCell.prototype.append_javascript = function (js, container) {
         // We just eval the JS code, element appears in the local scope.
         var element = $("<div/>").addClass("box_flex1 output_subarea");
         container.append(element);
         // Div for js shouldn't be drawn, as it will add empty height to the area.
         container.hide();
         // If the Javascript appends content to `element` that should be drawn, then
         // it must also call `container.show()`.
         eval(js);
     }
 
 
     CodeCell.prototype.append_text = function (data, element, extra_class) {
         var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_text");
         // escape ANSI & HTML specials in plaintext:
         data = utils.fixConsole(data);
         if (extra_class){
             toinsert.addClass(extra_class);
         }
         toinsert.append($("<pre/>").html(data));
         element.append(toinsert);
     };
 
 
     CodeCell.prototype.append_svg = function (svg, element) {
         var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_svg");
         toinsert.append(svg);
         element.append(toinsert);
     };
 
 
     CodeCell.prototype.append_png = function (png, element) {
         var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_png");
         toinsert.append($("<img/>").attr('src','data:image/png;base64,'+png));
         element.append(toinsert);
     };
 
 
     CodeCell.prototype.append_jpeg = function (jpeg, element) {
         var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_jpeg");
         toinsert.append($("<img/>").attr('src','data:image/jpeg;base64,'+jpeg));
         element.append(toinsert);
     };
 
 
     CodeCell.prototype.append_latex = function (latex, element) {
         // This method cannot do the typesetting because the latex first has to
         // be on the page.
         var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_latex");
         toinsert.append(latex);
         element.append(toinsert);
     };
 
 
     CodeCell.prototype.clear_output = function (stdout, stderr, other) {
         var that = this;
         if (this.clear_out_timeout != null){
             // fire previous pending clear *immediately*
             clearTimeout(this.clear_out_timeout);
             this.clear_out_timeout = null;
             this.clear_output_callback(this._clear_stdout, this._clear_stderr, this._clear_other);
         }
         // store flags for flushing the timeout
         this._clear_stdout = stdout;
         this._clear_stderr = stderr;
         this._clear_other = other;
         this.clear_out_timeout = setTimeout(function(){
             // really clear timeout only after a short delay
             // this reduces flicker in 'clear_output; print' cases
             that.clear_out_timeout = null;
             that._clear_stdout = that._clear_stderr = that._clear_other = null;
             that.clear_output_callback(stdout, stderr, other);
         }, 500
         );
     };
     
     CodeCell.prototype.clear_output_callback = function (stdout, stderr, other) {
         var output_div = this.element.find("div.output");
         
         if (stdout && stderr && other){
             // clear all, no need for logic
             output_div.html("");
             this.outputs = [];
             return;
         }
         // remove html output
         // each output_subarea that has an identifying class is in an output_area
         // which is the element to be removed.
         if (stdout){
             output_div.find("div.output_stdout").parent().remove();
         }
         if (stderr){
             output_div.find("div.output_stderr").parent().remove();
         }
         if (other){
             output_div.find("div.output_subarea").not("div.output_stderr").not("div.output_stdout").parent().remove();
         }
         
         // remove cleared outputs from JSON list:
         for (var i = this.outputs.length - 1; i >= 0; i--){
             var out = this.outputs[i];
             var output_type = out.output_type;
             if (output_type == "display_data" && other){
                 this.outputs.splice(i,1);
             }else if (output_type == "stream"){
                 if (stdout && out.stream == "stdout"){
                     this.outputs.splice(i,1);
                 }else if (stderr && out.stream == "stderr"){
                     this.outputs.splice(i,1);
                 }
             }
         }
     };
 
 
     CodeCell.prototype.clear_input = function () {
         this.code_mirror.setValue('');
     };
     
     CodeCell.prototype.flush_clear_timeout = function() {
         var output_div = this.element.find('div.output');
         if (this.clear_out_timeout){
             clearTimeout(this.clear_out_timeout);
             this.clear_out_timeout = null;
             this.clear_output_callback(this._clear_stdout, this._clear_stderr, this._clear_other);
         };
     }
 
 
     CodeCell.prototype.collapse = function () {
         if (!this.collapsed) {
             this.element.find('div.output').hide();
             this.collapsed = true;
         };
     };
 
 
     CodeCell.prototype.expand = function () {
         if (this.collapsed) {
             this.element.find('div.output').show();
             this.collapsed = false;
         };
     };
 
 
     CodeCell.prototype.toggle_output = function () {
         if (this.collapsed) {
             this.expand();
         } else {
             this.collapse();
         };
     };
 
     CodeCell.prototype.set_input_prompt = function (number) {
         this.input_prompt_number = number;
         var ns = number || "&nbsp;";
         this.element.find('div.input_prompt').html('In&nbsp;[' + ns + ']:');
     };
 
 
     CodeCell.prototype.get_text = function () {
         return this.code_mirror.getValue();
     };
 
 
     CodeCell.prototype.set_text = function (code) {
         return this.code_mirror.setValue(code);
     };
 
 
     CodeCell.prototype.at_top = function () {
         var cursor = this.code_mirror.getCursor();
         if (cursor.line === 0) {
             return true;
         } else {
             return false;
         }
     };
 
 
     CodeCell.prototype.at_bottom = function () {
         var cursor = this.code_mirror.getCursor();
         if (cursor.line === (this.code_mirror.lineCount()-1)) {
             return true;
         } else {
             return false;
         }
     };
 
 
     CodeCell.prototype.fromJSON = function (data) {
         if (data.cell_type === 'code') {
             if (data.input !== undefined) {
                 this.set_text(data.input);
             }
             if (data.prompt_number !== undefined) {
                 this.set_input_prompt(data.prompt_number);
             } else {
                 this.set_input_prompt();
             };
             var len = data.outputs.length;
             for (var i=0; i<len; i++) {
                 // append with dynamic=false.
                 this.append_output(data.outputs[i], false);
             };
             if (data.collapsed !== undefined) {
                 if (data.collapsed) {
                     this.collapse();
                 } else {
                     this.expand();
                 };
             };
         };
     };
 
 
     CodeCell.prototype.toJSON = function () {
         var data = {};
         data.input = this.get_text();
         data.cell_type = 'code';
         if (this.input_prompt_number) {
             data.prompt_number = this.input_prompt_number;
         };
         var outputs = [];
         var len = this.outputs.length;
         for (var i=0; i<len; i++) {
             outputs[i] = this.outputs[i];
         };
         data.outputs = outputs;
         data.language = 'python';
         data.collapsed = this.collapsed;
         return data;
     };
 
 
     IPython.CodeCell = CodeCell;
 
     return IPython;
 }(IPython));

IPython/frontend/html/notebook/templates/notebook.html

@@ -1,235 +1,238
 {% extends page.html %}
-
 {% block stylesheet %}
 
 {% if mathjax_url %}
 <script type="text/javascript" src="{{mathjax_url}}?config=TeX-AMS_HTML" charset="utf-8"></script>
 {% end %}
 <script type="text/javascript">
 // MathJax disabled, set as null to distingish from *missing* MathJax,
 // where it will be undefined, and should prompt a dialog later.
 window.mathjax_url = "{{mathjax_url}}";
 </script>
 
 <link rel="stylesheet" href="{{ static_url("codemirror/lib/codemirror.css") }}">
 <link rel="stylesheet" href="{{ static_url("codemirror/theme/ipython.css") }}">
 
 <link rel="stylesheet" href="{{ static_url("prettify/prettify.css") }}"/>
 
 <link rel="stylesheet" href="{{ static_url("css/notebook.css") }}" type="text/css" />
 <link rel="stylesheet" href="{{ static_url("css/renderedhtml.css") }}" type="text/css" />
 
 {% end %}
 
 
 {% block params %}
 
 data-project={{project}}
 data-base-project-url={{base_project_url}}
 data-base-kernel-url={{base_kernel_url}}
 data-read-only={{read_only and not logged_in}}
 data-notebook-id={{notebook_id}}
 
 {% end %}
 
 
 {% block header %}
 
 <span id="save_widget">
     <span id="notebook_name"></span>
     <span id="save_status"></span>
 </span>
 
 {% end %}
 
 
 {% block site %}
 
 <div id="menubar_container">
 <div id="menubar">
     <ul id="menus">
         <li><a href="#">File</a>
             <ul>
                 <li id="new_notebook"><a href="#">New</a></li>
                 <li id="open_notebook"><a href="#">Open...</a></li>
                 <hr/>
                 <li id="copy_notebook"><a href="#">Make a Copy...</a></li>
                 <li id="rename_notebook"><a href="#">Rename...</a></li>
                 <li id="save_notebook"><a href="#">Save</a></li>
                 <hr/>
                 <li><a href="#">Download as</a>
                     <ul>
                         <li id="download_ipynb"><a href="#">IPython (.ipynb)</a></li>
                         <li id="download_py"><a href="#">Python (.py)</a></li>
                     </ul>
                 </li>
                 <hr/>
                 <li id="print_notebook"><a href="/{{notebook_id}}/print" target="_blank">Print View</a></li>
                 <hr/>
                 <li id="kill_and_exit"><a href="#" >Close and halt</a></li>
             </ul>
         </li>
         <li><a href="#">Edit</a>
             <ul>
                 <li id="cut_cell"><a href="#">Cut Cell</a></li>
                 <li id="copy_cell"><a href="#">Copy Cell</a></li>
                 <li id="paste_cell" class="ui-state-disabled"><a href="#">Paste Cell</a></li>
                 <li id="paste_cell_above" class="ui-state-disabled"><a href="#">Paste Cell Above</a></li>
                 <li id="paste_cell_below" class="ui-state-disabled"><a href="#">Paste Cell Below</a></li>
                 <li id="delete_cell"><a href="#">Delete</a></li>
                 <hr/>
                 <li id="split_cell"><a href="#">Split Cell</a></li>
                 <li id="merge_cell_above"><a href="#">Merge Cell Above</a></li>
                 <li id="merge_cell_below"><a href="#">Merge Cell Below</a></li>
                 <hr/>
                 <li id="move_cell_up"><a href="#">Move Cell Up</a></li>
                 <li id="move_cell_down"><a href="#">Move Cell Down</a></li>
                 <hr/>
                 <li id="select_previous"><a href="#">Select Previous Cell</a></li>
                 <li id="select_next"><a href="#">Select Next Cell</a></li>
             </ul>
         </li>
         <li><a href="#">View</a>
             <ul>
                 <li id="toggle_header"><a href="#">Toggle Header</a></li>
                 <li id="toggle_toolbar"><a href="#">Toggle Toolbar</a></li>
             </ul>
         </li>
         <li><a href="#">Insert</a>
             <ul>
                 <li id="insert_cell_above"><a href="#">Insert Cell Above</a></li>
                 <li id="insert_cell_below"><a href="#">Insert Cell Below</a></li>
             </ul>
         </li>
         <li><a href="#">Cell</a>
             <ul>
                 <li id="run_cell"><a href="#">Run</a></li>
                 <li id="run_cell_in_place"><a href="#">Run in Place</a></li>
                 <li id="run_all_cells"><a href="#">Run All</a></li>
                 <hr/>
                 <li id="to_code"><a href="#">Code</a></li>
                 <li id="to_markdown"><a href="#">Markdown </a></li>
                 <li id="to_raw"><a href="#">Raw Text</a></li>
                 <li id="to_heading1"><a href="#">Heading 1</a></li>
                 <li id="to_heading2"><a href="#">Heading 2</a></li>
                 <li id="to_heading3"><a href="#">Heading 3</a></li>
                 <li id="to_heading4"><a href="#">Heading 4</a></li>
                 <li id="to_heading5"><a href="#">Heading 5</a></li>
                 <li id="to_heading6"><a href="#">Heading 6</a></li>
                 <hr/>
                 <li id="toggle_output"><a href="#">Toggle Output</a></li>
                 <li id="clear_all_output"><a href="#">Clear All Output</a></li>
             </ul>
         </li>
         <li><a href="#">Kernel</a>
             <ul>
                 <li id="int_kernel"><a href="#">Interrupt</a></li>
                 <li id="restart_kernel"><a href="#">Restart</a></li>
             </ul>
         </li>
         <li><a href="#">Help</a>
             <ul>
                 <li><a href="http://ipython.org/documentation.html" target="_blank">IPython Help</a></li>
                 <li><a href="http://ipython.org/ipython-doc/stable/interactive/htmlnotebook.html" target="_blank">Notebook Help</a></li>
                 <li id="keyboard_shortcuts"><a href="#">Keyboard Shortcuts</a></li>
                 <hr/>
                 <li><a href="http://docs.python.org" target="_blank">Python</a></li>
                 <li><a href="http://docs.scipy.org/doc/numpy/reference/" target="_blank">NumPy</a></li>
                 <li><a href="http://docs.scipy.org/doc/scipy/reference/" target="_blank">SciPy</a></li>
                 <li><a href="http://docs.sympy.org/dev/index.html" target="_blank">SymPy</a></li>
                 <li><a href="http://matplotlib.sourceforge.net/" target="_blank">Matplotlib</a></li>
             </ul>
         </li>
     </ul>
 
 </div>
 <div id="notification"></div>
 </div>
 
 
 <div id="toolbar">
 
     <span>
         <button id="save_b">Save</button>
     </span>
     <span id="cut_copy_paste">
         <button id="cut_b" title="Cut Cell">Cut Cell</button>
         <button id="copy_b" title="Copy Cell">Copy Cell</button>
         <button id="paste_b" title="Paste Cell">Paste Cell</button>
     </span>
     <span id="move_up_down">
         <button id="move_up_b" title="Move Cell Up">Move Cell Up</button>
         <button id="move_down_b" title="Move Cell Down">Move Down</button>
     </span>
     <span id="insert_above_below">
         <button id="insert_above_b" title="Insert Cell Above">Insert Cell Above</button>
         <button id="insert_below_b" title="Insert Cell Below">Insert Cell Below</button>
     </span>
     <span id="run_int">
         <button id="run_b" title="Run Cell">Run Cell</button>
         <button id="interrupt_b" title="Interrupt">Interrupt</button>
     </span>
     <span>
         <select id="cell_type">
              <option value="code">Code</option>
              <option value="markdown">Markdown</option>
              <option value="raw">Raw Text</option>
              <option value="heading1">Heading 1</option>
              <option value="heading2">Heading 2</option>
              <option value="heading3">Heading 3</option>
              <option value="heading4">Heading 4</option>
              <option value="heading5">Heading 5</option>
              <option value="heading6">Heading 6</option>
         </select>
     </span>
 
 </div>
 
 <div id="main_app">
 
     <div id="notebook_panel">
         <div id="notebook"></div>
         <div id="pager_splitter"></div>
         <div id="pager"></div>
     </div>
 
 </div>
 
 {% end %}
 
 
 {% block script %}
 
 <script src="{{ static_url("codemirror/lib/codemirror.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/python/python.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/htmlmixed/htmlmixed.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/xml/xml.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/javascript/javascript.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/css/css.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/rst/rst.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/markdown/markdown.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("pagedown/Markdown.Converter.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("prettify/prettify.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("dateformat/date.format.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("js/events.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/utils.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/layoutmanager.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/initmathjax.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/cell.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/codecell.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("js/completer.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/textcell.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/kernel.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/savewidget.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/quickhelp.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/pager.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/menubar.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/toolbar.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notebook.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notificationwidget.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notebookmain.js") }}" type="text/javascript" charset="utf-8"></script>
 
+<script src="{{ static_url("js/context-hint.js") }} charset="utf-8"></script>
+<script src="{{ static_url("codemirror/lib/util/simple-hint.js") }} charset="utf-8"></script>
+
 {% end %}