Add tabs to hide/show data views.

All files with data views are shown by default. Click the chevron in the
top left of the view to expand/collapse the data view.

Bug: b/197626844

Test: upload or run a trace to the x20 staging version linked on the
bug.

Change-Id: I8fdd222e3299670285466fe97f958caa537a1f7e

tools/winscope/src/App.vue

@@ -54,6 +54,7 @@
               :file="file"
               :presentTags="Object.freeze(presentTags)"
               :presentErrors="Object.freeze(presentErrors)"
+              :dataViewFiles="dataViewFiles"
               @click="onDataViewFocus(file)"
             />
           </div>
@@ -105,6 +106,7 @@ export default {
         displayDefaults: true,
         navigationStyle: NAVIGATION_STYLE.GLOBAL,
         flickerTraceView: false,
+        showFileTypes: [],
       }),
       overlayRef: 'overlay',
       mainContentStyle: {
@@ -113,6 +115,7 @@ export default {
       presentTags: [],
       presentErrors: [],
       searchTypes: [SEARCH_TYPE.TIMESTAMP],
+      tagAndErrorTraces: false,
     };
   },
   created() {
@@ -168,7 +171,14 @@ export default {
       this.searchTypes = [SEARCH_TYPE.TIMESTAMP];
       if (this.tagAndErrorTraces) this.searchTypes.push(SEARCH_TYPE.TAG);
     },
+    /** Filter data view files by current show settings*/
+    updateShowFileTypes() {
+      this.store.showFileTypes = this.dataViewFiles
+        .filter((file) => file.show)
+        .map(file => file.type);
+    },
     clear() {
+      this.store.showFileTypes = [];
       this.$store.commit('clearFiles');
     },
     onDataViewFocus(file) {
@@ -198,6 +208,7 @@ export default {
       this.presentErrors = this.getUpdatedErrors();
       this.updateSearchTypes();
       this.updateFocusedView();
+      this.updateShowFileTypes();
     },
     setStatus(status) {
       if (status) {
@@ -216,7 +227,10 @@ export default {
   },
   computed: {
     files() {
-      return this.$store.getters.sortedFiles;
+      return this.$store.getters.sortedFiles.map(file => {
+        if (this.hasDataView(file)) file.show = true;
+        return file;
+      });
     },
     prettyDump() {
       return JSON.stringify(this.dump, null, 2);
@@ -232,7 +246,7 @@ export default {
       return this.activeDataView;
     },
     dataViewFiles() {
-      return this.files.filter((f) => this.hasDataView(f));
+      return this.files.filter((file) => this.hasDataView(file));
     },
     tagFiles() {
       return this.$store.getters.tagFiles;
@@ -308,8 +322,7 @@ export default {
   margin-top: 1em
 }
 
-h1,
-h2 {
+h1 {
   font-weight: normal;
 }
 

tools/winscope/src/DataView.vue

@@ -16,10 +16,15 @@
   <div @click="onClick($event)">
     <flat-card v-if="hasDataView(file)">
       <md-card-header>
+        <button class="toggle-view-button" @click="toggleView">
+          <i aria-hidden="true" class="md-icon md-theme-default material-icons">
+            {{ isShowFileType(file.type) ? "expand_more" : "chevron_right" }}
+          </i>
+        </button>
         <md-card-header-text>
           <div class="md-title">
             <md-icon>{{ TRACE_ICONS[file.type] }}</md-icon>
-            {{file.type}}
+            {{ file.type }}
           </div>
         </md-card-header-text>
         <md-button
@@ -31,13 +36,13 @@
         </md-button>
       </md-card-header>
       <AccessibilityTraceView
-        v-if="showInAccessibilityTraceView(file)"
+        v-if="showInAccessibilityTraceView(file) && isShowFileType(file.type)"
         :store="store"
         :file="file"
         ref="view"
       />
       <WindowManagerTraceView
-        v-if="showInWindowManagerTraceView(file)"
+        v-if="showInWindowManagerTraceView(file) && isShowFileType(file.type)"
         :store="store"
         :file="file"
         :presentTags="presentTags"
@@ -45,7 +50,7 @@
         ref="view"
       />
       <SurfaceFlingerTraceView
-        v-else-if="showInSurfaceFlingerTraceView(file)"
+        v-else-if="showInSurfaceFlingerTraceView(file) && isShowFileType(file.type)"
         :store="store"
         :file="file"
         :presentTags="presentTags"
@@ -53,17 +58,17 @@
         ref="view"
       />
       <transactionsview
-        v-else-if="isTransactions(file)"
+        v-else-if="isTransactions(file) && isShowFileType(file.type)"
         :trace="file"
         ref="view"
       />
       <logview
-        v-else-if="isLog(file)"
+        v-else-if="isLog(file) && isShowFileType(file.type)"
         :file="file"
         ref="view"
       />
       <traceview
-        v-else-if="showInTraceView(file)"
+        v-else-if="showInTraceView(file) && isShowFileType(file.type)"
         :store="store"
         :file="file"
         :presentTags="[]"
@@ -71,7 +76,7 @@
         ref="view"
       />
       <div v-else>
-        <h1 class="bad">Unrecognized DataType</h1>
+        <h1 v-if="isShowFileType(file.type)" class="bad">Unrecognized DataType</h1>
       </div>
 
     </flat-card>
@@ -156,8 +161,23 @@ export default {
       // to component.
       this.$emit('click', e);
     },
+    /** Filter data view files by current show settings */
+    updateShowFileTypes() {
+      this.store.showFileTypes = this.dataViewFiles
+        .filter((file) => file.show)
+        .map(file => file.type);
+    },
+    /** Expand or collapse data view */
+    toggleView() {
+      this.file.show = !this.file.show;
+      this.updateShowFileTypes();
+    },
+    /** Check if data view file should be shown */
+    isShowFileType(type) {
+      return this.store.showFileTypes.find(fileType => fileType===type);
+    },
   },
-  props: ['store', 'file', 'presentTags', 'presentErrors'],
+  props: ['store', 'file', 'presentTags', 'presentErrors', 'dataViewFiles'],
   mixins: [FileType],
   components: {
     'traceview': TraceView,
@@ -176,4 +196,18 @@ export default {
   font-size: 4em;
   color: red;
 }
+
+.toggle-view-button {
+  background: none;
+  color: inherit;
+  border: none;
+  font: inherit;
+  cursor: pointer;
+  padding-right: 10px;
+  display: inline-block;
+}
+
+.md-title {
+  display: inline-block;
+}
 </style>