Theme Editor: added "Show HSL/RGB colors" menu items to "View" menu to control display of color models in overlay color preview

flatlaf-theme-editor/src/main/java/com/formdev/flatlaf/themeeditor/FlatThemeEditorOverlay.java

@@ -42,6 +42,9 @@ class FlatThemeEditorOverlay
 {
 	private static final int COLOR_PREVIEW_WIDTH = 100;
 
+	static boolean showHSL = true;
+	static boolean showRGB;
+
 	private Font font;
 	private Font baseFont;
 
@@ -75,15 +78,22 @@ class FlatThemeEditorOverlay
 		}
 
 		FontMetrics fm = c.getFontMetrics( font );
-		int maxTextWidth = fm.stringWidth( "HSL 360 100 100" );
+		int maxTextWidth = 0;
+		if( showHSL )
+			maxTextWidth += fm.stringWidth( "HSL 360 100 100" );
+		if( showRGB )
+			maxTextWidth += fm.stringWidth( "#ffffff" );
+		if( showHSL && showRGB )
+			maxTextWidth += fm.stringWidth( "  " );
 		int textHeight = fm.getAscent() - fm.getLeading();
 
 		int width = c.getWidth();
 		int previewWidth = UIScale.scale( COLOR_PREVIEW_WIDTH );
 		int gap = UIScale.scale( 4 );
+		int textGap = (showHSL || showRGB) ? UIScale.scale( 6 ) : 0;
 
 		// check whether preview is outside of clip bounds
-		if( clipBounds.x + clipBounds.width < width - previewWidth - maxTextWidth - gap )
+		if( clipBounds.x + clipBounds.width < width - previewWidth - maxTextWidth - gap - textGap )
 			return;
 
 		g.setFont( font );
@@ -111,14 +121,33 @@ class FlatThemeEditorOverlay
 				}
 
 				// paint text
-				int textX = px - maxTextWidth;
+				if( showHSL || showRGB ) {
-				if( textX > r.x + gap) {
+					int textX = px - textGap - maxTextWidth;
-					float[] hsl = HSLColor.fromRGB( color );
+					if( textX > r.x + gap) {
-					String hslStr = String.format( "HSL %3d %2d %2d",
+						String colorStr = null;
-						Math.round( hsl[0] ), Math.round( hsl[1] ), Math.round( hsl[2] ) );
+						if( showHSL ) {
-					g.setColor( textArea.getForeground() );
+							float[] hsl = HSLColor.fromRGB( color );
-					FlatUIUtils.drawString( textArea, g, hslStr, textX,
+							colorStr = String.format( (alpha != 255) ? "HSLA %3d %3d %3d %3d" : "HSL %3d %3d %3d",
-						r.y + ((r.height - textHeight) / 2) + textHeight );
+								Math.round( hsl[0] ), Math.round( hsl[1] ), Math.round( hsl[2] ),
+								Math.round( alpha / 255f * 100 ) );
+						}
+						if( showRGB ) {
+							String rgbStr = String.format( (alpha != 255) ? "#%06x%02x" : "#%06x",
+								color.getRGB() & 0xffffff, alpha );
+							if( colorStr != null )
+								colorStr += "  " + rgbStr;
+							else
+								colorStr = rgbStr;
+						}
+
+						int textWidth = fm.stringWidth( colorStr );
+						if( textWidth > maxTextWidth )
+							textX -= (textWidth - maxTextWidth);
+
+						g.setColor( textArea.getForeground() );
+						FlatUIUtils.drawString( textArea, g, colorStr, textX,
+							r.y + ((r.height - textHeight) / 2) + textHeight );
+					}
 				}
 			} catch( BadLocationException ex ) {
 				// ignore

flatlaf-theme-editor/src/main/java/com/formdev/flatlaf/themeeditor/FlatThemeFileEditor.java

@@ -64,6 +64,8 @@ public class FlatThemeFileEditor
 	private static final String KEY_PREVIEW = "preview";
 	private static final String KEY_LAF = "laf";
 	private static final String KEY_FONT_SIZE_INCR = "fontSizeIncr";
+	private static final String KEY_HSL_COLORS = "hslColors";
+	private static final String KEY_RGB_COLORS = "rgbColors";
 
 	private File dir;
 	private Preferences state;
@@ -377,7 +379,7 @@ public class FlatThemeFileEditor
 		boolean show = previewMenuItem.isSelected();
 		for( FlatThemeEditorPane themeEditorPane : getThemeEditorPanes() )
 			themeEditorPane.showPreview( show );
-		state.putBoolean( KEY_PREVIEW, show );
+		putPrefsBoolean( state, KEY_PREVIEW, show, true );
 	}
 
 	private void lightLaf() {
@@ -430,6 +432,16 @@ public class FlatThemeFileEditor
 		return state.getInt( KEY_FONT_SIZE_INCR, 0 );
 	}
 
+	private void colorModelChanged() {
+		FlatThemeEditorOverlay.showHSL = showHSLColorsMenuItem.isSelected();
+		FlatThemeEditorOverlay.showRGB = showRGBColorsMenuItem.isSelected();
+
+		putPrefsBoolean( state, KEY_HSL_COLORS, FlatThemeEditorOverlay.showHSL, true );
+		putPrefsBoolean( state, KEY_RGB_COLORS, FlatThemeEditorOverlay.showRGB, false );
+
+		repaint();
+	}
+
 	private void restoreState() {
 		state = Preferences.userRoot().node( PREFS_ROOT_PATH );
 
@@ -438,7 +450,14 @@ public class FlatThemeFileEditor
 		SortedComboBoxModel<String> model = new SortedComboBoxModel<>( directories );
 		directoryField.setModel( model );
 
+		// restore overlay color models
+		FlatThemeEditorOverlay.showHSL = state.getBoolean( KEY_HSL_COLORS, true );
+		FlatThemeEditorOverlay.showRGB = state.getBoolean( KEY_RGB_COLORS, false );
+
+		// restore menu item selection
 		previewMenuItem.setSelected( state.getBoolean( KEY_PREVIEW, true ) );
+		showHSLColorsMenuItem.setSelected( FlatThemeEditorOverlay.showHSL );
+		showRGBColorsMenuItem.setSelected( FlatThemeEditorOverlay.showRGB );
 	}
 
 	private void saveState() {
@@ -501,6 +520,13 @@ public class FlatThemeFileEditor
 		state.put( KEY_WINDOW_BOUNDS, x + "," + y + ',' + width + ',' + height );
 	}
 
+	private static void putPrefsBoolean( Preferences prefs, String key, boolean value, boolean defaultValue ) {
+		if( value != defaultValue )
+			prefs.putBoolean( key, value );
+		else
+			prefs.remove( key );
+	}
+
 	private static void putPrefsString( Preferences prefs, String key, String value ) {
 		if( !StringUtils.isEmpty( value ) )
 			prefs.put( key, value );
@@ -543,6 +569,8 @@ public class FlatThemeFileEditor
 		incrFontSizeMenuItem = new JMenuItem();
 		decrFontSizeMenuItem = new JMenuItem();
 		resetFontSizeMenuItem = new JMenuItem();
+		showHSLColorsMenuItem = new JCheckBoxMenuItem();
+		showRGBColorsMenuItem = new JCheckBoxMenuItem();
 		windowMenu = new JMenu();
 		activateEditorMenuItem = new JMenuItem();
 		nextEditorMenuItem = new JMenuItem();
@@ -663,6 +691,17 @@ public class FlatThemeFileEditor
 				resetFontSizeMenuItem.setAccelerator(KeyStroke.getKeyStroke(KeyEvent.VK_0, Toolkit.getDefaultToolkit().getMenuShortcutKeyMask()));
 				resetFontSizeMenuItem.addActionListener(e -> resetFontSize());
 				viewMenu.add(resetFontSizeMenuItem);
+				viewMenu.addSeparator();
+
+				//---- showHSLColorsMenuItem ----
+				showHSLColorsMenuItem.setText("Show HSL colors");
+				showHSLColorsMenuItem.addActionListener(e -> colorModelChanged());
+				viewMenu.add(showHSLColorsMenuItem);
+
+				//---- showRGBColorsMenuItem ----
+				showRGBColorsMenuItem.setText("Show RGB colors (hex)");
+				showRGBColorsMenuItem.addActionListener(e -> colorModelChanged());
+				viewMenu.add(showRGBColorsMenuItem);
 			}
 			menuBar.add(viewMenu);
 
@@ -754,6 +793,8 @@ public class FlatThemeFileEditor
 	private JMenuItem incrFontSizeMenuItem;
 	private JMenuItem decrFontSizeMenuItem;
 	private JMenuItem resetFontSizeMenuItem;
+	private JCheckBoxMenuItem showHSLColorsMenuItem;
+	private JCheckBoxMenuItem showRGBColorsMenuItem;
 	private JMenu windowMenu;
 	private JMenuItem activateEditorMenuItem;
 	private JMenuItem nextEditorMenuItem;

flatlaf-theme-editor/src/main/java/com/formdev/flatlaf/themeeditor/FlatThemeFileEditor.jfd

@@ -146,6 +146,19 @@ new FormModel {
 						"accelerator": static javax.swing.KeyStroke getKeyStroke( 48, 4226, false )
 						addEvent( new FormEvent( "java.awt.event.ActionListener", "actionPerformed", "resetFontSize", false ) )
 					} )
+					add( new FormComponent( "javax.swing.JPopupMenu$Separator" ) {
+						name: "separator4"
+					} )
+					add( new FormComponent( "javax.swing.JCheckBoxMenuItem" ) {
+						name: "showHSLColorsMenuItem"
+						"text": "Show HSL colors"
+						addEvent( new FormEvent( "java.awt.event.ActionListener", "actionPerformed", "colorModelChanged", false ) )
+					} )
+					add( new FormComponent( "javax.swing.JCheckBoxMenuItem" ) {
+						name: "showRGBColorsMenuItem"
+						"text": "Show RGB colors (hex)"
+						addEvent( new FormEvent( "java.awt.event.ActionListener", "actionPerformed", "colorModelChanged", false ) )
+					} )
 				} )
 				add( new FormContainer( "javax.swing.JMenu", new FormLayoutManager( class javax.swing.JMenu ) ) {
 					name: "windowMenu"