Dark mode in local Web client plugin?

[wodge]

Hi,

We have a plugin running in our product, but on the plugin seed 0.98. We are using it with recent versions of Clarity (1.2.0) / Angular (7.2.12) 

We would like to be able to change the theme in the plugin to dark mode when it is changed in the H5 client. Can you let us know if this is possible please? And if so, what would be required to do it?

Wodge 

[Denis Chorbadzhiyski]

Hi Wodge,

 

Yes, it is possible to integrate your plugin's UI with the dark vSphere Client theme.

It can be achieved by using "app.getTheme()" and "event.onThemeChanged(callback)" JS APIs introduced in vSphere Client SDK 6.7U2.

Here is the documentation: https://code.vmware.com/web/sdk/6.7/client -> go to "Developing Local Plug-ins with the vSphere Client SDK (6.7 U2)" -> section "Using Themes with vSphere Client Plug-ins"

You can also check the "html-sample" plugin and see how it is integrated with the dark theme.

 

Let us know if you need more help.

 

Best Regards,

Denis

[wodge]

Hi Denis,

Yes - I do need some more help please. I need to know how to use the JS APIs within the plugin seed 0.98? I don't know how to start with this.

Many thanks,

Warren

[Denis Chorbadzhiyski]

Hi Warren,

 

The plugin seed project is used primarily to create and test a plugin solution. The JavaScript APIs are a set of helper methods exposed by the vSphere Client which are accessible from the plugin withing its own iframe window.

This means that in your own UI code, you can access the APIs by writing "window.frameElement.htmlClientSdk", for example "window.frameElement.htmlClientSdk.app.getTheme()" will return the currently selected vSphere Client theme.

For a full reference of the available JS APIs, you may read the official vSphere Client SDK documentation or download the SDK deliverable and open "/html-client-sdk/docs/Javascript-API.html".

 

Best Regards,

Denis

[chrissmith1]

Calling "window.frameElement.htmlClientSdk.app.getTheme()" works from a standard UI page, but from my modal dialog (opened using the Bridge API and/or the Actions menu as defined in plugin.xml), "window.frameElement.htmlClientSdk" is undefined.

How can we query the theme from inside a modal dialog?

[Vladimir Velikov]

Hi Chris,

The theming support is available only through the new JS APIs. The Bridge APIs are deprecated so they don't support this new feature.

Thank you for highlighting the behavior of the Actions menu through the plugin.xml as it has important to note specifics:

• ActionSpec containing className com.vmware.vsphere.client.htmlbridge.HtmlActionDelegate will create an action which opens a modal with Bridge API support. This is demonstrated by the WSSDK sample (SDK 6.5U1) and I assume this is what you have.
• ActionSpec containing className com​​.vmware​​​.vsphere​​​.client​​​.HtmlPluginModalAction​​​​ ​will create an action which opens a modal with new JS API support (hence, the modal contains window.frameElement.htmlClientSdk). The className com​​.vmware​​​.vsphere​​​.client​​​.HtmlPluginHeadlessAction​​​​ is used for the headless case. These are demonstrated by the HTML sample (latest SDK 6.7U2).

In general, having a plugin based on both APIs at the same time might be tricky as they normally diverge and support different capabilities.

Hope this helps.

Cheers,

Vladi

[chrissmith1]

Thanks Vladi - that's very helpful!

We don't want to migrate to the newer API just yet, as we don't want to drop support for older vCenter versions. I agree that mixing both APIs in general could cause problems, but as we already have a theming mechanism within our plugin, using just the getTheme() and onThemeChanged() functions should be safe?

Whilst theming modal dialogs would be ideal, they still get the dark header when using the Bridge API ActionSpec, and look okay even if the content uses our light theme, so just theming the main UI until we migrate APIs seems a reasonable compromise.

[Vladimir Velikov]

Hi Chris,

This might be a reasonable middle ground which you might want to use for the time being.

That said, please be aware that the new JS APIs have no requirement to support interop with the Bridge APIs within the same plugin. It means that in a future version there might be changes which impact this type of solution. Not that we are planning such at the moment but please factor in the risk of using this unsupported scenario.

Thanks for the bug report - we are looking into it and will follow up in this thread.

Cheers,

Vladi

[chrissmith1]

One more question: There appears to be a bug in 6.7U2, where after logging in and selecting "Dark" theme, and then closing the browser without logging out, the theme for the vSphere UI reverts to "Light" on the next login - but our plugin continues to get "dark" from getTheme(), and so renders incorrectly. Is this a known issue? Shouldn't the user's preferred theme choice persist across sessions?

This is using vSphere Client 6.7.0.30000 with the latest Chrome browser (76.0.3809.100).

[Denis Chorbadzhiyski]

Hi Chris,

 

I tried to reproduce the issue described, however, without success.

What I did is:

1. Opened a new browser window.

2. Log in the vSphere Client and changed the theme to dark.

3. Closed the browser window.

4. Opened a new browser window.

5. I get logged in the vSphere Client and the theme was still dark.

 

Can you share the steps which you executed in order to reproduce the issue or the best would be if you can share a video so that we can investigate.

 

Thank you,

Denis

[chrissmith1]

I've repro'd the issue on a different workstation, and recorded a video. I'll share it via PM as it includes confidential information.

[Denis Chorbadzhiyski]

After toubleshooting and discussing with Chris, the status is that this is a vSphere Client issue which is reproducible on vSphere Client 6.7U2. We have addressed the problem and it will be resolved in a future vSphere release. The vSphere Client SDK APIs are working as expected and no changes on the plugins' side is expected.

[rajkotmachine]

With this plugin, you can enable your users to switch website between Night Mode and normal style smoothly to improve the readability of text, images, and videos.

for more info: https://wordpress.org/plugins/wp-night-mode/

Admin

Cadets Academy

[Vladimir Velikov]

Hi Chris,

The fix of the issue should be out with 6.7U3.

Could you please let us know if you can still reproduce it?

Cheers,

Vladi

[chrissmith1]

Hi Vladi,

Sorry for the delay following up. Yes, the issue appears to be fixed on 6.7U3 (the entire vSphere client UI including the plugin appears to use the last-selected theme after login, as expected). There are other rendering issues in this release - occasionally, the main content pane (including the header text and "Actions" drop-down, which is outside of the client area controlled by our plugin) is rendered behind the titlebar, and a refresh or navigation from the "Menu" drop-down is required to force it to redraw correctly; I'm not sure exactly what triggers that but I've seen it multiple times now.

I do have another question regarding plugin theming support - the 6.7U2 local plugin development guide (no new version exists for 6.7U3) describes theming in clarity, but there's no mention of the VMware-controlled icon resources referenced in the "plugin.xml" file. Is there a way to change the icon resources according to the current theme?

[chrissmith1]

I've managed to repro and record a video of the titlebar bug that I mentioned above. The specific case in the repro is after opening a modal dialog from the plugin via HtmlActionDelegate, but it is intermittent - it took a number of attempts to get it to repro. I'm fairly certain this is a regression in 6.7U3, as I've not seen this behaviour in any prior versions. Once in that state, it seems to require a full browser refresh to clear it (navigating even using the Menu drop-down didn't fix it).

I'll send you a link to the video via PM.

[Vladimir Velikov]

Hi Chris,

Thanks for checking the old issue is resolved and reporting the rendering issue. We will check the details - very helpful indeed.

Btw, I know it is standard but did you try clearing your browser cache or test it in incognito mode?

As for the theming icon support this API is already implemented internally but is planned to go out only in a next release.

Great feedback, thank you!

Cheers,

Vladi

[chrissmith1]

Yes, I just cleared the Chrome cache and the issue repro'd the very first time the modal dialog was displayed. I've seen it on two separate workstations (Windows 10 v1809 desktop and Windows Server 2016, both running Chrome 76.0.3809.132) - I've not tried to repro on other platforms/browsers.

[Vladimir Velikov]

chrissmith1​

Hi Chris,

The team managed to reproduce the sporadic issue with the overlapping header you reported. There is a fix in the vSphere Client now and it will be shipped with a future release vehicle.

Very much appreciate the effort to report and record the video - this helped a lot as this type of issues are very difficult to root cause!

Thanks!

Cheers,

Vladi

[chrissmith1]

Vladi - not sure when the regression occurred (or if the fix was never released), but we are seeing the same problem with the overlapping header in the current 6.7U3l release.

 

[Vladimir Velikov]

Thanks Chris,

A fix was released in one of the previous patches but I guess there could still be a corner case. I have reopened the case internally.

Cheers,

Vladi

[Denis Chorbadzhiyski]

Hi Chris,

 

The theming support for plugin icons displayed by the vSphere Client (for example in Object Navigator and Actions) is not currently present.

This is why we recommend using icons which are displayed well in both themes.

The support will be added in a next major release.

 

Best Regards,

Denis