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

[maxdamage]

I would like to update a Firefox v4.0 theme I use so it is mostly\fully compatible and without errors for personal use for FireFox v25.0 onwards. It is the AeroFox 4 theme for v4.0 from Virtus Designs and although I got help fixing the add-on bar problem myself I would like to fix other problems that are popping up in Firefox v25.0 with regards to the theme as seen in the following screenshot:



Also I would like to change the background colour when you open an image in a new tab from white to a darker colour so it is less straining on the eyes and also for the open new tab that displays the recent websites you have been to as seen in the above screenshot...I love the fact that opening images in a new tab are displayed in the center of the tab which is just perfect.I am glad that was done finally!

Thanks.

[edit]The new tabs button is not being skinned in Firefox v 28.0.

Here is a list of fixes\additions I would like to add to the theme:
1:Fix all three tab images.
2:Fix\remove the "transparency" in the text area in the tabs element as seen in the posted screenshots.
3:Skin the bottom "bar" of the download window by the Clear list and search window if possible..
4:Have the background colour of the new tabs window when the thumbnails page is disabled set to #2b2f32.
5:Fix the page load progress indicator that is located at the bottom of the url bar.
6:Ask mcdavis if he could please test the fixed theme in the latest version of Firefox to see if all the fixes\additions are working or not once I have done all of the additions\fixes?

[Dev log]
1:Skinned the add-on toolbar ages ago.
2:Changed the background colour of the new tabs page to #2b2f32.
3:Added devtools folder to the aerofox-bundle-4.0.1.5\chrome\win\browser folder and the dev tools load properly.
4:Changed background colour to the open image in a new tab from white to #2b2f32.
5:Fixed the add new tab button when you move the cursor over the button and not have the white\grey image 3D button appears as seen in the posted screenshots.The add new tab button has a smallish border but looks better.Managed to remove the border around the add new tab button.
6:Upgraded to Firefox v28.0 and fixed the dev tools plug-ins.

[maxdamage]

I've never really liked the default skin for Firefox but this theme has been the only one I have used and I would like to be able to upgrade Firefox to newer versions with this theme as the "default" one.That is why I need help fixing it up.The author has given up on it and longer will be supporting it so I thought why not fix it myself?

Would be very grateful for the support.

Thanks.

[maxdamage]

Anyone? Can the theme be saved and fixed for use in newer versions of Firefox?

Thanks.

[patrickjdempsey]

There's almost nothing in a Firefox 4.0-era theme that will still work in Firefox 37. Also, there were a bunch of major changes in Firefox 29 that means that without a whole heck of a lot of extra work a theme will not work in Firefox 25 and current versions at the same time. Currently, the work-load on keeping themes up-to-date with release versions is so much that most themers have given up and the ones left work at it basically every day. Dark themes especially require a ton of work doing them the traditional way. mcdavis has resorted to using version control software to be able to keep up the pace.

There is a "simpler" way of building a theme which still requires a ton of work, but is less fragile to the constant changes. The theme is basically a userChrome hack that sits on top of the default theme. Frank Lion currently uses this method in his themes which you can look at here: viewtopic.php?f=18&t=2821901 (but don't pester him about your work as he probably won't appreciate it).

[maxdamage]

There's almost nothing in a Firefox 4.0-era theme that will still work in Firefox 37. Also, there were a bunch of major changes in Firefox 29 that means that without a whole heck of a lot of extra work a theme will not work in Firefox 25 and current versions at the same time. Currently, the work-load on keeping themes up-to-date with release versions is so much that most themers have given up and the ones left work at it basically every day. Dark themes especially require a ton of work doing them the traditional way. mcdavis has resorted to using version control software to be able to keep up the pace.

There is a "simpler" way of building a theme which still requires a ton of work, but is less fragile to the constant changes. The theme is basically a userChrome hack that sits on top of the default theme. Frank Lion currently uses this method in his themes which you can look at here: viewtopic.php?f=18&t=2821901 (but don't pester him about your work as he probably won't appreciate it).

I understand that and like I mentioned the author gave up on his theme ages ago and I got help from someone else to fix a problem with the addon bar that wasn't skinned and as a result the white background and white text drove me up the wall.Would I be able to still fix the theme for Firefox version up to v28.0 atleast?

I have never been crazy about having to upgrade every time a new version of Firefox is released and I "feel" there is minimal changes\adding of code to get the theme fixed for Firefox v25.0 to v28.0 and I feel it is worth it in the long run.

Thanks

[patrickjdempsey]

Would I be able to still fix the theme for Firefox version up to v28.0 atleast?

How should I know? No-one knows your skill-set and determination other than you. But really, what's the point in doing the ton of work to update to a version that came out a year ago?

I have never been crazy about having to upgrade every time a new version of Firefox is released and I "feel" there is minimal changes\adding of code to get the theme fixed for Firefox v25.0 to v28.0 and I feel it is worth it in the long run.

Well, you "feel" wrong. If the changes really were minimal, then so many authors wouldn't have quit. The entire theme will have to be rewritten from scratch (from the default theme) just to get it up to Firefox 25 level. You'll also have to come up with missing graphics, and come up with the fixes for screwy things the default theme does that other themes aren't able to do well. And all of that is assuming that the author really completed the update to Firefox 4.0, which many theme authors did not fully get compatibility for some time. And I'm not sure how updating to an ancient version with hundreds of known, published security changes, which considering the amount of changes in Firefox 29, all of that work isn't really even a stepping-stone towards the current version, so I don't see how that's worth it at all, especially not in the long run. If you don't want to be on the rapid release schedule, you should at least consider moving over to the ESR track, which only has one major update a year: https://www.mozilla.org/en-US/firefox/o ... tions/faq/

There are certainly people who might be willing to help you if you really are willing to jump in and take on the work, but it's not for the faint of heart. You should also consider digging through the dark themes that *are* already available.

[maxdamage]

I have never been crazy about having to upgrade every time a new version of Firefox is released and I "feel" there is minimal changes\adding of code to get the theme fixed for Firefox v25.0 to v28.0 and I feel it is worth it in the long run.

Well, you "feel" wrong. If the changes really were minimal, then so many authors wouldn't have quit. The entire theme will have to be rewritten from scratch (from the default theme) just to get it up to Firefox 25 level. You'll also have to come up with missing graphics, and come up with the fixes for screwy things the default theme does that other themes aren't able to do well. And all of that is assuming that the author really completed the update to Firefox 4.0, which many theme authors did not fully get compatibility for some time. And I'm not sure how updating to an ancient version with hundreds of known, published security changes, which considering the amount of changes in Firefox 29, all of that work isn't really even a stepping-stone towards the current version, so I don't see how that's worth it at all, especially not in the long run. If you don't want to be on the rapid release schedule, you should at least consider moving over to the ESR track, which only has one major update a year: https://www.mozilla.org/en-US/firefox/o ... tions/faq/

There are certainly people who might be willing to help you if you really are willing to jump in and take on the work, but it's not for the faint of heart. You should also consider digging through the dark themes that *are* already available.

Firstly the theme was fixed\reworked\upgraded to work with Firefox v4.0.The screenshot I posted in the first post is Firefox v25.0 running the theme.The way I see it is that it looks okay with Firefox v25.0 just some minimal problems which I would love to fix if I can without having to re-build the theme from the bottom up.

If you can recommend people who could help me I would be extremely grateful.

Thank you.

[malliz]

Firstly the theme was fixed\reworked\upgraded to work with Firefox v4.0.The screenshot I posted in the first post is Firefox v25.0 running the theme.The way I see it is that it looks okay with Firefox v25.0 just some minimal problems which I would love to fix if I can without having to re-build the theme from the bottom up.

It may "look" ok but under the hood it will be badly broken. It would be a massive amount of work to make it work with the latest builds just for one persons use.

[patrickjdempsey]

Just in case you still think I'm making things up... this thread logs every theme-impacting change beginning after Firefox 4.0:
viewtopic.php?f=18&t=2173163

Page 21 gets you up to Firefox 25:
viewtopic.php?f=18&t=2173163&start=300

After that, there's 8 more pages to get you up to today. Mozillazine lists 15 comments per page and the average page appears to list over 50 individual bugs, and most bugs represent dozens of lines of code changes. That represents the linear progression from Firefox 4.0 up to today. But there are some areas were entire sections of code were rewritten several times (Devtools have been rebuilt from the ground-up at least half a dozen times) so the only sane way to go about the process is start with the default theme and figure out how to modify it to make that old theme fit. But again, I'd recommend not building a full theme at all and instead use the method that Frank Lion is currently using.

This is a very old thread discussing the method: viewtopic.php?f=18&t=1472225
But it's probably more instructive to crack open one of Franks themes and look around. I used to maintain several themes specifically for the purpose of having a tutorial for this but I've removed all of my Firefox themes from AMO.

[maxdamage]

It may "look" ok but under the hood it will be badly broken. It would be a massive amount of work to make it work with the latest builds just for one persons use.

Is there a way I can peek under the hood to see the badly broken bits?? An error log or something like that so I know how bad it is?

Thanks.

[edit]I found the error console.I hope that helps me find what I am looking for or not.

[patrickjdempsey]

Not really. You can use the DOM Inspector to inspect elements to see how they are styled, but there's nothing except your eyes and rigorous testing and trial and error that tells you whether or not something really works.

[maxdamage]

Not really. You can use the DOM Inspector to inspect elements to see how they are styled, but there's nothing except your eyes and rigorous testing and trial and error that tells you whether or not something really works.

Well I went into the menu-->web developer-->browser console and this is the log and ignore the errors for my home page that I made myself:

[16:48:57.433] Could not read chrome manifest 'file:///C:/Program%20Files/Mozilla%20Firefox/chrome.manifest'.
[16:49:07.274] Could not read 'file:///C:/Users/Claus/AppData/Roaming/Mozilla/Firefox/Profiles/tff2i3pp.default/extensions/%7Bb9db16a4-6edc-47ec-a1f4-b86292ed211d%7D/components/dhIPreProcessor.xpt'.

[16:49:07.275] Could not read 'file:///C:/Users/Claus/AppData/Roaming/Mozilla/Firefox/Profiles/tff2i3pp.default/extensions/%7Bb9db16a4-6edc-47ec-a1f4-b86292ed211d%7D/components/dhIYoutubeTool.xpt'.

[16:49:07.275] Could not read 'file:///C:/Users/Claus/AppData/Roaming/Mozilla/Firefox/Profiles/tff2i3pp.default/extensions/%7Bb9db16a4-6edc-47ec-a1f4-b86292ed211d%7D/components/dhIYTHQChecker.xpt'.

[16:49:07.311] Could not read 'file:///C:/Users/Claus/AppData/Roaming/Mozilla/Firefox/Profiles/tff2i3pp.default/extensions/%7Bb9db16a4-6edc-47ec-a1f4-b86292ed211d%7D/components/dhIYTHQCheckerListener.xpt'.

[16:49:07.386] Could not read 'file:///C:/Users/Claus/AppData/Roaming/Mozilla/Firefox/Profiles/tff2i3pp.default/extensions/%7Bb9db16a4-6edc-47ec-a1f4-b86292ed211d%7D/components/dhIYTLinkFinder.xpt'.

[16:49:07.531] While creating services from category 'profile-after-change', could not create service for entry 'Disk Space Watcher Service', contract ID '@mozilla.org/toolkit/disk-space-watcher;1'
[16:49:07.850] Found unclosed string '''. Expected end of value but found '''. Error in parsing value for 'margin'. Declaration dropped. @ chrome://global/skin/scrollbars.css:93

[16:49:07.850] Error in parsing value for '-moz-appearance'. Declaration dropped. @ chrome://global/skin/scrollbars.css:190

[16:49:07.850] Error in parsing value for '-moz-appearance'. Declaration dropped. @ chrome://global/skin/scrollbars.css:194

[16:49:07.850] Unexpected end of file while searching for end of @media, @supports or @-moz-document rule. Unexpected end of file while searching for '}'. @ chrome://global/skin/scrollbars.css:232

[16:49:07.895] [Exception... "Component returned failure code: 0x80004002 (NS_NOINTERFACE) [nsISupports.QueryInterface]" nsresult: "0x80004002 (NS_NOINTERFACE)" location: "JS frame :: file:///C:/Users/Claus/AppData/Roaming/Mozilla/Firefox/Profiles/tff2i3pp.default/extensions/ietab@ip.cn/components/nsIeTabWatchFactory.js :: <TOP_LEVEL> :: line 204" data: no] @ file:///C:/Users/Claus/AppData/Roaming/Mozilla/Firefox/Profiles/tff2i3pp.default/extensions/ietab@ip.cn/components/nsIeTabWatchFactory.js:204
[16:49:08.219] Contract ID '@mozilla.org/commandlinehandler/general-startup;1?type=inspector' was registered as a command line handler for entry 'm-inspector', but could not be created.

[16:49:09.318] Unknown property '-moz-border-radius'. Declaration dropped. @ chrome://browser/skin/navbar.css:64

[16:49:09.318] Unknown property '-moz-box-shadow'. Declaration dropped. @ chrome://browser/skin/navbar.css:65

[16:49:09.318] Unknown property '-moz-border-radius'. Declaration dropped. @ chrome://browser/skin/navbar.css:71

[16:49:09.318] Unknown property '-moz-box-shadow'. Declaration dropped. @ chrome://browser/skin/navbar.css:72

[16:49:09.319] Unknown property '-moz-border-radius'. Declaration dropped. @ chrome://browser/skin/navbar.css:94

[16:49:09.319] Unknown property '-moz-box-shadow'. Declaration dropped. @ chrome://browser/skin/navbar.css:95

[16:49:09.319] Unknown namespace prefix 'html'. Ruleset ignored due to bad selector. @ chrome://browser/skin/urlbar.css:23

[16:49:09.735] Unknown property '-moz-border-radius'. Declaration dropped. @ chrome://global/skin/popup.css:158

[16:49:10.108] this.docShell is null @ chrome://global/content/bindings/browser.xml:343

[16:49:10.113] nsIJSON.decode is deprecated. Please use JSON.parse instead. @ file:///C:/Users/Claus/AppData/Roaming/Mozilla/Firefox/Profiles/tff2i3pp.default/extensions/ietab@ip.cn/components/nsIeTabWatchFactory.js:111

[16:49:10.272] Use of Mutation Events is deprecated. Use MutationObserver instead. @ chrome://global/content/bindings/toolbar.xml:276

[16:49:10.373] "ExtendedStatusbar started"

[16:49:10.516] S4EToolbars using ClassicS4EToolbars backend

[16:49:10.688] S4EDownloadService using DownloadManagerHandler backend

[16:49:10.689] S4E Calling updateWindow: {ca99dc5c-e59c-4861-af0b-ea2fa54399bb}

[16:49:10.873] nsIJSON.decode is deprecated. Please use JSON.parse instead. @ file:///C:/Users/Claus/AppData/Roaming/Mozilla/Firefox/Profiles/tff2i3pp.default/extensions/ietab@ip.cn/components/nsIeTabWatchFactory.js:111
[16:49:12.953] Unknown property 'SCROLLBAR-FACE-COLOR'. Declaration dropped. @ file:///C:/My%20Documents/My%20stuff/touch%20screen/nbb_index.htm:5

[16:49:12.954] Unknown property 'SCROLLBAR-HIGHLIGHT-COLOR'. Declaration dropped. @ file:///C:/My%20Documents/My%20stuff/touch%20screen/nbb_index.htm:5

[16:49:12.954] Unknown property 'SCROLLBAR-SHADOW-COLOR'. Declaration dropped. @ file:///C:/My%20Documents/My%20stuff/touch%20screen/nbb_index.htm:5

[16:49:12.954] Unknown property 'SCROLLBAR-ARROW-COLOR'. Declaration dropped. @ file:///C:/My%20Documents/My%20stuff/touch%20screen/nbb_index.htm:5

[16:49:12.954] Unknown property 'SCROLLBAR-BASE-COLOR'. Declaration dropped. @ file:///C:/My%20Documents/My%20stuff/touch%20screen/nbb_index.htm:5

[16:49:12.954] Unknown property 'scrollbar-3d-light-color'. Declaration dropped. @ file:///C:/My%20Documents/My%20stuff/touch%20screen/nbb_index.htm:5

[16:49:12.954] Unknown property 'scrollbar-dark-shadow-color'. Declaration dropped. @ file:///C:/My%20Documents/My%20stuff/touch%20screen/nbb_index.htm:5

[16:49:12.961] The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. @ file:///C:/My%20Documents/My%20stuff/touch%20screen/nbb_index.htm

[16:49:16.333] nsIJSON.decode is deprecated. Please use JSON.parse instead. @ file:///C:/Users/Claus/AppData/Roaming/Mozilla/Firefox/Profiles/tff2i3pp.default/extensions/ietab@ip.cn/components/nsIeTabWatchFactory.js:111

[16:49:21.444] 1429973361444 Services.HealthReport.HealthReporter WARN Saved state file does not exist.


[16:49:21.444] 1429973361444 Services.HealthReport.HealthReporter WARN No prefs data found.


[16:49:22.203] GET https://testpilot.mozillalabs.com/testcases/index.json

Hope this can help.

Thanks

[patrickjdempsey]

Error Console is only going to show you that certain CSS commands have been deprecated or their format has changed. You can just look them up on Google to see the new version... most of them you just have to remove the "-moz-" prefix, others you have to work at to get the correct formatting. But that's mostly for naught as that will NOT tell you whether or not something is actually being applied to an element or not. Again, you need to DOM Inspector and look in a theme designed for a modern version to see the differences. There's also no guarantee that the original theme author used a theme format that even remotely resembles the default theme.

[maxdamage]

Error Console is only going to show you that certain CSS commands have been deprecated or their format has changed. You can just look them up on Google to see the new version... most of them you just have to remove the "-moz-" prefix, others you have to work at to get the correct formatting. But that's mostly for naught as that will NOT tell you whether or not something is actually being applied to an element or not. Again, you need to DOM Inspector and look in a theme designed for a modern version to see the differences. There's also no guarantee that the original theme author used a theme format that even remotely resembles the default theme.

I understand that but I can live with it being broken underneath with maybe one or two minor visual errors that you can see in the screenshot of the Firefox v4.0(made for theme) applied to Firefox v25.0.Visually from what I can see is minor elements that are not working\aligned properly like they should be like the text on each tab being "aeroed",the add new tab button not being skinned but if I remove the -moz- from the .css files that might fix them?Fix the tab image but don't know where to find the image in the theme files as I might then be able to fix it?

Also the page load indicator that is positioned in the url bar where you enter the web address is slightly mis-aligned which should be able to be fixed but I will post a screenshot of what I mean plus what the dom inspector looks like with the theme and v25.0 of Firefox looks like loaded.

The screenshot was taken in Win Vista Home Basic with aero turned on and the theme has aero support.Also I just would like to fix the new tabs background and when opening images in a new tab and change the background to this colour:#2b2f32 so you don't get blinded with the default "white" background.

Do have to remove all of the -moz- prefix in al of the .css files for the theme for them to work of do I have to do a search to find which ones I need to keep and ones to remove as that might actually fix some of the visual errors seen in the screenshot?

[edit] Found the tab images....

[maxdamage]

In the following screenshot you can see the page progress indicator bar in the url bar that I was talking about:


As you can see the new tabs page has been "fixed" and the dev tools now load properly with the images and formatting:


You can see my attempt at coding to make the background of the newtabs pages darker so it looks better but so far I have failed and Firefox is sticking it's tongue out at me...