Add the format picker to the nbagg save toolbar

Author: blink1073

lib/matplotlib/backends/web_backend/mpl.js

@@ -472,12 +472,8 @@ mpl.figure.prototype.key_event = function(event, name) {
 
 mpl.figure.prototype.toolbar_button_onclick = function(name) {
     if (name == 'download') {
-        if (this.format_dropdown) {
-            var format_dropdown = this.format_dropdown;
-            var format = format_dropdown.options[format_dropdown.selectedIndex].value;
-        } else {
-            format = 'png';
-        }
+        var format_dropdown = this.format_dropdown;
+        var format = format_dropdown.options[format_dropdown.selectedIndex].value;
         this.ondownload(this, format);
     } else {
         this.send_message("toolbar_button", {name: name});

lib/matplotlib/backends/web_backend/nbagg_mpl.js

@@ -112,6 +112,21 @@ mpl.figure.prototype._init_toolbar = function() {
         nav_element.append(button);
     }
 
+    var fmt_picker_span = $('<span/>');
+
+    var fmt_picker = $('<select width="75" style="width: 75px; margin-top: 10px"</select>');
+    fmt_picker.addClass('mpl-toolbar-optionui-widget ui-widget-content');
+    fmt_picker_span.append(fmt_picker);
+    nav_element.append(fmt_picker_span);
+    this.format_dropdown = fmt_picker[0];
+
+    for (var ind in mpl.extensions) {
+        var fmt = mpl.extensions[ind];
+        var option = $(
+            '<option/>', {selected: fmt === mpl.default_extension}).html(fmt);
+        fmt_picker.append(option)
+    }
+
     // Add the status bar.
     var status_bar = $('<span class="mpl-message" style="text-align:right; float: right;"/>');
     nav_element.append(status_bar);