Bug 798124 - Chatbox titlebar and chat menubutton UI cleanup. :mixedpuppy also contributed to the patch. r=felipe

--HG--
extra : rebase_source : 7354b7f189d98d71ae5f04cad901922cf041c506

browser/themes/gnomestripe/browser.css

@@ -2734,6 +2734,7 @@ html|*#gcli-output-frame {
 
 .chat-titlebar {
   background-color: #d9d9d9;
+  background-image: linear-gradient(@toolbarHighlight@, rgba(255,255,255,0));
   height: 20px;
   min-height: 20px;
   width: 100%;
@@ -2754,7 +2755,10 @@ html|*#gcli-output-frame {
 }
 
 .chat-titlebar[activity] {
-  background-color: #ceeaff;
+  background-image: radial-gradient(ellipse closest-side at center, rgb(255,255,255), rgba(255,255,255,0));
+  background-repeat: no-repeat;
+  background-size: 100% 20px;
+  background-position: 0 -10px;
 }
 
 .chat-frame {
@@ -2764,6 +2768,7 @@ html|*#gcli-output-frame {
 }
 
 .chatbar-button {
+  -moz-appearance: none;
   background-color: #d9d9d9;
   list-style-image: url("chrome://browser/skin/social/social.png");
   border: none;
@@ -2775,8 +2780,16 @@ html|*#gcli-output-frame {
   -moz-border-end: 1px solid #ccc;
 }
 
-.chatbar-button[open="true"],
-.chatbar-button:active:hover {
+.chatbar-button > .toolbarbutton-icon {
+  opacity: .6;
+  -moz-margin-end: 0;
+}
+.chatbar-button:hover > .toolbarbutton-icon,
+.chatbar-button[open="true"] > .toolbarbutton-icon {
+  opacity: 1;
+}
+
+.chatbar-button[open="true"] {
   background-color: #f0f0f0;
   box-shadow: inset 0 2px 5px rgba(0,0,0,0.6), 0 1px rgba(255,255,255,0.2);
 }
@@ -2787,7 +2800,7 @@ html|*#gcli-output-frame {
 }
 
 .chatbar-button[activity] {
-  background-color: #ceeaff;
+  background-image: radial-gradient(circle farthest-corner at center 3px, rgb(233,242,252) 3%, rgba(172,206,255,0.75) 40%, rgba(87,151,201,0.5) 80%, rgba(87,151,201,0));
 }
 
 .chatbar-button > menupopup > menuitem[activity] {
@@ -2811,6 +2824,8 @@ chatbox {
   background-color: white;
   border: 1px solid #ccc;
   border-bottom: none;
+  border-top-left-radius: 2.5px;
+  border-top-right-radius: 2.5px;
 }
 
 chatbox[minimized="true"] {

browser/themes/pinstripe/browser.css

@@ -4156,6 +4156,7 @@ html|*#gcli-output-frame {
 
 .chat-titlebar {
   background-color: #d9d9d9;
+  background-image: linear-gradient(rgba(255,255,255,.43), rgba(255,255,255,0));
   height: 20px;
   min-height: 20px;
   width: 100%;
@@ -4172,7 +4173,10 @@ html|*#gcli-output-frame {
 }
 
 .chat-titlebar[activity] {
-  background-color: #ceeaff;
+  background-image: radial-gradient(ellipse closest-side at center, rgb(255,255,255), rgba(255,255,255,0));
+  background-repeat: no-repeat;
+  background-size: 100% 20px;
+  background-position: 0 -10px;
 }
 
 .chat-titlebar[selected] {
@@ -4197,8 +4201,15 @@ html|*#gcli-output-frame {
   -moz-border-end: 1px solid #ccc;
 }
 
-.chatbar-button[open="true"],
-.chatbar-button:active:hover {
+.chatbar-button > .toolbarbutton-icon {
+  opacity: .6;
+}
+.chatbar-button:hover > .toolbarbutton-icon,
+.chatbar-button[open="true"] > .toolbarbutton-icon {
+  opacity: 1;
+}
+
+.chatbar-button[open="true"] {
   background-color: #f0f0f0;
   box-shadow: inset 0 2px 5px rgba(0,0,0,0.6), 0 1px rgba(255,255,255,0.2);
 }
@@ -4209,7 +4220,7 @@ html|*#gcli-output-frame {
 }
 
 .chatbar-button[activity] {
-  background-color: #ceeaff;
+  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%);
 }
 
 .chatbar-button > menupopup > menuitem[activity] {
@@ -4218,7 +4229,7 @@ html|*#gcli-output-frame {
 
 .chatbar-innerbox {
   background: transparent;
-  margin: -285px -1px 0 -1px;
+  margin: -285px 0 0;
   overflow: hidden;
 }
 
@@ -4233,6 +4244,8 @@ chatbox {
   background-color: white;
   border: 1px solid #ccc;
   border-bottom: none;
+  border-top-left-radius: @toolbarbuttonCornerRadius@;
+  border-top-right-radius: @toolbarbuttonCornerRadius@;
 }
 
 chatbox[minimized="true"] {

browser/themes/winstripe/browser.css

@@ -3438,6 +3438,7 @@ html|*#gcli-output-frame {
 
 .chat-titlebar {
   background-color: #c4cfde;
+  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
   height: 20px;
   min-height: 20px;
   width: 100%;
@@ -3458,7 +3459,10 @@ html|*#gcli-output-frame {
 }
 
 .chat-titlebar[activity] {
-  background-color: #ceeaff;
+  background-image: radial-gradient(ellipse closest-side at center, rgb(255,255,255), rgba(255,255,255,0));
+  background-repeat: no-repeat;
+  background-size: 100% 20px;
+  background-position: 0 -10px;
 }
 
 .chat-frame {
@@ -3487,9 +3491,16 @@ html|*#gcli-output-frame {
   padding: 2px;
 }
 
-.chatbar-button[open="true"],
-.chatbar-button:hover,
-.chatbar-button:active:hover {
+.chatbar-button > .toolbarbutton-icon {
+  opacity: .6;
+  -moz-margin-end: 0;
+}
+.chatbar-button:hover > .toolbarbutton-icon,
+.chatbar-button[open="true"] > .toolbarbutton-icon {
+  opacity: 1;
+}
+
+.chatbar-button[open="true"] {
   background-color: #dae3f0;
   box-shadow: inset 0 2px 5px rgba(0,0,0,0.6), 0 1px rgba(255,255,255,0.2);
 }
@@ -3499,8 +3510,8 @@ html|*#gcli-output-frame {
   display: none;
 }
 
-.chatbar-button[activity] {
-  background-color: #ceeaff;
+.chatbar-button[activity]:not([open="true"]) {
+  background-image: radial-gradient(circle farthest-corner at center 3px, rgb(255,255,255) 3%, rgba(186,221,251,0.75) 40%, rgba(127,179,255,0.5) 80%, rgba(127,179,255,0.25));
 }
 
 .chatbar-button > menupopup > menuitem[activity] {
@@ -3509,7 +3520,7 @@ html|*#gcli-output-frame {
 
 .chatbar-innerbox {
   background: transparent;
-  margin: -285px -1px 0 -1px;
+  margin: -285px 0 0;
   overflow: hidden;
 }
 
@@ -3524,6 +3535,8 @@ chatbox {
   background-color: white;
   border: 1px solid #ccc;
   border-bottom: none;
+  border-top-left-radius: 2.5px;
+  border-top-right-radius: 2.5px;
 }
 
 chatbox[minimized="true"] {