1<!-- Copyright (C) 2020 The Android Open Source Project
2
3     Licensed under the Apache License, Version 2.0 (the "License");
4     you may not use this file except in compliance with the License.
5     You may obtain a copy of the License at
6
7          http://www.apache.org/licenses/LICENSE-2.0
8
9     Unless required by applicable law or agreed to in writing, software
10     distributed under the License is distributed on an "AS IS" BASIS,
11     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12     See the License for the specific language governing permissions and
13     limitations under the License.
14-->
15<template>
16  <span>
17    <span class="kind">{{item.kind}}</span>
18    <span v-if="item.kind && item.name">-</span>
19    <span
20      v-if="simplifyNames && item.shortName &&
21            item.shortName !== item.name"
22    >{{ item.shortName }} <!-- No line break on purpose -->
23      <md-tooltip
24        md-delay="300"
25        md-direction="top"
26        style="margin-bottom: -10px"
27      >
28        {{item.name}}
29      </md-tooltip>
30    </span>
31    <span v-else>{{ item.name }}</span>
32    <div
33      v-for="c in item.chips"
34      v-bind:key="c.long"
35      :title="c.long"
36      :class="chipClassForChip(c)"
37    >{{c.short}} <!-- No line break on purpose -->
38      <md-tooltip
39        md-delay="300"
40        md-direction="top"
41        style="margin-bottom: -10px"
42      >
43        {{c.long}}
44      </md-tooltip>
45    </div>
46    <div class="flicker-tags" v-for="transition in transitions" :key="transition">
47      <Arrow
48        class="transition-arrow"
49        :style="{color: transitionArrowColor(transition)}"
50      />
51      <md-tooltip md-direction="right"> {{transitionTooltip(transition)}} </md-tooltip>
52    </div>
53    <div class="flicker-tags" v-for="error in errors" :key="error.message">
54      <Arrow class="error-arrow"/>
55      <md-tooltip md-direction="right"> {{errorTooltip(error.message)}} </md-tooltip>
56    </div>
57  </span>
58</template>
59
60<script>
61
62import Arrow from './components/TagDisplay/Arrow.vue';
63import {transitionMap} from './utils/consts.js';
64
65export default {
66  name: 'DefaultTreeElement',
67  props: ['item', 'simplify-names', 'errors', 'transitions'],
68  methods: {
69    chipClassForChip(c) {
70      return [
71        'tree-view-internal-chip',
72        'tree-view-chip',
73        'tree-view-chip' + '-' +
74          (c.type?.toString() || c.class?.toString() || 'default'),
75      ];
76    },
77    transitionArrowColor(transition) {
78      return transitionMap.get(transition).color;
79    },
80    transitionTooltip(transition) {
81      return transitionMap.get(transition).desc;
82    },
83    errorTooltip(errorMessage) {
84      if (errorMessage.length>100) {
85        return `Error: ${errorMessage.substring(0,100)}...`;
86      }
87      return `Error: ${errorMessage}`;
88    },
89  },
90  components: {
91    Arrow,
92  },
93};
94</script>
95
96<style scoped>
97.tree-view-internal-chip {
98  display: inline-block;
99}
100
101.tree-view-chip {
102  padding: 0 10px;
103  border-radius: 10px;
104  background-color: #aaa;
105  color: black;
106}
107
108.tree-view-chip.tree-view-chip-warn {
109  background-color: #ffaa6b;
110  color: black;
111}
112
113.tree-view-chip.tree-view-chip-error {
114  background-color: #ff6b6b;
115  color: black;
116}
117
118.tree-view-chip.tree-view-chip-gpu {
119  background-color: #00c853;
120  color: black;
121}
122
123.tree-view-chip.tree-view-chip-hwc {
124  background-color: #448aff;
125  color: black;
126}
127
128span {
129  overflow-wrap: break-word;
130  flex: 1 1 auto;
131  width: 0;
132}
133
134.flicker-tags {
135  display: inline-block;
136}
137
138.error-arrow {
139  color: red;
140}
141</style>
142