Fix to add a little explanatory text to colors in the web config interface

share/tools/web_config/index.html

@@ -124,6 +124,8 @@ body {
 	/* Make our border overlap the detail, even if we're unselected (so it doesn't jump when selected) */
 	position: relative;
 	left: 1px;
+	border-bottom-style: solid;
+	border-bottom-width: 0px;
 }
 
 .selected_master_elem {
@@ -143,9 +145,32 @@ body {
 .master_element_text {
     text-decoration: none;
     padding-bottom: 1px;
-    border-bottom: 1px solid white;
+    border-bottom-style: inherit;
+    border-bottom-color: inherit;
+    border-bottom-width: 1px;
 }
 
+.master_element_description {
+    text-decoration: none;
+    padding-top: 15px;
+    font-size: 10pt;
+    border-bottom-style: inherit;
+    border-bottom-color: inherit;
+    border-bottom-width: 1px;
+	display: none;
+}
+
+.selected_master_elem > .master_element_description {
+	display: inline;
+}
+
+/* We have a newline between the label and description; hide it initially, but show it when it's selected */
+.master_element > br { display: none; }
+.selected_master_elem > br { display: inherit; }
+
+/* Set this class to suppress the border bottom on master_element_texts with visible descriptions */
+.master_element_no_border { border-bottom-width: 0 }
+
 #colorpicker_term256 {
 	border: solid #444 1px;
 }
@@ -416,10 +441,12 @@ function switch_tab(new_tab) {
 		/* Keep track of whether this is the first element */
 		var first = true
 		run_get_request('/colors/', function(key_and_values){
+			/* Result is name, description, value */
 			var key = key_and_values[0]
-			var style = new Style(key_and_values[1])
+			var description = key_and_values[1]
+			var style = new Style(key_and_values[2])
 			style_map[key] = style
-			elem = create_master_element(key, style.color, '', select_color_master_element)
+			elem = create_master_element(key, description, style.color, '', select_color_master_element)
 			if (first) {
 				/* It's the first element, so select it, so something gets selected */
 				select_color_master_element(elem)
@@ -432,7 +459,7 @@ function switch_tab(new_tab) {
 		/* Keep track of whether this is the first element */
 		var first = true
 		run_get_request('/functions/', function(contents){
-			elem = create_master_element(contents, 'AAAAAA', '11pt', select_function_master_element)
+			elem = create_master_element(contents, false/* description */, 'AAAAAA', '11pt', select_function_master_element)
 			if (first) {
 				/* It's the first element, so select it, so something gets selected */
 				select_function_master_element(elem)
@@ -493,6 +520,7 @@ function reflect_style() {
 	/* Unselect everything */	
 	$('.colorpicker_cell_selected').removeClass('colorpicker_cell_selected')
 	$('.modifier_cell_selected').removeClass('modifier_cell_selected')
+	$('.master_element_no_border').removeClass('master_element_no_border')
 	
 	/* Now update the color picker with the current style (if we have one) */
 	style = current_style()
@@ -519,7 +547,16 @@ function reflect_style() {
 		
 		/* In the master list, ensure the color is visible against the dark background. If we're deselecting, use COLOR_NORMAL */
 		master_color = style.color ? master_color_for_color(style.color) : COLOR_NORMAL
-		$('.selected_master_elem').children('.master_element_text').css({'color': master_color, 'border-bottom-color': master_color})
+		//$('.selected_master_elem').children('.master_element_text').css({'color': master_color, 'border-bottom-color': master_color})
+		
+		var selected_elem = $('.selected_master_elem');
+		var desc_elems = selected_elem.children('.master_element_description')
+		selected_elem.css({'color': master_color})
+		selected_elem.children().css({'border-bottom-color': master_color})
+		if (desc_elems.length) {
+			/* We have a description element, so hide the bottom border of the master element */
+			selected_elem.children('.master_element_text').addClass('master_element_no_border')
+		}
 	}
 }
 
@@ -908,33 +945,51 @@ var show_labels = 0
 var COLOR_NORMAL = 'CCC'
 
 /* Adds a new element to master */
-function create_master_element(contents, color, font_size, click_handler) {
+function create_master_element(contents, description_or_false, color, font_size, click_handler) {
 	/* In the master list, ensure the color is visible against the dark background */
 	var master_color = color ? master_color_for_color(color) : COLOR_NORMAL
-	var style_str = 'color: #' + master_color + '; border-bottom: 1px solid #' + master_color + ' ;'
+	var master_style = 'color: #' + master_color
+	var master_children_style =  'border-bottom-color: #' + master_color
+	var text_style = ''
 	
 	if (font_size.length > 0) {
-		style_str += 'font-size: ' + font_size + ';'
+		text_style += 'font-size: ' + font_size + ';'
 	}
 	
 	if (contents.length >= 20) {
-		style_str += 'letter-spacing:-2px;'
+		text_style += 'letter-spacing:-2px;'
 	}
 	
     elem = $('<div/>', {
       class: 'master_element',
       id: 'master_' + contents,
+      style: master_style,
       click: function(){
       	click_handler(this)
       }
     }).append(
         $("<span/>", {
         class: 'master_element_text',
-        style: style_str,
+        style: text_style,
         text: contents,
         })
     )
     
+    /* Append description if we have one */
+    if (description_or_false) {
+    	/* Newline between label and description */
+    	elem.append($('<br/>'))
+    	elem.append(
+    		$('<span/>', {
+				class: 'master_element_description',
+				text: description_or_false
+			})
+    	)
+    }
+    
+    /* Update border color of the master element's children */
+    elem.children().css(master_children_style)
+    
     elem.appendTo('#master')
     return elem
 }

share/tools/web_config/webconfig.py

@@ -86,8 +86,11 @@ class FishVar:
 class FishConfigHTTPRequestHandler(SimpleHTTPServer.SimpleHTTPRequestHandler):
     
     def do_get_colors(self):
-		"Look for fish_color_*"
+        # Looks for fish_color_*.
+        # Returns an array of lists [color_name, color_description, color_value]
         result = []
+        
+        # Make sure we return at least these
         remaining = set(['normal',
                          'error',
                          'command',
@@ -104,17 +107,40 @@ class FishConfigHTTPRequestHandler(SimpleHTTPServer.SimpleHTTPRequestHandler):
                          'autosuggestion'
                          ])
     
+        # Here are our color descriptions
+        descriptions = {
+            'normal': 'Default text',
+            'command': 'Ordinary commands',
+            'quote': 'Text within quotes',
+            'redirection': 'Like | and >',
+            'end': 'Like ; and &',
+            'error': 'Potential errors',
+            'param': 'Command parameters',
+            'comment': 'Comments start with #',
+            'match': 'Matching parenthesis',
+            'search_match': 'History searching',
+            'history_current': 'Directory history',
+            'operator': 'Like * and ~',
+            'escape': 'Escapes like \\n',
+            'cwd': 'Current directory',
+			'cwd_root': 'cwd for root user',
+            'valid_path': 'Valid paths',
+            'autosuggestion': 'Suggested completion'
+        }
+    
         out, err = run_fish_cmd('set -L')
         for line in out.split('\n'):
             for match in re.finditer(r"^fish_color_(\S+) ?(.*)", line):
                 color_name, color_value = [x.strip() for x in match.group(1, 2)]
-				result.append([color_name, parse_color(color_value)])
+                color_desc = descriptions.get(color_name, '')
+                result.append([color_name, color_desc, parse_color(color_value)])
                 remaining.discard(color_name)
                 
         # Ensure that we have all the color names we know about, so that if the
         # user deletes one he can still set it again via the web interface
-		for x in remaining:
+        for color_name in remaining:
-			result.append([x, parse_color('')])
+            color_desc = descriptions.get(color_name, '')
+            result.append([color_name, color_desc, parse_color('')])
             
         # Sort our result (by their keys)
         result.sort()