Show vsyncs as a colored dividor instead of a full entry in transactionsView

Test: Visual
Change-Id: I1b7d384bf9cca3fe89878b835a1ba7002d732ef7

tools/winscope/src/TransactionEntry.vue

@@ -1,5 +1,15 @@
 <template>
-  <div class="entry"
+  <div>
+
+    <div v-if="source.type === 'vsyncEvent'" class="vsync">
+      <div class="vsync-dot" />
+      <md-tooltip md-direction="left">
+        VSync
+      </md-tooltip>
+    </div>
+
+    <div v-else
+      class="entry"
       :class="{
         inactive: source.timestamp > currentTimestamp,
         selected: isSelected
@@ -23,11 +33,13 @@
           v-for="(surface, index) in sufacesAffectedBy(source)"
           v-bind:key="surface.id"
         >
+          <!-- eslint-disable-next-line max-len -->
           <span v-if="surface.name" class="surface-name">{{ surface.name }}</span>
           <span class="surface-id">
             <!-- eslint-disable-next-line max-len -->
             <span v-if="surface.name">(</span>{{surface.id}}<span v-if="surface.name">)</span>
           </span>
+          <!-- eslint-disable-next-line max-len -->
           <span v-if="index + 1 < sufacesAffectedBy(source).length">,&nbsp;</span>
         </span>
       </div>
@@ -42,6 +54,8 @@
         </span>
       </div>
     </div>
+
+  </div>
 </template>
 
 <script>
@@ -170,6 +184,11 @@ export default {
   cursor: pointer;
 }
 
+.entry > div {
+  padding: 6px 10px;
+  border-bottom: 1px solid #f1f1f1;
+}
+
 .entry.selected {
   background-color: #365179;
   color: white;
@@ -183,11 +202,6 @@ export default {
   background: #f1f1f1;
 }
 
-.entry > div {
-  padding: 6px 10px;
-  border-bottom: 1px solid #f1f1f1;
-}
-
 a {
   cursor: pointer;
 }
@@ -225,4 +239,31 @@ a {
 .inactive .light {
   color: #b4b4b4
 }
+
+.vsync {
+  position: relative;
+}
+
+.vsync-dot:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: -5px;
+  height: 10px;
+  width: 10px;
+  background-color: rgb(170, 65, 255);
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.vsync-dot:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 1px;
+  width: 100%;
+  background-color: rgb(170, 65, 255);
+  display: inline-block;
+}
 </style>

tools/winscope/src/TransactionsView.vue

@@ -169,6 +169,10 @@ export default {
       }
     }
 
+    // Remove vsync from being transaction types that can be filtered
+    // We want to always show vsyncs
+    transactionTypes.delete('vsyncEvent');
+
     return {
       transactionTypes: Array.from(transactionTypes),
       properties: Array.from(properties),
@@ -197,6 +201,7 @@ export default {
       if (this.selectedTransactionTypes.length > 0) {
         filteredData = filteredData.filter(
             this.filterTransactions((transaction) =>
+              transaction.type === 'vsyncEvent' ||
               this.selectedTransactionTypes.includes(transaction.type)));
       }
 
@@ -247,7 +252,10 @@ export default {
         );
       }
 
-      return filteredData;
+      // We quish vsyncs because otherwise the lazy list will not load enough
+      // elements if there are many vsyncs in a row since vsyncs take up no
+      // space.
+      return this.squishVSyncs(filteredData);
     },
 
   },
@@ -435,6 +443,14 @@ export default {
       const expandedId = expandTransactionId(transactionId);
       return `${expandedId.pid}.${expandedId.id}`;
     },
+
+    squishVSyncs(data) {
+      return data.filter((event, i) => {
+        console.log(event.type, data[i + 1]?.type);
+        return !(event.type === 'vsyncEvent' &&
+          data[i + 1]?.type === 'vsyncEvent');
+      });
+    },
   },
   components: {
     'virtual-list': VirtualList,
@@ -501,4 +517,8 @@ export default {
 .no-properties span {
   font-weight: 100;
 }
+
+.transaction-event {
+  display: inline-flex;
+}
 </style>