diff --git a/tools/winscope/.gitignore b/tools/winscope/.gitignore
new file mode 100644
index 000000000..c2658d7d1
--- /dev/null
+++ b/tools/winscope/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/tools/winscope/src/App.vue b/tools/winscope/src/App.vue
index 19d380c8e..3170b02a1 100644
--- a/tools/winscope/src/App.vue
+++ b/tools/winscope/src/App.vue
@@ -16,169 +16,63 @@
   <div id="app">
     <md-whiteframe md-tag="md-toolbar">
       <h1 class="md-title" style="flex: 1">{{title}}</h1>
-
-      <div>
-          <md-checkbox v-model="store.displayDefaults">Show default properties
-            <md-tooltip md-direction="bottom">
-              If checked, shows the value of all properties.
-              Otherwise, hides all properties whose value is the default for its data type.
-            </md-tooltip>
-          </md-checkbox>
-      </div>
-
-      <input type="file" @change="onLoadFile" id="upload-file" v-show="false"/>
-      <label class="md-button md-accent md-raised md-theme-default" for="upload-file">Open File</label>
-
-      <div>
-        <md-select v-model="fileType" id="file-type" placeholder="File type">
-          <md-option value="auto">Detect type</md-option>
-          <md-option :value="k" v-for="(v,k) in FILE_TYPES">{{v.name}}</md-option>
-        </md-select>
-      </div>
-
+      <a class="md-button md-accent md-raised md-theme-default" @click="clear()" v-if="dataLoaded">Clear</a>
     </md-whiteframe>
-
-    <div class="main-content" v-if="timeline.length">
-      <md-card class="timeline-card">
-        <md-whiteframe md-tag="md-toolbar" md-elevation="0" class="card-toolbar md-transparent md-dense"><h2 class="md-title">Timeline</h2></md-whiteframe>
-        <timeline :items="timeline" :selected="tree" @item-selected="onTimelineItemSelected" class="timeline" />
+    <div class="main-content">
+      <datainput v-if="!dataLoaded" ref="input" :store="store" @dataReady="onDataReady" @statusChange="setStatus" />
+      <md-card v-if="dataLoaded">
+        <md-whiteframe md-tag="md-toolbar" md-elevation="0" class="card-toolbar md-transparent md-dense">
+          <h2 class="md-title">Timeline</h2>
+        </md-whiteframe>
+        <md-list>
+          <md-list-item v-for="(file, idx) in files" :key="file.filename">
+            <md-icon>{{file.type.icon}}</md-icon>
+            <timeline :items="file.timeline" :selected-index="file.selectedIndex" :scale="scale" @item-selected="onTimelineItemSelected($event, idx)" class="timeline" />
+          </md-list-item>
+        </md-list>
       </md-card>
-
-      <div class="container">
-        <md-card class="rects">
-          <md-whiteframe md-tag="md-toolbar" md-elevation="0" class="card-toolbar md-transparent md-dense"><h2 class="md-title">Screen</h2></md-whiteframe>
-          <md-whiteframe md-elevation="8">
-            <rects :bounds="bounds" :rects="rects" :highlight="highlight" @rect-click="onRectClick" />
-          </md-whiteframe>
-        </md-card>
-
-        <md-card class="hierarchy">
-          <md-whiteframe md-tag="md-toolbar" md-elevation="0" class="card-toolbar md-transparent md-dense">
-            <h2 class="md-title" style="flex: 1;">Hierarchy</h2>
-            <md-checkbox v-model="store.onlyVisible">Only visible</md-checkbox>
-            <md-checkbox v-model="store.flattened">Flat</md-checkbox>
-          </md-whiteframe>
-          <tree-view :item="tree" @item-selected="itemSelected" :selected="hierarchySelected" :filter="hierarchyFilter" :flattened="store.flattened" ref="hierarchy" />
-        </md-card>
-
-        <md-card class="properties">
-          <md-whiteframe md-tag="md-toolbar" md-elevation="0" class="card-toolbar md-transparent md-dense">
-            <h2 class="md-title" style="flex: 1">Properties</h2>
-            <div class="filter">
-              <input id="filter" type="search" placeholder="Filter..." v-model="propertyFilterString" />
-            </div>
-          </md-whiteframe>
-          <tree-view :item="selectedTree" :filter="propertyFilter" />
-        </md-card>
-      </div>
+      <dataview v-for="file in files" :key="file.filename" :ref="file.filename" :store="store" :file="file" @focus="onDataViewFocus(file.filename)" />
     </div>
   </div>
 </template>
-
 <script>
-
-import jsonProtoDefs from 'frameworks/base/core/proto/android/server/windowmanagertrace.proto'
-import jsonProtoDefsSF from 'frameworks/native/services/surfaceflinger/layerproto/layerstrace.proto'
-import protobuf from 'protobufjs'
-
 import TreeView from './TreeView.vue'
 import Timeline from './Timeline.vue'
 import Rects from './Rects.vue'
-
-import detectFile from './detectfile.js'
+import DataView from './DataView.vue'
+import DataInput from './DataInput.vue'
 import LocalStore from './localstore.js'
 
-import {transform_json} from './transform.js'
-import {transform_layers, transform_layers_trace} from './transform_sf.js'
-import {transform_window_service, transform_window_trace} from './transform_wm.js'
-import {fill_transform_data, format_transform_type, is_simple_transform} from './matrix_utils.js'
+const APP_NAME = "Winscope"
 
-
-var protoDefs = protobuf.Root.fromJSON(jsonProtoDefs)
-    .addJSON(jsonProtoDefsSF.nested);
-
-var TraceMessage = protoDefs.lookupType(
-  "com.android.server.wm.WindowManagerTraceFileProto");
-var ServiceMessage = protoDefs.lookupType(
-  "com.android.server.wm.WindowManagerServiceDumpProto");
-var LayersMessage = protoDefs.lookupType("android.surfaceflinger.LayersProto");
-var LayersTraceMessage = protoDefs.lookupType("android.surfaceflinger.LayersTraceFileProto");
-
-function formatProto(obj) {
-  if (!obj || !obj.$type) {
-    return;
-  }
-  if (obj.$type.fullName === '.android.surfaceflinger.RectProto' ||
-      obj.$type.fullName === '.android.graphics.RectProto') {
-    return `(${obj.left}, ${obj.top})  -  (${obj.right}, ${obj.bottom})`;
-  } else if (obj.$type.fullName === '.android.surfaceflinger.FloatRectProto') {
-    return `(${obj.left.toFixed(3)}, ${obj.top.toFixed(3)})  -  (${obj.right.toFixed(3)}, ${obj.bottom.toFixed(3)})`;
-  }
-  else if (obj.$type.fullName === '.android.surfaceflinger.PositionProto') {
-    return `(${obj.x.toFixed(3)}, ${obj.y.toFixed(3)})`;
-  } else if (obj.$type.fullName === '.android.surfaceflinger.SizeProto') {
-    return `${obj.w} x ${obj.h}`;
-  } else if (obj.$type.fullName === '.android.surfaceflinger.ColorProto') {
-    return `r:${obj.r} g:${obj.g} \n b:${obj.b} a:${obj.a}`;
-  } else if (obj.$type.fullName === '.android.surfaceflinger.TransformProto') {
-    var transform_type = format_transform_type(obj);
-    if (is_simple_transform(obj)) {
-      return `${transform_type}`;
+// Find the index of the last element matching the predicate in a sorted array
+function findLastMatchingSorted(array, predicate) {
+  var a = 0;
+  var b = array.length - 1;
+  while (b - a > 1) {
+    var m = Math.floor((a + b) / 2);
+    if (predicate(array, m)) {
+      a = m;
+    } else {
+      b = m - 1;
     }
-    return `${transform_type}  dsdx:${obj.dsdx.toFixed(3)}   dtdx:${obj.dtdx.toFixed(3)}   dsdy:${obj.dsdy.toFixed(3)}   dtdy:${obj.dtdy.toFixed(3)}`;
   }
+  return predicate(array, b) ? b : a;
 }
 
-const FILE_TYPES = {
-  'window_dump': {
-    protoType: ServiceMessage,
-    transform: transform_window_service,
-    name: "WindowManager dump",
-    timeline: false,
-  },
-  'window_trace': {
-    protoType: TraceMessage,
-    transform: transform_window_trace,
-    name: "WindowManager trace",
-    timeline: true,
-  },
-  'layers_dump': {
-    protoType: LayersMessage,
-    transform: transform_layers,
-    name: "SurfaceFlinger dump",
-    timeline: false,
-  },
-  'layers_trace': {
-    protoType: LayersTraceMessage,
-    transform: transform_layers_trace,
-    name: "SurfaceFlinger trace",
-    timeline: true,
-  },
-};
-
 export default {
   name: 'app',
   data() {
     return {
-      selectedTree: {},
-      hierarchySelected: null,
-      tree: {},
-      timeline: [],
-      bounds: {},
-      rects: [],
-      highlight: null,
-      timelineIndex: 0,
-      title: "The Tool",
-      filename: "",
-      lastSelectedStableId: null,
-      propertyFilterString: "",
+      files: [],
+      title: APP_NAME,
+      currentTimestamp: 0,
+      activeDataView: null,
       store: LocalStore('app', {
         flattened: false,
         onlyVisible: false,
-        displayDefaults: true
+        displayDefaults: true,
       }),
-      FILE_TYPES,
-      fileType: "auto",
     }
   },
   created() {
@@ -186,195 +80,85 @@ export default {
     document.title = this.title;
   },
   methods: {
-    onLoadFile(e) {
-      return this.onLoadProtoFile(e, this.fileType);
+    clear() {
+      this.files = [];
     },
-    onLoadProtoFile(event, type) {
-      var files = event.target.files || event.dataTransfer.files;
-      var file = files[0];
-      if (!file) {
-        // No file selected.
-        return;
+    onTimelineItemSelected(index, timelineIndex) {
+      this.files[timelineIndex].selectedIndex = index;
+      var t = parseInt(this.files[timelineIndex].timeline[index].timestamp);
+      for (var i = 0; i < this.files.length; i++) {
+        if (i != timelineIndex) {
+          this.files[i].selectedIndex = findLastMatchingSorted(this.files[i].timeline, function(array, idx) {
+            return parseInt(array[idx].timestamp) <= t;
+          });
+        }
       }
-      this.filename = file.name;
-      this.title = this.filename + " (loading)";
-
-      var reader = new FileReader();
-      reader.onload = (e) => {
-        var buffer = new Uint8Array(e.target.result);
-        var filetype = FILE_TYPES[type] || FILE_TYPES[detectFile(buffer)];
-        if (!filetype) {
-          this.title = this.filename + ": Could not detect file type."
-          event.target.value = '';
-          return;
+      this.currentTimestamp = t;
+    },
+    advanceTimeline(direction) {
+      var closestTimeline = -1;
+      var timeDiff = Infinity;
+      for (var idx = 0; idx < this.files.length; idx++) {
+        var file = this.files[idx];
+        var cur = file.selectedIndex;
+        if (cur + direction < 0 || cur + direction >= this.files[idx].timeline.length) {
+          continue;
         }
-        this.title = this.filename + " (loading " + filetype.name + ")";
-
-        // Replace enum values with string representation and
-        // add default values to the proto objects. This function also handles
-        // a special case with TransformProtos where the matrix may be derived
-        // from the transform type.
-        function modifyProtoFields(protoObj, displayDefaults) {
-          if (!protoObj || protoObj !== Object(protoObj) || !protoObj.$type) {
-            return;
-          }
-          for (var fieldName in protoObj.$type.fields) {
-            var fieldProperties = protoObj.$type.fields[fieldName];
-            var field = protoObj[fieldName];
-
-            if (Array.isArray(field)) {
-              field.forEach((item, _) => {
-                modifyProtoFields(item, displayDefaults);
-              })
-              continue;
-            }
-
-            if (displayDefaults && !(field)) {
-              protoObj[fieldName] = fieldProperties.defaultValue;
-            }
-
-            if (fieldProperties.type === 'TransformProto'){
-              fill_transform_data(protoObj[fieldName]);
-              continue;
-            }
-
-            if (fieldProperties.resolvedType && fieldProperties.resolvedType.valuesById) {
-              protoObj[fieldName] = fieldProperties.resolvedType.valuesById[protoObj[fieldProperties.name]];
-              continue;
-            }
-
-            modifyProtoFields(protoObj[fieldName], displayDefaults);
-          }
+        var d = Math.abs(parseInt(file.timeline[cur + direction].timestamp) - this.currentTimestamp);
+        if (timeDiff > d) {
+          timeDiff = d;
+          closestTimeline = idx;
         }
-
-        try {
-          var decoded = filetype.protoType.decode(buffer);
-          modifyProtoFields(decoded, this.store.displayDefaults);
-          var transformed = filetype.transform(decoded);
-        } catch (ex) {
-          this.title = this.filename + " (loading " + filetype.name + "):" + ex;
-          return;
-        } finally {
-          event.target.value = '';
-        }
-
-        if (filetype.timeline) {
-          this.timeline = transformed.children;
-        } else {
-          this.timeline = [transformed];
-        }
-
-        this.title = this.filename + " (" + filetype.name + ")";
-
-        this.lastSelectedStableId = null;
-        this.onTimelineItemSelected(this.timeline[0], 0);
       }
-      reader.readAsArrayBuffer(files[0]);
-    },
-    itemSelected(item) {
-      this.hierarchySelected = item;
-      this.selectedTree = transform_json(item.obj, item.name, {
-          skip: item.skip,
-          formatter: formatProto});
-      this.highlight = item.highlight;
-      this.lastSelectedStableId = item.stableId;
-    },
-    onRectClick(item) {
-      if (item) {
-        this.itemSelected(item);
+      if (closestTimeline >= 0) {
+        this.files[closestTimeline].selectedIndex += direction;
+        this.currentTimestamp = parseInt(this.files[closestTimeline].timeline[this.files[closestTimeline].selectedIndex].timestamp);
       }
     },
-    onTimelineItemSelected(item, index) {
-      this.timelineIndex = index;
-      this.tree = item;
-      this.rects = [...item.rects].reverse();
-      this.bounds = item.bounds;
-
-      this.hierarchySelected = null;
-      this.selectedTree = {};
-      this.highlight = null;
-
-      function find_item(item, stableId) {
-        if (item.stableId === stableId) {
-          return item;
-        }
-        if (Array.isArray(item.children)) {
-          for (var child of item.children) {
-            var found = find_item(child, stableId);
-            if (found) {
-              return found;
-            }
-          }
-        }
-        return null;
-      }
-
-      if (this.lastSelectedStableId) {
-        var found = find_item(item, this.lastSelectedStableId);
-        if (found) {
-          this.itemSelected(found);
-        }
-      }
+    onDataViewFocus(view) {
+      this.activeDataView = view;
     },
     onKeyDown(event) {
       event = event || window.event;
-      if (event.keyCode == 37 /* left */) {
+      if (event.keyCode == 37 /* left */ ) {
         this.advanceTimeline(-1);
-      } else if (event.keyCode == 39 /* right */) {
+      } else if (event.keyCode == 39 /* right */ ) {
         this.advanceTimeline(1);
-      } else if (event.keyCode == 38 /* up */) {
-        this.$refs.hierarchy.selectPrev();
-      } else if (event.keyCode == 40 /* down */) {
-        this.$refs.hierarchy.selectNext();
+      } else if (event.keyCode == 38 /* up */ ) {
+        this.$refs[this.activeView][0].arrowUp();
+      } else if (event.keyCode == 40 /* down */ ) {
+        this.$refs[this.activeView][0].arrowDown();
       } else {
         return false;
       }
       event.preventDefault();
       return true;
     },
-    advanceTimeline(frames) {
-      if (!Array.isArray(this.timeline) || this.timeline.length == 0) {
-        return false;
-      }
-      var nextIndex = this.timelineIndex + frames;
-      if (nextIndex < 0) {
-        nextIndex = 0;
-      }
-      if (nextIndex >= this.timeline.length) {
-        nextIndex = this.timeline.length - 1;
-      }
-      this.onTimelineItemSelected(this.timeline[nextIndex], nextIndex);
-      return true;
+    onDataReady(files) {
+      this.files = files;
     },
+    setStatus(status) {
+      if (status) {
+        this.title = status;
+      } else {
+        this.title = APP_NAME;
+      }
+    }
   },
   computed: {
     prettyDump: function() { return JSON.stringify(this.dump, null, 2); },
-    hierarchyFilter() {
-      return this.store.onlyVisible ? (c, flattened) => {
-        return c.visible || c.childrenVisible && !flattened;
-      } : null;
-    },
-    propertyFilter() {
-      var filterStrings = this.propertyFilterString.split(",");
-      var positive = [];
-      var negative = [];
-      filterStrings.forEach((f) => {
-        if (f.startsWith("!")) {
-          var str = f.substring(1);
-          negative.push((s) => s.indexOf(str) === -1);
-        } else {
-          var str = f;
-          positive.push((s) => s.indexOf(str) !== -1);
-        }
-      });
-      var filter = (item) => {
-        var apply = (f) => f(item.name);
-        return (positive.length === 0 || positive.some(apply))
-            && (negative.length === 0 || negative.every(apply));
-      };
-      filter.includeChildren = true;
-      return filter;
+    dataLoaded: function() { return this.files.length > 0 },
+    scale() {
+      var mx = Math.max(...(this.files.map(f => Math.max(...f.timeline.map(t => t.timestamp)))));
+      var mi = Math.min(...(this.files.map(f => Math.min(...f.timeline.map(t => t.timestamp)))));
+      return [mi, mx];
     },
+    activeView: function() {
+      if (!this.activeDataView) {
+        this.activeDataView = this.files[0].filename;
+      }
+      return this.activeDataView;
+    }
   },
   watch: {
     title() {
@@ -382,58 +166,33 @@ export default {
     }
   },
   components: {
-    'tree-view': TreeView,
     'timeline': Timeline,
-    'rects': Rects,
-  }
+    'dataview': DataView,
+    'datainput': DataInput,
+  },
 }
+
 </script>
-
 <style>
-#app {
-}
-
-.main-content {
-  padding: 8px;
+.main-content>* {
+  margin: 1em;
 }
 
 .card-toolbar {
   border-bottom: 1px solid rgba(0, 0, 0, .12);
 }
 
-.timeline-card {
-  margin: 8px;
-}
-
 .timeline {
   margin: 16px;
 }
 
-.screen {
-  border: 1px solid black;
-}
-
 .container {
   display: flex;
   flex-wrap: wrap;
 }
 
-.rects {
-  flex: none;
-  margin: 8px;
-}
-
-.hierarchy, .properties {
-  flex: 1;
-  margin: 8px;
-  min-width: 400px;
-}
-
-.hierarchy > .tree-view, .properties > .tree-view {
-  margin: 16px;
-}
-
-h1, h2 {
+h1,
+h2 {
   font-weight: normal;
 }
 
@@ -450,4 +209,5 @@ li {
 a {
   color: #42b983;
 }
+
 </style>
diff --git a/tools/winscope/src/DataInput.vue b/tools/winscope/src/DataInput.vue
new file mode 100644
index 000000000..fe7710f18
--- /dev/null
+++ b/tools/winscope/src/DataInput.vue
@@ -0,0 +1,178 @@
+<!-- Copyright (C) 2019 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<template>
+  <md-layout class="md-alignment-top-center">
+    <md-card style="min-width: 50em">
+      <!-- v-if="!timeline.length" -->
+      <md-card-header>
+        <div class="md-title">Open files</div>
+      </md-card-header>
+      <md-card-content>
+        <md-list>
+          <md-list-item v-for="file in dataFiles" v-bind:key="file.filename">
+            <md-icon>{{file.type.icon}}</md-icon>
+            <span class="md-list-item-text">{{file.filename}} ({{file.type.name}})</span>
+            <md-button class="md-icon-button md-accent" @click="onRemoveFile(file.type.name)">
+              <md-icon>close</md-icon>
+            </md-button>
+          </md-list-item>
+        </md-list>
+        <div>
+          <md-checkbox v-model="store.displayDefaults">Show default properties
+            <md-tooltip md-direction="bottom">
+              If checked, shows the value of all properties.
+              Otherwise, hides all properties whose value is the default for its data type.
+            </md-tooltip>
+          </md-checkbox>
+        </div>
+        <div class="md-layout">
+          <div class="md-layout-item md-small-size-100">
+            <md-select v-model="fileType" id="file-type" placeholder="File type">
+              <md-option value="auto">Detect type</md-option>
+              <md-option :value="k" v-for="(v,k) in FILE_TYPES" v-bind:key="v.name">{{v.name}}</md-option>
+            </md-select>
+          </div>
+        </div>
+        <div class="md-layout md-gutter">
+          <input type="file" @change="onLoadFile" id="upload-file" v-show="false" />
+          <label class="md-button md-accent md-raised md-theme-default" for="upload-file">Add File</label>
+          <md-button v-if="dataReady" @click="onSubmit" class="md-button md-primary md-raised md-theme-default">Submit</md-button>
+        </div>
+      </md-card-content>
+    </md-card>
+  </md-layout>
+</template>
+<script>
+import jsonProtoDefs from 'frameworks/base/core/proto/android/server/windowmanagertrace.proto'
+import jsonProtoDefsSF from 'frameworks/native/services/surfaceflinger/layerproto/layerstrace.proto'
+import protobuf from 'protobufjs'
+
+import { detectFile, dataFile, FILE_TYPES, DATA_TYPES } from './detectfile.js'
+
+import { fill_transform_data } from './matrix_utils.js'
+
+var protoDefs = protobuf.Root.fromJSON(jsonProtoDefs)
+  .addJSON(jsonProtoDefsSF.nested);
+
+var TraceMessage = protoDefs.lookupType(
+  "com.android.server.wm.WindowManagerTraceFileProto");
+var ServiceMessage = protoDefs.lookupType(
+  "com.android.server.wm.WindowManagerServiceDumpProto");
+var LayersMessage = protoDefs.lookupType("android.surfaceflinger.LayersProto");
+var LayersTraceMessage = protoDefs.lookupType("android.surfaceflinger.LayersTraceFileProto");
+
+export default {
+  name: 'datainput',
+  data() {
+    return {
+      FILE_TYPES,
+      fileType: "auto",
+      dataFiles: {},
+    }
+  },
+  props: ['store'],
+  methods: {
+    onLoadFile(e) {
+      var type = this.fileType;
+      var files = event.target.files || event.dataTransfer.files;
+      var file = files[0];
+      if (!file) {
+        // No file selected.
+        return;
+      }
+      this.$emit('statusChange', this.filename + " (loading)");
+
+      var reader = new FileReader();
+      reader.onload = (e) => {
+        var buffer = new Uint8Array(e.target.result);
+        try {
+          if (FILE_TYPES[type]) {
+            var filetype = FILE_TYPES[type];
+            var decoded = filetype.protoType.decode(buffer);
+            modifyProtoFields(decoded, this.store.displayDefaults);
+            var transformed = filetype.transform(decoded);
+          } else {
+            var [filetype, decoded] = detectFile(buffer);
+            modifyProtoFields(decoded, this.store.displayDefaults);
+            var transformed = filetype.transform(decoded);
+          }
+        } catch (ex) {
+          this.$emit('statusChange', this.filename + ': ' + ex);
+          return;
+        } finally {
+          event.target.value = ''
+        }
+        this.$emit('statusChange', this.filename + " (loading " + filetype.name + ")");
+
+        // Replace enum values with string representation and
+        // add default values to the proto objects. This function also handles
+        // a special case with TransformProtos where the matrix may be derived
+        // from the transform type.
+        function modifyProtoFields(protoObj, displayDefaults) {
+          if (!protoObj || protoObj !== Object(protoObj) || !protoObj.$type) {
+            return;
+          }
+          for (var fieldName in protoObj.$type.fields) {
+            var fieldProperties = protoObj.$type.fields[fieldName];
+            var field = protoObj[fieldName];
+
+            if (Array.isArray(field)) {
+              field.forEach((item, _) => {
+                modifyProtoFields(item, displayDefaults);
+              })
+              continue;
+            }
+
+            if (displayDefaults && !(field)) {
+              protoObj[fieldName] = fieldProperties.defaultValue;
+            }
+
+            if (fieldProperties.type === 'TransformProto') {
+              fill_transform_data(protoObj[fieldName]);
+              continue;
+            }
+
+            if (fieldProperties.resolvedType && fieldProperties.resolvedType.valuesById) {
+              protoObj[fieldName] = fieldProperties.resolvedType.valuesById[protoObj[fieldProperties.name]];
+              continue;
+            }
+            modifyProtoFields(protoObj[fieldName], displayDefaults);
+          }
+        }
+        var timeline;
+        if (filetype.timeline) {
+          timeline = transformed.children;
+        } else {
+          timeline = [transformed];
+        }
+
+        this.$set(this.dataFiles, filetype.dataType.name, dataFile(file.name, timeline, filetype.dataType));
+        this.$emit('statusChange', null);
+      }
+      reader.readAsArrayBuffer(files[0]);
+    },
+    onRemoveFile(typeName) {
+      this.$delete(this.dataFiles, typeName);
+    },
+    onSubmit() {
+      this.$emit('dataReady', Object.keys(this.dataFiles).map(key => this.dataFiles[key]));
+    }
+  },
+  computed: {
+    dataReady: function() { return Object.keys(this.dataFiles).length > 0 }
+  }
+}
+
+</script>
diff --git a/tools/winscope/src/DataView.vue b/tools/winscope/src/DataView.vue
new file mode 100644
index 000000000..5a32b423e
--- /dev/null
+++ b/tools/winscope/src/DataView.vue
@@ -0,0 +1,215 @@
+<!-- Copyright (C) 2019 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<template>
+  <md-card v-if="tree">
+    <md-card-header>
+      <div class="md-title">
+        <md-icon>{{file.type.icon}}</md-icon> {{file.filename}}
+      </div>
+    </md-card-header>
+    <md-card-content class="container">
+      <md-card class="rects">
+        <md-whiteframe md-tag="md-toolbar" md-elevation="0" class="card-toolbar md-transparent md-dense">
+          <h2 class="md-title">Screen</h2>
+        </md-whiteframe>
+        <md-whiteframe md-elevation="8">
+          <rects :bounds="bounds" :rects="rects" :highlight="highlight" @rect-click="onRectClick" />
+        </md-whiteframe>
+      </md-card>
+      <md-card class="hierarchy">
+        <md-whiteframe md-tag="md-toolbar" md-elevation="0" class="card-toolbar md-transparent md-dense">
+          <h2 class="md-title" style="flex: 1;">Hierarchy</h2>
+          <md-checkbox v-model="store.onlyVisible">Only visible</md-checkbox>
+          <md-checkbox v-model="store.flattened">Flat</md-checkbox>
+        </md-whiteframe>
+        <tree-view :item="tree" @item-selected="itemSelected" :selected="hierarchySelected" :filter="hierarchyFilter" :flattened="store.flattened" ref="hierarchy" />
+      </md-card>
+      <md-card class="properties">
+        <md-whiteframe md-tag="md-toolbar" md-elevation="0" class="card-toolbar md-transparent md-dense">
+          <h2 class="md-title" style="flex: 1">Properties</h2>
+          <div class="filter">
+            <input id="filter" type="search" placeholder="Filter..." v-model="propertyFilterString" />
+          </div>
+        </md-whiteframe>
+        <tree-view :item="selectedTree" :filter="propertyFilter" />
+      </md-card>
+    </md-card-content>
+  </md-card>
+</template>
+<script>
+import TreeView from './TreeView.vue'
+import Timeline from './Timeline.vue'
+import Rects from './Rects.vue'
+
+import { transform_json } from './transform.js'
+import { format_transform_type, is_simple_transform } from './matrix_utils.js'
+
+function formatProto(obj) {
+  if (!obj || !obj.$type) {
+    return;
+  }
+  if (obj.$type.fullName === '.android.surfaceflinger.RectProto' ||
+    obj.$type.fullName === '.android.graphics.RectProto') {
+    return `(${obj.left}, ${obj.top})  -  (${obj.right}, ${obj.bottom})`;
+  } else if (obj.$type.fullName === '.android.surfaceflinger.FloatRectProto') {
+    return `(${obj.left.toFixed(3)}, ${obj.top.toFixed(3)})  -  (${obj.right.toFixed(3)}, ${obj.bottom.toFixed(3)})`;
+  } else if (obj.$type.fullName === '.android.surfaceflinger.PositionProto') {
+    return `(${obj.x.toFixed(3)}, ${obj.y.toFixed(3)})`;
+  } else if (obj.$type.fullName === '.android.surfaceflinger.SizeProto') {
+    return `${obj.w} x ${obj.h}`;
+  } else if (obj.$type.fullName === '.android.surfaceflinger.ColorProto') {
+    return `r:${obj.r} g:${obj.g} \n b:${obj.b} a:${obj.a}`;
+  } else if (obj.$type.fullName === '.android.surfaceflinger.TransformProto') {
+    var transform_type = format_transform_type(obj);
+    if (is_simple_transform(obj)) {
+      return `${transform_type}`;
+    }
+    return `${transform_type}  dsdx:${obj.dsdx.toFixed(3)}   dtdx:${obj.dtdx.toFixed(3)}   dsdy:${obj.dsdy.toFixed(3)}   dtdy:${obj.dtdy.toFixed(3)}`;
+  }
+}
+
+export default {
+  name: 'dataview',
+  data() {
+    return {
+      propertyFilterString: "",
+      selectedTree: {},
+      hierarchySelected: null,
+      lastSelectedStableId: null,
+      bounds: {},
+      rects: [],
+      tree: null,
+      highlight: null,
+    }
+  },
+  methods: {
+    itemSelected(item) {
+      this.hierarchySelected = item;
+      this.selectedTree = transform_json(item.obj, item.name, {
+        skip: item.skip,
+        formatter: formatProto
+      });
+      this.highlight = item.highlight;
+      this.lastSelectedStableId = item.stableId;
+      this.$emit('focus');
+    },
+    onRectClick(item) {
+      if (item) {
+        this.itemSelected(item);
+      }
+    },
+    setData(item) {
+      this.tree = item;
+      this.rects = [...item.rects].reverse();
+      this.bounds = item.bounds;
+
+      this.hierarchySelected = null;
+      this.selectedTree = {};
+      this.highlight = null;
+
+      function find_item(item, stableId) {
+        if (item.stableId === stableId) {
+          return item;
+        }
+        if (Array.isArray(item.children)) {
+          for (var child of item.children) {
+            var found = find_item(child, stableId);
+            if (found) {
+              return found;
+            }
+          }
+        }
+        return null;
+      }
+
+      if (this.lastSelectedStableId) {
+        var found = find_item(item, this.lastSelectedStableId);
+        if (found) {
+          this.itemSelected(found);
+        }
+      }
+    },
+    arrowUp() {
+      return this.$refs.hierarchy.selectPrev();
+    },
+    arrowDown() {
+      return this.$refs.hierarchy.selectNext();
+    },
+  },
+  created() {
+    this.setData(this.file.timeline[this.file.selectedIndex]);
+  },
+  watch: {
+    selectedIndex() {
+      this.setData(this.file.timeline[this.file.selectedIndex]);
+    }
+  },
+  props: ['store', 'file'],
+  computed: {
+    selectedIndex() {
+      return this.file.selectedIndex;
+    },
+    hierarchyFilter() {
+      return this.store.onlyVisible ? (c, flattened) => {
+        return c.visible || c.childrenVisible && !flattened;
+      } : null;
+    },
+    propertyFilter() {
+      var filterStrings = this.propertyFilterString.split(",");
+      var positive = [];
+      var negative = [];
+      filterStrings.forEach((f) => {
+        if (f.startsWith("!")) {
+          var str = f.substring(1);
+          negative.push((s) => s.indexOf(str) === -1);
+        } else {
+          var str = f;
+          positive.push((s) => s.indexOf(str) !== -1);
+        }
+      });
+      var filter = (item) => {
+        var apply = (f) => f(item.name);
+        return (positive.length === 0 || positive.some(apply)) &&
+          (negative.length === 0 || negative.every(apply));
+      };
+      filter.includeChildren = true;
+      return filter;
+    }
+  },
+  components: {
+    'tree-view': TreeView,
+    'rects': Rects,
+  }
+}
+
+</script>
+<style>
+.rects {
+  flex: none;
+  margin: 8px;
+}
+
+.hierarchy,
+.properties {
+  flex: 1;
+  margin: 8px;
+  min-width: 400px;
+}
+
+.hierarchy>.tree-view,
+.properties>.tree-view {
+  margin: 16px;
+}
+</style>
\ No newline at end of file
diff --git a/tools/winscope/src/Timeline.vue b/tools/winscope/src/Timeline.vue
index f3ef8b2f0..e9525a46d 100644
--- a/tools/winscope/src/Timeline.vue
+++ b/tools/winscope/src/Timeline.vue
@@ -14,19 +14,15 @@
 -->
 <template>
   <svg width="2000" height="20" viewBox="-5,0,2010,20">
-    <circle :cx="translate(c.timestamp)" cy="10" r="5" v-for="(c,i) in items"
-      @click="onItemClick(c, i)" :class="itemClass(c)" />
+    <circle :cx="translate(c.timestamp)" cy="10" r="5" v-for="(c,i) in items" @click="onItemClick(c, i)" :class="itemClass(i)" />
   </svg>
 </template>
-
 <script>
-
 export default {
   name: 'timeline',
-  props: ['items', 'selected'],
-  data () {
-    return {
-    };
+  props: ['items', 'selectedIndex', 'scale'],
+  data() {
+    return {};
   },
   methods: {
     translate(cx) {
@@ -37,16 +33,13 @@ export default {
       return (cx - scale[0]) / (scale[1] - scale[0]) * 2000;
     },
     onItemClick(item, index) {
-      this.$emit('item-selected', item, index);
+      this.$emit('item-selected', index);
+    },
+    itemClass(index) {
+      return (this.selectedIndex == index) ? 'selected' : 'not-selected'
     },
-    itemClass(item) {
-      return (this.selected == item) ? 'selected' : 'not-selected'
-    }
   },
   computed: {
-    scale() {
-      return [Math.min(...this.timestamps), Math.max(...this.timestamps)];
-    },
     timestamps() {
       if (this.items.length == 1) {
         return [0];
@@ -55,10 +48,11 @@ export default {
     }
   },
 }
-</script>
 
+</script>
 <style scoped>
 .selected {
   fill: red;
 }
+
 </style>
diff --git a/tools/winscope/src/TreeView.vue b/tools/winscope/src/TreeView.vue
index 09fadf2bf..c7050f0db 100644
--- a/tools/winscope/src/TreeView.vue
+++ b/tools/winscope/src/TreeView.vue
@@ -21,14 +21,11 @@
       </div>
     </div>
     <div class="children" v-if="children">
-      <tree-view v-for="(c,i) in children" :item="c" @item-selected="childItemSelected" :selected="selected" :v-key="i" :chip-class='chipClass' :filter="childFilter(c)" :flattened="flattened"
-          :force-flattened="applyingFlattened" v-show="filterMatches(c)" ref='children' />
+      <tree-view v-for="(c,i) in children" :item="c" @item-selected="childItemSelected" :selected="selected" :key="i" :chip-class='chipClass' :filter="childFilter(c)" :flattened="flattened" :force-flattened="applyingFlattened" v-show="filterMatches(c)" ref='children' />
     </div>
   </div>
 </template>
-
 <script>
-
 import jsonProtoDefs from 'frameworks/base/core/proto/android/server/windowmanagertrace.proto'
 import protobuf from 'protobufjs'
 
@@ -41,9 +38,8 @@ var ServiceMessage = protoDefs.lookupType(
 export default {
   name: 'tree-view',
   props: ['item', 'selected', 'chipClass', 'filter', 'flattened', 'force-flattened'],
-  data () {
-    return {
-    };
+  data() {
+    return {};
   },
   methods: {
     selectNext(found, parent) {
@@ -84,7 +80,8 @@ export default {
     },
     chipClassForChip(c) {
       return ['tree-view-internal-chip', this.chipClassOrDefault,
-          this.chipClassOrDefault + '-' + (c.class || 'default')];
+        this.chipClassOrDefault + '-' + (c.class || 'default')
+      ];
     },
     filterMatches(c) {
       if (this.filter) {
@@ -117,22 +114,26 @@ export default {
     },
   }
 }
-</script>
 
+</script>
 <style>
 .children {
   margin-left: 24px;
 }
+
 .kind {
   color: #333;
 }
+
 .selected {
   background-color: #3f51b5;
   color: white;
 }
-.selected .kind{
+
+.selected .kind {
   color: #ccc;
 }
+
 .tree-view-internal-chip {
   display: inline-block;
 }
diff --git a/tools/winscope/src/detectfile.js b/tools/winscope/src/detectfile.js
index 88dc2d1b9..74e3888f7 100644
--- a/tools/winscope/src/detectfile.js
+++ b/tools/winscope/src/detectfile.js
@@ -14,9 +14,78 @@
  * limitations under the License.
  */
 
+
+import jsonProtoDefs from 'frameworks/base/core/proto/android/server/windowmanagertrace.proto'
+import jsonProtoDefsSF from 'frameworks/native/services/surfaceflinger/layerproto/layerstrace.proto'
+import protobuf from 'protobufjs'
+import { transform_layers, transform_layers_trace } from './transform_sf.js'
+import { transform_window_service, transform_window_trace } from './transform_wm.js'
+
+var protoDefs = protobuf.Root.fromJSON(jsonProtoDefs)
+  .addJSON(jsonProtoDefsSF.nested);
+
+var WindowTraceMessage = protoDefs.lookupType(
+  "com.android.server.wm.WindowManagerTraceFileProto");
+var WindowMessage = protoDefs.lookupType(
+  "com.android.server.wm.WindowManagerServiceDumpProto");
+var LayersMessage = protoDefs.lookupType("android.surfaceflinger.LayersProto");
+var LayersTraceMessage = protoDefs.lookupType("android.surfaceflinger.LayersTraceFileProto");
+
+
 const LAYER_TRACE_MAGIC_NUMBER = [0x09, 0x4c, 0x59, 0x52, 0x54, 0x52, 0x41, 0x43, 0x45] // .LYRTRACE
 const WINDOW_TRACE_MAGIC_NUMBER = [0x09, 0x57, 0x49, 0x4e, 0x54, 0x52, 0x41, 0x43, 0x45] // .WINTRACE
 
+const DATA_TYPES = {
+  WINDOW_MANAGER: {
+    name: "WindowManager",
+    icon: "view_compact",
+  },
+  SURFACE_FLINGER: {
+    name: "SurfaceFlinger",
+    icon: "filter_none",
+  },
+}
+
+const FILE_TYPES = {
+  'window_trace': {
+    protoType: WindowTraceMessage,
+    transform: transform_window_trace,
+    name: "WindowManager trace",
+    timeline: true,
+    dataType: DATA_TYPES.WINDOW_MANAGER,
+  },
+  'layers_trace': {
+    protoType: LayersTraceMessage,
+    transform: transform_layers_trace,
+    name: "SurfaceFlinger trace",
+    timeline: true,
+    dataType: DATA_TYPES.SURFACE_FLINGER,
+  },
+  'layers_dump': {
+    protoType: LayersMessage,
+    transform: transform_layers,
+    name: "SurfaceFlinger dump",
+    timeline: false,
+    dataType: DATA_TYPES.SURFACE_FLINGER,
+  },
+  'window_dump': {
+    protoType: WindowMessage,
+    transform: transform_window_service,
+    name: "WindowManager dump",
+    timeline: false,
+    dataType: DATA_TYPES.WINDOW_MANAGER,
+  },
+};
+
+function dataFile(filename, timeline, type) {
+  return {
+    filename: filename,
+    timeline: timeline,
+    type: type,
+    selectedIndex: 0,
+  }
+}
+
 function arrayEquals(a, b) {
   if (a.length !== b.length) {
     return false;
@@ -33,23 +102,28 @@ function arrayStartsWith(array, prefix) {
   return arrayEquals(array.slice(0, prefix.length), prefix);
 }
 
-/** buffer: Uint8Array */
-function detect(buffer) {
-  if (arrayStartsWith(buffer, LAYER_TRACE_MAGIC_NUMBER)) {
-    return 'layers_trace'
-  }
-  if (arrayStartsWith(buffer, WINDOW_TRACE_MAGIC_NUMBER)) {
-    return 'window_trace'
-  }
-  if (arrayStartsWith(buffer, [0x12])) {
-     // Because policy is empty, the first field in the dump is 2 currently.
-     // This might change.
-    return 'window_dump';
-  }
-  if (arrayStartsWith(buffer, [0x0a])) {
-    // For now; window_dump might soon start with 0x0a too.
-    return 'layers_dump';
-  }
+function decodedFile(filename, buffer) {
+  var decoded = FILE_TYPES[filename].protoType.decode(buffer);
+  return [FILE_TYPES[filename], decoded];
 }
 
-export default detect;
+function detectFile(buffer) {
+  if (arrayStartsWith(buffer, LAYER_TRACE_MAGIC_NUMBER)) {
+    return decodedFile('layers_trace', buffer);
+  }
+  if (arrayStartsWith(buffer, WINDOW_TRACE_MAGIC_NUMBER)) {
+    return decodedFile('window_trace', buffer);
+  }
+  for (var filename of ['layers_dump', 'window_dump']) {
+    try {
+      var [filetype, decoded] = decodedFile(filename, buffer);
+      var transformed = filetype.transform(decoded);
+      return [FILE_TYPES[filename], decoded];
+    } catch (ex) {
+      // ignore exception and try next filetype
+    }
+  }
+  throw new Error('Unable to detect file');
+}
+
+export { detectFile, dataFile, DATA_TYPES, FILE_TYPES };