1<!-- Copyright (C) 2017 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  <div class="tree-view">
17    <div @click="clicked" :class="computedClass">
18      <span class="kind">{{item.kind}}</span><span v-if="item.kind && item.name"> - </span><span>{{item.name}}</span>
19      <div v-for="c in item.chips" :title="c.long" :class="chipClassForChip(c)">
20        {{c.short}}
21      </div>
22    </div>
23    <div class="children" v-if="children">
24      <tree-view v-for="(c,i) in children" :item="c" @item-selected="childItemSelected" :selected="selected" :key="i" :chip-class='chipClass' :filter="childFilter(c)" :flattened="flattened" :force-flattened="applyingFlattened" v-show="filterMatches(c)" ref='children' />
25    </div>
26  </div>
27</template>
28<script>
29import jsonProtoDefs from 'frameworks/base/core/proto/android/server/windowmanagertrace.proto'
30import protobuf from 'protobufjs'
31
32var protoDefs = protobuf.Root.fromJSON(jsonProtoDefs);
33
34export default {
35  name: 'tree-view',
36  props: ['item', 'selected', 'chipClass', 'filter', 'flattened', 'force-flattened'],
37  data() {
38    return {};
39  },
40  methods: {
41    selectNext(found, parent) {
42      if (found && this.filterMatches(this.item)) {
43        this.clicked();
44        return false;
45      }
46      if (this.selected === this.item) {
47        found = true;
48      }
49      if (this.$refs.children) {
50        for (var c of this.$refs.children) {
51          found = c.selectNext(found);
52        }
53      }
54      return found;
55    },
56    selectPrev(found) {
57      if (this.$refs.children) {
58        for (var c of [...this.$refs.children].reverse()) {
59          found = c.selectPrev(found);
60        }
61      }
62      if (found && this.filterMatches(this.item)) {
63        this.clicked();
64        return false;
65      }
66      if (this.selected === this.item) {
67        found = true;
68      }
69      return found;
70    },
71    childItemSelected(item) {
72      this.$emit('item-selected', item);
73    },
74    clicked() {
75      this.$emit('item-selected', this.item);
76    },
77    chipClassForChip(c) {
78      return ['tree-view-internal-chip', this.chipClassOrDefault,
79        this.chipClassOrDefault + '-' + (c.class || 'default')
80      ];
81    },
82    filterMatches(c) {
83      // If a filter is set, consider the item matches if the current item or any of its
84      // children matches.
85      if (this.filter) {
86        var thisMatches = this.filter(c);
87        const childMatches = (child) => this.filterMatches(child);
88        return thisMatches || (!this.applyingFlattened &&
89            c.children && c.children.some(childMatches));
90      }
91      return true;
92    },
93    childFilter(c) {
94      if (this.filter) {
95        if (this.filter(c)) {
96          // Filter matched c, don't apply further filtering on c's children.
97          return undefined;
98        }
99      }
100      return this.filter;
101    },
102  },
103  computed: {
104    computedClass() {
105      return (this.item == this.selected) ? 'selected' : ''
106    },
107    chipClassOrDefault() {
108      return this.chipClass || 'tree-view-chip';
109    },
110    applyingFlattened() {
111      return this.flattened && this.item.flattened || this.forceFlattened;
112    },
113    children() {
114      return this.applyingFlattened ? this.item.flattened : this.item.children;
115    },
116  }
117}
118
119</script>
120<style>
121.children {
122  margin-left: 24px;
123}
124
125.kind {
126  color: #333;
127}
128
129.selected {
130  background-color: #3f51b5;
131  color: white;
132}
133
134.selected .kind {
135  color: #ccc;
136}
137
138.tree-view-internal-chip {
139  display: inline-block;
140}
141
142.tree-view-chip {
143  padding: 0 10px;
144  border-radius: 10px;
145  background-color: #aaa;
146  color: black;
147}
148
149.tree-view-chip.tree-view-chip-warn {
150  background-color: #ffaa6b;
151  color: black;
152}
153
154.tree-view-chip.tree-view-chip-error {
155  background-color: #ff6b6b;
156  color: black;
157}
158
159.tree-view-chip.tree-view-chip-gpu {
160  background-color: #00c853;
161  color: black;
162}
163
164.tree-view-chip.tree-view-chip-hwc {
165  background-color: #448aff;
166  color: black;
167}
168
169</style>
170