Display transaction merge information in Winscope

Test: N/A
Change-Id: I04836e844e2aa3158c36c12e375eca365c003ada

tools/winscope/src/TransactionEntry.vue

@@ -18,18 +18,29 @@
       </div>
     </div>
     <div class="type-column">{{transactionTypeOf(source)}}</div>
-    <div class="origin-column">
-      <span style="white-space: pre;">{{formatOrigin(source)}}</span>
-    </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
+        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>
 
@@ -42,16 +53,22 @@ export default {
     },
     source: {
       type: Object,
-      default () {
-        return {}
-      }
+      default() {
+        return {};
+      },
     },
     onClick: {
       type: Function,
     },
     selectedTransaction: {
       type: Object,
-    }
+    },
+    transactionsTrace: {
+      type: Object,
+    },
+    prettifyTransactionId: {
+      type: Function,
+    },
   },
   computed: {
     currentTimestamp() {
@@ -60,6 +77,27 @@ export default {
     isSelected() {
       return this.source === this.selectedTransaction;
     },
+    hasOverrideChangeDueToMerge() {
+      const transaction = this.source;
+
+      if (!transaction.identifier) {
+        return;
+      }
+
+      // console.log('transaction', transaction.identifier);
+
+      // const history = this.transactionsTrace.transactionHistory;
+
+      // const allTransactionsMergedInto = history
+      //     .allTransactionsMergedInto(transaction.identifier);
+      // console.log('All merges', allTransactionsMergedInto);
+
+      // console.log('Direct merges',
+      //     history.allDirectMergesInto(transaction.identifier));
+
+
+      return true;
+    },
   },
   methods: {
     setTimelineTime(timestamp) {
@@ -71,13 +109,13 @@ export default {
       }
 
       if (transaction.transactions.length === 0) {
-        return "Empty Transaction";
+        return 'Empty Transaction';
       }
 
       const types = new Set();
-      transaction.transactions.forEach(t => types.add(t.type));
+      transaction.transactions.forEach((t) => types.add(t.type));
 
-      return Array.from(types).join(", ");
+      return Array.from(types).join(', ');
     },
     sufacesAffectedBy(transaction) {
       if (transaction.type !== 'transaction') {
@@ -95,25 +133,10 @@ export default {
         }
       }
 
-      return affectedSurfaces
-    },
-    formatOrigin(transaction) {
-      if (!transaction.origin) {
-        return "unavailable";
-      }
-
-      const originString = [];
-      originString.push(`PID: ${transaction.origin.pid}`);
-      originString.push(`UID: ${transaction.origin.uid}`);
-
-      if (transaction.origin.appliedByMainThread) {
-        originString.push("Applied by main thread");
-      }
-
-      return originString.join("\n");
+      return affectedSurfaces;
     },
   },
-}
+};
 </script>
 <style scoped>
 .time-column {
@@ -138,6 +161,10 @@ export default {
   width: 30em;
 }
 
+.extra-info-column {
+  width: 20em;
+}
+
 .entry {
   display: inline-flex;
   cursor: pointer;
@@ -190,4 +217,12 @@ a {
 .inactive .affected-surfaces-column .surface-id {
   color: #b4b4b4
 }
-</style>
+
+.light {
+  color: #999999
+}
+
+.inactive .light {
+  color: #b4b4b4
+}
+</style>