Download trace files from Winscope

Added a download file button to DataView.

Bug:
Test: yarn run dev
Change-Id: I203f3f19168c43a0dbefb3ec00237c021380f89f
Merged-In: I203f3f19168c43a0dbefb3ec00237c021380f89f

tools/winscope/src/App.vue

@@ -20,8 +20,8 @@
     </md-whiteframe>
     <div class="main-content">
       <md-layout v-if="!dataLoaded" class="m-2">
-        <dataadb ref="adb" :store="store" @dataReady="onDataReady" @statusChange="setStatus"/>
-        <datainput ref="input" :store="store" @dataReady="onDataReady" @statusChange="setStatus"/>
+        <dataadb ref="adb" :store="store" @dataReady="onDataReady" @statusChange="setStatus" />
+        <datainput ref="input" :store="store" @dataReady="onDataReady" @statusChange="setStatus" />
       </md-layout>
       <md-card v-if="dataLoaded">
         <md-whiteframe md-tag="md-toolbar" md-elevation="0" class="card-toolbar md-transparent md-dense">
@@ -87,6 +87,7 @@ export default {
   },
   methods: {
     clear() {
+      this.files.forEach(function(item) { item.destroy(); })
       this.files = [];
       this.activeDataView = null;
     },
@@ -200,7 +201,7 @@ export default {
   flex-wrap: wrap;
 }
 
-.md-layout > .md-card {
+.md-layout>.md-card {
   margin: 0.5em;
 }
 

tools/winscope/src/DataAdb.vue

@@ -112,7 +112,7 @@
   </md-card>
 </template>
 <script>
-import { dataFile, FILE_TYPES, DATA_TYPES } from './decode.js'
+import { FILE_TYPES, DATA_TYPES } from './decode.js'
 import LocalStore from './localstore.js'
 
 const STATES = {

tools/winscope/src/DataInput.vue

@@ -52,7 +52,7 @@
     </md-card>
 </template>
 <script>
-import { detectAndDecode, dataFile, FILE_TYPES, DATA_TYPES } from './decode.js'
+import { detectAndDecode, FILE_TYPES, DATA_TYPES } from './decode.js'
 
 export default {
   name: 'datainput',

tools/winscope/src/DataView.vue

@@ -15,9 +15,14 @@
 <template>
   <md-card v-if="file">
     <md-card-header>
-      <div class="md-title">
-        <md-icon>{{file.type.icon}}</md-icon> {{file.filename}}
-      </div>
+      <md-card-header-text>
+        <div class="md-title">
+          <md-icon>{{file.type.icon}}</md-icon> {{file.filename}}
+        </div>
+      </md-card-header-text>
+      <md-button :href="file.blobUrl" :download="file.filename" class="md-icon-button">
+        <md-icon>save_alt</md-icon>
+      </md-button>
     </md-card-header>
     <traceview v-if="isTrace" :store="store" :file="file" ref="view" />
     <videoview v-if="isVideo" :file="file" ref="view" />
@@ -50,15 +55,15 @@ export default {
   computed: {
     isTrace() {
       return this.file.type == DATA_TYPES.WINDOW_MANAGER ||
-          this.file.type == DATA_TYPES.SURFACE_FLINGER ||
-          this.file.type == DATA_TYPES.TRANSACTION || this.file.type == DATA_TYPES.WAYLAND
+        this.file.type == DATA_TYPES.SURFACE_FLINGER ||
+        this.file.type == DATA_TYPES.TRANSACTION || this.file.type == DATA_TYPES.WAYLAND
     },
     isVideo() {
       return this.file.type == DATA_TYPES.SCREEN_RECORDING;
     },
     isLog() {
       return this.file.type == DATA_TYPES.WINDOW_LOG
-    }
+    },
   },
   components: {
     'traceview': TraceView,
@@ -74,4 +79,5 @@ export default {
   font-size: 4em;
   color: red;
 }
+
 </style>

tools/winscope/src/VideoView.vue

@@ -19,7 +19,7 @@
         <h2 class="md-title">Screen</h2>
       </md-whiteframe>
       <md-whiteframe md-elevation="8">
-        <video :id="file.filename" class="screen" :src="videoUri" />
+        <video :id="file.filename" class="screen" :src="file.data" />
       </md-whiteframe>
     </md-card>
   </md-card-content>
@@ -63,9 +63,6 @@ export default {
     selectedIndex() {
       return this.file.selectedIndex;
     },
-    videoUri() {
-      return "data:video/mp4;base64," + btoa(uint8ToString(this.file.data));
-    }
   },
 }
 

tools/winscope/src/decode.js

@@ -59,26 +59,32 @@ const DATA_TYPES = {
   WINDOW_MANAGER: {
     name: "WindowManager",
     icon: "view_compact",
+    mime: "application/octet-stream",
   },
   SURFACE_FLINGER: {
     name: "SurfaceFlinger",
     icon: "filter_none",
+    mime: "application/octet-stream",
   },
   SCREEN_RECORDING: {
     name: "Screen recording",
     icon: "videocam",
+    mime: "video/mp4",
   },
   TRANSACTION: {
     name: "Transaction",
     icon: "timeline",
+    mime: "application/octet-stream",
   },
   WAYLAND: {
     name: "Wayland",
     icon: "filter_none",
+    mime: "application/octet-stream",
   },
   WINDOW_LOG: {
     name: "WindowManager log",
     icon: "notes",
+    mime: "application/octet-stream",
   }
 }
 
@@ -219,21 +225,27 @@ function protoDecoder(buffer, fileType, fileName, store) {
   } else {
     data = [transformed];
   }
-  return dataFile(fileName, data.map(x => x.timestamp), data, fileType.dataType);
+  let blobUrl = URL.createObjectURL(new Blob([buffer], { type: fileType.dataType.mime }));
+  return dataFile(fileName, data.map(x => x.timestamp), data, blobUrl, fileType.dataType);
 }
 
 function videoDecoder(buffer, fileType, fileName, store) {
-  var [data, timeline] = fileType.decoderParams.videoDecoder(buffer)
-  return dataFile(fileName, timeline, data, fileType.dataType);
+  let [data, timeline] = fileType.decoderParams.videoDecoder(buffer);
+  let blobUrl = URL.createObjectURL(new Blob([data], { type: fileType.dataType.mime }));
+  return dataFile(fileName, timeline, blobUrl, blobUrl, fileType.dataType);
 }
 
-function dataFile(filename, timeline, data, type) {
+function dataFile(filename, timeline, data, blobUrl, type) {
   return {
     filename: filename,
     timeline: timeline,
     data: data,
+    blobUrl: blobUrl,
     type: type,
     selectedIndex: 0,
+    destroy() {
+      URL.revokeObjectURL(this.blobUrl);
+    },
   }
 }
 
@@ -283,4 +295,4 @@ function detectAndDecode(buffer, fileName, store) {
   throw new Error('Unable to detect file');
 }
 
-export { detectAndDecode, dataFile, DATA_TYPES, FILE_TYPES };
+export { detectAndDecode, DATA_TYPES, FILE_TYPES };