bugfix: firefox drag should no longer highlight dom elements

src/atlasViewer/widgetUnit/widgetUnit.component.ts

-import { Component, ViewChild, ViewContainerRef,ComponentRef, HostBinding, HostListener, Output, EventEmitter, Input } from "@angular/core";
+import { Component, ViewChild, ViewContainerRef,ComponentRef, HostBinding, HostListener, Output, EventEmitter, Input, ElementRef } from "@angular/core";
 import { WidgetServices } from "./widgetService.service";
 
 
@@ -11,6 +11,7 @@ import { WidgetServices } from "./widgetService.service";
 
 export class WidgetUnit {
   @ViewChild('container',{read:ViewContainerRef}) container : ViewContainerRef
+  @ViewChild('emptyspan',{read:ElementRef}) emtpy : ElementRef
 
   @HostBinding('attr.state')
   public state : 'docked' | 'floating' = 'docked'
@@ -96,31 +97,34 @@ export class WidgetUnit {
   reposStartMousePos : [number,number] = [0,0]
   repositionFlag : boolean = false
 
-  @HostListener('document:mousemove',['$event'])
+  /* nb FF does not provide event.clientX / event.clientY on drag event. So will have to attach dragover event listener */
+  /* ref: https://bugzilla.mozilla.org/show_bug.cgi?id=505521 */
+  @HostListener('document:dragover',['$event'])
   mousemove(ev:MouseEvent){
-    if(!this.repositionFlag) return
+    if(this.repositionFlag){
+      this.position[0] = this.reposStartViewPos[0] - this.reposStartMousePos[0] + ev.clientX
+      this.position[1] = this.reposStartViewPos[1] - this.reposStartMousePos[1] + ev.clientY
+    }
+  }
 
-    this.position[0] = this.reposStartViewPos[0] - this.reposStartMousePos[0] + ev.clientX
-    this.position[1] = this.reposStartViewPos[1] - this.reposStartMousePos[1] + ev.clientY
+  dragend(ev:DragEvent){
+    this.repositionFlag = false
   }
 
-  mousedown(ev:MouseEvent){
+  dragstart(ev:DragEvent){
     this.reposStartMousePos[0] = ev.clientX
     this.reposStartMousePos[1] = ev.clientY
 
     this.reposStartViewPos[0] = this.position[0]
     this.reposStartViewPos[1] = this.position[1]
 
-    this.repositionFlag = true;
-    document.body.style.pointerEvents = 'none'
-    document.body.style.userSelect = 'none'
-  }
+    this.repositionFlag = true
+
+    /* nb FF requires dataTransfer.setData in order to fire the drag or dragover event */
+    ev.dataTransfer.setData('application/node type', '')
 
-  @HostListener('document:mouseup',['$event'])
-  mouseup(_ev:MouseEvent){
-    this.repositionFlag = false;
-    document.body.style.pointerEvents = 'all'
-    document.body.style.userSelect = 'initial'
+    /* nb FF will render any invisible DOM element as a file icon.  */
+    ev.dataTransfer.setDragImage(this.emtpy.nativeElement, 0, 0)
   }
 
   get transform(){

src/atlasViewer/widgetUnit/widgetUnit.style.css

@@ -41,4 +41,9 @@ panel-component[widgetUnitPanel]
 :host-context([state='floating']) div[widgetUnitHeading]:hover
 {
   cursor : move;
+}
+
+[emptyspan]
+{
+  opacity:0.01;
 }
\ No newline at end of file

src/atlasViewer/widgetUnit/widgetUnit.template.html

@@ -2,12 +2,14 @@
   [style.transform] = "transform"
   [containerClass] = "containerClass"
   widgetUnitPanel
-  [bodyCollapsable] = "state === 'docked'"
-  >
+  [bodyCollapsable] = "state === 'docked'">
   <div 
-    (mousedown) = "mousedown($event)"
+    draggable = "true"
+    (dragend) = "dragend($event)"
+    (dragstart) = "dragstart($event)"
     widgetUnitHeading 
     heading>
+    <div #emptyspan emptyspan>.</div>
     <div title>{{ title }}</div>
     <div icons>
       <i *ngIf = "state === 'floating'"

src/components/dropdown/dropdown.component.ts

@@ -45,8 +45,10 @@ export class DropdownComponent{
 
   @HostListener('document:click',['$event'])
   close(event:MouseEvent){
-    /* FF does not implement event.srcElement so use event.originalTarget to polyfill for FF */
-    const contains = this.dropdownToggle.nativeElement.contains(event.srcElement) || this.dropdownToggle.nativeElement.contains((event as any).originalTarget)
+    /* FF <62 does not implement event.srcElement so use event.originalTarget to polyfill for FF */
+    const contains = event.srcElement 
+      ? this.dropdownToggle.nativeElement.contains(event.srcElement)
+      : this.dropdownToggle.nativeElement.contains((event as any).originalTarget)
     if(contains)
       this.openState = !this.openState
     else

src/ui/banner/banner.component.ts

@@ -185,8 +185,11 @@ export class AtlasBanner implements OnDestroy{
     if(!this.inputRegionPopover)
       return
       
-    /* FF does not implement event.srcElement so use event.originalTarget to polyfill for FF */
-    const contains = this.inputRegionPopover.nativeElement.contains(event.srcElement) || this.inputRegionPopover.nativeElement.contains((event as any).originalTarget)
+    /* FF < 62 does not implement event.srcElement so use event.originalTarget to polyfill for FF */
+    
+    const contains = event.srcElement 
+      ? this.inputRegionPopover.nativeElement.contains(event.srcElement)
+      : this.inputRegionPopover.nativeElement.contains((event as any).originalTarget)
     if(contains)
       this.showRegionTree = true
     else