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]

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.

Definitely, i removed it

[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

https://github.com/soulhotel/FF-ULTIMA/blob/96eff4eeeeb6cde8ffec0f75556990aadf4b9b62/theme/override-linux.css#L115-L124

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)

https://github.com/soulhotel/FF-ULTIMA/blob/233a5984ea2454822a631ac3641ec4a17f941924/theme/override-linux.css#L91-L105

[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