X Tutup
Skip to content

Commit cee4e37

Browse files
trop[bot]codebyterenornagon
authored
feat: support more color formats for backgroundColor (electron#33364)
* feat: support more color formats for backgroundColor * feat: support more formats in getBackgroundColor * chore: remove redundant includes * refactor: differentiate rgb/rgba/hsl/hsla + docs * chore: address review cleanup comments * refactor: simple getBackgroundColor * chore: fix iwyu * fix: typescript arg * Update docs/api/browser-view.md Co-authored-by: Jeremy Rose <jeremya@chromium.org> * chore: address comments Co-authored-by: Shelley Vohr <shelley.vohr@gmail.com> Co-authored-by: Jeremy Rose <jeremya@chromium.org>
1 parent e9fa834 commit cee4e37

13 files changed

+144
-55
lines changed

‎docs/api/browser-view.md‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,5 +70,31 @@ The `bounds` of this BrowserView instance as `Object`.
7070

7171
#### `view.setBackgroundColor(color)` _Experimental_
7272

73-
* `color` string - Color in `#aarrggbb` or `#argb` form. The alpha channel is
74-
optional.
73+
* `color` string - Color in Hex, RGB, ARGB, HSL, HSLA or named CSS color format. The alpha channel is
74+
optional for the hex type.
75+
76+
Examples of valid `color` values:
77+
78+
* Hex
79+
* #fff (RGB)
80+
* #ffff (ARGB)
81+
* #ffffff (RRGGBB)
82+
* #ffffffff (AARRGGBB)
83+
* RGB
84+
* rgb\(([\d]+),\s*([\d]+),\s*([\d]+)\)
85+
* e.g. rgb(255, 255, 255)
86+
* RGBA
87+
* rgba\(([\d]+),\s*([\d]+),\s*([\d]+),\s*([\d.]+)\)
88+
* e.g. rgba(255, 255, 255, 1.0)
89+
* HSL
90+
* hsl\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%\)
91+
* e.g. hsl(200, 20%, 50%)
92+
* HSLA
93+
* hsla\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)
94+
* e.g. hsla(200, 20%, 50%, 0.5)
95+
* Color name
96+
* 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)
97+
* Similar to CSS Color Module Level 3 keywords, but case-sensitive.
98+
* e.g. `blueviolet` or `red`
99+
100+
**Note:** Hex format with alpha takes `AARRGGBB` or `ARGB`, _not_ `RRGGBBA` or `RGA`.

‎docs/api/browser-window.md‎

Lines changed: 45 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,18 @@ win.loadURL('https://github.com')
6666
Note that even for apps that use `ready-to-show` event, it is still recommended
6767
to set `backgroundColor` to make app feel more native.
6868

69+
Some examples of valid `backgroundColor` values include:
70+
71+
```js
72+
const win = new BrowserWindow()
73+
win.setBackgroundColor('hsl(230, 100%, 50%)')
74+
win.setBackgroundColor('rgb(255, 145, 145)')
75+
win.setBackgroundColor('#ff00a3')
76+
win.setBackgroundColor('blueviolet')
77+
```
78+
79+
For more information about these color types see valid options in [win.setBackgroundColor](browser-window.md#winsetbackgroundcolorbackgroundcolor).
80+
6981
## Parent and child windows
7082

7183
By using `parent` option, you can create child windows:
@@ -199,9 +211,7 @@ It creates a new `BrowserWindow` with native properties as set by the `options`.
199211
* `enableLargerThanScreen` boolean (optional) - Enable the window to be resized larger
200212
than screen. Only relevant for macOS, as other OSes allow
201213
larger-than-screen windows by default. Default is `false`.
202-
* `backgroundColor` string (optional) - Window's background color as a hexadecimal value,
203-
like `#66CD00` or `#FFF` or `#80FFFFFF` (alpha in #AARRGGBB format is supported if
204-
`transparent` is set to `true`). Default is `#FFF` (white).
214+
* `backgroundColor` string (optional) - The window's background color in Hex, RGB, RGBA, HSL, HSLA or named CSS color format. Alpha in #AARRGGBB format is supported if `transparent` is set to `true`. Default is `#FFF` (white). See [win.setBackgroundColor](browser-window.md#winsetbackgroundcolorbackgroundcolor) for more information.
205215
* `hasShadow` boolean (optional) - Whether window should have a shadow. Default is `true`.
206216
* `opacity` number (optional) - Set the initial opacity of the window, between 0.0 (fully
207217
transparent) and 1.0 (fully opaque). This is only implemented on Windows and macOS.
@@ -992,12 +1002,33 @@ APIs like `win.setSize`.
9921002

9931003
#### `win.setBackgroundColor(backgroundColor)`
9941004

995-
* `backgroundColor` string - Window's background color as a hexadecimal value,
996-
like `#66CD00` or `#FFF` or `#80FFFFFF` (alpha is supported if `transparent`
997-
is `true`). Default is `#FFF` (white).
998-
999-
Sets the background color of the window. See [Setting
1000-
`backgroundColor`](#setting-the-backgroundcolor-property).
1005+
* `backgroundColor` string - Color in Hex, RGB, RGBA, HSL, HSLA or named CSS color format. The alpha channel is optional for the hex type.
1006+
1007+
Examples of valid `backgroundColor` values:
1008+
1009+
* Hex
1010+
* #fff (shorthand RGB)
1011+
* #ffff (shorthand ARGB)
1012+
* #ffffff (RGB)
1013+
* #ffffffff (ARGB)
1014+
* RGB
1015+
* rgb\(([\d]+),\s*([\d]+),\s*([\d]+)\)
1016+
* e.g. rgb(255, 255, 255)
1017+
* RGBA
1018+
* rgba\(([\d]+),\s*([\d]+),\s*([\d]+),\s*([\d.]+)\)
1019+
* e.g. rgba(255, 255, 255, 1.0)
1020+
* HSL
1021+
* hsl\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%\)
1022+
* e.g. hsl(200, 20%, 50%)
1023+
* HSLA
1024+
* hsla\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)
1025+
* e.g. hsla(200, 20%, 50%, 0.5)
1026+
* Color name
1027+
* 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)
1028+
* Similar to CSS Color Module Level 3 keywords, but case-sensitive.
1029+
* e.g. `blueviolet` or `red`
1030+
1031+
Sets the background color of the window. See [Setting `backgroundColor`](#setting-the-backgroundcolor-property).
10011032

10021033
#### `win.previewFile(path[, displayName])` _macOS_
10031034

@@ -1041,8 +1072,11 @@ Returns [`Rectangle`](structures/rectangle.md) - The `bounds` of the window as `
10411072

10421073
#### `win.getBackgroundColor()`
10431074

1044-
Returns `string` - Gets the background color of the window. See [Setting
1045-
`backgroundColor`](#setting-the-backgroundcolor-property).
1075+
Returns `string` - Gets the background color of the window in Hex (`#RRGGBB`) format.
1076+
1077+
See [Setting `backgroundColor`](#setting-the-backgroundcolor-property).
1078+
1079+
**Note:** The alpha value is _not_ returned alongside the red, green, and blue values.
10461080

10471081
#### `win.setContentBounds(bounds[, animate])`
10481082

‎shell/browser/api/electron_api_base_window.cc‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -643,11 +643,11 @@ bool BaseWindow::IsTabletMode() const {
643643
}
644644

645645
void BaseWindow::SetBackgroundColor(const std::string& color_name) {
646-
SkColor color = ParseHexColor(color_name);
646+
SkColor color = ParseCSSColor(color_name);
647647
window_->SetBackgroundColor(color);
648648
}
649649

650-
std::string BaseWindow::GetBackgroundColor() {
650+
std::string BaseWindow::GetBackgroundColor(gin_helper::Arguments* args) {
651651
return ToRGBHex(window_->GetBackgroundColor());
652652
}
653653

‎shell/browser/api/electron_api_base_window.h‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ class BaseWindow : public gin_helper::TrackableObject<BaseWindow>,
159159
bool IsKiosk();
160160
bool IsTabletMode() const;
161161
virtual void SetBackgroundColor(const std::string& color_name);
162-
std::string GetBackgroundColor();
162+
std::string GetBackgroundColor(gin_helper::Arguments* args);
163163
void SetHasShadow(bool has_shadow);
164164
bool HasShadow();
165165
void SetOpacity(const double opacity);

‎shell/browser/api/electron_api_browser_view.cc‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -154,11 +154,11 @@ gfx::Rect BrowserView::GetBounds() {
154154
}
155155

156156
void BrowserView::SetBackgroundColor(const std::string& color_name) {
157-
view_->SetBackgroundColor(ParseHexColor(color_name));
157+
view_->SetBackgroundColor(ParseCSSColor(color_name));
158158

159159
if (web_contents()) {
160160
auto* wc = web_contents()->web_contents();
161-
wc->SetPageBaseBackgroundColor(ParseHexColor(color_name));
161+
wc->SetPageBaseBackgroundColor(ParseCSSColor(color_name));
162162
}
163163
}
164164

‎shell/browser/api/electron_api_browser_window.cc‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -370,7 +370,7 @@ void BrowserWindow::Blur() {
370370

371371
void BrowserWindow::SetBackgroundColor(const std::string& color_name) {
372372
BaseWindow::SetBackgroundColor(color_name);
373-
SkColor color = ParseHexColor(color_name);
373+
SkColor color = ParseCSSColor(color_name);
374374
web_contents()->SetPageBaseBackgroundColor(color);
375375
auto* rwhv = web_contents()->GetRenderWidgetHostView();
376376
if (rwhv) {
@@ -384,7 +384,7 @@ void BrowserWindow::SetBackgroundColor(const std::string& color_name) {
384384
auto* web_preferences =
385385
WebContentsPreferences::From(api_web_contents_->web_contents());
386386
if (web_preferences) {
387-
web_preferences->SetBackgroundColor(ParseHexColor(color_name));
387+
web_preferences->SetBackgroundColor(ParseCSSColor(color_name));
388388
}
389389
}
390390
}

‎shell/browser/api/electron_api_web_contents.cc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -773,7 +773,7 @@ WebContents::WebContents(v8::Isolate* isolate,
773773
// and we then need to pull it back out and check it here.
774774
std::string background_color;
775775
options.GetHidden(options::kBackgroundColor, &background_color);
776-
bool transparent = ParseHexColor(background_color) == SK_ColorTRANSPARENT;
776+
bool transparent = ParseCSSColor(background_color) == SK_ColorTRANSPARENT;
777777

778778
content::WebContents::CreateParams params(session->browser_context());
779779
auto* view = new OffScreenWebContentsView(

‎shell/browser/native_window.cc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -241,7 +241,7 @@ void NativeWindow::InitFromOptions(const gin_helper::Dictionary& options) {
241241
#endif
242242
std::string color;
243243
if (options.Get(options::kBackgroundColor, &color)) {
244-
SetBackgroundColor(ParseHexColor(color));
244+
SetBackgroundColor(ParseCSSColor(color));
245245
} else if (!transparent()) {
246246
// For normal window, use white as default background.
247247
SetBackgroundColor(SK_ColorWHITE);

‎shell/browser/ui/cocoa/electron_touch_bar.mm‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -339,7 +339,7 @@ - (bool)hasItemWithID:(const std::string&)item_id {
339339
}
340340

341341
- (NSColor*)colorFromHexColorString:(const std::string&)colorString {
342-
SkColor color = electron::ParseHexColor(colorString);
342+
SkColor color = electron::ParseCSSColor(colorString);
343343
return skia::SkColorToDeviceNSColor(color);
344344
}
345345

‎shell/browser/web_contents_preferences.cc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@ void WebContentsPreferences::Merge(
235235
}
236236
std::string background_color;
237237
if (web_preferences.GetHidden(options::kBackgroundColor, &background_color))
238-
background_color_ = ParseHexColor(background_color);
238+
background_color_ = ParseCSSColor(background_color);
239239
std::string safe_dialogs_message;
240240
if (web_preferences.Get("safeDialogsMessage", &safe_dialogs_message))
241241
safe_dialogs_message_ = safe_dialogs_message;

0 commit comments

Comments
 (0)
X Tutup