Simpler button coloring which does give 'armed' and 'pressed' feedback

.. because it only updates the -fx-base and keeps the other
-fx-..-border settings

Author: kasemir

app/display/representation-javafx/src/main/java/org/csstudio/display/builder/representation/javafx/JFXUtil.java

@@ -94,41 +94,32 @@ public static StringBuilder appendWebRGB(final StringBuilder buf, final WidgetCo
 
     /** Convert model color into CSS style string for shading tabs, buttons, etc
      *  @param color {@link WidgetColor}
-     *  @return style string of the form "-fx-color: ... -fx-outer-border: ... -fx-inner-border: ... -fx-background: ..."
+     *  @return style string of the form "-fx-base: ..;"
      */
     public static String shadedStyle(final WidgetColor color)
     {
         return shadedStyleCache.computeIfAbsent(color, col ->
         {
             // How to best set colors?
-            // Content Pane can be set in API, but Tab has no usable 'set color' API.
+            // Content Pane can be set in API, but Button and Tab have no usable 'set color' API.
             // TabPane has setBackground(), but in "floating" style that would be
             // the background behind the tabs, which is usually transparent.
-            // modena.css of JDK8 reveals a structure of sub-items which are shaded with gradients based
-            // on  -fx-color for the inactive tabs,
-            //     -fx-outer-border and -fx-inner-border for the, well, border,
-            // and -fx-background for the selected tab,
-            // so re-define those.
+            //
+            // Adjusting the style can break when the underlying style sheet changes,
+            // but since at least JDK8 that has been modena.css with little changes until JFX 18,
+            // which can be found in javafx-controls-18-linux.jar as
+            // com/sun/javafx/scene/control/skin/modena/modena.css
+            //
+            // Buttons use nested -fx-background-color entries
+            // -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color
+            // with associated ..-insets and ..-radius which are all based on -fx-base,
+            // so redefine that to adjust the overall color.
+            // The .button.armed state uses
+            //   -fx-pressed-base: derive(-fx-base,-6%);
+            // which we change into a more obvious variant.
             final String bg = webRGB(col);
-            return "-fx-color: derive(" + bg + ", 50%);" +
-                   "-fx-outer-border: derive(" + bg + ", -23%);" +
-                   "-fx-inner-border: linear-gradient(to bottom," +
-                   "ladder(" + bg + "," +
-                   "       derive(" + bg + ",30%) 0%," +
-                   "       derive(" + bg + ",20%) 40%," +
-                   "       derive(" + bg + ",25%) 60%," +
-                   "       derive(" + bg + ",55%) 80%," +
-                   "       derive(" + bg + ",55%) 90%," +
-                   "       derive(" + bg + ",75%) 100%" +
-                   ")," +
-                   "ladder(" + bg + "," +
-                   "       derive(" + bg + ",20%) 0%," +
-                   "       derive(" + bg + ",10%) 20%," +
-                   "       derive(" + bg + ",5%) 40%," +
-                   "       derive(" + bg + ",-2%) 60%," +
-                   "       derive(" + bg + ",-5%) 100%" +
-                   "));" +
-                   "-fx-background: " + bg + ";";
+            return "-fx-base: " + bg + "; " +
+                   "-fx-pressed-base: derive(-fx-base,-25%);";
         });
     }
 
@@ -217,7 +208,7 @@ public static Pos computePos(final HorizontalAlignment horiz, final VerticalAlig
     }
 
     /**returns double[] array for given line style scaled by line_width
-     * 
+     *
      * @param style - actual line style
      * @param line_width - actual line width
      * @return double[] with segment lengths

app/display/representation-javafx/src/main/java/org/csstudio/display/builder/representation/javafx/widgets/ActionButtonRepresentation.java

@@ -23,7 +23,6 @@
 import org.csstudio.display.builder.model.properties.OpenDisplayActionInfo;
 import org.csstudio.display.builder.model.properties.RotationStep;
 import org.csstudio.display.builder.model.properties.StringWidgetProperty;
-import org.csstudio.display.builder.model.properties.WidgetColor;
 import org.csstudio.display.builder.model.properties.WritePVActionInfo;
 import org.csstudio.display.builder.model.widgets.ActionButtonWidget;
 import org.csstudio.display.builder.representation.javafx.Cursors;
@@ -37,7 +36,6 @@
 import org.phoebus.ui.vtype.FormatOptionHandler;
 
 import javafx.application.Platform;
-import javafx.event.EventHandler;
 import javafx.geometry.Dimension2D;
 import javafx.scene.Cursor;
 import javafx.scene.control.Button;
@@ -78,7 +76,7 @@ public class ActionButtonRepresentation extends RegionBaseRepresentation<Pane, A
     private final DirtyFlag dirty_actionls = new DirtyFlag();
 
     private volatile ButtonBase base;
-    private volatile String background, pressed_background;
+    private volatile String background;
     private volatile Color foreground;
     private volatile String button_text;
     private volatile boolean enabled = true;
@@ -137,9 +135,6 @@ private void checkModifiers(final MouseEvent event)
             return;
         }
 
-        // Indicate that button is pressed
-        base.setStyle(pressed_background);
-
         // 'control' ('command' on Mac OS X)
         if (event.isShortcutDown())
             target_modifier = Optional.of(OpenDisplayActionInfo.Target.TAB);
@@ -216,13 +211,7 @@ private ButtonBase makeBaseButton()
         // Monitor keys that modify the OpenDisplayActionInfo.Target.
         // Use filter to capture event that's otherwise already handled.
         if (! toolkit.isEditMode())
-        {
-            // Pressed button will use pressed_background, check modifiers, then invoke actions
             result.addEventFilter(MouseEvent.MOUSE_PRESSED, this::checkModifiers);
-            // Restore normal background when released
-            final EventHandler<MouseEvent> restore = event ->  result.setStyle(background);
-            result.addEventFilter(MouseEvent.MOUSE_RELEASED, restore);
-        }
 
         // Need to attach TT to the specific button, not the common jfx_node Pane
         TooltipSupport.attach(result, model_widget.propTooltip());
@@ -439,22 +428,10 @@ private void updateColors()
     {
         foreground = JFXUtil.convert(model_widget.propForegroundColor().getValue());
         if (model_widget.propTransparent().getValue())
-        {
             // Set most colors to transparent, including the 'arrow' used by MenuButton
             background = "-fx-background: transparent; -fx-color: transparent; -fx-focus-color: rgba(3,158,211,0.1); -fx-mark-color: transparent; -fx-background-color: transparent;";
-            pressed_background = background;
-        }
         else
-        {
-            final WidgetColor norm = model_widget.propBackgroundColor().getValue();
-            // Darker color when pressed
-            final WidgetColor press = new WidgetColor(norm.getRed()/2,
-                                                      norm.getGreen()/2,
-                                                      norm.getBlue()/2,
-                                                      norm.getAlpha());
-            background = JFXUtil.shadedStyle(norm);
-            pressed_background = JFXUtil.shadedStyle(press);
-        }
+            background = JFXUtil.shadedStyle(model_widget.propBackgroundColor().getValue());
     }
 
     @Override