Fix https://github.com/vector-im/element-web/issues/21262
Optimizations:
1. Don't update the `style` (positioning) of hidden tooltips
1. Don't add DOM elements to the page for hidden tooltips
> ## Performance problems broken down
>
>
> ### Hidden tooltips rendering on `scroll`
>
> You can see that the Tooltip render is attached to the `scroll` event at [`src/components/views/elements/Tooltip.tsx#L78-L81`](31f0a37ca2/src/components/views/elements/Tooltip.tsx (L78-L81))
>
> The rendering calls [`src/components/views/elements/Tooltip.tsx#L101` -> `updatePosition`](36adba101c/src/components/views/elements/Tooltip.tsx (L101)) which ends up as an expensive "Recalculate Style" because it uses [`Element.getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect). This happens many many times within a single `scroll` event. Probably once for each tooltip within the room list **even though no tooltips are event visible as I scroll**. I can see that we're just updating the `style` attribute for a bunch of `.mx_Tooltip_invisible` elements at the end of the document.
>
> Each one of the purple spans below the `scroll` span ends up as a call to `updatePosition`. And a `scroll` event takes 35ms to 60ms to complete which is way over the 16.6ms 60 FPS budget (on a powerful desktop PC), granted these times are with the performance profiling running. This is without the Passbolt extension explained below.
>
> And the room list contains about 141 rooms (`document.querySelectorAll('.mx_RoomTile').length`):
>
> 
>
>
>
> ### Passbolt Chrome browser extension exacerbates the problem
>
> In order to login to Passbolt, it requires a browser extension which defaults to mucking up all pages:
>
> <img src="https://user-images.githubusercontent.com/558581/156275644-bc26b1f5-5d99-4eae-b74b-c2028f2f1baf.png" width="300">
>
>
> The extension source seems to be available: https://github.com/passbolt/passbolt_browser_extension
>
> The Passbolt Chrome extension has a `MutationObserver` listening to all attribute and element changes to the whole `<body>` of the `document` so it can `findAndSetAuthenticationFields` (find form elements and autofill).
>
>
> [`passbolt/passbolt_styleguide` -> `src/react-web-integration/lib/InForm/InFormManager.js#L143`](1c5eddc910/src/react-web-integration/lib/InForm/InFormManager.js (L143))
> ```js
> this.mutationObserver.observe(document.body, { attributes: true, childList: true, subtree: true });
> ```
>
> This causes a bunch of `Forced reflow` because the Tooltip `updatePosition` is mutating the element `style` attribute and Passbolt `MutationObserver` callbacks are querying the whole DOM looking for form elements all in the same frame.
>
> Under the `scroll` event, all of the little spans are the `MutationObserver` -> `findAndSetAuthenticationFields`. With the Passbolt extension, scrolling is verrrrry crunchy and bad.
>
> 
>
>
> #### Workaround
>
> Instead of running Passbolt on all sites, we can enable the extension to only run on the domain for Passbolt instance itself. I'm guessing the Passbolt extension also does autofill stuff on sites but I always login manually to the Passbolt instance so this solution works for me �
>
> **Extensions** -> **Passbolt** -> **Details** -> Change **Site access** to `On specific sites` -> Enter in your Passbolt instance `https://passbolt.example.com/`
>
> 
>
> *-- https://github.com/vector-im/element-web/issues/21262*
* Add support for overriding strings in the app
This is to support a case where certain details of the app need to be slightly different and don't necessarily warrant a complete fork.
Intended for language-controlled deployments, operators can specify a JSON file with their custom translations that override the in-app/community-supplied ones.
* Fix import grouping
* Add a language handler test
* Appease the linter
* Add comment for why a weird class exists
* Add support for redirecting to external pages after logout
This is primarily useful for deployments where the account is managed and needs to be logged out in other places too, like an SSO system.
See docs for more information.
* Add e2e test and fix Windows instructions
* Fix performance gathering stats
* use logger
* Fix another freeze on room switch
This switches permalinks to use the batch state update event and
removes the incremental updates, as commented. We now spend, on my
profiling, about 450ms in setOutOfBandMembers itself and another
120ms in permalinks.
Fixes https://github.com/vector-im/element-web/issues/21127
* Just bind to the currentstate state updates
* Fix edge case in context menu chevron positioning
Signed-off-by: Robin Townsend <robin@robin.town>
* Expand context menu positioning regression tests
Signed-off-by: Robin Townsend <robin@robin.town>
* Try harder to keep context menus inside the window
Signed-off-by: Robin Townsend <robin@robin.town>
* Use UIStore for window dimensions
Signed-off-by: Robin Townsend <robin@robin.town>
* Test ContextMenu positioning
Signed-off-by: Robin Townsend <robin@robin.town>
* Fix freeze on room switch
updateServerCandidates was called on every room member event and
not throttled.
Fixes https://github.com/vector-im/element-web/issues/21127
* Move import
* Disable throttling in tests
* Types
Co-authored-by: Travis Ralston <travisr@matrix.org>
Co-authored-by: Travis Ralston <travisr@matrix.org>
* Don't pillify code blocks
Signed-off-by: Robin Townsend <robin@robin.town>
* Test that pills do not appear in code blocks
Signed-off-by: Robin Townsend <robin@robin.town>
* Use snapshot instead for test
Signed-off-by: Robin Townsend <robin@robin.town>
* react-focus-lock to 2.5.1
Signed-off-by: Kerry Archibald <kerrya@element.io>
* use enzyme in ASSD test so focus lock finds active element
Signed-off-by: Kerry Archibald <kerrya@element.io>
* findById and flushPromises to test utils
Signed-off-by: Kerry Archibald <kerrya@element.io>
* Fix virtual / native room mapping on call transfers
By just sending them through the same code path as regular calls.
Also re-do the tests & add a test for transfer specifically.
* Optional arg
* Types
