Property changes now show up on hierarchy view.

Entries that have a modification are now highlighted in cyan on the
hierarchy view.

Test: Find any entry, run a trace - if any properties change at a
particular timestamp they should be highlighted as cyan on the hierarchy
view.

Bug: b/162302603
Change-Id: I1d187ac669f1ff479b7f4e46903576380454a709

tools/winscope/src/TraceView.vue

@@ -32,7 +32,7 @@
         >
           <h2 class="md-title" style="flex: 1;">Hierarchy</h2>
           <md-checkbox
-            v-model="showHierachyDiff"
+            v-model="showHierarchyDiff"
             v-if="diffVisualizationAvailable"
           >
             Show Diff
@@ -116,7 +116,7 @@
             <i class="material-icons none-icon">
               filter_none
             </i>
-            <span>No element selected in the hierachy.</span>
+            <span>No element selected in the hierarchy.</span>
           </div>
         </div>
       </flat-card>
@@ -178,7 +178,7 @@ export default {
       item: null,
       tree: null,
       highlight: null,
-      showHierachyDiff: false,
+      showHierarchyDiff: false,
       displayDefaults: false,
       showPropertiesDiff: false,
       PropertiesTreeElement,
@@ -219,7 +219,7 @@ export default {
       }
     },
     generateTreeFromItem(item) {
-      if (!this.showHierachyDiff || !this.diffVisualizationAvailable) {
+      if (!this.showHierarchyDiff || !this.diffVisualizationAvailable) {
         return item;
       }
 
@@ -314,7 +314,7 @@ export default {
     selectedIndex() {
       this.setData(this.file.data[this.file.selectedIndex ?? 0]);
     },
-    showHierachyDiff() {
+    showHierarchyDiff() {
       this.tree = this.generateTreeFromItem(this.item);
     },
     showPropertiesDiff() {

tools/winscope/src/TreeView.vue

@@ -100,7 +100,7 @@
         v-on:selected="immediateChildSelected = true"
         v-on:unselected="immediateChildSelected = false"
         :elementView="elementView"
-        v-on:collapseSibbling="collapseSibbling"
+        v-on:collapseSibling="collapseSibling"
         v-on:collapseAllOtherNodes="collapseAllOtherNodes"
         v-on:closeAllContextMenus="closeAllContextMenus"
         ref="children"
@@ -352,9 +352,9 @@ export default {
     },
     collapseAllOtherNodes() {
       this.$emit('collapseAllOtherNodes');
-      this.$emit('collapseSibbling', this.item);
+      this.$emit('collapseSibling', this.item);
     },
-    collapseSibbling(item) {
+    collapseSibling(item) {
       if (!this.$refs.children) {
         return;
       }

tools/winscope/src/utils/diff.js

@@ -35,7 +35,7 @@ export function defaultModifiedCheck(newNode, oldNode) {
     return true;
   }
 
-  return JSON.stringify(newNode.obj) !== JSON.stringify(oldNode.obj);
+  return !newNode.equals(oldNode);
 }
 
 export class DiffGenerator {