CSS: Set contain on kint dumps to help client side performance

The contain and content-visibility properties are very new and can actually break rendering entirely in different circumstances for different browsers. For now we'll stick to good old display:none and just hope contain implementations get good enough to give us some perf down the line.
kint-php · Dec 30, 2024 · 39da434 · 39da434
1 parent 9d3a86b
commit 39da434
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 5 deletions.
diff --git a/build/kint.phar b/build/kint.phar
diff --git a/resources/compiled/aante-dark.css b/resources/compiled/aante-dark.css
diff --git a/resources/compiled/aante-light.css b/resources/compiled/aante-light.css
diff --git a/resources/compiled/original.css b/resources/compiled/original.css
diff --git a/resources/compiled/solarized-dark.css b/resources/compiled/solarized-dark.css
diff --git a/resources/compiled/solarized.css b/resources/compiled/solarized.css
diff --git a/resources/sass/_base.scss b/resources/sass/_base.scss
@@ -26,6 +26,7 @@
   white-space: nowrap;
   background: var(--backdrop-color);
   direction: ltr;
+  contain: content;
 
   &.kint-folder {
     position: fixed;
@@ -152,10 +153,12 @@
   dt.kint-parent + dd {
     display: none;
     border-left: 1px dashed var(--border-color);
+    contain: strict;
   }
 
   dt.kint-parent.kint-show + dd {
     display: block;
+    contain: content;
   }
 
   // Other styles
@@ -370,9 +373,11 @@
 
     &.kint-tab-contents > li {
       display: none;
+      contain: strict;
 
       &.kint-show {
         display: block;
+        contain: content;
       }
     }
   }