Windows GUI: Use Edge WebView2 for HTML/Graph view

[cjee21]

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
  • Set TWebBrowser 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.
• 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.

[cjee21]

Tried updating the installer and packaging scripts.

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

1. Install EdgeView2 SDK 1.0.1054.31 by Microsoft from GetIt Package Manager in C++ Builder on build farm
2. 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.

[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:

With Edge WebView2 Runtime installed:

@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.

[JeromeMartinez]

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.

[cjee21]

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

Note: Graph view does not have dark mode.

[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...

[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...

Ideally, we should put all styles in all generated HTMLs in <style> tags and add a prefers-color-scheme CSS media query in there. However, we have issues getting the WebView2 to recognize that the app is in dark mode, hence the need for the current workaround with injecting <style> tag.

[JeromeMartinez]

Ideally, we should put all styles in all generated HTMLs in <style> tags and add a prefers-color-scheme CSS media query in there.

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

[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...

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.

[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/

[JeromeMartinez]

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...

[JeromeMartinez]

Windows 7 is too much used for being dropped.

[cjee21]

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.

[cjee21]

Could you share 2 results for the same file at different DPI?

Testing procedure:

1. Use official release of MediaInfo 24.06
2. Install graph plugin via GUI
3. Set Windows DPI to 100%
4. Open file in MediaInfo
5. Export as Graph
6. Close MediaInfo
7. Change Windows DPI and repeat 4, 5, 6 for 150% and 200% DPI

Exported SVGs for 100%, 150% and 200% DPI setting

[JeromeMartinez]

@cjee21 would you mind to share the exported SVG? I would like to diff them and it seems that I can not reproduce a differnece on my side.

[cjee21]

@cjee21 would you mind to share the exported SVG? I would like to diff them and it seems that I can not reproduce a differnece on my side.

I made typing mistake in above post. Edited. They are actually exported SVGs, not screenshots. Just save them.

[cjee21]

Test file is from here: https://ott.dolby.com/OnDelKits/AC-4/Dolby_AC-4_Online_Delivery_Kit_1.5/Test_Signals/muxed_streams/MP4/Example/Audio_ID_720p_50fps_h264_514ch_192kbps_ac4.mp4

[JeromeMartinez]

They are actually exported SVGs, not screenshots.

Oops, I didn't check the extension.
Thanks.

[JeromeMartinez]

It seems the SVG generation library is generating different SVGs when the DPI is different.

Looks like that graphviz keeps the same police size whatever is the width in pixels, and the width changes with DPI change.
@g-maxime, possible to hard code a width e.g. 500 pixels for the SVG generation then the renderer adapts to the canvas size?

[cjee21]

Rebased and 64-bit support added

[JeromeMartinez]

@cjee21 please rebase.

[JeromeMartinez]

dev snapshot.

[cjee21]

dev snapshot.

Looks okay other than MediaInfo_InfoTip.dll having old version number as mentioned previously (#932 (comment))

[JeromeMartinez]

Looks okay other than MediaInfo_InfoTip.dll having old version number as mentioned previously

Fixed

[cjee21]

It seems the SVG generation library is generating different SVGs when the DPI is different.

Looks like that graphviz keeps the same police size whatever is the width in pixels, and the width changes with DPI change. @g-maxime, possible to hard code a width e.g. 500 pixels for the SVG generation then the renderer adapts to the canvas size?

Confirmed no longer reproducible with Graph Plugin 24.11 on Windows 11 although the graph looks more condensed now.