Window controls not properly displayed

[Kaedriz]

I would like to start with thank you for theme, first impression was great, I disliked TreeStyleTab for its clunkiest and hack-ines. But I noticed some problems.

As you can see, controls are not properly displayed. I would like them to at least align in the center, and maybe moved slightly to the left.

While my initial approach of adding width to #titlebar-buttonbox worked, it posed some difficulties. Ghost controls are seen in the background, unsure where to find them in CSS.

Platform: Linux Manjaro 64-bit DE: Plasma 5

Will try if this is the same without Ultima later.

And I would like to add that most of the themes in Firefox break controls, they are too large to toolbox.

And another slightly smaller issue I have, no close tab button on tabs. Unsure if this is some option, as in some of your screen you have them, then on some don't.

Thanks

[soulhotel]

In theme-return-window-controls.css line 28, change top 2px to perhaps 12px, Or here I just made a replacement file for linux users, replace yours with this.

I am unable to test on linux, but I know of another user of linux and this worked for them. I'll see if I can get a VM running and test when I have time.

For the close buttons, they had to be removed when i added the tab collapsing and autohiding features, they would repeatedly break the scrollbox regardless of hover events. You can remove display: none in position-verttab.css line 197, line 202. But this will only work if you do not use the autohide features. For now, you can close them with either middle clicking, or right click -> close.

[Kaedriz]

Yes, it appears to be working now, thanks, ghost controls were caused by there being another, cloned windows controls, dunno what purpose they have.

Now only minor annoyances are left.

One is windows controls again. Their focus appear to be somehow broken, dunno if this is something KDE related, and can be fixed with CSS. I will investigate further tomorrow. Here you can see focus lose by blur on desktop wallpaper.

Another one there being this thin line, control bar for changing the size of side panel. If you change side to left, it is still there, but on the other side. Would it be possible for it to be hidden?

Thanks for fast reply!

[soulhotel]

Np, yeah these definitely seem to be linux related even the line near the side panel. Im gonna download manjaro for VM soon and see whats going on.

[Kaedriz]

Found the fix for second issue, .sidebar-splitter is the class targeting this element. Hiding this is not recommended, but applying transparent background doesn't seem to break resizing.

[soulhotel]

really? thats how i had it before 'no background color' but kept the width. What did you change?

[Kaedriz]

.sidebar-splitter {
  background: transparent;
}

The issue was caused by browser CSS

.sidebar-splitter {
  appearance: none;
  width: 6px;
  background-color: -moz-dialog;
  border: 1px ThreeDShadow;
  border-style: none solid;
}

Particularly that background-color: -moz-dialog;

[soulhotel]

• How were you able to trigger the systems dark mode. This is my first time touching linux, wouldnt it be the global themes, or color?

[Kaedriz]

The closest that comes to my mind is Colors tab, other than that maybe just dark themes. I personally use Arc Dark.

[soulhotel]

Yeah i figured it out, SO..

I was able to recreate your issues. Fixing the sidebar splitter transparency ✅ Fixing the title bar buttons, positions, also the spacing between the buttons and the navigation bar ✅ I really cant figure out whats going on with the inactive window on the titlebar buttons... ✖️

In the browser tool theres no indication of changes, or even hover events when it happens its so strange... Maybe in the future ill figure this one out, but I'm leaning towards this being a linux theme behavior. Perhaps theres a setting that effects gnome/gtk windows, idk.

I'll update the main release soon, for now Ive updated the replacement file with my edits for linux users.

[Kaedriz]

Ye, I though so, Firefox is GTK(3?) App, that, in my case, runs in KDE, through client side decorators, so there is a lot to be investigated.

For now, I am polishing audio indicator in tabs, would you be interested in taking this to optional features?

Closing this for now, as this is probably a deeper issue, probably even KDE/GTK one.

[Kaedriz]

Weird enough, this bug doesn't occur in default Firefox, so theme must be doing something odd to windows controls

[soulhotel]

This is for manjaro right?

[soulhotel]

kde?

[Kaedriz]

Yes, but it's probably not limited to single distribution. Maybe only possible DE, as these use different decorators.

[soulhotel]

I still have the vm for it so ill figure it out in a bit.

[Kaedriz]

This hack don't cause this kind of issue for me, you should start with this.

[Kaedriz]

Seems, like there still is this issues with window controls + themes combo, especially light themes. Tested on main.

And hack mentioned before has this issue too, unfortunately.

2024-04-15 19-55-13.mkv.webm

[soulhotel]

yeah i know its really annoying, i tried opacity properties on the buttons, to the buttonbox, to the bars and up, then i tried removing my already established navbar opacity override but it was only targetting windows anyway, tried seeing if i could overide the background colors and **strokes, the behavior is so odd. I think using linux themes may just have to be the fix.

also, the grey background around the tabs, i fixed it a while after uploading 1.7 you should grab that.

[soulhotel]

I actually havent tried replacing the icons with my own, i might just see how that looks

[Kaedriz]

That's hardly a fix, I think. But how does this look on Windows? I mean, why Mozilla even implanted something like this. I would understand if they tried to colorize these buttons, but no, they just plain give you round big buttons.

But weirdly enough, this only happen on light-themes as seen in previous video. Firefox automatically changes color preference on changing toolbar color, from my understanding, but this is just probably correlation. But nothing happens out of the ordinary in CSS, from what I'm seeing.

Here's video of changing Colors in KDE, as seen, windows controls change, but they revert. https://github.com/soulhotel/FF-ULTIMA/assets/44523955/bac9a52a-e358-473f-aad2-a65b5cdd851e

[soulhotel]

windows fine in dark/light + strokes matching addon themes

[Kaedriz]

Ah, so they implemented stroking on Windows, but then on Linux, they just gave half-assed solution instead that just breaks more things, wish they just leave it as it was by default.

[soulhotel]

Yeah, I also just found out that you arent allowed to edit the moz-default appearance property also. It just wont allow it, so no custom icons.

[soulhotel]

this doesnt make sense i should be able to, but im not finding anything that cancels these properties out, they just appear greyed out

[Kaedriz]

Isn't this property deprecated in favor of plain appearance? As you are already using -moz- prefix anyway on images. But nonetheless, this method won't let you put custom images. Your only solution would be to maybe put svg background on .toolbarbutton-icon element, and control its stroke through color property, I think. Would need to tests how much that is doable. Users could potentially also give their svgs to replace default.

EDIT: Ok, background svg to support stroke changing, but only if imported inline, so that's closes external svgs. Example

background-image: url('data:image/svg+xml;utf8, <svg class="ThemeTogglerIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="yellow" stroke="yellow" d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z" /></svg>');

You would just use currentColor there to inherit color from parent element.

[soulhotel]

yes ive applied moz-window-buttons to appearance as well, it does absolutely nothing. Did it for the actual image, and every other combination. In this instance im just trying to make the close button use the minimize.svg.

[soulhotel]

im probably doing it wrong though, appearance is responsive, i can set it to none to remove the buttons. So im missing something here

[soulhotel]

[Kaedriz]

It's working in my case, though. But appear as wrong, dunno why.

[soulhotel]

alright so '-moz-window-button-close' is used by the application builder to style the buttons in this case i guess it will fall on linux to choose what does will look like, while also limiting customization like what we are trying to do, im guessing its just really optimized when it comes to windows

But im making progress, Im turning the title bar buttons into toolbar buttons by copying over the styling of toolbar buttons onto them.

[soulhotel]

got it, almost done

[Kaedriz]

What puzzles me most, is that, although I set titlebar-button titlebar-restore element to display: none and confirm this is working by viewing Layout, or just gray color in Inspector, even flex parent indicates smaller width, as this element disappeared, but then, the icon for this button remains, so either etyling for this element lies elsewhere, or just is hard-coded by Mozilla.

[Kaedriz]

Yes, like I though, why is that, I have no idea.

[soulhotel]

definitely hard coded, even the global icons on linux side are unusable if i do what im currently doing.

So im done, i just need to fix the spacing, heres the code i used, it can be minimized obviously, i just wanted to get it working quickly:

code

``` .titlebar-button, .titlebar-close, .titlebar-min, .titlebar-max, .titlebar-restore { appearance: none !important; margin: 0 !important; margin-top: 0px !important; margin-top: 0px !important; padding: 0 var(--toolbarbutton-outer-padding) !important; justify-content: center !important; color: inherit !important; -moz-context-properties: fill, fill-opacity !important; fill: var(--toolbarbutton-icon-fill) !important; } .titlebar-button.titlebar-close .toolbarbutton-icon, .titlebar-button.titlebar-min .toolbarbutton-icon, .titlebar-button.titlebar-max .toolbarbutton-icon, .titlebar-button.titlebar-restore .toolbarbutton-icon { /*width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);*/ /*height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);*/ /*padding: var(--toolbarbutton-inner-padding);*/ border-radius: var(--toolbarbutton-border-radius) !important; margin-inline-end: 0 !important; list-style-image: url("chrome://global/skin/icons/arrow-down.svg"); opacity: 1 !important; } .titlebar-button.titlebar-close .toolbarbutton-icon{ list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important; } .titlebar-button.titlebar-min .toolbarbutton-icon{ list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important; } .titlebar-button.titlebar-max .toolbarbutton-icon{ list-style-image: url("chrome://global/skin/icons/arrow-up.svg") !important; } .titlebar-button.titlebar-restore .toolbarbutton-icon{ list-style-image: url("chrome://global/skin/icons/arrow-up.svg") !important; } ```

[Kaedriz]

From slight read at https://bugzilla.mozilla.org/show_bug.cgi?id=1718846

Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/0d5589e4ee65 Draw our own titlebar buttons when using lightweight themes.

Would explain why this only breaks at lightweight themes, but still a bizarre choice by Mozilla.

[soulhotel]

Np, I got that too, so this works for light dark and themed, i wont get to update the release now i have to pick someone up but for now here is the code.

Sorry for lag, recording the vm :/

I overwrite the whole KDE section in override-linux.css line 70 and on, with this:

``` /*------------------------------------------------------------------------*/ /*--KDE--*/ @media (-moz-bool-pref: "ultima.OS.kde") { @media (-moz-platform: linux), (-moz-os-version: linux) { :root[tabsintitlebar] .titlebar-buttonbox { top: 5px !important; right: -1px !important; } .titlebar-button, .titlebar-button:-moz-lwtheme { appearance: none !important; margin: 0 !important; margin-top: 0px !important; padding: 4px 4px !important; justify-content: center !important; color: inherit !important; -moz-context-properties: fill, fill-opacity !important; fill: var(--toolbarbutton-icon-fill) !important; stroke: var(--toolbarbutton-icon-fill) !important; border-radius: var(--uc-button-border-radius); } .titlebar-button .toolbarbutton-icon, .titlebar-button:-moz-lwtheme .toolbarbutton-icon, .titlebar-button:-moz-lwtheme .toolbarbutton-icon:-moz-lwtheme { border-radius: var(--toolbarbutton-border-radius) !important; list-style-image: url("chrome://global/skin/icons/arrow-down.svg"); opacity: 1 !important; padding: 4px !important; } /*--icons override, default icons dont override when there is window inactivity--*/ .titlebar-button.titlebar-close .toolbarbutton-icon{ list-style-image: url("chrome://global/skin/icons/close.svg") !important; } .titlebar-button.titlebar-min .toolbarbutton-icon{ list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important; } .titlebar-button.titlebar-max .toolbarbutton-icon{ list-style-image: url("chrome://global/skin/icons/arrow-up.svg") !important; } .titlebar-button.titlebar-restore .toolbarbutton-icon{ list-style-image: url("chrome://global/skin/icons/arrow-up.svg") !important; } /*--override background changes when hovered--*/ .titlebar-button:-moz-lwtheme:hover { background-color: var(--uc-selected) !important;; border-radius: var(--uc-button-border-radius); } /*--override padding--*/ .titlebar-button > .toolbarbutton-icon:-moz-lwtheme { padding: 4px 4px !important; -moz-context-properties: revert !important; stroke: currentColor; border-radius: var(--uc-button-border-radius); } } /*--<--end linux media query--*/ } /*--<--end OS preference query--*/ ``` then in theme-return-window-controls.css line 45-50, i had to wrap a line of code in a windows only query ``` /* 40px button, match nav bar */ @media (-moz-platform: windows) .titlebar-buttonbox .titlebar-button { padding: 11px 11px !important; } } ```

[soulhotel]

ive tested everything, organized and added an index at the top of the override-linux file, 1.7.1 is live with the changes.

[Kaedriz]

I've found a workaround, but that doesn't fix much. browser.theme.toolbar-theme in about:config change to 0 and it will revert to system controls. But then another problem arises, explaining why Mozilla choose this solution. When you have Dark Mode selected, most of your controls text will be bright, that works fine on dark backgrounds, but when you have a bright background too, it will become almost invisible. So your solution could potentially, somewhat fix it, but should probably be used in this use case I explained above, as a workaround. We should still prioritize native controls whenever possible, to accommodate the most DEs.

BTW. You didn't upload 1.7.1 to git, I think.

[soulhotel]

Yeah I tried with browser.theme.... theres also widget.gtk.non-native-titlebar-buttons.enabled, tried back in 1.6.5 or 1.6.6 when the issue was pointed it but they still had the obscure behaviors as before

Maybe the git takes a while, i know the latest release is pointing to this (v) i tested it https://github.com/soulhotel/FF-ULTIMA/releases/download/1.7.1/ffultima1.7.1.zip

And surprisingly the gnome DE is fine even with the KDE preference, (note: this is just popos in vm) maximize button is disabled by default, but most people enable that as a 'first things to do' kind of thing.

Maybe the git takes a while , but i tested the latest release link is pointing to here https://github.com/soulhotel/FF-ULTIMA/releases/download/1.7.1/ffultima1.7.1.zip

[soulhotel]

[Kaedriz]

I know of zip file, just that main branch is from 2 days ago (excluding change to .md), and newest links to this state: https://github.com/soulhotel/FF-ULTIMA/tree/latest Even if you browse 1.7.1, you will see last commit 2 days ago

Well, just git push files to main?

[soulhotel]

Sorry dude, i just released the update without updating the source.. My bad. Its up now.

[Kaedriz]

Well, nothing happen so no worries. You are dragging files in release by hand? Doesn't git automatically zip branch you have selected? Dunno, I have never released something.

[soulhotel]

I havent set git up actually (for windows), I was planning on switching over to linux this past two weeks, even have fedora and popos triple booted with 2 separate ssds, but I had to go back to windows, so I off-put git. It was straight forward to install on linux, gnome already has it set up, but setting it up on windows was a pain.

So yeah, im just drag dropping as I go when on windows.

[Kaedriz]

What I mean is, you don't to zip files manually and adding them to release, you could probably just push files to branch, and then that branch gets packed when selected for release. Additional files are mostly for binaries and other stuff, that's unrelated to version control.

That's the beauty of Git, and other things, like actual timeshift.

I'm myself dual booting, saved windows 11 for gaming, but then some of the game I've played ran mostly fine on steam proton/Wine, so didn't touch it maybe 1/2 months. And if you are having problems setting Secure Boot on dual booting, just ditch grub and set up reFINd, and you can still use secure boot.

[soulhotel]

Yeah I get that but, the primary reason why ive been zipping the ffultima1.7.1zip is because i noticed the source code (on the release page under it) wouldnt update it self.

So youre saying that the source code will update when branches are pulled in?

[Kaedriz]

Well, maybe you pushed release prior to git push, so older commit was tagged, dunno. In the future, try to merge to main first, then release and see what happens.

Oh and did you manually create "latest" tag? As it is 4 month old

[soulhotel]

The probably wasnt really that, it was only paintnet, musicbee, and also waiting for cosmic, even have my old nvidia card was doing well on it.

and I actually have secure boot on without booting issues, I installed both Fedora and Pop on individual ssds without need for a livekey, simply unplugged everything drive during installs.

Well, maybe you pushed release prior to git push, so older commit was tagged, dunno. In the future, try to merge to main first, then release and see what happens.

Yeah, I will

[soulhotel]

No i didnt make a latest tag, I wasnt even on github 4 months. I just mark the new releases as latest when they are uploaded. Woah I see what youre talking about though.

[Kaedriz]

Oh, I must have misread https://github.com/soulhotel/FF-ULTIMA/releases/tag/latest Will probably need to delete it, as it can be confusing. 'Latest' release is another thing, managed by GitHub.

Well, on more popular distros they probably release keys themselves, but on arch, not a chance.