Questions about creating a new browser theme

Add-ons for Pale Moon and other applications
General discussion, compatibility, contributed extensions, themes, plugins, and more.

Moderators: FranklinDM, Lootyhoof

User avatar
nguyen9173
Banned user
Banned user
Posts: 95
Joined: 2022-06-02, 13:38

Re: Questions about creating a new browser theme

Unread post by nguyen9173 » 2022-06-19, 01:30

I pretty much appreciate your endeavor but developing new XUL addons/themes nowadays is just insane to me. Almost no one to help you. You have to dig up old books and old resources stored somewhere else because the original MDN is no longer keep them. You will not find any useful results from search engines anyway. You are on your own and absolutely has no support. With all of the quirks and design problems of the past no one has ever revisit and you have to rediscover. You have my deep respect my friend.

User avatar
athenian200
Contributing developer
Contributing developer
Posts: 1498
Joined: 2018-10-28, 19:56
Location: Georgia

Re: Questions about creating a new browser theme

Unread post by athenian200 » 2022-06-19, 04:54

nguyen9173 wrote:
2022-06-19, 01:30
I pretty much appreciate your endeavor but developing new XUL addons/themes nowadays is just insane to me. Almost no one to help you. You have to dig up old books and old resources stored somewhere else because the original MDN is no longer keep them. You will not find any useful results from search engines anyway. You are on your own and absolutely has no support. With all of the quirks and design problems of the past no one has ever revisit and you have to rediscover. You have my deep respect my friend.
Well, I think part of his goal in working on this is to change that situation. Notice how he's documenting everything he's doing in the process of creating this. That will be helpful to anyone working on it in the future, and perhaps even deciding where the pain points are if we ever get the chance to improve the way things work.
"The Athenians, however, represent the unity of these opposites; in them, mind or spirit has emerged from the Theban subjectivity without losing itself in the Spartan objectivity of ethical life. With the Athenians, the rights of the State and of the individual found as perfect a union as was possible at all at the level of the Greek spirit." -- Hegel's philosophy of Mind

User avatar
fuzzlesnuz
Hobby Astronomer
Hobby Astronomer
Posts: 20
Joined: 2022-06-07, 21:18

Re: Questions about creating a new browser theme

Unread post by fuzzlesnuz » 2022-06-19, 06:15

nguyen9173 wrote:
2022-06-19, 01:30
I pretty much appreciate your endeavor but developing new XUL addons/themes nowadays is just insane to me. Almost no one to help you. You have to dig up old books and old resources stored somewhere else because the original MDN is no longer keep them. You will not find any useful results from search engines anyway. You are on your own and absolutely has no support. With all of the quirks and design problems of the past no one has ever revisit and you have to rediscover. You have my deep respect my friend.
Yeah, making what I suppose I would call an "advanced" theme could seem like a fool's errand. But, in a way, I feel like doing this here in 2022 is a lot like doing the same thing in 2005 - the lack of documentation, good examples, and readily-available peers to assist you. And yet, our Mozilla ancestors were walking to school everyday, uphill, both ways, at 4 am, in -20 degree weather, etc, etc :D What I mean to say is that it was possible for them, so it is possible for us. Of course, back then, you could sit on Mozilla's shoulders and see the ground getting smaller and smaller as they carried you up towards a seemingly bright future... Fast forward and now we are picking through the wreck of that once-mighty giant. That much is certainly true.
athenian200 wrote:
2022-06-19, 04:54
Well, I think part of his goal in working on this is to change that situation. Notice how he's documenting everything he's doing in the process of creating this. That will be helpful to anyone working on it in the future, and perhaps even deciding where the pain points are if we ever get the chance to improve the way things work.
If/when this theme of mine does come to fruition, I will indeed be left with a bunch of my notes on the workflow, pitfalls, gotchas, etc that I experienced. I'll be organizing those and including them in the repo for my theme, which will end up on the gitea, but I'd also like to contribute anything worthwhile to a more centralized place, like DPMO. But, I know DPMO is somewhat neglected and still has some GRE and pre-March-19th-era mentions on it, and the page organization is a little strange/incomplete, so I'd be hesitant to submit new material to it. That, however, is a bridge that need not be crossed until my project is actually done.

User avatar
nguyen9173
Banned user
Banned user
Posts: 95
Joined: 2022-06-02, 13:38

Re: Questions about creating a new browser theme

Unread post by nguyen9173 » 2022-06-19, 07:58

fuzzlesnuz wrote:
2022-06-19, 06:15
nguyen9173 wrote:
2022-06-19, 01:30
I pretty much appreciate your endeavor but developing new XUL addons/themes nowadays is just insane to me. Almost no one to help you. You have to dig up old books and old resources stored somewhere else because the original MDN is no longer keep them. You will not find any useful results from search engines anyway. You are on your own and absolutely has no support. With all of the quirks and design problems of the past no one has ever revisit and you have to rediscover. You have my deep respect my friend.
Yeah, making what I suppose I would call an "advanced" theme could seem like a fool's errand. But, in a way, I feel like doing this here in 2022 is a lot like doing the same thing in 2005 - the lack of documentation, good examples, and readily-available peers to assist you. And yet, our Mozilla ancestors were walking to school everyday, uphill, both ways, at 4 am, in -20 degree weather, etc, etc :D What I mean to say is that it was possible for them, so it is possible for us. Of course, back then, you could sit on Mozilla's shoulders and see the ground getting smaller and smaller as they carried you up towards a seemingly bright future... Fast forward and now we are picking through the wreck of that once-mighty giant. That much is certainly true.
athenian200 wrote:
2022-06-19, 04:54
Well, I think part of his goal in working on this is to change that situation. Notice how he's documenting everything he's doing in the process of creating this. That will be helpful to anyone working on it in the future, and perhaps even deciding where the pain points are if we ever get the chance to improve the way things work.
If/when this theme of mine does come to fruition, I will indeed be left with a bunch of my notes on the workflow, pitfalls, gotchas, etc that I experienced. I'll be organizing those and including them in the repo for my theme, which will end up on the gitea, but I'd also like to contribute anything worthwhile to a more centralized place, like DPMO. But, I know DPMO is somewhat neglected and still has some GRE and pre-March-19th-era mentions on it, and the page organization is a little strange/incomplete, so I'd be hesitant to submit new material to it. That, however, is a bridge that need not be crossed until my project is actually done.
You guys could write a book and sell it. There will be audiences.

User avatar
Lootyhoof
Themeist
Themeist
Posts: 1568
Joined: 2012-02-09, 23:35
Location: United Kingdom

Re: Questions about creating a new browser theme

Unread post by Lootyhoof » 2022-06-19, 15:03

Another option could be to use the style directive in chrome.manifest (which, does not seem to be documented over at UDN). Basically, for an extension specifically (not a theme), you could include something similar to the below:

Code: Select all

style chrome://browser/content/browser.xul chrome://teststyle/skin/test.css

skin	teststyle	classic/1.0	skin/
This CSS file is then loaded at runtime, in addition to whatever theme is running currently (be that the default, or someone else's). As an example, a simple style like below:

Code: Select all

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

.tabbrowser-tab {
  background-color: red;
}
produces:
Image

The problem here, of course, is that you would need to account for (i.e. wrestle with) many different styles that you don't have control over, to get the look you want. It can be quite frustrating. Full themes are built the way they are to give full control over whatever XUL files you need without having to account for anyone else's work (aside from the browser itself - which also has "content" styles that themes cannot touch). The less access you give yourself to the CSS files, the less you can adjust to suit your own needs.

User avatar
fuzzlesnuz
Hobby Astronomer
Hobby Astronomer
Posts: 20
Joined: 2022-06-07, 21:18

Re: Questions about creating a new browser theme

Unread post by fuzzlesnuz » 2022-06-19, 21:54

Lootyhoof wrote:
2022-06-19, 15:03
Another option could be to use the style directive in chrome.manifest...<snip>
I discovered this use of the style directive several days ago and it is already proving to be very useful. The rules for CSS precedence appear to be consistent with the CSS spec, so I can use style to apply some CSS that includes selectors which are identical to those already in a loaded css file (e.g. browser.css from the browser's default theme). Since addons are loaded after the browser initializes, the selector in my theme's CSS takes precedence over the one from the default theme. I can then use unset to remove declarations I don't want and ofc just set the properties any way I chose. This method appears to be the only way to override something smaller in scope than an entire CSS file (e.g. browser.css), at a granularity of selectors/block declarations. I haven't extensively tested it, but that is my finding thus far.

This method does reduce the theme's dependency on duplicating upstream default them CSS significantly, so I am very keen on using it where possible. The biggest complication with it is accounting for the limited inheritance markup model of CSS. The #back-button (and its children) are a good example. The default theme has many selectors which target #back-button (and its children) by id, so overriding those is extremely simple. However, the #back-button (and its children) also have styling from selectors that target all toolbarbuttons. Thus, in order to achieve complete control over style of the #back-button (and its children), the styles incurred from those broad toolbarbutton selectors must be resolved in any one of several possible ways. At a large scale, this can get difficult to read and maintain, which is the only point where I see it to be more efficient to duplicate the upstream default theme CSS.

We've talked a bit in this thread about how problematic Mozilla's design of this themeing system is. An improvement would be to split all the monstrous files, like browser.css, into proper, component-focused pieces. This way, if a theme wants to holistically style the back and forward buttons without any interference from things like the toolbarbutton styles, it simply could use an override on some new file like unifiedNav.css, which would include only the unified forward and back buttons styles, as excised from browser.css, and @import common styles as needed (like those toolbarbutton styles).

Finally, for all the garbage that comes from web "developers" these days, CSS 5's "cascade layers" seems like it would help with some of these problems with themeing. It is a very new shiny, so for those unfamiliar, it is a simple logical hierarchy that allows any arbitrary collection of CSS styles with wildly different selectors to be considered one unit, which allows us to define precedence at a much higher scope than strictly by individual selectors. It's like CSS is inching closer and closer to just becoming a proper markup language like XML :D The browser's default theme could be placed in a layer which always has the lowest priority. Themes would then define their styles in a new layer, to which the browser will assign a higher priority. Now, the theme no longer has to replicate the selectors from the browser's default theme in order to match specificity and thus win precedence by being defined later (when using style). Instead, the theme can use its own cleaner, more intuitive selectors that are tailored to the theme's needs, and the cascade layer hierarchy ensures that those selectors have precedence over the browser's default theme. Now, to be clear, I am not making any requests here. I know that Moonchild and co. have far more important things at hand. I am merely exploring a concept so that it becomes explored.

Locked