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

aboutDialog.css

Post by ehume »

In browser/aboutDialog.css there are many items like this:

Code: Select all

#userAgent {
  margin: 3px 10px 3px 5px;
  background-color: #FFFFFF;
  color: #000000;
  padding: 1px 0px 1px 3px;

becomes

Code: Select all

#userAgent {
  margin-top: 3px;
  margin-bottom: 3px;
  -moz-margin-start: 5px;
  -moz-margin-end: 10px;
  background-color: #FFFFFF;
  color: #000000;
  padding-top: 1px;
  padding-bottom: 1px;
  -moz-padding-start: 3px;
  -moz-padding-end: 0px;


It looks to me that this is an accommodation to RTL languages.

All changes to this file are of this type.
Firefox: Sic transit gloria mundi.
User avatar
ehume
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

More changes to 2005-02-26

Post by ehume »

bookmarksManager.css - one RTL change
browser/browser.css - added lines:

Code: Select all

.bookmark-item[livemark="true"][chromedir="rtl"] { 
  list-style-image: url("chrome://browser/skin/livemark-item-rtl.png") !important;
}

more RTL format changes
use of [buttonover=true] code in place of :hover (a change I missed in 2005-02-06 vs earlier versions).
This:

Code: Select all

#back-button {
  -moz-image-region: rect(0px 24px 24px 0px);
}

/* back button-- */

#back-button[buttonover="true"] {
  -moz-image-region: rect(24px 24px 48px 0px);
}
#back-button[disabled="true"] {
  -moz-image-region: rect(48px 24px 72px 0px) !important;
}

to

Code: Select all

/* back button-- */

#back-button, #forward-button[chromedir="rtl"] {
  -moz-image-region: rect(0px 24px 24px 0px);
}

#back-button[buttonover="true"], #forward-button[buttonover="true"][chromedir="rtl"] {
  -moz-image-region: rect(24px 24px 48px 0px);
}
#back-button[disabled="true"], #forward-button[disabled="true"][chromedir="rtl"] {
  -moz-image-region: rect(48px 24px 72px 0px) !important;
}


etc.
Firefox: Sic transit gloria mundi.
User avatar
ehume
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

pageInfo.css

Post by ehume »

one RTL change

This:

Code: Select all

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

to

Code: Select all

textbox[disabled] {
  font-style: italic;
}
Firefox: Sic transit gloria mundi.
User avatar
ehume
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

preferences.css

Post by ehume »

browser/pref/pref.css

becomes

browser/preferences/preferences.css,

with a large number of changes reflecting the change from the vertically-stacked Mac OS 1-9 method to Windows-style tabs.

There is a new global/preferences.
Last edited by ehume on February 26th, 2005, 6:20 pm, edited 1 time in total.
Firefox: Sic transit gloria mundi.
User avatar
ehume
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post by ehume »

searchbar.css - one rtl-related change
alert.css - rtl-related changes only
autocomplete.css - ditto

global/browser.css

Code: Select all

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

becomes

Code: Select all

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


global/button.css - RTL changes only
global/checkbox.css - ditto

global/config.css adds this at the bottom:

Code: Select all

#configTree 

  margin-top: 5px;
  margin-bottom: 5px;
}

#filterRow
{
  margin-top: 5px;
}


global/console.css - RTL changes only
global/dialog.css - ditto
global/expander.css - "
global/findBar.css - "
global/formatting.css - "

global/global.css from this:

Code: Select all

window,
page,
dialog,
wizard {
  -moz-appearance: window;
  background-color: -moz-Dialog;
  color: -moz-DialogText;
  font: message-box;
}

to this

Code: Select all

window,
page,
dialog,
wizard,
prefwindow {
  -moz-appearance: window;
  background-color: -moz-Dialog;
  color: -moz-DialogText;
  font: message-box;
}
plus RTL changes
Firefox: Sic transit gloria mundi.
User avatar
ehume
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post by ehume »

global/listbox.css adds this:

Code: Select all

listbox[disabled="true"] {
  color: GrayText;
}
plus RTL changes.

global/menu.css - RTL changes only

global/menulist.css - RTL changes plus this

Code: Select all

.menulist-label-box,
menulist[open="true"]:focus > .menulist-label-box {
  border: 1px solid transparent;
  background-color: transparent;
  color: inherit;
}
to this

Code: Select all

.menulist-label-box,
menulist[open="true"]:focus > .menulist-label-box {
  border: 1px solid transparent;
  background-color: transparent;
  color: inherit;
  -moz-box-align: center;
}

.menulist-icon[src] {
  margin: 0px 2px 0px 2px;
}
Firefox: Sic transit gloria mundi.
User avatar
ehume
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post by ehume »

global/radio.css - RTL changes only
global/scrollbox.css - ditto
global/textbox.css - from

Code: Select all

textbox 
{ . . .
  padding: 1px 0px 1px 2px; . . .
 }
to

Code: Select all

textbox 
{ . . .
  padding: 2px 2px 3px 4px; . . .
}


global/toolbar.css - one RTL change
global/toolbarbutton.css - RTL changes only (and an associated error)
global/wizard.css - RTL changes only
Firefox: Sic transit gloria mundi.
User avatar
ehume
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post by ehume »

mozapps/downloads/downloads.css - RTL changes, plus

deletion of -moz-user-focus: ignore;
removal of code related to #optionsButton

mozapps/downloads/unknownContentType.css - RTL changes only
mozapps/extensions/about.css - one RTL change
mozapps/extensions/extensions.css - RTL changes only
mozapps/pref/pref.css - RTL changes only
mozapps/update/update.css - RTL changes only
mozapps/xpinstall/xpinstallConfirm.css - RTL changes only

Options.png is now in browser/preferences
there is a new alert-exclam/png icon in global/icons

That's about it, I think.
Firefox: Sic transit gloria mundi.
Pikachu90000
Posts: 549
Joined: November 29th, 2004, 9:53 pm

Post by Pikachu90000 »

What is RTL?
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 »

Right-to-left. Some of the icons introduced in january-February 2005 were mirror images of existing icons, and were labeled -rtl. Now the theme code has been rewritten to start and end rather than left and right, apparently to accommodate right-to-left languages like Hebrew and Arabic.
Firefox: Sic transit gloria mundi.
User avatar
CatThief
Posts: 1854
Joined: January 19th, 2004, 12:19 am
Location: Northeast USA

Post by CatThief »

I don't quite understand some of these changes because I am seeing inconsistencies, often inside the same file. Example from global/browser.css:

Code: Select all

toolbarbutton.bookmark-item {
  margin: 0;
  min-width: 0;
  max-width: 13em;
  padding: 2px 3px;
}

Shouldn't the code be changed to this:

Code: Select all

toolbarbutton.bookmark-item {
  margin: 0;
  min-width: 0;
  max-width: 13em;
  padding-top: 2px;
  padding-bottom: 2px;
  -moz-padding-start: 3px;
  -moz-padding-end: 3px;
}

And shouldn't this:

Code: Select all

toolbar[mode="text"] .toolbarbutton-text {
  padding: 0 !important;
  margin: 3px 5px !important;
}

be changed to this:

Code: Select all

toolbar[mode="text"] .toolbarbutton-text {
  padding: 0 !important;
  margin-top: 3px !important;
  margin-bottom: 3px !important;
  -moz-margin-start: 5px !important;
  -moz-margin-end: 5px !important;
}


Also, do the <b>margin: 0</b> and the <b>padding: 0</b> in the above examples also have to be broken down (top, bottom, start, end) or is this single value still allowed? I'm finding this quite confusing! Grrrrr.
Still passionate for Mozilla themes and extensions, just not actively developing them for public release anymore.
User avatar
ehume
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post by ehume »

I think margin: 3px 5px is OK because it is symmetrical: start and end are the same numbers.
Firefox: Sic transit gloria mundi.
User avatar
aaron
Posts: 3130
Joined: November 4th, 2002, 8:49 pm
Location: Texas
Contact:

Post by aaron »

I find it all confusing too, CatThief. I'm not gonna break my neck modifying my themes right now only to have something change yet again down the road. I'll wait until 1.1pr or 1.1 final comes out to do my updates.
User avatar
CatThief
Posts: 1854
Joined: January 19th, 2004, 12:19 am
Location: Northeast USA

Post by CatThief »

ehume wrote:I think margin: 3px 5px is OK because it is symmetrical: start and end are the same numbers.

Look at the third and fourth examples I quoted. They were broken down with top, bottom, start, and end, yet they are symmetrical as you said. Redoing the code this way doesn't make much sense but I'm sure there must be a reason for it somewhere. :? I wonder what will happen if we keep the "old" way of doing things. As long as it isn't depreciated, I can't see how anything would break.

Aaron, I'm not really changing anything just yet... just trying to get a head start on what lies ahead. So far the new Preferences/Options box code is a snap, but this padding and margin stuff looks like a real mess.
Still passionate for Mozilla themes and extensions, just not actively developing them for public release anymore.
User avatar
ehume
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post by ehume »

I for one am not going to adapt my themes for right-to-left languages. As best I can tell, they will display OK without our revamping the entire look of our themes.

I think I will, however, try to keep up with the non-RTL changes. But, like you, I'm going to wait a bit. I have other things to do first.

If I have missed some changes, please somebody post them.
Firefox: Sic transit gloria mundi.
Post Reply