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
authorMarkus Stange <mstange@themasta.com>
Fri, 24 Apr 2009 12:01:21 +0200
changeset 27705 6565c955be7b3d1dddfb8cbb8254a27b6e8e142d
parent 27704 7e9d9227f498d131b696f6360e48f65449b97181
child 27706 9583c67570f5b3ad93b7a209f4828042eae70c7a
push id6711
push usermstange@themasta.com
push dateFri, 24 Apr 2009 10:03:44 +0000
treeherdermozilla-central@6565c955be7b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao, Enn, dtownsend
bugs477827
milestone1.9.2a1pre
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
browser/themes/gnomestripe/browser/pageInfo.css
browser/themes/winstripe/browser/pageInfo.css
toolkit/content/WindowDraggingUtils.jsm
toolkit/mozapps/extensions/content/extensions.js
toolkit/mozapps/extensions/content/extensions.xul
toolkit/themes/gnomestripe/mozapps/extensions/extensions.css
toolkit/themes/pinstripe/global/console/console.css
toolkit/themes/pinstripe/global/jar.mn
toolkit/themes/pinstripe/global/toolbar/roundrectbutton-down.png
toolkit/themes/pinstripe/global/toolbar/roundrectbutton-inactive.png
toolkit/themes/pinstripe/global/toolbar/roundrectbutton.png
toolkit/themes/pinstripe/global/toolbar/viewbutton-left-down.png
toolkit/themes/pinstripe/global/toolbar/viewbutton-left-inactive.png
toolkit/themes/pinstripe/global/toolbar/viewbutton-left-selected-down.png
toolkit/themes/pinstripe/global/toolbar/viewbutton-left-selected-inactive.png
toolkit/themes/pinstripe/global/toolbar/viewbutton-left-selected.png
toolkit/themes/pinstripe/global/toolbar/viewbutton-left.png
toolkit/themes/pinstripe/global/toolbar/viewbutton-middle-down.png
toolkit/themes/pinstripe/global/toolbar/viewbutton-middle-inactive.png
toolkit/themes/pinstripe/global/toolbar/viewbutton-middle-selected-down.png
toolkit/themes/pinstripe/global/toolbar/viewbutton-middle-selected-inactive.png
toolkit/themes/pinstripe/global/toolbar/viewbutton-middle-selected.png
toolkit/themes/pinstripe/global/toolbar/viewbutton-middle.png
toolkit/themes/pinstripe/global/toolbar/viewbutton-right-down.png
toolkit/themes/pinstripe/global/toolbar/viewbutton-right-inactive.png
toolkit/themes/pinstripe/global/toolbar/viewbutton-right-selected-down.png
toolkit/themes/pinstripe/global/toolbar/viewbutton-right-selected-inactive.png
toolkit/themes/pinstripe/global/toolbar/viewbutton-right-selected.png
toolkit/themes/pinstripe/global/toolbar/viewbutton-right.png
toolkit/themes/pinstripe/global/toolbar/white-transparent-gradient.png
toolkit/themes/pinstripe/global/viewbuttons.css
toolkit/themes/pinstripe/mozapps/downloads/downloads.css
toolkit/themes/pinstripe/mozapps/extensions/extensions.css
toolkit/themes/winstripe/mozapps/extensions/extensions.css
--- a/browser/base/content/pageinfo/pageInfo.xul
+++ b/browser/base/content/pageinfo/pageInfo.xul
@@ -109,33 +109,31 @@
     <key key="&selectall.key;"   modifiers="alt"   command="cmd_selectall"/>
   </keyset>
 
   <menupopup id="picontext">
     <menuitem id="menu_selectall" label="&selectall.label;" command="cmd_selectall" accesskey="&selectall.accesskey;"/>
     <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">
     <!-- General page information -->
     <vbox id="generalPanel">
       <textbox class="header" readonly="true" id="titletext"/>
       <grid>
         <columns>
--- a/browser/themes/gnomestripe/browser/pageInfo.css
+++ b/browser/themes/gnomestripe/browser/pageInfo.css
@@ -53,20 +53,19 @@
   color: -moz-FieldText;
 }
 
 #viewGroup radio[selected="true"] {
   background-color: Highlight;
   color: HighlightText; 
 }
 
-.viewSelector {
+#topBar {
   -moz-appearance: listbox;
-  margin: 8px 8px 0 8px;
-  padding: 0;
+  margin: 8px 8px 0;
 }
 
 #generalTab {
   -moz-image-region: rect(0px, 32px, 32px, 0px)
 }
 
 #mediaTab {
   -moz-image-region: rect(0px, 64px, 32px, 32px)
--- a/browser/themes/winstripe/browser/pageInfo.css
+++ b/browser/themes/winstripe/browser/pageInfo.css
@@ -43,19 +43,18 @@
 #viewGroup radio {
   list-style-image: url("chrome://browser/skin/pageInfo.png");
   -moz-box-orient: vertical;
   -moz-box-align: center;
   -moz-appearance: none;
   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;
 }
 
 #generalTab {
   -moz-image-region: rect(0px, 32px, 32px, 0px)
 }
--- a/toolkit/content/WindowDraggingUtils.jsm
+++ b/toolkit/content/WindowDraggingUtils.jsm
@@ -41,17 +41,17 @@ function WindowDraggingElement(elem, win
   this._window = window;
   this._elem.addEventListener("mousedown", this, false);
 }
 
 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":
         if (aEvent.button != 0 || !this.mouseDownCheck.call(this._elem, aEvent))
           return;
 
         let target = aEvent.originalTarget, parent = aEvent.originalTarget;
         while (parent != this._elem) {
--- a/toolkit/mozapps/extensions/content/extensions.js
+++ b/toolkit/mozapps/extensions/content/extensions.js
@@ -533,21 +533,17 @@ function getIDFromResourceURI(aURI)
 {
   if (aURI.substring(0, PREFIX_ITEM_URI.length) == PREFIX_ITEM_URI)
     return aURI.substring(PREFIX_ITEM_URI.length);
   return 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()
 {
   var rds = gExtensionManager.datasource.QueryInterface(Components.interfaces.nsIRDFRemoteDataSource);
   if (rds)
     rds.Flush();
 }
@@ -1442,19 +1438,18 @@ UpdateCheckListener.prototype = {
   },
 
   /**
    * See nsIExtensionManager.idl
    */
   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();
     updateGlobalCommands();
     if (this._updateFound)
       showView("updates");
     else {
       showMessage(URI_NOTIFICATION_ICON_INFO,
--- a/toolkit/mozapps/extensions/content/extensions.xul
+++ b/toolkit/mozapps/extensions/content/extensions.xul
@@ -156,39 +156,40 @@
     <menuitem id="menuitem_learnMore" command="cmd_homepage"
               label="&searchResultHomepage.value;"/>
     <menuitem id="menuitem_installSearchResult" command="cmd_installSearchResult"
               label="&cmd.installSearchResult.label;"/>
   </vbox>
 
   <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"/>
           <label id="progressStatus" value="&progressStatus.label;"/>
         </hbox>
         <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">
       <hbox id="searchPanel" align="center">
         <textbox id="searchfield" emptytext="&searchAddons.label;"
                  type="search" searchbutton="true" class="compact"
                  oncommand="retrieveRepositoryAddons(this.value);"/>
         <spacer flex="1"/>
--- a/toolkit/themes/gnomestripe/mozapps/extensions/extensions.css
+++ b/toolkit/themes/gnomestripe/mozapps/extensions/extensions.css
@@ -350,21 +350,20 @@ vbox[typeName="status"][type="header-rec
 #progressBox {
   padding: 5px 5px 5px 5px;
 }
 
 #progressBox > hbox {
   -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 {
   -moz-appearance: none;
   min-width: 4.5em;
   margin: 0;
   padding: 3px;
   list-style-image: url("chrome://mozapps/skin/extensions/viewButtons.png");
--- a/toolkit/themes/pinstripe/global/console/console.css
+++ b/toolkit/themes/pinstripe/global/console/console.css
@@ -183,42 +183,39 @@
 toolbarseparator {
   min-height: 1em;
   background-image: none;
 }
 
 /* Toolbar icons */
 
 #ToolbarMode {
-  padding: 4px 0 8px;
   -moz-box-pack: center;
 }
 
 #ToolbarMode toolbarbutton > .toolbarbutton-icon {
   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;
 }
--- a/toolkit/themes/pinstripe/global/jar.mn
+++ b/toolkit/themes/pinstripe/global/jar.mn
@@ -210,46 +210,26 @@ classic.jar:
 +  skin/classic/global/splitter/dimple.png                            (splitter/dimple.png)
 +  skin/classic/global/splitter/grip-hrz-after.gif                    (splitter/grip-hrz-after.gif)
 +  skin/classic/global/splitter/grip-hrz-before.gif                   (splitter/grip-hrz-before.gif)
 +  skin/classic/global/splitter/grip-vrt-after.gif                    (splitter/grip-vrt-after.gif)
 +  skin/classic/global/splitter/grip-vrt-before.gif                   (splitter/grip-vrt-before.gif)
 +  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)
 +  skin/classic/global/toolbar/toolbar-background-tall.png            (toolbar/toolbar-background-tall.png)
 +  skin/classic/global/toolbar/toolbar-background-tall-inactive.png   (toolbar/toolbar-background-tall-inactive.png)
 +  skin/classic/global/toolbar/toolbar-pinstripe-overlay.png          (toolbar/toolbar-pinstripe-overlay.png)
 +  skin/classic/global/toolbar/toolbar-separator.png                  (toolbar/toolbar-separator.png)
 +  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)
 +  skin/classic/global/tree/item.png                                  (tree/item.png)
 +  skin/classic/global/tree/item-grayscale.png                        (tree/item-grayscale.png)
 +  skin/classic/global/tree/sort-asc.gif                              (tree/sort-asc.gif)
 +  skin/classic/global/tree/sort-dsc.gif                              (tree/sort-dsc.gif)
deleted file mode 100644
index 11584a95c909118a3e26e52a5b30f265db7ed8d0..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 970f225b9ee97256700fbc5afcf85ac00f3696f1..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index c465835727d82d6fec0bc0d2232d87465a2a29df..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 2122658ef0b2a7d6f2ea34c42a6ad7e2c66a99ce..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 6a9ecdf83c7611f14c100845a1a6820913c9e605..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 14e12bcf3688b399fa697fd1d85b2d8d5f255be7..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 60fbf4b316f2fce4a7d7f03f114472d8739ee809..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 61c28e78d91844702f3f3f3a7905f1ecf48567cc..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 24ac221fb3c410f2c6b55b1c67810dfc320a15c7..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index a6f52ad494875a5b27a1ee633c7caece3c9738ad..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 4e6fca5656567d3efca5b8be5fe05a2d10a2c62e..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index b3b387ed648bb2bfffff2e81903716ac1dcab703..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index ffb64632c937f9c0993763b614a82cbc219756f3..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 8a1d0c486e72136eaeda3cf24f46ebc3146a7d92..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index e96dd5df3c94036fef8d09a7e2734b075aa3352e..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 29d938ed66b5515e76981757aed94e52a6327b0a..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 7861d7dbced4cf2fbc35bde904373e328a8993b7..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 43daaded93a65acd6ab1c816b8b3f60d76c223e2..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index bda29d7be9f68296e6605daffbec9426c55be086..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index ed58a44c10d36053643588430e15d4a006a6222f..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 3862b568815b0a4039cb0f0ed1daec220f77cb50..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..df63907dc50315d830b529cba6b11e6014562eab
GIT binary patch
literal 177
zc%17D@N?(olHy`uVBq!ia0vp^Ahs|E8<1T2dd@o_#ggvm>&U>c{)9Pe*GnK@vcxr_
zBsf2<q&%@GmBBG3KPgqgGdD3kH7GSPrLyp3str()v!{z=NX4zBKmY&#muFLA;1>9=
z5cV)UNwjX^u0#Dtv}*j<9O4I3?xm~m2j6|gAF}<|;{!)c15fq{&N$Q=c$`5XfuSf_
V+%rIbeGJez22WQ%mvv4FO#pxnJ!Aj?
--- a/toolkit/themes/pinstripe/global/viewbuttons.css
+++ b/toolkit/themes/pinstripe/global/viewbuttons.css
@@ -29,167 +29,90 @@
  * use your version of this file under the terms of the MPL, indicate your
  * decision by deleting the provisions above and replace them with the notice
  * and other provisions required by the GPL or the LGPL. If you do not delete
  * the provisions above, a recipient may use your version of this file under
  * the terms of any one of the MPL, the GPL or the LGPL.
  *
  * ***** 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;
   -moz-appearance: none;
   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;
-}
-
-#viewGroup > :first-child,
-#viewGroup > [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;
-}
-
-#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;
+  background: #999;
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.65) 0 2px 7px;
 }
 
-: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[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;
-}
-
-#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:not([chromedir=rtl]) > :first-child,
+#viewGroup:not([chromedir=rtl]) > [first-visible],
+#viewGroup[chromedir=rtl] > :last-child,
+#viewGroup[chromedir=rtl] > [last-visible] {
+  -moz-border-radius-topleft: 2px;
+  -moz-border-radius-bottomleft: 2px;
+  border-left: none !important;
 }
 
-#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:not([chromedir=rtl]) > :last-child,
+#viewGroup:not([chromedir=rtl]) > [last-visible],
+#viewGroup[chromedir=rtl] > :first-child,
+#viewGroup[chromedir=rtl] > [first-visible] {
+  -moz-border-radius-topright: 2px;
+  -moz-border-radius-bottomright: 2px;
 }
-
-#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;
-}
-
--- a/toolkit/themes/pinstripe/mozapps/downloads/downloads.css
+++ b/toolkit/themes/pinstripe/mozapps/downloads/downloads.css
@@ -102,26 +102,36 @@ richlistitem[type="download"] button {
 }
 
 #search {
   -moz-box-pack: end;
   -moz-padding-end: 4px;
   -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;
+}
--- a/toolkit/themes/pinstripe/mozapps/extensions/extensions.css
+++ b/toolkit/themes/pinstripe/mozapps/extensions/extensions.css
@@ -349,21 +349,16 @@ vbox[typeName="status"][type="header-rec
   font-size: 150%;
   background: -moz-dialog;
 }
 
 #searchPanel {
   border-bottom: 1px solid #878787;
 }
 
-#progressBox {
-  padding: 5px 5px 5px 5px;
-  -moz-appearance: -moz-mac-unified-toolbar;
-}
-
 #progressBox > hbox {
   -moz-box-align: center;
 }
 
 /* Update view checkbox */
 .includeUpdate {
   -moz-user-focus: none;
 }
--- a/toolkit/themes/winstripe/mozapps/extensions/extensions.css
+++ b/toolkit/themes/winstripe/mozapps/extensions/extensions.css
@@ -342,25 +342,27 @@ vbox[typeName="status"][type="header-rec
 #progressBox {
   padding: 5px 5px 5px 5px;
 }
 
 #progressBox > hbox {
   -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;
   padding: 5px 3px 1px;
   min-width: 4.5em;
   list-style-image: url("chrome://mozapps/skin/extensions/viewButtons.png");
 }