Automatically scale the browser tab to the size of the viewport

Runtime/ChromeDevtools/BrowserTab.cs

@@ -25,11 +25,6 @@ namespace bessw.Unity.WebView.ChromeDevTools
         /// </summary>
         public Vector2Int Size { get; private set; }
 
-        /// <summary>
-        /// Scales the page in the browser tab
-        /// </summary>
-        public int PageScaleFactor { get; private set; }
-
         /// <summary>
         /// width and height of the stream from the browser
         /// </summary>
@@ -87,7 +82,7 @@ namespace bessw.Unity.WebView.ChromeDevTools
             yield return devtools.readLoop();
         }
 
-        public async Task SetSizeAndScale(Vector2Int size, int pageScaleFactor)
+        public async Task SetSize(Vector2Int size)
         {
             await devtools.SendCommandAsync(new setDeviceMetricsOverride
             {
@@ -97,7 +92,6 @@ namespace bessw.Unity.WebView.ChromeDevTools
                 screenHeight = size.y,
             });
             Size = size;
-            PageScaleFactor = pageScaleFactor;
         }
 
         /// <summary>

Runtime/WebViewComponent.cs

@@ -57,19 +57,22 @@ namespace bessw.Unity.WebView
         public event Action OnWebViewComponentReady;
 
         private RawImage rawImage;
-        private RectTransform rectTransform;
+        private RectTransform viewPort;
+        private Canvas scaler;
+
 
         public bool headlessBrowser = true;
         //TODO: handle changed targetUrl
         public string targetUrl = "https://google.de";
 
-        public int PageScaleFactor = 3;
+        //public float PageScaleFactor = 2.0f; // We can just grab the factor of the canvas, no need for a manual number
 
         // Start is called before the first frame update
         private void Start()
         {
             rawImage = this.gameObject.GetComponent<RawImage>();
-            rectTransform = this.gameObject.GetComponent<RectTransform>();
+            viewPort = this.gameObject.GetComponent<RectTransform>();
+            scaler = this.gameObject.GetComponentInParent<Canvas>();
 
             Browser.headless = headlessBrowser;
             browser = Browser.getInstance();
@@ -78,7 +81,9 @@ namespace bessw.Unity.WebView
             var c = StartCoroutine(browser.OpenNewTab(targetUrl, (BrowserTab bt) =>
             {
                 tab = bt;
-                _ = tab.SetSizeAndScale(new Vector2Int((int)rectTransform.rect.width, (int)rectTransform.rect.height) / PageScaleFactor, PageScaleFactor);
+                // Set the size of the Tab to the size of the viewport
+                //_ = tab.SetSize(Vector2Int.RoundToInt(this.gameObject.GetComponentInParent<Canvas>().renderingDisplaySize));
+                OnRectTransformDimensionsChange();
 
                 StartCoroutine(tab.Update());
                 //StartCoroutine(createScreenshots());
@@ -95,10 +100,11 @@ namespace bessw.Unity.WebView
         {
             if (tab is not null)
             {
-                var size = new Vector2Int((int)rectTransform.rect.width, (int)rectTransform.rect.height) / PageScaleFactor;
-                if (tab.Size != size)
+                var size = new Vector2(viewPort.rect.width, viewPort.rect.height) * scaler.scaleFactor;
+                Vector2Int sizeInt = Vector2Int.RoundToInt(size);
+                if (tab.Size != sizeInt)
                 {
-                    _ = tab.SetSizeAndScale(size, PageScaleFactor);
+                    _ = tab.SetSize(sizeInt);
                 }
             }
         }
@@ -211,11 +217,11 @@ namespace bessw.Unity.WebView
 
         private Vector2Int toBrowserCoordinates(Vector2 eventPos)
         {
-            RectTransformUtility.ScreenPointToLocalPointInRectangle(rectTransform, eventPos, null, out Vector2 localPoint);
+            RectTransformUtility.ScreenPointToLocalPointInRectangle(viewPort, eventPos, null, out Vector2 localPoint);
 
             // invert y because the browser has y=0 on the top
-            Vector2 invertedLocalPos = new Vector2(localPoint.x, rectTransform.rect.size.y - localPoint.y);
-            Vector2 textureScale  = tab.StreamSize / rectTransform.rect.size;
+            Vector2 invertedLocalPos = new Vector2(localPoint.x, viewPort.rect.size.y - localPoint.y);
+            Vector2 textureScale  = tab.StreamSize / viewPort.rect.size;
             Vector2 browserCoordinate = invertedLocalPos * textureScale;// / tab.ViewportScaleFactor;
             //Debug.Log($"eventPos: {eventPos}, invertedLocalPos: {invertedLocalPos}, browserCoordinate: {browserCoordinate}");
             return new Vector2Int((int) browserCoordinate.x, (int) browserCoordinate.y);