Skip to content

Commit

Permalink
refactor: differentiate rgb/rgba/hsl/hsla + docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@codebytere
codebytere committed Jan 20, 2022
1 parent 7c84127 commit c2dcb17
Show file tree
Hide file tree
Showing 5 changed files with 91 additions and 31 deletions.
33 changes: 22 additions & 11 deletions docs/api/browser-view.md
View file
Expand Up @@ -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`
40 changes: 30 additions & 10 deletions docs/api/browser-window.md
View file
Expand Up @@ -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

Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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).

Expand Down Expand Up @@ -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.

Expand Down
29 changes: 22 additions & 7 deletions shell/common/color_util.cc
View file
Expand Up @@ -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) {
Expand Down
7 changes: 4 additions & 3 deletions shell/common/color_util.h
View file
Expand Up @@ -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(),
// Parses a CSS-style color string from hex, rgb(), rgba(),
// hsl() or hsla() 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
Expand Down
13 changes: 13 additions & 0 deletions spec-main/api-browser-window-spec.ts
View file
Expand Up @@ -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)');
Expand Down

0 comments on commit c2dcb17

Please sign in to comment.