From 65f4b985451e542563a2143dde4cbd2e10c5c183 Mon Sep 17 00:00:00 2001
From: Shane Caraveo <scaraveo@mozilla.com>
Date: Sun, 5 May 2013 19:48:20 -0700
Subject: [PATCH] bug 824164 change position of chat overflow button, r=markh

---
 browser/base/content/socialchat.xml       |  2 +-
 browser/themes/linux/browser.css          |  2 ++
 browser/themes/osx/browser.css            |  6 +++++-
 browser/themes/shared/social/chat.inc.css | 14 ++------------
 browser/themes/windows/browser.css        |  2 ++
 5 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/browser/base/content/socialchat.xml b/browser/base/content/socialchat.xml
index 0ebfadea4668..6a7099982094 100644
--- a/browser/base/content/socialchat.xml
+++ b/browser/base/content/socialchat.xml
@@ -155,10 +155,10 @@
   <binding id="chatbar">
     <content>
       <xul:hbox align="end" pack="end" anonid="innerbox" class="chatbar-innerbox" mousethrough="always" flex="1">
+        <xul:spacer flex="1" anonid="spacer" class="chatbar-overflow-spacer"/>
         <xul:toolbarbutton anonid="nub" class="chatbar-button" type="menu" collapsed="true" mousethrough="never">
           <xul:menupopup anonid="nubMenu" oncommand="document.getBindingParent(this).showChat(event.target.chat)"/>
         </xul:toolbarbutton>
-        <xul:spacer flex="1" anonid="spacer" class="chatbar-overflow-spacer"/>
         <children/>
       </xul:hbox>
     </content>
diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css
index 9aa038342f3d..54f275b3b132 100644
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -2194,12 +2194,14 @@ toolbar[iconsize="small"] .toolbarbutton-badge-container {
 .chatbar-button {
   -moz-appearance: none;
   background-color: #d9d9d9;
+  background-image: linear-gradient(@toolbarHighlight@, rgba(255,255,255,0));
 }
 
 .chatbar-button > .toolbarbutton-icon {
   -moz-margin-end: 0;
 }
 
+.chatbar-button:hover,
 .chatbar-button[open="true"] {
   background-color: #f0f0f0;
 }
diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css
index 5badf49188ca..83f4bf0ab6d4 100644
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -3775,13 +3775,17 @@ toolbar[mode="icons"] > *|* > .toolbarbutton-badge[badge]:not([badge=""]):-moz-l
 
 .chatbar-button {
   background-color: #d9d9d9;
+  background-image: linear-gradient(rgba(255,255,255,.43), rgba(255,255,255,0));
+  border-top-left-radius: @toolbarbuttonCornerRadius@;
+  border-top-right-radius: @toolbarbuttonCornerRadius@;
 }
 
+.chatbar-button:hover,
 .chatbar-button[open="true"] {
   background-color: #f0f0f0;
 }
 
-.chatbar-button[activity] {
+.chatbar-button[activity]:not([open]) {
   background-image: radial-gradient(circle farthest-corner at center 2px, rgb(254,254,255) 3%, rgba(210,235,255,0.9) 12%, rgba(148,205,253,0.6) 30%, rgba(148,205,253,0.2) 70%);
 }
 
diff --git a/browser/themes/shared/social/chat.inc.css b/browser/themes/shared/social/chat.inc.css
index c708218558d2..99b6c442f9b0 100644
--- a/browser/themes/shared/social/chat.inc.css
+++ b/browser/themes/shared/social/chat.inc.css
@@ -73,13 +73,12 @@
 
 .chatbar-button {
   list-style-image: url("chrome://browser/skin/social/services-16.png");
-  border: none;
   margin: 0;
   padding: 2px;
   height: 21px;
   width: 21px;
-  border-top: 1px solid #ccc;
-  -moz-border-end: 1px solid #ccc;
+  border: 1px solid #ccc;
+  border-bottom: none;
 }
 
 @media (min-resolution: 2dppx) {
@@ -95,15 +94,6 @@
   max-width: 16px;
 }
 
-.chatbar-button > .toolbarbutton-icon {
-  opacity: .6;
-}
-
-.chatbar-button:hover > .toolbarbutton-icon,
-.chatbar-button[open="true"] > .toolbarbutton-icon {
-  opacity: 1;
-}
-
 .chatbar-button[open="true"] {
   box-shadow: inset 0 2px 5px rgba(0,0,0,0.6), 0 1px rgba(255,255,255,0.2);
 }
diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css
index 7fe723602d6e..0c7bea7990ca 100644
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -2914,12 +2914,14 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
 .chatbar-button {
   -moz-appearance: none;
   background-color: #c4cfde;
+  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
 }
 
 .chatbar-button > .toolbarbutton-icon {
   -moz-margin-end: 0;
 }
 
+.chatbar-button:hover,
 .chatbar-button[open="true"] {
   background-color: #dae3f0;
 }