Merge branch 'appearance-tab' into shigusegubu-themes3

Made the packs scroller a lot more bearable
make emoji picker more scalable
2024-06-26 00:05:28 +03:00 · 2024-06-26 00:02:45 +03:00 · 2024-06-25 23:30:08 +03:00 · 2024-06-22 00:54:23 +03:00 · 2024-06-21 21:53:00 +00:00 · 2024-06-22 00:45:46 +03:00
16 changed files with 267 additions and 111 deletions
--- a/changelog.d/themesv3-on-safari.fix
+++ b/changelog.d/themesv3-on-safari.fix
@ -0,0 +1 @@
+Fix Themes v3 on Safari not working
--- a/index.html
+++ b/index.html
@ -4,6 +4,8 @@
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <link rel="icon" type="image/png" href="/favicon.png">
+    <style id="pleroma-eager-styles" type="text/css"></style>
+    <style id="pleroma-lazy-styles" type="text/css"></style>
    <!--server-generated-meta-->
  </head>
  <body class="hidden">
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@ -353,18 +353,20 @@ const afterStoreSetup = async ({ store, i18n }) => {

  await setConfig({ store })

-  const { customTheme, customThemeSource, forceThemeRecompilation } = store.state.config
+  const { customTheme, customThemeSource, forceThemeRecompilation, themeDebug } = store.state.config
  const { theme } = store.state.instance
  const customThemePresent = customThemeSource || customTheme

-  if (!forceThemeRecompilation && tryLoadCache()) {
+  console.log('DEBUG INITIAL', themeDebug, forceThemeRecompilation)
+
+  if (!forceThemeRecompilation && !themeDebug && tryLoadCache()) {
    store.commit('setThemeApplied')
  } else {
    if (customThemePresent) {
      if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
-        applyTheme(customThemeSource)
+        applyTheme(customThemeSource, () => {}, themeDebug)
      } else {
-        applyTheme(customTheme)
+        applyTheme(customTheme, () => {}, themeDebug)
      }
      store.commit('setThemeApplied')
    } else if (theme) {
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@ -106,6 +106,9 @@ const EmojiPicker = {
    }
  },
  inject: ['popoversZLayer'],
+  mounted () {
+    this.updateEmojiSize()
+  },
  data () {
    return {
      keyword: '',
@ -120,6 +123,7 @@ const EmojiPicker = {
      groupRefs: {},
      emojiRefs: {},
      filteredEmojiGroups: [],
+      emojiSize: 0,
      width: 0
    }
  },
@ -130,6 +134,23 @@ const EmojiPicker = {
    Popover
  },
  methods: {
+    updateEmojiSize () {
+      const css = window.getComputedStyle(this.$refs.popover.$el)
+      const emojiSize = css.getPropertyValue('--emojiSize')
+      const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '')
+      const emojiSizeValue = emojiSize.replace(/[^0-9,.]+/, '')
+      const fontSize = css.getPropertyValue('font-size').replace(/[^0-9,.]+/, '')
+
+      let emojiSizeReal
+      if (emojiSizeUnit.endsWith('em')) {
+        emojiSizeReal = emojiSizeValue * fontSize
+      } else {
+        emojiSizeReal = emojiSizeValue
+      }
+
+      const fullEmojiSize = emojiSizeReal + (2 * 0.2 * fontSize)
+      this.emojiSize = fullEmojiSize
+    },
    showPicker () {
      this.$refs.popover.showPopover()
      this.onShowing()
@ -268,14 +289,25 @@ const EmojiPicker = {
    minItemSize () {
      return this.emojiHeight
    },
+    // used to watch it
+    fontSize () {
+      this.$nextTick(() => {
+        this.updateEmojiSize()
+      })
+      return this.$store.getters.mergedConfig.fontSize
+    },
    emojiHeight () {
-      return 32 + 4
+      return this.emojiSize
    },
    emojiWidth () {
-      return 32 + 4
+      return this.emojiSize
    },
    itemPerRow () {
-      return this.width ? Math.floor(this.width / this.emojiWidth - 1) : 6
+      console.log(
+        this.emojiWidth,
+        this.width
+      )
+      return this.width ? Math.floor(this.width / this.emojiWidth) : 6
    },
    activeGroupView () {
      return this.showingStickers ? '' : this.activeGroup
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@ -1,9 +1,6 @@
-$emoji-picker-header-height: 36px;
-$emoji-picker-header-picture-width: 32px;
-$emoji-picker-header-picture-height: 32px;
-$emoji-picker-emoji-size: 32px;
-
 .emoji-picker {
+  --__emoji-picker-header: 2.2em;
+
  width: 25em;
  max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
  display: flex;
@ -13,24 +10,26 @@ $emoji-picker-emoji-size: 32px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
-    width: $emoji-picker-header-picture-width;
-    max-width: $emoji-picker-header-picture-width;
-    height: $emoji-picker-header-picture-height;
-    max-height: $emoji-picker-header-picture-height;
+    width: var(--__emoji-picker-header);
+    max-width: var(--__emoji-picker-header);
+    height: var(--__emoji-picker-header);
+    max-height: var(--__emoji-picker-header);

    .still-image {
-      max-width: 100%;
-      max-height: 100%;
-      height: 100%;
-      width: 100%;
+      width: var(--__emoji-picker-header);
+      max-width: var(--__emoji-picker-header);
+      height: var(--__emoji-picker-header);
+      max-height: var(--__emoji-picker-header);
      object-fit: contain;
+
+      --_still_image-label-scale: 0.5;
    }
  }

  .keep-open,
  .too-many-emoji,
  .hide-custom-emoji {
-    padding: 7px;
+    padding: 0.5em;
    line-height: normal;
  }

@ -44,13 +43,13 @@ $emoji-picker-emoji-size: 32px;
  }

  .keep-open-label {
-    padding: 0 7px;
+    padding: 0 0.5em;
    display: flex;
  }

  .heading {
    display: flex;
-    padding: 10px 7px 5px;
+    padding: 0.7em 0.5em 0;
  }

  .content {
@ -65,13 +64,14 @@ $emoji-picker-emoji-size: 32px;
    display: flex;
    flex-flow: row nowrap;
    overflow-x: auto;
+    overflow-y: hidden;
  }

  .additional-tabs {
    display: flex;
    border-left: 1px solid;
    border-left-color: var(--border);
-    padding-left: 7px;
+    padding-left: 0.5em;
    flex: 0 0 auto;
  }

@ -80,25 +80,29 @@ $emoji-picker-emoji-size: 32px;
    flex-basis: auto;
    display: flex;
    align-content: center;
+    scrollbar-width: thin;

    &-item {
-      padding: 0 7px;
+      padding: 0 0.5em;
      cursor: pointer;
-      font-size: 1.85em;
-      width: $emoji-picker-header-picture-width;
-      max-width: $emoji-picker-header-picture-width;
-      height: $emoji-picker-header-picture-height;
-      max-height: $emoji-picker-header-picture-height;
+      width: var(--__emoji-picker-header);
+      max-width: var(--__emoji-picker-header);
+      height: var(--__emoji-picker-header);
+      max-height: var(--__emoji-picker-header);
      display: flex;
      align-items: center;

+      .svg-inline--fa {
+        font-size: 1.85em;
+      }
+
      &.disabled {
        opacity: 0.5;
        pointer-events: none;
      }

      &.toggled {
-        border-bottom: 4px solid;
+        border-bottom: 0.2em solid;
      }
    }
  }
@ -125,7 +129,7 @@ $emoji-picker-emoji-size: 32px;

  .emoji {
    &-search {
-      padding: 5px;
+      padding: 0.3em;
      flex: 0 0 auto;

      input {
@ -139,6 +143,7 @@ $emoji-picker-emoji-size: 32px;
      flex: 1 1 1px;
      position: relative;
      overflow: auto;
+      scrollbar-gutter: stable both-edges;
      user-select: none;
      mask:
        linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
@ -165,13 +170,13 @@ $emoji-picker-emoji-size: 32px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
-      padding-left: 5px;
      justify-content: left;

      &-title {
        font-size: 0.85em;
        width: 100%;
        margin: 0;
+        padding-left: 0.3em;

        &.disabled {
          display: none;
@ -180,24 +185,28 @@ $emoji-picker-emoji-size: 32px;
    }

    &-item {
-      width: $emoji-picker-emoji-size;
-      height: $emoji-picker-emoji-size;
+      width: var(--emoji-size);
+      height: var(--emoji-size);
      box-sizing: border-box;
      display: flex;
-      line-height: $emoji-picker-emoji-size;
+      line-height: var(--emoji-size);
      align-items: center;
      justify-content: center;
-      margin: 4px;
+      margin: 0.2em;
      cursor: pointer;

      .emoji-picker-emoji.-custom {
        object-fit: contain;
-        max-width: 100%;
-        max-height: 100%;
+        width: var(--emoji-size);
+        max-width: var(--emoji-size);
+        height: var(--emoji-size);
+        max-height: var(--emoji-size);
+
+        --_still_image-label-scale: 0.5;
      }

      .emoji-picker-emoji.-unicode {
-        font-size: 24px;
+        font-size: 20.2em;
        overflow: hidden;
      }
    }
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@ -22,6 +22,11 @@ const AppearanceTab = {
        key: mode,
        value: mode,
        label: this.$t(`settings.third_column_mode_${mode}`)
+      })),
+      forcedRoundnessOptions: ['disabled', 'sharp', 'nonsharp', 'round'].map((mode, i) => ({
+        key: mode,
+        value: i - 1,
+        label: this.$t(`settings.forced_roundness_mode_${mode}`)
      }))
    }
  },
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@ -128,11 +128,36 @@
    <div class="setting-item">
      <h2>{{ $t('settings.visual_tweaks') }}</h2>
      <ul class="setting-list">
+        <li>
+          <ChoiceSetting
+            id="forcedRoundness"
+            path="forcedRoundness"
+            :options="forcedRoundnessOptions"
+          >
+            {{ $t('settings.force_interface_roundness') }}
+          </ChoiceSetting>
+        </li>
        <li v-if="instanceWallpaperUsed">
          <BooleanSetting path="hideInstanceWallpaper">
            {{ $t('settings.hide_wallpaper') }}
          </BooleanSetting>
        </li>
+        <li>
+          <BooleanSetting
+            path="forceThemeRecompilation"
+            :expert="1"
+          >
+            {{ $t('settings.force_theme_recompilation_debug') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="themeDebug"
+            :expert="1"
+          >
+            {{ $t('settings.theme_debug') }}
+          </BooleanSetting>
+        </li>
      </ul>
    </div>
  </div>
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@ -148,14 +148,6 @@
    <div class="setting-item">
      <h2>{{ $t('settings.post_look_feel') }}</h2>
      <ul class="setting-list">
-        <li>
-          <BooleanSetting
-            path="forceThemeRecompilation"
-            :expert="1"
-          >
-            {{ $t('settings.force_theme_recompilation_debug') }}
-          </BooleanSetting>
-        </li>
        <li>
          <ChoiceSetting
            id="conversationDisplay"
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@ -386,6 +386,13 @@
    "navbar_size": "Top bar size",
    "panel_header_size": "Panel header size",
    "visual_tweaks": "Minor visual tweaks",
+    "force_interface_roundness": "Override interface roundness/sharpness",
+    "forced_roundness_mode_disabled": "Use theme defaults",
+    "forced_roundness_mode_sharp": "Force sharp edges",
+    "forced_roundness_mode_nonsharp": "Force not-so-sharp (1px roundness) edges",
+    "forced_roundness_mode_round": "Force round edges",
+    "theme_debug": "Show what background theme engine assumes when dealing with transparancy (DEBUG)",
+    "scale_and_layout": "Interface scale and layout",
    "mfa": {
      "otp": "OTP",
      "setup_otp": "Setup OTP",
--- a/src/modules/config.js
+++ b/src/modules/config.js
@ -119,6 +119,8 @@ export const defaultState = {
  textSize: undefined, // instance default
  emojiSize: undefined, // instance default
  navbarSize: undefined, // instance default
+  panelHeaderSize: undefined, // instance default
+  forcedRoundness: undefined, // instance default
  navbarColumnStretch: false,
  greentext: undefined, // instance default
  useAtIcon: undefined, // instance default
@ -145,6 +147,7 @@ export const defaultState = {
  maxDepthInThread: undefined, // instance default
  autocompleteSelect: undefined, // instance default
  closingDrawerMarksAsSeen: undefined, // instance default
+  themeDebug: false,
  unseenAtTop: undefined, // instance default
  ignoreInactionableSeen: undefined // instance default
 }
@ -266,14 +269,22 @@ const config = {
          case 'textSize':
          case 'navbarSize':
          case 'panelHeaderSize':
+          case 'forcedRoundness':
          case 'emojiSize':
          case 'emojiReactionsScale':
            applyConfig(state)
            break
          case 'customTheme':
-          case 'customThemeSource':
-            applyTheme(value)
+          case 'customThemeSource': {
+            const { themeDebug } = state
+            applyTheme(value, () => {}, themeDebug)
            break
+          }
+          case 'themeDebug': {
+            const { customTheme, customThemeSource } = state
+            applyTheme(customTheme || customThemeSource, () => {}, value)
+            break
+          }
          case 'interfaceLanguage':
            messages.setLanguage(this.getters.i18n, value)
            dispatch('loadUnicodeEmojiData', value)
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@ -103,6 +103,7 @@ const defaultState = {
  emojiSize: '2.2rem',
  navbarSize: '3.5rem',
  panelHeaderSize: '3.2rem',
+  forcedRoundness: -1,
  virtualScrolling: true,
  sensitiveByDefault: false,
  conversationDisplay: 'linear',
@ -382,16 +383,16 @@ const instance = {
        .then(themeData => {
          commit('setInstanceOption', { name: 'themeData', value: themeData })
          // No need to apply theme if there's user theme already
-          const { customTheme } = rootState.config
+          const { customTheme, themeDebug } = rootState.config
          const { themeApplied } = rootState.interface
          if (customTheme || themeApplied) return

          // New theme presets don't have 'theme' property, they use 'source'
          const themeSource = themeData.source
          if (!themeData.theme || (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION)) {
-            applyTheme(themeSource)
+            applyTheme(themeSource, null, themeDebug)
          } else {
-            applyTheme(themeData.theme)
+            applyTheme(themeData.theme, null, themeDebug)
          }
          commit('setThemeApplied')
        })
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@ -6,7 +6,46 @@ import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from '../../modules/config.js'
 import { chunk } from 'lodash'

-export const generateTheme = async (input, callbacks) => {
+// On platforms where this is not supported, it will return undefined
+// Otherwise it will return an array
+const supportsAdoptedStyleSheets = !!document.adoptedStyleSheets
+
+const createStyleSheet = (id) => {
+  if (supportsAdoptedStyleSheets) {
+    return {
+      el: null,
+      sheet: new CSSStyleSheet(),
+      rules: []
+    }
+  }
+
+  const el = document.getElementById(id)
+  // Clear all rules in it
+  for (let i = el.sheet.cssRules.length - 1; i >= 0; --i) {
+    el.sheet.deleteRule(i)
+  }
+
+  return {
+    el,
+    sheet: el.sheet,
+    rules: []
+  }
+}
+
+const EAGER_STYLE_ID = 'pleroma-eager-styles'
+const LAZY_STYLE_ID = 'pleroma-lazy-styles'
+
+const adoptStyleSheets = (styles) => {
+  if (supportsAdoptedStyleSheets) {
+    document.adoptedStyleSheets = styles.map(s => s.sheet)
+  }
+  // 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.
+}
+
+export const generateTheme = async (input, callbacks, debug) => {
  const {
    onNewRule = (rule, isLazy) => {},
    onLazyFinished = () => {},
@ -22,9 +61,11 @@ export const generateTheme = async (input, callbacks) => {
  }

  // Assuming that "worst case scenario background" is panel background since it's the most likely one
-  const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim())
+  const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim(), debug)

-  getCssRules(themes3.eager, themes3.staticVars).forEach(rule => {
+  console.log('DEBUG 2 IS', debug)
+
+  getCssRules(themes3.eager, debug).forEach(rule => {
    // Hacks to support multiple selectors on same component
    if (rule.match(/::-webkit-scrollbar-button/)) {
      const parts = rule.split(/[{}]/g)
@ -54,7 +95,7 @@ export const generateTheme = async (input, callbacks) => {
  const processChunk = () => {
    const chunk = chunks[counter]
    Promise.all(chunk.map(x => x())).then(result => {
-      getCssRules(result.filter(x => x), themes3.staticVars).forEach(rule => {
+      getCssRules(result.filter(x => x), debug).forEach(rule => {
        if (rule.match(/\.modal-view/)) {
          const parts = rule.split(/[{}]/g)
          const newRule = [
@ -98,13 +139,13 @@ export const tryLoadCache = () => {
    return false
  }
  if (cache.engineChecksum === getEngineChecksum()) {
-    const styleSheet = new CSSStyleSheet()
-    const lazyStyleSheet = new CSSStyleSheet()
+    const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
+    const lazyStyles = createStyleSheet(LAZY_STYLE_ID)

-    cache.data[0].forEach(rule => styleSheet.insertRule(rule, 'index-max'))
-    cache.data[1].forEach(rule => lazyStyleSheet.insertRule(rule, 'index-max'))
+    cache.data[0].forEach(rule => eagerStyles.sheet.insertRule(rule, 'index-max'))
+    cache.data[1].forEach(rule => lazyStyles.sheet.insertRule(rule, 'index-max'))

-    document.adoptedStyleSheets = [styleSheet, lazyStyleSheet]
+    adoptStyleSheets([eagerStyles, lazyStyles])

    return true
  } else {
@ -113,34 +154,35 @@ export const tryLoadCache = () => {
  }
 }

-export const applyTheme = async (input, onFinish = (data) => {}) => {
-  const styleSheet = new CSSStyleSheet()
-  const styleArray = []
-  const lazyStyleSheet = new CSSStyleSheet()
-  const lazyStyleArray = []
+export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
+  const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
+  const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
+
+  console.log('DEBUG IS', debug)

  const { lazyProcessFunc } = await generateTheme(
    input,
    {
      onNewRule (rule, isLazy) {
        if (isLazy) {
-          lazyStyleSheet.insertRule(rule, 'index-max')
-          lazyStyleArray.push(rule)
+          lazyStyles.sheet.insertRule(rule, 'index-max')
+          lazyStyles.rules.push(rule)
        } else {
-          styleSheet.insertRule(rule, 'index-max')
-          styleArray.push(rule)
+          eagerStyles.sheet.insertRule(rule, 'index-max')
+          eagerStyles.rules.push(rule)
        }
      },
      onEagerFinished () {
-        document.adoptedStyleSheets = [styleSheet]
+        adoptStyleSheets([eagerStyles])
      },
      onLazyFinished () {
-        document.adoptedStyleSheets = [styleSheet, lazyStyleSheet]
-        const cache = { engineChecksum: getEngineChecksum(), data: [styleArray, lazyStyleArray] }
+        adoptStyleSheets([eagerStyles, lazyStyles])
+        const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] }
        onFinish(cache)
        localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
      }
-    }
+    },
+    debug
  )

  setTimeout(lazyProcessFunc, 0)
@ -153,22 +195,41 @@ const extractStyleConfig = ({
  contentColumnWidth,
  notifsColumnWidth,
  emojiReactionsScale,
-  roundnessOverride,
  emojiSize,
  navbarSize,
  panelHeaderSize,
-  textSize
-}) => ({
-  sidebarColumnWidth,
-  contentColumnWidth,
-  notifsColumnWidth,
-  emojiReactionsScale,
-  roundnessOverride,
-  emojiSize,
-  navbarSize,
-  panelHeaderSize,
-  textSize
-})
+  textSize,
+  forcedRoundness
+}) => {
+  const result = {
+    sidebarColumnWidth,
+    contentColumnWidth,
+    notifsColumnWidth,
+    emojiReactionsScale,
+    emojiSize,
+    navbarSize,
+    panelHeaderSize,
+    textSize
+  }
+
+  console.log(forcedRoundness)
+  switch (forcedRoundness) {
+    case 'disable':
+      break
+    case '0':
+      result.forcedRoundness = '0'
+      break
+    case '1':
+      result.forcedRoundness = '1px'
+      break
+    case '2':
+      result.forcedRoundness = '0.4rem'
+      break
+    default:
+  }
+
+  return result
+}

 const defaultStyleConfig = extractStyleConfig(defaultState)

@ -188,13 +249,21 @@ export const applyConfig = (input) => {
    .filter(([k, v]) => v)
    .map(([k, v]) => `--${k}: ${v}`).join(';')

+  document.getElementById('style-config')?.remove()
  const styleEl = document.createElement('style')
+  styleEl.id = 'style-config'
  head.appendChild(styleEl)
  const styleSheet = styleEl.sheet

  styleSheet.toString()
  styleSheet.insertRule(`:root { ${rules} }`, 'index-max')

+  if (Object.prototype.hasOwnProperty.call(config, 'forcedRoundness')) {
+    styleSheet.insertRule(` * {
+        --roundness: var(--forcedRoundness) !important;
+    }`, 'index-max')
+  }
+
  body.classList.remove('hidden')
 }

--- a/src/services/theme_data/css_utils.js
+++ b/src/services/theme_data/css_utils.js
@ -2,11 +2,6 @@ import { convert } from 'chromatism'

 import { hex2rgb, rgba2css } from '../color_convert/color_convert.js'

-// This changes what backgrounds are used to "stacked" solid colors so you can see
-// what theme engine "thinks" is actual background color is for purposes of text color
-// generation and for when --stacked variable is used
-const DEBUG = false
-
 export const parseCssShadow = (text) => {
  const dimensions = /(\d[a-z]*\s?){2,4}/.exec(text)?.[0]
  const inset = /inset/.exec(text)?.[0]
@ -66,7 +61,10 @@ export const getCssShadowFilter = (input) => {
    .join(' ')
 }

-export const getCssRules = (rules) => rules.map(rule => {
+// `debug` changes what backgrounds are used to "stacked" solid colors so you can see
+// what theme engine "thinks" is actual background color is for purposes of text color
+// generation and for when --stacked variable is used
+export const getCssRules = (rules, debug) => rules.map(rule => {
  let selector = rule.selector
  if (!selector) {
    selector = 'html'
@ -93,7 +91,7 @@ export const getCssRules = (rules) => rules.map(rule => {
        ].join(';\n  ')
      }
      case 'background': {
-        if (DEBUG) {
+        if (debug) {
          return `
            --background: ${getCssColorString(rule.dynamicVars.stacked)};
            background-color: ${getCssColorString(rule.dynamicVars.stacked)};
--- a/src/services/theme_data/iss_utils.js
+++ b/src/services/theme_data/iss_utils.js
@ -1,3 +1,5 @@
+import { sortBy } from 'lodash'
+
 // "Unrolls" a tree structure of item: { parent: { ...item2, parent: { ...item3, parent: {...} } }}
 // into an array [item2, item3] for iterating
 export const unroll = (item) => {
@ -24,7 +26,7 @@ export const getAllPossibleCombinations = (array) => {
    })
    const flatCombos = newCombos.reduce((acc, x) => [...acc, ...x], [])
    const uniqueComboStrings = new Set()
-    const uniqueCombos = flatCombos.map(x => x.toSorted()).filter(x => {
+    const uniqueCombos = flatCombos.map(sortBy).filter(x => {
      if (uniqueComboStrings.has(x.join())) {
        return false
      } else {
@ -64,7 +66,7 @@ export const genericRuleToSelector = components => (rule, ignoreOutOfTreeSelecto
  }

  const selectors = [realSelector, applicableVariant, ...applicableStates]
-    .toSorted((a, b) => {
+    .sort((a, b) => {
      if (a.startsWith(':')) return 1
      if (/^[a-z]/.exec(a)) return -1
      else return 0
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@ -138,7 +138,7 @@ export const convertTheme2To3 = (data) => {
    Object.keys(data.opacity || {}).forEach(key => {
      if (!opacityKeys.has(key) || data.opacity[key] === undefined) return null
      const originalOpacity = data.opacity[key]
-      const rule = {}
+      const rule = { source: '2to3' }

      switch (key) {
        case 'alert':
@ -213,7 +213,7 @@ export const convertTheme2To3 = (data) => {
    Object.keys(data.radii || {}).forEach(key => {
      if (!radiiKeys.has(key) || data.radii[key] === undefined) return null
      const originalRadius = data.radii[key]
-      const rule = {}
+      const rule = { source: '2to3' }

      switch (key) {
        case 'btn':
@ -266,7 +266,7 @@ export const convertTheme2To3 = (data) => {
    Object.keys(data.fonts || {}).forEach(key => {
      if (!fontsKeys.has(key)) return
      const originalFont = data.fonts[key].family
-      const rule = {}
+      const rule = { source: '2to3' }

      switch (key) {
        case 'interface':
@ -300,7 +300,7 @@ export const convertTheme2To3 = (data) => {
    Object.keys(data.shadows || {}).forEach(key => {
      if (!shadowsKeys.has(key)) return
      const originalShadow = data.shadows[key]
-      const rule = {}
+      const rule = { source: '2to3' }

      switch (key) {
        case 'panel':
@ -369,7 +369,7 @@ export const convertTheme2To3 = (data) => {

  const extendedRules = Object.entries(extendedBaseKeys).map(([prefix, keys]) => {
    if (nonComponentPrefixes.has(prefix)) return null
-    const rule = {}
+    const rule = { source: '2to3' }
    if (prefix === 'alertPopup') {
      rule.component = 'Alert'
      rule.parent = { component: 'Popover' }
@ -402,7 +402,7 @@ export const convertTheme2To3 = (data) => {
      const leftoverKey = key.replace(prefix, '')
      const parts = (leftoverKey || 'Bg').match(/[A-Z][a-z]*/g)
      const last = parts.slice(-1)[0]
-      let newRule = { directives: {} }
+      let newRule = { source: '2to3', directives: {} }
      let variantArray = []

      switch (last) {
@ -462,12 +462,12 @@ export const convertTheme2To3 = (data) => {

      if (prefix === 'popover' && variantArray[0] === 'Post') {
        newRule.component = 'Post'
-        newRule.parent = { component: 'Popover' }
+        newRule.parent = { source: '2to3hack', component: 'Popover' }
        variantArray = variantArray.filter(x => x !== 'Post')
      }

      if (prefix === 'selectedMenu' && variantArray[0] === 'Popover') {
-        newRule.parent = { component: 'Popover' }
+        newRule.parent = { source: '2to3hack', component: 'Popover' }
        variantArray = variantArray.filter(x => x !== 'Popover')
      }

@ -477,12 +477,12 @@ export const convertTheme2To3 = (data) => {
        case 'alert': {
          const hasPanel = variantArray.find(x => x === 'Panel')
          if (hasPanel) {
-            newRule.parent = { component: 'PanelHeader' }
+            newRule.parent = { source: '2to3hack', component: 'PanelHeader', parent: newRule.parent }
            variantArray = variantArray.filter(x => x !== 'Panel')
          }
          const hasTop = variantArray.find(x => x === 'Top') // TopBar
          if (hasTop) {
-            newRule.parent = { component: 'TopBar' }
+            newRule.parent = { source: '2to3hack', component: 'TopBar', parent: newRule.parent }
            variantArray = variantArray.filter(x => x !== 'Top' && x !== 'Bar')
          }
          break
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@ -1,6 +1,6 @@
 import { convert, brightness } from 'chromatism'
 import sum from 'hash-sum'
-import { flattenDeep } from 'lodash'
+import { flattenDeep, sortBy } from 'lodash'
 import {
  alphaBlend,
  getTextColor,
@ -149,14 +149,14 @@ const ruleToSelector = genericRuleToSelector(components)

 export const getEngineChecksum = () => engineChecksum

-export const init = (extraRuleset, ultimateBackgroundColor) => {
+export const init = (extraRuleset, ultimateBackgroundColor, debug) => {
  const staticVars = {}
  const stacked = {}
  const computed = {}

  const rulesetUnsorted = [
    ...Object.values(components)
-      .map(c => (c.defaultRules || []).map(r => ({ component: c.name, ...r })))
+      .map(c => (c.defaultRules || []).map(r => ({ component: c.name, ...r, source: 'Built-in' })))
      .reduce((acc, arr) => [...acc, ...arr], []),
    ...extraRuleset
  ].map(rule => {
@ -226,7 +226,7 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
        combination.variant === 'normal'
          ? ''
          : combination.variant[0].toUpperCase() + combination.variant.slice(1).toLowerCase(),
-        ...combination.state.filter(x => x !== 'normal').toSorted().map(state => state[0].toUpperCase() + state.slice(1).toLowerCase())
+        ...sortBy(combination.state.filter(x => x !== 'normal')).map(state => state[0].toUpperCase() + state.slice(1).toLowerCase())
      ].join('')

      let inheritedTextColor = computedDirectives.textColor
Author	SHA1	Message	Date
Henry Jameson	6447f89d77	Merge branch 'appearance-tab' into shigusegubu-themes3	2024-06-26 00:05:28 +03:00
Henry Jameson	1e0d75782f	Made the packs scroller a lot more bearable	2024-06-26 00:02:45 +03:00
Henry Jameson	8981448448	make emoji picker more scalable	2024-06-25 23:30:08 +03:00
Henry Jameson	6846b4fe8a	Merge remote-tracking branch 'origin/develop' into appearance-tab	2024-06-22 00:54:23 +03:00
HJ	4c3e297975	Merge branch 'tusooa/themesv3-on-safari' into 'develop' Fix Themes v3 not working on Safari Closes #1319 See merge request pleroma/pleroma-fe!1918	2024-06-21 21:53:00 +00:00
Henry Jameson	aae508f5a1	fix firefox redmond themes / fixed topbar and panel headers not having proper theme2 inputs/alerts colors	2024-06-22 00:45:46 +03:00
Henry Jameson	f9e407de63	made theme debug easier by making it an actual option	2024-06-21 23:28:24 +03:00
Henry Jameson	eed05f1380	forced roundness tweak config	2024-06-21 22:46:01 +03:00
Henry Jameson	eca8da6593	fixed a "leak" that made too many <style> elements	2024-06-21 22:45:10 +03:00
tusooa	dc37c7b28b	Fix Themes v3 not working on Safari	2024-05-31 14:34:38 -04:00