Add fields to WM&SF Properties panel for Ime IMMS

Add windowContainer > identifier > title property for imeControlTarget,
imeInputTarget and imeLayeringTarget, which are extracted from WM trace,
into the WM&SF Properties panel for ImeTrace InputMethodManagerService.

Also, change the titles of 'IME...Target' properties into clickable
text (originally, the clickable text was in the right column).

Screenshot: https://screenshot.googleplex.com/BWZFJgca2YmXk6X.png
Bug: 236226833
Test: manual on local build of Winscope
Change-Id: I8da832fa36c722688c73a16d5381d7ef49fbfb0e
diff --git a/tools/winscope/src/ImeAdditionalProperties.vue b/tools/winscope/src/ImeAdditionalProperties.vue
index 0ecd679..24e0928 100644
--- a/tools/winscope/src/ImeAdditionalProperties.vue
+++ b/tools/winscope/src/ImeAdditionalProperties.vue
@@ -68,43 +68,43 @@
         <div />
       </div>
     </div>
-    <div class="group">
-      <span class="group-header">Control Target</span>
+    <div class="group" v-if="wmImeControlTargetOrNull">
+      <button
+          class="text-button group-header"
+          :class="{ 'selected': isSelected(wmImeControlTargetOrNull) }"
+          @click="onClickShowInPropertiesPanel(wmImeControlTargetOrNull)">
+        IME Control Target
+      </button>
       <div class="full-width">
-        <button
-            class="text-button"
-            :class="{ 'selected': isSelected(wmImeControlTargetOrNull) }"
-            v-if="wmImeControlTargetOrNull"
-            @click="onClickShowInPropertiesPanel(wmImeControlTargetOrNull)">
-          IME Control Target
-        </button>
-        <span class="value" v-else>null</span>
+        <span class="key" v-if="wmImeControlTargetTitleOrNull">Title:</span>
+        <span class="value" v-if="wmImeControlTargetTitleOrNull">{{
+            wmImeControlTargetTitleOrNull }}</span>
       </div>
     </div>
-    <div class="group">
-      <span class="group-header">Input Target</span>
+    <div class="group" v-if="wmImeInputTargetOrNull">
+      <button
+          class="text-button group-header"
+          :class="{ 'selected': isSelected(wmImeInputTargetOrNull) }"
+          @click="onClickShowInPropertiesPanel(wmImeInputTargetOrNull)">
+        IME Input Target
+      </button>
       <div class="full-width">
-        <button
-            class="text-button"
-            :class="{ 'selected': isSelected(wmImeInputTargetOrNull) }"
-            v-if="wmImeInputTargetOrNull"
-            @click="onClickShowInPropertiesPanel(wmImeInputTargetOrNull)">
-          IME Input Target
-        </button>
-        <span class="value" v-else>null</span>
+        <span class="key" v-if="wmImeInputTargetTitleOrNull">Title:</span>
+        <span class="value" v-if="wmImeInputTargetTitleOrNull">{{
+            wmImeInputTargetTitleOrNull }}</span>
       </div>
     </div>
-    <div class="group">
-      <span class="group-header">Layering Target</span>
+    <div class="group" v-if="wmImeLayeringTargetOrNull">
+      <button
+          class="text-button group-header"
+          :class="{ 'selected': isSelected(wmImeLayeringTargetOrNull) }"
+          @click="onClickShowInPropertiesPanel(wmImeLayeringTargetOrNull)">
+        IME Layering Target
+      </button>
       <div class="full-width">
-        <button
-            class="text-button"
-            :class="{ 'selected': isSelected(wmImeLayeringTargetOrNull) }"
-            v-if="wmImeLayeringTargetOrNull"
-            @click="onClickShowInPropertiesPanel(wmImeLayeringTargetOrNull)">
-          IME Layering Target
-        </button>
-        <span class="value" v-else>null</span>
+        <span class="key" v-if="wmImeLayeringTargetTitleOrNull">Title:</span>
+        <span class="value" v-if="wmImeLayeringTargetTitleOrNull">{{
+            wmImeLayeringTargetTitleOrNull }}</span>
       </div>
     </div>
   </div>
@@ -309,18 +309,30 @@
               this.entry.wmProperties.imeControlTarget) :
           null;
     },
+    wmImeControlTargetTitleOrNull() {
+      return this.entry?.wmProperties?.imeControlTarget?.windowContainer
+          ?.identifier?.title || 'null';
+    },
     wmImeInputTargetOrNull() {
       return this.entry?.wmProperties?.imeInputTarget ?
           Object.assign({'name': 'IME Input Target'},
               this.entry.wmProperties.imeInputTarget) :
           null;
     },
+    wmImeInputTargetTitleOrNull() {
+      return this.entry?.wmProperties?.imeInputTarget?.windowContainer
+          ?.identifier?.title || 'null';
+    },
     wmImeLayeringTargetOrNull() {
       return this.entry?.wmProperties?.imeLayeringTarget ?
           Object.assign({'name': 'IME Layering Target'},
               this.entry.wmProperties.imeLayeringTarget) :
           null;
     },
+    wmImeLayeringTargetTitleOrNull() {
+      return this.entry?.wmProperties?.imeLayeringTarget?.windowContainer
+          ?.identifier?.title || 'null';
+    },
     sfImeContainerScreenBoundsOrNull() {
       return this.entry.sfProperties?.screenBounds || 'null';
     },