add Mode menu to editor

IPython/html/static/edit/js/editor.js

@@ -21,7 +21,7 @@ function($,
     CodeMirror
 ) {
     "use strict";
-    
+
     var Editor = function(selector, options) {
         var that = this;
         this.selector = selector;
@@ -74,11 +74,21 @@ function($,
                 // which we don't want.
                 cm.clearHistory();
 
-                // Find and load the highlighting mode
-                utils.requireCodeMirrorMode(model.mimetype, function(spec) {
-                    var mode = CodeMirror.getMode({}, spec);
-                    cm.setOption('mode', mode);
-                });
+                // Find and load the highlighting mode,
+                // first by mime-type, then by file extension
+                var modeinfo = CodeMirror.findModeByMIME(model.mimetype);
+                if (modeinfo.mode === "null") {
+                    // find by mime failed, use find by ext
+                    var ext_idx = model.name.lastIndexOf('.');
+                    
+                    if (ext_idx > 0) {
+                        // CodeMirror.findModeByExtension wants extension without '.'
+                        modeinfo = CodeMirror.findModeByExtension(model.name.slice(ext_idx + 1));
+                    }
+                }
+                if (modeinfo) {
+                    that.set_codemirror_mode(modeinfo);
+                }
                 that.save_enabled = true;
                 that.generation = cm.changeGeneration();
                 that.events.trigger("file_loaded.Editor", model);
@@ -91,10 +101,18 @@ function($,
         );
     };
     
+    Editor.prototype.set_codemirror_mode = function (modeinfo) {
+        /** set the codemirror mode from a modeinfo struct */
+        var that = this;
+        utils.requireCodeMirrorMode(modeinfo, function () {
+            that.codemirror.setOption('mode', modeinfo.mode);
+            that.events.trigger("mode_changed.Editor", modeinfo);
+        });
+    };
+    
     Editor.prototype.get_filename = function () {
         return utils.url_path_split(this.file_path)[1];
-
-    }
+    };
 
     Editor.prototype.rename = function (new_name) {
         /** rename the file */

IPython/html/static/edit/js/menubar.js

@@ -2,12 +2,14 @@
 // Distributed under the terms of the Modified BSD License.
 
 define([
-    'base/js/namespace',
     'jquery',
+    'base/js/namespace',
     'base/js/utils',
     'base/js/dialog',
+    'codemirror/lib/codemirror',
+    'codemirror/mode/meta',
     'bootstrap',
-], function(IPython, $, utils, dialog, bootstrap) {
+], function($, IPython, utils, dialog, CodeMirror) {
     "use strict";
     
     var MenuBar = function (selector, options) {
@@ -37,6 +39,7 @@ define([
             this.element = $(selector);
             this.bind_events();
         }
+        this._load_mode_menu();
         Object.seal(this);
     };
 
@@ -120,6 +123,36 @@ define([
             that.element.find(".selected-keymap").removeClass("selected-keymap");
             that.element.find("#menu-keymap-" + keyMap).addClass("selected-keymap");
         });
+        
+        this.events.on("mode_changed.Editor", function (evt, modeinfo) {
+            that.element.find("#current-mode")
+                .text(modeinfo.name)
+                .attr(
+                    'title',
+                    "The current highlighting mode is " + modeinfo.name
+                );
+        });
+    };
+    
+    MenuBar.prototype._load_mode_menu = function () {
+        var list = this.element.find("#mode-menu");
+        var editor = this.editor;
+        function make_set_mode(info) {
+            return function () {
+                editor.set_codemirror_mode(info);
+            };
+        }
+        for (var i = 0; i < CodeMirror.modeInfo.length; i++) {
+            var info = CodeMirror.modeInfo[i];
+            list.append($("<li>").append(
+                $("<a>").attr("href", "#")
+                    .text(info.name)
+                    .click(make_set_mode(info))
+                    .attr('title',
+                        "Set highlighting mode to " + info.name
+                    )
+            ));
+        }
     };
 
     return {'MenuBar': MenuBar};

IPython/html/static/edit/less/menubar.less

@@ -6,3 +6,9 @@
     content: @fa-var-check;
   }
 }
+
+#mode-menu {
+  // truncate mode-menu, so it doesn't get longer than the screen
+  overflow: auto;
+  max-height: 20em;
+}

IPython/html/static/style/style.min.css

@@ -8125,6 +8125,10 @@ ul#new-notebook-menu {
 .selected-keymap i.fa:before {
   content: "\f00c";
 }
+#mode-menu {
+  overflow: auto;
+  max-height: 20em;
+}
 #texteditor-container {
   border-bottom: 1px solid #ccc;
 }

IPython/html/templates/edit.html

@@ -63,7 +63,12 @@ data-file-path="{{file_path}}"
                 <li id="menu-line-numbers"><a href="#">Hide Line Numbers</a></li>
               </ul>
             </li>
+            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Mode</a>
+              <ul id="mode-menu" class="dropdown-menu">
+              </ul>
+            </li>
           </ul>
+          <p id="current-mode" class="navbar-text navbar-right">current mode</p>
         </div>
       </div>
     </div>