Generic DnD is broken in Firefox starting drag inside shadow dom

[pleku]

FF issue: https://bugzilla.mozilla.org/show_bug.cgi?id=1521471

Plan: investigate a workaround

If plan fails and we can't get it to work, then we will revert the generic drag and drop feature #3978 from Flow 2.0. and include it to a later minor when the drag and drop is also working in Chrome.

[pleku]

The workarounds were not helping enough to be considered to add to Flow.

Thus generic DnD feature has been moved to its own module flow-dnd that will be released with Flow 2.0 but it will not be added to the platform in 14.0.

Once the ^ mentioned FF issue has been fixed, we can then included the flow-dnd module to the platform in a new minor release of 14. So if you don't need Firefox support for your Flow app using DnD, you can take the flow-dnd module and add it to your Vaadin 14 project.

The only workaround for FF that worked was to force the shadow dom polyfill to be used instead of native support with implementing PageConfigurator in the main layout and:

    public void configurePage(InitialPageSettings settings) {
        if (settings.getBrowser().isFirefox()) {
            settings.addInlineWithContents(InitialPageSettings.Position.PREPEND,
                    "  if (window.customElements) window.customElements.forcePolyfill = true;"
                            + "  ShadyDOM = { force: true };",
                    InitialPageSettings.WrapMode.JAVASCRIPT);
        }
    }

It should be noted that this can reduce the performance of the application severely.

Keeping this issue open until the FF bug has been fixed.

[joheriks]

To test with latest Firefox, which contains the fix.