commit: f9e407de639ce4d20beacd3eca3501639ae161bd
parent eed05f1380fd60f9564558c82f142c317ef670f5
Author: Henry Jameson <me@hjkos.com>
Date: Fri, 21 Jun 2024 23:28:24 +0300
made theme debug easier by making it an actual option
Diffstat:
9 files changed, 53 insertions(+), 31 deletions(-)
diff --git 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) {
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -142,6 +142,22 @@
{{ $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>
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
@@ -149,14 +149,6 @@
<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"
path="conversationDisplay"
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -391,6 +391,7 @@
"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",
diff --git a/src/modules/config.js b/src/modules/config.js
@@ -147,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
}
@@ -274,9 +275,16 @@ const config = {
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)
diff --git a/src/modules/instance.js b/src/modules/instance.js
@@ -383,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')
})
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
@@ -6,7 +6,7 @@ import { getCssRules } from '../theme_data/css_utils.js'
import { defaultState } from '../../modules/config.js'
import { chunk } from 'lodash'
-export const generateTheme = async (input, callbacks) => {
+export const generateTheme = async (input, callbacks, debug) => {
const {
onNewRule = (rule, isLazy) => {},
onLazyFinished = () => {},
@@ -22,9 +22,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 +56,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 = [
@@ -113,12 +115,14 @@ export const tryLoadCache = () => {
}
}
-export const applyTheme = async (input, onFinish = (data) => {}) => {
+export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
const styleSheet = new CSSStyleSheet()
const styleArray = []
const lazyStyleSheet = new CSSStyleSheet()
const lazyStyleArray = []
+ console.log('DEBUG IS', debug)
+
const { lazyProcessFunc } = await generateTheme(
input,
{
@@ -140,7 +144,8 @@ export const applyTheme = async (input, onFinish = (data) => {}) => {
onFinish(cache)
localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
}
- }
+ },
+ debug
)
setTimeout(lazyProcessFunc, 0)
diff --git 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)};
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
@@ -149,7 +149,7 @@ 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 = {}
