Fix/Performance: Toolbars use main css loading pipeline

GiovanH · Mar 23, 2024 · 4d2b4c2 · 4d2b4c2
1 parent b998372
commit 4d2b4c2
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 25 deletions.
diff --git a/src/components/AppMenu/TabBar.vue b/src/components/AppMenu/TabBar.vue
@@ -16,7 +16,7 @@
       <AddressBar/>
       <!-- Toolbars go here -->
       <component v-for="(__, componentkey) in browserToolbars" 
-        :is="componentkey" :key="componentkey" class="toolbar"/>
+        :is="componentkey" :key="componentkey" :data-component="componentkey" class="toolbar"/>
       <div class="lineBreak"/>
     </template>
 
@@ -50,7 +50,7 @@
     <template v-if="!$localData.settings.showAddressBar">
       <!-- Toolbars go here too (compact layout) -->
       <component v-for="(__, componentkey) in browserToolbars" 
-        :is="componentkey" :key="componentkey" class="toolbar"/>
+        :is="componentkey" :key="componentkey" :data-component="componentkey" class="toolbar"/>
     </template>
     <div />
   </div>

diff --git a/src/components/CustomContent/ModBrowserToolbarMixin.vue b/src/components/CustomContent/ModBrowserToolbarMixin.vue
@@ -6,8 +6,6 @@ const MediaEmbed = () => import('@/components/UIElements/MediaEmbed.vue')
 const SpoilerBox = () => import('@/components/UIElements/SpoilerBox.vue')
 const StoryPageLink = () => import('@/components/UIElements/StoryPageLink.vue')
 
-const Sass = require('sass')
-
 const GlobalComponents = {
   NavBanner, 
   FlashCredit,
@@ -16,30 +14,9 @@ const GlobalComponents = {
   StoryPageLink
 }
 
-var instances = 0
-
 export default {
   created(){
-    // this.$logger.info("MBP created")
     this.$options.components = Object.assign(this.$options.components, GlobalComponents)
-  },
-  mounted() {
-    // this.$logger.info("MBP mounted")
-    instances += 1
-    
-    if (this.$options.scss) {
-      this.$el.setAttribute('data-instance', instances) 
-
-      const style = document.createElement("style")
-      style.id = `browsertoolbar-style-${instances}`
-      style.rel = "stylesheet"
-      style.innerHTML = Sass.renderSync({
-        data: `#tabBar .toolbar[data-instance='${instances}'] {\n${this.$options.scss}\n}`,
-        sourceComments: true
-      }).css.toString()
-      // this.$logger.info("MBP injected style")
-      this.$el.appendChild(style)
-    }
   }
 }
 </script>
diff --git a/src/mods.js b/src/mods.js
@@ -901,6 +901,17 @@ function getMainMixin(){
                 addScssStyle(style_id, sass_body)
               }
             })
+
+            const modToolbars = js.browserToolbars || {}
+            Object.entries(modToolbars).forEach((t, i) => {
+              const [componentTag, {component}] = t
+              // N.B. Unlike pages (which have URLs) toolbars are js-id namespaced.
+              if (component.scss) {
+                const style_id = `browsertoolbar-style-${js._id}-${componentTag}`
+                const sass_body = `#tabBar [data-component='${js._id}-${componentTag}'] {\n${component.scss}\n}`
+                addScssStyle(style_id, sass_body)
+              }
+            })
           } catch (e) {
             onModLoadFail([js._id], e)
           }