make ui themes more discoverable

plugins/c9.ide.ace/ace.js

@@ -95,7 +95,7 @@ define(function(require, exports, module) {
         var isMinimal = options.minimal;
         var themeLoaded = {};
         var themeCounter = 100;
-        var lastTheme, grpSyntax, grpThemes;
+        var lastTheme, grpSyntax, grpThemes, grpUiThemes;
         
         var currentTheme;
         var skin = settings.get("user/general/@skin");
@@ -1225,40 +1225,60 @@ define(function(require, exports, module) {
             /**** Themes ****/
             
             grpThemes = new ui.group();
+            grpUiThemes = new ui.group();
             
             menus.addItemByPath("View/Themes/", new ui.menu({
                 "onprop.visible": function(e) {
-                    if (e.value)
+                    if (e.value) {
                         grpThemes.setValue(settings.get("user/ace/@theme"));
+                        grpUiThemes.setValue(settings.get("user/general/@skin"));
+                    }
+                    if (themeMenuShown)
+                        return;
+                    themeMenuShown = true;
+                    // Create Theme Menus
+                    menus.addItemByPath("View/Themes/Ui Themes/", null, 0, handle);
+                    menus.addItemByPath("View/Themes/~", new ui.divider(), themeCounter += 100, handle);
+                    layout.listThemes().forEach(function(theme) {
+                        menus.addItemByPath("View/Themes/Ui Themes/" + theme.caption, new ui.item({
+                            type: "radio",
+                            value: theme.name,
+                            group: grpUiThemes,
+                            onclick: function(e) {
+                                var themeName = e.currentTarget.value;
+                                settings.set("user/general/@skin", themeName);
+                            }
+                        }), 0, handle);
+                    });
+                    
+                    for (var name in themes) {
+                        if (themes[name] instanceof Array) {
+                            
+                            // Add Menu Item (for submenu)
+                            menus.addItemByPath("View/Themes/" + name + "/", null, themeCounter++, handle);
+                            
+                            themes[name].forEach(function (n) {
+                                // Add Menu Item
+                                var themeprop = Object.keys(n)[0];
+                                addThemeMenu(name + "/" + themeprop, n[themeprop], -1);
+                            });
+                        }
+                        else {
+                            // Add Menu Item
+                            addThemeMenu(name, null, themeCounter++);
+                        }
+                    }
                 }
             }), 350000, handle);
             
-            // Create Theme Menus
-            for (var name in themes) {
-                if (themes[name] instanceof Array) {
-                    
-                    // Add Menu Item (for submenu)
-                    menus.addItemByPath("View/Themes/" + name + "/", null, themeCounter++, handle);
-                    
-                    themes[name].forEach(function (n) {
-                        // Add Menu Item
-                        var themeprop = Object.keys(n)[0];
-                        addThemeMenu(name + "/" + themeprop, n[themeprop], -1);
-                    });
-                }
-                else {
-                    // Add Menu Item
-                    addThemeMenu(name, null, themeCounter++);
-                }
-            }
-            
             /**** Syntax ****/
             
             grpSyntax = new ui.group();
-            handle.addElement(grpNewline, grpSyntax, grpThemes);
+            handle.addElement(grpNewline, grpSyntax, grpThemes, grpUiThemes);
         }
         
         var preview;
+        var themeMenuShown;
         var setMenuThemeDelayed = lang.delayedCall(function() {
             setMenuTheme(preview, true);
         }, 150);
@@ -1266,6 +1286,8 @@ define(function(require, exports, module) {
             setTheme(path || settings.get("user/ace/@theme"), isPreview);
         }
         function addThemeMenu(name, path, index, plugin) {
+            if (!themeMenuShown) 
+                return;
             menus.addItemByPath("View/Themes/" + name, new ui.item({
                 type: "radio",
                 value: path || themes[name],

plugins/c9.ide.ace/themes.js

@@ -40,36 +40,42 @@ define(function(require, exports, module) {
             
             layout.addTheme({
                 group: "classic",
-                color: "#252525;", 
+                color: "#252525;",
                 name: "dark",
+                caption: "Classic Dark",
             });
             layout.addTheme({
                 group: "classic",
                 color: "#3f3f3f;",
                 name: "dark-gray",
+                caption: "Classic Dark Gray",
             });
             layout.addTheme({
                 group: "classic",
                 color: "#aaa;", 
                 name: "light-gray",
                 hidden: !options.lightClassic,
+                caption: "Classic Light Gray",
             });
             layout.addTheme({
                 group: "classic",
                 color: "#dcdbdb;", 
                 name: "light",
                 hidden: !options.lightClassic,
+                caption: "Classic Light",
             });
             layout.addTheme({
                 group: "flat",
                 color: "#252525;", 
                 name: "flat-dark",
-                hidden: !FLATDARK
+                hidden: !FLATDARK,
+                caption: "Flat Dark",
             });
             layout.addTheme({
                 group: "flat",
                 color: "#dcdbdb;", 
                 name: "flat-light",
+                caption: "Flat Light",
             });
         }
         

plugins/c9.ide.theme.jett/plugin.js

@@ -45,6 +45,7 @@ define(function(require, exports, module) {
                 group: "flat",
                 color: "rgb(41, 58, 86)",
                 name: "jett-dark",
+                caption: "Jett Dark",
                 defaults: {
                     output: {
                         backgroundColor: "#2b303b",