Skip to content

Commit b38a178

Browse files
Update specs/WindowControlsOverlayConfiguration.md
1 parent 8ff7c9e commit b38a178

File tree

1 file changed

+15
-9
lines changed

1 file changed

+15
-9
lines changed

specs/WindowControlsOverlayConfiguration.md

+15-9
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ The overlay Settings lives on the controller object.
1010

1111
This API is designed to be used in addition with the other non-client region APIs
1212
and features. These include `app-region: drag`, and `IsNonClientRegionSupportEnabled`.
13+
14+
# Conceptual pages (How To)
15+
Here is a concept doc on the window controls overlay: https://wicg.github.io/window-controls-overlay/#concepts. This was written for the PWA counterpart for this feature. From the perspective of HTML & Javascript layers, everything there applies in Webview2 as well.
16+
1317
# Examples
1418

1519
## Win32 C++
@@ -30,12 +34,12 @@ void AppWindow::OnCreateWebview2ControllerCompleted(HRESULT hr, ICoreWebview2Co
3034
wil::com_ptr<ICoreWebView2Controller5> controller5;
3135
CHECK_FAILURE(controller->QueryInterface(&controller5));
3236

33-
wil::com_ptr<ICoreWebView2WindowControlsOverlaySettings> wco_config;
37+
wil::com_ptr<ICoreWebView2WindowControlsOverlaySettings> windowControlsOverlaySettings;
3438
CHECK_FAILURE(controller5->get_WindowControlsOverlaySettings(&wco_config));
3539

36-
wco_config->put_IsEnabled(true);
40+
CHECK_FAILURE(wco_config->put_IsEnabled(true));
3741
COREWEBVIEW2_COLOR color {1, 0, 0, 225};
38-
wco_config->put_TitleBarColor(color);
42+
CHECK_FAILURE(wco_config->put_TitleBarBackgroundColor(color));
3943
}
4044
```
4145
## .NET C#
@@ -97,22 +101,23 @@ interface ICoreWebView2WindowControlsOverlaySettings : IUnknown {
97101
///
98102
/// The Overlay buttons will sit on top of the HTML content, and will prevent mouse interactions
99103
/// with any elements directly below it, so you should avoid placing content there.
100-
/// To that end, there are four CSS environment vairables defined to help you
104+
/// To that end, there are four [CSS environment vairables](https://developer.mozilla.org/en-US/docs/Web/API/Window_Controls_Overlay_API#css_environment_variables)
105+
/// titlebar-area-x, titlebar-area-y, titlebar-area-width defined to help you
101106
/// get the dimensions of the available titlebar area to the left of the overlay.
102107
/// Similarly the navigator object wil contain a [WindowControlsOverlay property](https://developer.mozilla.org/en-US/docs/Web/API/WindowControlsOverlay)
103108
/// which can be used to get the titlebar area as a rect, and listen for changes
104109
/// to the size of that area.
105110
///
106111
[propput] HRESULT IsEnabled([in] BOOL value);
107112

108-
/// Gets the `TitleBarColor` property.
109-
[propget] HRESULT TitleBarColor([out, retval] COREWEBVIEW2_COLOR* value);
113+
/// Gets the `TitleBarBackgroundColor` property.
114+
[propget] HRESULT TitleBarBackgroundColor([out, retval] COREWEBVIEW2_COLOR* value);
110115

111-
/// The `TitleBarColor` property allows you to set a background color
116+
/// The `TitleBarBackgroundColor` property allows you to set a background color
112117
/// for the overlay. Based on the background color you choose, Webview2
113118
///will automatically calculate a foreground and hover color that will
114119
/// provide you the best contrast while maintaining accessibility.
115-
/// Defaults to #f3f3f3
120+
/// Defaults to #f3f3f3. This API supports transparency.
116121
[propput] HRESULT TitleBarBackgroundColor([in] COREWEBVIEW2_COLOR value);
117122
}
118123
```
@@ -135,8 +140,9 @@ namespace Microsoft.Web.WebView2.Core
135140
{
136141
Boolean IsEnabled { get; set; };
137142
UInt32 Height { get; set; };
138-
Windows.UI.Color TitleBarColor { get; set; }
143+
Windows.UI.Color TitleBarBackgroundColor { get; set; }
139144
}
140145
}
141146
}
142147
```
148+

0 commit comments

Comments
 (0)