Add shorten layer name option in TransactionView

Add an option to simplify the layer name in Transaction similar to the
one from WindowManagerTrace.

Bug: 162402459
Test: Record a trace using Winscope and in the Transaction tab check
Simplify names
Change-Id: Ice4feffdd2dc247b7eac9ae63ba633b1d970533a

tools/winscope/src/TransactionEntry.vue

@@ -33,14 +33,21 @@
           v-for="(surface, index) in sufacesAffectedBy(source)"
           v-bind:key="surface.id"
         >
-          <!-- eslint-disable-next-line max-len -->
-          <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
+            v-if="simplifyNames && surface.shortName &&
+                surface.shortName !== surface.name"
+            >{{surface.shortName}}>
+          </span>
+          <span v-else>
+            <!-- eslint-disable-next-line max-len -->
+            <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>
+            <!-- eslint-disable-next-line max-len -->
+            <span v-if="index + 1 < sufacesAffectedBy(source).length">,&nbsp;</span>
           </span>
-          <!-- eslint-disable-next-line max-len -->
-          <span v-if="index + 1 < sufacesAffectedBy(source).length">,&nbsp;</span>
         </span>
       </div>
       <div class="extra-info-column">
@@ -59,6 +66,8 @@
 </template>
 
 <script>
+import { shortenName } from './flickerlib/mixin'
+
 export default {
   name: 'transaction-entry',
   props: {
@@ -83,6 +92,9 @@ export default {
     prettifyTransactionId: {
       type: Function,
     },
+    simplifyNames: {
+      type: Boolean,
+    },
   },
   computed: {
     currentTimestamp() {
@@ -135,8 +147,12 @@ export default {
     },
     sufacesAffectedBy(transaction) {
       if (transaction.type !== 'transaction') {
-        // TODO (b/162402459): Shorten layer name
-        return [{name: transaction.layerName, id: transaction.obj.id}];
+        return [
+          {
+            name: transaction.layerName,
+            shortName: shortenName(transaction.layerName),
+            id: transaction.obj.id
+          }];
       }
 
       const surfaceIds = new Set();
@@ -145,7 +161,12 @@ export default {
         const id = transaction.obj.id;
         if (!surfaceIds.has(id)) {
           surfaceIds.add(id);
-          affectedSurfaces.push({name: transaction.layerName, id});
+          affectedSurfaces.push(
+            {
+              name: transaction.layerName,
+              shortName: shortenName(transaction.layerName),
+              id
+            });
         }
       }
 

tools/winscope/src/TransactionsView.vue

@@ -75,6 +75,11 @@
             <div class="md-helper-text">Press enter to add</div>
           </md-chips>
         </div>
+
+        <md-checkbox v-model="trace.simplifyNames">
+            Simplify names
+        </md-checkbox>
+
       </div>
 
       <virtual-list style="height: 600px; overflow-y: auto;"
@@ -86,6 +91,7 @@
           selectedTransaction,
           transactionsTrace,
           prettifyTransactionId,
+          simplifyNames: trace.simplifyNames,
         }"
         ref="loglist"
       />
@@ -289,7 +295,6 @@ export default {
         const perpareForTreeViewTransform = (change) => {
           this.removeNullFields(change);
           change[META_DATA_KEY] = {
-            // TODO (b/162402459): Shorten layer name
             layerName: change.layerName,
           };
           // remove redundant properties