Fix flat and visible checkboxes on trace views.

Now ticking the flat checkbox displays all entries without indentation,
and only visible entries are shown upon ticking only visible.

Bug: b/196951608

Test: upload a WM or SF trace and tick flat - all entries should be
aligned to left of Hierarchy box.

Change-Id: Iedb755d94895afcdca334871e980064c79430206

tools/winscope/src/SurfaceFlingerTraceView.vue

@@ -21,7 +21,7 @@
 import TraceView from '@/TraceView.vue';
 
 export default {
-  name: 'WindowManagerTraceView',
+  name: 'SurfaceFlingerTraceView',
   props: ['store', 'file'],
   components: {
     TraceView,

tools/winscope/src/TraceView.vue

@@ -55,6 +55,7 @@
             :selected="hierarchySelected"
             :filter="hierarchyFilter"
             :flattened="store.flattened"
+            :onlyVisible="store.onlyVisible"
             :items-clickable="true"
             :useGlobalCollapsedState="true"
             :simplify-names="store.simplifyNames"

tools/winscope/src/TreeView.vue

@@ -31,7 +31,7 @@
       <button
         class="toggle-tree-btn"
         @click="toggleTree"
-        v-if="!isLeaf"
+        v-if="!isLeaf && !flattened"
         v-on:click.stop
       >
         <i aria-hidden="true" class="md-icon md-theme-default material-icons">
@@ -78,7 +78,7 @@
       v-on:collapseAllOtherNodes="collapseAllOtherNodes"
     />
 
-    <div class="children" v-if="children" v-show="!isCollapsed">
+    <div class="children" v-if="children" v-show="!isCollapsed" :style="childrenIndentation()">
       <tree-view
         v-for="(c,i) in children"
         :item="c"
@@ -87,6 +87,7 @@
         :key="i"
         :filter="childFilter(c)"
         :flattened="flattened"
+        :onlyVisible="onlyVisible"
         :simplify-names="simplifyNames"
         :force-flattened="applyingFlattened"
         v-show="filterMatches(c)"
@@ -141,6 +142,7 @@ export default {
     'useGlobalCollapsedState',
     // Custom view to use to render the elements in the tree view
     'elementView',
+    'onlyVisible',
   ],
   data() {
     const isCollapsedByDefault = this.collapse ?? false;
@@ -277,7 +279,7 @@ export default {
       }
 
       if (!this.isLeaf && e.detail % 2 === 0) {
-        // Double click collaspable node
+        // Double click collapsable node
         this.toggleTree();
       } else {
         this.select();
@@ -408,6 +410,23 @@ export default {
         child.closeAllChildrenContextMenus();
       }
     },
+    childrenIndentation() {
+      if (this.flattened || this.forceFlattened) {
+        return {
+          marginLeft: '0px',
+          paddingLeft: '0px',
+          marginTop: '0px',
+        }
+      } else {
+        //Aligns border with collapse arrows
+        return {
+          marginLeft: '12px',
+          paddingLeft: '11px',
+          borderLeft: '1px solid rgb(238, 238, 238)',
+          marginTop: '0px',
+        }
+      }
+    }
   },
   computed: {
     hasDiff() {
@@ -466,9 +485,13 @@ export default {
     nodeOffsetStyle() {
       const offset = levelOffset * (this.depth + this.isLeaf) + 'px';
 
+      var display = "";
+      if (this.onlyVisible && !this.item.isVisible) display = 'none';
+
       return {
         marginLeft: '-' + offset,
         paddingLeft: offset,
+        display: display,
       };
     },
   },
@@ -567,14 +590,6 @@ export default {
   color: white;
 }
 
-.children {
-  /* Aligns border with collapse arrows */
-  margin-left: 12px;
-  padding-left: 11px;
-  border-left: 1px solid rgb(238, 238, 238);
-  margin-top: 0px;
-}
-
 .tree-view .node.child-selected + .children {
   border-left: 1px solid #b4b4b4;
 }