index.html

@@ -70,8 +70,6 @@
                             "P P . . ."
                             "P P . E E"
                             "P P . E E";
-
-       --logoChunkSize: calc(2em * 0.5 * var(--scale))
      }
 
      .chunk {
@@ -101,27 +99,6 @@
        text-align: center;
      }
 
-     #statusError {
-       display: none;
-       margin-top: 1em;
-       font-size: calc(1vw + 1vh + 1vmin);
-       line-height: 2;
-       width: 100%;
-       text-align: center;
-     }
-
-     #statusStack {
-       display: none;
-       margin-top: 1em;
-       font-size: calc((1vw + 1vh + 1vmin) / 2.5);
-       width: calc(100vw - 5em);
-       padding: 1em;
-       text-overflow: ellipsis;
-       overflow-x: hidden;
-       text-align: left;
-       line-height: 2;
-     }
-
      @media (prefers-reduced-motion) {
        #throbber {
          animation: none !important;
@@ -156,8 +133,6 @@
           <!-- it's a pseudographic, don't want screenreader read out nonsense -->
           <span aria-hidden="true" class="initial-text">(｡&gt;﹏&lt;)</span>
         </div>
-        <code id="statusError"></code>
-        <pre id="statusStack"></pre>
       </div>
     </div>
     <div id="app" class="hidden"></div>

src/boot/after_store.js

@@ -348,11 +348,12 @@ const afterStoreSetup = async ({ store, i18n }) => {
   const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
   store.dispatch('setInstanceOption', { name: 'server', value: server })
 
+  document.querySelector('#status').textContent = i18n.global.t('splash.settings')
   await setConfig({ store })
+  document.querySelector('#status').textContent = i18n.global.t('splash.theme')
   try {
     await store.dispatch('applyTheme').catch((e) => { console.error('Error setting theme', e) })
   } catch (e) {
-    window.splashError(e)
     return Promise.reject(e)
   }
 
@@ -360,6 +361,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
 
   // Now we can try getting the server settings and logging in
   // Most of these are preloaded into the index.html so blocking is minimized
+  document.querySelector('#status').textContent = i18n.global.t('splash.instance')
   await Promise.all([
     checkOAuthToken({ store }),
     getInstancePanel({ store }),
@@ -406,6 +408,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
 
   // remove after vue 3.3
   app.config.unwrapInjectedRef = true
+  document.querySelector('#status').textContent = i18n.global.t('splash.almost')
 
   app.mount('#app')
   return app

src/i18n/en.json

@@ -1494,6 +1494,9 @@
   "splash": {
     "loading": "Loading...",
     "theme": "Applying theme, please wait warmly...",
+    "instance": "Getting instance info...",
+    "settings": "Applying settings...",
+    "almost": "Reticulating splines...",
     "fun_1": "Drink more water",
     "fun_2": "Take it easy!",
     "fun_3": "Suya...",

src/main.js

@@ -68,15 +68,6 @@ const persistedStateOptions = {
     throbber.classList.add('dead')
     document.querySelector('#status').textContent = i18n.global.t('splash.error')
     console.error('PleromaFE failed to initialize: ', e)
-    document.querySelector('#statusError').textContent = e
-    document.querySelector('#statusStack').textContent = e.stack
-    document.querySelector('#statusError').style = 'display: block'
-    document.querySelector('#statusStack').style = 'display: block'
-  }
-
-  window.splashError = e => splashError(i18n, e)
-  window.splashUpdate = key => {
-    document.querySelector('#status').textContent = i18n.global.t(key)
   }
 
   try {

src/modules/interface.js

@@ -563,118 +563,112 @@ const interfaceMod = {
       if (!forceRecompile && !themeDebug && await tryLoadCache()) {
         return commit('setThemeApplied')
       }
-      window.splashUpdate('splash.theme')
       await dispatch('getThemeData')
 
-      try {
-        const paletteIss = (() => {
-          if (!state.paletteDataUsed) return null
-          const result = {
-            component: 'Root',
-            directives: {}
-          }
+      const paletteIss = (() => {
+        if (!state.paletteDataUsed) return null
+        const result = {
+          component: 'Root',
+          directives: {}
+        }
 
-          Object
-            .entries(state.paletteDataUsed)
-            .filter(([k]) => k !== 'name')
-            .forEach(([k, v]) => {
-              let issRootDirectiveName
-              switch (k) {
-                case 'background':
-                  issRootDirectiveName = 'bg'
+        Object
+          .entries(state.paletteDataUsed)
+          .filter(([k]) => k !== 'name')
+          .forEach(([k, v]) => {
+            let issRootDirectiveName
+            switch (k) {
+              case 'background':
+                issRootDirectiveName = 'bg'
+                break
+              case 'foreground':
+                issRootDirectiveName = 'fg'
+                break
+              default:
+                issRootDirectiveName = k
+            }
+            result.directives['--' + issRootDirectiveName] = 'color | ' + v
+          })
+        return result
+      })()
+
+      const theme2ruleset = state.themeDataUsed && convertTheme2To3(normalizeThemeData(state.themeDataUsed))
+      const hacks = []
+
+      Object.entries(theme3hacks).forEach(([key, value]) => {
+        switch (key) {
+          case 'fonts': {
+            Object.entries(theme3hacks.fonts).forEach(([fontKey, font]) => {
+              if (!font?.family) return
+              switch (fontKey) {
+                case 'interface':
+                  hacks.push({
+                    component: 'Root',
+                    directives: {
+                      '--font': 'generic | ' + font.family
+                    }
+                  })
                   break
-                case 'foreground':
-                  issRootDirectiveName = 'fg'
+                case 'input':
+                  hacks.push({
+                    component: 'Input',
+                    directives: {
+                      '--font': 'generic | ' + font.family
+                    }
+                  })
+                  break
+                case 'post':
+                  hacks.push({
+                    component: 'RichContent',
+                    directives: {
+                      '--font': 'generic | ' + font.family
+                    }
+                  })
+                  break
+                case 'monospace':
+                  hacks.push({
+                    component: 'Root',
+                    directives: {
+                      '--monoFont': 'generic | ' + font.family
+                    }
+                  })
                   break
-                default:
-                  issRootDirectiveName = k
               }
-              result.directives['--' + issRootDirectiveName] = 'color | ' + v
             })
-          return result
-        })()
-
-        const theme2ruleset = state.themeDataUsed && convertTheme2To3(normalizeThemeData(state.themeDataUsed))
-        const hacks = []
-
-        Object.entries(theme3hacks).forEach(([key, value]) => {
-          switch (key) {
-            case 'fonts': {
-              Object.entries(theme3hacks.fonts).forEach(([fontKey, font]) => {
-                if (!font?.family) return
-                switch (fontKey) {
-                  case 'interface':
-                    hacks.push({
-                      component: 'Root',
-                      directives: {
-                        '--font': 'generic | ' + font.family
-                      }
-                    })
-                    break
-                  case 'input':
-                    hacks.push({
-                      component: 'Input',
-                      directives: {
-                        '--font': 'generic | ' + font.family
-                      }
-                    })
-                    break
-                  case 'post':
-                    hacks.push({
-                      component: 'RichContent',
-                      directives: {
-                        '--font': 'generic | ' + font.family
-                      }
-                    })
-                    break
-                  case 'monospace':
-                    hacks.push({
-                      component: 'Root',
-                      directives: {
-                        '--monoFont': 'generic | ' + font.family
-                      }
-                    })
-                    break
-                }
-              })
-              break
-            }
-            case 'underlay': {
-              if (value !== 'none') {
-                const newRule = {
-                  component: 'Underlay',
-                  directives: {}
-                }
-                if (value === 'opaque') {
-                  newRule.directives.opacity = 1
-                  newRule.directives.background = '--wallpaper'
-                }
-                if (value === 'transparent') {
-                  newRule.directives.opacity = 0
-                }
-                hacks.push(newRule)
-              }
-              break
-            }
+            break
           }
-        })
+          case 'underlay': {
+            if (value !== 'none') {
+              const newRule = {
+                component: 'Underlay',
+                directives: {}
+              }
+              if (value === 'opaque') {
+                newRule.directives.opacity = 1
+                newRule.directives.background = '--wallpaper'
+              }
+              if (value === 'transparent') {
+                newRule.directives.opacity = 0
+              }
+              hacks.push(newRule)
+            }
+            break
+          }
+        }
+      })
 
-        const rulesetArray = [
-          theme2ruleset,
-          state.styleDataUsed,
-          paletteIss,
-          hacks
-        ].filter(x => x)
+      const rulesetArray = [
+        theme2ruleset,
+        state.styleDataUsed,
+        paletteIss,
+        hacks
+      ].filter(x => x)
 
-        return applyTheme(
-          rulesetArray.flat(),
-          () => commit('setThemeApplied'),
-          () => {},
-          themeDebug
-        )
-      } catch (e) {
-        window.splashError(e)
-      }
+      return applyTheme(
+        rulesetArray.flat(),
+        () => commit('setThemeApplied'),
+        themeDebug
+      )
     }
   }
 }

src/services/style_setter/style_setter.js

@@ -118,7 +118,7 @@ export const tryLoadCache = async () => {
   }
 }
 
-export const applyTheme = (input, onEagerFinish = data => {}, onFinish = data => {}, debug) => {
+export const applyTheme = (input, onFinish = (data) => {}, debug) => {
   const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
   const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
 
@@ -148,7 +148,6 @@ export const applyTheme = (input, onEagerFinish = data => {}, onFinish = data =>
       },
       onEagerFinished () {
         adoptStyleSheets([eagerStyles])
-        onEagerFinish()
       },
       onLazyFinished () {
         adoptStyleSheets([eagerStyles, lazyStyles])

src/services/theme_data/theme_data_3.service.js

@@ -567,7 +567,6 @@ export const init = ({
     lazy,
     eager,
     staticVars,
-    engineChecksum,
-    themeChecksum: sum([lazy, eager])
+    engineChecksum
   }
 }

static/styles/Breezy DX.piss

@@ -52,21 +52,13 @@ Button:hover {
 }
 
 Button:toggled {
-  background: $blend(--bg 0.3 --accent)
+  background: $blend(--bg 0.8 --accent)
 }
 
 Button:pressed {
   background: $blend(--bg 0.8 --accent)
 }
 
-Button:pressed:toggled {
-  background: $blend(--bg 0.2 --accent)
-}
-
-Button:toggled:hover {
-  background: $blend(--bg 0.3 --accent)
-}
-
 Input {
   shadow: --defaultInputBevel
 }