Improving theme styles

[K4sum1]

This are some ideas for improving the browser theme.

1: Have TabsToolbar item color match Active/Inactive Title Bar font color in classic theme. This would make it readable or at the very least match in all scenarios with classic theme, instead of the current always white it is.

2: Improve 8 classic theme ~~and Aero Glass compatibility. Classic theme has no buttons and looks off in other ways. Aero Glass seems mostly fine but has no fog and therefore text can be hard to read. Aero Glass is fixed now in 125.0.2-2. I just applied the code to 8 and it just doesn't seem to show over the 8 colored style bar. I have no idea why, but that's convenient.~~ Fixed a while back, forgot to mark here.

~~3: Replace fog with title bar/caption text glow? This would be a more faithful Aero like design, but I'm not sure if I would like how it looks. I would need to realize this before I know.~~ Yeah this probably wouldn't look good.

~~4: Red tint on titlebar in private mode? I had this in a very old userChrome.css I made for Firefox 68 and the idea seems cool. Would make it even easier to tell private mode apart from normal mode.~~ Done

5: Extend glow notification for opening a tab outside of the current bar area to whole toolbar. This is a bit of a usability improvement since I often have to double check I opened everything, because often I can just miss the faint top right blue glow when I'm opening stuff from the middle-bottom left. Having the whole caption bar glow like this would help a lot.

6: Tint failed downloads yellow, and canceled downloads red. This would make it easier to identify a failed or canceled download in a big list. The current white icons can kinda blend together and I have to double check stuff to make sure I don't miss anything.

[i486]

I'm testing r3dfox for the first time and I'm unsure if it has already been reported.

Using: Release v125.0rc2

The bookmark folder dropdown appears as follows:

Theme: Beautiful New Opera Dark from Mozilla Firefox's add-on store.

[i486]

How it looks in Firefox 115 ESR

[i486]

Tab bar has translucency. Any quick fix to disable this behavior?

Firefox 115 ESR

[K4sum1]

The bookmark folder dropdown appears as follows:

It's intentional.

https://github.com/Eclipse-Community/r3dfox/commit/9597d9dff06960bf18fe5004854e3d4d35f38a20

The ideal way would be to do it only if non native controls are enabled, but I haven't figured out how. Also need to get rid of the border.

Tab bar has translucency. Any quick fix to disable this behavior?

I have an idea, I'll try it for next release.

[i486]

It's intentional.

9597d9d

The ideal way would be to do it only if non native controls are enabled, but I haven't figured out how. Also need to get rid of the border.

Upon reviewing my initial post, I realize there might have been some lack of clarity. I was just referring to the color of the bookmark dropdown menu. Currently, it's appearing white on the dark theme, whereas I expected it to match the dark theme's color scheme. Could you confirm if this was intentional?

r3dfox (same dark theme)

Firefox 115 ESR (same dark theme)

[K4sum1]

Yes, the idea is to make it take after the system theme more. I should make it take after disabling the non-native theme, but I'm not sure how.

[K4sum1]

So I redid the implementation, it will only be like that with native menus. However I don't think there's a way to disable native menus on 7/8. Maybe someone could pr it.

[K4sum1]

So I didn't fix the tab bar translucency, but I think I know how.

I make my latest commit only apply to non-lwtheme, and then force it transparent in light dark overrides.

[garry-ut99]

The bookmark folder dropdown appears as follows:

It's intentional.

9597d9d

The ideal way would be to do it only if non native controls are enabled, but I haven't figured out how. Also need to get rid of the border.

I prefer the previous look of bookmark menu, because the classic looks like shitty grey toilet paper, how to restore the previous look, is it possible via userChrome.css, I've tried to copy&paste the removed lines (marked as red) from the commit to userChrome.css and restarted browser but no effect, despite I have toolkit.legacyUserProfileCustomizations.stylesheets already set to true.

[K4sum1]

You might need to add some !important stuffs, but it should work.

[garry-ut99]

Ok, !important has worked.

[i486]

I was about to report this

There seems to be a bug in the private window tab bar. It looks like Redfox's red background from private browsing is overlaid on the current theme's background in the tab bar.

Normal window

Private window

Then I read the following, which helped me realize it's intentional, prompting me to read more and write the comment below (ChatGPT'd due to my English; sorry for any cringe, but it helps convey my thoughts effectively).

4: Red tint on titlebar in private mode? I had this in a very old userChrome.css I made for Firefox 68 and the idea seems cool. Would make it even easier to tell private mode apart from normal mode. Done

As someone who is not a developer and also not well-versed in English. I use translation tools and AI assistants to understand and write online posts. In my initial exploration of R3dfox, due to my limited programming knowledge, much of the UI and developer jargon remained beyond my understanding, so I often skim over them as you can see above when I nearly reported a "bug" on private window tint.

Anyways, before downloading R3dfox, I read several of your posts mentioning your intention to preserve a largely stock Firefox experience, with Windows 7 support. This led me to assume (perhaps prematurely) that most of the discussions in the Issues section and the some discrepancies I've encountered in R3dfox were primarily due to ongoing efforts to reinstate or fix issues removed or broken by Firefox onward 115+ due to them removing Windows 7 support. While this undoubtedly applies in many instances in r3dfox, further reading in issues section helped me realize that significant portion of the posts to be related to your own enhancements and modifications, which I completely respect given the nature of a personal fork.

But still, it would be highly appreciated if there were options available for those seeking a stock experience. As what some may perceive as an enhancement, others may view as a drawback.

For example, garry-ut99 describes the bookmark folder menu as "shitty grey toilet paper," I find it a nice improvement over the appearance of Firefox 115's bookmark menu, especially now with the removal of odd borders.

Similarly, some might appreciate the red tint on the tab bar as a clear indicator of private browsing. I initially mistook it for a hardware issue. In certain theme, it looks just like the initial symptom of a how my GPU died.

Within the issue reports, someone suggested using VxKex for those that want stock Firefox. While an option, VxKex is unstable with the latest Firefox; it crashes after a brief period for me. This effectively renders R3dfox the sole viable choice for Windows 7 users who want to use new Firefox. Also there will be many people like me who like certain aspects of r3dfox and would prefer to use r3dfox over original Firefox.

Therefore, I propose the implementation of a configuration system utilizing the about:config (or something easier) functionality. This would allow users to restore r3dfox specific customization through a series of configurable options. Examples:

r3dfox.customization.bookmarkfoldermenu: true (classic, default) / false (modern, original)
r3dfox.customization.titlebar.tintonprivatewindow: true (default) / false (original)

While the development effort required for such a system is uncertain for me, I firmly believe it would be a valuable addition, potentially reducing the volume of future reports within the issues section.

What do you think?

[K4sum1]

I figured out how to make it get controlled by the preference I wanted it to be. Enabling the non-native theme brings the stock styles back now.

Going to implement private bar stuff now.

[K4sum1]

Done. Will try to add GUI option now.

[K4sum1]

Coming in next release

[K4sum1]

Within the issue reports, someone suggested using VxKex for those that want stock Firefox. While an option, VxKex is unstable with the latest Firefox; it crashes after a brief period for me.

I thought about this. What if you add this to Firefox prefs.js and try again? user_pref("browser.taskbar.lists.legacyBackend", true);

[garry-ut99]

Within the issue reports, someone suggested using VxKex for those that want stock Firefox. While an option, VxKex is unstable with the latest Firefox; it crashes after a brief period for me.

Confirmed , looking at VxKex issue tracker, there are many problem reports:

• https://github.com/vxiiduu/VxKex/issues/198
• https://github.com/vxiiduu/VxKex/issues/184
• https://github.com/vxiiduu/VxKex/issues/155
• https://github.com/vxiiduu/VxKex/issues/140
• https://github.com/vxiiduu/VxKex/issues/103
• https://github.com/vxiiduu/VxKex/issues/85

[K4sum1]

Should mention, the options have come in 125.0.2-2.

[i486]

Coming in next release

Wow, I wasn't anticipating real options. I was simply hoping for new about:config configurations, allowing users who prefer stock Firefox to insert them themselves. This is great!

[i486]

So I didn't fix the tab bar translucency, but I think I know how.

I make my latest commit only apply to non-lwtheme, and then force it transparent in light dark overrides.

Tab bar translucency appears to be fixed. Really appreciated the great work!

[K4sum1]

Yeah, I figured I would add it as an option because I wanted to do that eventually anyways. It wasn't that bad.

[i486]

Within the issue reports, someone suggested using VxKex for those that want stock Firefox. While an option, VxKex is unstable with the latest Firefox; it crashes after a brief period for me.

I thought about this. What if you add this to Firefox prefs.js and try again? user_pref("browser.taskbar.lists.legacyBackend", true);

I believe this configuration resolved my issue of Firefox 125 crashing after a while. r3dfox is already my primary browser, so I won't be using Firefox since I encountered some brief freezing during a quick test and also find the caption looks ugly. Nevertheless, I'll keep it for testing consistency between same version of r3dfox and Firefox. Thanks!

[i486]

Bug: When we initiate the "Private Window," a split-second flash of the original Firefox's purple background is visible. This flash should be disabled to ensure the r3dfox's private red window opens seamlessly.

Feature idea: Regarding private windows, unchecking "Use r3dfox theme styles" should also include restoring the stock purple background in the Private window.

[K4sum1]

I fixed both, and it will come next release. (probably 125.0.3)

Waiting for official 125.0.3 to release.

[i486]

When using a non-native stock style, we have this messy separator line at the end of the dropdown menu of bookmark folders.

r3df0x 125.0.3 & 126.0-2

Here is how it's supposed to look: Firefox 126.0 (VxKex)

[K4sum1]

That's related to menu separators. That code is hell. It could probably be fixed, but I'm not doing it.

[i486]

Do you know if it's possible to fix this via userChrome.css? If so, I plan to ask around in the userChrome.css community (subreddit, forum, etc.). This would require some convincing on my part since they'd need to install r3dfox to investigate.

@garry-ut99 Do you still see the same buggy separator line in your bookmark dropdown menu? I'm interested because you're using userChrome.css to restore the stock look. https://github.com/Eclipse-Community/r3dfox/issues/36#issuecomment-2065387213

[K4sum1]

It is all CSS, so probably. I assume just override the changes here with !important. https://github.com/Eclipse-Community/r3dfox/commit/894dd2406158342b699ef9dd146877ab9bd0f370

[garry-ut99]

Do you still see the same buggy separator line in your bookmark dropdown menu?

Yes, but only in dark themes.

[i486]

I wasn't able to fix it by writing rules from the commit, as I lack CSS knowledge. However, things started to make a bit more sense after I discovered the Browser Toolbox and turned to ChatGPT for assistance.

Here's a fix for anyone interested in giving it a try.

@media (-moz-bool-pref: "widget.non-native-theme.enabled") {
  #PlacesToolbarItems toolbarbutton.bookmark-item menupopup.toolbar-menupopup menuseparator::before {
    border-top: 1px solid var(--panel-separator-color) !important;
    content: "" !important;
    display: block !important;
    flex: 1 !important;
  }

  #PlacesToolbarItems toolbarbutton.bookmark-item menupopup.toolbar-menupopup menuseparator {
    appearance: unset !important;
    -moz-default-appearance: unset !important;
    border-top: unset !important;
    border-bottom: unset !important;
  }

  #bookmarks-menu-button menupopup#BMB_bookmarksPopup menuseparator::before {
    border-top: 1px solid var(--panel-separator-color) !important;
    content: "" !important;
    display: block !important;
    flex: 1 !important;
  }

  #bookmarks-menu-button menupopup#BMB_bookmarksPopup menuseparator {
    appearance: unset !important;
    -moz-default-appearance: unset !important;
    border-top: unset !important;
    border-bottom: unset !important;
  }
}

The last two rules fix the Bookmark Menu if you've placed it on your toolbar.

[K4sum1]

I might add that to menu.css then since it seems conditional and fixes the issue.

[K4sum1]

Added for 126.0.1, releasing soon.

[K4sum1]

If anyone is still interested, I realized there already is a method to get the Windows 10 UI on r3dfox on any Windows version.

Go to about:config and set widget.ev-native-controls-patch.override-win-version to 10