From d6cac3bfda9b04d2820d530608b77f9f4c1d2693 Mon Sep 17 00:00:00 2001
From: Alex Kaminskii <alex@openreplay.com>
Date: Tue, 14 Feb 2023 17:53:12 +0100
Subject: [PATCH] refactor(player): move contextmenu listener initiation to the
 corresponding context(InspectorController)

---
 frontend/app/player/web/Screen/Screen.ts      | 20 +++----------------
 .../player/web/addons/InspectorController.ts  | 15 +++++++++++++-
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/frontend/app/player/web/Screen/Screen.ts b/frontend/app/player/web/Screen/Screen.ts
index b095385b1..4ab6fcd0f 100644
--- a/frontend/app/player/web/Screen/Screen.ts
+++ b/frontend/app/player/web/Screen/Screen.ts
@@ -91,20 +91,6 @@ export default class Screen {
 
     parentElement.appendChild(this.screen);
     this.parentElement = parentElement;
-
-    /* == For the Inspecting Document content  == */
-    this.overlay.addEventListener('contextmenu', () => {
-      this.overlay.style.display = 'none'
-      const doc = this.document
-      if (!doc) { return }
-      const returnOverlay = () => {
-        this.overlay.style.display = 'block'
-        doc.removeEventListener('mousemove', returnOverlay)
-        doc.removeEventListener('mouseclick', returnOverlay) // TODO: prevent default in case of input selection
-      }
-      doc.addEventListener('mousemove', returnOverlay)
-      doc.addEventListener('mouseclick', returnOverlay)
-    })
   }
 
   getParentElement():  HTMLElement | null {
@@ -131,7 +117,7 @@ export default class Screen {
   private getBoundingClientRect(): DOMRect {
      if (this.boundingRect === null) {
        // TODO: use this.screen instead in order to separate overlay functionality
-      return this.boundingRect = this.overlay.getBoundingClientRect() // expensive operation?
+      return this.boundingRect = this.screen.getBoundingClientRect() // expensive operation?
     }
     return this.boundingRect
   }
@@ -139,7 +125,7 @@ export default class Screen {
   getInternalViewportCoordinates({ x, y }: Point): Point {
     const { x: overlayX, y: overlayY, width } = this.getBoundingClientRect();
 
-    const screenWidth = this.overlay.offsetWidth;
+    const screenWidth = this.screen.offsetWidth;
 
     const scale = screenWidth / width;
     const screenX = (x - overlayX) * scale;
@@ -241,7 +227,7 @@ export default class Screen {
       height: height + 'px',
     })
 
-    this.boundingRect = this.overlay.getBoundingClientRect();
+    this.boundingRect = this.screen.getBoundingClientRect();
   }
 
 }
diff --git a/frontend/app/player/web/addons/InspectorController.ts b/frontend/app/player/web/addons/InspectorController.ts
index 987b9b0bc..9bb53ff13 100644
--- a/frontend/app/player/web/addons/InspectorController.ts
+++ b/frontend/app/player/web/addons/InspectorController.ts
@@ -8,7 +8,20 @@ export default class InspectorController {
   private substitutor: Screen | null = null
   private inspector: Inspector | null = null
   marker: Marker | null = null
-  constructor(private screen: Screen) {}
+  constructor(private screen: Screen) {
+    screen.overlay.addEventListener('contextmenu', () => {
+      screen.overlay.style.display = 'none'
+      const doc = screen.document
+      if (!doc) { return }
+      const returnOverlay = () => {
+        screen.overlay.style.display = 'block'
+        doc.removeEventListener('mousemove', returnOverlay)
+        doc.removeEventListener('mouseclick', returnOverlay) // TODO: prevent default in case of input selection
+      }
+      doc.addEventListener('mousemove', returnOverlay)
+      doc.addEventListener('mouseclick', returnOverlay)
+    })
+  }
 
   scale(dims: Dimensions) {
     if (this.substitutor) {