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

[Kaedriz]

Well, it seems fine. Only nitpick would be no maximized button, but if it can't be done easily, then nvm.

But noticed some regression about vertical tab, there seems to be instantaneous widening of vertical tab slightly, then linear transition, I suspect it might be of text label suddenly appearing. You can look my old branch for comparison.

[Kaedriz]

On another topic, why are there 2 userChromes.csss ? The one in /theme folder seems redundant and not even working, as relative links point to nowhere.

[soulhotel]

On another topic, why are there 2 userChromes.csss ? The one in /theme folder seems redundant and not even working, as relative links point to nowhere.

Theyre just old duplicates, ive removed them.

Well, it seems fine. Only nitpick would be no maximized button, but if it can't be done easily, then nvm.

Its fine, like i said before, its easily enabled in tweak settings

But noticed some regression about vertical tab, there seems to be instantaneous widening of vertical tab slightly, then linear transition, I suspect it might be of text label suddenly appearing. You can look my old branch for comparison.

When i get the chance ill add an animation to the mini button bar labels, its the instant transfer from display none to visible, it basically interrupts the linear transition applied to default .tabbrowser-tab behavior.

[Kaedriz]

Its fine, like i said before, its easily enabled in tweak settings

I meant separate state to maximize button, when window is maximized. In KDE it is empty square rotated 45 deg. In Gnome dunno.

[soulhotel]

Aww you mean the icons. So I just used the same arrow up icon for the restore-button, it can definitely be changed just need to find a good replacement. You can see all of them here: chrome://global/skin/icons/](chrome://global/skin/icons/

Also there is chrome://browser/skin/window-controls/ but im not sure what this link will produce on linux i cant check right now.

[Kaedriz]

If there is none, we can always use one locally imported.

[soulhotel]

I made some replacements while we were working on the buttons yesterday, although i would need to test if the svgs respond to fill properties properly first - since they were converted to svg with an online tool.
https://github.com/soulhotel/FF-ULTIMA/tree/main.update.branch/theme/icons/temporary%20svg

[soulhotel]

alright they fill correctly, ill add it to the linux files eventually.

[soulhotel]

there is an issue though, i cant get the svg to respond to variables within firefox, only basic inversion for light/dark mode

[Kaedriz]

Lookup fill=currentColor in svg, then try to style it through color or fill property in CSS maybe.

[soulhotel]

yes i have that already thats what works with light and dark, it wont respond to themes however

[soulhotel]

[soulhotel]

Im going to upload the files in a bit

[soulhotel]

Alright 3 files are added to the main.update.branch

FF-ULTIMA/theme/override-linux.css

Lines 115 to 124 in 96eff4e

	.titlebar-button.titlebar-restore .toolbarbutton-icon{
	list-style-image: url("icons/lin-restore-l.svg") !important;
	margin-top: -1px !important;
	}
	/*--Or the autoscroll.svg from the chrome library - https://github.com/soulhotel/FF-ULTIMA/issues/8#issuecomment-2060263202--*/
	/*
	.titlebar-button.titlebar-restore .toolbarbutton-icon{
	list-style-image: url("chrome://global/skin/icons/autoscroll.svg") !important;
	}
	*/

override-linux.css (line 115--)
lin-restore-l.svg

[soulhotel]

Using the autoscroll.svg from the chrome library may also be viable.

[Kaedriz]

If you have proper svg in place with fill="currentColor" then this becomes possible.

Even hover works:

.titlebar-button.titlebar-min:hover .toolbarbutton-icon {
  fill: blue;
}

[soulhotel]

So it is my svg hmm, so where do you think i should source the svgs specifically for this case, ive been creating every icon i use previously

[Kaedriz]

Ok, found similar svgs, but would need to be modified heavily, as code is tailored in specific way
https://store.kde.org/p/1461072/
You can just download on the right and extract, there are svgs inside.
My only problem is they don't respond to fill argument.
And another is that on hover, old window controls are visible.

[Kaedriz]

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 22 22">
	<path fill="currentColor" d="m16.6569 8.9951-.7072-.7071L11 13.2377 6.0503 8.288l-.7072.7071L11 14.652Z"/>
</svg>

Here is the code for minimize.svg for example. It's only static, dunno about hover state. But it works using fill. Although it will need settings up width on element, or it will scale endlessly.
Reminder that to fill to work, you must also have -moz-context-properties: fill;, from what I understand.

[Kaedriz]

Okay most sensible solution, would be to op-in on this only when theme is in use, as fuckery happens only then.
In system theme it works mostly fine.

Just simple changing this will work fine, only missing are state changes, but these would work fine too, I presume.

.titlebar-min > .toolbarbutton-icon {
	background-image: url("icons/minimize.svg") !important;
}

[Kaedriz]

ok, for some reason currentColor doesnt work with fill, but context-fill works, dunno why.

Working svg:

<svg
	xmlns='http://www.w3.org/2000/svg'
	version='1.1'
	viewBox='0 0 22 22'
	fill='context-fill'>
	<path d='m16.6569 8.9951-.7072-.7071L11 13.2377 6.0503 8.288l-.7072.7071L11 14.652Z' />
</svg>

[soulhotel]

wait so just use what i already had, the solution is there ^ context-fill, it works!

[soulhotel]

with this, it wouldnt need any further modification with all 3 scenarios dark/light/themed, i added the contextfill to the svg and updated the main.update.branch. I could then just further improve the svg (the size isnt exactly 1:1 with the other titlebar buttons)

FF-ULTIMA/theme/override-linux.css

Lines 91 to 105 in 233a598

	/*--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("icons/lin-restore-l.svg") !important;
	margin-top: -1px !important;
	}

[Kaedriz]

Here are some svg for default KDE:
Minimize:

<svg
	xmlns='http://www.w3.org/2000/svg'
	version='1.1'
	viewBox='0 0 22 22'
	fill='context-fill'>
	<path d='m16.6569 8.9951-.7072-.7071L11 13.2377 6.0503 8.288l-.7072.7071L11 14.652Z' />
</svg>

Maximize would be the same just rotated.
Restore:

<svg
	xmlns='http://www.w3.org/2000/svg'
	version='1.1'
	viewBox='0 0 22 22'
	fill='context-fill'>
	<path d='m11 16.652 5.656-5.656L11 5.338l-5.656 5.658Zm0-1.414-4.242-4.242L11 6.752l4.242 4.244Z' />
</svg>

Close:

<svg
	xmlns='http://www.w3.org/2000/svg'
	version='1.1'
	viewBox='0 0 22 22'
	fill='currentColor'>
	<path d='M10.9902 2A9 9 0 0 0 2 11a9 9 0 0 0 9 9 9 9 0 0 0 9-9 9 9 0 0 0-9-9 9 9 0 0 0-.0098 0zm-3.703 4.58L11 10.293l3.7129-3.713.707.7071L11.707 11l3.713 3.7129-.7071.707L11 11.707 7.2871 15.42l-.707-.7071L10.293 11 6.58 7.2871Z' />
</svg>

Although close should probably be change to just be cross without background, as that would come from css:

<svg
	xmlns='http://www.w3.org/2000/svg'
	version='1.1'
	viewBox='0 0 22 22'
	fill='context-fill'>
	<path d='M7.2872 6.58 11 10.293l3.7129-3.713.707.7071L11.707 11l3.713 3.7129-.7071.707L11 11.707 7.2871 15.42l-.707-.7071L10.293 11 6.58 7.2871Z' />
</svg>

[Kaedriz]

Importing them locally also has the benefit of user potentially replacing these images with their own, as writing as many pref as windows decorators is not exactly efficient.
The only major difficulty would be asserting that these svgs have proper structure. Maybe in the future we could host library with user submitted decorators, we would only optimize them to theme, but that's far future.

[soulhotel]

Damn youve been hiding this the whole time lol Where did you get source these svgs, if I may ask?

[Kaedriz]

I posted source earlier??????

[soulhotel]

Aw got it, my bad im doing this in between studies. So ive added this all into the update branch. It took a while for me to figure out the rotation (lack of experience with svgs). But i simplified it

<svg
	xmlns='http://www.w3.org/2000/svg'
	version='1.1'
	viewBox='0 0 22 22'
	width="14.0pt" height="14.0pt"
	fill='context-fill'>
        <g transform="rotate(180,11,11)">
        <path d='m16.6569 8.9951-.7072-.7071L11 13.2377 6.0503 8.288l-.7072.7071L11 14.652Z' /> </g>
</svg>

[Kaedriz]

1. You don't have to add width to svgs, it can be added using css.
2. Pixels are preferably amount of units for digital stuff, if you want something static.
3. Rotating also can be done using css