Tools: Remove the unnecessary 'FF' from generated colors (#9594)

* Tools: Remove the unecessary 'FF' from generated colors

When colors in most UI tools are 100% alpha the extra 'FF' is auto cut 
off for readability. e.g. #000000FF becomes #000000. Since introducing 
the new color pickers this has been the case on the UI side. However the 
code generator for gradients was inconsistent and would still add in the
unnecessary 'FF'. This fixes that and makes generated gradient code
tidier.

* Fix correct tests

* Fix

* [autofix.ci] apply automated fixes

* Fix

* Fix

* Fix

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: NigelBreslaw

api/node/__test__/js_value_conversion.spec.mts

@@ -300,7 +300,7 @@ test("get/set brush properties", (t) => {
 
     const black = instance!.getProperty("black");
 
-    t.is((black as private_api.SlintBrush).toString(), "#000000ff");
+    t.is((black as private_api.SlintBrush).toString(), "#000000");
 
     if (t.true(black instanceof private_api.SlintBrush)) {
         const blackSlintRgbaColor = (black as private_api.SlintBrush).color;

api/node/rust/types/brush.rs

@@ -159,7 +159,18 @@ impl SlintRgbaColor {
     /// Returns the color as string in hex representation e.g. `#000000` for black.
     #[napi]
     pub fn to_string(&self) -> String {
-        format!("#{:02x}{:02x}{:02x}{:02x}", self.red(), self.green(), self.blue(), self.alpha())
+        let alpha = self.alpha() as u8;
+        if alpha == 255 {
+            format!("#{:02x}{:02x}{:02x}", self.red() as u8, self.green() as u8, self.blue() as u8)
+        } else {
+            format!(
+                "#{:02x}{:02x}{:02x}{:02x}",
+                self.red() as u8,
+                self.green() as u8,
+                self.blue() as u8,
+                alpha
+            )
+        }
     }
 }
 

internal/interpreter/json.rs

@@ -212,7 +212,11 @@ pub fn value_to_json(value: &Value) -> Result<serde_json::Value, String> {
         let g = color.green();
         let b = color.blue();
 
-        format!("#{r:02x}{g:02x}{b:02x}{a:02x}")
+        if a == 255 {
+            format!("#{r:02x}{g:02x}{b:02x}")
+        } else {
+            format!("#{r:02x}{g:02x}{b:02x}{a:02x}")
+        }
     }
 
     fn gradient_to_string_helper<'a>(
@@ -492,7 +496,7 @@ fn test_to_json() {
         0xff, 0x0a, 0xb0, 0xcd,
     ))))
     .unwrap();
-    assert_eq!(v, "\"#0ab0cdff\"".to_string());
+    assert_eq!(v, "\"#0ab0cd\"".to_string());
 
     let v = value_to_json_string(&Value::Brush(Brush::LinearGradient(
         i_slint_core::graphics::LinearGradientBrush::new(
@@ -515,7 +519,7 @@ fn test_to_json() {
         ),
     )))
     .unwrap();
-    assert_eq!(&v, "\"@linear-gradient(42deg, #ff0000ff 0%, #00ff00ff 50%, #0000ffff 100%)\"");
+    assert_eq!(&v, "\"@linear-gradient(42deg, #ff0000 0%, #00ff00 50%, #0000ff 100%)\"");
 
     let v = value_to_json_string(&Value::Brush(Brush::RadialGradient(
         i_slint_core::graphics::RadialGradientBrush::new_circle(
@@ -537,5 +541,5 @@ fn test_to_json() {
         ),
     )))
     .unwrap();
-    assert_eq!(&v, "\"@radial-gradient(circle, #ff0000ff 0%, #00ff00ff 50%, #0000ffff 100%)\"");
+    assert_eq!(&v, "\"@radial-gradient(circle, #ff0000 0%, #00ff00 50%, #0000ff 100%)\"");
 }

tests/cases/types/brush.slint

@@ -60,10 +60,10 @@ assert_eq!(t.get_color_brush().color(), green);
 
 ```js
 var t = new slint.Test({});
-assert.equal(t.color_brush.toString(), "#0000ffff");
+assert.equal(t.color_brush.toString(), "#0000ff");
 assert(t.test);
 
-let green = "#00ff00ff";
+let green = "#00ff00";
 t.color_brush = "#00ff00"; // css-color-parser2 can't parse #rrggbbaa yet
 assert.equal(t.color_brush.toString(), green);
 

tests/cases/types/color.slint

@@ -180,23 +180,23 @@ assert(t.b1.toString() == t.b4.toString());
 assert(t.b1.toString() == t.b5.toString());
 assert(t.b1.toString() != t.r5.toString());
 
-let red = "#ff0000ff";
-let blue = "#0000ffff";
-let g = "#999999ff";
+let red = "#ff0000";
+let blue = "#0000ff";
+let g = "#999999";
 assert.equal(t.r1.toString(), red);
 assert.equal(t.b1.toString(), blue);
 assert.equal(t.g1.toString(), g);
-assert.equal(t.y1.toString(), "#ffff00ff");
+assert.equal(t.y1.toString(), "#ffff00");
 
 t.g1 = "blue";
 assert.equal(t.g1.toString(), t.b1.toString());
 t.g1 = "#f00";
 assert.equal(t.g1.toString(), t.r1.toString());
 
 assert.equal(t.c1.toString(), "#ff335588");
-assert.equal(t.c2.toString(), "#64172aff");
+assert.equal(t.c2.toString(), "#64172a");
 assert.equal(t.c3.toString(), "#637f28ce");
-assert.equal(t.i1.toString(), "#00ff00ff");
+assert.equal(t.i1.toString(), "#00ff00");
 
 assert(t.test_rgb);
 assert(t.test);

tools/lsp/preview/ui.rs

@@ -1793,8 +1793,8 @@ export component Tester {{
                 ..Default::default()
             },
             super::PropertyValue {
-                display_string: "#aabbccff".into(),
-                code: "\"#aabbccff\"".into(),
+                display_string: "#aabbcc".into(),
+                code: "\"#aabbcc\"".into(),
                 kind: super::PropertyValueKind::Color,
                 value_brush: slint::Brush::SolidColor(slint::Color::from_argb_u8(
                     0xff, 0xaa, 0xbb, 0xcc,

tools/lsp/preview/ui/brushes.rs

@@ -53,7 +53,11 @@ pub fn color_to_string(color: slint::Color) -> slint::SharedString {
     let g = color.green();
     let b = color.blue();
 
-    slint::format!("#{r:02x}{g:02x}{b:02x}{a:02x}")
+    if a == 255 {
+        slint::format!("#{r:02x}{g:02x}{b:02x}")
+    } else {
+        slint::format!("#{r:02x}{g:02x}{b:02x}{a:02x}")
+    }
 }
 
 fn color_to_short_string(color: slint::Color) -> String {