Window Title Nav Buttons Broken on Linux

[Joomsy]

It seems that the buttons on the title bar of the Steam window are broken on Linux. The profile menu doesn't display a dropdown, and things like friends and downloads are hidden behind the window control buttons.

I'm assuming the profile menu is being displayed here incorrectly, because it's a duplicate of the one in the main navigation.

[yurisuika]

This is probably the JS failing to inject properly. If this occurs, you may press F5 to refresh the client, although this may require dev mode to be enabled. The JS currently may cause errors when attempting to remove the downloads progress I believe, but I seek to remedy this.

The account dropdown menu has been removed on the skin currently, as all of this information may be found from the settings menu. What you are seeing is the account name (which shouldn't actually be rendering by default, although I am not sure why I even made it an option since it is redundant to display) to the left of the wallet balance (which I assume here is 0), which should be to the left of all of the other buttons, as shown in the previews. The aim is for a more minimal appearance and to cut out redundancy, thus all of these links and information are extraneous except for really the account balance. The skin is still early in development, so all of the buttons are set to display, but some such as the announcements and add game button will be disabled in the future by default.

As far as Linux support goes specifically, I cannot help you there right now. Once development on Windows 10 closes I suppose I can install a VM and check out what is going on in Linux, but I won't be doing that until that point.

[Joomsy]

@yurisuika Ah, ok! That makes complete sense. In fact, after posting this, the icons behind the window controls disappeared, and I haven't really been able to reproduce that specific part. The username rendering is still happening, but I can ignore it. The skin is beautiful as it is, and I know how difficult conformity is. I'm a Linux veteran, so I'd love to help in any way I can, but I don't know much about JS and CSS, unfortunately. So, I realize I probably wouldn't be able to do much.

I think you'd like the penguin side, though. Customization is a cornerstone of the OS, and since you already know your way around Steam skins, you might like skinning GTK (the most common window engine). It's also based on CSS and JS, and I had actually assumed you already were a Linux user. This skin is super reminiscent of things like the Gruvbox style , and it just fits so well with popular dark themes. It's closer to a Flutter application in appearance, which feels more natural on Linux when compared to the oodles of Metro inspired skins.

At any rate, if you get to it, cool, if not, well, I'll still continue to use the theme. I may even crack open some documentation, and see if I can contribute in any way. I do seriously appreciate the work, and the last thing I want is to make somebody feel obligated to meet my own niche desires.

[yurisuika]

That's not too bad of a GTK theme. I used to rice Arch with Awesome and stuff but that was back like a decade ago so I am far out of the loop.

Mostly because of software mainly Adobe stuff I haven't bothered in a good long while to get back into it, but I think nowadays I can find good native alternatives except for Photoshop, so I might try again. If I do I would probably end up making a whole new Steam skin to match whatever theme I go with.

[Joomsy]

@yurisuika Ah, alright, that's completely understandable. I know Photoshop does well these days, but a lot of the Macromedia adopted tools have issues last I checked. Fireworks is a good example, though CS4 and prior seem to be fine.

On topic, I actually somehow "fixed" the original issue. I guess SFP wasn't injecting JS, even though it was selected. I gave it a complete refresh, though, and ta-da. That being said, the download icon now displays a progress bar that extends out over the other icons and window controls when something is downloading.

I'm assuming it's supposed to be contained within a space overlaying just the icon itself, but this ends up "stretching" the button's clickable area. What I mean is that this progress bar inherits the downloads page link, and clicking it takes you there, thus making the other icons unusable.

[yurisuika]

As of right now you just need to press F5 until it is displayed properly. The downloads progress element is supposed to be separated from the downloads button itself and placed off after the other button elements all lined up, starting from the right, so it should end up in the middle of the navbar basically.

The JS moves the classes around and that probably screws up dynamically displayed stuff like this royally, cause then when it searches for the downloads progress it can't find it, which can cause a black error screen and ya gotta F5. I might look into a different solution, but it is my first time using JS so there is probably some better way to do it than this. Probably the reason why the skin I learned to do this from kept the progress as part of the button. Maybe that is just how I should do it to avoid these errors, but it won't offer the look I want exactly.

[yurisuika]

This issue with the downloads progress is a failure to inject JS, which is not in the realm of control of the skin but rather the injector.

That's not to rag on the injector or anything, this is a hacky process and isn't expected to be stable.

[yurisuika]

I've made a few changes, including removing the account balance from the navbar, adding a button for the account menu, and moving stuff around differently... so now the downloads progress should never have an issue, since it isn't being moved out of a superclass, instead just being translated off to the left.

[yurisuika]

Just letting you know I have now sought to add Linux support and resolved several Linux specific issues. If you find anything else needing a fix just let me know.