Bug 954653 - Redesign buddy tooltips, r=florian.

2013-11-10 03:58:02 +01:00 · 2013-11-10 03:58:02 +01:00 · 51473b61c0
--- a/im/content/buddytooltip.css
+++ b/im/content/buddytooltip.css
@ -0,0 +1,8 @@
+/* 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/. */
+
+.userIcon:not([src]),
+.statusTypeIcon:not([status]) {
+  display: none;
+}
--- a/im/content/buddytooltip.xml
+++ b/im/content/buddytooltip.xml
@ -13,32 +13,42 @@

  <binding id="tooltip" extends="chrome://global/content/bindings/popup.xml#tooltip">
    <resources>
+      <stylesheet src="chrome://instantbird/content/buddytooltip.css"/>
      <stylesheet src="chrome://instantbird/skin/buddytooltip.css"/>
    </resources>
-    <content noautohide="true" orient="horizontal">
-      <xul:vbox flex="1">
-        <xul:hbox crop="end" align="center" flex="1">
-          <xul:stack class="prplTooltipBuddyIcon">
-            <xul:image class="protoIcon" xbl:inherits="src=iconPrpl,status"/>
-            <xul:image class="statusIcon" xbl:inherits="status"/>
+    <content noautohide="true" orient="vertical">
+      <xul:hbox align="start" crop="end" flex="1">
+        <xul:vbox flex="1">
+          <xul:stack>
+            <xul:image class="userIcon" anonid="userIcon"/>
+            <xul:image class="statusTypeIcon" xbl:inherits="status,left"/>
          </xul:stack>
-          <xul:description xbl:inherits="value=displayname" class="tooltip-header"/>
-        </xul:hbox>
+          <xul:spacer flex="1"/>
+        </xul:vbox>
+        <xul:stack class="displayNameMessageBox" flex="1">
+          <xul:vbox flex="1">
+            <xul:hbox align="start" flex="1">
+              <xul:description class="tooltipDisplayName" flex="1" crop="end"
+                               xbl:inherits="value=displayname"/>
+              <xul:image class="tooltipProtoIcon"
+                         xbl:inherits="src=iconPrpl,status"/>
+            </xul:hbox>
+            <xul:spacer flex="1"/>
+          </xul:vbox>
+          <xul:description class="tooltipMessage" anonid="tooltipMessage"
+                           xbl:inherits="noTopic"/>
+        </xul:stack>
+      </xul:hbox>

-        <xul:grid>
-          <xul:columns>
-            <xul:column/>
-            <xul:column flex="1"/>
-          </xul:columns>
-          <xul:rows anonid="tooltiprows"/>
-        </xul:grid>
+      <xul:grid>
+        <xul:columns>
+          <xul:column/>
+          <xul:column flex="1"/>
+        </xul:columns>
+        <xul:rows class="tooltipRows" anonid="tooltiprows"/>
+      </xul:grid>

-        <xul:vbox anonid="buddies"/>
-      </xul:vbox>
-
-      <xul:vbox align="end" pack="start" flex="1" style="margin: 0 0; display:block;">
-        <html:img anonid="userIcon"/>
-      </xul:vbox>
+      <xul:vbox class="tooltipBuddies" anonid="buddies"/>
    </content>
    <implementation implements="nsIObserver, nsIDOMEventListener">
     <property name="bundle">
@ -108,22 +118,22 @@
       <![CDATA[
         var img = document.getAnonymousElementByAttribute(this, "anonid",
                                                           "userIcon");
-         if (aSrc) {
-           const maxSize = 48;
+         if (aSrc)
           img.src = aSrc;
-           var height = img.naturalHeight || maxSize;
-           var width = img.naturalWidth || maxSize;
-           if (height > maxSize || width > maxSize) {
-             var ratio = Math.max(height, width);
-             height = height / ratio * maxSize;
-             width  = width  / ratio * maxSize;
-           }
-           img.parentNode.width = width; //XXXFLo hack to workaround a bug
-           img.height = height;
-           img.parentNode.collapsed = false;
-         }
         else
-           img.parentNode.collapsed = true;
+           img.removeAttribute("src");
+       ]]>
+       </body>
+     </method>
+
+     <method name="setMessage">
+       <parameter name="aMessage"/>
+       <body>
+       <![CDATA[
+         // Setting the textContent directly allows text wrapping.
+         var msg = document.getAnonymousElementByAttribute(this, "anonid",
+                                                           "tooltipMessage");
+         msg.textContent = aMessage;
       ]]>
       </body>
     </method>
@ -201,10 +211,15 @@
         this.setAttribute("displayname", displayName);
         let account = aBuddy.account;
         this.setAttribute("iconPrpl", account.protocol.iconBaseURI + "icon.png");
-         if (aElt.hasAttribute("status"))
-           this.setAttribute("status", aElt.getAttribute("status"));
-         else
-           this.removeAttribute("status");
+         let status = aElt.getAttribute("status");
+         if (status) {
+           this.setAttribute("status", status);
+           this.setMessage(Status.toLabel(status));
+         }
+         else {
+           this.setAttribute("status", "unknown");
+           this.setMessage(Status.toLabel("unknown"));
+         }
         this.setBuddyIcon(aBuddy.buddyIconFilename);

         if (displayName != name)
@ -272,7 +287,7 @@
         let buddiesElt = document.getAnonymousElementByAttribute(this, "anonid",
                                                                  "buddies");
         let sep = document.createElement("separator");
-         sep.setAttribute("class", "groove");
+         sep.setAttribute("class", "groove tooltipSeparator");
         buddiesElt.appendChild(sep);

         for each (let buddy in buddies) {
@ -299,11 +314,25 @@
         this.setAttribute("displayname", aConv.name);
         let account = aConv.account;
         this.setAttribute("iconPrpl", account.protocol.iconBaseURI + "icon.png");
-         this.removeAttribute("status");
         this.setBuddyIcon(null);
+         if (aConv.isChat) {
+           this.setAttribute("status", "chat");
+           if (!aConv.account.connected || aConv.left)
+             this.setAttribute("left", true);
+           let topic = aConv.topic;
+           if (!topic) {
+             this.setAttribute("noTopic", true);
+             const kBundleName = "chrome://instantbird/locale/instantbird.properties";
+             topic = Services.strings.createBundle(kBundleName)
+                             .GetStringFromName("noTopic");
+           }
+           this.setMessage(topic);
+         }
+         else {
+           this.setAttribute("status", "unknown");
+           this.setMessage(Status.toLabel("unknown"));
+         }
         this.addRow(this.bundle.GetStringFromName("buddy.account"), account.name);
-         if (aConv.topic)
-           this.addRow(this.bundle.GetStringFromName("conversation.topic"), aConv.topic);
         return true;
       ]]>
       </body>
@ -320,7 +349,8 @@
         let account = aConv.account;
         this.setAttribute("iconPrpl",
                           account.protocol.iconBaseURI + "icon.png");
-         this.removeAttribute("status");
+         this.setAttribute("status", "unknown");
+         this.setMessage(Status.toLabel("unknown"));
         this.setBuddyIcon(null);
         this.addRow(this.bundle.GetStringFromName("buddy.account"),
                     account.name);
@ -400,6 +430,8 @@
       this.buddy = null;
       this.contact = null;
       this.elt = null;
+       this.removeAttribute("noTopic");
+       this.removeAttribute("left");
       if ("observedUserInfo" in this && this.observedUserInfo) {
         Services.obs.removeObserver(this, "user-info-received");
         delete this.observedUserInfo;
--- a/im/content/jar.mn
+++ b/im/content/jar.mn
@ -28,6 +28,7 @@ instantbird.jar:
 	content/instantbird/blist.js
 *	content/instantbird/blist.xul
 	content/instantbird/buddy.xml
+	content/instantbird/buddytooltip.css
 *	content/instantbird/buddytooltip.xml
 	content/instantbird/contact.xml
 	content/instantbird/conversation.xml
--- a/im/locales/en-US/chrome/instantbird/buddytooltip.properties
+++ b/im/locales/en-US/chrome/instantbird/buddytooltip.properties
@ -6,4 +6,3 @@ buddy.username=Username
 buddy.loggedIn=Logged In
 buddy.account=Account
 contact.tags=Tags
-conversation.topic=Topic
--- a/im/themes/buddytooltip.css
+++ b/im/themes/buddytooltip.css
@ -4,17 +4,79 @@

@import url("chrome://instantbird/skin/status.css");

-.protoIcon[status="unknown"] {
+.displayNameMessageBox {
+  margin-top: 2px;
+}
+
+.statusTypeIcon {
+  margin: 32px 4px 0 0;
+  max-width: 16px;
+  max-height: 16px;
+  min-width: 16px;
+  min-height: 16px;
+  width: 16px;
+  height: 16px;
+  -moz-appearance: none;
+  background-color: transparent;
+  border: none;
+}
+
+.statusTypeIcon[left][status="chat"] {
+  list-style-image: url('chrome://chat/skin/chat-left-16.png') !important;
+}
+
+.userIcon[src] + .statusTypeIcon {
+  margin-left: 32px;
+}
+
+.tooltipBuddies {
+  margin-left: -3px;
+}
+
+.tooltipDisplayName {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+  font-size: large;
+  margin: 2px 4px 4px 0 !important;
+  padding-right: 20px;
+}
+
+.tooltipMessage {
+  margin: 30px 5px 4px 0 !important;
+}
+
+.tooltipMessage[noTopic] {
+  font-style: italic;
+}
+
+.tooltipProtoIcon {
+  margin: 4px 0 0 -20px;
+  max-width: 16px;
+  max-height: 16px;
+  width: 16px;
+  height: 16px;
+}
+
+.tooltipProtoIcon[status="unknown"] {
  opacity: 0.7;
 }

-.tooltip-header {
-  font-weight: bold;
-  font-size: 14pt;
-  -moz-margin-end: 3px;
-  margin-bottom: 0 !important;
+.tooltipRows label {
+  margin-left: 0 !important;
 }

-.prplTooltipBuddyIcon {
-  margin: 0 6px;
+.tooltipSeparator {
+  margin-left: 3px;
+}
+
+.userIcon {
+  border: 2px solid rgba(0, 0, 0, 0.15);
+  border-radius: 5px;
+  overflow: hidden;
+  margin-right: 4px;
+  max-width: 48px;
+  max-height: 48px;
+  min-width: 48px;
+  min-height: 48px;
+  width: 48px;
+  height: 48px;
 }