Provide hints in theme and language dropdowns

customize.dist/translations/messages.fr.js

@@ -133,6 +133,11 @@ define(function () {
     out.slideOptionsTitle = "Personnaliser la présentation";
     out.slideOptionsButton = "Enregistrer (Entrée)";
 
+    out.languageButton = "Langage";
+    out.languageButtonTitle = "Sélectionner le langage à utiliser pour la coloration syntaxique";
+    out.themeButton = "Thème";
+    out.themeButtonTitle = "Sélectionner le thème de couleurs à utiliser pour les éditeurs de code et de présentations";
+
     out.editShare = "Lien d'édition";
     out.editShareTitle = "Copier le lien d'édition dans le presse-papiers";
     out.editOpen = "Éditer dans un nouvel onglet";

customize.dist/translations/messages.js

@@ -135,6 +135,11 @@ define(function () {
     out.slideOptionsTitle = "Customize your slides";
     out.slideOptionsButton = "Save (enter)";
 
+    out.languageButton = "Language";
+    out.languageButtonTitle = "Select the language to use for the syntax highlighting";
+    out.themeButton = "Theme";
+    out.themeButtonTitle = "Select the color theme to use for the code and slide editors";
+
     out.editShare = "Editing link";
     out.editShareTitle = "Copy the editing link to clipboard";
     out.editOpen = "Open editing link in a new tab";

www/common/common-codemirror.js

@@ -48,15 +48,11 @@ define([
 
         var setMode = exp.setMode = function (mode, cb) {
             exp.highlightMode = mode;
-            if (mode === 'text') {
-                editor.setOption('mode', 'text');
-                if (cb) { cb('text'); }
-                return;
-            }
-            CMeditor.autoLoadMode(editor, mode);
+            if (mode !== "text") { CMeditor.autoLoadMode(editor, mode); }
             editor.setOption('mode', mode);
             if (exp.$language) {
-                var name = exp.$language.find('a[data-value="' + mode + '"]').text() || 'Mode';
+                var name = exp.$language.find('a[data-value="' + mode + '"]').text() || undefined;
+                name = name ? Messages.languageButton + ' ('+name+')' : Messages.languageButton;
                 exp.$language.setValue(name);
             }
             if(cb) { cb(mode); }
@@ -88,7 +84,9 @@ define([
                     editor.setOption('theme', theme);
                 }
                 if ($select) {
-                    $select.setValue(theme || 'Theme');
+                    var name = theme || undefined;
+                    name = name ? Messages.themeButton + ' ('+theme+')' : Messages.themeButton;
+                    $select.setValue(name);
                 }
             };
         }());
@@ -152,6 +150,7 @@ define([
                 isSelect: true,
             };
             var $block = exp.$language = Cryptpad.createDropdown(dropdownConfig);
+            $block.find('button').attr('title', Messages.languageButtonTitle);
             $block.find('a').click(function () {
                 setMode($(this).attr('data-value'), onModeChanged);
                 onLocal();
@@ -185,6 +184,7 @@ define([
                 initialValue: lastTheme
             };
             var $block = exp.$theme = Cryptpad.createDropdown(dropdownConfig);
+            $block.find('button').attr('title', Messages.themeButtonTitle);
 
             setTheme(lastTheme, $block);