title: No modifier keys registered in Firefox Mac during external drag and drop onto window
body: <p>In Safari the following code shows what modifier keys are being pressed when dragging and dropping. But in Firefox the modifier keys are not being registered. </p>
  
  <p>Test code, <a href="https://jsfiddle.net/omofkgdv/21/" rel="nofollow noreferrer">https://jsfiddle.net/omofkgdv/21/</a>. </p>
  
  <p><a href="https://i.stack.imgur.com/PCllG.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PCllG.gif" alt="enter image description here"></a></p>
  
  <p><em>The Command key is being tested here but none of the modifier keys (Shift, Alt, CTRL, or Command) register.</em></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function() {
    var element = document.getElementById("dropzone");
    var useCapture = true;
    
    dragHandler = function(e) {
      e = e || event;
      e.preventDefault();
      console.log("ctrl:" + e.ctrlKey + ", shift:" + e.shiftKey + ", alt:" + e.altKey + ", meta:" + e.metaKey + ", type:" + e.type);
      //console.log(e);
    }
  
    element.addEventListener("dragenter", dragHandler, useCapture);
    element.addEventListener("dragleave", dragHandler, useCapture);
    element.addEventListener("dragover", dragHandler, useCapture);
    element.addEventListener("dragexit", dragHandler, useCapture);
    element.addEventListener("dragend", dragHandler, useCapture);
    element.addEventListener("drop", dragHandler, useCapture);
  
  }())</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.dropzone {
    color:white;
    background-color:#2662ff;
    left:5px;
    right:5px;
    top:5px;
    bottom:5px;
    padding:5px;
    display:block;
    position:absolute;
  }
  .dropzone:-moz-drag-over {
    outline: 2px dashed black;
  }
  .dropzone:drag-over {
    outline: 2px dashed green;
  }
  .dropzone:dragover {
    outline: 2px dashed black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="dropzone" class="dropzone"&gt;Drop external file here&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>OSX 10.11, Firefox 58</p>
  
  <p><strong>Steps to reproduce</strong><br>
  1. Open browser and add event handlers to document (see example)
  2. Open finder and drag over the document or element
  3. While dragging hold down shift, alt, ctrl or command key
  4. Release the mouse button</p>
  
  <p><strong>Expected Result</strong><br>
  Event reflects the modifier keys that are pressed</p>
  
  <p><strong>Actual Result</strong><br>
  In specific test provided the event the modifier key values are all false. Note if the window has focus the modifier keys sometimes show up (needs more testing for when it works). See gif and link to example provided. </p>