MozillaZine

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

Discuss application theming and theme development.
mcdavis

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

Post Posted May 14th, 2015, 5:26 pm

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


In Firefox 25, the chrome URL for that file is:

chrome://browser/skin/newtab/newTab.css

which means that in your theme, you want to put it at

chrome/win/browser/newtab/newTab.css

and at

chrome/mac/browser/newtab/newTab.css

I think that was added for Firefox 12 in Bug 455553.
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 15th, 2015, 1:50 pm

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


In Firefox 25, the chrome URL for that file is:

chrome://browser/skin/newtab/newTab.css

which means that in your theme, you want to put it at

chrome/win/browser/newtab/newTab.css

and at

chrome/mac/browser/newtab/newTab.css

I think that was added for Firefox 12 in Bug 455553.


As you can see in the "fixed" theme I sent to you the new tabs page background is the colour I wanted it to be but I can't find the code for the background when you click on the hide new tabs button.Will go through your other posts and read them thoroughly.

Thank you.

[edit]Will remove the duplicates and put the TopLevelImageDocument.css here:
aerofox-bundle-4.0.1.5\chrome\win\global\media\TopLevelImageDocument.css

Would it be safe to change the reference in the chrome.manifest file for the mac part of the theme and point it to use the win theme?Is that safe?
Last edited by maxdamage on May 15th, 2015, 2:15 pm, edited 3 times in total.

mcdavis

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

Post Posted May 15th, 2015, 5:02 pm

maxdamage wrote:Would it be safe to change the reference in the chrome.manifest file for the mac part of the theme and point it to use the win theme?Is that safe?


The Mac does require special handling. You can't just take a theme for Firefox on MSWindows and expect it to run on the Mac. It's *mostly* the same, but the differences are enough that I would consider a theme "broken" if it doesn't deal with them on the Mac (if it's meant to be used on the Mac at all). So, I'd say there needs to be some Mac-specific instructions in chrome.manifest, but you don't need a complete separate copy of the whole theme.

You probably want to look at how other themes are doing it, like mine or the Red Cats themes (which I just happened to look at a couple days ago) or any of them which are available for the Mac.

A reasonable approach might be to get your theme up to date on whatever you're using for your desktop, then start thinking about adding support for all the platforms after that.
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 17th, 2015, 9:05 am

mcdavis wrote:
maxdamage wrote:Would it be safe to change the reference in the chrome.manifest file for the mac part of the theme and point it to use the win theme?Is that safe?


The Mac does require special handling. You can't just take a theme for Firefox on MSWindows and expect it to run on the Mac. It's *mostly* the same, but the differences are enough that I would consider a theme "broken" if it doesn't deal with them on the Mac (if it's meant to be used on the Mac at all). So, I'd say there needs to be some Mac-specific instructions in chrome.manifest, but you don't need a complete separate copy of the whole theme.

You probably want to look at how other themes are doing it, like mine or the Red Cats themes (which I just happened to look at a couple days ago) or any of them which are available for the Mac.

A reasonable approach might be to get your theme up to date on whatever you're using for your desktop, then start thinking about adding support for all the platforms after that.



Well putting the TopLevelImageDocument.css here:
aerofox-bundle-4.0.1.5\chrome\win\global\media\TopLevelImageDocument.css

worked! :D Do I need to fix the ImageDocument.css file to add the fixes I did to the TopLevelImageDocument.css so it does the same to images opened from webpages?

Now to fix the add new tab buttons as it loads the default image when I move the cursor over it and the tabs button image(not that good at fixing images or creating them...) and text problem.I think I could "live" with the hide new tabs colour being white as I won't be using it....

mcdavis

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

Post Posted May 17th, 2015, 3:43 pm

maxdamage wrote:Well putting the TopLevelImageDocument.css here:
Code: Select all
aerofox-bundle-4.0.1.5\chrome\win\global\media\TopLevelImageDocument.css

worked! :D


Fantastic, that's great.

Do I need to fix the ImageDocument.css file to add the fixes I did to the TopLevelImageDocument.css so it does the same to images opened from webpages?


I'm not sure which file that is, can you refresh me? Is that a file you created as part of your work, or did the original Aerofox have that file in it? I don't recognize it, I don't have it in my theme, and it doesn't show up in any of the searches I tried, so I'd guess it's not needed.

Now to fix the add new tab buttons as it loads the default image when I move the cursor over it and the tabs button image(not that good at fixing images or creating them...) and text problem.I think I could "live" with the hide new tabs colour being white as I won't be using it....


Which button is that? Could you put up a screenshot pointing to it, please?
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 18th, 2015, 7:51 am

Let me just mention again: you really should not be running Firefox 25. Older Firefoxes have known security holes easy to exploit. It's up to you, and I'm helping you because it's what you asked, and I'll keep helping, but I'm cringing at the idea of being online with that.
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 18th, 2015, 9:25 am

mcdavis wrote:
maxdamage wrote:Do I need to fix the ImageDocument.css file to add the fixes I did to the TopLevelImageDocument.css so it does the same to images opened from webpages?


I'm not sure which file that is, can you refresh me? Is that a file you created as part of your work, or did the original Aerofox have that file in it? I don't recognize it, I don't have it in my theme, and it doesn't show up in any of the searches I tried, so I'd guess it's not needed.


Here is the code for the ImageDocument.css file:
/* -*- Mode: C++; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
/* 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/. */

/*
* This CSS stylesheet defines the rules to be applied to any ImageDocuments,
* including those in frames.
*/

@media not print {
.overflowing {
cursor: zoom-out;
}

.shrinkToFit {
cursor: zoom-in;
}
}

@media print {
/* We must declare the image as a block element. If we stay as
an inline element, our parent LineBox will be inline too and
ignore the available height during reflow.
This is bad during printing, it means tall image frames won't know
the size of the paper and cannot break into continuations along
multiple pages. */
img {
display: block;
}
}


mcdavis wrote:
maxdamage wrote:Now to fix the add new tab buttons as it loads the default image when I move the cursor over it and the tabs button image(not that good at fixing images or creating them...) and text problem.I think I could "live" with the hide new tabs colour being white as I won't be using it....


Which button is that? Could you put up a screenshot pointing to it, please?

Here in this screenshot of the webbrowser with the TopLevelImageDocument.css working\loaded:
Image
Look to the right of the tabs at the top and you can see the open a new tab button which is not suppose to be that image being loaded.You can check the newtab image in the .xpi copy of the fixed theme I emailed to you in the aerofox-bundle-4.0.1.5\chrome\win\browser\tabbrowser folder.

mcdavis

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

Post Posted May 20th, 2015, 2:21 pm

To identify an element in Firefox toolbars, you can use DOM Inspector (and a couple of helper add-ons). I'll just put the links here in case you don't have that yet, I can't tell if you do or not.

https://addons.mozilla.org/en-US/firefo ... ctor-6622/
https://addons.mozilla.org/en-US/firefo ... inspector/
https://addons.mozilla.org/en-US/firefo ... inspector/

In the screenshot, the white button is the new tab toolbarbutton.

Written as a CSS selector, that's toolbarbutton#new-tab-button.toolbarbutton-1.chromeclass-toolbar-additional.

In XUL source (Firefox source code), that's:

Code: Select all
      <toolbarbutton id="new-tab-button"
                     class="toolbarbutton-1 chromeclass-toolbar-additional"
                     label="&tabCmd.label;"
                     command="cmd_newNavigatorTab"
                     onclick="checkForMiddleClick(this, event);"
                     tooltiptext="&newTabButton.tooltip;"
                     ondrop="newTabButtonObserver.onDrop(event)"
                     ondragover="newTabButtonObserver.onDragOver(event)"
                     ondragenter="newTabButtonObserver.onDragOver(event)"
                     ondragexit="newTabButtonObserver.onDragExit(event)"
                     removable="true"/>


If you install those add-ons above, you can shift-right-click the mystery element to open DOM Inspector to it and see what it is.

So the next question is how to style it, once you know what it is. So you want to look for rules in the default theme that target that element, and modify them in your theme to do what you want.

I'm sure you'll have follow-up questions. Please keep asking; I'll explain anything and everything you want to know.
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 22nd, 2015, 4:58 pm

@mcdavis

I thought the code for that was located in the tabs.css file as the images used\found in the aerofox-bundle-4.0.1.5\chrome\win\browser\tabbrowser folder and the images used for it is the newtab.png as it contains both the normal add tab image plus the highlighted one as well.

Will install the element inspector and the stacked inspector as well since I have the DOM inspector installed.

mcdavis

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

Post Posted May 23rd, 2015, 12:52 am

For DOM Inspector, also this one, which I've been using since forever and just got updated:

https://addons.mozilla.org/en-US/firefo ... torwidget/
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 25th, 2015, 1:58 pm

@mcdavis

Is it safe to save .xul files from the DOM Inspector when viewing them to the hdd and modifiy them,etc... and will those changes work? ie. If I save the
Code: Select all
chrome://mozapps/content/downloads/downloads.xul
and save it to:
Code: Select all
aerofox-bundle-4.0.1.5\chrome\win\mozapps\content\downloads\downloads.xul
and add say a background image to the bottom bar of the downloads window by the clear downloads button and search window like I did with the add-on bar?

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:Fix the add new tab button when you move the cusor over the button and not have the white\grey image appear as seen in the posted screenshots.
4:Skin the bottom "bar" of the download window by the Clear list and search window if possible..
5:Have the background colour of the new tabs window when the thumbnails page is disabled set to #2b2f32.
6: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.
[edit]
4:Changed background colour to the open image in a new tab from white to #2b2f32
Last edited by maxdamage on May 25th, 2015, 6:02 pm, edited 1 time in total.

mcdavis

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

Post Posted May 25th, 2015, 2:29 pm

maxdamage wrote:Is it safe to save .xul files from the DOM Inspector when viewing them to the hdd and modifiy them,etc... and will those changes work?


Yes and no, but mostly no.

If you're talking about doing this for your personal use only, that's a possible yes. Those XUL files are the ones in omni.ja; that's where Firefox loads it from. if you modify it, you'd have to work out a way to put it back into omni.ja and put the modified omni.ja in Firefox's installation directory, where the app is. You'd basically be modifying Firefox itself. This isn't part of the theme (maybe obviously not, but worth saying). I think modifying omni.ja is possible but a pain, but I don't know and I've never done it.

You could write a new extension-type add-on which uses an override directive in its chrome.manifest (in the extension, not in the theme) to use your modified downloads.xul instead of the one in Firefox. You'd put your modified file in the extension itself. That would be doable, if you're willing to do the work of creating a new extension.

One issue is that future Firefox versions will change those files that you want to modify, so you'd have to be aware of those changes and adjust your modified copy as needed. Some XUL doesn't change very often; some XUL changes every time a new release comes out.

If, on the other hand, you're talking about doing this as part of your theme, for you and/or other people to use, then no, that can't be done. There's no way to tell Firefox to use that XUL from your theme instead of its own file. (Also, it wouldn't pass review if you tried to release your theme on AMO, but the main point is you just can't get what you want by putting it in your theme.)
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 25th, 2015, 2:35 pm

maxdamage wrote:ie. If I .. save it to:
Code: Select all
aerofox-bundle-4.0.1.5\chrome\win\mozapps\content\downloads\downloads.xul


No, that's not possible. You can put it there, but there's no way to tell Firefox to use that one.

EDIT: changed can't put to can put.
Last edited by mcdavis on May 25th, 2015, 3:12 pm, edited 1 time in total.
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 25th, 2015, 3:07 pm

maxdamage wrote:1:Fix all three tab images.


Could you tell me about any work you've done with tabs? Is that the way the theme was, or have you worked with that some? It looks like you may have taken some Fx29 Australis-style tabs code and mixed it in with theme code, I'm wondering if that's what you're trying to accomplish.


2:Fix\remove the "transparency" in the text area in the tabs element as seen in the posted screenshots.


I'm looking at the screenshot but I'm not sure what part is transparent. You might consider putting up another screenshot with a red box that precisely encloses the transparent area?

3:Fix the add new tab button when you move the cursor over the button and not have the white\grey image appear as seen in the posted screenshots.


You should search your code for CSS rules that apply to that toolbutton in the hover state, indicated by the use of :hover in the selector. You can use DOM Inspector to set :hover on that element (right-click the element in DOM Inspector tree view, then pick Set pseudo-classes ...), then look at the matching rules in DOM Inspector. The CSS rules could be written to match the element id (#new-tab-button), or classes (like .toolbarbutton-1) or any of several other ways, so it'll be some detective work, part of getting to know your code.

4:Skin the bottom "bar" of the download window by the Clear list and search window if possible.


That should be possible, even without modifying the XUL. You could apply it as a background image, or use multiple layered background images with background color. You can write CSS rules that set background-position, background-size, background-repeat, background-image and so on to put it where you want and make it scale how you want.

https://developer.mozilla.org/en-US/doc ... background
https://developer.mozilla.org/en-US/doc ... ound-image
https://developer.mozilla.org/en-US/doc ... d-position
https://developer.mozilla.org/en-US/doc ... und-repeat
https://developer.mozilla.org/en-US/doc ... round-size

Also, in case you don't know about -moz-appearance yet, that's a CSS property you can set on any element to tell Firefox to draw it using some predefined appearance. Theme developers don't usually want that, because it ignores most CSS properties your theme may set on an element having -moz-appearance set to something. (For example, you may say use a red border but it just ignores that, and draws a border using some predefined style instead.) Theme developers often set -moz-appearance: none in a CSS rule so all their CSS properties in rules apply. So, that's one thing to be aware of.

https://developer.mozilla.org/en-US/doc ... appearance


5:Have the background colour of the new tabs window when the thumbnails page is disabled set to #2b2f32.


Does your dev log say that's done already?

6:Fix the page load progress indicator that is located at the bottom of the url bar.


That was removed from Firefox itself. Do you still see it with Firefox 25? If so, is it coming from an add-on and do you know which add-on?

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?


You can email me your XPI any time, with whatever your current work is.
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 25th, 2015, 5:02 pm

mcdavis wrote:
maxdamage wrote:1:Fix all three tab images.


Could you tell me about any work you've done with tabs? Is that the way the theme was, or have you worked with that some? It looks like you may have taken some Fx29 Australis-style tabs code and mixed it in with theme code, I'm wondering if that's what you're trying to accomplish.


2:Fix\remove the "transparency" in the text area in the tabs element as seen in the posted screenshots.


I'm looking at the screenshot but I'm not sure what part is transparent. You might consider putting up another screenshot with a red box that precisely encloses the transparent area?

6:Fix the page load progress indicator that is located at the bottom of the url bar.


That was removed from Firefox itself. Do you still see it with Firefox 25? If so, is it coming from an add-on and do you know which add-on?



Image

Look at the text Connecting.... in the tab area in the above screenshot and you can see the background of the text is the same blue aero colour as the rest of the browser and you can see that in each screenshot of the theme with Firefox.

I am using the status4eva addon which could be adding the page load progress indicator bar back in which I don't mind though.It is just a couple of pixel above the bottom of the url bar than it is in FireFox v4.0.

mcdavis wrote:
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?


You can email me your XPI any time, with whatever your current work is.


Thanks.Will do that.

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 3 guests