Bug 798124 - Chatbox titlebar and chat menubutton UI cleanup. :mixedpuppy also contributed to the patch. r=felipe
authorJared Wein <jwein@mozilla.com>
Fri, 05 Oct 2012 17:57:53 -0700
changeset 111306 63337e1b9643e602b59458b8494cb122f590a2dd
parent 111305 c9fa8d28064490c0153d8b9fd9e572000b72c40a
child 111307 b3c8f279987b16fd631d14cc53b2c030944a7064
push id93
push usernmatsakis@mozilla.com
push dateWed, 31 Oct 2012 21:26:57 +0000
reviewersfelipe
bugs798124
milestone19.0a1
Bug 798124 - Chatbox titlebar and chat menubutton UI cleanup. :mixedpuppy also contributed to the patch. r=felipe
browser/themes/gnomestripe/browser.css
browser/themes/pinstripe/browser.css
browser/themes/winstripe/browser.css
--- a/browser/themes/gnomestripe/browser.css
+++ b/browser/themes/gnomestripe/browser.css
@@ -2729,16 +2729,17 @@ html|*#gcli-output-frame {
 .chat-title {
   font-weight: bold;
   color: -moz-dialogtext;
   cursor: inherit;
 }
 
 .chat-titlebar {
   background-color: #d9d9d9;
+  background-image: linear-gradient(@toolbarHighlight@, rgba(255,255,255,0));
   height: 20px;
   min-height: 20px;
   width: 100%;
   margin: 0;
   padding: 2px;
   -moz-padding-start: 6px;
   border: none;
   border-bottom: 1px solid #ccc;
@@ -2749,50 +2750,62 @@ html|*#gcli-output-frame {
   border-bottom: none;
 }
 
 .chat-titlebar[selected] {
   background-color: #f0f0f0;
 }
 
 .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 {
   padding: 0;
   margin: 0;
   overflow: hidden;
 }
 
 .chatbar-button {
+  -moz-appearance: none;
   background-color: #d9d9d9;
   list-style-image: url("chrome://browser/skin/social/social.png");
   border: none;
   margin: 0;
   padding: 2px;
   height: 21px;
   width: 21px;
   border-top: 1px solid #ccc;
   -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);
 }
 
 .chatbar-button > .toolbarbutton-text,
 .chatbar-button > .toolbarbutton-menu-dropmarker {
   display: none;
 }
 
 .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] {
   font-weight: bold;
 }
 
 .chatbar-innerbox {
   background: transparent;
@@ -2806,16 +2819,18 @@ chatbar {
 
 chatbox {
   height: 285px;
   width: 260px;
   -moz-margin-start: 4px;
   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"] {
   width: 160px;
   height: 20px;
 }
 
 .click-to-play-plugins-notification-content {
--- a/browser/themes/pinstripe/browser.css
+++ b/browser/themes/pinstripe/browser.css
@@ -4151,33 +4151,37 @@ html|*#gcli-output-frame {
 .chat-title {
   font-weight: bold;
   color: -moz-dialogtext;
   cursor: inherit;
 }
 
 .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%;
   margin: 0;
   padding: 2px;
   -moz-padding-start: 6px;
   border: none;
   border-bottom: 1px solid #ccc;
   cursor: pointer;
 }
 
 .chat-titlebar[minimized="true"] {
   border-bottom: none;
 }
 
 .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] {
   background-color: #f0f0f0;
 }
 
 .chat-frame {
   padding: 0;
@@ -4192,52 +4196,61 @@ html|*#gcli-output-frame {
   margin: 0;
   padding: 2px;
   height: 21px;
   width: 21px;
   border-top: 1px solid #ccc;
   -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);
 }
 
 .chatbar-button > .toolbarbutton-text,
 .chatbar-button > .toolbarbutton-menu-dropmarker {
   display: none;
 }
 
 .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] {
   font-weight: bold;
 }
 
 .chatbar-innerbox {
   background: transparent;
-  margin: -285px -1px 0 -1px;
+  margin: -285px 0 0;
   overflow: hidden;
 }
 
 chatbar {
   -moz-margin-end: 20px;
 }
 
 chatbox {
   height: 285px;
   width: 260px;
   -moz-margin-start: 4px;
   background-color: white;
   border: 1px solid #ccc;
   border-bottom: none;
+  border-top-left-radius: @toolbarbuttonCornerRadius@;
+  border-top-right-radius: @toolbarbuttonCornerRadius@;
 }
 
 chatbox[minimized="true"] {
   width: 160px;
   height: 20px;
 }
 
 panel[type="arrow"][popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="top"],
--- a/browser/themes/winstripe/browser.css
+++ b/browser/themes/winstripe/browser.css
@@ -3433,16 +3433,17 @@ html|*#gcli-output-frame {
 .chat-title {
   font-weight: bold;
   color: -moz-dialogtext;
   cursor: inherit;
 }
 
 .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%;
   margin: 0;
   padding: 2px;
   -moz-padding-start: 6px;
   border: none;
   border-bottom: 1px solid #ccc;
@@ -3453,17 +3454,20 @@ html|*#gcli-output-frame {
   border-bottom: none;
 }
 
 .chat-titlebar[selected] {
   background-color: #dae3f0;
 }
 
 .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 {
   padding: 0;
   margin: 0;
   overflow: hidden;
 }
 
@@ -3482,53 +3486,62 @@ html|*#gcli-output-frame {
 }
 
 .chatbar-button > .button-box > .box-inherit > .button-icon {
   max-height: 16px;
   max-width: 16px;
   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);
 }
 
 .chatbar-button > .toolbarbutton-text,
 .chatbar-button > .toolbarbutton-menu-dropmarker {
   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] {
   font-weight: bold;
 }
 
 .chatbar-innerbox {
   background: transparent;
-  margin: -285px -1px 0 -1px;
+  margin: -285px 0 0;
   overflow: hidden;
 }
 
 chatbar {
   -moz-margin-end: 20px;
 }
 
 chatbox {
   height: 285px;
   width: 260px;
   -moz-margin-start: 4px;
   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"] {
   width: 160px;
   height: 20px;
 }
 
 .click-to-play-plugins-notification-content {