update tabs to use new API

src/components/component_preview/component_preview.js

@@ -2,6 +2,7 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
 import ColorInput from 'src/components/color_input/color_input.vue'
 
 import genRandomSeed from 'src/services/random_seed/random_seed.service.js'
+import { createStyleSheet, adoptStyleSheets } from 'src/services/style_setter/style_setter.js'
 
 export default {
   components: {
@@ -51,15 +52,11 @@ export default {
       this.$emit('update:shadow', { axis, value: Number(value) })
     },
     update () {
-      const styleEl = document.getElementById('component-style-holder')
+      const sheet = createStyleSheet('style-component-preview')
-      const styleSheet = styleEl.sheet
 
-      for (let i = styleSheet.cssRules.length - 1; i >= 0; --i) {
+      sheet.clear()
-        styleSheet.deleteRule(i)
-      }
-
-      const result = []
 
+      const result = [this.previewCss]
       if (this.colorOverride) result.push(`--background: ${this.colorOverride}`)
 
       const styleRule = [
@@ -71,13 +68,15 @@ export default {
         '\n}'
       ].join('')
 
-      styleSheet.insertRule(styleRule)
+      sheet.addRule(styleRule)
-      styleSheet.insertRule([
+      sheet.addRule([
         '#component-preview-', this.randomSeed, ' {\n',
-        this.previewCss,
         ...result,
         '\n}'
-      ].join(''), 'index-max')
+      ].join(''))
+
+      sheet.ready = true
+      adoptStyleSheets()
     }
   }
 }

src/components/settings_modal/tabs/appearance_tab.js

@@ -15,6 +15,7 @@ import {
   getCssRules
 } from 'src/services/theme_data/css_utils.js'
 import { deserialize } from 'src/services/theme_data/iss_deserializer.js'
+import { createStyleSheet, adoptStyleSheets } from 'src/services/style_setter/style_setter.js'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
@@ -410,16 +411,17 @@ const AppearanceTab = {
         this.compilationCache[key] = theme3
       }
 
-      const styleEl = document.getElementById('theme-preview-holder')
+
-      const styleSheet = styleEl.sheet
+      const sheet = createStyleSheet('appearance-tab-previews')
-      styleSheet.insertRule([
+      sheet.addRule([
         '#theme-preview-',
         key,
         ' {\n',
         getCssRules(theme3.eager).join('\n'),
         '\n}'
-      ].join(''), 'index-max')
+      ].join(''))
-
+      sheet.ready = true
+      adoptStyleSheets()
     }
   }
 }

src/components/settings_modal/tabs/style_tab/style_tab.js

@@ -1,4 +1,4 @@
-import { ref, reactive, computed, watch, watchEffect, provide, getCurrentInstance } from 'vue'
+import { ref, reactive, computed, watch, provide, getCurrentInstance } from 'vue'
 import { useInterfaceStore } from 'src/stores/interface'
 import { get, set, unset, throttle } from 'lodash'
 
@@ -19,6 +19,7 @@ import Preview from '../theme_tab/theme_preview.vue'
 
 import VirtualDirectivesTab from './virtual_directives_tab.vue'
 
+import { createStyleSheet, adoptStyleSheets } from 'src/services/style_setter/style_setter.js'
 import { init, findColor } from 'src/services/theme_data/theme_data_3.service.js'
 import { getCssRules } from 'src/services/theme_data/css_utils.js'
 import { serialize } from 'src/services/theme_data/iss_serializer.js'
@@ -694,29 +695,19 @@ export default {
         return
       }
 
-      const styleEl = document.getElementById('editor-overall-holder')
+      const sheet = createStyleSheet('style-tab-overall-preview')
-      const styleSheet = styleEl.sheet
 
-      console.log(styleSheet)
+      sheet.clear()
-      console.log('BEFORE', styleSheet.cssRules)
+      sheet.addRule([
-      for (let i = styleSheet.cssRules.length - 1; i >= 0; --i) {
-        styleSheet.deleteRule(i)
-      }
-
-      styleSheet.insertRule([
         '#edited-style-preview {\n',
         css.join('\n'),
         '\n}'
-      ].join(''), 'index-max')
+      ].join(''))
-      styleSheet.insertRule([
+      sheet.ready = true
-        '#edited-style-preview {\n',
+      adoptStyleSheets()
-        css.join('\n'),
-        '\n}'
-      ].join(''), 'index-max')
-      console.log('AFTER', styleSheet.cssRules)
     })
 
-    const updateOverallPreview = () => {
+    const updateOverallPreview = throttle(() => {
       try {
         overallPreviewRules.value = init({
           inputRuleset: [
@@ -738,7 +729,7 @@ export default {
         console.error('Could not compile preview theme', e)
         return null
       }
-    }
+    }, 1000)
     //
     // Apart from "hover" we can't really show how component looks like in
     // certain states, so we have to fake them.

src/services/style_setter/style_setter.js

@@ -1,7 +1,7 @@
 import { init, getEngineChecksum } from '../theme_data/theme_data_3.service.js'
 import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from 'src/modules/default_config_state.js'
-import { chunk } from 'lodash'
+import { chunk, throttle } from 'lodash'
 import localforage from 'localforage'
 
 // On platforms where this is not supported, it will return undefined
@@ -10,10 +10,14 @@ const supportsAdoptedStyleSheets = !!document.adoptedStyleSheets
 
 const stylesheets = {}
 
-const createStyleSheet = (id) => {
+export const createStyleSheet = (id) => {
+  if (stylesheets[id]) return stylesheets[id]
   const newStyleSheet = {
     rules: [],
     ready: false,
+    clear () {
+      this.rules = []
+    },
     addRule (rule) {
       this.rules.push(
         rule
@@ -28,7 +32,7 @@ const createStyleSheet = (id) => {
 }
 
 
-export const adoptStyleSheets = () => {
+export const adoptStyleSheets = throttle(() => {
   if (supportsAdoptedStyleSheets) {
     document.adoptedStyleSheets = Object
       .values(stylesheets)
@@ -46,13 +50,12 @@ export const adoptStyleSheets = () => {
       .forEach(sheet => {
         sheet.rules.forEach(r => holder.sheet.insertRule(r))
       })
-
   }
   // Some older browsers do not support document.adoptedStyleSheets.
   // In this case, we use the <style> elements.
   // Since the <style> elements we need are already in the DOM, there
   // is nothing to do here.
-}
+}, 500)
 
 
 const EAGER_STYLE_ID = 'pleroma-eager-styles'