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> 29 import jsonProtoDefs from 'frameworks/base/core/proto/android/server/windowmanagertrace.proto' 30 import protobuf from 'protobufjs' 31 32 var protoDefs = protobuf.Root.fromJSON(jsonProtoDefs); 33 34 export 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