Merge remote-tracking branch 'origin/develop' into bookmark-folders

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

src/services/style_setter/style_setter.js

@@ -43,16 +43,16 @@ const adoptStyleSheets = (styles) => {
   // is nothing to do here.
 }
 
-export const generateTheme = async (inputRuleset, callbacks, debug) => {
+export const generateTheme = (inputRuleset, callbacks, debug) => {
   const {
     onNewRule = (rule, isLazy) => {},
     onLazyFinished = () => {},
     onEagerFinished = () => {}
   } = callbacks
 
-  // Assuming that "worst case scenario background" is panel background since it's the most likely one
   const themes3 = init({
     inputRuleset,
+    // Assuming that "worst case scenario background" is panel background since it's the most likely one
     ultimateBackgroundColor: inputRuleset[0].directives['--bg'].split('|')[1].trim(),
     debug
   })
@@ -146,11 +146,11 @@ export const tryLoadCache = () => {
   }
 }
 
-export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
+export const applyTheme = (input, onFinish = (data) => {}, debug) => {
   const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
   const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
 
-  const { lazyProcessFunc } = await generateTheme(
+  const { lazyProcessFunc } = generateTheme(
     input,
     {
       onNewRule (rule, isLazy) {
@@ -169,15 +169,22 @@ export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
         adoptStyleSheets([eagerStyles, lazyStyles])
         const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] }
         onFinish(cache)
-        localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
+        try {
+          localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
+        } catch (e) {
+          localStorage.removeItem('pleroma-fe-theme-cache')
+          try {
+            localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
+          } catch (e) {
+            console.warn('cannot save cache!', e)
+          }
+        }
       }
     },
     debug
   )
 
   setTimeout(lazyProcessFunc, 0)
-
-  return Promise.resolve()
 }
 
 const extractStyleConfig = ({
@@ -222,7 +229,7 @@ const extractStyleConfig = ({
 
 const defaultStyleConfig = extractStyleConfig(defaultState)
 
-export const applyConfig = (input) => {
+export const applyConfig = (input, i18n) => {
   const config = extractStyleConfig(input)
 
   if (config === defaultStyleConfig) {
@@ -230,8 +237,6 @@ export const applyConfig = (input) => {
   }
 
   const head = document.head
-  const body = document.body
-  body.classList.add('hidden')
 
   const rules = Object
     .entries(config)
@@ -252,8 +257,6 @@ export const applyConfig = (input) => {
         --roundness: var(--forcedRoundness) !important;
     }`, 'index-max')
   }
-
-  body.classList.remove('hidden')
 }
 
 export const getThemes = () => {

src/services/theme_data/theme_data.service.js

@@ -452,7 +452,7 @@ export const getCssShadow = (input, usesDropShadow) => {
     ]).join(' ')).join(', ')
 }
 
-const getCssShadowFilter = (input) => {
+export const getCssShadowFilter = (input) => {
   if (input.length === 0) {
     return 'none'
   }

src/services/theme_data/theme_data_3.service.js

@@ -182,7 +182,7 @@ export const init = ({
 
   const rulesetUnsorted = [
     ...Object.values(components)
-      .map(c => (c.defaultRules || []).map(r => ({ component: c.name, ...r, source: 'Built-in' })))
+      .map(c => (c.defaultRules || []).map(r => ({ source: 'Built-in', component: c.name, ...r })))
       .reduce((acc, arr) => [...acc, ...arr], []),
     ...inputRuleset
   ].map(rule => {
@@ -198,18 +198,33 @@ export const init = ({
 
   const ruleset = rulesetUnsorted
     .map((data, index) => ({ data, index }))
-    .sort(({ data: a, index: ai }, { data: b, index: bi }) => {
+    .toSorted(({ data: a, index: ai }, { data: b, index: bi }) => {
       const parentsA = unroll(a).length
       const parentsB = unroll(b).length
 
-      if (parentsA === parentsB) {
-        if (a.component === 'Text') return -1
-        if (b.component === 'Text') return 1
+      let aScore = 0
+      let bScore = 0
+
+      aScore += parentsA * 1000
+      bScore += parentsB * 1000
+
+      aScore += a.variant !== 'normal' ? 100 : 0
+      bScore += b.variant !== 'normal' ? 100 : 0
+
+      aScore += a.state.filter(x => x !== 'normal').length * 1000
+      bScore += b.state.filter(x => x !== 'normal').length * 1000
+
+      aScore += a.component === 'Text' ? 1 : 0
+      bScore += b.component === 'Text' ? 1 : 0
+
+      // Debug
+      a.specifityScore = aScore
+      b.specifityScore = bScore
+
+      if (aScore === bScore) {
         return ai - bi
       }
-      if (parentsA === 0 && parentsB !== 0) return -1
-      if (parentsB === 0 && parentsA !== 0) return 1
-      return parentsA - parentsB
+      return aScore - bScore
     })
     .map(({ data }) => data)
 
@@ -235,7 +250,10 @@ export const init = ({
 
     // Inheriting all of the applicable rules
     const existingRules = ruleset.filter(findRules(combination))
-    const computedDirectives = existingRules.map(r => r.directives).reduce((acc, directives) => ({ ...acc, ...directives }), {})
+    const computedDirectives =
+          existingRules
+            .map(r => r.directives)
+            .reduce((acc, directives) => ({ ...acc, ...directives }), {})
     const computedRule = {
       ...combination,
       directives: computedDirectives