black7375 / black7375/Firefox-UI-Fix

Firefox 152 breakage (active tabs + blank Private Tabs)

Open
#1,176 4 comments 3 reactions 0 assignees View on GitHub
Issue::Bug
Dominant language
SCSS
Stars
5.9k
Forks
202
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug

As of updating to Firefox v152 today, there seems to be much more breakage than usual when using the Photon theme:

- Wrong background colour on private tabs (probably due to upstream breakage, but I find this change quite jarring when opening a new private window/tab).
- Incorrect active tab colour
- Other small bugs that have built up over the ~2 months this project has been unmaintained for (I don't care as much about these)

### Expected behavior

The Photon theme applies correctly.

### Screenshots

LibreWolf v152.0-1, open to a new Private Tab, showing both issues:

Image

LibreWolf v147.0.4-1, open to the same new Private Tab. Both issues aren't present:

Image

(ignore the pixel density differences, the second screenshot was taken on a much older and less-used laptop)

(also, does GitHub round the corners of uploaded images now?!)

### OS

Windows 10

### OS - Others

_No response_

### Firefox Version

LibreWolf v152.0-1

### Distribution

- [ ] [Original Lepton](https://github.com/black7375/Firefox-UI-Fix)
- [x] [Lepton's photon style](https://github.com/black7375/Firefox-UI-Fix/tree/photon-style)
- [ ] [Lepton's proton style](https://github.com/black7375/Firefox-UI-Fix/tree/proton-style)

### Theme

- [ ] Light
- [x] Dark
- [ ] Alpenglow (System: Light)
- [ ] Alpenglow (System: Dark)
- [ ] System Default
- [x] Others: (e.g. [Photon Colors](https://addons.mozilla.org/en-US/firefox/addon/photon-colors/), [Google Chrome Dark](https://addons.mozilla.org/en-US/firefox/addon/google-chrome-dark/), [Fairytale Of Nature](https://addons.mozilla.org/en-US/firefox/addon/fairytale-of-nature/))

### Theme - More Info

[Dark Magic](https://addons.mozilla.org/en-US/firefox/addon/nicothin-dark-magic/) theme.

### `user.js` setup

user.js setup

```javascript
// NOTE: (most of) these settings aren't included with Lepton directly - they're personal preferences (or reverting LibreWolf changes), but thought I'd include them for completeness
user_pref("apz.overscroll.enabled", false);
user_pref("browser.gesture.swipe.left", "cmd_scrollLeft");
user_pref("browser.gesture.swipe.right", "cmd_scrollRight");
user_pref("browser.tabs.groups.enabled", false);
user_pref("browser.tabs.hoverPreview.enabled", false);
user_pref("browser.urlbar.trimURLs", false);
user_pref("signon.rememberSignons", true);
user_pref("svg.context-properties.content.enabled", true);
user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);

// The actual Lepton user.js content
user_pref("browser.compactmode.show", true);
user_pref("browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar", false);
user_pref("layout.css.has-selector.enabled", true);
user_pref("userChrome.tab.connect_to_window", true);
user_pref("userChrome.tab.color_like_toolbar", true);
user_pref("userChrome.tab.lepton_like_padding", false);
user_pref("userChrome.tab.photon_like_padding", true);
user_pref("userChrome.tab.dynamic_separator", false);
user_pref("userChrome.tab.static_separator", true);
user_pref("userChrome.tab.static_separator.selected_accent", false);
user_pref("userChrome.tab.bar_separator", false);
user_pref("userChrome.tab.newtab_button_like_tab", false);
user_pref("userChrome.tab.newtab_button_smaller", true);
user_pref("userChrome.tab.newtab_button_proton", false);
user_pref("userChrome.icon.panel_full", false);
user_pref("userChrome.icon.panel_photon", true);
user_pref("userChrome.tab.box_shadow", false);
user_pref("userChrome.tab.bottom_rounded_corner", false);
user_pref("userChrome.tab.photon_like_contextline", true);
user_pref("userChrome.rounding.square_tab", true);
user_pref("userChrome.padding.first_tab", true);
user_pref("userChrome.padding.first_tab.always", true);
user_pref("userChrome.padding.drag_space", true);
user_pref("userChrome.padding.drag_space.maximized", true);
user_pref("userChrome.compatibility.theme", true);
user_pref("userChrome.compatibility.os", true);
user_pref("userChrome.theme.built_in_contrast", true);
user_pref("userChrome.theme.system_default", true);
user_pref("userChrome.theme.proton_color", true);
user_pref("userChrome.theme.proton_chrome", true);
user_pref("userChrome.theme.fully_color", true);
user_pref("userChrome.theme.fully_dark", true);
user_pref("userChrome.decoration.cursor", true);
user_pref("userChrome.decoration.field_border", true);
user_pref("userChrome.decoration.download_panel", true);
user_pref("userChrome.decoration.animate", true);
user_pref("userChrome.padding.tabbar_width", true);
user_pref("userChrome.padding.tabbar_height", true);
user_pref("userChrome.padding.toolbar_button", true);
user_pref("userChrome.padding.navbar_width", true);
user_pref("userChrome.padding.urlbar", true);
user_pref("userChrome.padding.bookmarkbar", true);
user_pref("userChrome.padding.infobar", true);
user_pref("userChrome.padding.menu", true);
user_pref("userChrome.padding.bookmark_menu", true);
user_pref("userChrome.padding.global_menubar", true);
user_pref("userChrome.padding.panel", true);
user_pref("userChrome.padding.popup_panel", true);
user_pref("userChrome.tab.multi_selected", true);
user_pref("userChrome.tab.unloaded", true);
user_pref("userChrome.tab.letters_cleary", true);
user_pref("userChrome.tab.close_button_at_hover", true);
user_pref("userChrome.tab.sound_hide_label", true);
user_pref("userChrome.tab.sound_with_favicons", true);
user_pref("userChrome.tab.pip", true);
user_pref("userChrome.tab.container", true);
user_pref("userChrome.tab.crashed", true);
user_pref("userChrome.fullscreen.overlap", true);
user_pref("userChrome.fullscreen.show_bookmarkbar", true);
user_pref("userChrome.icon.library", true);
user_pref("userChrome.icon.panel", true);
user_pref("userChrome.icon.menu", true);
user_pref("userChrome.icon.context_menu", true);
user_pref("userChrome.icon.global_menu", true);
user_pref("userChrome.icon.global_menubar", true);
user_pref("userChrome.icon.1-25px_stroke", true);
user_pref("userContent.player.ui", true);
user_pref("userContent.player.icon", true);
user_pref("userContent.player.noaudio", true);
user_pref("userContent.player.size", true);
user_pref("userContent.player.click_to_play", true);
user_pref("userContent.player.animate", true);
user_pref("userContent.newTab.full_icon", true);
user_pref("userContent.newTab.animate", true);
user_pref("userContent.newTab.pocket_to_last", true);
user_pref("userContent.newTab.searchbar", true);
user_pref("userContent.page.field_border", true);
user_pref("userContent.page.illustration", true);
user_pref("userContent.page.proton_color", true);
user_pref("userContent.page.dark_mode", true);
user_pref("userContent.page.proton", true);
```

### Additional context

Very likely caused by upstream breakage.

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the Photon-style theme on LibreWolf/Firefox 152 with the reported userChrome settings, focusing on a blank Private Tab and the active tab. Compare the result with Firefox 147 and the supplied screenshots, then trace the affected theme styles. Done means private-tab backgrounds and active-tab colours match the expected Photon appearance without regressing the older version.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, scss
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Needs clarification
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.