Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simplify the CSS generated by computedStyle for iframe'd download links #6418

Closed
Crystal-RainSlide opened this issue Mar 29, 2018 · 8 comments · Fixed by matrix-org/matrix-react-sdk#7940
Assignees
Labels
A-Performance P2 S-Minor Impairs non-critical functionality or suitable workarounds exist T-Defect Z-t3chguy

Comments

@Crystal-RainSlide
Copy link
Contributor

Description

There are 150+ inline css code for every massage. That's really massive.
...Pick a element to reproduce it.

And low performance devices may display large base64-encoded pictures in new browser tab instead of load them and get stucked, which is my suggestion for: #2678

@uhoreg
Copy link
Member

uhoreg commented Apr 1, 2018

I'm not seeing any inline CSS on messages here. Can you post a screenshot of your inspector to show what you're talking about?

@ara4n
Copy link
Member

ara4n commented Apr 1, 2018

i’d assume this is viewing the contributed CSS for a message tile rather than inline CSS? i’d have expected the browser to be caching the computed result rather than actually slowing down rendering it for every cell.

that said, there is definitely something wrong on CSS perf, but my hunch is that it might be the amount of flexbox with unbounded size restrictions meaning that the flexbox solver has to work overtime. Someone needs to profile the CSS engine - i’d imagine Quantum might have some good metrics?

@Crystal-RainSlide
Copy link
Contributor Author

Crystal-RainSlide commented Apr 2, 2018

Well, they are on the green "Download Image" button.

I'd better take a screenshot instead of copy the code here.

@Crystal-RainSlide
Copy link
Contributor Author

default

@Crystal-RainSlide
Copy link
Contributor Author

So, it should be in the https://usercontent.riot.im/v1.html

@ara4n
Copy link
Member

ara4n commented Apr 2, 2018

Good catch. Turns out that this ridiculous style is calculated at https://github.com/matrix-org/matrix-react-sdk/blob/07b691a45d14fa817fe9d08d8ed1ecc2886b313c/src/components/views/messages/MFileBody.js#L168 - the problem being that the style of the download link which is rendered in the iframe (as a blunt but effective manner of cross-site sandboxing) has to match that of the parent website.

Looks like the style calculation was done in the bluntest way possible rather than just applying the 'correct' style needed to render the link in the right colour & font :/

However, this only impacts the download links for files sent in e2e encrypted rooms, so the original description of:

There are 150+ inline css code for every message. That's really massive.
...Pick a element to reproduce it.

is quite an exaggeration.

@ara4n ara4n changed the title Simplify the CSS for performance, or provide a Lite Mode Simplify the CSS generated by computedStyle for iframe'd download links Apr 2, 2018
@ara4n
Copy link
Member

ara4n commented Apr 2, 2018

A better solution would be to kill off usercontent.riot.im entirely, as per #6173

@Crystal-RainSlide
Copy link
Contributor Author

Thanks for the informing~

@lampholder lampholder added T-Defect A-Performance P2 S-Minor Impairs non-critical functionality or suitable workarounds exist labels Apr 16, 2018
williamkray pushed a commit to williamkray/element-web that referenced this issue Aug 2, 2021
* Sanitize untrusted variables from message previews before translation
Fixes element-hq#18314
* Fix editing of `<sub>` & `<sup`> & `<u>`
[\element-hq#6469](matrix-org/matrix-react-sdk#6469)
Fixes element-hq#18211
* Zoom images in lightbox to where the cursor points
[\element-hq#6418](matrix-org/matrix-react-sdk#6418)
Fixes element-hq#17870
* Avoid hitting the settings store from TextForEvent
[\element-hq#6205](matrix-org/matrix-react-sdk#6205)
Fixes element-hq#17650
* Initial MSC3083 + MSC3244 support
[\element-hq#6212](matrix-org/matrix-react-sdk#6212)
Fixes element-hq#17686 and element-hq#17661
* Navigate to the first room with notifications when clicked on space notification dot
[\element-hq#5974](matrix-org/matrix-react-sdk#5974)
* Add matrix: to the list of permitted URL schemes
[\element-hq#6388](matrix-org/matrix-react-sdk#6388)
* Add "Copy Link" to room context menu
[\element-hq#6374](matrix-org/matrix-react-sdk#6374)
* 💭 Message bubble layout
[\element-hq#6291](matrix-org/matrix-react-sdk#6291)
Fixes element-hq#4635, element-hq#17773 element-hq#16220 and element-hq#7687
* Play only one audio file at a time
[\#6417](matrix-org/matrix-react-sdk#6417)
Fixes element-hq#17439
* Move download button for media to the action bar
[\element-hq#6386](matrix-org/matrix-react-sdk#6386)
Fixes element-hq#17943
* Improved display of one-to-one call history with summary boxes for each call
[\element-hq#6121](matrix-org/matrix-react-sdk#6121)
Fixes element-hq#16409
* Notification settings UI refresh
[\element-hq#6352](matrix-org/matrix-react-sdk#6352)
Fixes element-hq#17782
* Fix EventIndex double handling events and erroring
[\element-hq#6385](matrix-org/matrix-react-sdk#6385)
Fixes element-hq#18008
* Improve reply rendering
[\element-hq#3553](matrix-org/matrix-react-sdk#3553)
Fixes element-hq#9217, element-hq#7633, element-hq#7530, element-hq#7169, element-hq#7151, element-hq#6692 element-hq#6579 and element-hq#17440
* Improve performance of room name calculation
[\element-hq#1801](matrix-org/matrix-js-sdk#1801)
* Fix browser history getting stuck looping back to the same room
[\element-hq#18053](element-hq#18053)
* Fix space shortcuts on layouts with non-English keys in the places of numbers
[\element-hq#17780](element-hq#17780)
Fixes element-hq#17776
* Fix CreateRoomDialog exploding when making public room outside of a space
[\element-hq#6493](matrix-org/matrix-react-sdk#6493)
* Fix regression where registration would soft-crash on captcha
[\element-hq#6505](matrix-org/matrix-react-sdk#6505)
Fixes element-hq#18284
* only send join rule event if we have a join rule to put in it
[\element-hq#6517](matrix-org/matrix-react-sdk#6517)
* Improve the new download button's discoverability and interactions.
[\element-hq#6510](matrix-org/matrix-react-sdk#6510)
* Fix voice recording UI looking broken while microphone permissions are being requested.
[\element-hq#6479](matrix-org/matrix-react-sdk#6479)
Fixes element-hq#18223
* Match colors of room and user avatars in DMs
[\element-hq#6393](matrix-org/matrix-react-sdk#6393)
Fixes element-hq#2449
* Fix onPaste handler to work with copying files from Finder
[\element-hq#5389](matrix-org/matrix-react-sdk#5389)
Fixes element-hq#15536 and element-hq#16255
* Fix infinite pagination loop when offline
[\element-hq#6478](matrix-org/matrix-react-sdk#6478)
Fixes element-hq#18242
* Fix blurhash rounded corners missing regression
[\element-hq#6467](matrix-org/matrix-react-sdk#6467)
Fixes element-hq#18110
* Fix position of the space hierarchy spinner
[\element-hq#6462](matrix-org/matrix-react-sdk#6462)
Fixes element-hq#18182
* Fix display of image messages that lack thumbnails
[\element-hq#6456](matrix-org/matrix-react-sdk#6456)
Fixes element-hq#18175
* Fix crash with large audio files.
[\element-hq#6436](matrix-org/matrix-react-sdk#6436)
Fixes element-hq#18149
* Make diff colors in codeblocks more pleasant
[\element-hq#6355](matrix-org/matrix-react-sdk#6355)
Fixes element-hq#17939
* Show the correct audio file duration while loading the file.
[\element-hq#6435](matrix-org/matrix-react-sdk#6435)
Fixes element-hq#18160
* Fix various timeline settings not applying immediately.
[\element-hq#6261](matrix-org/matrix-react-sdk#6261)
Fixes element-hq#17748
* Fix issues with room list duplication
[\element-hq#6391](matrix-org/matrix-react-sdk#6391)
Fixes element-hq#14508
* Fix grecaptcha throwing useless error sometimes
[\element-hq#6401](matrix-org/matrix-react-sdk#6401)
Fixes element-hq#15142
* Update Emojibase and Twemoji and switch to IamCal (Slack-style) shortcodes
[\element-hq#6347](matrix-org/matrix-react-sdk#6347)
Fixes element-hq#13857 and element-hq#13334
* Respect compound emojis in default avatar initial generation
[\element-hq#6397](matrix-org/matrix-react-sdk#6397)
Fixes element-hq#18040
* Fix bug where the 'other homeserver' field in the server selection dialog would become briefly focus and then unfocus when clicked.
[\element-hq#6394](matrix-org/matrix-react-sdk#6394)
Fixes element-hq#18031
* Standardise spelling and casing of homeserver, identity server, and integration manager
[\element-hq#6365](matrix-org/matrix-react-sdk#6365)
* Fix widgets not receiving decrypted events when they have permission.
[\element-hq#6371](matrix-org/matrix-react-sdk#6371)
Fixes element-hq#17615
* Prevent client hangs when calculating blurhashes
[\element-hq#6366](matrix-org/matrix-react-sdk#6366)
Fixes element-hq#17945
* Exclude state events from widgets reading room events
[\element-hq#6378](matrix-org/matrix-react-sdk#6378)
* Cache feature_spaces\* flags to improve performance
[\element-hq#6381](matrix-org/matrix-react-sdk#6381)
BBaoVanC added a commit to boba-best/element.boba.best that referenced this issue Aug 3, 2021
* Sanitize untrusted variables from message previews before translation
Fixes element-hq#18314
* Fix editing of `<sub>` & `<sup`> & `<u>`
[\element-hq#6469](matrix-org/matrix-react-sdk#6469)
Fixes element-hq#18211
* Zoom images in lightbox to where the cursor points
[\element-hq#6418](matrix-org/matrix-react-sdk#6418)
Fixes element-hq#17870
* Avoid hitting the settings store from TextForEvent
[\element-hq#6205](matrix-org/matrix-react-sdk#6205)
Fixes element-hq#17650
* Initial MSC3083 + MSC3244 support
[\element-hq#6212](matrix-org/matrix-react-sdk#6212)
Fixes element-hq#17686 and element-hq#17661
* Navigate to the first room with notifications when clicked on space notification dot
[\element-hq#5974](matrix-org/matrix-react-sdk#5974)
* Add matrix: to the list of permitted URL schemes
[\element-hq#6388](matrix-org/matrix-react-sdk#6388)
* Add "Copy Link" to room context menu
[\element-hq#6374](matrix-org/matrix-react-sdk#6374)
* 💭 Message bubble layout
[\element-hq#6291](matrix-org/matrix-react-sdk#6291)
Fixes element-hq#4635, element-hq#17773 element-hq#16220 and element-hq#7687
* Play only one audio file at a time
[\#6417](matrix-org/matrix-react-sdk#6417)
Fixes element-hq#17439
* Move download button for media to the action bar
[\element-hq#6386](matrix-org/matrix-react-sdk#6386)
Fixes element-hq#17943
* Improved display of one-to-one call history with summary boxes for each call
[\element-hq#6121](matrix-org/matrix-react-sdk#6121)
Fixes element-hq#16409
* Notification settings UI refresh
[\element-hq#6352](matrix-org/matrix-react-sdk#6352)
Fixes element-hq#17782
* Fix EventIndex double handling events and erroring
[\element-hq#6385](matrix-org/matrix-react-sdk#6385)
Fixes element-hq#18008
* Improve reply rendering
[\element-hq#3553](matrix-org/matrix-react-sdk#3553)
Fixes element-hq#9217, element-hq#7633, element-hq#7530, element-hq#7169, element-hq#7151, element-hq#6692 element-hq#6579 and element-hq#17440
* Improve performance of room name calculation
[\element-hq#1801](matrix-org/matrix-js-sdk#1801)
* Fix browser history getting stuck looping back to the same room
[\element-hq#18053](element-hq#18053)
* Fix space shortcuts on layouts with non-English keys in the places of numbers
[\element-hq#17780](element-hq#17780)
Fixes element-hq#17776
* Fix CreateRoomDialog exploding when making public room outside of a space
[\element-hq#6493](matrix-org/matrix-react-sdk#6493)
* Fix regression where registration would soft-crash on captcha
[\element-hq#6505](matrix-org/matrix-react-sdk#6505)
Fixes element-hq#18284
* only send join rule event if we have a join rule to put in it
[\element-hq#6517](matrix-org/matrix-react-sdk#6517)
* Improve the new download button's discoverability and interactions.
[\element-hq#6510](matrix-org/matrix-react-sdk#6510)
* Fix voice recording UI looking broken while microphone permissions are being requested.
[\element-hq#6479](matrix-org/matrix-react-sdk#6479)
Fixes element-hq#18223
* Match colors of room and user avatars in DMs
[\element-hq#6393](matrix-org/matrix-react-sdk#6393)
Fixes element-hq#2449
* Fix onPaste handler to work with copying files from Finder
[\element-hq#5389](matrix-org/matrix-react-sdk#5389)
Fixes element-hq#15536 and element-hq#16255
* Fix infinite pagination loop when offline
[\element-hq#6478](matrix-org/matrix-react-sdk#6478)
Fixes element-hq#18242
* Fix blurhash rounded corners missing regression
[\element-hq#6467](matrix-org/matrix-react-sdk#6467)
Fixes element-hq#18110
* Fix position of the space hierarchy spinner
[\element-hq#6462](matrix-org/matrix-react-sdk#6462)
Fixes element-hq#18182
* Fix display of image messages that lack thumbnails
[\element-hq#6456](matrix-org/matrix-react-sdk#6456)
Fixes element-hq#18175
* Fix crash with large audio files.
[\element-hq#6436](matrix-org/matrix-react-sdk#6436)
Fixes element-hq#18149
* Make diff colors in codeblocks more pleasant
[\element-hq#6355](matrix-org/matrix-react-sdk#6355)
Fixes element-hq#17939
* Show the correct audio file duration while loading the file.
[\element-hq#6435](matrix-org/matrix-react-sdk#6435)
Fixes element-hq#18160
* Fix various timeline settings not applying immediately.
[\element-hq#6261](matrix-org/matrix-react-sdk#6261)
Fixes element-hq#17748
* Fix issues with room list duplication
[\element-hq#6391](matrix-org/matrix-react-sdk#6391)
Fixes element-hq#14508
* Fix grecaptcha throwing useless error sometimes
[\element-hq#6401](matrix-org/matrix-react-sdk#6401)
Fixes element-hq#15142
* Update Emojibase and Twemoji and switch to IamCal (Slack-style) shortcodes
[\element-hq#6347](matrix-org/matrix-react-sdk#6347)
Fixes element-hq#13857 and element-hq#13334
* Respect compound emojis in default avatar initial generation
[\element-hq#6397](matrix-org/matrix-react-sdk#6397)
Fixes element-hq#18040
* Fix bug where the 'other homeserver' field in the server selection dialog would become briefly focus and then unfocus when clicked.
[\element-hq#6394](matrix-org/matrix-react-sdk#6394)
Fixes element-hq#18031
* Standardise spelling and casing of homeserver, identity server, and integration manager
[\element-hq#6365](matrix-org/matrix-react-sdk#6365)
* Fix widgets not receiving decrypted events when they have permission.
[\element-hq#6371](matrix-org/matrix-react-sdk#6371)
Fixes element-hq#17615
* Prevent client hangs when calculating blurhashes
[\element-hq#6366](matrix-org/matrix-react-sdk#6366)
Fixes element-hq#17945
* Exclude state events from widgets reading room events
[\element-hq#6378](matrix-org/matrix-react-sdk#6378)
* Cache feature_spaces\* flags to improve performance
[\element-hq#6381](matrix-org/matrix-react-sdk#6381)
@kerryarchibald kerryarchibald self-assigned this Mar 2, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-Performance P2 S-Minor Impairs non-critical functionality or suitable workarounds exist T-Defect Z-t3chguy
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants