MediaInfo Windows GUI: Use Edge WebView2 for HTML/Graph view

Use Edge WebView2 for HTML and Graph view when available else fallback to IE.

This should work on Windows 7 to 11 both with and without Edge WebView2 Runtime installed.

Additional changes beyond this PR that are required to get WebView2 working:

Install EdgeView2 SDK 1.0.1054.31 by Microsoft or EdgeView2 SDK 1.0.2739.1 by Microsoft from GetIt Package Manager in C++Builder.

Commits details:

Use Edge Webview2 for HTML and Graph views
- Replace TCppWebBrowser with TWebBrowser set to prefer Edge WebView2
- Code additions to set the UDF directory. This ensures the WebView2 UDF will always be beside the Plugin folder that contains MediaInfo's config.
- Code changes for HTML view to accommodate Edge which does not support use of about: URLs for this kind of purpose (other modern browsers also use about: for internal use only).
Enable WebView2 native dark mode
- Code additions to override theme (WebView2 already automatically follows system theme) by injecting CSS
- Code changes to enable using the new Template.html for Graph view that enables dark mode
  - I will submit Template.html once the repo for it is up since it is understood that it will be. (EDIT: Let's just put the file here: Template.zip)
  - Even without updated template, it should still work properly, just without dark mode support.
Bundle WebView2Loader.dll
- This DLL is required for WebView2 to work and will be available after installing the package mentioned above
- Changes to .nsi to include WebView2Loader.dll in install directory on install and remove it on uninstall.
  - Also removes WebView2 UDF folder if present in the install directory. This folder should be in %APPDATA%\MediaInfo in typical installations (with read-only install dir) and will be left there on uninstall along with the Plugin folder.
- Changes to .bat files to include WebView2Loader.dll in the 7z archives.

Additional notes:

This change actually unintentionally enables dark scrollbars for IE engine in dark theme too.
To test engine fallback, it is not necessary to uninstall WebView2 runtime. Just rename WebView2Loader.dll.

Jun 18 '24 13:06 cjee21

Tried updating the installer and packaging scripts.

@JeromeMartinez Now on your side only need to do the following for this PR:

Install EdgeView2 SDK 1.0.1054.31 by Microsoft from GetIt Package Manager in C++ Builder on build farm
See if the build farm successfully produces a build with this PR

I can help check/test the installer and 7z when there is a dev snapshot for this PR.

Jun 22 '24 03:06 cjee21

Tested locally built installer with this PR. It works as expected on Windows 11 including the uninstallation.

Also tested on Windows 7 VM.

Without Edge WebView2 Runtime installed: Screenshot 2024-06-22 132626

With Edge WebView2 Runtime installed: Screenshot 2024-06-22 134429

@JeromeMartinez remember the bug in https://github.com/MediaArea/MediaInfo/pull/853#issuecomment-2141385021? This bug is more serious in Windows 7 where it pops up the following: Screenshot 2024-06-22 133015

The good news is that with Edge WebView2 Runtime installed, this bug does not happen.

Jun 22 '24 05:06 cjee21

Now on your side only need to do the following for this PR:

@cjee21 sorry to be late on this one, but still on my radar, please be patient, ~10 days before we have more time.

Jun 22 '24 10:06 JeromeMartinez

Just realized Graph view is using HTML too so implemented WebView2 for that too. Tested.

Note: Graph view does not have dark mode.

Jun 26 '24 05:06 cjee21

Note: Graph view does not have dark mode.

True... HTML code is mixed in C++ code in https://github.com/MediaArea/MediaInfoLib/blob/master/Source/MediaInfo/Export/Export_Graph.cpp , we need to add an option to the library for indicating that we want a dark version...

Jun 26 '24 05:06 JeromeMartinez

Note: Graph view does not have dark mode.

True... HTML code is mixed in C++ code in https://github.com/MediaArea/MediaInfoLib/blob/master/Source/MediaInfo/Export/Export_Graph.cpp , we need to add an option to the library for indicating that we want a dark version...

Ideally, we should put all styles in all generated HTMLs in

Jun 26 '24 05:06 cjee21

Ideally, we should put all styles in all generated HTMLs in

True. Maybe better to do that and then hack in the GUI for selecting the right style dynamically.

Jun 26 '24 06:06 JeromeMartinez

Note: Graph view does not have dark mode.

True... HTML code is mixed in C++ code in https://github.com/MediaArea/MediaInfoLib/blob/master/Source/MediaInfo/Export/Export_Graph.cpp , we need to add an option to the library for indicating that we want a dark version...

I give up (at least for now). Can't really understand that file and didn't see where to change the background of the generated SVG. For the HTML part of graph view, it seems is not in that file but is in \\Plugin\\Graph\\Template.html after looking in the VCL codes but can't seem to find the source of this file.

Jun 26 '24 14:06 cjee21

x Supported platforms: this is the last version compatible with Windows RHEL/CentOS 7

Am I understanding correctly that Windows 7 support is dropped after this? Does that mean we can drop support for IE engine too?

We are happy to report that WebView2 Runtime is now installed on most active eligible Windows 10 Consumer devices and will continue to be deployed on newly active Windows 10 devices.

On Windows 11, WebView2 Runtime is already a part of the operating system and will be readily available for any device updated to Windows 11.

Source: https://blogs.windows.com/msedgedev/2022/12/14/delivering-microsoft-edge-webview2-runtime-to-managed-windows-10-devices/

Jun 27 '24 17:06 cjee21

Am I understanding correctly that Windows 7 support is dropped after this? Does that mean we can drop support for IE engine too?

Ugly typo, it was expected to be RHEL/CentOS 7 (no Windows). @g-maxime sorry to ask that but could you send another PR with removal of "Windows " and rebuild? Sorry of the typo...

Jun 27 '24 18:06 JeromeMartinez

Windows 7 is too much used for being dropped.

Jun 27 '24 18:06 JeromeMartinez

New version of HTML dark mode implementation. Works with the new PR of MediaInfoLib. Now both WebView2 and IE supports dark mode and has almost identical rendering. WebView2 theme switching and dark mode display is more or less perfect.

Screenshots:

Theme	WebView2	IE
Light
Dark

Remaining bugs:

When the following steps are performed, an error occurs and HTML view does not work until MediaInfo is restarted.
1. Open MediaInfo
2. Switch to HTML view
3. Switch back to Basic view
4. Switch theme
5. Switch to HTML view again
It happens only with IE engine but on both Windows 11 and 7 unlike previously thought:

@JeromeMartinez remember the bug in #853 (comment)? This bug is more serious in Windows 7 where it pops up the following:

The good news is that with Edge WebView2 Runtime installed, this bug does not happen.
When using IE engine, when theme is switched while in HTML view, the HTML's theme does not switch and requires selecting HTML view again to refresh.

Jun 28 '24 06:06 cjee21

FYI deleted previous post that is outdated and no longer relevant.

Jun 28 '24 06:06 cjee21

@cjee21 thank you so much for you hard work on that.

Jun 28 '24 07:06 JeromeMartinez

For the Graph view, I did not change anything other than implementing WebView2 since I cannot find the source code. Here is how it looks on both themes using WebView2:

Light	Dark

Jun 28 '24 07:06 cjee21

For the Graph view, I did not change anything other than implementing WebView2 since I cannot find the source code

The source code is https://github.com/MediaArea/MediaInfoLib/blob/master/Source/MediaInfo/Export/Export_Graph.cpp then it is processed by graphviz. We understand that this is not an easy task and we'll adapt that ourselves after the merge of the PRs.

Jun 28 '24 07:06 JeromeMartinez

The source code is https://github.com/MediaArea/MediaInfoLib/blob/master/Source/MediaInfo/Export/Export_Graph.cpp then it is processed by graphviz. We understand that this is not an easy task and we'll adapt that ourselves after the merge of the PRs.

That is part of the issue but there is also \Plugin\Graph\Template.html which I cannot find the source.

Jun 28 '24 07:06 cjee21

That is part of the issue but there is also \Plugin\Graph\Template.html which I cannot find the source.

Oops, something kept in a developer repo, it is here and we'll move it to MediaArea repo soon.

Jun 28 '24 08:06 JeromeMartinez

That is part of the issue but there is also \Plugin\Graph\Template.html which I cannot find the source.

Oops, something kept in a developer repo, it is here and we'll move it to MediaArea repo soon.

Found that modifying the Template.html and making a few more changes to VCL code are the only things needed to enable dark mode in Graph view. No changes needed on the MediaInfoLib side. No need to look at that complex Export_Graph.cpp code. 😄

Add-on: and this way we won't change the exported SVG.

Jun 28 '24 10:06 cjee21

Done! 😄 Screenshot 2024-06-28 183147

Will update the template HTML file when I see it in the MediaArea repos.

Jun 28 '24 10:06 cjee21

Done! 😄

Yeah! Thank you again!

Jun 28 '24 10:06 JeromeMartinez

With the latest version commit, both engines are even more identical for HTML view.

Theme	WebView2	IE
Light
Dark

Jun 28 '24 12:06 cjee21

Some more updates to prevent breaking anything. Should be all okay now. Should be safe to merge even before updating Graph template (just dark view will not work for Graph). Has to be merged along with MediaInfoLib PR 2084.

Jun 29 '24 05:06 cjee21

Graph view is displaying differently at high DPI. No idea why as the same HTML+SVG is displayed the same in Firefox regardless of DPI.

100%	150%

Jun 29 '24 12:06 cjee21

This PR should now be build-able and merge-able.

Jun 29 '24 12:06 cjee21

@cjee21 please rebase.

Jun 29 '24 17:06 JeromeMartinez

@cjee21 please rebase.

Of course I will. Another day for this as requires looking though and it is getting late.

Jun 29 '24 17:06 cjee21

@JeromeMartinez Re-based with fresh commits. Updated first post with details.

Jun 30 '24 02:06 cjee21

This PR and 64-bit PRs are independent but when this is merged, 64-bit PR has to be re-based with edits because installer/packaging will have to handle 64-bit version of WebView2Loader.dll.

Jun 30 '24 02:06 cjee21

Graph view is displaying differently at high DPI. No idea why as the same HTML+SVG is displayed the same in Firefox regardless of DPI.

Think I found the cause. It is not related to web engines. It seems the SVG generation library is generating different SVGs when the DPI is different. The exported SVG also has layout that looks off when exported while MediaInfo is running under high DPI.

Jun 30 '24 10:06 cjee21