Highlight selected transaction in transactions log
Test: Visual
Change-Id: I7b6043220c1875aaf90c25451a7a1d2e084a46ff
diff --git a/tools/winscope/src/TransactionEntry.vue b/tools/winscope/src/TransactionEntry.vue
index 3d74d0a..90bfe68 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 @@
name: 'transaction-entry',
props: {
index: {
- type: Number
+ type: Number,
},
source: {
type: Object,
@@ -40,11 +46,17 @@
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 @@
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 82ed43a..e7efeb1 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 @@
selectedTree: null,
filters: [],
selectedProperty: null,
+ selectedTransaction: null,
transactionEntryComponent: TransactionEntry,
};
},
@@ -167,6 +168,8 @@
return changeObject;
},
transactionSelected(transaction) {
+ this.selectedTransaction = transaction;
+
let obj = this.removeNullFields(transaction.obj);
let name = transaction.type;
