Allow timelines to be disabled
This makes it possible to exclude timelines from interfering with navigation if we want to focus on a single trace.
Test: Disable timelines in UI and see if when you navigate with the arrow those timeline are taken into account.
Change-Id: I330d0d88c1f88a0c520073c93b8bdfd119ded75c
diff --git a/tools/winscope/src/Overlay.vue b/tools/winscope/src/Overlay.vue
index 08c1efc..1ff6eaf 100644
--- a/tools/winscope/src/Overlay.vue
+++ b/tools/winscope/src/Overlay.vue
@@ -58,7 +58,7 @@
<div v-if="video" @mousedown="resizeBottomNav">
<md-icon class="drag-handle">
drag_handle
- <md-tooltip md-direction="bottom">resize</md-tooltip>
+ <md-tooltip md-direction="top">resize</md-tooltip>
</md-icon>
</div>
</div>
@@ -120,14 +120,21 @@
v-for="file in timelineFiles"
:key="file.filename"
>
- <md-icon>
- {{file.type.icon}}
- <md-tooltip md-direction="right">{{file.type.name}}</md-tooltip>
- </md-icon>
+ <div
+ class="trace-icon"
+ :class="{disabled: file.timelineDisabled}"
+ @click="toggleTimeline(file)"
+ >
+ <i class="material-icons">
+ {{file.type.icon}}
+ <md-tooltip md-direction="bottom">{{file.type.name}}</md-tooltip>
+ </i>
+ </div>
<timeline
:timeline="file.timeline"
:selected-index="file.selectedIndex"
:scale="scale"
+ :disabled="file.timelineDisabled"
class="timeline"
/>
</md-list-item>
@@ -138,6 +145,15 @@
<datafilter v-for="file in timelineFiles" :key="file.filename" :store="store" :file="file" />
</div>
</div>
+
+ <div class="help" v-if="!minimized">
+ <div class="help-icon-wrapper">
+ <span class="material-icons help-icon">
+ help_outline
+ <md-tooltip md-direction="left">Click on icons to disable timelines</md-tooltip>
+ </span>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -332,6 +348,10 @@
videoLoaded() {
this.$refs.videoOverlay.contentLoaded();
},
+ toggleTimeline(file) {
+ // file.timelineDisabled = !(file.timelineDisabled ?? false);
+ this.$set(file, "timelineDisabled", !file.timelineDisabled);
+ },
},
components: {
'timeline': Timeline,
@@ -464,4 +484,29 @@
.show-video-overlay-btn.active .md-icon {
color: #212121!important;
}
+
+.help {
+ display: flex;
+ align-content: flex-end;
+ align-items: flex-end;
+ flex-direction: column;
+}
+
+.help-icon-wrapper {
+ margin-right: 20px;
+ margin-bottom: 10px;
+}
+
+.help-icon-wrapper .help-icon {
+ cursor: help;
+}
+
+.trace-icon {
+ cursor: pointer;
+ user-select: none;
+}
+
+.trace-icon.disabled {
+ color: gray;
+}
</style>
\ No newline at end of file
diff --git a/tools/winscope/src/Timeline.vue b/tools/winscope/src/Timeline.vue
index dd7710e..7160326 100644
--- a/tools/winscope/src/Timeline.vue
+++ b/tools/winscope/src/Timeline.vue
@@ -13,7 +13,7 @@
limitations under the License.
-->
<template>
- <svg width="100%" height="20">
+ <svg width="100%" height="20" class="timeline-svg" :class="{disabled: disabled}">
<rect
:x="position(item)"
y="0"
@@ -39,7 +39,7 @@
<script>
export default {
name: "timeline",
- props: ["timeline", "selectedIndex", "scale"],
+ props: ["timeline", "selectedIndex", "scale", "disabled"],
data() {
return {
pointWidth: "1%",
@@ -59,6 +59,9 @@
return (((cx - scale[0]) / (scale[1] - scale[0])) * 100) + "%";
},
onItemClick(index) {
+ if (this.disabled) {
+ return;
+ }
const timestamp = parseInt(this.timeline[index]);
this.$store.dispatch('updateTimelineTime', timestamp);
}
@@ -77,10 +80,17 @@
};
</script>
<style scoped>
-.selected {
+.timeline-svg .point {
+ cursor: pointer;
+}
+.timeline-svg.disabled .point {
+ fill: #BDBDBD;
+ cursor: not-allowed;
+}
+.timeline-svg:not(.disabled) .point.selected {
fill: rgb(240, 59, 59);
}
-.point {
- cursor: pointer;
+.timeline-svg.disabled .point.selected {
+ fill: rgba(240, 59, 59, 0.596);
}
</style>
diff --git a/tools/winscope/src/main.js b/tools/winscope/src/main.js
index 7132106..ce95c54 100644
--- a/tools/winscope/src/main.js
+++ b/tools/winscope/src/main.js
@@ -177,9 +177,12 @@
for (let idx = 0; idx < consideredFiles.length; idx++) {
const file = consideredFiles[idx];
- const cur = file.selectedIndex;
- let candidateTimestampIndex = cur;
+ if (file.timelineDisabled) {
+ continue;
+ }
+
+ let candidateTimestampIndex = file.selectedIndex;
let candidateTimestamp = file.timeline[candidateTimestampIndex];
let candidateCondition;
