From f797a7a39743f71569a9d9d98097285f040df2dd Mon Sep 17 00:00:00 2001 From: Shelley Vohr Date: Thu, 20 Jan 2022 10:24:10 +0100 Subject: [PATCH] refactor: differentiate rgb/rgba/hsl/hsla + docs --- docs/api/browser-view.md | 33 +++++++++++++++-------- docs/api/browser-window.md | 40 +++++++++++++++++++++------- shell/common/color_util.cc | 29 +++++++++++++++----- shell/common/color_util.h | 9 ++++--- spec-main/api-browser-window-spec.ts | 13 +++++++++ 5 files changed, 92 insertions(+), 32 deletions(-) diff --git a/docs/api/browser-view.md b/docs/api/browser-view.md index cb6264ed39af0..db1fbd757e0d6 100644 --- a/docs/api/browser-view.md +++ b/docs/api/browser-view.md @@ -70,18 +70,29 @@ The `bounds` of this BrowserView instance as `Object`. #### `view.setBackgroundColor(color)` _Experimental_ -* `color` string - Color in hex, RBG, HSL, or named CSS color format. The alpha channel is +* `color` string - Color in Hex, RGB, RGBA, HSL, HSLA or named CSS color format. The alpha channel is optional for the hex type. Examples of valid `color` values: -* [Hexadecimal Value Colors](https://www.w3schools.com/colors/colors_names.asp) - * `#ff00a3` - * `#80FFFFFF` -* [HSL Colors](https://www.w3schools.com/colors/colors_hsl.asp) - * `hsl(230, 100%, 50%)` -* [CSS Color Names](https://www.w3schools.com/colors/colors_names.asp) - * `blueviolet` - * `red` -* [RGB Colors](https://www.w3schools.com/colors/colors_rgb.asp) - * `rgb(255, 145, 145)` +* Hex + * #fff (shorthand RGB) + * #ffff (shorthand RGBA) + * #ffffff (RGB) + * #ffffffff (RGBA) +* RGB + * rgb\(([\d]+),\s*([\d]+),\s*([\d]+)\) + * e.g. rgb(255, 255, 255) +* RGBA + * rgba\(([\d]+),\s*([\d]+),\s*([\d]+),\s*([\d.]+)\) + * e.g. rgba(255, 255, 255, 1.0) +* HSL + * hsl\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%\) + * e.g. hsl(200, 20%, 50%) +* HSLA + * hsla\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\) + * e.g. hsla(200, 20%, 50%, 0.5) +* Color name + * Options are listed in [SkParseColor.cpp](https://source.chromium.org/chromium/chromium/src/+/main:third_party/skia/src/utils/SkParseColor.cpp;l=11-152;drc=eea4bf52cb0d55e2a39c828b017c80a5ee054148) + * Similar to CSS Color Module Level 3 keywords, but case-sensitive. + * e.g. `blueviolet` or `red` diff --git a/docs/api/browser-window.md b/docs/api/browser-window.md index da8bf586805ae..918faef2a08af 100644 --- a/docs/api/browser-window.md +++ b/docs/api/browser-window.md @@ -76,12 +76,7 @@ win.setBackgroundColor('#ff00a3') win.setBackgroundColor('blueviolet') ``` -For more information about these color types: - -* [Color Names](https://www.w3schools.com/colors/colors_names.asp) -* [Colors Hex](https://www.w3schools.com/colors/colors_hexadecimal.asp) -* [Colors RGB](https://www.w3schools.com/colors/colors_rgb.asp) -* [Colors HSL](https://www.w3schools.com/colors/colors_hsl.asp) +For more information about these color types see valid options in [win.setBackgroundColor](browser-window.md#winsetbackgroundcolorbackgroundcolor). ## Parent and child windows @@ -216,7 +211,7 @@ It creates a new `BrowserWindow` with native properties as set by the `options`. * `enableLargerThanScreen` boolean (optional) - Enable the window to be resized larger than screen. Only relevant for macOS, as other OSes allow larger-than-screen windows by default. Default is `false`. - * `backgroundColor` string (optional) - Window's background color as a hexadecimal value (`#ff00a3` or `#80FFFFFF`), HSL color value (`hsl(230, 100%, 50%)`), CSS color string (`blueviolet`), or RGB color value (`rgb(255, 145, 145)`). Alpha in #AARRGGBB format is supported if `transparent` is set to `true`). Default is `#FFF` (white). + * `backgroundColor` string (optional) - The window's background color in Hex, RGB, RGBA, HSL, HSLA or named CSS color format. Alpha in #RRGGBBAA format is supported if `transparent` is set to `true`. Default is `#FFF` (white). See [win.setBackgroundColor](browser-window.md#winsetbackgroundcolorbackgroundcolor) for more information. * `hasShadow` boolean (optional) - Whether window should have a shadow. Default is `true`. * `opacity` number (optional) - Set the initial opacity of the window, between 0.0 (fully transparent) and 1.0 (fully opaque). This is only implemented on Windows and macOS. @@ -1006,7 +1001,31 @@ APIs like `win.setSize`. #### `win.setBackgroundColor(backgroundColor)` -* `backgroundColor` string - Window's background color as a hexadecimal value (`#ff00a3` or `#80FFFFFF`), HSL color value (`hsl(230, 100%, 50%)`), CSS color string (`blueviolet`), or RGB color value (`rgb(255, 145, 145)`). Alpha in #AARRGGBB format is supported if `transparent` is set to `true`). Default is `#FFF` (white). +* `backgroundColor` string - Color in Hex, RGB, RGBA, HSL, HSLA or named CSS color format. The alpha channel is optional for the hex type. + +Examples of valid `backgroundColor` values: + +* Hex + * #fff (shorthand RGB) + * #ffff (shorthand RGBA) + * #ffffff (RGB) + * #ffffffff (RGBA) +* RGB + * rgb\(([\d]+),\s*([\d]+),\s*([\d]+)\) + * e.g. rgb(255, 255, 255) +* RGBA + * rgba\(([\d]+),\s*([\d]+),\s*([\d]+),\s*([\d.]+)\) + * e.g. rgba(255, 255, 255, 1.0) +* HSL + * hsl\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%\) + * e.g. hsl(200, 20%, 50%) +* HSLA + * hsla\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\) + * e.g. hsla(200, 20%, 50%, 0.5) +* Color name + * Options are listed in [SkParseColor.cpp](https://source.chromium.org/chromium/chromium/src/+/main:third_party/skia/src/utils/SkParseColor.cpp;l=11-152;drc=eea4bf52cb0d55e2a39c828b017c80a5ee054148) + * Similar to CSS Color Module Level 3 keywords, but case-sensitive. + * e.g. `blueviolet` or `red` Sets the background color of the window. See [Setting `backgroundColor`](#setting-the-backgroundcolor-property). @@ -1052,9 +1071,10 @@ Returns [`Rectangle`](structures/rectangle.md) - The `bounds` of the window as ` #### `win.getBackgroundColor([format])` -* `format` string (optional) - One of either `hex`, `rgb`, or `hsl`. +* `format` string (optional) - One of either `hex`, `rgb`, `rgba`, `hsl` or `hsla`. -Returns `string` - Gets the background color of the window as a [Hexadecimal value](https://www.w3schools.com/colors/colors_hexadecimal.asp), an [HSL value](https://www.w3schools.com/colors/colors_hsl.asp) or an [RGB value](https://www.w3schools.com/colors/colors_rgb.asp). Default is `hex` if `format` is not passed. +Returns `string` - Gets the background color in Hex, RBG, RBGA, HSL, or HSLA format. The alpha channel is +optional for the hex type. Default is `hex` if `format` is not passed. See [Setting `backgroundColor`](#setting-the-backgroundcolor-property) for more information. diff --git a/shell/common/color_util.cc b/shell/common/color_util.cc index 09128296e3cf5..d72c45f42d540 100644 --- a/shell/common/color_util.cc +++ b/shell/common/color_util.cc @@ -14,21 +14,36 @@ namespace electron { std::string SkColorToColorString(SkColor color, const std::string& format) { - if (format == "hsl") { + double alpha_double = (double)(SkColorGetA(color)) / 255.0; + double alpha = + alpha_double <= 0.0 ? 0.0 : alpha_double >= 1.0 ? 1.0 : alpha_double; + + if (format == "hsl" || format == "hsla") { color_utils::HSL hsl; - color_utils::SkColorToHSL(color, &hsl); + // Hue ranges between 0 - 360, and saturation/lightness both range from 0 - // 100%, so multiply appropriately to convert to correct int values. - return base::StringPrintf("hsl(%ld, %ld%%, %ld%%)", lround(hsl.h * 360), - lround(hsl.s * 100), lround(hsl.l * 100)); + color_utils::SkColorToHSL(color, &hsl); + if (format == "hsla") { + return base::StringPrintf("hsl(%ld, %ld%%, %ld%%, %.1f)", + lround(hsl.h * 360), lround(hsl.s * 100), + lround(hsl.l * 100), alpha); + } else { + return base::StringPrintf("hsl(%ld, %ld%%, %ld%%)", lround(hsl.h * 360), + lround(hsl.s * 100), lround(hsl.l * 100)); + } + } else if (format == "rgba") { + return base::StringPrintf("rgba(%d, %d, %d, %.1f)", SkColorGetR(color), + SkColorGetG(color), SkColorGetB(color), alpha); } else if (format == "rgb") { return base::StringPrintf("rgb(%d, %d, %d)", SkColorGetR(color), SkColorGetG(color), SkColorGetB(color)); + } else if (alpha != 1.0) { + return ToRGBAHex(color, true); } - // Return #AARRGGBB hex by default. - return base::StringPrintf("#%02X%02X%02X", SkColorGetR(color), - SkColorGetG(color), SkColorGetB(color)); + // Return hex by default. + return ToRGBHex(color); } SkColor ParseCSSColor(const std::string& color_string) { diff --git a/shell/common/color_util.h b/shell/common/color_util.h index bbd3ce6aa482f..95b5e2de6f055 100644 --- a/shell/common/color_util.h +++ b/shell/common/color_util.h @@ -11,16 +11,17 @@ namespace electron { -// Converts an SKColor to either Hex, HSL, or RGB color string. +// Converts an SKColor to either Hex, HSL, HSLA, RBG, or RGBA color string. std::string SkColorToColorString(SkColor color, const std::string& format); -// Parses a CSS-style color string from hex (3- or 6-digit), rgb(), rgba(), -// hsl() or hsla() formats. +// Parses a CSS-style color string from hex, rgb(), rgba(), +// hsl(), hsla(), or color name formats. SkColor ParseCSSColor(const std::string& color_string); -// Convert color to RGB hex value like "#ABCDEF" +// Convert color to RGB hex value like "#RRGGBB". std::string ToRGBHex(SkColor color); +// Convert color to RGBA hex value like "#RRGGBBAA". std::string ToRGBAHex(SkColor color, bool include_hash = true); } // namespace electron diff --git a/spec-main/api-browser-window-spec.ts b/spec-main/api-browser-window-spec.ts index 88f686c972c62..fcb5fa197799d 100644 --- a/spec-main/api-browser-window-spec.ts +++ b/spec-main/api-browser-window-spec.ts @@ -1058,12 +1058,25 @@ describe('BrowserWindow module', () => { w.setBackgroundColor('blueviolet'); expect(w.getBackgroundColor()).to.equal('#8A2BE2'); expect(w.getBackgroundColor('rgb')).to.equal('rgb(138, 43, 226)'); + expect(w.getBackgroundColor('rgba')).to.equal('rgba(138, 43, 226, 1.0)'); expect(w.getBackgroundColor('hsl')).to.equal('hsl(271, 76%, 53%)'); + expect(w.getBackgroundColor('hsla')).to.equal('hsl(271, 76%, 53%, 1.0)'); w.setBackgroundColor('rgb(255, 0, 185)'); expect(w.getBackgroundColor('hex')).to.equal('#FF00B9'); expect(w.getBackgroundColor('hsl')).to.equal('hsl(316, 100%, 50%)'); + w.setBackgroundColor('rgba(245, 40, 145, 0.8)'); + expect(w.getBackgroundColor('hex')).to.equal('#F52891CC'); + expect(w.getBackgroundColor('hsl')).to.equal('hsl(329, 91%, 56%)'); + expect(w.getBackgroundColor('hsla')).to.equal('hsl(329, 91%, 56%, 0.8)'); + + w.setBackgroundColor('#23853466'); + expect(w.getBackgroundColor('rgb')).to.equal('rgb(35, 133, 52)'); + expect(w.getBackgroundColor('rgba')).to.equal('rgba(35, 133, 52, 0.4)'); + expect(w.getBackgroundColor('hsl')).to.equal('hsl(130, 58%, 33%)'); + expect(w.getBackgroundColor('hsla')).to.equal('hsl(130, 58%, 33%, 0.4)'); + w.setBackgroundColor('hsl(155, 100%, 50%)'); expect(w.getBackgroundColor()).to.equal('#00FF95'); expect(w.getBackgroundColor('rgb')).to.equal('rgb(0, 255, 149)');