qugalet/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

made theme debug easier by making it an actual option

Browse source
This commit is contained in:
Henry Jameson 2024-06-21 23:28:24 +03:00
parent eed05f1380
commit f9e407de63
9 changed files with 53 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/boot/after_store.js
View file

@ -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) {

16
src/components/settings_modal/tabs/appearance_tab.vue
View file

@ -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>

8
src/components/settings_modal/tabs/general_tab.vue
View file

@ -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"

1
src/i18n/en.json
View file

@ -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",

12
src/modules/config.js
View file

@ -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)

6
src/modules/instance.js
View file

@ -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')
})

17
src/services/style_setter/style_setter.js
View file

@ -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)

12
src/services/theme_data/css_utils.js
View file

@ -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)};

2
src/services/theme_data/theme_data_3.service.js
View file

@ -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 = {}