Implement diff transformation for properties

Test: N/A
Change-Id: Ib231e617db3d87fe1abe20e95137d9af17572d19

tools/winscope/src/TreeView.vue

@@ -15,7 +15,7 @@
 <template>
   <div class="tree-view" v-if="item">
     <div class="node"
-      :class="{ leaf: isLeaf, selected: isSelected, clickable: isClickable }"
+      :class="{ leaf: isLeaf, selected: isSelected, clickable: isClickable, diffClass }"
       :style="nodeOffsetStyle"
       @click="clicked"
       ref="node"
@@ -76,6 +76,8 @@
 import jsonProtoDefs from "frameworks/base/core/proto/android/server/windowmanagertrace.proto";
 import protobuf from "protobufjs";
 
+import { DiffType } from "./utils/diff.js";
+
 var protoDefs = protobuf.Root.fromJSON(jsonProtoDefs);
 var TraceMessage = protoDefs.lookupType(
   "com.android.server.wm.WindowManagerTraceFileProto"
@@ -116,6 +118,12 @@ export default {
       clickTimeout: null,
       isCollapsedByDefault,
       localCollapsedState: isCollapsedByDefault,
+      diffSymbol: {
+        [DiffType.NONE]: "",
+        [DiffType.ADDED]: "+",
+        [DiffType.DELETED]: "-",
+        [DiffType.MODIFIED]: ".",
+      },
     };
   },
   methods: {
@@ -271,6 +279,9 @@ export default {
 
       return false;
     },
+    diffClass() {
+      return this.item.diff ? this.item.diff.type : ''
+    },
     chipClassOrDefault() {
       return this.chipClass || "tree-view-chip";
     },
@@ -335,6 +346,18 @@ export default {
   background: #f1f1f1;
 }
 
+.tree-view .node:not(.selected).added {
+  background: chartreuse;
+}
+
+.tree-view .node:not(.selected).removed {
+  background: coral;
+}
+
+.tree-view .node:not(.selected).modified {
+  background: cyan;
+}
+
 .children {
   /* Aligns border with collapse arrows */
   margin-left: 12px;