Add drag and drop functionality to load files onto Winscope.

Bug: 129885954

Test: Drag and drop a .pb file onto winscope's right box on the home
screen labelled Open Files.

Change-Id: Id829ee773ff68c2a911fbfc35adf0e228701a988

tools/winscope/src/App.vue

@@ -36,7 +36,7 @@
             <dataadb class="adbinput" ref="adb" :store="store"
               @dataReady="onDataReady" @statusChange="setStatus" />
           </div>
-          <div class="input">
+          <div class="input" @dragover.prevent @drop.prevent>
             <datainput class="fileinput" ref="input" :store="store"
               @dataReady="onDataReady" @statusChange="setStatus" />
           </div>

tools/winscope/src/DataInput.vue

@@ -13,6 +13,7 @@
      limitations under the License.
 -->
 <template>
+<div @dragleave="fileDragOut" @dragover="fileDragIn" @drop="handleFileDrop">
   <flat-card style="min-width: 50em">
     <md-card-header>
       <div class="md-title">Open files</div>
@@ -98,6 +99,7 @@
       </div>
     </md-snackbar>
   </flat-card>
+</div>
 </template>
 <script>
 import FlatCard from './components/FlatCard.vue';
@@ -224,6 +226,18 @@ export default {
         });
       }
     },
+    fileDragIn(e){
+      e.preventDefault();
+    },
+    fileDragOut(e){
+      e.preventDefault();
+    },
+    handleFileDrop(e) {
+      e.preventDefault();
+      let droppedFiles = e.dataTransfer.files;
+      if(!droppedFiles) return;
+      this.processFiles(droppedFiles);
+    },
     onLoadFile(e) {
       const files = event.target.files || event.dataTransfer.files;
       this.processFiles(files);