Fix viewer screen recording

- Minimized <video> element would still intercept pointer events
- Original area occupied by ViewerScreenRecording component would always intercept
  pointer events, even after dragging the element somewhere else.

Test: npm run build:all && npm run test:all
Fix: b/238090772
Change-Id: I1dee45bada91e61c0a80495a9ec8ce16c73cbba7

tools/winscope-ng/src/app/components/trace_view.component.ts

@@ -24,7 +24,16 @@ interface Tab extends View {
 @Component({
   selector: "trace-view",
   template: `
-    <div class="container-overlay">
+    <div class="overlay">
+      <div class="draggable-container" cdkDrag cdkDragBoundary=".overlay">
+        <!--
+        TODO:
+        this draggable div is a temporary hack. We should remove the div and move the cdkDrag
+        directives into the overlay view (e.g. ViewerScreenReocordingComponent) as soon as the new
+        Angular's directive composition API is available
+        (https://github.com/angular/angular/issues/8785).
+         -->
+      </div>
     </div>
     <div class="header-items-wrapper">
       <nav mat-tab-nav-bar class="tabs-navigation-bar">
@@ -49,7 +58,7 @@ interface Tab extends View {
   `,
   styles: [
     `
-      .container-overlay {
+      .overlay {
         z-index: 10;
         position: fixed;
         top: 0px;
@@ -59,6 +68,12 @@ interface Tab extends View {
         pointer-events: none;
       }
 
+      .overlay .draggable-container {
+        position: absolute;
+        right: 0;
+        top: 20vh;
+      }
+
       .header-items-wrapper {
         display: flex;
         flex-direction: row;
@@ -132,18 +147,18 @@ export class TraceViewComponent {
       .flat()
       .filter(view => (view.type === ViewType.OVERLAY));
 
+    if (views.length > 1) {
+      throw new Error(
+        "Only one overlay view is supported. To allow more overlay views, either create more than" +
+        " one draggable containers in this component or move the cdkDrag directives into the" +
+        " overlay view when the new Angular's directive composition API is available" +
+        " (https://github.com/angular/angular/issues/8785).");
+    }
+
     views.forEach(view => {
       view.htmlElement.style.pointerEvents = "all";
-      view.htmlElement.style.position = "absolute";
-      view.htmlElement.style.bottom = "10%";
-      view.htmlElement.style.right = "0px";
-
-      const containerOverlay = this.elementRef.nativeElement.querySelector(".container-overlay");
-      if (!containerOverlay) {
-        throw new Error("Failed to find overlay container sub-element");
-      }
-
-      containerOverlay!.appendChild(view.htmlElement);
+      const container = this.elementRef.nativeElement.querySelector(".overlay .draggable-container")!;
+      container.appendChild(view.htmlElement);
     });
   }
 

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

@@ -49,14 +49,14 @@ describe("ViewerScreenRecordingComponent", () => {
     const video = htmlElement.querySelector("video");
     expect(buttonMinimize).toBeTruthy();
     expect(video).toBeTruthy();
-    expect(video!.style.visibility).toEqual("visible");
+    expect(video!.style.height).toEqual("");
 
     buttonMinimize!.dispatchEvent(new Event("click"));
     fixture.detectChanges();
-    expect(video!.style.visibility).toEqual("hidden");
+    expect(video!.style.height).toEqual("0px");
 
     buttonMinimize!.dispatchEvent(new Event("click"));
     fixture.detectChanges();
-    expect(video!.style.visibility).toEqual("visible");
+    expect(video!.style.height).toEqual("");
   });
 });

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

@@ -20,7 +20,7 @@ import {ScreenRecordingTraceEntry} from "common/trace/screen_recording";
 @Component({
   selector: "viewer-screen-recording",
   template: `
-    <div class="container" cdkDrag cdkDragBoundary=".container-overlay">
+    <div class="container">
       <div class="header">
         <button mat-button class="button-drag" cdkDragHandle>
           <mat-icon class="drag-icon">drag_indicator</mat-icon>
@@ -37,7 +37,7 @@ import {ScreenRecordingTraceEntry} from "common/trace/screen_recording";
       <video
         [currentTime]="videoCurrentTime"
         [src]=videoUrl
-        [style.visibility]="isMinimized ? 'hidden' : 'visible'"
+        [style.height]="isMinimized ? '0px' : ''"
         cdkDragHandle>
       </video>
     </div>
@@ -73,7 +73,7 @@ import {ScreenRecordingTraceEntry} from "common/trace/screen_recording";
       }
 
       video {
-        height: 50vh;
+        width: 15vw;
         cursor: grab;
       }
     `,