Theme changes from Firefox 1.5 to 2.0

ehume · Post by **ehume** » February 28th, 2006, 7:06 pm

Between Firefox release 1.5.0.1 (the theme portion of which is identical to Firefox 1.5) and the Firefox branch daily build (Gecko 1.8.1) 2006-02-28-0515, the following changes:

In browser/browser.css, the following code was removed:

Code: Select all

/* mail button */

#mail-button {
  -moz-image-region: rect(0px 360px 24px 336px);
}
#mail-button:hover {
  -moz-image-region: rect(24px 360px 48px 336px);
}
#mail-button[disabled="true"] {
  -moz-image-region: rect(48px 360px 72px 336px);
}

and

Code: Select all

/* mail button */

toolbar[iconsize="small"] #mail-button {
  -moz-image-region: rect(0px 240px 16px 224px);
}
toolbar[iconsize="small"] #mail-button:hover {
  -moz-image-region: rect(16px 240px 32px 224px);
}
toolbar[iconsize="small"] #mail-button[disabled="true"] {
  -moz-image-region: rect(32px 240px 48px 224px);
}

From this

Code: Select all

/* ::::: go button ::::: */

#go-button {
  list-style-image: url("chrome://browser/skin/Go.png");
  -moz-image-region: rect(0px 20px 20px 0px);
  padding-top: 2px;
  padding-bottom: 2px;
  -moz-padding-start: 3px;
  -moz-padding-end: 5px;
}

to

Code: Select all

/* ::::: go button ::::: */

#go-container {
  -moz-box-orient: vertical; /* for go button flex hack */
}

#go-button {
  -moz-box-flex: 1; /* expand to fill toolbar height */
  list-style-image: url("chrome://browser/skin/Go.png");
  -moz-image-region: rect(0px 20px 20px 0px);
  padding-top: 2px;
  padding-bottom: 2px;
  -moz-padding-start: 3px;
  -moz-padding-end: 5px;
}

From

Code: Select all

#go-button[disabled="true"] {
  -moz-image-region: rect(0px 60px 20px 40px);
}

#go-button > .toolbarbutton-text {
  display: -moz-box !important;
}

to

Code: Select all

#go-button[disabled="true"] {
  -moz-image-region: rect(0px 60px 20px 40px);
}

#go-button > .toolbarbutton-icon {
  margin: 0;
}

#go-button > .toolbarbutton-text {
  display: -moz-box !important;
  margin: 0 2px 1px 2px !important;
}

This was added:

Code: Select all

#places-bookmark {
  list-style-image: url("chrome://browser/skin/bookmarks/Bookmarks-toolbar.png");
  -moz-image-region: rect(0px 24px 24px 0px);
}

#places-subscribe {
  list-style-image: url("chrome://browser/skin/page-livemarks.png");
  opacity: 1.0;
}

#places-subscribe[disabled="true"] {
  opacity: 0.3;
}

#bookmarksBarShowPlaces {
  list-style-image: url("chrome://browser/skin/places/places-icon.png");
}


/* Personal toolbar */
.toolbar-drop-indicator {
  height: 16px;
  width: 5px;
  margin-bottom: -8px;
  position: relative;
  background: url('chrome://browser/skin/places/toolbarDropMarker.png') 50% 50% no-repeat;
}

.toolbar-drop-indicator-bar {
  display: none;
  height: 16px;
  margin-bottom: -16px;
  margin-left: 4px;
  position: relative;
}

.toolbar-drop-indicator-bar[dragging="true"] {
  display: -moz-box;
}

toolbarbutton.bookmark-item[dragover="true"][open="true"] {
  -moz-appearance: none;
  background: Highlight !important;
  color: HighlightText !important;
  list-style-image: url('chrome://browser/skin/places/folderDragOver.png') !important;
  -moz-image-region: rect(0px, 16px, 16px, 0px) !important;
}

.bookmark-item[dragover-into="true"] {
  background: Highlight !important;
  color: HighlightText !important;
}

.bookmark-item[dragover-top="true"] {
  -moz-border-top-colors: #000000;
}

.bookmark-item[dragover-bottom="true"] {
  -moz-border-bottom-colors: #000000;
}

More to follow after I put a kid to bed.

ehume · Post by **ehume** » February 28th, 2006, 7:24 pm

Still working on the 2006-02-28 nightly:

in mozapps/profile, profileicon.gif was removed, and profileicon.png was added.

In the two preferences.css files, the licensing was changed from Netscape and NPL to Mozilla and MPL.

In help.css, this was added:

Code: Select all

#context-copy[disabled="true"] {
  visibility: collapse;
}

I prefer to see disabled code options, not absent ones; but then, I'm quite obsessive about those things. This is a change I won't apply to my own themes.

In extensions.css, from

Code: Select all

extension[disabled="true"][compatible="false"] .extension-item-description,
extension[incompatibleUpdate="true"] .extension-item-description {
  color: #C77173;
}

to

Code: Select all

extension[disabled="true"][compatible="false"] .extension-item-description,
extension[satisfiesDependencies="false"] .extension-item-description,
extension[incompatibleUpdate="true"] .extension-item-description {
  color: #C77173;
}

in support of the new extensions dependencies function, which is something I don't understand yet.

This

Code: Select all

# ***** BEGIN LICENSE BLOCK *****

was added to mozapps/pref.css.

In profileSelection.css, from

Code: Select all

#profiles > listitem {
  list-style-image: url("chrome://mozapps/skin/profile/profileicon.gif");
}

to

Code: Select all

#profiles > listitem {
  list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
}

(change from gif to png)

The toolbar png's are smaller - they have had the mail icons removed.

Post by **RAF** » February 28th, 2006, 8:02 pm

I'll make this a sticky.

ehume · Post by **ehume** » February 28th, 2006, 9:48 pm

One thing I notice: the references in browser/browser.css to browser/places directory items are to items that were withdrawn from the trunk builds. There is not yet a browser/places directory in the 2.0 branch build classic.jar.

ehume · Post by **ehume** » March 12th, 2006, 10:35 pm

Between the 2006-02-28-0515 hourly and the 2006-03-11 nightly, I found the following changes:

The browser/bookmarks directory and all of its contents were deleted, and
browser/Bookmarks-folder.png was deleted.

A new directory browser/places was added, with lots of new content.
The global/icons/close.png icon is now a 4-part image.

The following changes were made to browser/browser.css:

This was added:

Code: Select all

toolbarpaletteitem[place="toolbar"] .places-toolbar-items {
  display: none;
}

from

Code: Select all

#places-bookmark {
  list-style-image: url("chrome://browser/skin/bookmarks/Bookmarks-toolbar.png");
  -moz-image-region: rect(0px 24px 24px 0px);
}

to

Code: Select all

#places-bookmark {
  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png");
}

from

Code: Select all

#bookmarksBarShowPlaces {
  list-style-image: url("chrome://browser/skin/places/places-icon.png");
}

to

Code: Select all

#bookmarksBarShowPlaces {
  list-style-image: url("chrome://browser/skin/places/placesIcon.png");
}

and some single quotes changed to double quotes.

ehume · Post by **ehume** » March 12th, 2006, 10:37 pm

In global/preferences.css,

from

Code: Select all

#backgroundBox {
  background-color: #FFFFFF; 
  opacity: 0.5;
}

to

Code: Select all

#cookieInfoGrid {
  background-color: #E9E7E3; 
}

ehume · Post by **ehume** » March 12th, 2006, 10:41 pm

In global/browser.css, some spacing changes,

from

Code: Select all

tab[selected="true"] {
  font-weight: bold;
  margin-bottom: 0px;
}

to

Code: Select all

tab[selected="true"] {
  font-weight: bold;
  margin-bottom: 0px;
  -moz-padding-start: 3px;
}

.tabbrowser-tabs[tiny="true"] > .tabbrowser-tab[selected="true"],
.tabborwser-tabs[singlechild="true"] > .tabbrowser-tab[selected="true"] {
  min-width: 50px; /* approximately favicon + close icon + slop for tab boundaries */
}

(note the typo)

and this was added:

Code: Select all

/**
 * In-tab close button
 */
.tab-close-button > .toolbarbutton-icon {
  -moz-margin-end: 0px !important;
}

.tab-close-button {
  list-style-image: url("chrome://global/skin/icons/close.png");
  -moz-appearance: none;
  -moz-image-region: rect(0px, 64px, 16px, 48px);
  -moz-margin-start: 2px;
  margin-top: 2px;
  border: none !important;
  padding: 0px;
  opacity: 0.7;
}

.tab-close-button:hover,
.tabbrowser-tab[selected="true"] > .tab-close-button:hover {
  -moz-image-region: rect(0px, 32px, 16px, 16px);
  opacity: 1.0;
}

.tab-close-button:hover:active,
.tabbrowser-tab[selected="true"] > .tab-close-button:hover:active {
  -moz-image-region: rect(0px, 48px, 16px, 32px);
  opacity: 1.0;
}

.tab-close-button-placeholder {
  list-style-image: url("chrome://global/skin/icons/close.png");
  -moz-image-region: rect(0px, 64px, 16px, 48px);
  opacity: 0.7;
  -moz-margin-start: 2px;
  margin-top: 2px;
  border: none !important;
  padding: 0px;
}

.tabbrowser-tab[selected="true"] > .tab-close-button {
  -moz-margin-start: 2px;
  margin-top: 0px;
  opacity: 1.0;
  -moz-image-region: rect(0px, 16px, 16px, 0px);
}

/**
 * Tabbrowser Tabs
 */
.tabbrowser-tab[selected="true"] {
  -moz-padding-end: 4px; 
  padding-top: 4px;
  padding-bottom: 1px;
}

.tabbrowser-tab[selected="true"] > .tab-middle {
  padding-bottom: 1px;
  -moz-padding-start: 1px;
  margin-bottom: 1px;
}

ehume · Post by **ehume** » March 19th, 2006, 8:44 pm

As of the 2.0a1 2006-03-18-0527 build,

in browser/browser.css

Code: Select all

toolbar[mode="icons"] .toolbarbutton-text {
  display: none;
}

toolbar[mode="text"] .toolbarbutton-icon {
  display: none;
}

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

was removed,

Code: Select all

#home-button[disabled="true"] {
  -moz-image-region: rect(48px 120px 72px 96px);
}

was added, and

Code: Select all

toolbar[iconsize="small"] #home-button[disabled="true"] {
  -moz-image-region: rect(32px 80px 48px 64px);
}

was added

ehume · Post by **ehume** » March 19th, 2006, 8:55 pm

in places.css, from

Code: Select all

#placesList {
  -moz-appearance: none;
  width: 160px;
  margin: 0px;
  border: 0px;
}

#placesListContainer {
  -moz-appearance: listbox;
  margin: 6px 0px 7px 6px;
}

to

Code: Select all

#placesList {
  -moz-appearance: listbox;
  margin: 6px 0px 7px 6px;
  width: 160px;
}

and from

Code: Select all

#content {
  margin: 6px 6px 7px 0px;
  -moz-appearance: listbox;
}

treechildren::-moz-tree-image(title, container) {
  padding-right: 2px;
  margin: 0px 2px;
  list-style-image: url("chrome://global/skin/icons/folder-item.png") !important;
  -moz-image-region: rect(0px, 16px, 16px, 0px);
}

to

Code: Select all

#contentView {
  margin: 6px 6px 7px 0px;
  -moz-appearance: listbox;
}

treechildren::-moz-tree-image {
  padding-right: 2px;
  margin: 0px 2px;
}

treechildren::-moz-tree-image(title, container) {
  list-style-image: url("chrome://global/skin/icons/folder-item.png") !important;
  -moz-image-region: rect(0px, 16px, 16px, 0px);
}

ehume · Post by **ehume** » March 19th, 2006, 8:56 pm

In toolbar.css, this was added:

Code: Select all

toolbar[mode="icons"] .toolbarbutton-text {
  display: none;
}

toolbar[mode="text"] .toolbarbutton-icon {
  display: none;
}

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

ehume · Post by **ehume** » March 19th, 2006, 8:58 pm

In extensions.css, from

Code: Select all

extension[disabled="true"][compatible="false"] .extension-item-description,
extension[satisfiesDependencies="false"] .extension-item-description,
extension[incompatibleUpdate="true"] .extension-item-description {
  color: #C77173;
}

to

Code: Select all

extension[disabled="true"][compatible="false"] .extension-item-description,
extension[blocklisted="true"] .extension-item-description,
extension[satisfiesDependencies="false"] .extension-item-description,
extension[incompatibleUpdate="true"] .extension-item-description {
  color: #C77173;
}

and from

Code: Select all

extension[availableUpdateURL="none"] .extension-badge {
  display: none;
}

to

Code: Select all

extension[availableUpdateURL="none"] .extension-badge,
extension .extension-details-link {
  display: none;
}

extension[blocklisted="true"][blocklistDetailsURL][availableUpdateURL="none"] .extension-details-link {
  display: -moz-box;
}

ehume · Post by **ehume** » March 19th, 2006, 8:59 pm

and the mozapps/pref directory was deleted.

ehume · Post by **ehume** » March 22nd, 2006, 8:10 pm

As of the 2006-03-22-0441 build, everything in bookmarkProperties.css was removed except the first statement, which sets the folder-tree margin.

Hey. Go figure.

ehume · Post by **ehume** » March 24th, 2006, 6:44 pm

As of the 2006-03-24-1708 build, in bookamrkProperties.css, from

Code: Select all

#folder-tree {
  margin: 4px;
}

to

Code: Select all

#folderTree {
  margin: 4px;
}

and in global/browser.css, from

Code: Select all

.tabbrowser-tab[selected="true"] > .tab-middle {
  padding-bottom: 1px;
  -moz-padding-start: 1px;
  margin-bottom: 1px;
}

to

Code: Select all

.tabbrowser-tab > .tab-middle {
  padding-top: 1px;
}

.tabbrowser-tab[selected="true"] > .tab-middle {
  padding-bottom: 1px;
  padding-top: 0;
  -moz-padding-start: 1px;
  margin-bottom: 1px;
}

ehume · Post by **ehume** » March 25th, 2006, 10:36 am

There is a discussion on a number of problems associated with theming Firefox 2.0a1, located here.

Actually, it's grown to have some very important stuff, such as how to use star on/star off.

(Hmm. Wax on, wax off . . . )