QML notes on WebEngine

Updated 9 hours ago

Versions that support WebEngine and WebChannel

  • Origin of WebEngine module library inclusion dates back to MuseScore Connect
  • Musescore 3.6.2 for Windows has WebEngine (and WebChannel) support. Not on Linux and Mac versions.
  • Musescore 4.0 (all platform) uses OAuth. WebEngine support removed Jun2021, see github

Right click issue

  • It seems WebEngineView unifies left and right mouse button to one event (simplified to a simulated tap?)
  • To disable its context menu upon right mouse button use:
WebEngineView {
  onContextMenuRequested: request.accepted = true
  //add codes here for DIY menu
}

buggy mouse events:

DOM bubbling exist unexpectedly in these events, also event.target==currenttarget unexpectedly in bubbling

  • mouseenter
  • mouseleave

It seems WebEngineView always simulate a pen tip drag when mouse movement happens, ie the mouse is always pressed in the following event ( mouseevent.button==0 )

  • mouseover

Use a WebEngine plus html, css and javascript to build UI (Windows, Musescore 3.6.2 only)

Use the two boilerplates, which utilize a hybrid view built with html, css and standard javascript thru a 100% width and height WebEngine.

Inside WebEngine, standard set of javascript is used, for tech compatibility check on caniuse.com (find Chrome v56), eg css display:grid is unsupported. See also WebEngine community notes.

The following works:

  • javascript
    • Arrow function
    • template-literals ie `string${var}`
    • DOMParser().parseFromString("html")
  • css
    • Flex

The following css will not work:

  • Gap
  • Grid

Technical info on WebEngineView, WebChannel, WebView:

WebEngineView fetches url, search data on html and runs javascript from QML side only, its version in MuseScore 3 (Qt 5.9) is based on Chromium version 56.0.2924.122.
To communicate bidirectionally between QML and webpage use it with WebChannel.
WebView 1.1 is an older component and use a different engine which does not offer simple WebChannel support, try WebSocket.