From c4923eba86b1d5159f4fe3b71e32c15519d856da Mon Sep 17 00:00:00 2001
From: Pablo Gamito <pablogamito@google.com>
Date: Thu, 23 Jul 2020 19:26:24 +0100
Subject: [PATCH] Highlight selected transaction in transactions log

Test: Visual
Change-Id: I7b6043220c1875aaf90c25451a7a1d2e084a46ff
---
 tools/winscope/src/TransactionEntry.vue | 29 +++++++++++++++++++++----
 tools/winscope/src/TransactionsView.vue |  5 ++++-
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/tools/winscope/src/TransactionEntry.vue b/tools/winscope/src/TransactionEntry.vue
index 3d74d0a1e..90bfe6838 100644
--- a/tools/winscope/src/TransactionEntry.vue
+++ b/tools/winscope/src/TransactionEntry.vue
@@ -1,5 +1,11 @@
 <template>
-  <div class="entry" :class="{inactive: source.timestamp > currentTimestamp}" @click="onClick(source)">
+  <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}}
@@ -29,7 +35,7 @@ export default {
   name: 'transaction-entry',
   props: {
     index: {
-      type: Number
+      type: Number,
     },
     source: {
       type: Object,
@@ -40,11 +46,17 @@ export default {
     onClick: {
       type: Function,
     },
+    selectedTransaction: {
+      type: Object,
+    }
   },
   computed: {
     currentTimestamp() {
       return this.$store.state.currentTimestamp;
-    }
+    },
+    isSelected() {
+      return this.source === this.selectedTransaction;
+    },
   },
   methods: {
     setTimelineTime(timestamp) {
@@ -119,7 +131,16 @@ export default {
   cursor: pointer;
 }
 
-.entry:hover {
+.entry.selected {
+  background-color: #365179;
+  color: white;
+}
+
+.entry.selected a {
+  color: white;
+}
+
+.entry:not(.selected):hover {
   background: #f1f1f1;
 }
 
diff --git a/tools/winscope/src/TransactionsView.vue b/tools/winscope/src/TransactionsView.vue
index 82ed43a05..e7efeb1b9 100644
--- a/tools/winscope/src/TransactionsView.vue
+++ b/tools/winscope/src/TransactionsView.vue
@@ -41,7 +41,7 @@
         :data-key="'timestamp'"
         :data-sources="filteredData"
         :data-component="transactionEntryComponent"
-        :extra-props="{'onClick': transactionSelected}"
+        :extra-props="{onClick: transactionSelected, selectedTransaction }"
         ref="loglist"
       />
     </flat-card>
@@ -102,6 +102,7 @@ export default {
       selectedTree: null,
       filters: [],
       selectedProperty: null,
+      selectedTransaction: null,
       transactionEntryComponent: TransactionEntry,
     };
   },
@@ -167,6 +168,8 @@ export default {
       return changeObject;
     },
     transactionSelected(transaction) {
+      this.selectedTransaction = transaction;
+
       let obj = this.removeNullFields(transaction.obj);
       let name = transaction.type;