Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Spec for IsWindowControlsOverlayEnabled.md #4613

Open
wants to merge 23 commits into
base: main
Choose a base branch
from

Conversation

tochukwuIbeEkeocha
Copy link
Contributor

@tochukwuIbeEkeocha tochukwuIbeEkeocha commented Jun 4, 2024

What

These new APIs introduce support for a Webview2 Window Controls Overlay. The Window Controls Overlay will allow developers to build apps in webview2 with 100% of the UI controlled by the browser process. Devs will be able to create their apps as borderless & caption-less windows, and have the Webview draw its own window control buttons (minimize,maximize, close, restore).

image image

@tochukwuIbeEkeocha tochukwuIbeEkeocha added the API Proposal Review WebView2 API Proposal for review. label Jun 4, 2024
@tochukwuIbeEkeocha tochukwuIbeEkeocha force-pushed the api-isWindowControlsOverlayEnabled-draft branch from 2038eac to e886ba5 Compare June 4, 2024 22:17
@tochukwuIbeEkeocha tochukwuIbeEkeocha force-pushed the api-isWindowControlsOverlayEnabled-draft branch 2 times, most recently from 657def7 to d395730 Compare June 7, 2024 22:18
@david-risney david-risney requested review from aluhrs13 and vickiez June 12, 2024 17:03
@tochukwuIbeEkeocha tochukwuIbeEkeocha force-pushed the api-isWindowControlsOverlayEnabled-draft branch 7 times, most recently from 3866c89 to bce67e9 Compare August 28, 2024 21:54
@tochukwuIbeEkeocha tochukwuIbeEkeocha force-pushed the api-isWindowControlsOverlayEnabled-draft branch from bce67e9 to 700ec3a Compare September 4, 2024 20:19
@tochukwuIbeEkeocha tochukwuIbeEkeocha force-pushed the api-isWindowControlsOverlayEnabled-draft branch from 700ec3a to 654b176 Compare September 11, 2024 22:30
@ahqsoftwares
Copy link

Is there any ETA on when this update might come to webview2?

@tochukwuIbeEkeocha tochukwuIbeEkeocha force-pushed the api-isWindowControlsOverlayEnabled-draft branch from 654b176 to 5a4eb5f Compare October 28, 2024 20:47
tochukwuIbeEkeocha and others added 4 commits November 1, 2024 11:18
Co-authored-by: David Risney <dave@deletethis.net>
Co-authored-by: David Risney <dave@deletethis.net>
Co-authored-by: Viktoria Zlatinova <vizlatin@microsoft.com>
Co-authored-by: Viktoria Zlatinova <vizlatin@microsoft.com>
tochukwuIbeEkeocha and others added 2 commits November 1, 2024 11:18
Co-authored-by: Viktoria Zlatinova <vizlatin@microsoft.com>
Co-authored-by: David Risney <dave@deletethis.net>
@tochukwuIbeEkeocha tochukwuIbeEkeocha force-pushed the api-isWindowControlsOverlayEnabled-draft branch from 2f02f47 to b38a178 Compare November 4, 2024 23:34
@tochukwuIbeEkeocha tochukwuIbeEkeocha force-pushed the api-isWindowControlsOverlayEnabled-draft branch from b38a178 to a6cc969 Compare November 13, 2024 22:25
@tochukwuIbeEkeocha tochukwuIbeEkeocha force-pushed the api-isWindowControlsOverlayEnabled-draft branch from a6cc969 to 01a2caf Compare January 28, 2025 00:16

CoreWebView2WindowControlsOverlaySettings config = Webview2.CoreWebivew2.WindowControlsOverlaySettings;
config.IsEnabled = true;
config.color = Color.FromARGB(0, 0, 255);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does the order of setting these properties matter? If I set enabled=true before setting .color might there be a frame rendered of the overlay with the default color?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please update docs to say when does the IsEnabled change take affect - immediate or batched once the UI thread has a chance to work.

Prefer: the order shouldn't matter. If order matters we'll follow up.

///
/// When using this you should configure your app window to not display its default
/// window control buttons. You are responsible for creating a title bar for your app
/// by using the available space to the left of the controls overlay. In doing so,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this right or left conditional on the reading direction of the UI root?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please document what happens for RTL locales - does the controls overlay render on the left instead of right?

In the text here say 'before' instead of 'left'

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In RTL locales, the caption buttons still appear on the right side of the window, just like in LTR. The ordering of the buttons themselves is mirrored (Close | Maximize | Minimize), but their position remains on the right side of the window.

keeping that in mind 'left' actually fits correctly in the statement? please let me know if you still want it to be 'before' ?


/// The `TitleBarBackgroundColor` property allows you to set a background color
/// for the overlay. Based on the background color you choose, Webview2
///will automatically calculate a foreground and hover color that will
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is foreground color necessarily black or white? We might be leaving this undocumented to reserve the right to choose colors based on the hosting app?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They won't be white/black it will be based on the background color.
It would be helpful to include some screenshots of examples.

Copy link
Contributor

@david-risney david-risney left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please update per comments, thanks!


CoreWebView2WindowControlsOverlaySettings config = Webview2.CoreWebivew2.WindowControlsOverlaySettings;
config.IsEnabled = true;
config.color = Color.FromARGB(0, 0, 255);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please update docs to say when does the IsEnabled change take affect - immediate or batched once the UI thread has a chance to work.

Prefer: the order shouldn't matter. If order matters we'll follow up.

[propget] HRESULT Height([out, retval] UINT32* value);


/// The `Height` property in raw screen pixels, allows you to set the height of the overlay and
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bradp0721 Does it make sense to use raw screen pixels here vs view pixels?

Also, we should ensure that different DPI awareness doesn't create bugs with real raw pixels vs virtual DPI scaled raw pixels.

/// for the overlay. Based on the background color you choose, Webview2
///will automatically calculate a foreground and hover color that will
/// provide you the best contrast while maintaining accessibility.
/// Defaults to #f3f3f3. This API supports transparency.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Document that it does not support changing the default color or default height for OS theming (dark/light mode and high contrast) and height.


/// The `TitleBarBackgroundColor` property allows you to set a background color
/// for the overlay. Based on the background color you choose, Webview2
///will automatically calculate a foreground and hover color that will
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They won't be white/black it will be based on the background color.
It would be helpful to include some screenshots of examples.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
API Proposal Review WebView2 API Proposal for review.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants