MozillaZine

Updating a Firefox theme to v25.0 onwards...

Discuss application theming and theme development.
maxdamage

User avatar
 
Posts: 51
Joined: April 14th, 2015, 5:01 pm
Location: Gauteng,South Africa

Post Posted May 3rd, 2015, 9:38 am

resource://gre/res/TopLevelImageDocument.css
Can't seem to get the changes to that css document to load with the theme when load\open an image in a new tab in Firefox v25.0? I have the TopLevelImageDocument.css document stored in the theme's folder: aerofox-bundle-4.0.1.5(theme)-->:chrome\win\browser.

I did however did managed to get the background of the newtab.css file with the thumnails of the recent websites\documents accessed changed permanently to the colour #2b2f32.Here is the top part of the newtab.css where I changed the code:
Code: Select all
/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

:root {
  -moz-appearance: none;
  font-size: 75%;
  background-color: transparent ;
}
             
              /* SCROLLBOX */
#newtab-scrollbox:not([page-disabled]) {
  color: rgb(0,0,0);
  background-color: rgb(43,47,50)  !important; /* background-color: hsl(0,0%,95%); #2b2f32 */
}


I have yet to find the code that handles the newtab.css background colour when you click on the hide new tabs page button.

mcdavis

User avatar
 
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Post Posted May 5th, 2015, 3:34 am

@maxdamage, hi, I just read through this thread and I see what you want to do, and it's 100% possible. You're into it, you're willing to do the research and the work, it's for your personal use (at least for now), you mostly care about primary UI (the main toolbars) and whatever pain points jump into view (bare images, the new tab page), and you're willing to ignore devtools or at least just use whatever code the default theme supplies for that. You'll have to learn some things and do a lot of work, but yeah, 100% doable and a very cool project.

It sounds like you're still working on the top-level-image-document stuff. If you put this URL in the urlbar and view the file contents, does it show what you expect? I think the file's been moved around a bit (Bug 793366):

chrome://global/skin/media/TopLevelImageDocument.css

If you don't see that document at that location, then you need to put it in the global/media/ directory (for Firefox 25).

Can you post your chrome.manifest file?

*** You really are taking a risk running older Firefox. Like Patrick said, you should at least try to use ESR if you don't want to use the current release. Older Firefox have security holes that are known and published to the world. I have older Firefox installed for testing, but I have all those set to start offline and stay offline. I hope you're at least using something like Sandboxie or a virtual machine, but you really should use a current Firefox.

I don't know if you're running older Firefox because you don't want the Australis UI period, or because it's so much work to update your theme for it, but if it's about updating the theme, we can work through that. That can be done.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

maxdamage

User avatar
 
Posts: 51
Joined: April 14th, 2015, 5:01 pm
Location: Gauteng,South Africa

Post Posted May 6th, 2015, 3:24 pm

Here is the chrome.manifest that comes with the theme:
Code: Select all
skin       global          aerofox       chrome/win/global/ os=WINNT
skin       browser       aerofox       chrome/win/browser/ os=WINNT
skin       mozapps       aerofox       chrome/win/mozapps/ os=WINNT
skin       communicator    aerofox       chrome/win/communicator/ os=WINNT

skin       global          aerofox       chrome/mac/global/ os=DARWIN
skin       browser       aerofox       chrome/mac/browser/ os=DARWIN
skin       mozapps       aerofox       chrome/mac/mozapps/ os=DARWIN
skin       communicator    aerofox       chrome/mac/communicator/ os=DARWIN

skin       global          aerofox       chrome/win/global/ os=LINUX
skin       browser       aerofox       chrome/win/browser/ os=LINUX
skin       mozapps       aerofox       chrome/win/mozapps/ os=LINUX
skin       communicator    aerofox       chrome/win/communicator/ os=LINUX


@mcdavis

Do you mean with regards to the location of that folder this one?
aerofox-bundle-4.0.1.5 theme folder(I gave the theme a random version number)\chrome\win\global\media
and not
aerofox-bundle-4.0.1.5 theme folder(I gave the theme a random version number)\chrome\win\browser
? Will try putting the TopLevelImageDocument.css in that folder and see if it loads with the fix I added to it.

That is why I want to fix the theme for personal use so I can install newer versions of Firefox.Wish I could get permission from the author so I can maybe release it obviously giving him main credit and me for fixing it plus keeping it usable for newer version of Firefox.Unfortunately the website is no longer up and that is the only way I was able to contact him.I prefer the pre-Australis UI as I just think the orange button was a very good idea plus it looks fantastic with the theme. :D

I have the addon that re-adds the orange tab,etc... to newer versions of Firefox but I just want to get the theme up to Firefox v25.0 first then see how it goes with the latest versions of Firefox...

Thanks.

mcdavis

User avatar
 
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Post Posted May 7th, 2015, 3:12 am

maxdamage wrote:Do you mean with regards to the location of that folder this one?
aerofox-bundle-4.0.1.5 theme folder(I gave the theme a random version number)\chrome\win\global\media
and not
aerofox-bundle-4.0.1.5 theme folder(I gave the theme a random version number)\chrome\win\browser
? Will try putting the TopLevelImageDocument.css in that folder and see if it loads with the fix I added to it.



Right. The location of that file in the theme moved in Firefox between Fx4 (which I think you said your starting source code was written for) and Fx25. Look at this patch for Bug 793366, which is where the location changed.

https://hg.mozilla.org/mozilla-central/rev/3685d18499d9

In the very first file in that patch, you can see the location of TopLevelImageDocument.css changing:

old: chrome://global/skin/TopLevelImageDocument.css
new: chrome://global/skin/media/TopLevelImageDocument.css

The code in Firefox expects each CSS file in the theme to be at a certain specific location. If it's not found there, it doesn't get used. And, that location sometimes changes from one Firefox version to the next.

With Firefox 25, you should be able to type this in the url bar and load the file and see the CSS code in it:

chrome://global/skin/media/TopLevelImageDocument.css

If you see your CSS, then your file's in the right place. If you get file not found, it's in the wrong place.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

maxdamage

User avatar
 
Posts: 51
Joined: April 14th, 2015, 5:01 pm
Location: Gauteng,South Africa

Post Posted May 8th, 2015, 2:00 pm

mcdavis wrote:Right. The location of that file in the theme moved in Firefox between Fx4 (which I think you said your starting source code was written for) and Fx25. Look at this patch for Bug 793366, which is where the location changed.

https://hg.mozilla.org/mozilla-central/rev/3685d18499d9

In the very first file in that patch, you can see the location of TopLevelImageDocument.css changing:

old: chrome://global/skin/TopLevelImageDocument.css
new: chrome://global/skin/media/TopLevelImageDocument.css

The code in Firefox expects each CSS file in the theme to be at a certain specific location. If it's not found there, it doesn't get used. And, that location sometimes changes from one Firefox version to the next.

With Firefox 25, you should be able to type this in the url bar and load the file and see the CSS code in it:

chrome://global/skin/media/TopLevelImageDocument.css

If you see your CSS, then your file's in the right place. If you get file not found, it's in the wrong place.


I put the file here
Code: Select all
aerofox-bundle-4.0.1.5\chrome\win\global\skin\media
and still won't load nor
Code: Select all
chrome://global/skin/media/TopLevelImageDocument.css
will load in the url bar for Firefox v25.0 browser as I get the cannot find page message...? ](*,) :-s

Having internet problems atm so I don't know when I can check on my post here. :(

[edit]When checking the link for Bug 793366 https://hg.mozilla.org/mozilla-central/rev/3685d18499d9 you gave me the page gives multiple locations for TopImageDocument.css which has me confused completely since I can't get the document to load in Firefox v25.0.
Last edited by maxdamage on May 8th, 2015, 3:10 pm, edited 1 time in total.

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted May 8th, 2015, 3:04 pm

If you need help with the extension, you can ask here:
viewforum.php?f=19

If you want to create a "support" page, this is the place:
viewforum.php?f=48
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

mcdavis

User avatar
 
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Post Posted May 12th, 2015, 6:19 am

So you said that if you put this chrome URL in the location bar

chrome://global/skin/media/TopLevelImageDocument.css

and try to load it, you get file not found.

What if you try to load other files in that same directory. For example, if you have an error.png in there (do you?) can you load

chrome://global/skin/media/error.png

and see the icon?

What about chrome://global/skin/media/muteButton.png if you have that?
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

mcdavis

User avatar
 
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Post Posted May 12th, 2015, 6:29 am

If you have those files but can't see them, then there's an issue with chrome.manifest and/or the way you're packaging all the files into a .jar or .xpi.

If you're running off a "live" version of the files on disk (are you?), it may be an issue with capitalization, since URLs will resolve regardless of case when live-loading out of your source directory and on MSWindows. In contrast, when running with a packaged theme, they must match case exactly -- the case used in your filenames must exactly match the case used in Firefox where it tries to load the file.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

mcdavis

User avatar
 
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Post Posted May 12th, 2015, 8:14 am

If it's still not working, I'd like to be able to run the theme for myself. It would be easier to help you. If you weren't ready to share it publicly, you could always send me an email or PM with a link.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

maxdamage

User avatar
 
Posts: 51
Joined: April 14th, 2015, 5:01 pm
Location: Gauteng,South Africa

Post Posted May 12th, 2015, 3:19 pm

mcdavis wrote:If it's still not working, I'd like to be able to run the theme for myself. It would be easier to help you. If you weren't ready to share it publicly, you could always send me an email or PM with a link.


I'll send a pm to you with my email address in it so you can send me an email so I can email a copy of the theme .xpi to you so you can see where I am going wrong or not???

mcdavis

User avatar
 
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Post Posted May 12th, 2015, 4:02 pm

maxdamage wrote:
mcdavis wrote:If it's still not working, I'd like to be able to run the theme for myself. It would be easier to help you. If you weren't ready to share it publicly, you could always send me an email or PM with a link.


I'll send a pm to you with my email address in it so you can send me an email so I can email a copy of the theme .xpi to you so you can see where I am going wrong or not???


Yeah, that'd be great, thanks.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

mcdavis

User avatar
 
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Post Posted May 14th, 2015, 4:51 am

http://mcdavis.dreamhosters.com/omnijar/

Just as a resource, here are the files in the default themes for Firefox 1.5 through the current Fx38.0.5 beta (with a couple Firefox versions missing .. I don't have Firefox 27 for some reason).

If you download and unzip any of these, you'll see all the files in the default theme. If you download and unzip two different versions, you can use a program like WinMerge (free) to compare the two versions and see what changed in the default theme from one version to the next.

For example, you could download the one for Firefox 4, and the one for Firefox 25, and unzip those then compare them, then you'd see what's changed in the Firefox default theme since the theme you're working on was last updated. I recommend you do this, it's a really great way to keep up with what Firefox is doing. (Recommended to me by Ed Hume when I first started.)

For Firefox 4: http://mcdavis.dreamhosters.com/omnijar ... mnijar.zip
For Firefox 25: http://mcdavis.dreamhosters.com/omnijar ... mnijar.zip

The reason this might be useful is because to get these files you have to install Firefox and then unpack the .jars/.jas, and this saves that step. Plus, some people have trouble opening Firefox's omni.ja, and that's already done for you here. All these came from installed Firefoxes. Of course, you could just do it yourself, but I've already done it so, here you go.

These are almost all from MSWindows (if they don't say otherwise, that's what they are), and note well that the Linux and OSX versions of the default theme are not the same.

For the most part (there's some variation, especially with the older ones) these contain both the omni.ja as such, and its unpacked contents. In the newer ones, where Firefox started using both omni.ja and browser/omni.ja, they also contain both that second .ja file and its unpacked contents.

You can see up until Firefox 4, there were several .jars containing the chrome files. Starting with Firefox 4, those files are instead packed into the single omni.jar. Then, starting with Firefox 10 IIRC, those are packed as omni.ja, which is a .jar file with some atypical internal structure that some archive software can't open. (I can't use either WinRar or 7zip.)

The one for Fx1.5 unfortunately has the filenames upper-cased but the file contents should be correct (if you happen to look at that). I had to recover that one from a crashed hard drive, and any filenames or directory names that could be represented strictly within an 8.3 old-style filename were (sadly and suprisingly!) recovered as all uppercase.

I don't plan on maintaining these, these are just what I have on hand now.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

mcdavis

User avatar
 
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Post Posted May 14th, 2015, 5:28 am

OK I got the XPI you sent me.

I see two files named ToplevelImageDocument.css, with a lowercase 'l'. Try using an uppercase 'L' there, like this: TopLevelImageDocument.css
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

mcdavis

User avatar
 
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Post Posted May 14th, 2015, 6:36 am

About the location of the file in the theme: it needs to go where Firefox will find it.

Firefox 25 is looking for it at chrome://global/skin/media/TopLevelImageDocument.css.

Your chrome.manifest tells Firefox that chrome:// URLs that begin with chrome://global/skin will be located in your theme files at chrome/win/global (for MSWindows and for Linux, and at chrome/mac/global for OS X). Therefore, chrome://global/skin/media/TopLevelImageDocument.css should be located in your theme at chrome/win/global/media/TopLevelImageDocument.css.

You also need it at chrome/mac/global/media/TopLevelImageDocument.css, so it's found when running on OS X too. This is because your chrome.manifest says that on Darwin (OS X), theme files are found under chrome/mac/ rather than chrome/win/.

You have an extra copy of the file that you don't need at chrome/win/browser/global/skin/media/ToplevelImageDocument.css. Firefox doesn't look for the file at that location, so it'll never get used (plus, the lowercase 'l').

Also, you don't need a global directory under browser at all, because nothing in Firefox is looking for anything in chrome://browser/skin/global/; nothing there would get used.

Also, if you're using directories named 'skin' in your theme (like where you have chrome/win/global/skin/media, for example) that's probably not ever what you want, as a general rule. The skin part of a chrome URL like chrome://global/skin/global.css doesn't need to be in your theme. Rather, it's what tells Firefox to look in the theme for that file. Compare these two chrome URLS:

chrome://browser/content/browser.css
chrome://browser/skin/browser.css

Those are both actual chrome URLs used by Firefox. The first one doesn't refer to a theme file because it's not using the word skin in the URL. It's the word skin in the second one (in the second position, after the package name "browser") that tells Firefox it's a theme file that should be loaded from the theme. But it doesn't mean there needs to be a folder called skin in the theme.

---------------

Lemme know if that helps at all, hopefully that'll get you closer to what you want. I'll be glad to look at your next version if you send it to me.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

mcdavis

User avatar
 
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Post Posted May 14th, 2015, 12:47 pm

This is so old I hesitate to even suggest it, but it may help you so I'll do it anyway:

http://mcdavis.dreamhosters.com/fcx/theming.html

I wrote that back in the Fx1.5/Fx2 era, and a lot of it is waaaaay out of date. Some of it's no longer true, and some of it never was true, I was wrong about a few things in the first place. However, you're working on a theme that was last updated back in that time frame (roughly) so a lot of it applies to that old version, and it'll give you some good context to help you understand what the author was doing back then.

I think you'll get the most benefit from "Writing Themes", parts one through six. Also, the parts about chrome.manifest and how chrome URLs work in part two are pretty good. If you go outside those pages, you'll start to get into the Land of Broken Websites and Bad Examples. In particular, all the CSS cascading and rule precedence examples are based on the CSS2 cascade, and that's way old now.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 3 guests