-
Notifications
You must be signed in to change notification settings - Fork 10.1k
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
Don't scale single-char text divs. #5221
Don't scale single-char text divs. #5221
Conversation
This change makes scrolling noticeably smoother on files with many single-char text divs, such as the one in mozilla#1045. The trade-off is that the visual appearance of text selection in such documents is slightly worse, because more text divs overlap. This change also uses `scaleX(N)` instead of `scale(N, 1)`. This might be marginally more efficient in terms of JS string concatenation.
/botio-windows preview |
From: Bot.io (Windows)ReceivedCommand cmd_preview from @Snuffleupagus received. Current queue size: 0 Live output at: http://107.22.172.223:8877/482b3ad87107556/output.txt |
From: Bot.io (Windows)SuccessFull output at http://107.22.172.223:8877/482b3ad87107556/output.txt Total script time: 0.83 mins Published
|
…-divs Don't scale single-char text divs.
Thank you |
I just saw i forgot to comment on this issue. Now that yury merged it, i got reminded. Wouldn't it be possible to tweak the css, so that the overlapping sections do not look darker? |
If you give the text a solid selection color, but wrap all the text in a container element with "opacity", the selection will not get darker where it overlaps. |
i assume it also would lighten the load on the renderer |
As a consequence of merging mozilla#5221 it is more likely to have multiple overlapping selection divs inside the text layer. Because each individual element gets the selection style applied, the 30%opacity stacks, making a 60% bar visible where the overlap happens. As proposed by @rocallahan, this can be fixed by making the selection style solid and setting opacity for the overall layer. I assume also that this should make the work for the renderer easier, but was unable to bench it.
As a consequence of merging mozilla#5221 it is more likely to have multiple overlapping selection divs inside the text layer. Because each individual element gets the selection style applied, the 30%opacity stacks, making a 60% bar visible where the overlap happens. As proposed by @rocallahan, this can be fixed by making the selection style solid and setting opacity for the overall layer. I assume also that this should make the work for the renderer easier, but was unable to bench it.
As a consequence of merging mozilla#5221 it is more likely to have multiple overlapping selection divs inside the text layer. Because each individual element gets the selection style applied, the 30%opacity stacks, making a 60% bar visible where the overlap happens. As proposed by @rocallahan, this can be fixed by making the selection style solid and setting opacity for the overall layer. I assume also that this should make the work for the renderer easier, but was unable to bench it.
As a consequence of merging mozilla#5221 it is more likely to have multiple overlapping selection divs inside the text layer. Because each individual element gets the selection style applied, the 30%opacity stacks, making a 60% bar visible where the overlap happens. As proposed by @rocallahan, this can be fixed by making the selection style solid and setting opacity for the overall layer. I assume also that this should make the work for the renderer easier, but was unable to bench it.
This change makes scrolling noticeably smoother on files with many
single-char text divs, such as the one in #1045. The trade-off is that
the visual appearance of text selection in such documents is slightly
worse, because more text divs overlap.
This change also uses
scaleX(N)
instead ofscale(N, 1)
. This mightbe marginally more efficient in terms of JS string concatenation.
Here's a screenshot showing text selection and search selection prior to my change:
Here's the equivalent screenshot after my change:
The old code gave very little overlap, but some gaps. The new code gives more overlap, but no gaps. Neither of them look great!