Repurposing a Theme

[mysticentity]

I was uncertain of where I should be posting this and so I will start here.

I am working on repurposing this theme that I enjoyed using back in the early 2000's. This theme used to work on Firefox and has not worked since I want to say 2011 or something, everything is hazy to be honest. Someone suggested I try pale moon because it supports xul, after editing install.rdf inside the .xpi file to target the latest version of pale moon and successfully installing it, I ran into a few graphical issues that I have been unable to fix and came here to ask for some help. I want to stress how I would ask the original creator but I have no idea how I would contact them with it being so so old and so so long ago.

If I have posted this incorrectly, I do apologize. I will include a video of the issue to better highlight the problem and the source to the theme.

when I click the downloads button (one which says, "display the progress of ongoing downloads") I get these issues. A few of the other elements might be broken but haven't looked for them as this is the first one I have seen. I am trying to take it one step at a time.

Short video of the issue:
https://i.imgur.com/E6EfcDB.mp4

This is the source:
https://github.com/mysticentity/PaleMoon-CSS-Theming/tree/e46b22ec1f1b2f4f54cdac4091b7bedf9f22e4df/Arctic%20glow

[Lootyhoof]

I suggest you have a look at our developer site, particularly:

https://developer.palemoon.org/addons/themes/complete/
https://developer.palemoon.org/addons/t ... m-history/

I will admit the "changes" page may not but fully up to date... I'll see what I can do about that. You can use release notes for (typically major) versions of Pale Moon in the meantime though.

It would also be worth having a look at some of our existing themes to see how they are built.

Good luck!

[mysticentity]

I just seen some of that before. I'd been working though fixing some of the CSS already and seemed to be failing at fixing this issue. I'll look at it again though.

[mysticentity]

I suggest you have a look at our developer site, particularly:

https://developer.palemoon.org/addons/themes/complete/
https://developer.palemoon.org/addons/t ... m-history/

I did look over these some more while also checking out other people's themes and am not sure where I'm going wrong for the issue is am having.

[Lootyhoof]

The specific issue with the downloads button is because that is a bit more than just a toolbarbutton, unfortunately. It's got styling in browser.css, but that is not used once clicked. You should refer to the /browser/downloads/downloads.css file in other themes for how to style this, as I see you don't currently have that entire directory.

[Moonchild]

The theme being worked on likely assumes the toolkit download manager which isn't used for the doorhanger-style download manager panel.
We still have the toolkit manager code but it's mostly unmaintained and kept primarily for some other applications that base on suite code building on UXP.
As stated by Lootyhoof you'll have to base your theme's styling on what you can find in other themes (or inspect how Pale Moon styles it) for the easiest way to get started by knowing which selectors are used.

[mysticentity]

I did actually make some changes based on the help you have all provided which can be found here: version 2 and I kind of fixed the problem but don't know where I went wrong. Would love to get some further insight.

[Lootyhoof]

What specific issue are you asking about? The download button looks like it has its icon now, good job! However, I can see that there isn't currently an icon for History or any of the Status Bar toolbar icons (see the "statusbar" folder on another theme for this):



It also seems that you're missing the RSS icon in the address bar causing this big empty box to show:



Smaller nitpick, but the Library back/forward buttons (for managing bookmarks/history) look a bit too close together, too:

[mysticentity]

What specific issue are you asking about? The download button looks like it has its icon now, good job! However, I can see that there isn't currently an icon for History or any of the Status Bar toolbar icons (see the "statusbar" folder on another theme for this):



It also seems that you're missing the RSS icon in the address bar causing this big empty box to show:



Smaller nitpick, but the Library back/forward buttons (for managing bookmarks/history) look a bit too close together, too:

After clicking downloads, it now has an icon but it doesnt react to hovering over or being active anymore and permanently looks pressed/clicked in. I couldn't fix that. Under browser/feeds it should have rss icon iirc. There are icons for history and a good bit of other icons under the icons and places folder that I don’t think are properly being used. Also when you open downloads, the bg under the text show all downloads is the wrong color which I assume is because the bg being set there has the wrong size and not covering it all and at least on my end next to any downloaded file, the icon to open the directory looks cut off or missing the beginning "cap" if thats what you call it. Also when you click the pale moon icon/menu bar in the top left to open the menu some of the items have an icon next to them while some of them don't and idk how to find the class id for those emelemtns or why some have icons and some don't. Also there are cut/paste/copy icons that I dont think are properly being themed or used as well as a bunch of other unused icons that I'm sure were used before but aren't now.

[mysticentity]

At this point I'm just trying to get all the icons to properly be connect to the elements that they go to like they used to when it worked so that they are properly being themed, have the correct dimensions, and properly react to being clicked. I feel like I am so close to achieving that.

[Lootyhoof]

So to clarify, it's actually not possible to style hover/active states of the downloads indicator (which is, as mentioned earlier, not the same thing as the "download button" as would be used for the old-school toolkit version) as this is not actually a toolbarbutton to provide hover/active states to; it's just a vbox.



In terms of getting as-is styling to the old one, I think you've done what you can really. You should remove the :hover and :active styling in downloads.css for this icon as they are redundant.

I would highly suggest you install DOM Inspector so you can see more easily what's going on. You can inspect any element at any time by holding the shift key and right-clicking on it, which will open DOM Inspector on that element. In the box on the right-hand side, you can select to see what CSS rules are being applied to the element.

[mysticentity]

So to clarify, it's actually not possible to style hover/active states of the downloads indicator (which is, as mentioned earlier, not the same thing as the "download button" as would be used for the old-school toolkit version) as this is not actually a toolbarbutton to provide hover/active states to; it's just a vbox.



In terms of getting as-is styling to the old one, I think you've done what you can really. You should remove the :hover and :active styling in downloads.css for this icon as they are redundant.

I would highly suggest you install DOM Inspector so you can see more easily what's going on. You can inspect any element at any time by holding the shift key and right-clicking on it, which will open DOM Inspector on that element. In the box on the right-hand side, you can select to see what CSS rules are being applied to the element.

The thing is, I have that installed but if I want to click on the top left menu, the drop -down one it auto closes if I try and use the option from the dom inspector (the one with an arrow icon) for a specific text/element in the sub menu.

[mysticentity]

like, how do I click this button i have underlined and then use the dom Inspector to select something inside without it closing?

[mysticentity]

Also the submenu for the download button has bg issues, and the icon for opening containing folder is improperly displaying for me. Idk how I can fix that.

[mysticentity]

Also I think we arw confused, I'm not asking about the indicator actually which for here is a green arrow when somwthing downloaded, I mean the actual download icon you can see in the top right near the close ect after clicking the download button to open the menu, the icon now displaying afterwards looks permanently clicked in. If that cannot be changed like you said than I guess its just making sure all the other iconsnate being properly used. Although the cut/paste button while being used i dont think actually go anywhere. At least I cannot see them.


Pretty sure show all downloads is not supposed to look like that either:
https://i.imgur.com/nwyS331.jpeg


I am pretty sure the folder icon on the right hand side is not supposed to look like that.
https://i.imgur.com/M6A7ESG.jpeg