From d5f6aaa1f640d54a7dc6d70b8dd6d3fa09c6884e Mon Sep 17 00:00:00 2001
From: Min RK <benjaminrk@gmail.com>
Date: Tue, 9 Dec 2014 14:51:36 -0800
Subject: [PATCH] remove kernel selector from header

- add kernel name to indicator
- float kernel logo where indicator used to be
---
 .../html/static/notebook/js/kernelselector.js | 11 +---
 IPython/html/static/notebook/js/main.js       |  2 +-
 .../static/notebook/less/kernelselector.less  | 13 +----
 .../notebook/less/notificationarea.less       |  7 +++
 IPython/html/static/style/style.min.css       | 57 ++++---------------
 IPython/html/templates/notebook.html          | 14 ++---
 6 files changed, 28 insertions(+), 76 deletions(-)

diff --git a/IPython/html/static/notebook/js/kernelselector.js b/IPython/html/static/notebook/js/kernelselector.js
index ea035f75c..e4abda7a2 100644
--- a/IPython/html/static/notebook/js/kernelselector.js
+++ b/IPython/html/static/notebook/js/kernelselector.js
@@ -32,7 +32,6 @@ define([
     
     KernelSelector.prototype._got_kernelspecs = function(data) {
         this.kernelspecs = data.kernelspecs;
-        var menu = this.element.find("#kernel_selector");
         var change_kernel_submenu = $("#menu-change-kernel-submenu");
         var keys = Object.keys(data.kernelspecs).sort(function (a, b) {
             // sort by display_name
@@ -48,12 +47,6 @@ define([
         });
         for (var i = 0; i < keys.length; i++) {
             var ks = this.kernelspecs[keys[i]];
-            var ksentry = $("<li>").attr("id", "kernel-" +ks.name).append($('<a>')
-                .attr('href', '#')
-                .click($.proxy(this.change_kernel, this, ks.name))
-                .text(ks.display_name));
-            menu.append(ksentry);
-
             var ks_submenu_entry = $("<li>").attr("id", "kernel-submenu-"+ks.name).append($('<a>')
                 .attr('href', '#')
                 .click($.proxy(this.change_kernel, this, ks.name))
@@ -132,7 +125,7 @@ define([
         var that = this;
         this.events.on('spec_changed.Kernel', function(event, data) {
             that.current_selection = data.name;
-            that.element.find("#current_kernel_spec").find('.kernel_name').text(data.display_name);
+            $("#kernel_indicator").find('.kernel_indicator_name').text(data.display_name);
             that.element.find("#current_kernel_logo").attr("src", that.notebook.base_url+"kernelspecs/"+data.name+"/logo-64x64.png");
         });
 
@@ -146,7 +139,7 @@ define([
             }
         });
         
-        var logo_img = this.element.find("#current_kernel_logo")
+        var logo_img = this.element.find("#current_kernel_logo");
         logo_img.on("load", function() {
             logo_img.show();
         });
diff --git a/IPython/html/static/notebook/js/main.js b/IPython/html/static/notebook/js/main.js
index 8ac3a2bd6..16788285e 100644
--- a/IPython/html/static/notebook/js/main.js
+++ b/IPython/html/static/notebook/js/main.js
@@ -109,7 +109,7 @@ require([
         keyboard_manager: keyboard_manager});
     notification_area.init_notification_widgets();
     var kernel_selector = new kernelselector.KernelSelector(
-        '#kernel_selector_widget', notebook);
+        '#kernel_logo_widget', notebook);
 
     $('body').append('<div id="fonttest"><pre><span id="test1">x</span>'+
                      '<span id="test2" style="font-weight: bold;">x</span>'+
diff --git a/IPython/html/static/notebook/less/kernelselector.less b/IPython/html/static/notebook/less/kernelselector.less
index 44159c64c..50f7a74ba 100644
--- a/IPython/html/static/notebook/less/kernelselector.less
+++ b/IPython/html/static/notebook/less/kernelselector.less
@@ -1,16 +1,9 @@
-#kernel_selector_widget {
+#kernel_logo_widget {
     margin-right: 1em;
-    float: right;
-
-    & > button {
-        .btn-default();
-        
-        & > span.caret {
-            margin-top:0px;
-        }
-    }
+    .pull-right();
     
     & > img#current_kernel_logo {
+        .navbar-vertical-align(32px);
         width: 32px;
         height: 32px;
     }
diff --git a/IPython/html/static/notebook/less/notificationarea.less b/IPython/html/static/notebook/less/notificationarea.less
index 6aec1c112..2679d2455 100644
--- a/IPython/html/static/notebook/less/notificationarea.less
+++ b/IPython/html/static/notebook/less/notificationarea.less
@@ -15,6 +15,13 @@
 #kernel_indicator {
     .pull-right();
     .indicator_area();
+    width: auto;
+    border-left: 1px solid;
+    
+    .kernel_indicator_name {
+        padding-left: 5px;
+        padding-right: 5px;
+    }
 }
 
 #modal_indicator {
diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css
index 9ea181a0c..b246e01b7 100644
--- a/IPython/html/static/style/style.min.css
+++ b/IPython/html/static/style/style.min.css
@@ -9672,55 +9672,14 @@ select[multiple].celltoolbar select {
 .completions select option.context {
   color: #3071a9;
 }
-#kernel_selector_widget {
+#kernel_logo_widget {
   margin-right: 1em;
+  float: right !important;
   float: right;
 }
-#kernel_selector_widget > button {
-  color: #333333;
-  background-color: #ffffff;
-  border-color: #cccccc;
-}
-#kernel_selector_widget > button:hover,
-#kernel_selector_widget > button:focus,
-#kernel_selector_widget > button:active,
-#kernel_selector_widget > button.active,
-.open .dropdown-toggle#kernel_selector_widget > button {
-  color: #333333;
-  background-color: #ebebeb;
-  border-color: #adadad;
-}
-#kernel_selector_widget > button:active,
-#kernel_selector_widget > button.active,
-.open .dropdown-toggle#kernel_selector_widget > button {
-  background-image: none;
-}
-#kernel_selector_widget > button.disabled,
-#kernel_selector_widget > button[disabled],
-fieldset[disabled] #kernel_selector_widget > button,
-#kernel_selector_widget > button.disabled:hover,
-#kernel_selector_widget > button[disabled]:hover,
-fieldset[disabled] #kernel_selector_widget > button:hover,
-#kernel_selector_widget > button.disabled:focus,
-#kernel_selector_widget > button[disabled]:focus,
-fieldset[disabled] #kernel_selector_widget > button:focus,
-#kernel_selector_widget > button.disabled:active,
-#kernel_selector_widget > button[disabled]:active,
-fieldset[disabled] #kernel_selector_widget > button:active,
-#kernel_selector_widget > button.disabled.active,
-#kernel_selector_widget > button[disabled].active,
-fieldset[disabled] #kernel_selector_widget > button.active {
-  background-color: #ffffff;
-  border-color: #cccccc;
-}
-#kernel_selector_widget > button .badge {
-  color: #ffffff;
-  background-color: #333333;
-}
-#kernel_selector_widget > button > span.caret {
-  margin-top: 0px;
-}
-#kernel_selector_widget > img#current_kernel_logo {
+#kernel_logo_widget > img#current_kernel_logo {
+  margin-top: -1px;
+  margin-bottom: -1px;
   width: 32px;
   height: 32px;
 }
@@ -9816,6 +9775,12 @@ ul#help_menu li a i {
   width: 11px;
   z-index: 10;
   text-align: center;
+  width: auto;
+  border-left: 1px solid;
+}
+#kernel_indicator .kernel_indicator_name {
+  padding-left: 5px;
+  padding-right: 5px;
 }
 #modal_indicator {
   float: right !important;
diff --git a/IPython/html/templates/notebook.html b/IPython/html/templates/notebook.html
index bdfe6610c..af2f6d1e1 100644
--- a/IPython/html/templates/notebook.html
+++ b/IPython/html/templates/notebook.html
@@ -42,16 +42,9 @@ class="notebook_app"
     <span class="autosave_status"></span>
 </span>
 
-<div id="kernel_selector_widget" class="pull-right dropdown">
-  <!-- empty png in 26 bytes below-->
-  <img id="current_kernel_logo" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" alt='current kernel logo'>
-  <button class="dropdown-toggle btn btn-sm navbar-btn" data-toggle="dropdown" type='button' id="current_kernel_spec">
-    <span class='kernel_name'>Kernel</span>
-    <span class="caret"></span> 
-  </button>
-  <ul id="kernel_selector" class="dropdown-menu">
-  </ul>
-</div>
+<span id="kernel_logo_widget">
+  <img id="current_kernel_logo"/>
+</span>
 
 {% endblock headercontainer %}
 
@@ -65,6 +58,7 @@ class="notebook_app"
               <span class="navbar-text">Menu</span>
             </button>
             <p id="kernel_indicator" class="navbar-text">
+              <span class="kernel_indicator_name">Kernel</span>
               <i id="kernel_indicator_icon"></i>
             </p>
             <p id="modal_indicator" class="navbar-text">