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

Test: Visual
Change-Id: I1b7d384bf9cca3fe89878b835a1ba7002d732ef7

tools/winscope/src/TransactionEntry.vue

@@ -1,46 +1,60 @@
 <template>
-  <div class="entry"
-    :class="{
-      inactive: source.timestamp > currentTimestamp,
-      selected: isSelected
-    }"
-    @click="onClick(source)"
-  >
-    <div class="time-column">
-      <a @click="setTimelineTime(source.timestamp)" class="time-link">
-        {{source.time}}
-      </a>
-      <div
-        class="new-badge"
-        :style="{visibility: source.new ? 'visible' : 'hidden'} "
-      >
-        New
+  <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
+      }"
+      @click="onClick(source)"
+    >
+      <div class="time-column">
+        <a @click="setTimelineTime(source.timestamp)" class="time-link">
+          {{source.time}}
+        </a>
+        <div
+          class="new-badge"
+          :style="{visibility: source.new ? 'visible' : 'hidden'} "
+        >
+          New
+        </div>
+      </div>
+      <div class="type-column">{{transactionTypeOf(source)}}</div>
+      <div class="affected-surfaces-column">
+        <span
+          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>
+      <div class="extra-info-column">
+        <span v-if="source.identifier">
+          <!-- eslint-disable-next-line max-len -->
+          Tx Id: <span class="light">{{ prettifyTransactionId(source.identifier) }}</span><br/>
+        </span>
+        <span v-if="source.origin">
+          PID: <span class="light">{{ source.origin.pid }}</span><br/>
+          TID: <span class="light">{{ source.origin.uid }}</span><br/>
+        </span>
       </div>
     </div>
-    <div class="type-column">{{transactionTypeOf(source)}}</div>
-    <div class="affected-surfaces-column">
-      <span
-        v-for="(surface, index) in sufacesAffectedBy(source)"
-        v-bind:key="surface.id"
-      >
-        <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>
-        <span v-if="index + 1 < sufacesAffectedBy(source).length">,&nbsp;</span>
-      </span>
-    </div>
-    <div class="extra-info-column">
-      <span v-if="source.identifier">
-        <!-- eslint-disable-next-line max-len -->
-        Tx Id: <span class="light">{{ prettifyTransactionId(source.identifier) }}</span><br/>
-      </span>
-      <span v-if="source.origin">
-        PID: <span class="light">{{ source.origin.pid }}</span><br/>
-        TID: <span class="light">{{ source.origin.uid }}</span><br/>
-      </span>
-    </div>
+
   </div>
 </template>
 
@@ -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>