Merge pull request '2-11-2-fixes' (#3522) from 2-11-2-fixes into develop

Reviewed-on: https://git.pleroma.social/pleroma/pleroma-fe/pulls/3522

changelog.d/2-11-2.fix

@@ -0,0 +1,4 @@
+Fixed crashing on Firefox 153
+Fixed serif-fonts being used by default in some cases
+Fixed font select component showing and using objects instead of strings
+Fixed generic ('sans-serif', 'monospace' etc) fonts not working

src/components/extra_notifications/extra_notifications.vue

@@ -87,6 +87,11 @@
   flex-direction: column;
   align-items: stretch;
 
+  &.panel-body::before {
+    content: '';
+    padding: 0;
+  }
+
   .notification {
     width: 100%;
     border-bottom: 1px solid;

src/components/settings_modal/tabs/general_tab.vue

@@ -68,7 +68,7 @@
             :model-value="mergedConfig.fontInterface"
             name="ui"
             :label="$t('settings.style.fonts.components_inline.interface')"
-            :fallback="{ family: 'sans-serif' }"
+            fallback="sans-serif"
             no-inherit="1"
             @update:model-value="v => updateFont('fontInterface', v)"
           />
@@ -77,7 +77,7 @@
           <FontControl
             :model-value="mergedConfig.fontInput"
             name="input"
-            :fallback="{ family: 'inherit' }"
+            fallback="inherit"
             :label="$t('settings.style.fonts.components_inline.input')"
             @update:model-value="v => updateFont('fontInput', v)"
           />

src/components/settings_modal/tabs/posts_tab.vue

@@ -58,7 +58,7 @@
           <FontControl
             :model-value="mergedConfig.fontPosts"
             name="post"
-            :fallback="{ family: 'inherit' }"
+            fallback="inherit"
             :label="$t('settings.style.fonts.components.post')"
             @update:model-value="v => updateFont('fontPosts', v)"
           />
@@ -67,7 +67,7 @@
           <FontControl
             :model-value="mergedConfig.fontMonospace"
             name="postCode"
-            :fallback="{ family: 'monospace' }"
+            fallback="monospace"
             :label="$t('settings.style.fonts.components.monospace')"
             @update:model-value="v => updateFont('fontMonospace', v)"
           />

src/modules/users.js

@@ -44,10 +44,10 @@ import {
 } from 'src/api/public.js'
 import {
   blockUser as apiBlockUser,
+  editUserNote as apiEditUserNote,
   muteUser as apiMuteUser,
   unblockUser as apiUnblockUser,
   unmuteUser as apiUnmuteUser,
-  editUserNote as apiEditUserNote,
   fetchBlocks,
   fetchDomainMutes,
   fetchMutes,

src/services/style_setter/style_setter.js

@@ -32,16 +32,17 @@ export const createStyleSheet = (id, priority = 1000) => {
         newRule = newRule.replace(/backdrop-filter:[^;]+;/g, '') // Remove backdrop-filter
       }
 
-      // firefox doesn't like invalid selectors
-      if (
-        !CSS.supports?.('selector(::-webkit-scrollbar)') &&
-        !CSS.supports?.('selector(::-webkit-scrollbar-button)') &&
-        !CSS.supports?.('selector(::-webkit-resizer)') &&
-        !CSS.supports?.('selector(::-webkit-scrollbar-thumb)') &&
-        newRule.startsWith('::-webkit')
-      ) {
-        return
+      if (newRule.startsWith('::-webkit')) {
+        if (typeof CSS.supports !== 'function') return
+        // firefox doesn't like invalid selectors
+        const fullWebkitScrollbarSupport =
+          CSS.supports('selector(::-webkit-scrollbar)') &&
+          CSS.supports('selector(::-webkit-scrollbar-button)') &&
+          CSS.supports('selector(::-webkit-resizer)') &&
+          CSS.supports('selector(::-webkit-scrollbar-thumb)')
+        if (!fullWebkitScrollbarSupport) return
       }
+
       this.rules.push(
         newRule.replace(/var\(--shadowFilter\)[^;]*;/g, ''), // Remove shadowFilter references
       )

src/stores/interface.js

@@ -17,6 +17,16 @@ import {
 } from 'src/services/theme_data/theme_data.service.js'
 import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
 
+const GENERIC_FONT_NAMES = new Set([
+  'serif',
+  'sans-serif',
+  'system-ui',
+  'cursive',
+  'fantasy',
+  'math',
+  'monospace',
+])
+
 export const useInterfaceStore = defineStore('interface', {
   state: () => ({
     localFonts: null,
@@ -246,7 +256,7 @@ export const useInterfaceStore = defineStore('interface', {
       }
     },
     setFontsList(value) {
-      this.localFonts = [...new Set(value.map((font) => font)).values()]
+      this.localFonts = [...new Set(value.map(({ family }) => family)).values()]
     },
     queryLocalFonts() {
       if (this.localFonts !== null) return
@@ -706,11 +716,14 @@ export const useInterfaceStore = defineStore('interface', {
         Object.entries(fontMap).forEach(([font, component]) => {
           const family = mergedConfig[`font${font}`]
           const variable = font === 'Monospace' ? '--monoFont' : '--font'
-          if (family) {
+          if (typeof family === 'string') {
+            const familyString = GENERIC_FONT_NAMES.has(family)
+              ? family
+              : `"${family}"`
             hacks.push({
               component,
               directives: {
-                [variable]: `generic | "${family}"`,
+                [variable]: `generic | ${familyString}`,
               },
             })
           }