Merge "Make color of layer id different to layer name in transaction view"

tools/winscope/src/TransactionEntry.vue

@@ -22,8 +22,11 @@
       <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>
+      <span v-for="(surface, index) in sufacesAffectedBy(source)" v-bind:key="surface.id">
+        <span v-if="surface.name" class="surface-name"> {{ surface.name }}</span>
+        <span class="surface-id">
+          <span v-if="surface.name">(</span>{{surface.id}}<span v-if="surface.name">)</span>
+        </span>
         <span v-if="index + 1 < sufacesAffectedBy(source).length">,&nbsp;</span>
       </span>
     </div>
@@ -179,4 +182,12 @@ a {
   margin-left: 5px;
   font-size: 10px;
 }
+
+.affected-surfaces-column .surface-id {
+  color: #999999
+}
+
+.inactive .affected-surfaces-column .surface-id {
+  color: #b4b4b4
+}
 </style>