Appearance settings tab crashes when custom FE is served by backend #1349

Open
opened 2024-12-21 14:08:42 +00:00 by phnt · 8 comments
Member

Environment info

  • Browser, version, OS, platform: Chromium and Firefox
  • Instance URL: N/A
  • Frontend version (see settings -> about): develop
  • Backend version (see settings -> about): stable
  • Browser extensions (ublock, rikaichamp etc): N/A (Chrome incognito window)
  • Known instance/user customizations (i.e. pleromafe mods/forks, instance styles etc): FE served from $instance_static/frontends/fe/dist

Bug description & reproduction steps

Appearance settings tab crashes almost immediately when custom FE is served by BE. Running FE in dev mode with yarn dev and proxied to the local BE instance works without issues.

Steps to reproduce:

  1. Configure BE to serve a different primary frontend with config :pleroma, :frontends, primary: %{"name" => "fe", "ref" => "dist"}
  2. Build a prod version of the FE with yarn build
  3. Copy dist folder to $PLEROMA_BE/instance/static/frontends/fe
  4. Start BE and go to localhost:4000
  5. Open settings and switch to the appearance tab
  6. The tab disappears almost immediately

Last known good commit: 898881bac1

Console output in Chromium devtools:
devtools console

Bug seriousness

  • How annoying it is: Minor
  • How often does it happen: Every time
  • How many people does it affect: Not many
# Environment info <!-- Everything is optional and where applicable but the more information the better. --> * Browser, version, OS, platform: Chromium and Firefox * Instance URL: N/A * Frontend version (see settings -> about): [develop](3d68dda5a2305035adc3bf3285b2014c36873733) * Backend version (see settings -> about): [stable](https://git.pleroma.social/pleroma/pleroma/-/commit/fe3e61f6ece0335627f675e04a93917e6c613c6c) * Browser extensions (ublock, rikaichamp etc): N/A (Chrome incognito window) * Known instance/user customizations (i.e. pleromafe mods/forks, instance styles etc): FE served from `$instance_static/frontends/fe/dist` # Bug description & reproduction steps <!-- Type out here how to reproduce the bug, what goes wrong and what should go right --> <!-- Screenshots and videos help a lot ;) any observations might also help --> <!-- Also mention if there any errors in browser's console if relevant --> Appearance settings tab crashes almost immediately when custom FE is served by BE. Running FE in dev mode with `yarn dev` and proxied to the local BE instance works without issues. Steps to reproduce: 1. Configure BE to serve a different primary frontend with `config :pleroma, :frontends, primary: %{"name" => "fe", "ref" => "dist"}` 2. Build a prod version of the FE with `yarn build` 3. Copy `dist` folder to `$PLEROMA_BE/instance/static/frontends/fe` 4. Start BE and go to `localhost:4000` 5. Open settings and switch to the appearance tab 6. The tab disappears almost immediately Last known good commit: 898881bac1676a7dcee54b1fdcbb32bbf47f2b1c Console output in Chromium devtools: ![devtools console](/attachments/5f6d53cd-5adb-47c6-8723-6e7f6466c7d6) # Bug seriousness <!-- Everything is optional and free-form --> * How annoying it is: Minor * How often does it happen: Every time * How many people does it affect: Not many
Owner

seems that something with your theme is wrong, does it happen in incognito mode?

seems that something with your theme is wrong, does it happen in incognito mode?
Author
Member

It does happen in incognito mode, as I've found an unmodified pleroma-dark.json (not there by default) theme file in the /instance/static/static/themes/ folder.

I think loading themes from BE is broken in some ways. Changing the colors in the theme file changes them appropriately in the FE, but the Appearance tab just crashes whenever there's a styles.json or styles.custom.json file in the /instance/static/static/themes/ folder.

It does happen in incognito mode, as I've found an unmodified `pleroma-dark.json` (not there by default) theme file in the `/instance/static/static/themes/` folder. I think loading themes from BE is broken in some ways. Changing the colors in the theme file changes them appropriately in the FE, but the Appearance tab just crashes whenever there's a `styles.json` or `styles.custom.json` file in the `/instance/static/static/themes/` folder.
Owner

given the error, it's most likely styles.json or styles.custom.json references theme that doesn't exist or malformed

given the error, it's most likely styles.json or styles.custom.json references theme that doesn't exist or malformed
Author
Member

Yes and no, copying the default styles.json from /priv/static/static in the BE directory works mostly fine, if and only if you remove the entries for mammal and paper. It does not matter that the rest of the references to the themes do not exist. Same with styles.custom.json.

The only difference I've noticed between styles.json and styles.custom.json is that when I use styles.json, the V2 themes don't show up in the theme switcher.

Anyway, here are some testing styles* files I created with their respective results in the csv file, if you want to play with them.

styles-testing.zip

Yes and no, copying the default `styles.json` from `/priv/static/static` in the BE directory works mostly fine, if and only if you remove the entries for mammal and paper. It does not matter that the rest of the references to the themes do not exist. Same with `styles.custom.json`. The only difference I've noticed between styles.json and styles.custom.json is that when I use styles.json, the V2 themes don't show up in the theme switcher. Anyway, here are some testing styles* files I created with their respective results in the csv file, if you want to play with them. [styles-testing.zip](/attachments/39ccbb56-c722-49e7-bd4c-ca94e7e80fb8)
Owner

styles.json is "builtin" and should work fine unless modified, styles.custom.json is what you should be using, but I'm not sure if it works if placed priv/static/static or only in instance/static/frontends/<your_frontend>/<your_frontend_version>/static

styles.json is "builtin" and should work fine unless modified, styles.custom.json is what you should be using, but I'm not sure if it works if placed `priv/static/static` or only in `instance/static/frontends/<your_frontend>/<your_frontend_version>/static`
Owner

I'll make the system more robust and add proper logging for easier debugging

I'll make the system more robust and add proper logging for easier debugging
Owner

ok one thing for sure - you should remove the "array" themes from styles.json those go into palettes now.

ok one thing for sure - you should remove the "array" themes from styles.json those go into palettes now.
Owner

i.e.
remove the

  "pleroma-amoled": [ "Pleroma Dark AMOLED", "#000000", "#111111", "#b0b0b1", "#d8a070", "#aa0000", "#0fa00f", "#0095ff", "#d59500"],
  "classic-dark": [ "Classic Dark", "#161c20", "#282e32", "#b9b9b9", "#baaa9c", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
  "bird": [ "Bird", "#f8fafd", "#e6ecf0", "#14171a", "#0084b8", "#e0245e", "#17bf63", "#1b95e0", "#fab81e"],
  "ir-black": [ "Ir Black", "#000000", "#242422", "#b5b3aa", "#ff6c60", "#FF6C60", "#A8FF60", "#96CBFE", "#FFFFB6" ],
  "monokai": [ "Monokai", "#272822", "#383830", "#f8f8f2", "#f92672", "#F92672", "#a6e22e", "#66d9ef", "#f4bf75" ],

and if you want, add them to static/palettes/index.json

i.e. remove the ``` "pleroma-amoled": [ "Pleroma Dark AMOLED", "#000000", "#111111", "#b0b0b1", "#d8a070", "#aa0000", "#0fa00f", "#0095ff", "#d59500"], "classic-dark": [ "Classic Dark", "#161c20", "#282e32", "#b9b9b9", "#baaa9c", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ], "bird": [ "Bird", "#f8fafd", "#e6ecf0", "#14171a", "#0084b8", "#e0245e", "#17bf63", "#1b95e0", "#fab81e"], "ir-black": [ "Ir Black", "#000000", "#242422", "#b5b3aa", "#ff6c60", "#FF6C60", "#A8FF60", "#96CBFE", "#FFFFB6" ], "monokai": [ "Monokai", "#272822", "#383830", "#f8f8f2", "#f92672", "#F92672", "#a6e22e", "#66d9ef", "#f4bf75" ], ``` and if you want, add them to `static/palettes/index.json`
Sign in to join this conversation.
No milestone
No project
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
pleroma/pleroma-fe#1349
No description provided.