1<template> 2 <div> 3 4 <div v-if="source.type === 'vsyncEvent'" class="vsync"> 5 <div class="vsync-dot" /> 6 <md-tooltip md-direction="left"> 7 VSync 8 </md-tooltip> 9 </div> 10 11 <div v-else 12 class="entry" 13 :class="{ 14 inactive: source.timestamp > currentTimestamp, 15 selected: isSelected 16 }" 17 @click="onClick(source)" 18 > 19 <div class="time-column"> 20 <a @click="e => setTimelineTime(e, source.timestamp)" class="time-link"> 21 {{source.time}} 22 </a> 23 <div 24 class="new-badge" 25 :style="{visibility: source.new ? 'visible' : 'hidden'} " 26 > 27 New 28 </div> 29 </div> 30 <div class="type-column">{{transactionTypeOf(source)}}</div> 31 <div class="affected-surfaces-column"> 32 <span 33 v-for="(surface, index) in sufacesAffectedBy(source)" 34 v-bind:key="surface.id" 35 > 36 <span 37 v-if="simplifyNames && surface.shortName && 38 surface.shortName !== surface.name" 39 >{{surface.shortName}}> 40 </span> 41 <span v-else> 42 <!-- eslint-disable-next-line max-len --> 43 <span v-if="surface.name" class="surface-name">{{ surface.name }}</span> 44 <span class="surface-id"> 45 <!-- eslint-disable-next-line max-len --> 46 <span v-if="surface.name">(</span>{{surface.id}}<span v-if="surface.name">)</span> 47 </span> 48 <!-- eslint-disable-next-line max-len --> 49 <span v-if="index + 1 < sufacesAffectedBy(source).length">, </span> 50 </span> 51 </span> 52 </div> 53 <div class="extra-info-column"> 54 <span v-if="source.identifier"> 55 <!-- eslint-disable-next-line max-len --> 56 Tx Id: <span class="light">{{ prettifyTransactionId(source.identifier) }}</span><br/> 57 </span> 58 <span v-if="source.origin"> 59 PID: <span class="light">{{ source.origin.pid }}</span><br/> 60 UID: <span class="light">{{ source.origin.uid }}</span><br/> 61 </span> 62 </div> 63 </div> 64 65 </div> 66</template> 67 68<script> 69import { shortenName } from './flickerlib/mixin' 70 71export default { 72 name: 'transaction-entry-legacy', 73 props: { 74 index: { 75 type: Number, 76 }, 77 source: { 78 type: Object, 79 default() { 80 return {}; 81 }, 82 }, 83 onClick: { 84 type: Function, 85 }, 86 selectedTransaction: { 87 type: Object, 88 }, 89 transactionsTrace: { 90 type: Object, 91 }, 92 prettifyTransactionId: { 93 type: Function, 94 }, 95 simplifyNames: { 96 type: Boolean, 97 }, 98 }, 99 computed: { 100 currentTimestamp() { 101 return this.$store.state.currentTimestamp; 102 }, 103 isSelected() { 104 return this.source === this.selectedTransaction; 105 }, 106 hasOverrideChangeDueToMerge() { 107 const transaction = this.source; 108 109 if (!transaction.identifier) { 110 return; 111 } 112 113 // console.log('transaction', transaction.identifier); 114 115 // const history = this.transactionsTrace.transactionHistory; 116 117 // const allTransactionsMergedInto = history 118 // .allTransactionsMergedInto(transaction.identifier); 119 // console.log('All merges', allTransactionsMergedInto); 120 121 // console.log('Direct merges', 122 // history.allDirectMergesInto(transaction.identifier)); 123 124 125 return true; 126 }, 127 }, 128 methods: { 129 setTimelineTime(e, timestamp) { 130 e.preventDefault(); 131 e.stopPropagation(); 132 this.$store.dispatch('updateTimelineTime', timestamp); 133 }, 134 transactionTypeOf(transaction) { 135 if (transaction.type !== 'transaction') { 136 return transaction.type; 137 } 138 139 if (transaction.transactions.length === 0) { 140 return 'Empty Transaction'; 141 } 142 143 const types = new Set(); 144 transaction.transactions.forEach((t) => types.add(t.type)); 145 146 return Array.from(types).join(', '); 147 }, 148 sufacesAffectedBy(transaction) { 149 if (transaction.type !== 'transaction') { 150 return [ 151 { 152 name: transaction.layerName, 153 shortName: shortenName(transaction.layerName), 154 id: transaction.obj.id 155 }]; 156 } 157 158 const surfaceIds = new Set(); 159 const affectedSurfaces = []; 160 for (const transaction of transaction.transactions) { 161 const id = transaction.obj.id; 162 if (!surfaceIds.has(id)) { 163 surfaceIds.add(id); 164 affectedSurfaces.push( 165 { 166 name: transaction.layerName, 167 shortName: shortenName(transaction.layerName), 168 id 169 }); 170 } 171 } 172 173 return affectedSurfaces; 174 }, 175 }, 176}; 177</script> 178<style scoped> 179.time-column { 180 display: inline-flex; 181 width: 13em; 182} 183 184.time-column .time-link { 185 width: 9em; 186} 187 188.type-column { 189 width: 12em; 190} 191 192.origin-column { 193 width: 9em; 194} 195 196.affected-surfaces-column { 197 word-wrap: break-word; 198 width: 30em; 199} 200 201.extra-info-column { 202 width: 20em; 203} 204 205.entry { 206 display: inline-flex; 207 cursor: pointer; 208} 209 210.entry > div { 211 padding: 6px 10px; 212 border-bottom: 1px solid #f1f1f1; 213} 214 215.entry.selected { 216 background-color: #365179; 217 color: white; 218} 219 220.entry.selected a { 221 color: white; 222} 223 224.entry:not(.selected):hover { 225 background: #f1f1f1; 226} 227 228a { 229 cursor: pointer; 230} 231 232.inactive { 233 color: gray; 234} 235 236.inactive a { 237 color: gray; 238} 239 240.new-badge { 241 display: inline-block; 242 background: rgb(84, 139, 247); 243 border-radius: 3px; 244 color: white; 245 padding: 0 5px; 246 margin-left: 5px; 247 font-size: 10px; 248} 249 250.affected-surfaces-column .surface-id { 251 color: #999999 252} 253 254.inactive .affected-surfaces-column .surface-id { 255 color: #b4b4b4 256} 257 258.light { 259 color: #999999 260} 261 262.inactive .light { 263 color: #b4b4b4 264} 265 266.vsync { 267 position: relative; 268} 269 270.vsync-dot:before { 271 content: ""; 272 position: absolute; 273 left: 0; 274 top: -5px; 275 height: 10px; 276 width: 10px; 277 background-color: rgb(170, 65, 255); 278 border-radius: 50%; 279 display: inline-block; 280} 281 282.vsync-dot:after { 283 content: ""; 284 position: absolute; 285 left: 0; 286 top: 0; 287 height: 1px; 288 width: 100%; 289 background-color: rgb(170, 65, 255); 290 display: inline-block; 291} 292</style> 293