Add 'Key Properties' table in IME Hierarchy panels

Remove the properties written in the names of the following nodes and
instead display them in a new 'Key Properties' table (at the top of
the Hierarchy sub-panel).
- 'Client' node in ImeTrace Clients panel
- 'InputMethodService' node in InputMethodService panel
- 'InputMethodManagerService' node in InputMethodManagerService panel

Screenshots:
- Before: screenshot.googleplex.com/4JbVT42WrcTN3HK.png
- After: screenshot.googleplex.com/7AfwzZEjMN2BQuB.png

Bug: 235313782
Test: manual (on local build of Winscope)

Change-Id: I39fe382ffb50d71e67cace912452a33ca49de3f9

tools/winscope/src/PropertiesTableView.vue

@@ -0,0 +1,75 @@
+<!-- Copyright (C) 2022 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="properties-table-wrapper">
+    <md-card-header class="table-heading">Key properties</md-card-header>
+    <md-table class="table">
+      <md-table-row
+          v-for="[propertyName, propertyValue] in propertyEntries"
+          :key="propertyName">
+        <md-table-cell class="table-key-cell">
+          {{ propertyName }}
+        </md-table-cell>
+        <md-table-cell class="table-key-value">
+          {{ propertyValue != null ? propertyValue : 'undefined' }}
+        </md-table-cell>
+      </md-table-row>
+    </md-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PropertiesTableView.vue',
+  props: ['tableEntries'],
+  computed: {
+    propertyEntries() {
+      return Object.entries(this.tableEntries);
+    },
+  },
+};
+</script>
+
+<style>
+.properties-table-wrapper {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  margin-bottom: 10px;
+}
+
+.table-heading {
+  padding: 10px 16px;
+}
+
+.table-key-cell {
+  background-color: rgba(158, 192, 200, 0.281);
+}
+
+.table-key-value {
+  overflow-wrap: anywhere;
+  border-left: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+.md-table-cell {
+  height: auto;
+}
+
+.md-table-cell-container {
+  padding: 8px 16px;
+}
+
+.md-table-cell:last-child .md-table-cell-container {
+  padding-right: 16px;
+}
+</style>

tools/winscope/src/TraceView.vue

@@ -53,23 +53,29 @@
             />
           </md-field>
         </md-content>
-        <div class="tree-view-wrapper">
-          <tree-view
-            class="treeview"
-            :item="tree"
-            @item-selected="itemSelected"
-            :selected="hierarchySelected"
-            :filter="hierarchyFilter"
-            :flattened="store.flattened"
-            :onlyVisible="store.onlyVisible"
-            :flickerTraceView="store.flickerTraceView"
-            :presentTags="presentTags"
-            :presentErrors="presentErrors"
-            :items-clickable="true"
-            :useGlobalCollapsedState="true"
-            :simplify-names="store.simplifyNames"
-            ref="hierarchy"
+        <div class="hierarchy-content">
+          <properties-table-view
+              v-if="propertiesForTableView"
+              :tableEntries="propertiesForTableView"
           />
+          <div class="tree-view-wrapper">
+            <tree-view
+              class="treeview"
+              :item="tree"
+              @item-selected="itemSelected"
+              :selected="hierarchySelected"
+              :filter="hierarchyFilter"
+              :flattened="store.flattened"
+              :onlyVisible="store.onlyVisible"
+              :flickerTraceView="store.flickerTraceView"
+              :presentTags="presentTags"
+              :presentErrors="presentErrors"
+              :items-clickable="true"
+              :useGlobalCollapsedState="true"
+              :simplify-names="store.simplifyNames"
+              ref="hierarchy"
+            />
+          </div>
         </div>
       </flat-card>
     </div>
@@ -149,6 +155,7 @@ import Rects from './Rects.vue';
 import FlatCard from './components/FlatCard.vue';
 import PropertiesTreeElement from './PropertiesTreeElement.vue';
 import SurfaceFlingerPropertyGroups from '@/SurfaceFlingerPropertyGroups.vue';
+import PropertiesTableView from './PropertiesTableView';
 
 import {ObjectTransformer} from './transform.js';
 import {DiffGenerator, defaultModifiedCheck} from './utils/diff.js';
@@ -438,12 +445,34 @@ export default {
     hasTagsOrErrors() {
       return this.presentTags.length > 0 || this.presentErrors.length > 0;
     },
+    propertiesForTableView() {
+      if (this.file.type == TRACE_TYPES.IME_CLIENTS) {
+        return {
+          'methodId': this.item.obj.client?.inputMethodManager?.curId,
+          'packageName': this.item.obj.client?.editorInfo?.packageName,
+        };
+      } else if (this.file.type == TRACE_TYPES.IME_SERVICE) {
+        return {
+          'windowVisible': this.item.obj.inputMethodService?.windowVisible,
+          'decorViewVisible': this.item.obj.inputMethodService?.decorViewVisible,
+          'packageName': this.item.obj.inputMethodService?.inputEditorInfo?.packageName,
+        };
+      } else if (this.file.type == TRACE_TYPES.IME_MANAGERSERVICE) {
+        return {
+          'methodId': this.item.obj.inputMethodManagerService?.curMethodId,
+          'curFocusedWindow': this.item.obj.inputMethodManagerService?.curFocusedWindowName,
+          'lastImeTargetWindow': this.item.obj.inputMethodManagerService?.lastImeTargetWindowName,
+          'inputShown': this.item.obj.inputMethodManagerService?.inputShown,
+        };
+      }
+    },
   },
   components: {
     'tree-view': TreeView,
     'rects': Rects,
     'flat-card': FlatCard,
     'sf-property-groups': SurfaceFlingerPropertyGroups,
+    'properties-table-view': PropertiesTableView,
   },
 };
 
@@ -486,6 +515,7 @@ function getFilter(filterString) {
   margin: 8px;
   min-width: 400px;
   min-height: 70rem;
+  max-height: 70rem;
 }
 
 .rects,
@@ -508,6 +538,7 @@ function getFilter(filterString) {
 .treeview {
   overflow: auto;
   white-space: pre-line;
+  flex: 1 0 0;
 }
 
 .no-properties {
@@ -546,6 +577,7 @@ function getFilter(filterString) {
   color: rgba(0, 0, 0, 0.75);
 }
 
+.hierarchy-content,
 .properties-content {
   display: flex;
   flex-direction: column;
@@ -557,8 +589,4 @@ function getFilter(filterString) {
   flex-direction: column;
   flex: 1;
 }
-
-.treeview {
-  flex: 1 0 0;
-}
 </style>

tools/winscope/src/transform_ime.js

@@ -28,9 +28,7 @@ function transform_client_dump(entry) {
   return transform({
     obj: transform_input_connection_call(entry),
     kind: 'Client',
-    name: '\n- methodId ' + entry?.inputMethodManager?.curId
-        + '\n- view ' + entry?.viewRootImpl?.view
-        + '\n- packageName ' + entry?.editorInfo?.packageName,
+    name: entry?.viewRootImpl?.view,
     children: [],
     stableId: 'client'
   });
@@ -64,9 +62,7 @@ function transform_service_dump(entry) {
   return transform({
     obj: transform_input_connection_call(entry),
     kind: 'InputMethodService',
-    name: '\n- windowVisible ' + entry?.windowVisible
-        + '\n- decorViewVisible ' + entry?.decorViewVisible
-        + '\n- packageName ' + entry?.inputEditorInfo?.packageName,
+    name: '',
     children: [],
     stableId: 'service'
   });
@@ -100,10 +96,7 @@ function transform_managerservice_dump(entry) {
   return transform({
     obj: entry,
     kind: 'InputMethodManagerService',
-    name: '\n- methodId ' + entry?.curMethodId
-        + '\n- curFocusedWindow ' + entry?.curFocusedWindowName
-        + '\n- lastImeTargetWindow ' + entry?.lastImeTargetWindowName
-        + '\n- inputShown ' + entry?.inputShown,
+    name: '',
     children: [],
     stableId: 'managerservice'
   });