From a37a8f2be6dfce99436bf682f994ca66fe3fcd99 Mon Sep 17 00:00:00 2001
From: Shashwat <shashwatkansal@google.com>
Date: Wed, 14 Jul 2021 16:30:28 +0000
Subject: [PATCH] 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       |  2 +-
 tools/winscope/src/DataInput.vue | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/tools/winscope/src/App.vue b/tools/winscope/src/App.vue
index 1b0d5ef0f..89627c6b2 100644
--- a/tools/winscope/src/App.vue
+++ b/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>
diff --git a/tools/winscope/src/DataInput.vue b/tools/winscope/src/DataInput.vue
index 1fd7a3d84..6517ad36b 100644
--- a/tools/winscope/src/DataInput.vue
+++ b/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);