update tabs to use new API

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
-      styleSheet.insertRule([
+
+      const sheet = createStyleSheet('appearance-tab-previews')
+      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 styleSheet = styleEl.sheet
+      const sheet = createStyleSheet('style-tab-overall-preview')
 
-      console.log(styleSheet)
-      console.log('BEFORE', styleSheet.cssRules)
-      for (let i = styleSheet.cssRules.length - 1; i >= 0; --i) {
-        styleSheet.deleteRule(i)
-      }
-
-      styleSheet.insertRule([
+      sheet.clear()
+      sheet.addRule([
         '#edited-style-preview {\n',
         css.join('\n'),
         '\n}'
-      ].join(''), 'index-max')
-      styleSheet.insertRule([
-        '#edited-style-preview {\n',
-        css.join('\n'),
-        '\n}'
-      ].join(''), 'index-max')
-      console.log('AFTER', styleSheet.cssRules)
+      ].join(''))
+      sheet.ready = true
+      adoptStyleSheets()
     })
 
-    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.