pleroma-fe

commit: 472aad52e190fa798fc2261b4663f3249c2c5ef9
parent 1e467ac6e189ee66ccaf7c2ff2a3d6a16459a86c
Author: Henry Jameson <me@hjkos.com>
Date:   Tue, 12 Mar 2024 23:33:24 +0200

Use constructed stylesheet to prevent chrome from shitting itself when
you open element picker

Diffstat:
M
src/services/style_setter/style_setter.js
8
+++-----
M
src/services/theme_data/theme_data_3.service.js
2
+-

2 files changed, 4 insertions(+), 6 deletions(-)
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
@@ -17,13 +17,11 @@ export const applyTheme = async (input) => {
 
   // Assuming that "worst case scenario background" is panel background since it's the most likely one
   const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim())
-  const head = document.head
   const body = document.body
-  body.classList.add('hidden')
 
-  const styleEl = document.createElement('style')
-  head.appendChild(styleEl)
-  const styleSheet = styleEl.sheet
+  const styleSheet = new CSSStyleSheet()
+  document.adoptedStyleSheets = [styleSheet]
+  body.classList.add('hidden')
 
   getCssRules(themes3.eager, themes3.staticVars).forEach(rule => {
     // Hacks to support multiple selectors on same component
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
@@ -448,7 +448,7 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
   const t0 = performance.now()
   const combinations = processInnerComponent(components.Root)
   const t1 = performance.now()
-  console.debug('Tree tranveral took ' + (t1 - t0) + ' ms')
+  console.debug('Tree traveral took ' + (t1 - t0) + ' ms')
 
   const result = combinations.map((combination) => {
     if (combination.lazy) {