remove more hard coded layout

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

@@ -1,393 +1,393 b''
 //----------------------------------------------------------------------------
 //  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.cell = cell;
         this.create_element();
         this.rebuild();
         return this;
     };
 
 
     CellToolbar.prototype.create_element = function () {
-        this.inner_element = $('<div/>').addClass('celltoolbar hbox reverse')
+        this.inner_element = $('<div/>').addClass('celltoolbar')
         this.element = $('<div/>').addClass('ctb_hideshow')
             .append(this.inner_element);
     };
 
 
     // The default css style for the outer celltoolbar div
     // (ctb_hideshow) is display: none. We add the ctb_show
     // class to either 1) the body to show all cell's toolbars
     // or 2) to the individual celltoolbar divs to show just one
     // cell's toolbar.
 
     CellToolbar.global_hide = function () {
         $('body').removeClass('ctb_show');
     }
 
 
     CellToolbar.global_show = function () {
        $('body').addClass('ctb_show');
     }
 
 
     CellToolbar.prototype.hide = function () {
         this.element.removeClass('ctb_show');
     }
 
 
     CellToolbar.prototype.show = function () {
         this.element.addClass('ctb_show');
     }
 
 
     /**
      * 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
      * @static
      * @type Dict
      */
     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
      * @static
      * @type List
      */
     CellToolbar._ui_controls_list = [];
 
 
     /**
      * Class variable that should contains the CellToolbar instances for each
      * cell of the notebook
      *
      * @private
      * @property _instances
      * @static
      * @type List
      */
     CellToolbar._instances =[]
 
 
     /**
      * keep a list of all the availlabel presets for the toolbar
      * @private
      * @property _presets
      * @static
      * @type Dict
      */
     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 responsible 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){
         // Overwrite if it already exists.
         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
         $([IPython.events]).trigger('preset_added.CellToolbar', {name: name});
     };
 
 
     /**
      * List the names of the presets that are currently registered.
      *
      * @method list_presets
      * @static
      */
     CellToolbar.list_presets = function() {
         var keys = [];
         for (var k in CellToolbar._presets) {
             keys.push(k);
         }
         return keys;
     };
 
 
     /**
      * Activate an UI preset from `register_preset`
      *
      * This does not update the selection UI.
      *
      * @method activate_preset
      * @param preset_name {String} string corresponding to the preset name
      *
      * @static
      * @private
      * @example
      *
      *      CellToolbar.activate_preset('foo.foo_preset1');
      */
     CellToolbar.activate_preset= function(preset_name){
         var preset = CellToolbar._presets[preset_name];
 
         if(preset != undefined){
             CellToolbar._ui_controls_list = preset;
             CellToolbar.rebuild_all();
         }
     }
 
 
     /**
      * 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 cell/metadata
      * @method utils.checkbox_ui_generator
      * @static
      *
      * @param name {string} Label in front of the checkbox
      * @param setter {function( cell, newValue )}
      *        A setter method to set the newValue
      * @param getter {function( cell )}
      *        A getter methods which return the current value.
      *
      * @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(cell, value){
      *              // we check that the slideshow namespace exist and create it if needed
      *              if (cell.metadata.slideshow == undefined){cell.metadata.slideshow = {}}
      *              // set the value
      *              cell.metadata.slideshow.isSectionStart = value
      *              },
      *          //geter
      *          function(cell){ var ns = cell.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));
             lbl.append(chkb);
             chkb.attr("checked", getter(cell));
 
             chkb.click(function(){
                         var v = getter(cell);
                         setter(cell, !v);
                         chkb.attr("checked", !v);
                     })
            button_container.append($('<div/>').append(lbl));
 
         }
     }
 
 
     /**
      * A utility function to generate bindings between a dropdown list cell
      * @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 to  be passed to setter/return by getter. the corresponding value 
      *        should not be "undefined" or behavior can be unexpected.
      * @param setter {function( cell, newValue )}
      *        A setter method to set the newValue
      * @param getter {function( cell )}
      *        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([
      *              ["<None>"       , "None"      ],
      *              ["Header Slide" , "header_slide" ],
      *              ["Slide"        , "slide"        ],
      *              ["Fragment"     , "fragment"     ],
      *              ["Skip"         , "skip"         ],
      *              ],
      *              // setter
      *              function(cell, value){
      *                  // we check that the slideshow namespace exist and create it if needed
      *                  if (cell.metadata.slideshow == undefined){cell.metadata.slideshow = {}}
      *                  // set the value
      *                  cell.metadata.slideshow.slide_type = value
      *                  },
      *              //geter
      *              function(cell){ var ns = cell.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));
             var select = $('<select/>').addClass('ui-widget ui-widget-content');
             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));
             select.change(function(){
                         setter(cell, select.val());
                     });
             button_container.append($('<div/>').append(lbl).append(select));
 
         }
     };
 
 
     IPython.CellToolbar = CellToolbar;
 
     return IPython;
 }(IPython));

IPython/html/static/notebook/js/outputarea.js

@@ -1,681 +1,681 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008 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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // OutputArea
 //============================================================================
 
 /**
  * @module IPython
  * @namespace IPython
  * @submodule OutputArea
  */
 var IPython = (function (IPython) {
     "use strict";
 
     var utils = IPython.utils;
 
     /**
      * @class OutputArea
      *
      * @constructor
      */
 
     var OutputArea = function (selector, prompt_area) {
         this.selector = selector;
         this.wrapper = $(selector);
         this.outputs = [];
         this.collapsed = false;
         this.scrolled = false;
         this.clear_queued = null;
         if (prompt_area === undefined) {
             this.prompt_area = true;
         } else {
             this.prompt_area = prompt_area;
         }
         this.create_elements();
         this.style();
         this.bind_events();
     };
     
     OutputArea.prototype.create_elements = function () {
         this.element = $("<div/>");
         this.collapse_button = $("<div/>");
         this.prompt_overlay = $("<div/>");
         this.wrapper.append(this.prompt_overlay);
         this.wrapper.append(this.element);
         this.wrapper.append(this.collapse_button);
     };
 
 
     OutputArea.prototype.style = function () {
         this.collapse_button.hide();
         this.prompt_overlay.hide();
         
         this.wrapper.addClass('output_wrapper');
-        this.element.addClass('output vbox');
+        this.element.addClass('output');
         
         this.collapse_button.addClass("btn output_collapsed");
         this.collapse_button.attr('title', 'click to expand output');
         this.collapse_button.html('. . .');
         
         this.prompt_overlay.addClass('out_prompt_overlay prompt');
         this.prompt_overlay.attr('title', 'click to expand output; double click to hide output');
         
         this.collapse();
     };
 
     /**
      * Should the OutputArea scroll?
      * Returns whether the height (in lines) exceeds a threshold.
      *
      * @private
      * @method _should_scroll
      * @param [lines=100]{Integer}
      * @return {Bool}
      *
      */
     OutputArea.prototype._should_scroll = function (lines) {
         if (lines <=0 ){ return }
         if (!lines) {
             lines = 100;
         }
         // line-height from http://stackoverflow.com/questions/1185151
         var fontSize = this.element.css('font-size');
         var lineHeight = Math.floor(parseInt(fontSize.replace('px','')) * 1.5);
         
         return (this.element.height() > lines * lineHeight);
     };
 
 
     OutputArea.prototype.bind_events = function () {
         var that = this;
         this.prompt_overlay.dblclick(function () { that.toggle_output(); });
         this.prompt_overlay.click(function () { that.toggle_scroll(); });
 
         this.element.resize(function () {
             // FIXME: Firefox on Linux misbehaves, so automatic scrolling is disabled
             if ( IPython.utils.browser[0] === "Firefox" ) {
                 return;
             }
             // maybe scroll output,
             // if it's grown large enough and hasn't already been scrolled.
             if ( !that.scrolled && that._should_scroll(OutputArea.auto_scroll_threshold)) {
                 that.scroll_area();
             }
         });
         this.collapse_button.click(function () {
             that.expand();
         });
     };
 
 
     OutputArea.prototype.collapse = function () {
         if (!this.collapsed) {
             this.element.hide();
             this.prompt_overlay.hide();
             if (this.element.html()){
                 this.collapse_button.show();
             }
             this.collapsed = true;
         }
     };
 
 
     OutputArea.prototype.expand = function () {
         if (this.collapsed) {
             this.collapse_button.hide();
             this.element.show();
             this.prompt_overlay.show();
             this.collapsed = false;
         }
     };
 
 
     OutputArea.prototype.toggle_output = function () {
         if (this.collapsed) {
             this.expand();
         } else {
             this.collapse();
         }
     };
 
 
     OutputArea.prototype.scroll_area = function () {
         this.element.addClass('output_scroll');
         this.prompt_overlay.attr('title', 'click to unscroll output; double click to hide');
         this.scrolled = true;
     };
 
 
     OutputArea.prototype.unscroll_area = function () {
         this.element.removeClass('output_scroll');
         this.prompt_overlay.attr('title', 'click to scroll output; double click to hide');
         this.scrolled = false;
     };
 
     /**
      * Threshold to trigger autoscroll when the OutputArea is resized,
      * typically when new outputs are added.
      *
      * Behavior is undefined if autoscroll is lower than minimum_scroll_threshold,
      * unless it is < 0, in which case autoscroll will never be triggered
      *
      * @property auto_scroll_threshold
      * @type Number
      * @default 100
      *
      **/
     OutputArea.auto_scroll_threshold = 100;
 
 
     /**
      * Lower limit (in lines) for OutputArea to be made scrollable. OutputAreas
      * shorter than this are never scrolled.
      *
      * @property minimum_scroll_threshold
      * @type Number
      * @default 20
      *
      **/
     OutputArea.minimum_scroll_threshold = 20;
 
 
     /**
      *
      * Scroll OutputArea if height supperior than a threshold (in lines).
      *
      * Threshold is a maximum number of lines. If unspecified, defaults to
      * OutputArea.minimum_scroll_threshold.
      *
      * Negative threshold will prevent the OutputArea from ever scrolling.
      *
      * @method scroll_if_long
      *
      * @param [lines=20]{Number} Default to 20 if not set,
      * behavior undefined for value of `0`.
      *
      **/
     OutputArea.prototype.scroll_if_long = function (lines) {
         var n = lines | OutputArea.minimum_scroll_threshold;
         if(n <= 0){
             return
         }
 
         if (this._should_scroll(n)) {
             // only allow scrolling long-enough output
             this.scroll_area();
         }
     };
 
 
     OutputArea.prototype.toggle_scroll = function () {
         if (this.scrolled) {
             this.unscroll_area();
         } else {
             // only allow scrolling long-enough output
             this.scroll_if_long();
         }
     };
 
 
     // typeset with MathJax if MathJax is available
     OutputArea.prototype.typeset = function () {
         if (window.MathJax){
             MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
         }
     };
 
 
     OutputArea.prototype.handle_output = function (msg) {
         var json = {};
         var msg_type = json.output_type = msg.header.msg_type;
         var content = msg.content;
         if (msg_type === "stream") {
             json.text = content.data;
             json.stream = content.name;
         } else if (msg_type === "display_data") {
             json = this.convert_mime_types(json, content.data);
             json.metadata = this.convert_mime_types({}, content.metadata);
         } else if (msg_type === "pyout") {
             json.prompt_number = content.execution_count;
             json = this.convert_mime_types(json, content.data);
             json.metadata = this.convert_mime_types({}, content.metadata);
         } else if (msg_type === "pyerr") {
             json.ename = content.ename;
             json.evalue = content.evalue;
             json.traceback = content.traceback;
         }
         // append with dynamic=true
         this.append_output(json, true);
     };
 
 
     OutputArea.prototype.convert_mime_types = function (json, data) {
         if (data === undefined) {
             return json;
         }
         if (data['text/plain'] !== undefined) {
             json.text = data['text/plain'];
         }
         if (data['text/html'] !== undefined) {
             json.html = data['text/html'];
         }
         if (data['image/svg+xml'] !== undefined) {
             json.svg = data['image/svg+xml'];
         }
         if (data['image/png'] !== undefined) {
             json.png = data['image/png'];
         }
         if (data['image/jpeg'] !== undefined) {
             json.jpeg = data['image/jpeg'];
         }
         if (data['text/latex'] !== undefined) {
             json.latex = data['text/latex'];
         }
         if (data['application/json'] !== undefined) {
             json.json = data['application/json'];
         }
         if (data['application/javascript'] !== undefined) {
             json.javascript = data['application/javascript'];
         }
         return json;
     };
 
 
     OutputArea.prototype.append_output = function (json, dynamic) {
         // If dynamic is true, javascript output will be eval'd.
         this.expand();
 
         // Clear the output if clear is queued.
         var needs_height_reset = false;
         if (this.clear_queued) {
             this.clear_output(false);
             needs_height_reset = true;
         }
 
         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);
         
         // Only reset the height to automatic if the height is currently
         // fixed (done by wait=True flag on clear_output).
         if (needs_height_reset) {
             this.element.height('');    
         }
 
         var that = this;
         setTimeout(function(){that.element.trigger('resize');}, 100);
     };
 
 
     OutputArea.prototype.create_output_area = function () {
         var oa = $("<div/>").addClass("output_area");
         if (this.prompt_area) {
             oa.append($('<div/>').addClass('prompt'));
         }
         return oa;
     };
     
     OutputArea.prototype._append_javascript_error = function (err, container) {
         // display a message when a javascript error occurs in display output
         var msg = "Javascript error adding output!"
         console.log(msg, err);
         if ( container === undefined ) return;
         container.append(
             $('<div/>').html(msg + "<br/>" +
                 err.toString() +
                 '<br/>See your browser Javascript console for more details.'
             ).addClass('js-error')
         );
         container.show();
     };
     
     OutputArea.prototype._safe_append = function (toinsert) {
         // safely append an item to the document
         // this is an object created by user code,
         // and may have errors, which should not be raised
         // under any circumstances.
         try {
             this.element.append(toinsert);
         } catch(err) {
             console.log(err);
             this._append_javascript_error(err, this.element);
         }
     };
 
 
     OutputArea.prototype.append_pyout = function (json, dynamic) {
         var n = json.prompt_number || ' ';
         var toinsert = this.create_output_area();
         if (this.prompt_area) {
             toinsert.find('div.prompt').addClass('output_prompt').html('Out[' + n + ']:');
         }
         this.append_mime_type(json, toinsert, dynamic);
         this._safe_append(toinsert);
         // If we just output latex, typeset it.
         if ((json.latex !== undefined) || (json.html !== undefined)) {
             this.typeset();
         }
     };
 
 
     OutputArea.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._safe_append(toinsert);
         }
     };
 
 
     OutputArea.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';
         }
         var text = json.text;
         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 pre = this.element.find('div.'+subclass).last().find('pre');
                 var html = utils.fixCarriageReturn(
                     pre.html() + utils.fixConsole(text));
                 pre.html(html);
                 return;
             }
         }
 
         if (!text.replace("\r", "")) {
             // text is nothing (empty string, \r, etc.)
             // so don't append any elements, which might add undesirable space
             return;
         }
 
         // If we got here, attach a new div
         var toinsert = this.create_output_area();
         this.append_text(text, {}, toinsert, "output_stream "+subclass);
         this._safe_append(toinsert);
     };
 
 
     OutputArea.prototype.append_display_data = function (json, dynamic) {
         var toinsert = this.create_output_area();
         this.append_mime_type(json, toinsert, dynamic);
         this._safe_append(toinsert);
         // If we just output latex, typeset it.
         if ( (json.latex !== undefined) || (json.html !== undefined) ) {
             this.typeset();
         }
     };
 
     OutputArea.display_order = ['javascript','html','latex','svg','png','jpeg','text'];
 
     OutputArea.prototype.append_mime_type = function (json, element, dynamic) {
         for(var type_i in OutputArea.display_order){
             var type = OutputArea.display_order[type_i];
             if(json[type] != undefined ){
                 var md = {};
                 if (json.metadata && json.metadata[type]) {
                     md = json.metadata[type];
                 };
                 if(type == 'javascript'){
                     if (dynamic) {
                         this.append_javascript(json.javascript, md, element, dynamic);
                     }
                 } else {
                     this['append_'+type](json[type], md, element);
                 }
                 return;
             }
         }
     };
 
 
     OutputArea.prototype.append_html = function (html, md, element) {
         var toinsert = $("<div/>").addClass("output_subarea output_html rendered_html");
         toinsert.append(html);
         element.append(toinsert);
     };
 
 
     OutputArea.prototype.append_javascript = function (js, md, container) {
         // We just eval the JS code, element appears in the local scope.
         var element = $("<div/>").addClass("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()`.
         try {
             eval(js);
         } catch(err) {
             this._append_javascript_error(err, container);
         }
     };
 
 
     OutputArea.prototype.append_text = function (data, md, element, extra_class) {
         var toinsert = $("<div/>").addClass("output_subarea output_text");
         // escape ANSI & HTML specials in plaintext:
         data = utils.fixConsole(data);
         data = utils.fixCarriageReturn(data);
         data = utils.autoLinkUrls(data);
         if (extra_class){
             toinsert.addClass(extra_class);
         }
         toinsert.append($("<pre/>").html(data));
         element.append(toinsert);
     };
 
 
     OutputArea.prototype.append_svg = function (svg, md, element) {
         var toinsert = $("<div/>").addClass("output_subarea output_svg");
         toinsert.append(svg);
         element.append(toinsert);
     };
 
 
     OutputArea.prototype._dblclick_to_reset_size = function (img) {
         // schedule wrapping image in resizable after a delay,
         // so we don't end up calling resize on a zero-size object
         var that = this;
         setTimeout(function () {
             var h0 = img.height();
             var w0 = img.width();
             if (!(h0 && w0)) {
                 // zero size, schedule another timeout
                 that._dblclick_to_reset_size(img);
                 return;
             }
             img.resizable({
                 aspectRatio: true,
                 autoHide: true
             });
             img.dblclick(function () {
                 // resize wrapper & image together for some reason:
                 img.parent().height(h0);
                 img.height(h0);
                 img.parent().width(w0);
                 img.width(w0);
             });
         }, 250);
     };
 
 
     OutputArea.prototype.append_png = function (png, md, element) {
         var toinsert = $("<div/>").addClass("output_subarea output_png");
         var img = $("<img/>").attr('src','data:image/png;base64,'+png);
         if (md['height']) {
             img.attr('height', md['height']);
         }
         if (md['width']) {
             img.attr('width', md['width']);
         }
         this._dblclick_to_reset_size(img);
         toinsert.append(img);
         element.append(toinsert);
     };
 
 
     OutputArea.prototype.append_jpeg = function (jpeg, md, element) {
         var toinsert = $("<div/>").addClass("output_subarea output_jpeg");
         var img = $("<img/>").attr('src','data:image/jpeg;base64,'+jpeg);
         if (md['height']) {
             img.attr('height', md['height']);
         }
         if (md['width']) {
             img.attr('width', md['width']);
         }
         this._dblclick_to_reset_size(img);
         toinsert.append(img);
         element.append(toinsert);
     };
 
 
     OutputArea.prototype.append_latex = function (latex, md, element) {
         // This method cannot do the typesetting because the latex first has to
         // be on the page.
         var toinsert = $("<div/>").addClass("output_subarea output_latex");
         toinsert.append(latex);
         element.append(toinsert);
     };
 
     OutputArea.prototype.append_raw_input = function (msg) {
         var that = this;
         this.expand();
         var content = msg.content;
         var area = this.create_output_area();
         
         // disable any other raw_inputs, if they are left around
         $("div.output_subarea.raw_input").remove();
         
         area.append(
             $("<div/>")
             .addClass("box-flex1 output_subarea raw_input")
             .append(
                 $("<span/>")
                 .addClass("input_prompt")
                 .text(content.prompt)
             )
             .append(
                 $("<input/>")
                 .addClass("raw_input")
                 .attr('type', 'text')
                 .attr("size", 47)
                 .keydown(function (event, ui) {
                     // make sure we submit on enter,
                     // and don't re-execute the *cell* on shift-enter
                     if (event.which === utils.keycodes.ENTER) {
                         that._submit_raw_input();
                         return false;
                     }
                 })
             )
         );
         this.element.append(area);
         // weirdly need double-focus now,
         // otherwise only the cell will be focused
         area.find("input.raw_input").focus().focus();
     }
     OutputArea.prototype._submit_raw_input = function (evt) {
         var container = this.element.find("div.raw_input");
         var theprompt = container.find("span.input_prompt");
         var theinput = container.find("input.raw_input");
         var value = theinput.val();
         var content = {
             output_type : 'stream',
             name : 'stdout',
             text : theprompt.text() + value + '\n'
         }
         // remove form container
         container.parent().remove();
         // replace with plaintext version in stdout
         this.append_output(content, false);
         $([IPython.events]).trigger('send_input_reply.Kernel', value);
     }
 
 
     OutputArea.prototype.handle_clear_output = function (msg) {
         this.clear_output(msg.content.wait);
     };
 
 
     OutputArea.prototype.clear_output = function(wait) {
         if (wait) {
 
             // If a clear is queued, clear before adding another to the queue.
             if (this.clear_queued) {
                 this.clear_output(false);
             };
 
             this.clear_queued = true;
         } else {
 
             // Fix the output div's height if the clear_output is waiting for
             // new output (it is being used in an animation).
             if (this.clear_queued) {
                 var height = this.element.height();
                 this.element.height(height);
                 this.clear_queued = false;
             }
             
             // clear all, no need for logic
             this.element.html("");
             this.outputs = [];
             this.unscroll_area();
             return;
         };
     };
 
 
     // JSON serialization
 
     OutputArea.prototype.fromJSON = function (outputs) {
         var len = outputs.length;
         for (var i=0; i<len; i++) {
             // append with dynamic=false.
             this.append_output(outputs[i], false);
         }
     };
 
 
     OutputArea.prototype.toJSON = function () {
         var outputs = [];
         var len = this.outputs.length;
         for (var i=0; i<len; i++) {
             outputs[i] = this.outputs[i];
         }
         return outputs;
     };
 
 
     IPython.OutputArea = OutputArea;
 
     return IPython;
 
 }(IPython));

IPython/html/static/notebook/less/celltoolbar.less

@@ -1,109 +1,111 b''
 /* Css for the metadata edit area */
 
 
 .celltoolbar {
     border: thin solid #CFCFCF;
     border-bottom: none;
     background : #EEE;
     border-top-right-radius: 3px;
     border-top-left-radius: 3px;
     width:100%;
     -webkit-box-pack: end;
     height:22px;
+    .hbox();
+    .reverse();
 }
 
 
 .no_input_radius {
     border-top-right-radius: 0px;
     border-top-left-radius: 0px;
 }
 
 .text_cell .ctb_prompt {
     display: none;
 }
 
 .code_cell .ctb_prompt {
     display: block;
 }
 
 .ctb_hideshow {
     display:none;
     vertical-align:bottom;
     padding-right: 2px;
 }
 
 .celltoolbar > div {
    padding-top: 0px;
 }
 
 .ctb_area {
     margin:0;
     padding:0;
     width:100%;
 
 }
 
 
 /*ctb_show is added to either body or the ctb_hideshow div to show
 all or one cell's toolbars.
 */
 .ctb_show.ctb_hideshow, .ctb_show .ctb_hideshow {
     display:block;
 }
 
 .ctb_show .input_area,
 .ctb_show .ctb_hideshow + div.text_cell_input {
     border-top-right-radius: 0px;
     border-top-left-radius: 0px;
 }
 
 .ctb_show > .celltoolbar {
     border-bottom-right-radius: 0px;
     border-bottom-left-radius: 0px;
 }
 
 .button_container {
     margin-top:0;
     margin-bottom:0;
 }
 
 
 .ui-button {
     min-width:30px;
 }
 .celltoolbar .button_container select {
     margin: 10px;
     margin-top: 1px;
     margin-bottom: 0px;
     padding:0;
     font-size: 87%;
     width:auto;
     display:inline-block;
     height:18px;
     line-height:18px;
     vertical-align:top;
 }
 
 .celltoolbar label{
     display:inline-block;
     height:15px;
     line-height:15px;
     vertical-align:top;
 }
 
 .celltoolbar label span {
     font-size: 85%;
 }
 
 .celltoolbar input[type=checkbox] {
     margin: 0px;
     margin-left: 4px;
     margin-right: 4px;
 }
 
 
 .celltoolbar .ui-button {
     border: none;
     vertical-align:top;
     height:20px;
 }

IPython/html/static/notebook/less/outputarea.less

@@ -1,115 +1,119 b''
 /* This class is the outer container of all output sections. */
 div.output_area {
     padding: 0px;
     page-break-inside: avoid;
     .hbox();
 
     .MathJax_Display {
         // Inside a CodeCell, elements are left justified
         text-align: left !important;
     }
 
     .rendered_html {
         // Inside a CodeCell, elements are left justified
         table {
             margin-left: 0;
             margin-right: 0;
         }
     
         img {
             margin-left: 0;
             margin-right: 0;
         }
     }
 }
 
 
 /* This is needed to protect the pre formating from global settings such
    as that of bootstrap */
+.output {
+    .vbox();
+}
+
 div.output_area pre {	
     font-family: @monoFontFamily;	
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 100%;
     vertical-align: baseline;
     color: black;
     background-color: transparent;
     .border-radius(0);
     line-height: inherit;
 }
 
 /* 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;
     margin-left: 6px;
     .box-flex1();
 }
 
 /* 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: @textColor;
     font-family: @monoFontFamily;
     /* This has to match that of the the CodeMirror class line-height below */	
     line-height: @code_line_height;
 }
 
 /* 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;
 }
 
 div.output_html {
 }
 
 div.output_png {
 }
 
 div.output_jpeg {
 }
 
 .js-error {
     color: darkred;
 }
 
 /* raw_input styles */
 
 div.raw_input {
   padding-top: 0px;
   padding-bottom: 0px;
   height: 1em;
   line-height: 1em;
   font-family: @monoFontFamily;
 }
 span.input_prompt {
   font-family: inherit;
 }
 input.raw_input {
   font-family: inherit;
   font-size: inherit;
   color: inherit;
   width: auto;
   margin: -2px 0px 0px 1px;
   padding-left: 1px;
   padding-top: 2px;
   height: 1em;
 }
 
 p.p-space {
   margin-bottom: 10px;
-}
  No newline at end of file
+}

IPython/nbconvert/templates/html_basic.tpl

@@ -1,148 +1,148 b''
 {%- extends 'display_priority.tpl' -%}
 
 
 {% block codecell %}
-<div class="cell border-box-sizing code_cell vbox">
+<div class="cell border-box-sizing code_cell">
 {{ super() }}
 </div>
 {%- endblock codecell %}
 
 {% block input_group -%}
 <div class="input">
 {{ super() }}
 </div>
 {% endblock input_group %}
 
 {% block output_group %}
 <div class="output_wrapper">
-<div class="output vbox">
+<div class="output">
 {{ super() }}
 </div>
 </div>
 {% endblock output_group %}
 
 {% block in_prompt -%}
 <div class="prompt input_prompt">
 In&nbsp;[{{ cell.prompt_number }}]:
 </div>
 {%- endblock in_prompt %}
 
 {# 
   output_prompt doesn't do anything in HTML,
   because there is a prompt div in each output area (see output block)
 #}
 {% block output_prompt %}
 {% endblock output_prompt %}
 
 {% block input %}
 <div class="input_area box-flex1">
 {{ cell.input | highlight2html(metadata=cell.metadata) }}
 </div>
 {%- endblock input %}
 
 {% block output %}
 <div class="output_area">
 {%- if output.output_type == 'pyout' -%}
     <div class="prompt output_prompt">
     Out[{{ cell.prompt_number }}]:
 {%- else -%}
     <div class="prompt">
 {%- endif -%}
     </div>
 {{ super() }}
 </div>
 {% endblock output %}
 
 {% block markdowncell scoped %}
 <div class="text_cell_render border-box-sizing rendered_html">
 {{ cell.source  | markdown2html | strip_files_prefix }}
 </div>
 {%- endblock markdowncell %}
 
 {% block headingcell scoped %}
 <div class="text_cell_render border-box-sizing rendered_html">
 {{ ("#" * cell.level + cell.source) | replace('\n', ' ')  | markdown2html | strip_files_prefix | add_anchor }}
 </div>
 {% endblock headingcell %}
 
 {% block rawcell scoped %}
 {{ cell.source }}
 {% endblock rawcell %}
 
 {% block unknowncell scoped %}
 unknown type  {{ cell.type }}
 {% endblock unknowncell %}
 
 {% block pyout -%}
 <div class="box-flex1 output_subarea output_pyout">
 {% block data_priority scoped %}
 {{ super() }}
 {% endblock %}
 </div>
 {%- endblock pyout %}
 
 {% block stream_stdout -%}
 <div class="box-flex1 output_subarea output_stream output_stdout">
 <pre>
 {{ output.text | ansi2html }}
 </pre>
 </div>
 {%- endblock stream_stdout %}
 
 {% block stream_stderr -%}
 <div class="box-flex1 output_subarea output_stream output_stderr">
 <pre>
 {{ output.text | ansi2html }}
 </pre>
 </div>
 {%- endblock stream_stderr %}
 
 {% block data_svg -%}
 {{ output.svg }}
 {%- endblock data_svg %}
 
 {% block data_html -%}
 <div class="output_html rendered_html">
 {{ output.html }}
 </div>
 {%- endblock data_html %}
 
 {% block data_png %}
 <img src="data:image/png;base64,{{ output.png }}">
 {%- endblock data_png %}
 
 {% block data_jpg %}
 <img src="data:image/jpeg;base64,{{ output.jpeg }}">
 {%- endblock data_jpg %}
 
 {% block data_latex %}
 {{ output.latex }}
 {%- endblock data_latex %}
 
 {% block pyerr -%}
 <div class="box-flex1 output_subarea output_pyerr">
 <pre>{{ super() }}</pre>
 </div>
 {%- endblock pyerr %}
 
 {%- block traceback_line %}
 {{ line | ansi2html }}
 {%- endblock traceback_line %}
 
 {%- block data_text %}
 <pre>
 {{ output.text | ansi2html }}
 </pre>
 {%- endblock -%}
 
 {%- block data_javascript %}
 <script type="text/javascript">
 {{ output.javascript }}
 </script>
 {%- endblock -%}
 
 {%- block display_data scoped -%}
 <div class="box-flex1 output_subarea output_display_data">
 {{ super() }}
 </div>
 {%- endblock display_data -%}