MudPopover: Javascript refactor #11165
Conversation
Updated `window.mudpopoverHelper` with new properties for better popover behavior. Improved `MudPopover` class initialization with error handling and a `MutationObserver`. Refactored `initialize` and `connect` methods to streamline observer management and removed unnecessary scroll and resize listeners. Simplified `dispose` method for better maintainability.
Refactor variable names and enhance comments for clarity. Correct spelling of 'postion' to 'position'. Simplify conditional checks for popover flipping logic. Use removeProperty for off-screen positioning instead of setting styles to '-9999px'. These changes aim to maintain functionality while making the code more understandable and easier to maintain.
… directly since we are modifying width on the fly. remove scroll from being debounced. set observers to connect on open and disconnect on close.
… array assignment
Codecov ReportAttention: Patch coverage is
❌ Your patch status has failed because the patch coverage (83.33%) is below the target coverage (100.00%). You can increase the patch coverage or adjust the target coverage. Additional details and impacted files@@ Coverage Diff @@
## dev #11165 +/- ##
=======================================
Coverage 91.08% 91.08%
=======================================
Files 436 436
Lines 14098 14143 +45
Branches 2727 2731 +4
=======================================
+ Hits 12841 12882 +41
+ Misses 640 639 -1
- Partials 617 622 +5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
src/MudBlazor.UnitTests.Viewer/TestComponents/Popover/PopoverFlipDirectionTest.razor
Outdated
Show resolved
Hide resolved
src/MudBlazor.UnitTests.Viewer/TestComponents/Popover/PopoverFlipDirectionTest.razor
Outdated
Show resolved
Hide resolved
src/MudBlazor.UnitTests.Viewer/TestComponents/Tooltip/TooltipNotRemovedTest.razor
Outdated
Show resolved
Hide resolved
src/MudBlazor.UnitTests.Viewer/TestComponents/Tooltip/TooltipNotRemovedTest.razor
Outdated
Show resolved
Hide resolved
src/MudBlazor.UnitTests.Viewer/TestComponents/Tooltip/TooltipNotRemovedTest.razor
Outdated
Show resolved
Hide resolved
src/MudBlazor.UnitTests.Viewer/TestComponents/Tooltip/TooltipNotRemovedTest.razor
Outdated
Show resolved
Hide resolved
|
I'm running into an issue around using a Error in Google Chrome: MudBlazor.min.js:153 No Popover Container found with class mudblazor-main-content |
Almost assuredly a cache problem since I changed the way that works. Either use Assets if .NET 9 or make sure your .css/.js files in index or app.razor have ?v=8.6 after them. If you continue to have an issue please create an issue and tag me I'll get right on it. |
|
I'm also having display issues since this update (I updated my cache!) |
I am working on a fix and updating here: |
Description
Refactor mudPopover.js for performance.
Previously:
Initialize (Popover Service init) registers 2 listeners for resize/scroll.
Connect (Popover registered in Dom) Every popover registers on creation and attachs 2 observers and x1-?? scroll listeners usually 3+
Disconnect (Popover no longer in Dom) Services and Observers are disconnected. Scroll listeners are left.
PopoverChange (mud-popover-open class add/remove, data-ticks (any change), resize and place popover zindex, overlay, etc.
Result: Each popover in the dom maintains a scroll listener on every element from the node creating the popover to the body, a resize observer, a mutation observer, and 2 global resize/scroll listeners.
With Changes:
Initialize: Register one global observer, 2 listeners
Connect: Adds popover to this.map, nothing attached.
Disconnect: Checks this.map for any observers and listeners still attached, disconnects and disposes and sets null.
PopoverChange: Determines if open/closed and only performs actions if open. On open registers 1 resize observer and x1-?? scroll listeners and attaches to this.map for later removal. On close removes top/left properties on css effectively hiding it. removes observer and scroll listeners and sets this.map values of them to null. Data ticks verifies a popover is open then proceeds to place it appropriately.
Result: 1 global MutationObserver and 2 global resize/scroll listeners and then only additional observers/listeners on open popovers.
Non-Performance Tweaks
Commented every piece of the file for later use, so it should be clear what each piece does.
Separated concerns where it made sense.
Made mud-popover-provider a variable in PopoverOptions that is passed appropriately to the service then js.
Added contentpadding to provider options to provide padding when a popover height exceeds bounds.
Updated logic resizing over height popovers that do not have a maxheight in themselves or their firstchild to cover both top and bottom scenarios.
Simplified and enhanced greatly flipping logic to include up and down in every scenario using FlipMargin. (I would suggest in V9 setting FlipMargin to 24 to match content padding or combine them.)
Fixed Regression from #11117 where overlay was not being positioned to allow menu overlays to position except nested.
Reverted #11051
Reverted the rest of #10853
Resolves #11133
Resolves #11046
Resolves #11162
Resolves #10791
Resolves #10879 (flipped and oversize logic)
How Has This Been Tested?
Adjusted unit tests for reverts.
Visually tested every Viewer case (WASM) that has a popover. Added two Viewercases, one to stress the system and test tooltips and another to test flip logic extensively.
Visually tested every Docs example that has a popover. (BSS)
Monitored memory and CPU usage (in Debug mode) to ensure no undue spikes or otherwise)
Type of Changes
Checklist
dev).