tools/winscope/src/TreeView.vue - platform/development - Git at Google

 <!-- Copyright (C) 2017 The Android Open Source Project

      Licensed under the Apache License, Version 2.0 (the "License");
      you may not use this file except in compliance with the License.
      You may obtain a copy of the License at

           http://www.apache.org/licenses/LICENSE-2.0

      Unless required by applicable law or agreed to in writing, software
      distributed under the License is distributed on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
      See the License for the specific language governing permissions and
      limitations under the License.
 -->
 <template>
   <div class="tree-view" v-if="item">
     <div class="node"
       :class="{ leaf: isLeaf, selected: isSelected, clickable: isClickable, diffClass }"
       :style="nodeOffsetStyle"
       @click="clicked"
       ref="node"
     >
       <button class="toggle-tree-btn" @click="toggleTree" v-if="!isLeaf" v-on:click.stop>
         <i aria-hidden="true" class="md-icon md-theme-default material-icons">
           {{isCollapsed ? "chevron_right" : "expand_more"}}
         </i>
       </button>
       <div class="padding" v-else>
         <i aria-hidden="true" class="md-icon md-theme-default material-icons">
           arrow_right
         </i>
       </div>
       <div class="description">
         <span class="kind">{{item.kind}}</span>
         <span v-if="item.kind && item.name">-</span>
         <span>{{item.name}}</span>
         <div
           v-for="c in item.chips"
           v-bind:key="c.long"
           :title="c.long"
           :class="chipClassForChip(c)"
         >
           {{c.short}}
         </div>
       </div>
       <div v-show="isCollapsed">
         <button class="expand-tree-btn"  :class="{ 'child-selected': isCollapsed && childIsSelected }" v-if="children" @click="expandTree" v-on:click.stop>
           <i aria-hidden="true" class="md-icon md-theme-default material-icons">more_horiz</i>
         </button>
       </div>
     </div>
     <div class="children" v-if="children" v-show="!isCollapsed">
       <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)"
         :items-clickable="itemsClickable"
         :initial-depth="depth + 1"
         :collapse="collapseChildren"
         :collapseChildren="collapseChildren"
         :useGlobalCollapsedState="useGlobalCollapsedState"
         ref="children"
       />
     </div>
   </div>
 </template>

 <script>
 import jsonProtoDefs from "frameworks/base/core/proto/android/server/windowmanagertrace.proto";
 import protobuf from "protobufjs";

 import { DiffType } from "./utils/diff.js";

 var protoDefs = protobuf.Root.fromJSON(jsonProtoDefs);
 var TraceMessage = protoDefs.lookupType(
   "com.android.server.wm.WindowManagerTraceFileProto"
 );
 var ServiceMessage = protoDefs.lookupType(
   "com.android.server.wm.WindowManagerServiceDumpProto"
 );

 const levelOffset = 24; /* in px, must be kept in sync with css, maybe find a better solution... */

 export default {
   name: "tree-view",
   props: [
     "item",
     "selected",
     "chipClass",
     "filter",
     "flattened",
     "force-flattened",
     "items-clickable",
     "initial-depth",
     "collapse",
     "collapseChildren",
     // Allows collapse state to be tracked by Vuex so that collapse state of
     // items with same stableId can remain consisten accross time and easily
     // toggled from anywhere in the app.
     // Should be true if you are using the same TreeView to display multiple
     // trees throughout the component's lifetime to make sure same nodes are
     // toggled when switching back and forth between trees.
     // If true, requires all nodes in tree to have a stableId.
     "useGlobalCollapsedState",
   ],
   data() {
     const isCollapsedByDefault = this.collapse ?? false;

     return {
       isChildSelected: false,
       clickTimeout: null,
       isCollapsedByDefault,
       localCollapsedState: isCollapsedByDefault,
       diffSymbol: {
         [DiffType.NONE]: "",
         [DiffType.ADDED]: "+",
         [DiffType.DELETED]: "-",
         [DiffType.MODIFIED]: ".",
         [DiffType.MOVED]: ".",
       },
     };
   },
   methods: {
     setCollapseValue(isCollapsed) {
       if (this.useGlobalCollapsedState) {
         this.$store.commit('setCollapsedState', {
           item: this.item,
           isCollapsed,
         });
       } else {
         this.localCollapsedState = isCollapsed;
       }
     },
     toggleTree() {
       this.setCollapseValue(!this.isCollapsed);
     },
     expandTree() {
       this.setCollapseValue(false);
     },
     selectNext(found, inCollapsedTree) {
       // Check if this is the next visible item
       if (found && this.filterMatches(this.item) && !inCollapsedTree) {
         this.select();
         return false;
       }

       // Set traversal state variables
       if (this.isSelected) {
         found = true;
       }
       if (this.isCollapsed) {
         inCollapsedTree = true;
       }

       // Travers children trees recursively in reverse to find currently
       // selected item and select the next visible one
       if (this.$refs.children) {
         for (var c of this.$refs.children) {
           found = c.selectNext(found, inCollapsedTree);
         }
       }

       return found;
     },
     selectPrev(found, inCollapsedTree) {
       // Set inCollapseTree flag to make sure elements in collapsed trees are not selected.
       const isRootCollapse = !inCollapsedTree && this.isCollapsed;
       if (isRootCollapse) {
         inCollapsedTree = true;
       }

       // Travers children trees recursively in reverse to find currently
       // selected item and select the previous visible one
       if (this.$refs.children) {
         for (var c of [...this.$refs.children].reverse()) {
           found = c.selectPrev(found, inCollapsedTree);
         }
       }

       // Unset inCollapseTree flag as we are no longer in a collapsed tree.
       if (isRootCollapse) {
         inCollapsedTree = false;
       }

       // Check if this is the previous visible item
       if (found && this.filterMatches(this.item) && !inCollapsedTree) {
         this.select();
         return false;
       }

       // Set found flag so that the next visited visible item can be selected.
       if (this.isSelected) {
         found = true;
       }

       return found;
     },
     childItemSelected(item) {
       this.isChildSelected = true;
       this.$emit("item-selected", item);
     },
     select() {
       this.$emit('item-selected', this.item);
     },
     clicked(e) {
       if (window.getSelection().type === "range") {
         // Ignore click if is selection
         return;
       }

       if (!this.isLeaf && e.detail % 2 === 0) {
         // Double click collaspable node
         this.toggleTree();
       } else {
         this.select();
       }
     },
     chipClassForChip(c) {
       return [
         "tree-view-internal-chip",
         this.chipClassOrDefault,
         this.chipClassOrDefault + "-" + (c.class || "default")
       ];
     },
     filterMatches(c) {
       // If a filter is set, consider the item matches if the current item or any of its
       // children matches.
       if (this.filter) {
         var thisMatches = this.filter(c);
         const childMatches = (child) => this.filterMatches(child);
         return thisMatches || (!this.applyingFlattened &&
             c.children && c.children.some(childMatches));
       }
       return true;
     },
     childFilter(c) {
       if (this.filter) {
         if (this.filter(c)) {
           // Filter matched c, don't apply further filtering on c's children.
           return undefined;
         }
       }
       return this.filter;
     },
     isCurrentSelected() {
       return this.selected === this.item;
     },
   },
   computed: {
     isCollapsed() {
       if (this.item.children.length === 0) {
         return false;
       }

       if (this.useGlobalCollapsedState) {
         return this.$store.getters.collapsedStateStoreFor(this.item) ??
         this.isCollapsedByDefault;
       }

       return this.localCollapsedState;
     },
     isSelected() {
       return this.selected === this.item;
     },
     childIsSelected() {
       if (this.$refs.children) {
         for (var c of this.$refs.children) {
           if (c.isSelected || c.childIsSelected) {
             return true;
           }
         }
       }

       return false;
     },
     diffClass() {
       return this.item.diff ? this.item.diff.type : ''
     },
     chipClassOrDefault() {
       return this.chipClass || "tree-view-chip";
     },
     applyingFlattened() {
       return (this.flattened && this.item.flattened) || this.forceFlattened;
     },
     children() {
       return this.applyingFlattened ? this.item.flattened : this.item.children;
     },
     isLeaf() {
       return !this.children || this.children.length == 0;
     },
     isClickable() {
       return !this.isLeaf || this.itemsClickable;
     },
     depth() {
       return this.initialDepth || 0;
     },
     nodeOffsetStyle() {
       const offest = levelOffset * (this.depth + this.isLeaf) + 'px';

       return {
         marginLeft: '-' + offest,
         paddingLeft: offest,
       }
     }
   },
   mounted() {
     // Prevent highlighting on multiclick of node element
     this.$refs.node?.addEventListener('mousedown', (e) => {
       if (e.detail > 1) {
         e.preventDefault();
         return false;
       }

       return true;
     });
   },

 };
 </script>
 <style>
 .data-card > .tree-view {
   border: none;
 }

 .tree-view {
   display: block;
 }

 .tree-view .node {
   display: flex;
   padding: 2px;
   align-items: flex-start;
 }

 .tree-view .node.clickable {
   cursor: pointer;
 }

 .tree-view .node:hover:not(.selected) {
   background: #f1f1f1;
 }

 .tree-view .node:not(.selected).added {
   background: chartreuse;
 }

 .tree-view .node:not(.selected).deleted {
   background: coral;
 }

 .tree-view .node:not(.selected).modified {
   background: cyan;
 }

 .tree-view .node:not(.selected).addedMove,
 .tree-view .node:not(.selected).deletedMove {
   background: slateblue;
 }

 .children {
   /* Aligns border with collapse arrows */
   margin-left: 12px;
   padding-left: 12px;
   border-left: 1px solid rgb(238, 238, 238);
   margin-top: 0px;
 }

 .tree-view .node:hover + .children {
   border-left: 1px solid rgb(200, 200, 200);
 }

 .kind {
   color: #333;
   font-weight: bold;
 }

 .selected {
   background-color: #365179;
   color: white;
 }

 .childSelected {
   border-left: 1px solid rgb(233, 22, 22)
 }

 .selected .kind {
   color: #e9e9e9;
 }

 .tree-view-internal-chip {
   display: inline-block;
 }

 .tree-view-chip {
   padding: 0 10px;
   border-radius: 10px;
   background-color: #aaa;
   color: black;
 }

 .tree-view-chip.tree-view-chip-warn {
   background-color: #ffaa6b;
   color: black;
 }

 .tree-view-chip.tree-view-chip-error {
   background-color: #ff6b6b;
   color: black;
 }

 .tree-view-chip.tree-view-chip-gpu {
   background-color: #00c853;
   color: black;
 }

 .tree-view-chip.tree-view-chip-hwc {
   background-color: #448aff;
   color: black;
 }

 .toggle-tree-btn, .expand-tree-btn {
   background: none;
   color: inherit;
   border: none;
   padding: 0;
   font: inherit;
   cursor: pointer;
   outline: inherit;
 }

 .expand-tree-btn {
   margin-left: 5px;
 }

 .expand-tree-btn.child-selected {
   color: #3f51b5;
 }

 </style>
	<!-- Copyright (C) 2017 The Android Open Source Project

	Licensed under the Apache License, Version 2.0 (the "License");
	you may not use this file except in compliance with the License.
	You may obtain a copy of the License at

	http://www.apache.org/licenses/LICENSE-2.0

	Unless required by applicable law or agreed to in writing, software
	distributed under the License is distributed on an "AS IS" BASIS,
	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	See the License for the specific language governing permissions and
	limitations under the License.
	-->
	<template>
	<div class="tree-view" v-if="item">
	<div class="node"
	:class="{ leaf: isLeaf, selected: isSelected, clickable: isClickable, diffClass }"
	:style="nodeOffsetStyle"
	@click="clicked"
	ref="node"
	>
	<button class="toggle-tree-btn" @click="toggleTree" v-if="!isLeaf" v-on:click.stop>
	<i aria-hidden="true" class="md-icon md-theme-default material-icons">
	{{isCollapsed ? "chevron_right" : "expand_more"}}
	</i>
	</button>
	<div class="padding" v-else>
	<i aria-hidden="true" class="md-icon md-theme-default material-icons">
	arrow_right
	</i>
	</div>
	<div class="description">
	<span class="kind">{{item.kind}}</span>
	<span v-if="item.kind && item.name">-</span>
	<span>{{item.name}}</span>
	<div
	v-for="c in item.chips"
	v-bind:key="c.long"
	:title="c.long"
	:class="chipClassForChip(c)"
	>
	{{c.short}}
	</div>
	</div>
	<div v-show="isCollapsed">
	<button class="expand-tree-btn" :class="{ 'child-selected': isCollapsed && childIsSelected }" v-if="children" @click="expandTree" v-on:click.stop>
	<i aria-hidden="true" class="md-icon md-theme-default material-icons">more_horiz</i>
	</button>
	</div>
	</div>
	<div class="children" v-if="children" v-show="!isCollapsed">
	<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)"
	:items-clickable="itemsClickable"
	:initial-depth="depth + 1"
	:collapse="collapseChildren"
	:collapseChildren="collapseChildren"
	:useGlobalCollapsedState="useGlobalCollapsedState"
	ref="children"
	/>
	</div>
	</div>
	</template>

	<script>
	import jsonProtoDefs from "frameworks/base/core/proto/android/server/windowmanagertrace.proto";
	import protobuf from "protobufjs";

	import { DiffType } from "./utils/diff.js";

	var protoDefs = protobuf.Root.fromJSON(jsonProtoDefs);
	var TraceMessage = protoDefs.lookupType(
	"com.android.server.wm.WindowManagerTraceFileProto"
	);
	var ServiceMessage = protoDefs.lookupType(
	"com.android.server.wm.WindowManagerServiceDumpProto"
	);

	const levelOffset = 24; /* in px, must be kept in sync with css, maybe find a better solution... */

	export default {
	name: "tree-view",
	props: [
	"item",
	"selected",
	"chipClass",
	"filter",
	"flattened",
	"force-flattened",
	"items-clickable",
	"initial-depth",
	"collapse",
	"collapseChildren",
	// Allows collapse state to be tracked by Vuex so that collapse state of
	// items with same stableId can remain consisten accross time and easily
	// toggled from anywhere in the app.
	// Should be true if you are using the same TreeView to display multiple
	// trees throughout the component's lifetime to make sure same nodes are
	// toggled when switching back and forth between trees.
	// If true, requires all nodes in tree to have a stableId.
	"useGlobalCollapsedState",
	],
	data() {
	const isCollapsedByDefault = this.collapse ?? false;

	return {
	isChildSelected: false,
	clickTimeout: null,
	isCollapsedByDefault,
	localCollapsedState: isCollapsedByDefault,
	diffSymbol: {
	[DiffType.NONE]: "",
	[DiffType.ADDED]: "+",
	[DiffType.DELETED]: "-",
	[DiffType.MODIFIED]: ".",
	[DiffType.MOVED]: ".",
	},
	};
	},
	methods: {
	setCollapseValue(isCollapsed) {
	if (this.useGlobalCollapsedState) {
	this.$store.commit('setCollapsedState', {
	item: this.item,
	isCollapsed,
	});
	} else {
	this.localCollapsedState = isCollapsed;
	}
	},
	toggleTree() {
	this.setCollapseValue(!this.isCollapsed);
	},
	expandTree() {
	this.setCollapseValue(false);
	},
	selectNext(found, inCollapsedTree) {
	// Check if this is the next visible item
	if (found && this.filterMatches(this.item) && !inCollapsedTree) {
	this.select();
	return false;
	}

	// Set traversal state variables
	if (this.isSelected) {
	found = true;
	}
	if (this.isCollapsed) {
	inCollapsedTree = true;
	}

	// Travers children trees recursively in reverse to find currently
	// selected item and select the next visible one
	if (this.$refs.children) {
	for (var c of this.$refs.children) {
	found = c.selectNext(found, inCollapsedTree);
	}
	}

	return found;
	},
	selectPrev(found, inCollapsedTree) {
	// Set inCollapseTree flag to make sure elements in collapsed trees are not selected.
	const isRootCollapse = !inCollapsedTree && this.isCollapsed;
	if (isRootCollapse) {
	inCollapsedTree = true;
	}

	// Travers children trees recursively in reverse to find currently
	// selected item and select the previous visible one
	if (this.$refs.children) {
	for (var c of [...this.$refs.children].reverse()) {
	found = c.selectPrev(found, inCollapsedTree);
	}
	}

	// Unset inCollapseTree flag as we are no longer in a collapsed tree.
	if (isRootCollapse) {
	inCollapsedTree = false;
	}

	// Check if this is the previous visible item
	if (found && this.filterMatches(this.item) && !inCollapsedTree) {
	this.select();
	return false;
	}

	// Set found flag so that the next visited visible item can be selected.
	if (this.isSelected) {
	found = true;
	}

	return found;
	},
	childItemSelected(item) {
	this.isChildSelected = true;
	this.$emit("item-selected", item);
	},
	select() {
	this.$emit('item-selected', this.item);
	},
	clicked(e) {
	if (window.getSelection().type === "range") {
	// Ignore click if is selection
	return;
	}

	if (!this.isLeaf && e.detail % 2 === 0) {
	// Double click collaspable node
	this.toggleTree();
	} else {
	this.select();
	}
	},
	chipClassForChip(c) {
	return [
	"tree-view-internal-chip",
	this.chipClassOrDefault,
	this.chipClassOrDefault + "-" + (c.class \|\| "default")
	];
	},
	filterMatches(c) {
	// If a filter is set, consider the item matches if the current item or any of its
	// children matches.
	if (this.filter) {
	var thisMatches = this.filter(c);
	const childMatches = (child) => this.filterMatches(child);
	return thisMatches \|\| (!this.applyingFlattened &&
	c.children && c.children.some(childMatches));
	}
	return true;
	},
	childFilter(c) {
	if (this.filter) {
	if (this.filter(c)) {
	// Filter matched c, don't apply further filtering on c's children.
	return undefined;
	}
	}
	return this.filter;
	},
	isCurrentSelected() {
	return this.selected === this.item;
	},
	},
	computed: {
	isCollapsed() {
	if (this.item.children.length === 0) {
	return false;
	}

	if (this.useGlobalCollapsedState) {
	return this.$store.getters.collapsedStateStoreFor(this.item) ??
	this.isCollapsedByDefault;
	}

	return this.localCollapsedState;
	},
	isSelected() {
	return this.selected === this.item;
	},
	childIsSelected() {
	if (this.$refs.children) {
	for (var c of this.$refs.children) {
	if (c.isSelected \|\| c.childIsSelected) {
	return true;
	}
	}
	}

	return false;
	},
	diffClass() {
	return this.item.diff ? this.item.diff.type : ''
	},
	chipClassOrDefault() {
	return this.chipClass \|\| "tree-view-chip";
	},
	applyingFlattened() {
	return (this.flattened && this.item.flattened) \|\| this.forceFlattened;
	},
	children() {
	return this.applyingFlattened ? this.item.flattened : this.item.children;
	},
	isLeaf() {
	return !this.children \|\| this.children.length == 0;
	},
	isClickable() {
	return !this.isLeaf \|\| this.itemsClickable;
	},
	depth() {
	return this.initialDepth \|\| 0;
	},
	nodeOffsetStyle() {
	const offest = levelOffset * (this.depth + this.isLeaf) + 'px';

	return {
	marginLeft: '-' + offest,
	paddingLeft: offest,
	}
	}
	},
	mounted() {
	// Prevent highlighting on multiclick of node element
	this.$refs.node?.addEventListener('mousedown', (e) => {
	if (e.detail > 1) {
	e.preventDefault();
	return false;
	}

	return true;
	});
	},

	};
	</script>
	<style>
	.data-card > .tree-view {
	border: none;
	}

	.tree-view {
	display: block;
	}

	.tree-view .node {
	display: flex;
	padding: 2px;
	align-items: flex-start;
	}

	.tree-view .node.clickable {
	cursor: pointer;
	}

	.tree-view .node:hover:not(.selected) {
	background: #f1f1f1;
	}

	.tree-view .node:not(.selected).added {
	background: chartreuse;
	}

	.tree-view .node:not(.selected).deleted {
	background: coral;
	}

	.tree-view .node:not(.selected).modified {
	background: cyan;
	}

	.tree-view .node:not(.selected).addedMove,
	.tree-view .node:not(.selected).deletedMove {
	background: slateblue;
	}

	.children {
	/* Aligns border with collapse arrows */
	margin-left: 12px;
	padding-left: 12px;
	border-left: 1px solid rgb(238, 238, 238);
	margin-top: 0px;
	}

	.tree-view .node:hover + .children {
	border-left: 1px solid rgb(200, 200, 200);
	}

	.kind {
	color: #333;
	font-weight: bold;
	}

	.selected {
	background-color: #365179;
	color: white;
	}

	.childSelected {
	border-left: 1px solid rgb(233, 22, 22)
	}

	.selected .kind {
	color: #e9e9e9;
	}

	.tree-view-internal-chip {
	display: inline-block;
	}

	.tree-view-chip {
	padding: 0 10px;
	border-radius: 10px;
	background-color: #aaa;
	color: black;
	}

	.tree-view-chip.tree-view-chip-warn {
	background-color: #ffaa6b;
	color: black;
	}

	.tree-view-chip.tree-view-chip-error {
	background-color: #ff6b6b;
	color: black;
	}

	.tree-view-chip.tree-view-chip-gpu {
	background-color: #00c853;
	color: black;
	}

	.tree-view-chip.tree-view-chip-hwc {
	background-color: #448aff;
	color: black;
	}

	.toggle-tree-btn, .expand-tree-btn {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
	}

	.expand-tree-btn {
	margin-left: 5px;
	}

	.expand-tree-btn.child-selected {
	color: #3f51b5;
	}

	</style>