From d0bdb7e2ec49db2259e1d42f862cf9ba787ed950 Mon Sep 17 00:00:00 2001
From: Priyanka <priyankaspatel@google.com>
Date: Fri, 16 Jul 2021 13:02:14 +0000
Subject: [PATCH] Add headers to Transactions and Log View tables.

Test: Run a trace. Scroll down to Transactions and ProtoLog containers
and check that their respective tables have headings.

Bug: 159618770
Change-Id: I8d51afcfd192fa7e34c5a4aa376057bf1c14be58
---
 tools/winscope/src/LogView.vue          | 41 +++++++++++++++----------
 tools/winscope/src/TransactionsView.vue |  7 +++++
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/tools/winscope/src/LogView.vue b/tools/winscope/src/LogView.vue
index ce9ff10d4..7e453a285 100644
--- a/tools/winscope/src/LogView.vue
+++ b/tools/winscope/src/LogView.vue
@@ -15,24 +15,31 @@
 <template>
   <md-card-content class="container">
     <div class="navigation">
-      <md-button
-        class="md-dense md-primary"
-        @click.native="scrollToRow(lastOccuredVisibleIndex)"
+      <md-content
+        md-tag="md-toolbar"
+        md-elevation="0"
+        class="card-toolbar md-transparent md-dense"
       >
-        Jump to latest entry
-      </md-button>
-      <md-button
-        class="md-icon-button" :class="{'md-primary': pinnedToLatest}"
-        @click.native="togglePin"
-      >
-        <md-icon>push_pin</md-icon>
-        <md-tooltip md-direction="top" v-if="pinnedToLatest">
-          Unpin to latest message
-        </md-tooltip>
-        <md-tooltip md-direction="top" v-else>
-          Pin to latest message
-        </md-tooltip>
-      </md-button>
+        <h2 class="md-title" style="flex: 1">Log View</h2>
+        <md-button
+          class="md-dense md-primary"
+          @click.native="scrollToRow(lastOccuredVisibleIndex)"
+        >
+          Jump to latest entry
+        </md-button>
+        <md-button
+          class="md-icon-button" :class="{'md-primary': pinnedToLatest}"
+          @click.native="togglePin"
+        >
+          <md-icon>push_pin</md-icon>
+          <md-tooltip md-direction="top" v-if="pinnedToLatest">
+            Unpin to latest message
+          </md-tooltip>
+          <md-tooltip md-direction="top" v-else>
+            Pin to latest message
+          </md-tooltip>
+        </md-button>
+      </md-content>
     </div>
 
     <div class="filters">
diff --git a/tools/winscope/src/TransactionsView.vue b/tools/winscope/src/TransactionsView.vue
index 616dd7d95..9873b5a0e 100644
--- a/tools/winscope/src/TransactionsView.vue
+++ b/tools/winscope/src/TransactionsView.vue
@@ -16,6 +16,13 @@
   <md-card-content class="container">
 
     <flat-card class="changes card">
+      <md-content
+        md-tag="md-toolbar"
+        md-elevation="0"
+        class="card-toolbar md-transparent md-dense"
+      >
+        <h2 class="md-title" style="flex: 1">Transactions</h2>
+      </md-content>
       <div class="filters">
         <div class="input">
           <md-field>