From 7cf0e4fe2b1f785a211f06ab9b95d123f24e0022 Mon Sep 17 00:00:00 2001
From: Priyanka <priyankaspatel@google.com>
Date: Tue, 31 Aug 2021 14:19:17 +0000
Subject: [PATCH] Bounds representation improvements.

Highlighted rects change background color to a red tint to make them
easier to see. The new displays property on an entry is now shown as a
blue-dashed rect on the SF trace - should still be able to click on
other rects to highlight them. Old SF traces (without display property)
should not be affected. Boundless displays now constrained to 1.3 times
display size.

Bug: b/198306246
Test: Upload trace to x20 (see bug).
Change-Id: Id80e539cd5f302754146d0bb1708784e3a57067c
---
 tools/winscope/src/Rects.vue     | 86 ++++++++++++++++++++++----------
 tools/winscope/src/TraceView.vue |  9 ++++
 2 files changed, 70 insertions(+), 25 deletions(-)

diff --git a/tools/winscope/src/Rects.vue b/tools/winscope/src/Rects.vue
index edf46e606..bd0c3c864 100644
--- a/tools/winscope/src/Rects.vue
+++ b/tools/winscope/src/Rects.vue
@@ -15,14 +15,23 @@
 <template>
   <div class="bounds" :style="boundsStyle">
     <div
-      class="rect" v-for="r in filteredRects"
-      :style="rectToStyle(r)"
-      @click="onClick(r)"
-      v-bind:key="`${r.left}-${r.right}-${r.top}-${r.bottom}-${r.ref.name}`"
+      class="rect" v-for="rect in filteredRects"
+      :style="rectToStyle(rect)"
+      @click="onClick(rect)"
+      v-bind:key="`${rect.left}-${rect.right}-${rect.top}-${rect.bottom}-${rect.ref.name}`"
     >
-      <span class="label">{{r.label}}</span>
+      <span class="label">{{rect.label}}</span>
     </div>
-    <div class="highlight" v-if="highlight" :style="rectToStyle(highlight)" />
+    <div
+      class="highlight"
+      v-if="highlight"
+      :style="rectToStyle(highlight)"
+    />
+    <div
+      class="displayRect" v-for="rect in displayRects"
+      :style="rectToStyle(rect)"
+      v-bind:key="`${rect.left}-${rect.right}-${rect.top}-${rect.bottom}-${rect.id}`"
+    />
   </div>
 </template>
 
@@ -33,7 +42,7 @@ import {multiplyRect} from './matrix_utils.js';
 
 export default {
   name: 'rects',
-  props: ['bounds', 'rects', 'highlight'],
+  props: ['bounds', 'rects', 'highlight','displays'],
   data() {
     return {
       desiredHeight: 800,
@@ -45,12 +54,27 @@ export default {
       if (this.bounds) {
         return this.bounds;
       }
-      const width = Math.max(
-          ...this.rects.map((r) => multiplyRect(r.transform, r).right));
-      const height = Math.max(
-          ...this.rects.map((r) => multiplyRect(r.transform, r).bottom));
+      var width = Math.max(
+          ...this.rects.map((rect) => multiplyRect(rect.transform, rect).right));
+      var height = Math.max(
+          ...this.rects.map((rect) => multiplyRect(rect.transform, rect).bottom));
+
+      // constrain max bounds to prevent boundless layers from shrinking visible displays
+      if (this.hasDisplays) {
+        width = Math.min(width, this.maxWidth);
+        height = Math.min(height, this.maxHeight);
+      }
       return {width, height};
     },
+    maxWidth() {
+      return Math.max(...this.displayRects.map(rect => rect.width)) * 1.3;
+    },
+    maxHeight() {
+      return Math.max(...this.displayRects.map(rect => rect.height)) * 1.3;
+    },
+    hasDisplays() {
+      return this.displays.length > 0;
+    },
     boundsStyle() {
       return this.rectToStyle({top: 0, left: 0, right: this.boundsC.width,
         bottom: this.boundsC.height});
@@ -63,6 +87,13 @@ export default {
         return isVisible;
       });
     },
+    displayRects() {
+      return this.displays.map(display => {
+        var rect = display.layerStackSpace;
+        rect.id = display.id;
+        return rect;
+      });
+    },
   },
   methods: {
     s(sourceCoordinate) { // translate source into target coordinates
@@ -74,17 +105,17 @@ export default {
       }
       return sourceCoordinate * scale;
     },
-    rectToStyle(r) {
-      const x = this.s(r.left);
-      const y = this.s(r.top);
-      const w = this.s(r.right) - this.s(r.left);
-      const h = this.s(r.bottom) - this.s(r.top);
+    rectToStyle(rect) {
+      const x = this.s(rect.left);
+      const y = this.s(rect.top);
+      const w = this.s(rect.right) - this.s(rect.left);
+      const h = this.s(rect.bottom) - this.s(rect.top);
 
       let t;
-      if (r.transform && r.transform.matrix) {
-        t = r.transform.matrix;
+      if (rect.transform && rect.transform.matrix) {
+        t = rect.transform.matrix;
       } else {
-        t = r.transform;
+        t = rect.transform;
       }
 
       const tr = t ? `matrix(${t.dsdx}, ${t.dtdx}, ${t.dsdy}, ${t.dtdy}, ` +
@@ -92,13 +123,13 @@ export default {
       const rectStyle = `top: ${y}px; left: ` +
             `${x}px; height: ${h}px; width: ${w}px; ` +
             `transform: ${tr}; transform-origin: 0 0;`;
-      if (r && r.ref) {
-        console.log(`${r.ref.name} - ${rectStyle}`);
+      if (rect && rect.ref) {
+        console.log(`${rect.ref.name} - ${rectStyle}`);
       }
       return rectStyle;
     },
-    onClick(r) {
-      this.$emit('rect-click', r.ref);
+    onClick(rect) {
+      this.$emit('rect-click', rect.ref);
     },
   },
 };
@@ -109,7 +140,7 @@ export default {
   position: relative;
   overflow: hidden;
 }
-.highlight, .rect {
+.highlight, .rect, .displayRect {
   position: absolute;
   box-sizing: border-box;
   display: flex;
@@ -117,10 +148,15 @@ export default {
 }
 .rect {
   border: 1px solid black;
-  background-color: rgba(110, 114, 116, 0.8);
+  background-color: rgba(146, 149, 150, 0.8);
 }
 .highlight {
   border: 2px solid rgb(235, 52, 52);
+  background-color: rgba(243, 212, 212, 0.25);
+  pointer-events: none;
+}
+.displayRect {
+  border: 4px dashed #195aca;
   pointer-events: none;
 }
 .label {
diff --git a/tools/winscope/src/TraceView.vue b/tools/winscope/src/TraceView.vue
index ef42d6549..5260dd1f6 100644
--- a/tools/winscope/src/TraceView.vue
+++ b/tools/winscope/src/TraceView.vue
@@ -18,6 +18,7 @@
       <rects
         :bounds="bounds"
         :rects="rects"
+        :displays="displays"
         :highlight="highlight"
         @rect-click="onRectClick"
       />
@@ -188,6 +189,7 @@ export default {
       lastSelectedStableId: null,
       bounds: {},
       rects: [],
+      displays: [],
       item: null,
       tree: null,
       highlight: null,
@@ -254,6 +256,13 @@ export default {
       this.rects = [...rects].reverse();
       this.bounds = item.bounds;
 
+      //only update displays if item is SF trace and displays present
+      if (item.stableId==="LayerTraceEntry") {
+        this.displays = item.displays;
+      } else {
+        this.displays = [];
+      }
+
       this.hierarchySelected = null;
       this.selectedTree = null;
       this.highlight = null;