Theme changes from 1.0 to 1.5.0.*

Discuss application theming and theme development.
Post Reply
User avatar
ehume
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Theme changes from 1.0 to 1.5.0.*

Post by ehume »

This likely should be a sticky.


Changes in the default theme since 1.0:

The files marked as changed as of 2004-11-30 seem to have no differences.

A new subdirectory with apparently substantive files was added: communicator/profile.

At the bottom of browser/pageinfo.css:

Code: Select all

textbox[disabled] {
  text-style: italic;
}


New code interspersed in global/scrollbars.css:

Code: Select all

/* ..... increment .... */

scrollbarbutton[type="increment"] {
  -moz-appearance: scrollbarbutton-right;
  background-image: url("chrome://global/skin/arrow/arrow-rit.gif")
}

scrollbarbutton[type="increment"][disabled="true"] {
  background-image: url("chrome://global/skin/arrow/arrow-rit-dis.gif")
}

scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
  -moz-appearance: scrollbarbutton-down;
  background-image: url("chrome://global/skin/arrow/arrow-dn.gif")
}

scrollbar[orient="vertical"] > scrollbarbutton[type="increment"][disabled="true"] {
  background-image: url("chrome://global/skin/arrow/arrow-dn-dis.gif")
}

/* ..... decrement .... */

scrollbarbutton[type="decrement"] {
  -moz-appearance: scrollbarbutton-left;
   background-image: url("chrome://global/skin/arrow/arrow-lft.gif")
}

scrollbarbutton[type="decrement"][disabled="true"] {
   background-image: url("chrome://global/skin/arrow/arrow-lft-dis.gif")
}

scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
  -moz-appearance: scrollbarbutton-up;
   background-image: url("chrome://global/skin/arrow/arrow-up.gif")
}

scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"][disabled="true"] {
   background-image: url("chrome://global/skin/arrow/arrow-up-dis.gif")
}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* ::::::::::::::::::::: MEDIA PRINT :::::::::::::::::::::: */
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::: */


Contents.rdf file is changed.

In global/browser.css, from this:

Code: Select all

tab[busy] > .tab-icon {
  list-style-image: url("chrome://browser/skin/Throbber-small.gif");
  -moz-opacity: 0.5;
}

to this:

Code: Select all

tab[busy] > .tab-middle > .tab-icon {
  list-style-image: url("chrome://browser/skin/Throbber-small.gif");
  -moz-opacity: 0.5;
}


In global/tabbox, from this:

Code: Select all

tab[selected="true"] {
  margin-top: 0;
  border-bottom-color: transparent;
  padding: 1px 6px 4px 6px;
}


to this:

Code: Select all

tab[selected="true"] {
  -moz-user-focus: normal;
  margin-top: 0;
  border-bottom-color: transparent;
  padding: 1px 6px 4px 6px;
}

tab:focus > .tab-middle {
  -moz-outline: 1px dotted invert;
}


Thanks for the tip on ExamDiff. Amazing how easy this is with it.

Have I missed anything?
Last edited by ehume on March 5th, 2006, 2:56 pm, edited 4 times in total.
Firefox: Sic transit gloria mundi.
User avatar
CatThief
Posts: 1854
Joined: January 19th, 2004, 12:19 am
Location: Northeast USA

Post by CatThief »

Thanks, Ed,

Do you know exactly what .tab-middle is? Is tab:focus just for outlining tab text? To your knowledge are there any adverse effects (in Windows) from not including the new code in scrollbars.css? Is contents.rdf different because a new subdirectory is present in the theme or is there something else? Was mozapps/profile moved to communicator/profile?

Questions, questions, questions. :) I suppose I should actually grab the file and take a look. A lot of these things look theme-specific rather than something that is required in all themes. I'm surprised to see so many changes.
Still passionate for Mozilla themes and extensions, just not actively developing them for public release anymore.
lucx
Posts: 102
Joined: February 22nd, 2003, 7:06 pm

Re: Theme changes since 1.0

Post by lucx »

Code: Select all

tab[busy] > .tab-middle > .tab-icon

Yet another update that must be done, and one more fine example of why third party themes should not be responsible for things like this. It's ludicrous.

https://bugzilla.mozilla.org/show_bug.cgi?id=274326 : Theming system should use a master theme.
User avatar
ehume
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post by ehume »

Hmmm. SphereGnome already uses an animated icon when a tab is busy.

I haven't investigated any of this stuff, since I almost never use the default theme. I'll guess we'll have to explore these things.

As for communicator > contents.rdf, they corrected the next to the last line, which had too many spaces in it. No functional change, however.
Firefox: Sic transit gloria mundi.
User avatar
scratch
Posts: 4942
Joined: November 6th, 2002, 1:27 am
Location: Massachusetts

Post by scratch »

ehume wrote:Hmmm. SphereGnome already uses an animated icon when a tab is busy.


it won't (or, at least, shouldn't) with new builds until you make this change.
User avatar
ehume
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post by ehume »

scratch wrote:
ehume wrote:Hmmm. SphereGnome already uses an animated icon when a tab is busy.


it won't (or, at least, shouldn't) with new builds until you make this change.


Maybe. But then, it also may be that these changes are simply theme-only.

Here's an interesting bit: the new profile subdirectory in communicator is basically a clone of communicator > profile in Mozilla. It has the same contents except for the profile.css file, which was last modified on 2004-07-03. Clearly the profile manager skin was managed elsewhere in the constellation of jarfiles.

Hopefully we will see the Help window skinnning also moved to classic.jar. That way I can make those icons conform to my themes. It's not a terrible issue except in SphereGnome Jumbo and the upcoming SphereGnome Extra-Large, which are double- and triple-sized, respectively, compared with normal themes.

As it is, the Profile Manager comes up with the correct icon, despite wearing a skin that is not Classic. I think that's because the Classic skin is put on as the browser loads--I have watched the skin change as the program comes up.

I will check to see if my "old" 1.0 themes show their animation with this new 1.0+ Firefox.
Firefox: Sic transit gloria mundi.
User avatar
ehume
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post by ehume »

And you are right: the old theme no longer has an animated image showing. I'm going to have to fix seven themes.
Firefox: Sic transit gloria mundi.
User avatar
CatThief
Posts: 1854
Joined: January 19th, 2004, 12:19 am
Location: Northeast USA

Post by CatThief »

ehume wrote:And you are right: the old theme no longer has an animated image showing. I'm going to have to fix seven themes.

Well that's all I need to hear. There will be no updates to my theme until this version evolves into a final release. Maintaining ongoing changes for nightly support is, if I may borrow a word from lucx, ludicrous!

Ed, do you know what date these changes began to appear?
Still passionate for Mozilla themes and extensions, just not actively developing them for public release anymore.
User avatar
cheeaun
Posts: 826
Joined: November 5th, 2002, 10:55 pm
Location: Malaysia
Contact:

Post by cheeaun »

Thanks a lot, edhume.

CatThief wrote:Do you know exactly what .tab-middle is?
The inversed color of the background color. Often useful in Windows environment, if you see very, very carefully..

CatThief wrote:Is tab:focus just for outlining tab text?[/color]
From the codes edhume posted, I guess the answer is yes. On Windows, there's a focus outline on the tabs's text, just like the button's text.

CatThief wrote:To your knowledge are there any adverse effects (in Windows) from not including the new code in scrollbars.css?
I think not, again, from the codes, it's just simply changed for disabled scrollbars, maybe something new from the developers? Disabled scrollbars?

CatThief wrote:Is contents.rdf different because a new subdirectory is present in the theme or is there something else? Was mozapps/profile moved to communicator/profile?
Hm.. Aren't those contents.rdf files useless? I remove all of them from my theme, and nothing bad happens..

Ok, edhume, could you check out the xbl binding of the 'tab' element and post the whole tabbox.xml content here? I supposed the developers have modified that file, added a child container, maybe 'hbox' with a class of .tab-middle, to the tab element. If you can post it, I can implement it right away on my theme, no need to wait. ;-)
Phoenity http://phoenity.com/
You should follow me on Twitter here http://twitter.com/cheeaun
User avatar
scratch
Posts: 4942
Joined: November 6th, 2002, 1:27 am
Location: Massachusetts

Post by scratch »

cheeaun wrote:
CatThief wrote:Do you know exactly what .tab-middle is?
The inversed color of the background color. Often useful in Windows environment, if you see very, very carefully..


actually, i don't think so. i think it's the middle section of the tab, the part that's not the left edge or the right edge. this was probably added for those corrected tabs that ben mentioned in his blog awhile back. after all, it's a class, not a color.
User avatar
ehume
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post by ehume »

As far as I can tell, there have been no changes other than what I posted.

The last xml changes in the classic jar appear to have been made in June 2004.

Tabbox.css was changed 2004-12-02. The full text:

Code: Select all

/*
 * The contents of this file are subject to the Netscape Public
 * License Version 1.1 (the "License"); you may not use this file
 * except in compliance with the License. You may obtain a copy of
 * the License at http://www.mozilla.org/NPL/
 *
 * Software distributed under the License is distributed on an "AS
 * IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or
 * implied. See the License for the specific language governing
 * rights and limitations under the License.
 *
 * The Original Code is Mozilla Communicator client code, released
 * March 31, 1998.
 *
 * The Initial Developer of the Original Code is Netscape
 * Communications Corporation. Portions created by Netscape are
 * Copyright (C) 1998-2001 Netscape Communications Corporation. All
 * Rights Reserved.
 *
 * Contributor(s):
 *   Joe Hewitt (hewitt@netscape.com)
 */

/* ===== tabbox.css =================================================
  == Styles used by XUL tab-related elements.
  ======================================================================= */

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

/* ::::: tabs ::::: */

.tabs-left,
.tabs-right {
  border-bottom: 2px solid;
  -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow;
}

/* ::::: tabpanels ::::: */

tabpanels {
  -moz-appearance: tabpanels;
  border-right: 2px solid;
  border-bottom: 2px solid;
  border-left: 2px solid;
  -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow;
  -moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow;
  -moz-border-left-colors: ThreeDHighlight ThreeDLightShadow;
  padding: 8px;
  background-color: -moz-Dialog;
  color: -moz-DialogText;
}

/* ::::: tab ::::: */

tab
{
  -moz-appearance: tab;
  margin-top: 2px;
  border-top: 2px solid;
  border-right: 2px solid;
  border-left: 2px solid;
  border-bottom: 1px solid ThreeDHighlight;
  -moz-border-top-colors: ThreeDHighlight ThreeDLightShadow;
  -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow;
  -moz-border-left-colors: ThreeDHighlight ThreeDLightShadow;
  -moz-border-radius-topleft: 2px;
  -moz-border-radius-topright: 2px;
  -moz-border-radius-bottomright: 1px;
  padding: 1px 4px 2px 4px;
  background-color: -moz-Dialog;
  color: -moz-DialogText;
}

.tab-text {
  margin: 0 !important;
}

tab[selected="true"] {
  -moz-user-focus: normal;
  margin-top: 0;
  border-bottom-color: transparent;
  padding: 1px 6px 4px 6px;
}

tab:focus > .tab-middle {
  -moz-outline: 1px dotted invert;
}

tab[beforeselected="true"] {
  -moz-appearance: tab-left-edge;
  border-right: none;
  -moz-border-radius-topright: 0;
}

tab[afterselected="true"] {
  -moz-appearance: tab-right-edge;
  border-left: none;
  -moz-border-radius-topleft: 0;
}

tab[first-tab="true"][selected="true"] {
  padding-right: 5px;
  padding-left: 5px;
}

/* ::::: tab-bottom ::::::::::
   :: Tabs that are attached to the bottom of a panel, but not necessarily
   :: a tabpanels.
   ::::: */

.tab-bottom {
  margin-top: 0;
  margin-bottom: 2px;
  border-top: 1px solid;
  border-bottom: 2px solid;
  -moz-border-top-colors: ThreeDShadow;
  -moz-border-bottom-colors: ThreeDShadow ThreeDLightShadow;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 2px;
  -moz-border-radius-bottomleft: 2px;
  padding: 2px 4px 1px 4px;
}

.tab-bottom[selected="true"] {
  margin-bottom: 0;
  -moz-border-top-colors: -moz-Dialog;
  padding: 4px 6px 1px 6px;
}

.tab-bottom[beforeselected="true"] {
  -moz-border-radius-bottomright: 0;
}

.tab-bottom[afterselected="true"] {
  -moz-border-radius-bottomleft: 0;
}

/* ::::: tabs-bottom ::::: */

.tabs-bottom > .tabs-left,
.tabs-bottom > .tabs-right {
  border-top: 1px solid ThreeDShadow;
  border-bottom: none;
}
Firefox: Sic transit gloria mundi.
User avatar
cheeaun
Posts: 826
Joined: November 5th, 2002, 10:55 pm
Location: Malaysia
Contact:

Post by cheeaun »

scratch wrote:
cheeaun wrote:
CatThief wrote:Do you know exactly what .tab-middle is?
The inversed color of the background color. Often useful in Windows environment, if you see very, very carefully..

actually, i don't think so. i think it's the middle section of the tab, the part that's not the left edge or the right edge. this was probably added for those corrected tabs that ben mentioned in his blog awhile back. after all, it's a class, not a color.
Opps, I thought CatThief was confused with the 'invert' value.. You're right, it's a class for an element contained inside the tab element with the border color of the inversed color of the background color, when the tab is focused.

edhume, I mean tabbox.xml, not tabbox.css. Sorry if I confused you. ;-)
tabbox.xml is an xbl binding file for tab-related elements, located at:
chrome://global/content/bindings/tabbox.xml
Phoenity http://phoenity.com/
You should follow me on Twitter here http://twitter.com/cheeaun
Pikachu90000
Posts: 549
Joined: November 29th, 2004, 9:53 pm

Post by Pikachu90000 »

What changes are there to contents.rdf
pika9@ deviantART ~Home to the Winstripe Classic theme.
Pikachu90000's Firefox Theme Review Blog
User avatar
ehume
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post by ehume »

Pikachu90000 wrote:What changes are there to contents.rdf

Removal of extra spaces to make it look standard.
Firefox: Sic transit gloria mundi.
User avatar
ehume
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post by ehume »

cheeaun wrote:edhume, I mean tabbox.xml, not tabbox.css. Sorry if I confused you. ;-)

tabbox.xml is an xbl binding file for tab-related elements, located at:
chrome://global/content/bindings/tabbox.xml


I can't find that, either inside classic.jar or in installdir > chrome
Firefox: Sic transit gloria mundi.
Post Reply