Show vsyncs as a colored dividor instead of a full entry in transactionsView
Test: Visual Change-Id: I1b7d384bf9cca3fe89878b835a1ba7002d732ef7
This commit is contained in:
@@ -1,46 +1,60 @@
|
||||
<template>
|
||||
<div class="entry"
|
||||
:class="{
|
||||
inactive: source.timestamp > currentTimestamp,
|
||||
selected: isSelected
|
||||
}"
|
||||
@click="onClick(source)"
|
||||
>
|
||||
<div class="time-column">
|
||||
<a @click="setTimelineTime(source.timestamp)" class="time-link">
|
||||
{{source.time}}
|
||||
</a>
|
||||
<div
|
||||
class="new-badge"
|
||||
:style="{visibility: source.new ? 'visible' : 'hidden'} "
|
||||
>
|
||||
New
|
||||
<div>
|
||||
|
||||
<div v-if="source.type === 'vsyncEvent'" class="vsync">
|
||||
<div class="vsync-dot" />
|
||||
<md-tooltip md-direction="left">
|
||||
VSync
|
||||
</md-tooltip>
|
||||
</div>
|
||||
|
||||
<div v-else
|
||||
class="entry"
|
||||
:class="{
|
||||
inactive: source.timestamp > currentTimestamp,
|
||||
selected: isSelected
|
||||
}"
|
||||
@click="onClick(source)"
|
||||
>
|
||||
<div class="time-column">
|
||||
<a @click="setTimelineTime(source.timestamp)" class="time-link">
|
||||
{{source.time}}
|
||||
</a>
|
||||
<div
|
||||
class="new-badge"
|
||||
:style="{visibility: source.new ? 'visible' : 'hidden'} "
|
||||
>
|
||||
New
|
||||
</div>
|
||||
</div>
|
||||
<div class="type-column">{{transactionTypeOf(source)}}</div>
|
||||
<div class="affected-surfaces-column">
|
||||
<span
|
||||
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>
|
||||
<!-- eslint-disable-next-line max-len -->
|
||||
<span v-if="index + 1 < sufacesAffectedBy(source).length">, </span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="extra-info-column">
|
||||
<span v-if="source.identifier">
|
||||
<!-- eslint-disable-next-line max-len -->
|
||||
Tx Id: <span class="light">{{ prettifyTransactionId(source.identifier) }}</span><br/>
|
||||
</span>
|
||||
<span v-if="source.origin">
|
||||
PID: <span class="light">{{ source.origin.pid }}</span><br/>
|
||||
TID: <span class="light">{{ source.origin.uid }}</span><br/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="type-column">{{transactionTypeOf(source)}}</div>
|
||||
<div class="affected-surfaces-column">
|
||||
<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">
|
||||
<!-- eslint-disable-next-line max-len -->
|
||||
<span v-if="surface.name">(</span>{{surface.id}}<span v-if="surface.name">)</span>
|
||||
</span>
|
||||
<span v-if="index + 1 < sufacesAffectedBy(source).length">, </span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="extra-info-column">
|
||||
<span v-if="source.identifier">
|
||||
<!-- eslint-disable-next-line max-len -->
|
||||
Tx Id: <span class="light">{{ prettifyTransactionId(source.identifier) }}</span><br/>
|
||||
</span>
|
||||
<span v-if="source.origin">
|
||||
PID: <span class="light">{{ source.origin.pid }}</span><br/>
|
||||
TID: <span class="light">{{ source.origin.uid }}</span><br/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -170,6 +184,11 @@ export default {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.entry > div {
|
||||
padding: 6px 10px;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
}
|
||||
|
||||
.entry.selected {
|
||||
background-color: #365179;
|
||||
color: white;
|
||||
@@ -183,11 +202,6 @@ export default {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
.entry > div {
|
||||
padding: 6px 10px;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -225,4 +239,31 @@ a {
|
||||
.inactive .light {
|
||||
color: #b4b4b4
|
||||
}
|
||||
|
||||
.vsync {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vsync-dot:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -5px;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background-color: rgb(170, 65, 255);
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.vsync-dot:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: rgb(170, 65, 255);
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user