Bug 508940 - Use build time preprocessing in order to share colors and other common CSS declarations in the theme. r=dao
authorMarkus Stange <mstange@themasta.com>
Mon, 31 Aug 2009 12:26:43 +1200
changeset 32094 c7c86b4bde7140725c93cbd02caf5d1f01013767
parent 32093 b1389d68fbd0509c267af13ac9afab2a9498c1b5
child 32095 73808eec9e7ce16b817752bb7d9742670cb31dea
push id8843
push usermstange@themasta.com
push dateMon, 31 Aug 2009 01:14:56 +0000
treeherderautoland@73808eec9e7c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs508940
milestone1.9.3a1pre
Bug 508940 - Use build time preprocessing in order to share colors and other common CSS declarations in the theme. r=dao
browser/themes/pinstripe/browser/jar.mn
browser/themes/pinstripe/browser/places/organizer.css
browser/themes/pinstripe/browser/places/places.css
browser/themes/pinstripe/browser/shared.inc
toolkit/themes/pinstripe/global/console/console.css
toolkit/themes/pinstripe/global/findBar.css
toolkit/themes/pinstripe/global/global.css
toolkit/themes/pinstripe/global/jar.mn
toolkit/themes/pinstripe/global/shared.inc
--- a/browser/themes/pinstripe/browser/jar.mn
+++ b/browser/themes/pinstripe/browser/jar.mn
@@ -56,17 +56,17 @@ browser.jar:
   skin/classic/browser/feeds/videoFeedIcon.png              (feeds/videoFeedIcon.png)
   skin/classic/browser/feeds/videoFeedIcon16.png            (feeds/videoFeedIcon16.png)
   skin/classic/browser/feeds/audioFeedIcon.png              (feeds/audioFeedIcon.png)
   skin/classic/browser/feeds/audioFeedIcon16.png            (feeds/audioFeedIcon16.png)
   skin/classic/browser/setDesktopBackground.css
   skin/classic/browser/monitor.png
   skin/classic/browser/monitor_16-10.png
   skin/classic/browser/places/allBookmarks.png              (places/allBookmarks.png)
-  skin/classic/browser/places/places.css                    (places/places.css)
+* skin/classic/browser/places/places.css                    (places/places.css)
 * skin/classic/browser/places/organizer.css                 (places/organizer.css)
   skin/classic/browser/places/query.png                     (places/query.png)
   skin/classic/browser/places/livemarkItem.png              (places/livemarkItem.png)
   skin/classic/browser/places/bookmarksMenu.png             (places/bookmarksMenu.png)
   skin/classic/browser/places/bookmarksToolbar.png          (places/bookmarksToolbar.png)
   skin/classic/browser/places/history.png                   (places/history.png)
   skin/classic/browser/places/menubutton-end-pressed.png    (places/menubutton-end-pressed.png)
   skin/classic/browser/places/menubutton-end-pressed-rtl.png (places/menubutton-end-pressed-rtl.png)
--- a/browser/themes/pinstripe/browser/places/organizer.css
+++ b/browser/themes/pinstripe/browser/places/organizer.css
@@ -1,8 +1,10 @@
+%include ../shared.inc
+
 /* Inactive Window */
 
 #places:not([active="true"]) > #placesToolbox > #placesToolbar > toolbarbutton,
 #places:not([active="true"]) > #placesToolbox > #placesToolbar > #searchFilter {
   opacity: 0.7;
 }
 
 #places:not([active="true"]) > #placesView > #placesList {
@@ -19,23 +21,38 @@
 }
 
 #placesList treechildren::-moz-tree-row {
   background-color: transparent;
   border-color: transparent;
 }
 
 #placesList treechildren::-moz-tree-row(selected) {  
-  background: -moz-linear-gradient(top, bottom, from(#B5B5B5), to(#8A8A8A)) repeat-x;
-  border-top: 1px solid #979797;
+  background: @sidebarItemBackground@;
+  border-top: @sidebarItemBorderTop@;
 }
 
 #placesList treechildren::-moz-tree-row(selected,focus) {  
-  background: -moz-linear-gradient(top, bottom, from(#A2B1D0), to(#6E81A9)) repeat-x;
-  border-top: 1px solid #91a0c0;
+  background: @sidebarItemFocusedBackground@;
+  border-top: @sidebarItemFocusedBorderTop@;
+}
+
+#placesList:-moz-system-metric(mac-graphite-theme) treechildren::-moz-tree-row(selected) {
+  background: @sidebarItemGraphiteBackground@;
+  border-top: @sidebarItemGraphiteBorderTop@;
+}
+
+#placesList:-moz-system-metric(mac-graphite-theme) treechildren::-moz-tree-row(selected,focus) {
+  background: @sidebarItemGraphiteFocusedBackground@;
+  border-top: @sidebarItemGraphiteFocusedBorderTop@;
+}
+
+window:not([active="true"]) #placesList treechildren::-moz-tree-row(selected) {
+  background: @sidebarItemInactiveBackground@;
+  border-top: @sidebarItemInactiveBorderTop@;
 }
 
 #placesList treechildren::-moz-tree-row(History),
 #placesList treechildren::-moz-tree-row(history)  {
   background-color: blue;
 }
 
 #placesList treechildren::-moz-tree-cell(leaf) ,
@@ -327,25 +344,25 @@
 #searchActions {
   -moz-padding-start: 2px;
   -moz-padding-end: 8px;
 }
 
 #organizerScopeBar {
   padding: 3px;
   -moz-appearance: none;
-  background: -moz-linear-gradient(top, bottom, from(#E8E8E8), to(#D0D0D0)) repeat-x;
-  border-bottom: 1px solid #B1B1B1;
+  background: @scopeBarBackground@;
+  border-bottom: @scopeBarSeparatorBorder@;
 }
 
 #scopeBarTitle {
   font: icon;
-  color: #6D6D6D;
+  color: @scopeBarTitleColor@;
   font-weight: bold;
-  text-shadow: 0 1px rgba(255, 255, 255, .4);
+  text-shadow: @loweredShadow@;
   margin: 0 6px 1px;
 }
 
 #organizerScopeBar > toolbarbutton {
   border: 0;
   font: icon;
   font-weight: bold;
   color: #2D2D2D;
@@ -397,46 +414,38 @@ 255, 0.4);
 #organizerScopeBar  > .expander-down:hover:active {
   list-style-image: url("chrome://browser/skin/places/minus-active.png") !important;
 }
 
 #saveSearch {
   margin: 0 4px;
   padding: 0 10px;
   -moz-appearance: none;
-  border: 1px solid rgba(0, 0, 0, .4);
   -moz-border-radius: 100%;
-  text-shadow: 0 1px rgba(255, 255, 255, .4);
-  background: -moz-linear-gradient(top, bottom, from(#FFF), to(#CACACA)) repeat-x;
-  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .4);
+  border: @roundButtonBorder@;
+  text-shadow: @loweredShadow@;
+  background: @roundButtonBackground@;
+  -moz-box-shadow: @roundButtonShadow@;
 }
 
 #saveSearch > .button-box > .button-text {
   margin: 0 !important;
 }
 
-#saveSearch:focus {
-  -moz-box-shadow: 0 0 1px -moz-mac-focusring inset,
-                   0 0 4px 1px -moz-mac-focusring,
-                   0 0 2px 1px -moz-mac-focusring,
-                   0 1px rgba(255, 255, 255, .4);
+#saveSearch:active:hover {
+  background: @roundButtonPressedBackground@;
+  -moz-box-shadow: @roundButtonPressedShadow@;
 }
 
-#saveSearch:active:hover {
-  background: #CCC;
-  -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2),
-                   0 1px rgba(255, 255, 255, .4);
+#saveSearch:focus {
+  -moz-box-shadow: @focusRingShadow@, @roundButtonShadow@;
 }
 
 #saveSearch:active:hover:focus {
-  -moz-box-shadow: 0 0 1px -moz-mac-focusring inset,
-                   0 0 4px 1px -moz-mac-focusring,
-                   0 0 2px 1px -moz-mac-focusring,
-                   inset 0 1px 4px rgba(0, 0, 0, .2),
-                   0 1px rgba(255, 255, 255, .4);
+  -moz-box-shadow: @focusRingShadow@, @roundButtonPressedShadow@;
 }
 
 %ifdef PLACES_QUERY_BUILDER
 /* Calendar */
 .history-calendar {
   margin: 0px 0px 7px 6px;
 }
 
--- a/browser/themes/pinstripe/browser/places/places.css
+++ b/browser/themes/pinstripe/browser/places/places.css
@@ -1,8 +1,10 @@
+%include ../shared.inc
+
 /* Sidebars */
 
 .sidebar-placesTree {
   border-top: none !important;
 }
 
 #sidebar tree,
 #sidebar page {
@@ -25,36 +27,48 @@ tree.sidebar-placesTree treechildren::-m
   background-color: transparent;
   border-color: transparent;
   padding-bottom: 1px;
   -moz-appearance: none;
   margin: 0;
   border: none;
 }
 
-#bookmarks-view treechildren::-moz-tree-row(selected), 
-#historyTree treechildren::-moz-tree-row(selected) {
-  background: -moz-linear-gradient(top, bottom, from(#B5B5B5), to(#8A8A8A)) repeat-x;
-  border-top: 1px solid #979797;
-}
-
 tree.sidebar-placesTree treechildren::-moz-tree-separator {
   border-top: 1px solid #505d6d;
   margin: 0 10px;
 }
 
 #historyTree,
 #bookmarks-view {
   border-top: 1px solid #bebebe;
 }
 
+#bookmarks-view treechildren::-moz-tree-row(selected), 
+#historyTree treechildren::-moz-tree-row(selected) {
+  background: @sidebarItemBackground@;
+  border-top: @sidebarItemBorderTop@;
+}
+
 #bookmarks-view treechildren::-moz-tree-row(selected,focus),
 #historyTree treechildren::-moz-tree-row(selected,focus) {
-  background: -moz-linear-gradient(top, bottom, from(#A2B1D0), to(#6E81A9)) repeat-x;
-  border-top: 1px solid #91a0c0;
+  background: @sidebarItemFocusedBackground@;
+  border-top: @sidebarItemFocusedBorderTop@;
+}
+
+#bookmarks-view:-moz-system-metric(mac-graphite-theme) treechildren::-moz-tree-row(selected), 
+#historyTree:-moz-system-metric(mac-graphite-theme) treechildren::-moz-tree-row(selected) {
+  background: @sidebarItemGraphiteBackground@;
+  border-top: @sidebarItemGraphiteBorderTop@;
+}
+
+#bookmarks-view:-moz-system-metric(mac-graphite-theme) treechildren::-moz-tree-row(selected,focus),
+#historyTree:-moz-system-metric(mac-graphite-theme) treechildren::-moz-tree-row(selected,focus) {
+  background: @sidebarItemGraphiteFocusedBackground@;
+  border-top: @sidebarItemGraphiteFocusedBorderTop@;
 }
 
 tree.sidebar-placesTree treechildren::-moz-tree-cell-text(selected) {  
   font-weight: bold !important;
   color: #ffffff !important;
 }
 
 #bookmarksPanel > hbox > label,
new file mode 100644
--- /dev/null
+++ b/browser/themes/pinstripe/browser/shared.inc
@@ -0,0 +1,1 @@
+%include ../../../../toolkit/themes/pinstripe/global/shared.inc
--- a/toolkit/themes/pinstripe/global/console/console.css
+++ b/toolkit/themes/pinstripe/global/console/console.css
@@ -37,16 +37,17 @@
 
 /* ===== console.css ====================================================
   == Styles used by the Error Console window.
   ======================================================================= */
 
 /* View buttons */
 @import "chrome://global/skin/viewbuttons.css";
 
+%include ../shared.inc
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 .console-box {
   background-color: -moz-Field;
   color: -moz-FieldText;
   overflow: auto;
 }
  
@@ -145,49 +146,48 @@
 .console-row[type="message"] {
   background-color: #D3EDFF;
 }
 
 /* ::::: toolbars ::::: */
 
 #ToolbarEval {
   -moz-appearance: none;
-  background: -moz-linear-gradient(top, bottom, from(#E8E8E8), to(#D0D0D0)) repeat-x;
-  border-bottom: 1px solid #686868;
+  background: @scopeBarBackground@;
+  border-bottom: @scopeBarSeparatorBorder@;
   padding: 2px;
 }
 
 #ToolbarEval > label {
   font-weight: bold;
-  color: #5F5F5F;
+  color: @scopeBarTitleColor@;
 }
 
 #TextfieldEval {
   margin: 2px !important;
 }
 
 #ButtonEval {
   margin: 0 4px;
+  padding: 1px 10px;
   -moz-appearance: none;
-  border: 1px solid rgba(0, 0, 0, .4);
   -moz-border-radius: 100%;
-  background: -moz-linear-gradient(top, bottom, from(#FFF), to(#CACACA)) repeat-x;
-  padding: 1px 10px;
-  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .4);
+  border: @roundButtonBorder@;
+  background: @roundButtonBackground@;
+  -moz-box-shadow: @roundButtonShadow@;
 }
 
 #ButtonEval > .toolbarbutton-text {
   margin: 0 !important;
 }
 
 #ButtonEval:hover:active {
-  text-shadow: 0 1px rgba(255, 255, 255, .4);
-  background: #CCC;
-  -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2),
-                   0 1px rgba(255, 255, 255, .4);
+  text-shadow: @loweredShadow@;
+  background: @roundButtonPressedBackground@;
+  -moz-box-shadow: @roundButtonPressedShadow@;
 }
 
 toolbarseparator {
   min-height: 1em;
   background-image: none;
 }
 
 /* Toolbar icons */
--- a/toolkit/themes/pinstripe/global/findBar.css
+++ b/toolkit/themes/pinstripe/global/findBar.css
@@ -1,24 +1,25 @@
+%include shared.inc
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 /* ::::: find toolbar ::::: */
 
 findbar {
-  background: -moz-linear-gradient(top, bottom, from(#E8E8E8), to(#D0D0D0)) repeat-x;
-  border-top: 1px solid #888;
+  background: @scopeBarBackground@;
+  border-top: @scopeBarSeparatorBorder@;
   min-width: 1px;
   padding: 4px 1px;
 }
 
 .findbar-container > label {
   margin: 1px 3px 0 !important;
-  color: #6D6D6D;
+  color: @scopeBarTitleColor@;
   font-weight: bold;
-  text-shadow: 0 1px rgba(255, 255, 255, .4);
+  text-shadow: @loweredShadow@;
 }
 
 .findbar-closebutton {
   padding: 0;
   margin: 0 4px;
   list-style-image: url("chrome://global/skin/icons/closetab.png");
   border: none;
 }
@@ -29,57 +30,50 @@ findbar {
 
 .findbar-closebutton:hover:active {
   list-style-image: url("chrome://global/skin/icons/closetab-active.png") !important;
 }
 
 .findbar-find-next,
 .findbar-find-previous,
 .findbar-highlight {
-  -moz-appearance: none;
-  border: 1px solid rgba(0, 0, 0, .4);
-  -moz-border-radius: 100%;
-  background: -moz-linear-gradient(top, bottom, from(#FFF), to(#CACACA)) repeat-x;
   margin: 0 4px;
   padding: 1px 3px;
-  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .4);
+  -moz-appearance: none;
+  -moz-border-radius: 100%;
+  border: @roundButtonBorder@;
+  background: @roundButtonBackground@;
+  -moz-box-shadow: @roundButtonShadow@;
 }
 
 .findbar-container > toolbarbutton:focus {
   position: relative;
-  -moz-box-shadow: 0 0 1px -moz-mac-focusring inset,
-                   0 0 4px 1px -moz-mac-focusring,
-                   0 0 2px 1px -moz-mac-focusring;
+  -moz-box-shadow: @focusRingShadow@, @roundButtonShadow@;
 }
 
 .findbar-container > toolbarbutton > .toolbarbutton-text {
   margin: 0 6px !important;
 }
 
 .findbar-container > toolbarbutton[disabled] {
   color: GrayText !important;
 }
 
 .findbar-find-next:not([disabled]):hover:active,
 .findbar-find-previous:not([disabled]):hover:active,
 .findbar-highlight:not([disabled]):hover:active {
-  text-shadow: 0 1px rgba(255, 255, 255, .4);
-  background: #CCC;
-  -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2),
-                   0 1px rgba(255, 255, 255, .4);
+  text-shadow: @loweredShadow@;
+  background: @roundButtonPressedBackground@;
+  -moz-box-shadow: @roundButtonPressedShadow@;
 }
 
 .findbar-container > toolbarbutton:hover:active:focus {
-  text-shadow: 0 1px rgba(255, 255, 255, .4);
-  background: #CCC;
-  -moz-box-shadow: 0 0 1px -moz-mac-focusring inset,
-                   0 0 4px 1px -moz-mac-focusring,
-                   0 0 2px 1px -moz-mac-focusring,
-                   inset 0 1px 4px rgba(0, 0, 0, .2),
-                   0 1px rgba(255, 255, 255, .4);
+  text-shadow: @loweredShadow@;
+  background: @roundButtonPressedBackground@;
+  -moz-box-shadow: @focusRingShadow@, @roundButtonPressedShadow@;
 }
 
 .findbar-closebutton > .toolbarbutton-text {
   display: none;  
 }
 
 /* Match case checkbox */
 
@@ -114,18 +108,17 @@ findbar {
 
 .findbar-container > checkbox > .checkbox-label-box > .checkbox-icon {
   -moz-padding-start: 1px;
   padding-bottom: 1px;
 }
 
 .findbar-container > checkbox:focus > .checkbox-label-box > .checkbox-icon {
   -moz-border-radius: 4px;
-  -moz-box-shadow: 0 0 0 2px -moz-mac-focusring inset,
-                   0 0 4px -moz-mac-focusring;
+  -moz-box-shadow: @focusRingShadow@;
 }
 
 /* Search field */
 
 .findbar-textbox {
   -moz-appearance: none;
   -moz-border-radius: 100%;
   border: none;
@@ -133,19 +126,17 @@ findbar {
                    0 0 0 1px rgba(0, 0, 0, .17) inset;
   background: url("chrome://global/skin/icons/search-textbox.png") -moz-Field no-repeat 5px center;
   margin: 0 4px -1px;
   padding: 3px 8px 2px;
   -moz-padding-start: 19px;
 }
 
 .findbar-textbox[focused="true"] {
-  -moz-box-shadow: 0 0 1px -moz-mac-focusring inset,
-                   0 0 4px 1px -moz-mac-focusring,
-                   0 0 2px 1px -moz-mac-focusring,
+  -moz-box-shadow: @focusRingShadow@,
                    0 1px 2px rgba(0, 0, 0, .8) inset;
 }
 
 .findbar-textbox[flash="true"] {
   background-color: #F7E379;
 }
 
 .findbar-textbox[status="notfound"] {
--- a/toolkit/themes/pinstripe/global/global.css
+++ b/toolkit/themes/pinstripe/global/global.css
@@ -38,16 +38,17 @@
 
 /* ===== global.css =====================================================
   == Styles that apply everywhere.
   ======================================================================= */
 
 /* all localizable skin settings shall live here */
 @import url("chrome://global/locale/intl.css");
 
+%include shared.inc
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 /* ::::: XBL bindings ::::: */
 
 menulist > menupopup,
 .menulist-menupopup {
   -moz-binding: url("chrome://global/content/bindings/popup.xml#popup-scrollbars");
 }
@@ -272,37 +273,34 @@ description {
 }
 
 notification > button {
   margin: 0 3px;
   padding: 1px 10px;
   min-width: 60px;
   min-height: 16px;
   -moz-appearance: none;
-  border: 1px solid rgba(0, 0, 0, .4);
   -moz-border-radius: 100%;
-  background: -moz-linear-gradient(top, bottom, from(#FFF), to(#CACACA)) repeat-x;
-  text-shadow: 0 1px rgba(255, 255, 255, .4);
-  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .4);
+  border: @roundButtonBorder@;
+  text-shadow: @loweredShadow@;
+  background: @roundButtonBackground@;
+  -moz-box-shadow: @roundButtonShadow@;
 }
 
 notification > button:active:hover {
-  background: #CCC;
-  -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2),
-                   0 1px rgba(255, 255, 255, .4);
+  background: @roundButtonPressedBackground@;
+  -moz-box-shadow: @roundButtonPressedShadow@;
 }
 
 notification > button:focus {
-  -moz-box-shadow: 0 0 3px 2px -moz-mac-focusring;
+  -moz-box-shadow: @focusRingShadow@, @roundButtonShadow@;
 }
 
 notification > button:active:hover:focus {
-  -moz-box-shadow: 0 0 3px 2px -moz-mac-focusring,
-                   inset 0 1px 4px rgba(0, 0, 0, .2),
-                   0 1px rgba(255, 255, 255, .4);
+  -moz-box-shadow: @focusRingShadow@, @roundButtonPressedShadow@;
 }
 
 notification > button > .button-box > .button-text {
   margin: 0 !important;
 }
 
 /* :::::: autoscroll popup ::::: */
 
--- a/toolkit/themes/pinstripe/global/jar.mn
+++ b/toolkit/themes/pinstripe/global/jar.mn
@@ -11,18 +11,18 @@ toolkit.jar:
 +  skin/classic/global/colorpicker.css
 +  skin/classic/global/commonDialog.css
 +  skin/classic/global/config.css
 +  skin/classic/global/customizeToolbar.css
 +  skin/classic/global/dialog.css
 +  skin/classic/global/dropmarker.css
 +  skin/classic/global/filefield.css
 +  skin/classic/global/filepicker.css
-+  skin/classic/global/findBar.css
-+  skin/classic/global/global.css
+*  skin/classic/global/findBar.css
+*  skin/classic/global/global.css
 +  skin/classic/global/groupbox.css
 +  skin/classic/global/linkTree.css
 +  skin/classic/global/listbox.css
 +  skin/classic/global/menu.css
 +  skin/classic/global/menulist.css
 +  skin/classic/global/notification.css
 +  skin/classic/global/netError.css
 +  skin/classic/global/numberbox.css
@@ -66,17 +66,17 @@ toolkit.jar:
 +  skin/classic/global/arrow/arrow-rit.gif                            (arrow/arrow-rit.gif)
 +  skin/classic/global/arrow/arrow-up-dis.gif                         (arrow/arrow-up-dis.gif)
 +  skin/classic/global/arrow/arrow-up-sharp.gif                       (arrow/arrow-up-sharp.gif)
 +  skin/classic/global/arrow/arrow-up.gif                             (arrow/arrow-up.gif)
 +  skin/classic/global/checkbox/cbox-check.gif                        (checkbox/cbox-check.gif)
 +  skin/classic/global/checkbox/cbox-check-dis.gif                    (checkbox/cbox-check-dis.gif)
 +  skin/classic/global/console/console-error-caret.gif                (console/console-error-caret.gif)
 +  skin/classic/global/console/console-error-dash.gif                 (console/console-error-dash.gif)
-+  skin/classic/global/console/console.css                            (console/console.css)
+*  skin/classic/global/console/console.css                            (console/console.css)
 +  skin/classic/global/dirListing/dirListing.css                      (dirListing/dirListing.css)
 +  skin/classic/global/dirListing/folder.png                          (dirListing/folder.png)
 +  skin/classic/global/dirListing/local.png                           (dirListing/local.png)
 +  skin/classic/global/dirListing/remote.png                          (dirListing/remote.png)
 +  skin/classic/global/dirListing/up.png                              (dirListing/up.png)
 +  skin/classic/global/icons/autocomplete-dropmarker.png              (icons/autocomplete-dropmarker.png)
 +  skin/classic/global/icons/autoscroll.png                           (icons/autoscroll.png)
 +  skin/classic/global/icons/blacklist_favicon.png                    (icons/blacklist_favicon.png)
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/pinstripe/global/shared.inc
@@ -0,0 +1,25 @@
+%filter substitution
+
+%define loweredShadow 0 1px rgba(255, 255, 255, .4)
+%define focusRingShadow 0 0 1px -moz-mac-focusring inset, 0 0 4px 1px -moz-mac-focusring, 0 0 2px 1px -moz-mac-focusring
+
+%define roundButtonBorder 1px solid rgba(0, 0, 0, .4)
+%define roundButtonBackground -moz-linear-gradient(top, bottom, from(#FFF), to(#CACACA)) repeat-x
+%define roundButtonShadow 0 1px rgba(255, 255, 255, .4)
+%define roundButtonPressedBackground #CCC
+%define roundButtonPressedShadow inset 0 1px 4px rgba(0, 0, 0, .2), 0 1px rgba(255, 255, 255, .4)
+
+%define scopeBarBackground -moz-linear-gradient(top, bottom, from(#E8E8E8), to(#D0D0D0)) repeat-x
+%define scopeBarSeparatorBorder 1px solid #888
+%define scopeBarTitleColor #6D6D6D
+
+%define sidebarItemBorderTop 1px solid #94A1C0
+%define sidebarItemBackground -moz-linear-gradient(top, bottom, from(#A0B0CF), to(#7386AB)) repeat-x
+%define sidebarItemFocusedBorderTop 1px solid #5382C5
+%define sidebarItemFocusedBackground -moz-linear-gradient(top, bottom, from(#6494D4), to(#2559AC)) repeat-x
+%define sidebarItemGraphiteBorderTop 1px solid #97A4B1
+%define sidebarItemGraphiteBackground -moz-linear-gradient(top, bottom, from(#AAB7C4), to(#8393A4)) repeat-x
+%define sidebarItemGraphiteFocusedBorderTop 1px solid #6B798D
+%define sidebarItemGraphiteFocusedBackground -moz-linear-gradient(top, bottom, from(#8293A6), to(#425972)) repeat-x
+%define sidebarItemInactiveBorderTop 1px solid #979797
+%define sidebarItemInactiveBackground -moz-linear-gradient(top, bottom, from(#B4B4B4), to(#8A8A8A)) repeat-x