fix css size

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

@@ -1,415 +1,415
 /**
  * Primary styles
  *
  * Author: IPython Development Team
  */
 
 
 body {
     overflow: hidden;
 }
 
 blockquote {
     border-left: 4px solid #DDD;
     padding: 0 15px;
     color: #777;
 }
 
 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 {
     border: 1px solid transparent;
     padding: 2px 1.6em;
 }
 
 .ui-menu .ui-menu-item a.ui-state-focus {
     margin: 0;
 }
 
 .ui-menu hr {
     margin: 0.3em 0;
 }
 
 #menubar_container {
     position: relative;
 }
 
 #notification_area {
     position: absolute;
     right: 0px;
     top: 0px;
     height: 25px;
     padding: 3px 0px;
     padding-right: 3px;
     z-index: 10;
 }
 
 .notification_widget{
     float : right;
     right: 0px;
     top: 1px;
     height: 25px;
     padding: 3px 6px;
     z-index: 10;
 }
 
 .toolbar {
     padding: 3px 15px;
 }
 
-#cell_type {
+#maintoolbar > select, #maintoolbar label {
     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;
 }
 
 #pager_container {
     position : relative;
 }
 
 div#pager {
     padding: 15px;
     overflow: auto;
     display: none;
 }
 
 div.ui-widget-content {
     border: 1px solid #aaa;
     outline: none;
 }
 
 .cell {
     border: 1px solid transparent;
 }
 
 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_wrapper {
     /* This is a spacer between the input and output of each cell */
     margin-top: 5px;
     margin-left: 5px;
     /* FF needs explicit width to stretch */
     width: 100%;
     /* this position must be relative to enable descendents to be absolute within it */
     position: relative;
 }
 
 /* class for the output area when it should be height-limited */
 div.output_scroll {
   /* ideally, this would be max-height, but FF barfs all over that */
   height: 24em;
   /* FF needs this *and the wrapper* to specify full width, or it will shrinkwrap */
   width: 100%;
   
   overflow: auto;
   border-radius: 3px;
   box-shadow: inset 0 2px 8px rgba(0, 0, 0, .8);
 }
 
 /* output div while it is collapsed */
 div.output_collapsed {
   margin-right: 5px;
 }
 
 div.out_prompt_overlay {
   height: 100%;
   padding: 0px;
   position: absolute;
   border-radius: 3px;
 }
 
 div.out_prompt_overlay:hover {
   /* use inner shadow to get border that is computed the same on WebKit/FF */
   box-shadow: inset 0 0 1px #000;
   background: rgba(240, 240, 240, 0.5);
 }
 
 div.output_prompt {
     color: darkred;
     /* 5px right shift to account for margin in parent container */
     margin: 0 5px 0 -5px;
 }
 
 /* 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.44em 0.4em 0.4em 1px;
 }
 
 /* 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;
 }
 
 /* The following gets added to the <head> if it is detected that the user has a
  * monospace font with inconsistent normal/bold/italic height.  See
  * notebookmain.js.  Such fonts will have keywords vertically offset with
  * respect to the rest of the text.  The user should select a better font. 
  * See: https://github.com/ipython/ipython/issues/1503
  *
  * .CodeMirror span {
  *      vertical-align: bottom;
  * }
  */
 
 .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 {
     position: absolute;
     z-index: 10;
     overflow: hidden;
     border: 1px solid grey;
 }
 
 .completions select {
     background: white;
     outline: none;
     border: none;
     padding: 0px;
     margin: 0px;
     overflow: auto;
     font-family: monospace;
 }
 
 option.context {
   background-color: #DEF7FF;
 }
 option.introspection {
   background-color: #EBF4EB;
 }
 
 /*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; }
 
 #fonttest {
     font-family: monospace;
 }
 
 .js-error {
     color: darkred;
 }

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

@@ -1,352 +1,353
 //----------------------------------------------------------------------------
 //  Copyright (C) 2012  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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // CellToolbar
 //============================================================================
 
 
 /**
  * A Module to control the per-cell toolbar.
  * @module IPython
  * @namespace IPython
  * @submodule CellToolbar
  */
 var IPython = (function (IPython) {
     "use strict";
 
 
     /**
      * @constructor
      * @class CellToolbar
      * @param {The cell to attach the metadata UI to} cell
      */
     var CellToolbar = function (cell) {
         CellToolbar._instances.push(this);
         this.inner_element = $('<div/>');
         this.cell = cell;
         this.element = $('<div/>').addClass('celltoolbar')
                 .append(this.inner_element)
         this.rebuild();
         return this;
     };
 
     CellToolbar.dropdown_preset_element = $('<select/>')
+        .addClass('ui-widget ui-widget-content')
         .attr('id','celltoolbar_selector')
         .append($('<option/>').attr('value','').text('-'))
 
     CellToolbar.dropdown_preset_element.change(function(){
         var val = CellToolbar.dropdown_preset_element.val()
         if(val ==''){
             $('body').removeClass('celltoolbar-on')
         } else {
             $('body').addClass('celltoolbar-on')
             CellToolbar.set_preset(val)
         }
     })
 
 
 
     /**
      * Class variable that should contain a dict of all availlable callback
      * we need to think of wether or not we allow nested namespace
      * @property _callback_dict
      * @private
      */
     CellToolbar._callback_dict = {};
 
     /**
      * Class variable that should contain the reverse order list of the button
      * to add to the toolbar of each cell
      * @property _ui_controls_list
      * @private
      */
     CellToolbar._ui_controls_list = [];
 
     /**
      * keep a list of all instances to
      * be able to llop over them...
      * but how to 'destroy' them ?
      * have to think about it...
      * or loop over the cells, and find their CellToolbar instances.
      * @private
      * @property _instances
      */
     CellToolbar._instances =[]
 
     /**
      * keep a list of all the availlabel presets for the toolbar
      * @private
      * @property _presets
      */
     CellToolbar._presets ={}
 
     // this is by design not a prototype.
     /**
      * Register a callback to create an UI element in a cell toolbar.
      * @method register_callback
      * @param name {String} name to use to refer to the callback. It is advised to use a prefix with the name
      * for easier sorting and avoid collision
      * @param  callback {function(div, cell)} callback that will be called to generate the ui element
      *
      *
      * The callback will receive the following element :
      *
      *    * a div in which to add element.
      *    * the cell it is responsable from
      *
      * @example
      *
      * Example that create callback for a button that toggle between `true` and `false` label,
      * with the metadata under the key 'foo' to reflect the status of the button.
      *
      *      // first param reference to a DOM div
      *      // second param reference to the cell.
      *      var toggle =  function(div, cell) {
      *          var button_container = $(div)
      *
      *          // let's create a button that show the  current value of the metadata
      *          var button = $('<div/>').button({label:String(cell.metadata.foo)});
      *
      *          // On click, change the metadata value and update the button label
      *          button.click(function(){
      *                      var v = cell.metadata.foo;
      *                      cell.metadata.foo = !v;
      *                      button.button("option","label",String(!v));
      *                  })
      *
      *          // add the button to the DOM div.
      *          button_container.append(button);
      *      }
      *
      *      // now we register the callback under the name `foo` to give the
      *      // user the ability to use it later
      *      CellToolbar.register_callback('foo',toggle);
      */
     CellToolbar.register_callback = function(name, callback){
         // what do we do if name already exist ?
         CellToolbar._callback_dict[name] = callback;
     };
 
     /**
      * Register a preset of UI element in a cell toolbar.
      * Not supported Yet.
      * @method register_preset
      * @param name {String} name to use to refer to the preset. It is advised to use a prefix with the name
      * for easier sorting and avoid collision
      * @param  preset_list {List of String} reverse order of the button in the toolbar. Each String of the list
      *          should correspond to a name of a registerd callback.
      *
      * @private
      * @example
      *
      *      CellToolbar.register_callback('foo.c1',function(div,cell){...});
      *      CellToolbar.register_callback('foo.c2',function(div,cell){...});
      *      CellToolbar.register_callback('foo.c3',function(div,cell){...});
      *      CellToolbar.register_callback('foo.c4',function(div,cell){...});
      *      CellToolbar.register_callback('foo.c5',function(div,cell){...});
      *
      *      CellToolbar.register_preset('foo.foo_preset1',['foo.c1','foo.c2','foo.c5'])
      *      CellToolbar.register_preset('foo.foo_preset2',['foo.c4','foo.c5'])
      */
     CellToolbar.register_preset = function(name, preset_list){
         CellToolbar._presets[name] = preset_list
         CellToolbar.dropdown_preset_element.append(
            $('<option/>').attr('value',name).text(name)
         )
     }
     /**
      * set an UI preset from `register_preset`
      * @method set_preset
      * @param preset_name {String} string corresponding to the preset name
      *
      * @static
      * @private
      * @example
      *
      *      CellToolbar.set_preset('foo.foo_preset1');
      */
     CellToolbar.set_preset= function(preset_name){
         var preset = CellToolbar._presets[preset_name];
 
         if(preset != undefined){
             CellToolbar._ui_controls_list = preset;
             CellToolbar.rebuild_all();
         }
     }
 
 
     // this is by design not a prototype.
     /**
      * This should be called on the class and not on a instance as it will trigger
      * rebuild of all the instances.
      * @method rebuild_all
      * @static
      *
      */
     CellToolbar.rebuild_all = function(){
         for(var i in CellToolbar._instances){
             CellToolbar._instances[i].rebuild();
         }
     }
 
     /**
      * Rebuild all the button on the toolbar to update it's state.
      * @method rebuild
      */
     CellToolbar.prototype.rebuild = function(){
         // strip evrything from the div
         // which is probabli metainner.
         // or this.element.
         this.inner_element.empty();
 
         var cdict = CellToolbar._callback_dict;
         var preset = CellToolbar._ui_controls_list;
         // Yes we iterate on the class varaible, not the instance one.
         for ( var index in CellToolbar._ui_controls_list){
             var local_div = $('<div/>').addClass('button_container');
             // Note,
             // do this the other way, wrap in try/catch and don't append if any errors.
             this.inner_element.append(local_div)
             cdict[preset[index]](local_div,this.cell)
         }
 
     }
 
     
 
 
 
     /**
      */
     CellToolbar.utils = {};
 
     /**
      * A utility function to generate bindings between a checkbox and metadata
      * @method utils.checkbox_ui_generator
      * @static
      *
      * @param name {string} Label in front of the checkbox
      * @param setter {function( metadata_dict, newValue )}
      *        A setter method to set the newValue of the metadata dictionnary
      * @param getter {function( metadata )}
      *        A getter methods which return the current value of the metadata.
      *
      * @return callback {function( div, cell )} Callback to be passed to `register_callback`
      *
      * @example
      *
      * An exmple that bind the subkey `slideshow.isSectionStart` to a checkbox with a `New Slide` label
      *
      *     var newSlide = CellToolbar.utils.checkbox_ui_generator('New Slide',
      *          // setter
      *          function(metadata,value){
      *              // we check that the slideshow namespace exist and create it if needed
      *              if (metadata.slideshow == undefined){metadata.slideshow = {}}
      *              // set the value
      *              metadata.slideshow.isSectionStart = value
      *              },
      *          //geter
      *          function(metadata){ var ns = metadata.slideshow;
      *              // if the slideshow namespace does not exist return `undefined`
      *              // (will be interpreted as `false` by checkbox) otherwise
      *              // return the value
      *              return (ns == undefined)? undefined: ns.isSectionStart
      *              }
      *      );
      *
      *      CellToolbar.register_callback('newSlide', newSlide);
      *
      */
     CellToolbar.utils.checkbox_ui_generator = function(name,setter,getter){
          return function(div, cell) {
             var button_container = $(div)
 
             var chkb = $('<input/>').attr('type','checkbox');
             var lbl = $('<label/>').append($('<span/>').text(name).css('font-size','77%'));
             lbl.append(chkb);
             chkb.attr("checked",getter(cell.metadata));
 
             chkb.click(function(){
                         var v = getter(cell.metadata);
                         setter(cell.metadata,!v);
                         chkb.attr("checked",!v);
                     })
            button_container.append($('<div/>').append(lbl));
 
         }
     }
 
     /**
      * A utility function to generate bindings between a dropdown list and metadata
      * @method utils.select_ui_generator
      * @static
      *
      * @param list_list {list of sublist} List of sublist of metadata value and name in the dropdown list.
      *        subslit shoud contain 2 element each, first a string that woul be displayed in the dropdown list,
      *        and second the corresponding value for the metadata to be passed to setter/return by getter.
      * @param setter {function( metadata_dict, newValue )}
      *        A setter method to set the newValue of the metadata dictionnary
      * @param getter {function( metadata )}
      *        A getter methods which return the current value of the metadata.
      * @param [label=""] {String} optionnal label for the dropdown menu
      *
      * @return callback {function( div, cell )} Callback to be passed to `register_callback`
      *
      * @example
      *
      *      var select_type = CellToolbar.utils.select_ui_generator([
      *              ["-"            ,undefined      ],
      *              ["Header Slide" ,"header_slide" ],
      *              ["Slide"        ,"slide"        ],
      *              ["Fragment"     ,"fragment"     ],
      *              ["Skip"         ,"skip"         ],
      *              ],
      *              // setter
      *              function(metadata,value){
      *                  // we check that the slideshow namespace exist and create it if needed
      *                  if (metadata.slideshow == undefined){metadata.slideshow = {}}
      *                  // set the value
      *                  metadata.slideshow.slide_type = value
      *                  },
      *              //geter
      *              function(metadata){ var ns = metadata.slideshow;
      *                  // if the slideshow namespace does not exist return `undefined`
      *                  // (will be interpreted as `false` by checkbox) otherwise
      *                  // return the value
      *                  return (ns == undefined)? undefined: ns.slide_type
      *                  }
      *      CellToolbar.register_callback('slideshow.select',select_type);
      *
      */
     CellToolbar.utils.select_ui_generator = function(list_list,setter, getter, label){
         label= label? label: "";
         return function(div, cell) {
             var button_container = $(div)
             var lbl = $("<label/>").append($('<span/>').text(label).css('font-size','77%'));
             var select = $('<select/>');
             for(var itemn in list_list){
                 var opt = $('<option/>');
                         opt.attr('value',list_list[itemn][1])
                         opt.text(list_list[itemn][0])
                 select.append(opt);
             }
             select.val(getter(cell.metadata));
 
             select.change(function(){
                         setter(cell.metadata,select.val());
                     });
             button_container.append($('<div/>').append(lbl).append(select));
 
         }
     };
 
 
     IPython.CellToolbar = CellToolbar;
 
     return IPython;
 }(IPython));

IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js

@@ -1,215 +1,217
 //----------------------------------------------------------------------------
 //  Copyright (C) 2012  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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // CellToolbar Example
 //============================================================================
 
 /**
  * Example Use for the CellToolbar library
  * add the following to your custom.js to load
  * Celltoolbar UI for slideshow
  *
  * ```
  * $.getScript('/static/js/examples/celltoolbar.example.js');
  * ```
  */
  // IIFE without asignement, we don't modifiy the IPython namespace
 (function (IPython) {
     "use strict";
 
     var CellToolbar = IPython.CellToolbar;
 
 
     var raw_edit = function(cell){
 
         var md = cell.metadata
         var error_div = $('<div/>').css('color','red')
 
         var textarea = $('<textarea/>')
             .attr('rows','13')
             .attr('cols','75')
             .attr('name','metadata')
             .text(JSON.stringify(md, null,4)||'');
         var dialogform = $('<div/>').attr('title','Edit the metadata')
             .append(
                 $('<form/>').append(
                     $('<fieldset/>').append(
                         $('<label/>')
                         .attr('for','metadata')
                         .text("Metadata (I know what I'm dooing and I won't complain if it breaks my notebook)")
                         )
                         .append(error_div)
                         .append($('<br/>'))
                         .append(
                             textarea
                         )
                     )
             );
         var editor = CodeMirror.fromTextArea(textarea[0], {
             lineNumbers: true,
             matchBrackets: true,
         });
         $(dialogform).dialog({
                 autoOpen: true,
                 height: 300,
                 width: 650,
                 modal: true,
                 buttons: {
                     "Ok": function() {
                         //validate json and set it
                         try {
                            var json = JSON.parse(editor.getValue());
                            cell.metadata = json;
                            $( this ).dialog( "close" );
                         }
                         catch(e)
                         {
                            error_div.text('Warning, invalid json, not saved');
                         }
                     },
                     Cancel: function() {
                         $( this ).dialog( "close" );
                     }
                 },
                 close: function() {
                     //cleanup on close
                     $(this).remove();
                 }
         });
         editor.refresh();
     }
 
     var add_raw_edit_button = function(div, cell) {
         var button_container = $(div)
         var button = $('<div/>').button({label:'Raw Edit'})
                 .click(function(){raw_edit(cell); return false;})
         button_container.append(button);
     }
 
     CellToolbar.register_callback('example.rawedit',add_raw_edit_button);
     var example_preset = []
     example_preset.push('example.rawedit');
 
 
     var simple_button = function(div, cell) {
         var button_container = $(div);
         var button = $('<div/>').button({icons:{primary:'ui-icon-locked'}});
         var fun = function(value){
                 try{
                     if(value){
                         cell.code_mirror.setOption('readOnly','nocursor')
                         button.button('option','icons',{primary:'ui-icon-locked'})
                     } else {
                         cell.code_mirror.setOption('readOnly','false')
                         button.button('option','icons',{primary:'ui-icon-unlocked'})
                     }
                 } catch(e){}
 
         }
             fun(cell.metadata.ro)
             button.click(function(){
                     var v = cell.metadata.ro;
                     var locked = !v;
                     cell.metadata.ro = locked;
                     fun(locked)
                     })
                 .css('height','16px')
                 .css('width','35px');
         button_container.append(button);
     }
 
     CellToolbar.register_callback('example.lock',simple_button);
     example_preset.push('example.lock');
 
     var toggle_test =  function(div, cell) {
         var button_container = $(div)
-        var button = $('<div/>').button({label:String(cell.metadata.foo)});
+        var button = $('<div/>')
+            .button({label:String(cell.metadata.foo)}).
+            css('width','65px');
         button.click(function(){
                     var v = cell.metadata.foo;
                     cell.metadata.foo = !v;
                     button.button("option","label",String(!v));
                 })
        button_container.append(button);
     }
 
     CellToolbar.register_callback('example.toggle',toggle_test);
     example_preset.push('example.toggle');
 
     var checkbox_test =  function(div, cell) {
         var button_container = $(div)
 
         var chkb = $('<input/>').attr('type','checkbox');
         var lbl = $('<label/>').append($('<span/>').text('bar :').css('font-size','77%'));
         lbl.append(chkb);
         chkb.attr("checked",cell.metadata.bar);
         chkb.click(function(){
                     var v = cell.metadata.bar;
                     cell.metadata.bar = !v;
                     chkb.attr("checked",!v);
                 })
        button_container.append($('<div/>').append(lbl));
 
     }
 
     CellToolbar.register_callback('example.checkbox',checkbox_test);
     example_preset.push('example.checkbox');
 
     var select_test =  function(div, cell) {
         var button_container = $(div)
 
         var select = $('<select/>');
 
         select.append($('<option/>').attr('value','foo').text('foo'));
         select.append($('<option/>').attr('value','bar').text('bar'));
         select.append($('<option/>').attr('value','qux').text('qux'));
         select.append($('<option/>').attr('value','zip').text('zip'));
         select.val(cell.metadata.option);
         select.change(function(){
                 cell.metadata.option = select.val();
                 });
        button_container.append($('<div/>').append(select));
 
     }
 
     CellToolbar.register_callback('example.select',select_test);
     example_preset.push('example.select');
 
     var simple_dialog = function(title,text){
         var dlg = $('<div/>').attr('title',title)
             .append($('<p/>').text(text))
         $(dlg).dialog({
                 autoOpen: true,
                 height: 300,
                 width: 650,
                 modal: true,
                 close: function() {
                     //cleanup on close
                     $(this).remove();
                 }
         });
     }
 
     var add_simple_dialog_button = function(div, cell) {
         var help_text = ["This is the Metadata editting UI.",
                          "It heavily rely on plugin to work ",
                          "and is still under developpement. You shouldn't wait too long before",
                          " seeing some customisable buttons in those toolbar."
                         ].join('\n')
         var button_container = $(div)
         var button = $('<div/>').button({label:'?'})
                 .click(function(){simple_dialog('help',help_text); return false;})
         button_container.append(button);
     }
 
     CellToolbar.register_callback('example.help',add_simple_dialog_button)
     example_preset.push('example.help')
 
     CellToolbar.register_preset('example',example_preset);
     console.log('Example extension for metadata editting loaded.');
 
 }(IPython));