Repository navigation
[6.x] Speed up the control panel on large entries - #15679
Conversation
|
|
||
| */ | ||
| @utility bg-architectural-lines { | ||
| &:not(:has(.page-tree-branch)) { |
There was a problem hiding this comment.
This one's fine to drop, now that #15681 is in. The navigation page wasn't removing the class when you left, so after visiting an empty nav the lines would show up on other pages. The :has(.page-tree-branch) guard was quietly hiding that behind the Pages tree. With #15681 the class doesn't leak any more, so the guard isn't needed.
There was a problem hiding this comment.
Thanks! Rebased onto 6.x so #15681 is included :)
4de0216 to
6e87d91
Compare
| /* GRID FIELDTYPE / Assets fieldtype in a grid fieldtype / Row Compression | ||
| =================================================== */ | ||
| /* When a grid field has at least 2 columns (so 3 including the menu control) change the presentation and compress the padding so it fits in with the other grid cells */ | ||
| /* Table UI Mode */ | ||
| .grid-table tr:has(> :nth-child(3)) .grid-cell.assets-fieldtype:not(:has([data-asset-picker])) > * { | ||
| @apply shadow-ui-sm; | ||
| td { | ||
| /* Table UI Mode: the row has 3+ cells if this one is 3rd or later from either end, or the middle of three */ | ||
| .grid-table .grid-cell.assets-fieldtype:is(:nth-child(n+3), :nth-last-child(n+3), :nth-child(2):nth-last-child(2)) { | ||
| > [data-ui-input-group]:not(:has([data-asset-picker])) { | ||
| @apply shadow-ui-sm; | ||
| } | ||
| [data-asset-browser]:not([data-asset-picker-visible]) td { | ||
| padding: 0.3125rem; | ||
| } |
There was a problem hiding this comment.
This has a knock on effect, which you can see in these screenshots, so let's leave this one.
V6
After this change
There was a problem hiding this comment.
Thanks! :D I tried to fix this in 0149199c0 so nested grids get the compact styling again (should now match your V6 screenshot :D) but still without the :has().
There was a problem hiding this comment.
Thanks for this, nice work getting the selector maths to line up with v6! 🙌
I'm not sure the grid changes are buying us much speed, though. v6's :has() rules here only look inside a single row or cell, so they're fairly cheap to re-check, and the new version still keeps a :has([data-asset-picker]) anyway. I suspect the big wins came from the page-wide ones (.form-group :has(> &), group-has-*, the architectural lines, the [style*="display: none"] one) and the Tabs deep watch, which are brilliant finds.
Unless you saw a noticeable difference from this one on your end, I'd be tempted to leave it out of this PR to keep things simple 😄
There was a problem hiding this comment.
Hi Oli, I've suggested one change should be reverted but the rest don't cause any regressions, so if you revert lines 133 ~ 145 in grid.css then all good with me 👍
P.s. I've only checked the impact of the CSS file changes, I'll leave the rest for the team to pick up.
3 participants
On large entries the CP is really slow for us. Most of the time went into Chrome recalculating styles. Here are two small changes that helped:
Page load went from ~11.5s to ~1.3s and opening Live Preview from ~10.5s to ~1.5s for us.
Please treat this as a suggestion rather than a fully tested implementation. I only checked it on our setup in Chrome. There are a still a few other rules with the same pattern (e.g. in base.css and Header.vue) that might be worth a look too. In general I would avoid has on body or any other big container.