Fix HTML5 DnD regression for FF (#9245)

- Always set some drag data
- Set the dropEffect on dragEnter and dragOver events on drop target
- Send the dropEffect to server on drop event with disclaimer of current support
- Remove _dragOverCriteria_ and use _dropCriteria_ for `dragenter`, `dragover` and `drop` criteria

Tested manually basic DnD and Grid DnD on Mac with Chrome, Firefox, Safari.
Safari is still missing drag image (regression).

Tested manually basic DnD and Grid Dnd on Windows IE11 and Edge.
Drop event for both is still not working properly #9174.

2 files changed, 60 insertions, 30 deletions

diff --git a/uitest/src/main/java/com/vaadin/tests/components/grid/GridDragAndDrop.java b/uitest/src/main/java/com/vaadin/tests/components/grid/GridDragAndDrop.java
index 3fde1c6bf4..149dec92e3 100644
--- a/uitest/src/main/java/com/vaadin/tests/components/grid/GridDragAndDrop.java
+++ b/uitest/src/main/java/com/vaadin/tests/components/grid/GridDragAndDrop.java
@@ -22,6 +22,8 @@ import java.util.Set;
 import java.util.stream.Collectors;
 import java.util.stream.Stream;
 
+import com.vaadin.annotations.Theme;
+import com.vaadin.annotations.Widgetset;
 import com.vaadin.data.provider.ListDataProvider;
 import com.vaadin.server.VaadinRequest;
 import com.vaadin.shared.ui.dnd.DropEffect;
@@ -41,6 +43,8 @@ import com.vaadin.ui.RadioButtonGroup;
 import elemental.json.Json;
 import elemental.json.JsonObject;
 
+@Theme("valo")
+@Widgetset("com.vaadin.DefaultWidgetSet")
 public class GridDragAndDrop extends AbstractTestUIWithLog {
 
     private Set<Person> draggedItems;
@@ -61,13 +65,13 @@ public class GridDragAndDrop extends AbstractTestUIWithLog {
         grids.addComponents(left, right);
 
         // Selection modes
-        List<Grid.SelectionMode> selectionModes = Arrays.asList(
-                Grid.SelectionMode.SINGLE, Grid.SelectionMode.MULTI);
+        List<Grid.SelectionMode> selectionModes = Arrays
+                .asList(Grid.SelectionMode.SINGLE, Grid.SelectionMode.MULTI);
         RadioButtonGroup<Grid.SelectionMode> selectionModeSelect = new RadioButtonGroup<>(
                 "Selection mode", selectionModes);
         selectionModeSelect.setSelectedItem(Grid.SelectionMode.SINGLE);
-        selectionModeSelect.addValueChangeListener(event -> left
-                .setSelectionMode(event.getValue()));
+        selectionModeSelect.addValueChangeListener(
+                event -> left.setSelectionMode(event.getValue()));
 
         // Drop locations
         List<DropMode> dropLocations = Arrays.asList(DropMode.values());
@@ -113,9 +117,8 @@ public class GridDragAndDrop extends AbstractTestUIWithLog {
         });
 
         // Add drag start listener
-        dragSource.addGridDragStartListener(event ->
-                draggedItems = event.getDraggedItems()
-        );
+        dragSource.addGridDragStartListener(
+                event -> draggedItems = event.getDraggedItems());
 
         // Add drag end listener
         dragSource.addGridDragEndListener(event -> {
@@ -148,18 +151,17 @@ public class GridDragAndDrop extends AbstractTestUIWithLog {
                     List<Person> items = (List<Person>) dataProvider.getItems();
 
                     // Calculate the target row's index
-                    int index = items.indexOf(event.getDropTargetRow()) + (
-                            event.getDropLocation() == DropLocation.BELOW
-                                    ? 1 : 0);
+                    int index = items.indexOf(event.getDropTargetRow())
+                            + (event.getDropLocation() == DropLocation.BELOW ? 1
+                                    : 0);
 
                     // Add dragged items to the target Grid
                     items.addAll(index, draggedItems);
                     dataProvider.refreshAll();
 
-                    log("dragData=" + event.getDataTransferText()
-                            + ", target="
-                            + event.getDropTargetRow().getFirstName()
-                            + " " + event.getDropTargetRow().getLastName()
+                    log("dragData=" + event.getDataTransferText() + ", target="
+                            + event.getDropTargetRow().getFirstName() + " "
+                            + event.getDropTargetRow().getLastName()
                             + ", location=" + event.getDropLocation());
                 }
             });
diff --git a/uitest/src/main/java/com/vaadin/tests/dnd/DragAndDropCardShuffle.java b/uitest/src/main/java/com/vaadin/tests/dnd/DragAndDropCardShuffle.java
index 415dbf945d..8a136304aa 100644
--- a/uitest/src/main/java/com/vaadin/tests/dnd/DragAndDropCardShuffle.java
+++ b/uitest/src/main/java/com/vaadin/tests/dnd/DragAndDropCardShuffle.java
@@ -15,14 +15,24 @@
  */
 package com.vaadin.tests.dnd;
 
+import java.util.ArrayList;
+import java.util.List;
+
+import com.vaadin.annotations.Theme;
+import com.vaadin.annotations.Widgetset;
 import com.vaadin.event.dnd.DragSourceExtension;
 import com.vaadin.event.dnd.DropTargetExtension;
 import com.vaadin.server.Page;
 import com.vaadin.server.VaadinRequest;
+import com.vaadin.shared.ui.dnd.DropEffect;
+import com.vaadin.shared.ui.dnd.EffectAllowed;
 import com.vaadin.tests.components.AbstractTestUIWithLog;
 import com.vaadin.ui.HorizontalLayout;
 import com.vaadin.ui.Label;
+import com.vaadin.ui.NativeSelect;
 
+@Theme("valo")
+@Widgetset("com.vaadin.DefaultWidgetSet")
 public class DragAndDropCardShuffle extends AbstractTestUIWithLog {
 
     // Create cards
@@ -34,8 +44,24 @@ public class DragAndDropCardShuffle extends AbstractTestUIWithLog {
     // Create desk
     private final HorizontalLayout desk = new HorizontalLayout();
 
+    private final List<DragSourceExtension<Label>> sources = new ArrayList<>();
+    private final List<DropTargetExtension<Label>> targets = new ArrayList<>();
+
     @Override
     protected void setup(VaadinRequest request) {
+        NativeSelect<EffectAllowed> effectAllowed = new NativeSelect<>(
+                "Effect Allowed (source)");
+        effectAllowed.setItems(EffectAllowed.values());
+        effectAllowed.setValue(EffectAllowed.UNINITIALIZED);
+        effectAllowed.setEmptySelectionAllowed(false);
+        effectAllowed.addValueChangeListener(event -> sources
+                .forEach(source -> source.setEffectAllowed(event.getValue())));
+
+        NativeSelect<DropEffect> dropEffect = new NativeSelect<>(
+                "Drop Effect (target)");
+        dropEffect.setItems(DropEffect.values());
+        dropEffect.addValueChangeListener(event -> targets
+                .forEach(target -> target.setDropEffect(event.getValue())));
 
         // Create UI and add extensions
         desk.addComponents(ace, jack, queen, king);
@@ -56,7 +82,7 @@ public class DragAndDropCardShuffle extends AbstractTestUIWithLog {
         addDragSourceExtension(king);
         addDropTargetExtension(king);
 
-        addComponent(desk);
+        addComponents(new HorizontalLayout(effectAllowed, dropEffect), desk);
 
         // Add styling
         setStyle();
@@ -70,7 +96,8 @@ public class DragAndDropCardShuffle extends AbstractTestUIWithLog {
         // Add listeners
         dragSource.addDragStartListener(event -> {
             event.getComponent().addStyleName("dragged");
-            log(event.getComponent().getValue() + " dragstart");
+            log(event.getComponent().getValue() + " dragstart, effectsAllowed="
+                    + event.getEffectAllowed());
         });
 
         dragSource.addDragEndListener(event -> {
@@ -78,6 +105,8 @@ public class DragAndDropCardShuffle extends AbstractTestUIWithLog {
             log(event.getComponent().getValue() + " dragend, dropEffect="
                     + event.getDropEffect());
         });
+
+        sources.add(dragSource);
     }
 
     private void addDropTargetExtension(Label target) {
@@ -94,28 +123,27 @@ public class DragAndDropCardShuffle extends AbstractTestUIWithLog {
                     // Swap source and target components
                     desk.replaceComponent(target, source);
 
-                    log(source.getValue() + " dropped onto " + event
-                            .getComponent().getValue());
+                    log(event.getComponent().getValue() + " drop received "
+                            + source.getValue() + ", dropEffect="
+                            + event.getDropEffect());
+                } else {
+                    log(event.getComponent().getValue()
+                            + " drop received something else than card");
                 }
             });
         });
+
+        targets.add(dropTarget);
     }
 
     private void setStyle() {
         Page.Styles styles = Page.getCurrent().getStyles();
 
-        styles.add(".card {"
-                + "width: 150px;"
-                + "height: 200px;"
-                + "border: 1px solid black;"
-                + "border-radius: 7px;"
-                + "padding-left: 10px;"
-                + "color: red;"
-                + "font-weight: bolder;"
-                + "font-size: 25px;"
-                + "background-color: gainsboro;"
-                + "}");
-        styles.add(".v-drag-over {border-style: dashed;}");
+        styles.add(".card {" + "width: 150px;" + "height: 200px;"
+                + "border: 1px solid black;" + "border-radius: 7px;"
+                + "padding-left: 10px;" + "color: red;" + "font-weight: bolder;"
+                + "font-size: 25px;" + "background-color: gainsboro;" + "}");
+        styles.add(".v-label-drag-center {border-style: dashed;}");
         styles.add(".dragged {opacity: .4;}");
     }