This create the ability to detach the pager

When detached, the pager is collapsed and it's content is send into it's
own window/tab depending of the browser configuration.

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

@@ -112,6 +112,10 @@ div#pager_splitter {
     height: 8px;
 }
 
+#pager_container {
+    position : relative;
+}
+
 div#pager {
     padding: 15px;
     overflow: auto;

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

@@ -15,6 +15,7 @@ var IPython = (function (IPython) {
 
     var Pager = function (pager_selector, pager_splitter_selector) {
         this.pager_element = $(pager_selector);
+        this.pager_button_area = $('#pager_button_area');
         var that = this;
         this.percentage_height = 0.40;
         this.pager_splitter_element = $(pager_splitter_selector)
@@ -39,9 +40,23 @@ var IPython = (function (IPython) {
             });
         this.expanded = false;
         this.style();
+        this.create_button_area();
         this.bind_events();
     };
 
+    Pager.prototype.create_button_area = function(){
+        var that = this;
+        this.pager_button_area.append(
+            $('<a>').attr('role', "button")
+                    .addClass('ui-button')
+                    .click(function(){that.detach()})
+                    .attr('style','position: absolute; right: 10px;')
+                    .append(
+                        $('<span>').addClass("ui-icon ui-icon-arrowstop-l-n")
+                    )
+        )
+    };
+
     Pager.prototype.style = function () {
         this.pager_splitter_element.addClass('border-box-sizing ui-widget ui-state-default');
         this.pager_element.addClass('border-box-sizing ui-widget');
@@ -114,6 +129,23 @@ var IPython = (function (IPython) {
         this.pager_element.empty();
     };
 
+    Pager.prototype.detach = function(){
+        var w = window.open("","_blank")
+        $(w.document.head)
+        .append(
+                $('<link>')
+                .attr('rel',"stylesheet")
+                .attr('href',"/static/css/notebook.css")
+                .attr('type',"text/css")
+        );
+        var pager_body = $(w.document.body)
+            pager_body.attr('style','overflow:scroll');
+
+        pager_body.append(this.pager_element.children())
+        w.document.close();
+        this.collapse();
+
+    }
 
     Pager.prototype.append_text = function (text) {
         var toinsert = $("<div/>").addClass("output_area output_stream");

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

@@ -199,8 +199,12 @@ data-notebook-id={{notebook_id}}
     <div id="notebook_panel">
         <div id="notebook"></div>
         <div id="pager_splitter"></div>
+        <div id="pager_container">
+            <div id='pager_button_area'>
+            </div>
             <div id="pager"></div>
         </div>
+    </div>
 
 </div>
 <div id='tooltip' class='tooltip ui-corner-all' style='display:none'></div>