Add origin (PID & UID) to transactions

Test: N/A
Change-Id: I891ad31a0d4c5ed35dd387c8e3f3539004dd09ca

tools/winscope/src/TransactionEntry.vue

@@ -12,6 +12,9 @@
       </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)">
         {{surface.id}}<span v-if="surface.name"> ({{ surface.name }})</span>
@@ -63,7 +66,7 @@ export default {
     },
     sufacesAffectedBy(transaction) {
       if (transaction.type !== 'transaction') {
-        return [{name: transaction.obj?.name, id: transaction.obj.id}];
+        return [{name: transaction.layerName, id: transaction.obj.id}];
       }
 
       const surfaceIds = new Set();
@@ -72,12 +75,19 @@ export default {
         const id = transaction.obj.id;
         if (!surfaceIds.has(id)) {
           surfaceIds.add(id);
-          affectedSurfaces.push({name: transaction.obj?.name, id});
+          affectedSurfaces.push({name: transaction.layerName, id});
         }
       }
 
       return affectedSurfaces
     },
+    formatOrigin(transaction) {
+      if (!transaction.origin) {
+        return "unavailable";
+      }
+
+      return `PID: ${transaction.origin.pid},\nUID: ${transaction.origin.uid}`;
+    },
   },
 }
 </script>
@@ -95,6 +105,10 @@ export default {
   width: 12em;
 }
 
+.origin-column {
+  width: 9em;
+}
+
 .affected-surfaces-column {
   word-wrap: break-word;
   width: 30em;

tools/winscope/src/TransactionsView.vue

@@ -14,8 +14,11 @@
 -->
 <template>
   <md-card-content class="container">
-    <md-table v-model="filteredData" class="transaction-table card" md-card md-fixed-header>
+
-      <md-table-toolbar>
+    <md-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">Log</h2>
+      </md-content>
       <div class="filters">
         <md-field>
           <label>Transaction Type</label>
@@ -36,22 +39,15 @@
           <div class="md-helper-text">Press enter to add</div>
         </md-chips>
       </div>
-      </md-table-toolbar>
 
-      <md-table-row class="row" slot="md-table-row" slot-scope="{ item }" @click="transactionSelected(item)">
+      <virtual-list style="height: 360px; overflow-y: auto;"
-        <md-table-cell md-label="Time">{{ item.time }}</md-table-cell>
+        :data-key="'timestamp'"
-        <md-table-cell md-label="Type(s)">
+        :data-sources="filteredData"
-          {{ transactionTypeOf(item) }}
+        :data-component="transactionEntryComponent"
-        </md-table-cell>
+        :extra-props="{'onClick': transactionSelected}"
-        <md-table-cell md-label="Affected Surfaces">
+        ref="loglist"
-          <span v-for="(surface, index) in sufacesAffectedBy(item)">
+      />
-            {{surface.id}}<span v-if="surface.name"> ({{ surface.name }})</span>
+    </md-card>
-            <span v-if="index + 1 < sufacesAffectedBy(item).length">,&nbsp;</span>
-          </span>
-        </md-table-cell>
-      </md-table-row>
-
-    </md-table>
 
     <md-card class="changes card">
       <md-content md-tag="md-toolbar" md-elevation="0" class="card-toolbar md-transparent md-dense">
@@ -70,6 +66,8 @@
 </template>
 <script>
 import TreeView from './TreeView.vue';
+import VirtualList from '../libs/virtualList/VirtualList';
+import TransactionEntry from './TransactionEntry.vue';
 
 import { transform_json } from './transform.js';
 import { stableIdCompatibilityFixup } from './utils/utils.js'
@@ -100,6 +98,7 @@ export default {
       selectedTree: null,
       filters: [],
       selectedProperty: null,
+      transactionEntryComponent: TransactionEntry,
     };
   },
   computed: {
@@ -265,39 +264,9 @@ export default {
 
       return [surfaceChanges, displayChanges];
     },
-    transactionTypeOf(transaction) {
-      if (transaction.type !== 'transaction') {
-        return transaction.type;
-      }
-
-      if (transaction.transactions.length === 0) {
-        return "Empty Transaction";
-      }
-
-      const types = new Set();
-      transaction.transactions.forEach(t => types.add(t.type));
-
-      return Array.from(types).join(", ");
-    },
-    sufacesAffectedBy(transaction) {
-      if (transaction.type !== 'transaction') {
-        return [{name: transaction.layerName, id: transaction.obj.id}];
-      }
-
-      const surfaceIds = new Set();
-      const affectedSurfaces = [];
-      for (const transaction of transaction.transactions) {
-        const id = transaction.obj.id;
-        if (!surfaceIds.has(id)) {
-          surfaceIds.add(id);
-          affectedSurfaces.push({name: transaction.layerName, id});
-        }
-      }
-
-      return affectedSurfaces
-    },
   },
   components: {
+    'virtual-list': VirtualList,
     'tree-view': TreeView,
   }
 }

tools/winscope/src/transform_transaction.js

@@ -26,6 +26,7 @@ function transform_transaction(transaction, layerIdToName) {
       layerName: layerIdToName[surfaceChange.id],
     }));
   }
+
   for (const displayChange of transaction.displayChange) {
     transactions.push(Object.freeze({
       type: 'displayChange',
@@ -44,10 +45,13 @@ function transform_entry(entry, layerIdToName) {
 
   switch (type) {
     case "transaction":
+      const origin = entry.transaction.origin;
+
       return Object.freeze({
         type,
         transactions: transform_transaction(entry.transaction, layerIdToName),
         time,
+        origin,
         timestamp,
       });
 
@@ -62,7 +66,7 @@ function transform_entry(entry, layerIdToName) {
         layerName: entry[type].name ?? layerIdToName[entry[type].id],
         time,
         timestamp,
-      })
+      });
   }
 }
 

tools/winscope/yarn.lock

@@ -1776,7 +1776,7 @@ core-js-compat@^3.6.2:
     browserslist "^4.8.5"
     semver "7.0.0"
 
-core-js@^2.4.0, core-js@^2.5.0, core-js@^2.6.5:
+core-js@^2.6.5:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
   integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==