Merge "Update rects view to show multiple displays."

tools/winscope-ng/src/viewers/rects.component.spec.ts

@@ -96,7 +96,7 @@ describe("RectsComponent", () => {
         isDisplay: false,
         ref: null,
         id: 12345,
-        stackId: 0,
+        displayId: 0,
       }
     ]);
     spyOn(component.rectsComponent, "drawRects").and.callThrough();

tools/winscope-ng/src/viewers/rects.component.ts

@@ -45,7 +45,7 @@ import * as THREE from "three";
           (input)="canvasGraphics.updateRotation($event.value!)"
         ></mat-slider>
         <mat-checkbox
-          [hidden]="visibleView()"
+          [disabled]="visibleView()"
           class="rects-checkbox"
           [checked]="showVirtualDisplays()"
           (change)="canvasGraphics.updateVirtualDisplays($event.checked!)"
@@ -68,6 +68,9 @@ import * as THREE from "three";
         <canvas id="rects-canvas" (click)="onRectClick($event)">
         </canvas>
       </div>
+      <div class="tabs" *ngIf="displayIds.length > 1">
+        <button mat-raised-button *ngFor="let displayId of displayIds" (click)="changeDisplayId(displayId)">{{displayId}}</button>
+      </div>
     </mat-card-content>
   `,
   styles: [
@@ -92,13 +95,14 @@ import * as THREE from "three";
 
 export class RectsComponent implements OnChanges, OnDestroy {
   @Input() rects!: Rectangle[];
-
+  @Input() displayIds: Array<number> = [];
   @Input() highlighted = "";
 
   constructor(
     @Inject(ElementRef) private elementRef: ElementRef,
   ) {
     this.canvasGraphics = new CanvasGraphics();
+    this.currentDisplayId = this.displayIds[0] ?? 0; //default stack id is usually zero
   }
 
   ngOnDestroy() {
@@ -177,6 +181,7 @@ export class RectsComponent implements OnChanges, OnDestroy {
   }
 
   updateVariablesBeforeRefresh() {
+    this.rects = this.rects.filter(rect => rect.displayId === this.currentDisplayId);
     this.canvasGraphics.updateRects(this.rects);
     const biggestX = Math.max(...this.rects.map(rect => rect.topLeft.x + rect.width/2));
     this.canvasGraphics.updateIsLandscape(biggestX > this.s({x: this.boundsWidth, y:this.boundsHeight}).x/2);
@@ -275,6 +280,10 @@ export class RectsComponent implements OnChanges, OnDestroy {
     return this.canvasGraphics.getShowVirtualDisplays();
   }
 
+  changeDisplayId(displayId: number) {
+    this.currentDisplayId = displayId;
+  }
+
   canvasGraphics: CanvasGraphics;
   private readonly _60fpsInterval = 16.66666666666667;
   private drawRectsInterval = interval(this._60fpsInterval);
@@ -283,4 +292,5 @@ export class RectsComponent implements OnChanges, OnDestroy {
   private displayRects!: Rectangle[];
   private canvasSubscription?: Subscription;
   private mouse = new THREE.Vector3(0, 0, 0);
+  private currentDisplayId: number;
 }

tools/winscope-ng/src/viewers/rects_utils.spec.ts

@@ -38,7 +38,7 @@ describe("RectsUtils", () => {
       width: 1,
       ref: null,
       id: 12345,
-      stackId: 0
+      displayId: 0
     };
     const expected = {
       topLeft: {x: 1, y: 1},
@@ -51,7 +51,7 @@ describe("RectsUtils", () => {
       width: 1,
       ref: null,
       id: 12345,
-      stackId: 0,
+      displayId: 0,
       isVirtual: undefined
     };
     expect(RectsUtils.transformRect(rect.transform.matrix, rect)).toEqual(expected);

tools/winscope-ng/src/viewers/rects_utils.ts

@@ -52,7 +52,7 @@ export const RectsUtils = {
       width: Math.abs(right - left),
       ref: rect.ref,
       id: rect.id,
-      stackId: rect.stackId,
+      displayId: rect.displayId,
       isVirtual: rect.isVirtual
     };
     return outrect;

tools/winscope-ng/src/viewers/viewer_surface_flinger/presenter.ts

@@ -39,13 +39,26 @@ class Presenter {
       const rect = display.layerStackSpace;
       rect.label = display.name;
       rect.id = display.id;
-      rect.stackId = display.layerStackId;
+      rect.displayId = display.layerStackId;
       rect.isDisplay = true;
       rect.isVirtual = display.isVirtual;
       return rect;
     }) ?? [];
     this.uiData.highlighted = this.highlighted;
-    this.uiData.rects = this.rectsToUiData(entry.rects.concat(displayRects));
+
+    this.displayIds = [];
+    const rects = entry.visibleLayers
+      .sort((a: any, b: any) => (b.absoluteZ > a.absoluteZ) ? 1 : (a.absoluteZ == b.absoluteZ) ? 0 : -1)
+      .map((it: any) => {
+        const rect = it.rect;
+        rect.displayId = it.stackId;
+        if (!this.displayIds.includes(it.stackId)) {
+          this.displayIds.push(it.stackId);
+        }
+        return rect;
+      });
+    this.uiData.rects = this.rectsToUiData(rects.concat(displayRects));
+    this.uiData.displayIds = this.displayIds;
     this.notifyViewCallback(this.uiData);
   }
 
@@ -92,7 +105,7 @@ class Presenter {
         isDisplay: isDisplay,
         ref: rect.ref,
         id: rect.id ?? rect.ref.id,
-        stackId: rect.stackId ?? rect.ref.stackId,
+        displayId: rect.displayId ?? rect.ref.stackId,
         isVirtual: rect.isVirtual
       };
       uiRects.push(newRect);
@@ -103,6 +116,7 @@ class Presenter {
   private readonly notifyViewCallback: NotifyViewCallbackType;
   private uiData: UiData;
   private highlighted = "";
+  private displayIds: Array<number> = [];
 }
 
 export {Presenter};

tools/winscope-ng/src/viewers/viewer_surface_flinger/ui_data.ts

@@ -19,6 +19,7 @@ class UiData {
   }
   rects?: Rectangle[] = [];
   highlighted?: string = "";
+  displayIds?: number[] = [];
 }
 
 export interface Rectangle {
@@ -32,7 +33,7 @@ export interface Rectangle {
   isDisplay: boolean;
   ref: any;
   id: number;
-  stackId: number;
+  displayId: number;
   isVirtual?: boolean;
 }
 

tools/winscope-ng/src/viewers/viewer_surface_flinger/viewer_surface_flinger.component.ts

@@ -28,6 +28,7 @@ import { TraceType } from "common/trace/trace_type";
         <mat-card class="rects-view">
           <rects-view
             [rects]="inputData?.rects ?? []"
+            [displayIds]="inputData?.displayIds ?? []"
             [highlighted]="inputData?.highlighted ?? ''"
             class="rects-view"
           ></rects-view>