feat: eagerly load ExtendedClientDetails during UI initialization #22719
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Test Results1 291 files ± 0 1 291 suites ±0 1h 14m 43s ⏱️ +18s Results for commit 80e1f47. ± Comparison against base commit aebe283. This pull request removes 1 and adds 1 tests. Note that renamed tests count towards both.♻️ This comment has been updated with latest results. |
Artur-
force-pushed
the
flow-eager-browserdetails
branch
from
5a0a95e to
c04b976
Compare
Artur-
force-pushed
the
flow-eager-browserdetails
branch
from
c04b976 to
08c4c51
Compare
Artur-
changed the title
Artur-
force-pushed
the
flow-eager-browserdetails
branch
from
08c4c51 to
4dd166d
Compare
Artur-
force-pushed
the
flow-eager-browserdetails
branch
from
bbc6348 to
4ea9379
Compare
Browser details (ExtendedClientDetails) are now automatically fetched
during UI initialization and available immediately in the UI constructor,
eliminating the need for asynchronous callbacks in most cases.
API changes:
- Page.getExtendedClientDetails(): Now always returns a non-null instance
(creates placeholder with default values if not yet fetched). Browser
details are automatically populated during normal UI initialization.
- ExtendedClientDetails.refresh(Consumer): New method to refresh cached
browser details with fresh values from the browser. Callback is invoked
when refresh completes.
- Page.retrieveExtendedClientDetails(ExtendedClientDetailsReceiver):
Deprecated. Use getExtendedClientDetails() to access cached details, or
ExtendedClientDetails.refresh() to update them.
Migration guide:
Before:
page.retrieveExtendedClientDetails(details -> {
int width = details.getScreenWidth();
});
After:
ExtendedClientDetails details = page.getExtendedClientDetails();
int width = details.getScreenWidth(); // Available immediately
// Or refresh if needed:
details.refresh(updated -> {
int width = updated.getScreenWidth();
});
Benefits:
- No null checks needed when accessing browser details
- Browser details available immediately in UI constructor/onAttach
- Simpler synchronous API for common use cases
- Full backward compatibility maintained
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.
Browser details are now sent eagerly with the init request, but getExtendedClientDetails() could still return null before the data arrives. This changes the API to always return a non-null instance, using a placeholder with default values (screenWidth = -1, windowName = null) until actual browser details are available. For PreserveOnRefresh functionality, the code now checks if windowName is null rather than checking if the entire ExtendedClientDetails object is null. This is necessary because: - Screen dimensions are always sent with the init request - But window.name may be empty/undefined in new browser windows - This causes windowName = null even when other details are present - Different windows with windowName = null would incorrectly share cached components Changes: - Made ExtendedClientDetails constructor public (marked as internal-only) - UIInternals.getExtendedClientDetails() creates placeholder if null - Page.getExtendedClientDetails() simplified to delegate to UIInternals - Page.retrieveExtendedClientDetails() checks screenWidth == -1 - AbstractNavigationStateRenderer: Changed 3 locations to check windowName == null instead of details == null - WebComponentUI: Changed to check windowName == null This fixes PreserveOnRefreshIT.refreshInDifferentWindow_componentIsRecreated test failure where components were incorrectly preserved across different browser windows due to cache key collisions.
Artur-
force-pushed
the
flow-eager-browserdetails
branch
from
4ea9379 to
992063d
Compare
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Browser details (ExtendedClientDetails) are now automatically fetched
during UI initialization and available immediately in the UI constructor,
eliminating the need for asynchronous callbacks in most cases.
API changes:
Page.getExtendedClientDetails(): Now always returns a non-null instance
(creates placeholder with default values if not yet fetched). Browser
details are automatically populated during normal UI initialization.
ExtendedClientDetails.refresh(Consumer): New method to refresh cached
browser details with fresh values from the browser. Callback is invoked
when refresh completes.
Page.retrieveExtendedClientDetails(ExtendedClientDetailsReceiver):
Deprecated. Use getExtendedClientDetails() to access cached details, or
ExtendedClientDetails.refresh() to update them.
Migration guide:
Before:
After: