Bug 735658 - The status selector of the chat toolbar needs to be polished. r=mconley, a=bwinton.
authorRichard Marti <richard.marti@gmail.com>
Fri, 20 Jul 2012 22:24:32 +0200
changeset 12508 684391101117806c587ee64dddbd1a95b2efab9a
parent 12507 9414c17b9b7dd73055e4f2ef396c42284039adfb
child 12509 20b6906240f4cb3b44cf43a0379d589591f41a26
push id623
push usermconley@mozilla.com
push dateFri, 27 Jul 2012 20:42:26 +0000
treeherdercomm-beta@e3a652e552f2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmconley, bwinton
bugs735658
Bug 735658 - The status selector of the chat toolbar needs to be polished. r=mconley, a=bwinton.
mail/components/im/content/chat-messenger-overlay.xul
mail/components/im/themes/chat.css
mail/themes/pinstripe/mail/chat.css
mail/themes/qute/mail/chat-aero.css
--- a/mail/components/im/content/chat-messenger-overlay.xul
+++ b/mail/components/im/content/chat-messenger-overlay.xul
@@ -114,31 +114,34 @@
                          label="&addBuddyButton.label;"
                          oncommand="chatHandler.addBuddy()"/>
           <toolbarbutton id="button-join-chat"
                          class="toolbarbutton-1"
                          label="&joinChatButton.label;"
                          oncommand="chatHandler.joinChat()"/>
           <toolbaritem id="chat-status-selector"
                        orient="horizontal"
-                       class="toolbarbutton-1"
                        align="center" flex="1">
-            <button type="menu" id="statusTypeIcon" status="available">
+            <toolbarbutton type="menu"
+                           id="statusTypeIcon"
+                           class="toolbarbutton-1"
+                           status="available">
               <menupopup id="setStatusTypeMenupopup"
                          oncommand="statusSelector.editStatus(event);">
                 <menuitem id="statusTypeAvailable" label="&status.available;"
                           status="available" class="menuitem-iconic"/>
                 <menuitem id="statusTypeUnavailable" label="&status.unavailable;"
                           status="unavailable" class="menuitem-iconic"/>
                 <menuseparator id="statusTypeOfflineSeparator"/>
                 <menuitem id="statusTypeOffline" label="&status.offline;"
                           status="offline" class="menuitem-iconic"/>
               </menupopup>
-            </button>
+            </toolbarbutton>
             <label id="statusMessage" crop="end" flex="1" value=""
+                   class="statusMessageToolbarItem"
                    onclick="statusSelector.statusMessageClick();"/>
           </toolbaritem>
           <toolbarbutton id="button-chat-accounts"
                          class="toolbarbutton-1"
                          label="&chatAccountsButton.label;"
                          oncommand="openIMAccountMgr()"/>
 
           <toolbaritem id="gloda-im-search" insertafter="button-stop"
--- a/mail/components/im/themes/chat.css
+++ b/mail/components/im/themes/chat.css
@@ -492,35 +492,35 @@ imgroup[closed] .twisty {
 #imStatusUnavailable {
   list-style-image: url('chrome://chat/skin/away-16.png');
 }
 
 #imStatusOffline {
   list-style-image: url('chrome://chat/skin/offline-16.png');
 }
 
+#statusTypeIcon {
+  min-width: 40px;
+}
 
-#statusTypeIcon {
-  margin: 0 0;
-  width: 16px;
-  height: 16px;
-  min-height: 16px;
-  min-width: 16px;
-  -moz-appearance: none;
-  background: transparent;
-  box-shadow: none;
-  border: none;
+/* show the status icon also in text mode */
+toolbar[mode="text"] #statusTypeIcon > .toolbarbutton-icon {
+  display: -moz-box;
 }
 
-#statusTypeIcon dropmarker {
-  display: none;
+.statusMessageToolbarItem {
+  margin: 2px 4px;
+  -moz-margin-start: -1px;
+  padding: 3px 5px 4px;
+  border: 1px solid transparent;
 }
 
-%ifdef XP_WIN
-#statusTypeIcon .button-box {
-  padding: 0 0;
-  border: none;
+#chat-status-selector:hover > .statusMessageToolbarItem {
+  border-color: ThreeDShadow;
 }
-%endif
 
-#statusMessage {
-  margin: 0 8px;
+#chat-status-selector > .statusMessageToolbarItem[editing] {
+  -moz-appearance: none;
+  -moz-padding-start: 4px;
+  -moz-padding-end: 4px;
+  border-color: ThreeDShadow;
+  background-color: -moz-field;
 }
--- a/mail/themes/pinstripe/mail/chat.css
+++ b/mail/themes/pinstripe/mail/chat.css
@@ -1,14 +1,30 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 %include ../../../components/im/themes/chat.css
 
+#statusTypeIcon > .toolbarbutton-text {
+  display: none;
+}
+
+.statusMessageToolbarItem {
+  -moz-margin-start: -6px;
+}
+
+#chat-status-selector:hover > .statusMessageToolbarItem {
+  border-color: #AAAAAA;
+}
+
+#chat-status-selector > .statusMessageToolbarItem[editing] {
+  border-color: #888888;
+}
+
 /* Adaptation of #folderpane_splitter */
 #listSplitter {
   background-image: none;
   width: 3px;
   min-width: 3px;
 }
 
 #contextSplitter {
--- a/mail/themes/qute/mail/chat-aero.css
+++ b/mail/themes/qute/mail/chat-aero.css
@@ -1,14 +1,21 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 %include chat.css
 
+.statusMessageToolbarItem {
+  margin: 0 1px;
+  -moz-margin-start: -2px;
+  padding: 3px 3px 4px;
+  border-radius: 2px;
+}
+
 #chat-toobar {
   padding: 1px 0;
 }
 
 .prplBuddyIcon {
   margin-top: 0;
   margin-bottom: 0;
 }
@@ -58,16 +65,35 @@
 
 .conv-top,
 .conv-bottom,
 #logDisplay {
   border: none;
 }
 
 @media (-moz-windows-default-theme) {
+  #statusTypeIcon .toolbarbutton-menu-dropmarker {
+    padding: 1px 3px;
+    list-style-image: url("chrome://messenger/skin/icons/toolbarbutton-arrow.png");
+  }
+
+  #chat-status-selector:hover > .statusMessageToolbarItem {
+    border-color: hsla(210, 54%, 20%, .25) hsla(210, 54%, 20%, .27)
+                  hsla(210, 54%, 20%, .3);
+  }
+
+  #chat-status-selector > .statusMessageToolbarItem[editing] {
+    -moz-appearance: none;
+    -moz-padding-start: 2px;
+    -moz-padding-end: 2px;
+    border-color: hsla(206, 100%, 60%, .65) hsla(206, 100%, 55%, .65)
+                  hsla(206, 100%, 50%, .65);
+    background-color: -moz-field;
+  }
+
   #listPaneBox {
     background-color: rgb(238,243,250);
   }
 
   .convBox {
     background-color: rgb(233,239,245);
   }