Make browser details collection available before init request completes

The browser details collection function getBrowserDetailsParameters was
previously defined in FlowBootstrap.js, which was loaded after the init
request. This caused the function to be undefined when Flow.ts tried to
collect browser details to send with the ?v-r=init request.

This change moves the browser details collection logic from
FlowBootstrap.js into Flow.ts as a private method collectBrowserDetails(),
and registers it as window.Vaadin.Flow.getBrowserDetailsParameters in the
Flow constructor. This ensures the function is available when needed
during the init request, while maintaining backward compatibility for code
that calls the function via the global window object.

The TypeScript implementation uses ($wnd as any) casts to access window
properties like screen, document, navigator, etc., since the $wnd type
doesn't include all browser DOM APIs. Values are stringified before
returning to match the original JavaScript implementation.

Also adds integration test to verify browser details are available
immediately on page load without user interaction.

Author: Artur-

flow-client/src/main/frontend/Flow.ts

@@ -114,6 +114,8 @@ export class Flow {
         isActive: () => this.isActive
       }
     };
+    // Set browser details collection function as global for use by refresh()
+    ($wnd.Vaadin.Flow as any).getBrowserDetailsParameters = this.collectBrowserDetails.bind(this);
 
     // Regular expression used to remove the app-context
     const elm = document.head.querySelector('base');
@@ -421,7 +423,7 @@ export class Flow {
       const httpRequest = xhr as any;
 
       // Collect browser details to send with init request as JSON
-      const browserDetails = ($wnd.Vaadin.Flow as any).getBrowserDetailsParameters();
+      const browserDetails = this.collectBrowserDetails();
       const browserDetailsParam = browserDetails
         ? `&v-browserDetails=${encodeURIComponent(JSON.stringify(browserDetails))}`
         : '';
@@ -453,6 +455,95 @@ export class Flow {
     });
   }
 
+  // Collects browser details parameters
+  private collectBrowserDetails(): Record<string, string> {
+    const params: Record<string, any> = {};
+
+    /* Screen height and width */
+    params['v-sh'] = ($wnd as any).screen.height;
+    params['v-sw'] = ($wnd as any).screen.width;
+    /* Browser window dimensions */
+    params['v-wh'] = ($wnd as any).innerHeight;
+    params['v-ww'] = ($wnd as any).innerWidth;
+    /* Body element dimensions */
+    params['v-bh'] = ($wnd as any).document.body.clientHeight;
+    params['v-bw'] = ($wnd as any).document.body.clientWidth;
+
+    /* Current time */
+    const date = new Date();
+    params['v-curdate'] = date.getTime();
+
+    /* Current timezone offset (including DST shift) */
+    const tzo1 = date.getTimezoneOffset();
+
+    /* Compare the current tz offset with the first offset from the end
+       of the year that differs --- if less that, we are in DST, otherwise
+       we are in normal time */
+    let dstDiff = 0;
+    let rawTzo = tzo1;
+    for (let m = 12; m > 0; m -= 1) {
+      date.setUTCMonth(m);
+      const tzo2 = date.getTimezoneOffset();
+      if (tzo1 !== tzo2) {
+        dstDiff = tzo1 > tzo2 ? tzo1 - tzo2 : tzo2 - tzo1;
+        rawTzo = tzo1 > tzo2 ? tzo1 : tzo2;
+        break;
+      }
+    }
+
+    /* Time zone offset */
+    params['v-tzo'] = tzo1;
+
+    /* DST difference */
+    params['v-dstd'] = dstDiff;
+
+    /* Time zone offset without DST */
+    params['v-rtzo'] = rawTzo;
+
+    /* DST in effect? */
+    params['v-dston'] = tzo1 !== rawTzo;
+
+    /* Time zone id (if available) */
+    try {
+      params['v-tzid'] = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    } catch (err) {
+      params['v-tzid'] = '';
+    }
+
+    /* Window name */
+    if (($wnd as any).name) {
+      params['v-wn'] = ($wnd as any).name;
+    }
+
+    /* Detect touch device support */
+    let supportsTouch = false;
+    try {
+      ($wnd as any).document.createEvent('TouchEvent');
+      supportsTouch = true;
+    } catch (e) {
+      /* Chrome and IE10 touch detection */
+      supportsTouch = 'ontouchstart' in $wnd || typeof ($wnd as any).navigator.msMaxTouchPoints !== 'undefined';
+    }
+    params['v-td'] = supportsTouch;
+
+    /* Device Pixel Ratio */
+    params['v-pr'] = ($wnd as any).devicePixelRatio;
+
+    if (($wnd as any).navigator.platform) {
+      params['v-np'] = ($wnd as any).navigator.platform;
+    }
+
+    /* Stringify each value (they are parsed on the server side) */
+    const stringParams: Record<string, string> = {};
+    Object.keys(params).forEach((key) => {
+      const value = params[key];
+      if (typeof value !== 'undefined') {
+        stringParams[key] = value.toString();
+      }
+    });
+    return stringParams;
+  }
+
   // Create shared connection state store and connection indicator
   private addConnectionIndicator() {
     // add connection indicator to DOM

flow-client/src/main/frontend/FlowBootstrap.js

@@ -187,92 +187,6 @@ Please submit an issue to https://github.com/vaadin/flow-components/issues/new/c
         ws.pendingApps = null;
       }
     };
-    window.Vaadin.Flow.getBrowserDetailsParameters = function () {
-      var params = {};
-
-      /* Screen height and width */
-      params['v-sh'] = window.screen.height;
-      params['v-sw'] = window.screen.width;
-      /* Browser window dimensions */
-      params['v-wh'] = window.innerHeight;
-      params['v-ww'] = window.innerWidth;
-      /* Body element dimensions */
-      params['v-bh'] = document.body.clientHeight;
-      params['v-bw'] = document.body.clientWidth;
-
-      /* Current time */
-      var date = new Date();
-      params['v-curdate'] = date.getTime();
-
-      /* Current timezone offset (including DST shift) */
-      var tzo1 = date.getTimezoneOffset();
-
-      /* Compare the current tz offset with the first offset from the end
-         of the year that differs --- if less that, we are in DST, otherwise
-         we are in normal time */
-      var dstDiff = 0;
-      var rawTzo = tzo1;
-      for (var m = 12; m > 0; m--) {
-        date.setUTCMonth(m);
-        var tzo2 = date.getTimezoneOffset();
-        if (tzo1 != tzo2) {
-          dstDiff = tzo1 > tzo2 ? tzo1 - tzo2 : tzo2 - tzo1;
-          rawTzo = tzo1 > tzo2 ? tzo1 : tzo2;
-          break;
-        }
-      }
-
-      /* Time zone offset */
-      params['v-tzo'] = tzo1;
-
-      /* DST difference */
-      params['v-dstd'] = dstDiff;
-
-      /* Time zone offset without DST */
-      params['v-rtzo'] = rawTzo;
-
-      /* DST in effect? */
-      params['v-dston'] = tzo1 != rawTzo;
-
-      /* Time zone id (if available) */
-      try {
-        params['v-tzid'] = Intl.DateTimeFormat().resolvedOptions().timeZone;
-      } catch (err) {
-        params['v-tzid'] = '';
-      }
-
-      /* Window name */
-      if (window.name) {
-        params['v-wn'] = window.name;
-      }
-
-      /* Detect touch device support */
-      var supportsTouch = false;
-      try {
-        document.createEvent('TouchEvent');
-        supportsTouch = true;
-      } catch (e) {
-        /* Chrome and IE10 touch detection */
-        supportsTouch = 'ontouchstart' in window || typeof navigator.msMaxTouchPoints !== 'undefined';
-      }
-      params['v-td'] = supportsTouch;
-
-      /* Device Pixel Ratio */
-      params['v-pr'] = window.devicePixelRatio;
-
-      if (navigator.platform) {
-        params['v-np'] = navigator.platform;
-      }
-
-      /* Stringify each value (they are parsed on the server side) */
-      Object.keys(params).forEach(function (key) {
-        var value = params[key];
-        if (typeof value !== 'undefined') {
-          params[key] = value.toString();
-        }
-      });
-      return params;
-    };
   }
 
   log('Flow bootstrap loaded');

flow-tests/test-root-context/src/main/java/com/vaadin/flow/uitest/ui/ExtendedClientDetailsView.java

@@ -15,6 +15,7 @@
  */
 package com.vaadin.flow.uitest.ui;
 
+import com.vaadin.flow.component.UI;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.NativeButton;
 import com.vaadin.flow.component.page.ExtendedClientDetails;
@@ -36,15 +37,11 @@ protected void onShow() {
         Div touchDevice = createDiv("td");
 
         // Display initial values immediately
-        getUI().ifPresent(ui -> {
-            ExtendedClientDetails details = ui.getPage()
-                    .getExtendedClientDetails();
-            if (details != null) {
-                displayDetails(details, screenWidth, screenHeight,
-                        windowInnerWidth, windowInnerHeight, bodyElementWidth,
-                        bodyElementHeight, devicePixelRatio, touchDevice);
-            }
-        });
+        ExtendedClientDetails details = UI.getCurrentOrThrow().getPage()
+                .getExtendedClientDetails();
+        displayDetails(details, screenWidth, screenHeight,
+                windowInnerWidth, windowInnerHeight, bodyElementWidth,
+                bodyElementHeight, devicePixelRatio, touchDevice);
 
         // the sizing values cannot be set with JS but pixel ratio and touch
         // support can be faked
@@ -58,17 +55,15 @@ protected void onShow() {
 
         NativeButton fetchDetailsButton = new NativeButton(
                 "Fetch client details", event -> {
-                    getUI().ifPresent(ui -> {
-                        ExtendedClientDetails details = ui.getPage()
-                                .getExtendedClientDetails();
-                        details.refresh(updatedDetails -> {
-                            displayDetails(updatedDetails, screenWidth,
-                                    screenHeight, windowInnerWidth,
-                                    windowInnerHeight, bodyElementWidth,
-                                    bodyElementHeight, devicePixelRatio,
-                                    touchDevice);
-                        });
-                    });
+                    UI.getCurrentOrThrow().getPage()
+                            .getExtendedClientDetails().refresh(updatedDetails -> {
+                                displayDetails(updatedDetails, screenWidth,
+                                        screenHeight, windowInnerWidth,
+                                        windowInnerHeight, bodyElementWidth,
+                                        bodyElementHeight, devicePixelRatio,
+                                        touchDevice);
+
+                            });
                 });
         fetchDetailsButton.setId("fetch-values");
 

flow-tests/test-root-context/src/test/java/com/vaadin/flow/uitest/ui/ExtendedClientDetailsIT.java

@@ -23,6 +23,26 @@
 
 public class ExtendedClientDetailsIT extends ChromeBrowserTest {
 
+    @Test
+    public void testExtendedClientDetails_availableImmediately() {
+        open();
+
+        // Values should be available immediately without clicking any button
+        verifyTextMatchesJSExecution("sh", "window.screen.height");
+        verifyTextMatchesJSExecution("sw", "window.screen.width");
+        verifyTextMatchesJSExecution("wh", "window.innerHeight");
+        verifyTextMatchesJSExecution("ww", "window.innerWidth");
+        verifyTextMatchesJSExecution("bh", "document.body.clientHeight");
+        verifyTextMatchesJSExecution("bw", "document.body.clientWidth");
+        try {
+            Double.parseDouble($(TestBenchElement.class).id("pr").getText());
+        } catch (NumberFormatException nfe) {
+            Assert.fail("Could not parse reported device pixel ratio");
+        }
+        Assert.assertTrue("false".equalsIgnoreCase(
+                $(TestBenchElement.class).id("td").getText()));
+    }
+
     @Test
     public void testExtendedClientDetails_reportsSomething() {
         open();