Cleanup the UI for better visibility
Test: Checked that everything looked correct visually
Change-Id: Id60e8a4f6d0e6c21bcae01ae90730e727c459f42
diff --git a/tools/winscope/package.json b/tools/winscope/package.json
index ac9591f..384c8f6 100644
--- a/tools/winscope/package.json
+++ b/tools/winscope/package.json
@@ -16,7 +16,7 @@
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-env": "^1.5.1",
- "cross-env": "^3.0.0",
+ "cross-env": "^7.0.2",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"html-webpack-inline-source-plugin": "^0.0.9",
diff --git a/tools/winscope/src/App.vue b/tools/winscope/src/App.vue
index dd6db07..755d961 100644
--- a/tools/winscope/src/App.vue
+++ b/tools/winscope/src/App.vue
@@ -42,7 +42,10 @@
</md-toolbar>
<md-list>
<md-list-item v-for="(file, idx) in files" :key="file.filename">
- <md-icon>{{file.type.icon}}</md-icon>
+ <md-icon>
+ {{file.type.icon}}
+ <md-tooltip md-direction="right">{{file.type.name}}</md-tooltip>
+ </md-icon>
<timeline
:items="file.timeline"
:selected-index="file.selectedIndex"
diff --git a/tools/winscope/src/Rects.vue b/tools/winscope/src/Rects.vue
index 9548d7e..1f7c26c 100644
--- a/tools/winscope/src/Rects.vue
+++ b/tools/winscope/src/Rects.vue
@@ -31,6 +31,7 @@
props: ['bounds', 'rects', 'highlight'],
data () {
return {
+ desiredHeight: 800,
desiredWidth: 400,
};
},
@@ -50,7 +51,13 @@
},
methods: {
s(sourceCoordinate) { // translate source into target coordinates
- return sourceCoordinate / this.boundsC.width * this.desiredWidth;
+ var scale;
+ if(this.boundsC.width < this.boundsC.height) {
+ scale = this.desiredHeight / this.boundsC.height;
+ } else {
+ scale = this.desiredWidth / this.boundsC.width;
+ }
+ return sourceCoordinate * scale;
},
rectToStyle(r) {
var x = this.s(r.left);
@@ -82,10 +89,10 @@
}
.rect {
border: 1px solid black;
- background-color: rgba(100, 100, 100, 0.8);
+ background-color: rgba(110, 114, 116, 0.8);
}
.highlight {
- border: 2px solid red;
+ border: 2px solid rgb(235, 52, 52);
pointer-events: none;
}
.label {
diff --git a/tools/winscope/src/TreeView.vue b/tools/winscope/src/TreeView.vue
index 9445c52..c6d2bb2 100644
--- a/tools/winscope/src/TreeView.vue
+++ b/tools/winscope/src/TreeView.vue
@@ -14,28 +14,61 @@
-->
<template>
<div class="tree-view">
- <div @click="clicked" :class="computedClass">
- <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" :title="c.long" :class="chipClassForChip(c)">
- {{c.short}}
- </div>
+ <div @click="clicked" :class="computedClass" class="node">
+ <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 class="children" v-if="children">
- <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' />
+ <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"
+ />
</div>
</div>
</template>
+
<script>
-import jsonProtoDefs from 'frameworks/base/core/proto/android/server/windowmanagertrace.proto'
-import protobuf from 'protobufjs'
+import jsonProtoDefs from "frameworks/base/core/proto/android/server/windowmanagertrace.proto";
+import protobuf from "protobufjs";
var protoDefs = protobuf.Root.fromJSON(jsonProtoDefs);
+var TraceMessage = protoDefs.lookupType(
+ "com.android.server.wm.WindowManagerTraceFileProto"
+);
+var ServiceMessage = protoDefs.lookupType(
+ "com.android.server.wm.WindowManagerServiceDumpProto"
+);
export default {
- name: 'tree-view',
- props: ['item', 'selected', 'chipClass', 'filter', 'flattened', 'force-flattened'],
- data() {
- return {};
+ name: "tree-view",
+ props: [
+ "item",
+ "selected",
+ "chipClass",
+ "filter",
+ "flattened",
+ "force-flattened"
+ ],
+ data: function() {
+ return {
+ isChildSelected: false
+ };
},
methods: {
selectNext(found, parent) {
@@ -43,7 +76,7 @@
this.clicked();
return false;
}
- if (this.selected === this.item) {
+ if (this.isCurrentSelected()) {
found = true;
}
if (this.$refs.children) {
@@ -63,20 +96,23 @@
this.clicked();
return false;
}
- if (this.selected === this.item) {
+ if (this.isCurrentSelected()) {
found = true;
}
return found;
},
childItemSelected(item) {
- this.$emit('item-selected', item);
+ this.isChildSelected = true;
+ this.$emit("item-selected", item);
},
clicked() {
- this.$emit('item-selected', this.item);
+ this.$emit("item-selected", this.item);
},
chipClassForChip(c) {
- return ['tree-view-internal-chip', this.chipClassOrDefault,
- this.chipClassOrDefault + '-' + (c.class || 'default')
+ return [
+ "tree-view-internal-chip",
+ this.chipClassOrDefault,
+ this.chipClassOrDefault + "-" + (c.class || "default")
];
},
filterMatches(c) {
@@ -99,40 +135,72 @@
}
return this.filter;
},
+ isCurrentSelected() {
+ return this.selected === this.item;
+ },
},
computed: {
computedClass() {
return (this.item == this.selected) ? 'selected' : ''
},
chipClassOrDefault() {
- return this.chipClass || 'tree-view-chip';
+ return this.chipClass || "tree-view-chip";
},
applyingFlattened() {
- return this.flattened && this.item.flattened || this.forceFlattened;
+ return (this.flattened && this.item.flattened) || this.forceFlattened;
},
children() {
return this.applyingFlattened ? this.item.flattened : this.item.children;
},
}
-}
-
+};
</script>
<style>
+.data-card > .tree-view {
+ border: none;
+}
+
+.tree-view {
+ display: block;
+ border-left: 1px solid rgb(238, 238, 238);
+}
+
+.tree-view.tree-view {
+ margin: 0;
+ padding: 1px 8px;
+}
+
+.tree-view .node {
+ display: inline-block;
+ padding: 2px;
+ cursor: pointer;
+}
+
+.tree-view .node:hover:not(.selected) {
+ background: #f1f1f1;
+}
+
.children {
- margin-left: 24px;
+ margin-left: 8px;
+ margin-top: 0px;
}
.kind {
color: #333;
+ font-weight: bold;
}
.selected {
- background-color: #3f51b5;
+ background-color: #365179;
color: white;
}
+.childSelected {
+ border-left: 1px solid rgb(233, 22, 22)
+}
+
.selected .kind {
- color: #ccc;
+ color: #e9e9e9;
}
.tree-view-internal-chip {
diff --git a/tools/winscope/src/index_template.html b/tools/winscope/src/index_template.html
index 582fa10..8cd562f 100644
--- a/tools/winscope/src/index_template.html
+++ b/tools/winscope/src/index_template.html
@@ -13,7 +13,7 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
-<html lang="en">
+<html lang="en" class="md-scrollbar">
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
diff --git a/tools/winscope/yarn.lock b/tools/winscope/yarn.lock
index 0299840..91b903c 100644
--- a/tools/winscope/yarn.lock
+++ b/tools/winscope/yarn.lock
@@ -1483,22 +1483,21 @@
safe-buffer "^5.0.1"
sha.js "^2.4.8"
-cross-env@^3.0.0:
- version "3.2.4"
- resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-3.2.4.tgz#9e0585f277864ed421ce756f81a980ff0d698aba"
- integrity sha1-ngWF8neGTtQhznVvgamA/w1piro=
+cross-env@^7.0.2:
+ version "7.0.2"
+ resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.2.tgz#bd5ed31339a93a3418ac4f3ca9ca3403082ae5f9"
+ integrity sha512-KZP/bMEOJEDCkDQAyRhu3RL2ZO/SUVrxQVI0G3YEQ+OLbRA3c6zgixe8Mq8a/z7+HKlNEjo8oiLUs8iRijY2Rw==
dependencies:
- cross-spawn "^5.1.0"
- is-windows "^1.0.0"
+ cross-spawn "^7.0.1"
-cross-spawn@^5.1.0:
- version "5.1.0"
- resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
- integrity sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=
+cross-spawn@^7.0.1:
+ version "7.0.1"
+ resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.1.tgz#0ab56286e0f7c24e153d04cc2aa027e43a9a5d14"
+ integrity sha512-u7v4o84SwFpD32Z8IIcPZ6z1/ie24O6RU3RbtL5Y316l3KuHVPx9ItBgWQ6VlfAFnRnTtMUrsQ9MUUTuEZjogg==
dependencies:
- lru-cache "^4.0.1"
- shebang-command "^1.2.0"
- which "^1.2.9"
+ path-key "^3.1.0"
+ shebang-command "^2.0.0"
+ which "^2.0.1"
crypto-browserify@^3.11.0:
version "3.12.0"
@@ -2860,7 +2859,7 @@
resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
-is-windows@^1.0.0, is-windows@^1.0.2:
+is-windows@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
@@ -3704,6 +3703,11 @@
resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
integrity sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=
+path-key@^3.1.0:
+ version "3.1.1"
+ resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+ integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
path-parse@^1.0.6:
version "1.0.6"
resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
@@ -4664,17 +4668,17 @@
inherits "^2.0.1"
safe-buffer "^5.0.1"
-shebang-command@^1.2.0:
- version "1.2.0"
- resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
- integrity sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=
+shebang-command@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+ integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
dependencies:
- shebang-regex "^1.0.0"
+ shebang-regex "^3.0.0"
-shebang-regex@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
- integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
+shebang-regex@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+ integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
sigmund@^1.0.1:
version "1.0.1"
@@ -5483,10 +5487,10 @@
resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
integrity sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=
-which@^1.2.9:
- version "1.3.1"
- resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
- integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
+which@^2.0.1:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+ integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
dependencies:
isexe "^2.0.0"
