Bug 477827 - Use inset box shadows instead of border images for the toolbar buttons in the Add-ons Manager, Page Info dialog and Error Console. r=dao, r=Enn, r=dtownsend

browser/base/content/pageinfo/pageInfo.xul

@@ -114,23 +114,21 @@
     <menuitem id="menu_copy"      label="&copy.label;"      command="cmd_copy"      accesskey="&copy.accesskey;"/>
   </menupopup>
 
-  <windowdragbox orient="vertical">
-    <stack id="topStackBar">
-      <radiogroup id="viewGroup" class="viewSelector chromeclass-toolbar" orient="horizontal"
-                  chromedir="&locale.dir;">
-        <radio id="generalTab"  label="&generalTab;"  accesskey="&generalTab.accesskey;"
-             oncommand="showTab('general');"/>
-        <radio id="mediaTab"    label="&mediaTab;"    accesskey="&mediaTab.accesskey;"
-             oncommand="showTab('media'); ensureSelection(gImageView)" hidden="true"/>
-        <radio id="feedTab"     label="&feedTab;"     accesskey="&feedTab.accesskey;"
-             oncommand="showTab('feed');" hidden="true"/>
-        <radio id="permTab"     label="&permTab;"     accesskey="&permTab.accesskey;"
-             oncommand="showTab('perm');"/>
-        <radio id="securityTab" label="&securityTab;" accesskey="&securityTab.accesskey;"
-             oncommand="showTab('security');"/>
-        <!-- Others added by overlay -->
-      </radiogroup>
-    </stack>
+  <windowdragbox id="topBar" class="viewGroupWrapper">
+    <radiogroup id="viewGroup" class="chromeclass-toolbar" orient="horizontal"
+                chromedir="&locale.dir;">
+      <radio id="generalTab"  label="&generalTab;"  accesskey="&generalTab.accesskey;"
+           oncommand="showTab('general');"/>
+      <radio id="mediaTab"    label="&mediaTab;"    accesskey="&mediaTab.accesskey;"
+           oncommand="showTab('media'); ensureSelection(gImageView)" hidden="true"/>
+      <radio id="feedTab"     label="&feedTab;"     accesskey="&feedTab.accesskey;"
+           oncommand="showTab('feed');" hidden="true"/>
+      <radio id="permTab"     label="&permTab;"     accesskey="&permTab.accesskey;"
+           oncommand="showTab('perm');"/>
+      <radio id="securityTab" label="&securityTab;" accesskey="&securityTab.accesskey;"
+           oncommand="showTab('security');"/>
+      <!-- Others added by overlay -->
+    </radiogroup>
   </windowdragbox>
 
   <deck id="mainDeck" flex="1">

browser/themes/gnomestripe/browser/pageInfo.css

@@ -58,10 +58,9 @@
   color: HighlightText; 
 }
 
-.viewSelector {
+#topBar {
   -moz-appearance: listbox;
-  margin: 8px 8px 0 8px;
-  padding: 0;
+  margin: 8px 8px 0;
 }
 
 #generalTab {

browser/themes/winstripe/browser/pageInfo.css

@@ -48,9 +48,8 @@
   padding: 5px 3px 1px 3px;
 }
 
-.viewSelector {
+#topBar {
   border-bottom: 2px groove ThreeDFace;
-  margin: 0;
   -moz-padding-start: 10px;
   background-color: -moz-Field;
   color: -moz-FieldText;

toolkit/content/WindowDraggingUtils.jsm

@@ -46,7 +46,7 @@ WindowDraggingElement.prototype = {
   mouseDownCheck: function(e) { return true; },
   dragTags: ["box", "hbox", "vbox", "spacer", "label", "statusbarpanel", "stack",
              "toolbaritem", "toolbarseparator", "toolbarspring", "toolbarspacer",
-             "radiogroup"],
+             "radiogroup", "deck"],
   handleEvent: function(aEvent) {
     switch (aEvent.type) {
       case "mousedown":

toolkit/mozapps/extensions/content/extensions.js

@@ -538,11 +538,7 @@ function getIDFromResourceURI(aURI)
 
 function showProgressBar() {
   var progressBox = document.getElementById("progressBox");
-  var height = document.defaultView.getComputedStyle(progressBox.parentNode, "")
-                       .getPropertyValue("height");
-  progressBox.parentNode.style.height = height;
-  document.getElementById("viewGroup").hidden = true;
-  progressBox.hidden = false;
+  progressBox.parentNode.selectedPanel = progressBox;
 }
 
 function flushDataSource()
@@ -1447,9 +1443,8 @@ UpdateCheckListener.prototype = {
   onUpdateEnded: function() {
     if (!document)
       return;
-    document.getElementById("progressBox").hidden = true;
-    var viewGroup = document.getElementById("viewGroup");
-    viewGroup.hidden = false;
+    var viewGroup = document.getElementById("viewGroup").parentNode;
+    viewGroup.parentNode.selectedPanel = viewGroup;
     gExtensionsView.removeAttribute("update-operation");
     gExtensionsViewController.onCommandUpdate();
     updateOptionalViews();

toolkit/mozapps/extensions/content/extensions.xul

@@ -161,20 +161,21 @@
 
   <popup id="addonContextMenu" onpopupshowing="return buildContextMenu(event);"/>
 
-  <windowdragbox orient="vertical">
-    <stack id="topStackBar">
-      <radiogroup id="viewGroup" xhtml:role="listbox" persist="last-selected"
-                  class="viewSelector chromeclass-toolbar" orient="horizontal"
-                  chromedir="&locale.dir;">
-        <radio id="search-view" label="&search.label;" oncommand="showView('search');" persist="last-selected"/>
-        <radio id="extensions-view" label="&extensions.label;" oncommand="showView('extensions');" persist="last-selected"/>
-        <radio id="themes-view" label="&themes.label;" oncommand="showView('themes');" persist="last-selected"/>
-        <radio id="locales-view" label="&locales.label;" oncommand="showView('locales');" persist="last-selected"/>
-        <radio id="plugins-view" label="&plugins.label;" oncommand="showView('plugins');" persist="last-selected"/>
-        <radio id="updates-view" label="&update.label;" oncommand="showView('updates');"/>
-        <radio id="installs-view" label="&install.label;" oncommand="showView('installs');" hidden="true"/>
-      </radiogroup>
-      <vbox id="progressBox" hidden="true" class="viewSelector" flex="1">
+  <windowdragbox id="topBar" class="chromeclass-toolbar">
+    <deck flex="1">
+      <hbox class="viewGroupWrapper">
+        <radiogroup id="viewGroup" xhtml:role="listbox" persist="last-selected"
+                    orient="horizontal" chromedir="&locale.dir;">
+          <radio id="search-view" label="&search.label;" oncommand="showView('search');" persist="last-selected"/>
+          <radio id="extensions-view" label="&extensions.label;" oncommand="showView('extensions');" persist="last-selected"/>
+          <radio id="themes-view" label="&themes.label;" oncommand="showView('themes');" persist="last-selected"/>
+          <radio id="locales-view" label="&locales.label;" oncommand="showView('locales');" persist="last-selected"/>
+          <radio id="plugins-view" label="&plugins.label;" oncommand="showView('plugins');" persist="last-selected"/>
+          <radio id="updates-view" label="&update.label;" oncommand="showView('updates');"/>
+          <radio id="installs-view" label="&install.label;" oncommand="showView('installs');" hidden="true"/>
+        </radiogroup>
+      </hbox>
+      <vbox id="progressBox" flex="1">
         <spacer flex="1"/>
         <hbox>
           <image class="addonThrobber"/>
@@ -183,7 +184,7 @@
         <progressmeter id="addonsProgress" class="extension-item-progress" flex="1"/>
         <spacer flex="1"/>
       </vbox>
-    </stack>
+    </deck>
   </windowdragbox>
   <notificationbox id="addonsMsg" flex="1">
     <vbox id="extensionsBox" flex="1">

toolkit/themes/gnomestripe/mozapps/extensions/extensions.css

@@ -355,11 +355,10 @@ vbox[typeName="status"][type="header-recommended"] {
   -moz-box-align: center;
 }
 
-/* View buttons */
-.viewSelector {
+/* View buttons resp. Progress box */
+#topBar {
   -moz-appearance: listbox;
-  margin: 8px 8px 0 8px;
-  padding: 0;
+  margin: 8px 8px 0;
 }
 
 #viewGroup radio {

toolkit/themes/pinstripe/global/console/console.css

@@ -188,7 +188,6 @@ toolbarseparator {
 /* Toolbar icons */
 
 #ToolbarMode {
-  padding: 4px 0 8px;
   -moz-box-pack: center;
 }
 
@@ -196,29 +195,27 @@ toolbarseparator {
   display: none;
 }
 
-#viewGroup {
-  -moz-appearance: none;
-  padding: 0;
-}
-
 #Console\:clear {
   -moz-box-orient: vertical;
   -moz-box-align: center;
   font: menu;
   text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
-  margin: 0;
-  padding: 3px 0 0;
-  height: 24px;
-  border: solid transparent;
-  border-width: 0 6px;
-  -moz-border-image: url("chrome://global/skin/toolbar/roundrectbutton.png") 0 6 repeat stretch !important;
+  margin: 4px 0 9px;
+  padding: 1px 4px 0;
+  border: 1px solid rgba(0, 0, 0, 0.6);
+  -moz-border-radius: 3px;
+  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px;
+  background: url("chrome://global/skin/toolbar/white-transparent-gradient.png") repeat-x #B4B4B4;
 }
 
 #Console\:clear:active:hover {
-  -moz-border-image: url("chrome://global/skin/toolbar/roundrectbutton-down.png") 0 6 repeat stretch !important;
+  background: #B5B5B5;
+  text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 -6px 14px, inset rgba(0, 0, 0, 1) 0 1px 4px, rgba(255, 255, 255, 0.4) 0 1px;
 }
 
 :root:not([active]) #Console\:clear {
   color: #7C7C7C !important; /* remove this when we support click-through */
-  -moz-border-image: url("chrome://global/skin/toolbar/roundrectbutton-inactive.png") 0 6 repeat stretch !important;
+  border-color: rgba(0, 0, 0, 0.25);
+  background-color: #CCC;
 }

toolkit/themes/pinstripe/global/jar.mn

@@ -215,27 +215,6 @@ classic.jar:
 +  skin/classic/global/toolbar/Lighten.png                            (toolbar/Lighten.png)
 +  skin/classic/global/toolbar/dropmark-nav.png                       (toolbar/dropmark-nav.png)
 +  skin/classic/global/toolbar/dropmark-nav-small.png                 (toolbar/dropmark-nav-small.png)
-+  skin/classic/global/toolbar/roundrectbutton.png                    (toolbar/roundrectbutton.png)
-+  skin/classic/global/toolbar/roundrectbutton-down.png               (toolbar/roundrectbutton-down.png)
-+  skin/classic/global/toolbar/roundrectbutton-inactive.png           (toolbar/roundrectbutton-inactive.png)
-+  skin/classic/global/toolbar/viewbutton-left.png                          (toolbar/viewbutton-left.png)
-+  skin/classic/global/toolbar/viewbutton-left-down.png                     (toolbar/viewbutton-left-down.png)
-+  skin/classic/global/toolbar/viewbutton-left-inactive.png                 (toolbar/viewbutton-left-inactive.png)
-+  skin/classic/global/toolbar/viewbutton-left-selected.png                 (toolbar/viewbutton-left-selected.png)
-+  skin/classic/global/toolbar/viewbutton-left-selected-down.png            (toolbar/viewbutton-left-selected-down.png)
-+  skin/classic/global/toolbar/viewbutton-left-selected-inactive.png        (toolbar/viewbutton-left-selected-inactive.png)
-+  skin/classic/global/toolbar/viewbutton-middle.png                        (toolbar/viewbutton-middle.png)
-+  skin/classic/global/toolbar/viewbutton-middle-down.png                   (toolbar/viewbutton-middle-down.png)
-+  skin/classic/global/toolbar/viewbutton-middle-inactive.png               (toolbar/viewbutton-middle-inactive.png)
-+  skin/classic/global/toolbar/viewbutton-middle-selected.png               (toolbar/viewbutton-middle-selected.png)
-+  skin/classic/global/toolbar/viewbutton-middle-selected-down.png          (toolbar/viewbutton-middle-selected-down.png)
-+  skin/classic/global/toolbar/viewbutton-middle-selected-inactive.png      (toolbar/viewbutton-middle-selected-inactive.png)
-+  skin/classic/global/toolbar/viewbutton-right.png                         (toolbar/viewbutton-right.png)
-+  skin/classic/global/toolbar/viewbutton-right-down.png                    (toolbar/viewbutton-right-down.png)
-+  skin/classic/global/toolbar/viewbutton-right-inactive.png                (toolbar/viewbutton-right-inactive.png)
-+  skin/classic/global/toolbar/viewbutton-right-selected.png                (toolbar/viewbutton-right-selected.png)
-+  skin/classic/global/toolbar/viewbutton-right-selected-down.png           (toolbar/viewbutton-right-selected-down.png)
-+  skin/classic/global/toolbar/viewbutton-right-selected-inactive.png       (toolbar/viewbutton-right-selected-inactive.png)
 +  skin/classic/global/toolbar/spring.gif                             (toolbar/spring.gif)
 +  skin/classic/global/toolbar/toolbar-background.gif                 (toolbar/toolbar-background.gif)
 +  skin/classic/global/toolbar/toolbar-background-inactive.png        (toolbar/toolbar-background-inactive.png)
@@ -246,6 +225,7 @@ classic.jar:
 +  skin/classic/global/toolbar/toolbarbutton-customhover-left.png     (toolbar/toolbarbutton-customhover-left.png)
 +  skin/classic/global/toolbar/toolbarbutton-customhover-mid.png      (toolbar/toolbarbutton-customhover-mid.png)
 +  skin/classic/global/toolbar/toolbarbutton-customhover-right.png    (toolbar/toolbarbutton-customhover-right.png)
++  skin/classic/global/toolbar/white-transparent-gradient.png         (toolbar/white-transparent-gradient.png)
 +  skin/classic/global/tree/columnpicker.gif                          (tree/columnpicker.gif)
 +  skin/classic/global/tree/folder-dis.png                            (tree/folder-dis.png)
 +  skin/classic/global/tree/folder.png                                (tree/folder.png)

toolkit/themes/pinstripe/global/viewbuttons.css

@@ -34,13 +34,23 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
-#viewGroup {
+#topBar {
   -moz-appearance: -moz-mac-unified-toolbar;
-  padding: 4px 0 8px;
-  margin: 0;
+}
+
+.viewGroupWrapper {
+  -moz-box-align: center;
   -moz-box-pack: center;
 }
 
+#viewGroup {
+  background-color: rgba(0, 0, 0, 0.55);
+  padding: 1px;
+  -moz-border-radius: 3px;
+  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px;
+  margin: 4px 0 9px;
+}
+
 #viewGroup > * {
   -moz-box-orient: vertical;
   -moz-box-align: center;
@@ -48,148 +58,61 @@
   font: menu;
   text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
   margin: 0;
-  padding: 3px 0 0;
-  height: 24px;
-  background-color: transparent;
-  border: solid transparent;
-  border-width: 0 4px 0 5px;
-  -moz-border-image: url("chrome://global/skin/toolbar/viewbutton-middle.png") 0 4 0 5 repeat stretch;
+  padding: 1px 4px 0;
+  border: none;
+  border-left: 1px solid rgba(0, 0, 0, 0.8);
+  background: url("chrome://global/skin/toolbar/white-transparent-gradient.png") repeat-x #B4B4B4;
 }
 
-#viewGroup > :active:hover {
-  -moz-border-image: url("chrome://global/skin/toolbar/viewbutton-middle-down.png") 0 4 0 5 repeat stretch;
+#viewGroup > :not([checked=true]):not([selected=true]):active:hover {
+  background: #B5B5B5;
+  text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 -6px 14px, inset #000 0 1px 4px, inset rgba(0, 0, 0, 0.3) 0 1px 4px;
 }
 
 #viewGroup > radio[selected=true],
 #viewGroup > toolbarbutton[checked=true] {
   color: #FFF !important;
   text-shadow: rgba(0, 0, 0, 0.4) 0 1px;
-  -moz-border-image: url("chrome://global/skin/toolbar/viewbutton-middle-selected.png") 0 4 0 5 repeat stretch;
+  background: #606060;
+  -moz-box-shadow: inset black 0 2px 7px;
 }
 
 #viewGroup > radio[selected=true]:active:hover,
 #viewGroup > toolbarbutton[checked=true]:active:hover {
-  -moz-border-image: url("chrome://global/skin/toolbar/viewbutton-middle-selected-down.png") 0 4 0 5 repeat stretch;
+  background-color: #505050;
+}
+
+:root:not([active]) #viewGroup {
+  background-color: rgba(0, 0, 0, 0.25);
 }
 
 :root:not([active]) #viewGroup > * {
   color: #7C7C7C !important; /* remove this when we support click-through */
-  -moz-border-image: url("chrome://global/skin/toolbar/viewbutton-middle-inactive.png") 0 4 0 5 repeat stretch;
+  border-color: rgba(0, 0, 0, 0.4);
+  background-color: #CCC;
 }
 
 :root:not([active]) #viewGroup > radio[selected=true],
 :root:not([active]) #viewGroup > toolbarbutton[checked=true] {
   color: #C5C5C5 !important; /* remove this when we support click-through */
-  -moz-border-image: url("chrome://global/skin/toolbar/viewbutton-middle-selected-inactive.png") 0 4 0 5 repeat stretch;
+  background: #999;
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.65) 0 2px 7px;
 }
 
-#viewGroup > :first-child,
-#viewGroup > [first-visible],
+#viewGroup:not([chromedir=rtl]) > :first-child,
+#viewGroup:not([chromedir=rtl]) > [first-visible],
 #viewGroup[chromedir=rtl] > :last-child,
 #viewGroup[chromedir=rtl] > [last-visible] {
-  border-width: 0 4px 0 6px;
-  -moz-border-image: url("chrome://global/skin/toolbar/viewbutton-left.png") 0 4 0 6 repeat stretch;
+  -moz-border-radius-topleft: 2px;
+  -moz-border-radius-bottomleft: 2px;
+  border-left: none !important;
 }
 
-#viewGroup > :first-child:active:hover,
-#viewGroup > [first-visible]:active:hover,
-#viewGroup[chromedir=rtl] > :last-child:active:hover,
-#viewGroup[chromedir=rtl] > [last-visible]:active:hover {
-  -moz-border-image: url("chrome://global/skin/toolbar/viewbutton-left-down.png") 0 4 0 6 repeat stretch;
-}
-
-#viewGroup > radio:first-child[selected=true],
-#viewGroup > radio[first-visible][selected=true],
-#viewGroup[chromedir=rtl] > radio:last-child[selected=true],
-#viewGroup[chromedir=rtl] > radio[last-visible][selected=true],
-#viewGroup > toolbarbutton:first-child[checked=true],
-#viewGroup > toolbarbutton[first-visible][checked=true],
-#viewGroup[chromedir=rtl] > toolbarbutton:last-child[checked=true],
-#viewGroup[chromedir=rtl] > toolbarbutton[last-visible][checked=true] {
-  -moz-border-image: url("chrome://global/skin/toolbar/viewbutton-left-selected.png") 0 4 0 6 repeat stretch;
-}
-
-#viewGroup > radio:first-child[selected=true]:active:hover,
-#viewGroup > radio[first-visible][selected=true]:active:hover,
-#viewGroup[chromedir=rtl] > radio:last-child[selected=true]:active:hover,
-#viewGroup[chromedir=rtl] > radio[last-visible][selected=true]:active:hover,
-#viewGroup > toolbarbutton:first-child[checked=true]:active:hover,
-#viewGroup > toolbarbutton[first-visible][checked=true]:active:hover,
-#viewGroup[chromedir=rtl] > toolbarbutton:last-child[checked=true]:active:hover,
-#viewGroup[chromedir=rtl] > toolbarbutton[last-visible][checked=true]:active:hover {
-  -moz-border-image: url("chrome://global/skin/toolbar/viewbutton-left-selected-down.png") 0 4 0 6 repeat stretch;
-}
-
-:root:not([active]) #viewGroup > :first-child,
-:root:not([active]) #viewGroup > [first-visible],
-:root:not([active]) #viewGroup[chromedir=rtl] > :last-child,
-:root:not([active]) #viewGroup[chromedir=rtl] > [last-visible] {
-  -moz-border-image: url("chrome://global/skin/toolbar/viewbutton-left-inactive.png") 0 4 0 6 repeat stretch;
-}
-
-:root:not([active]) #viewGroup > radio:first-child[selected=true],
-:root:not([active]) #viewGroup > radio[first-visible][selected=true],
-:root:not([active]) #viewGroup[chromedir=rtl] > radio:last-child[selected=true],
-:root:not([active]) #viewGroup[chromedir=rtl] > radio[last-visible][selected=true],
-:root:not([active]) #viewGroup > toolbarbutton:first-child[checked=true],
-:root:not([active]) #viewGroup > toolbarbutton[first-visible][checked=true],
-:root:not([active]) #viewGroup[chromedir=rtl] > toolbarbutton:last-child[checked=true],
-:root:not([active]) #viewGroup[chromedir=rtl] > toolbarbutton[last-visible][checked=true] {
-  -moz-border-image: url("chrome://global/skin/toolbar/viewbutton-left-selected-inactive.png") 0 4 0 6 repeat stretch;
-}
-
-#viewGroup > :last-child,
-#viewGroup > [last-visible],
+#viewGroup:not([chromedir=rtl]) > :last-child,
+#viewGroup:not([chromedir=rtl]) > [last-visible],
 #viewGroup[chromedir=rtl] > :first-child,
 #viewGroup[chromedir=rtl] > [first-visible] {
-  border-width: 0 6px 0 5px;
-  -moz-border-image: url("chrome://global/skin/toolbar/viewbutton-right.png") 0 6 0 5 repeat stretch;
+  -moz-border-radius-topright: 2px;
+  -moz-border-radius-bottomright: 2px;
 }
-
-#viewGroup > :last-child:active:hover,
-#viewGroup > [last-visible]:active:hover,
-#viewGroup[chromedir=rtl] > :first-child:active:hover,
-#viewGroup[chromedir=rtl] > [first-visible]:active:hover {
-  -moz-border-image: url("chrome://global/skin/toolbar/viewbutton-right-down.png") 0 6 0 5 repeat stretch;
-}
-
-#viewGroup > radio:last-child[selected=true],
-#viewGroup > radio[last-visible][selected=true],
-#viewGroup[chromedir=rtl] > radio:first-child[selected=true],
-#viewGroup[chromedir=rtl] > radio[first-visible][selected=true],
-#viewGroup > toolbarbutton:last-child[checked=true],
-#viewGroup > toolbarbutton[last-visible][checked=true],
-#viewGroup[chromedir=rtl] > toolbarbutton:first-child[checked=true],
-#viewGroup[chromedir=rtl] > toolbarbutton[first-visible][checked=true] {
-  -moz-border-image: url("chrome://global/skin/toolbar/viewbutton-right-selected.png") 0 6 0 5 repeat stretch;
-}
-
-#viewGroup > radio:last-child[selected=true]:active:hover,
-#viewGroup > radio[last-visible][selected=true]:active:hover,
-#viewGroup[chromedir=rtl] > radio:first-child[selected=true]:active:hover,
-#viewGroup[chromedir=rtl] > radio[first-visible][selected=true]:active:hover,
-#viewGroup > toolbarbutton:last-child[checked=true]:active:hover,
-#viewGroup > toolbarbutton[last-visible][checked=true]:active:hover,
-#viewGroup[chromedir=rtl] > toolbarbutton:first-child[checked=true]:active:hover,
-#viewGroup[chromedir=rtl] > toolbarbutton[first-visible][checked=true]:active:hover {
-  -moz-border-image: url("chrome://global/skin/toolbar/viewbutton-right-selected-down.png") 0 6 0 5 repeat stretch;
-}
-
-:root:not([active]) #viewGroup > :last-child,
-:root:not([active]) #viewGroup > [last-visible],
-:root:not([active]) #viewGroup[chromedir=rtl] > :first-child,
-:root:not([active]) #viewGroup[chromedir=rtl] > [first-visible] {
-  -moz-border-image: url("chrome://global/skin/toolbar/viewbutton-right-inactive.png") 0 6 0 5 repeat stretch;
-}
-
-:root:not([active]) #viewGroup > radio:last-child[selected=true],
-:root:not([active]) #viewGroup > radio[last-visible][selected=true],
-:root:not([active]) #viewGroup[chromedir=rtl] > radio:first-child[selected=true],
-:root:not([active]) #viewGroup[chromedir=rtl] > radio[first-visible][selected=true],
-:root:not([active]) #viewGroup > toolbarbutton:last-child[checked=true],
-:root:not([active]) #viewGroup > toolbarbutton[last-visible][checked=true],
-:root:not([active]) #viewGroup[chromedir=rtl] > toolbarbutton:first-child[checked=true],
-:root:not([active]) #viewGroup[chromedir=rtl] > toolbarbutton[first-visible][checked=true] {
-  -moz-border-image: url("chrome://global/skin/toolbar/viewbutton-right-selected-inactive.png") 0 6 0 5 repeat stretch;
-}
-

toolkit/themes/pinstripe/mozapps/downloads/downloads.css

@@ -107,21 +107,31 @@ richlistitem[type="download"] button {
   -moz-appearance: statusbar;
 }
 
-#downloadManager:not([active="true"]) #search > * {
+:root:not([active]) #searchbox {
   opacity: 0.7;
 }
 
 #clearListButton {
   -moz-appearance: none;
-  border: 1px solid #5F5F5F;
-  -moz-border-radius: 4px;
-  background: url(chrome://global/skin/icons/white-gray-gradient.gif) #A09E9D repeat-x top center;
-  min-height: 0;
+  min-height: 18px;
   min-width: 0;
-  padding: 2px;
   margin: 0 6px;
+  padding: 0 2px;
+  text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
+  border: 1px solid rgba(0, 0, 0, 0.6);
+  -moz-border-radius: 3px;
+  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px;
+  background: url("chrome://global/skin/toolbar/white-transparent-gradient.png") repeat-x #B4B4B4;
 }
 
 #clearListButton:hover:active:not([disabled="true"]) {
-  background: url(chrome://global/skin/icons/white-gray-gradient-active.gif);
+  background: #B5B5B5;
+  text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
+}
+
+:root:not([active]) #clearListButton {
+  color: #7C7C7C !important; /* remove this when we support click-through */
+  border-color: rgba(0, 0, 0, 0.25);
+  background-color: #CCC;
 }

toolkit/themes/pinstripe/mozapps/extensions/extensions.css

@@ -354,11 +354,6 @@ vbox[typeName="status"][type="header-recommended"] {
   border-bottom: 1px solid #878787;
 }
 
-#progressBox {
-  padding: 5px 5px 5px 5px;
-  -moz-appearance: -moz-mac-unified-toolbar;
-}
-
 #progressBox > hbox {
   -moz-box-align: center;
 }

toolkit/themes/winstripe/mozapps/extensions/extensions.css

@@ -347,15 +347,17 @@ vbox[typeName="status"][type="header-recommended"] {
   -moz-box-align: center;
 }
 
-/* View buttons */
-.viewSelector {
+/* View buttons resp. Progress box */
+#topBar {
   border-bottom: 2px groove ThreeDFace;
-  margin: 0px;
-  -moz-padding-start: 10px;
   background-color: -moz-Field;
   color: -moz-FieldText;
 }
 
+#viewGroup {
+  -moz-padding-start: 10px;
+}
+
 #viewGroup radio {
   -moz-appearance: none;
   margin: 0px 1px 0px 1px;