Bug 954368 - Contact list entries should adapt their height to the actual font size. r=florian
☠☠ backed out by 135fa160a32a ☠ ☠
authoraleth <aleth@instantbird.org>
Tue, 29 Mar 2016 22:26:38 +0200
changeset 24766 6486df8056f66ec2a59a8141eacba596e4389e3a
parent 24765 23a2d877bca7d8cef8ef9e22d20a56c4c2833376
child 24767 7a7fbdcc6e7a9d8684ae56faf4386d6ee4252f54
push id1657
push userclokep@gmail.com
push dateMon, 06 Jun 2016 19:50:21 +0000
treeherdercomm-beta@9fac989284b5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersflorian
bugs954368
Bug 954368 - Contact list entries should adapt their height to the actual font size. r=florian
chat/themes/imtooltip.css
im/content/blist.css
im/content/blist.js
im/content/blist.xul
im/content/contact.xml
im/content/conv.xml
im/locales/en-US/chrome/instantbird/instantbird.dtd
im/themes/blist.css
--- a/chat/themes/imtooltip.css
+++ b/chat/themes/imtooltip.css
@@ -26,16 +26,17 @@
 }
 
 .userIconHolder[userIcon] + .statusTypeIcon {
   margin-left: 32px;
 }
 
 .tooltipBuddies {
   margin-left: -3px;
+  --blist-item-height: 20px; /* 16px icon plus padding */
 }
 
 .tooltipDisplayName {
   border-bottom: 1px solid rgba(0, 0, 0, 0.25);
   font-size: 16px;
   margin: 4px 4px 4px 0 !important;
   padding-right: 20px;
 }
--- a/im/content/blist.css
+++ b/im/content/blist.css
@@ -25,64 +25,82 @@ buddy[dummy] {
   -moz-binding: url("chrome://instantbird/content/buddy.xml#buddy-dummy");
 }
 
 group {
   -moz-binding: url("chrome://instantbird/content/group.xml#group");
   -moz-box-align: center;
 }
 
-/* The height is required for the animation to work. The skin can
- * specify an additionnal min-height value if there are things of
- * constant size (icons + padding) */
-contact,
-buddy,
+/* The height is required for the animation to work. */
 group {
   height: 1em;
 }
 
+conv,
+contact,
+buddy {
+  /* Variable set from blist.js. This is necessary as CSS transitions don't
+     work with height: auto.
+     Usually 16+2+2px for the protocol icon, padding top and bottom. */
+  height: var(--blist-item-height);
+}
+
+contact[open],
+contact[aliasing],
+#buddylistbox:focus > contact[selected] {
+  /* This is fine because height transitions in this state are on the
+     buddies, and there is no transition on selection (it's instant). */
+  height: auto;
+}
+
 /* Possible values of the |state| attribute:
  - not set: the binding is not initialized yet,
  - showing: during the expand animation,
  - visible: the buddy is visible to the user,
  - fading: the buddy has signed-off, during the fade out animation,
  - collapsing: collapse animation (before the node is removed from the DOM),
  - collapsed: the buddy is inside a closed group.
  */
 contact:not([state]),
 buddy:not([state]) {
   height: 0;
 }
+
 contact[state="showing"],
 buddy[state="showing"] {
   /* Should match the transition effect for contact/buddy collapsing so
      that reordering doesn't make the whole list jump. */
-  -moz-transition: height .2s ease-in;
+  transition: height .2s ease-in;
 }
 
 contact[state="fading"] {
   opacity: 0;
-  -moz-transition: opacity .4s ease-in 1s;
+  transition: opacity .4s ease-in 1s;
 }
 
 contact[state="collapsing"],
 buddy[state="collapsing"],
 group[collapsing="true"] {
   height: 0;
-  -moz-transition: height .2s ease-in;
+  transition: height .2s ease-in;
 }
 
 contact[state="collapsing"] *,
 contact[state="showing"] *,
 buddy[state="collapsing"] *,
 buddy[state="showing"] *,
 group[collapsing="true"] * {
   display: none;
 }
 
+#dummylistbox {
+  visibility: hidden;
+}
+
 tooltip[type="im"] {
   -moz-binding: url("chrome://chat/content/imtooltip.xml#tooltip");
 }
 
 #userIcon {
   -moz-user-focus: normal;
 }
 
@@ -127,17 +145,16 @@ tooltip[type="im"] {
 group:not([id="group-1"]):hover .hideGroupButton,
 contact[cansend]:hover .startChatBubble,
 #buddylistbox:focus > contact[cansend][selected] .startChatBubble {
   display: -moz-box;
 }
 
 conv {
   -moz-binding: url("chrome://instantbird/content/conv.xml#conv");
-  -moz-box-align: center;
 }
 
 .convUnreadCount[value="0"],
 .convUnreadTargetedCount[value="0"] {
   display: none;
 }
 
 #buddyListMsg[listedConvCount="0"] > .listboxHeader {
--- a/im/content/blist.js
+++ b/im/content/blist.js
@@ -815,16 +815,25 @@ var buddyList = {
 
     let prefBranch = Services.prefs;
     buddyList._showOffline = prefBranch.getBoolPref(showOfflineBuddiesPref);
     if (buddyList._showOffline) {
       document.getElementById("context-show-offline-buddies")
               .setAttribute("checked", "true");
     }
 
+    // Find the correct height of a contact list item. This can vary depending
+    // on the platform font and font size.
+    let dummyContact = document.getElementById("dummyContact");
+    // Force height value calculation.
+    dummyContact.style.height = "auto";
+    let contactHeight = dummyContact.getBoundingClientRect().height;
+    document.getElementById("buddyListMsg")
+            .style.setProperty("--blist-item-height", contactHeight + "px");
+
     let blistBox = document.getElementById("buddylistbox");
     blistBox.removeGroup = function(aGroupElt) {
       let index = buddyList._displayedGroups.indexOf(aGroupElt);
       if (index != -1)
         buddyList._displayedGroups.splice(index, 1);
       aGroupElt.remove();
     };
     let showOtherContacts = false;
--- a/im/content/blist.xul
+++ b/im/content/blist.xul
@@ -220,12 +220,16 @@
     <label id="contactsHeader" value="&contactsHeader.label;"
            control="buddylistbox"
            crop="end" class="listboxHeader"/>
     <richlistbox id="buddylistbox"
                  onkeypress="buddyList.keyPress(event);"
                  onfocus="buddyList.buddylistboxFocus();"
                  onselect="buddyList.listboxSelect(event);"
                  tooltip="imTooltip"/>
+    <richlistbox id="dummylistbox">
+      <contact id="dummyContact" displayname="&dummyContact.label;"
+               state="visible" status="unknown"/>
+    </richlistbox>
     <spacer id="listSpacer" flex="1"
             onclick='document.getElementById("buddylistbox").focus();'/>
   </notificationbox>
 </window>
--- a/im/content/contact.xml
+++ b/im/content/contact.xml
@@ -11,21 +11,24 @@
 <bindings id="contactBindings"
           xmlns="http://www.mozilla.org/xbl"
           xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
           xmlns:xbl="http://www.mozilla.org/xbl"
           xmlns:html="http://www.w3.org/1999/xhtml">
 
   <binding id="contact" extends="chrome://global/content/bindings/richlistbox.xml#richlistitem">
     <content>
-      <xul:stack class="prplBuddyIcon" mousethrough="always">
-        <xul:image class="protoIcon" xbl:inherits="src=iconPrpl,status"/>
-        <xul:image class="statusIcon" xbl:inherits="status"/>
-      </xul:stack>
-      <xul:hbox flex="1" class="contact-hbox" mousethrough="always">
+      <xul:vbox mousethrough="always">
+        <xul:stack class="prplBuddyIcon" mousethrough="always">
+          <xul:image class="protoIcon" xbl:inherits="src=iconPrpl,status"/>
+          <xul:image class="statusIcon" xbl:inherits="status"/>
+        </xul:stack>
+      </xul:vbox>
+      <xul:hbox flex="1" class="contact-hbox" mousethrough="always"
+                align="center">
         <xul:label crop="end" flex="1" mousethrough="always"
                    anonid="displayname" class="contactDisplayName blistDisplayName"
                    xbl:inherits="value=displayname,status"/>
         <xul:label crop="end" flex="100000" mousethrough="always"
                    anonid="statusText" class="contactStatusText"
                    xbl:inherits="value=statusTextWithDash"/>
         <xul:button anonid="startChatBubble" class="startChatBubble"
                     tooltiptext="&openConversationCmd.label;"/>
@@ -524,40 +527,50 @@
          this._DragLeave();
        ]]>
      </handler>
     </handlers>
   </binding>
 
   <binding id="contact-big" extends="chrome://instantbird/content/contact.xml#contact">
     <content>
-      <xul:hbox flex="1" mousethrough="always">
-        <xul:stack class="prplBuddyIcon" mousethrough="always">
-          <xul:image class="protoIcon" xbl:inherits="src=iconPrpl,status"/>
-          <xul:image class="statusIcon" xbl:inherits="status"/>
-        </xul:stack>
         <xul:vbox flex="1" class="contact-vbox" mousethrough="always">
-          <xul:hbox class="contact-hbox" mousethrough="always">
-            <xul:label crop="end" flex="1" mousethrough="always"
-                       anonid="displayname" class="contactDisplayName blistDisplayName"
-                       xbl:inherits="value=displayname,status"/>
-            <xul:button anonid="startChatBubble" class="startChatBubble"
-                        tooltiptext="&openConversationCmd.label;"/>
+          <xul:hbox align="center" mousethrough="always">
+            <xul:vbox mousethrough="always">
+              <xul:stack class="prplBuddyIcon" mousethrough="always">
+                <xul:image class="protoIcon" xbl:inherits="src=iconPrpl,status"/>
+                <xul:image class="statusIcon" xbl:inherits="status"/>
+              </xul:stack>
+            </xul:vbox>
+            <xul:hbox flex="1" class="contact-hbox" mousethrough="always"
+                      align="center">
+              <xul:label crop="end" flex="1" mousethrough="always"
+                         anonid="displayname" class="contactDisplayName blistDisplayName"
+                         xbl:inherits="value=displayname,status"/>
+              <xul:button anonid="startChatBubble" class="startChatBubble"
+                          tooltiptext="&openConversationCmd.label;"/>
+            </xul:hbox>
           </xul:hbox>
-          <xul:hbox class="contact-hbox" mousethrough="always">
-            <xul:label crop="end" flex="1" mousethrough="always"
-                       anonid="statusText" class="contactStatusText"
-                       xbl:inherits="value=statusText"/>
-            <xul:button anonid="expander" class="expander-down"
-                        tooltiptextexpand="&expandContactTooltip;"
-                        tooltiptextcollapse="&collapseContactTooltip;"
-                        tooltiptext="&expandContactTooltip;"/>
+
+          <xul:hbox mousethrough="always">
+            <xul:vbox>
+              <xul:image class="prplBuddyIcon"/>
+            </xul:vbox>
+            <xul:hbox flex="1" class="contact-hbox" mousethrough="always"
+                      align="center">
+              <xul:label crop="end" flex="1" mousethrough="always"
+                         anonid="statusText" class="contactStatusText"
+                         xbl:inherits="value=statusText"/>
+              <xul:button anonid="expander" class="expander-down"
+                          tooltiptextexpand="&expandContactTooltip;"
+                          tooltiptextcollapse="&collapseContactTooltip;"
+                          tooltiptext="&expandContactTooltip;"/>
+            </xul:hbox>
           </xul:hbox>
         </xul:vbox>
-      </xul:hbox>
       <xul:vbox anonid="contactBuddies" class="contactBuddies">
         <children/>
       </xul:vbox>
     </content>
     <implementation>
      <!-- Textual representation of the contact and its status (and grouped
           buddies if applicable) for accessibility tools -->
      <property name="label" readonly="true">
--- a/im/content/conv.xml
+++ b/im/content/conv.xml
@@ -10,22 +10,24 @@
 
 <bindings id="convBindings"
           xmlns="http://www.mozilla.org/xbl"
           xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
           xmlns:xbl="http://www.mozilla.org/xbl"
           xmlns:html="http://www.w3.org/1999/xhtml">
 
   <binding id="conv" extends="chrome://global/content/bindings/richlistbox.xml#richlistitem">
-    <content>
-      <xul:stack class="prplBuddyIcon" mousethrough="always">
-        <xul:image class="protoIcon" xbl:inherits="src=iconPrpl,status"/>
-        <xul:image class="statusIcon" xbl:inherits="status"/>
-      </xul:stack>
-      <xul:hbox flex="1" class="conv-hbox" mousethrough="always">
+    <content align="center">
+      <xul:vbox mousethrough="always">
+        <xul:stack class="prplBuddyIcon" mousethrough="always">
+          <xul:image class="protoIcon" xbl:inherits="src=iconPrpl,status"/>
+          <xul:image class="statusIcon" xbl:inherits="status"/>
+        </xul:stack>
+      </xul:vbox>
+      <xul:hbox flex="1" class="conv-hbox" mousethrough="always" align="center">
         <xul:label crop="end" flex="1" mousethrough="always"
                    anonid="displayname" class="convDisplayName blistDisplayName"
                    xbl:inherits="value=displayname,status"/>
         <xul:label crop="end" flex="1000000" mousethrough="always"
                    anonid="statusText" class="convStatusText"
                    xbl:inherits="value=statusTextWithDash"/>
         <xul:label anonid="unreadTargetedCount" class="convUnreadTargetedCount"
                    crop="end" mousethrough="never"
--- a/im/locales/en-US/chrome/instantbird/instantbird.dtd
+++ b/im/locales/en-US/chrome/instantbird/instantbird.dtd
@@ -90,16 +90,22 @@
 <!ENTITY copyLinkCmd.accesskey        "a">
 <!ENTITY copyEmailCmd.label           "Copy Email Address">
 <!ENTITY copyEmailCmd.accesskey       "E">
 <!ENTITY engineManagerCmd.label       "Manage Search Engines…">
 
 <!ENTITY userIcon.label                "Change your icon">
 <!ENTITY contactsHeader.label          "Contacts">
 <!ENTITY convsHeader.label             "Conversations on hold">
+<!-- LOCALIZATION NOTE (dummyContact.label):
+     This string is not displayed anywhere, but it is used to calculate
+     the height of an item in the contact list. Therefore you should
+     set it to a string which contains characters that cover all
+     vertical sizes that occur in your language. -->
+<!ENTITY dummyContact.label            "SgFyWp">
 
 <!ENTITY openConversationCmd.label     "Start a conversation">
 <!ENTITY openConversationCmd.accesskey "c">
 <!ENTITY showConversationCmd.label     "Show conversation">
 <!ENTITY showConversationCmd.accesskey "S">
 <!ENTITY closeConversationCmd.label    "Close conversation">
 <!ENTITY closeConversationCmd.accesskey "C">
 <!ENTITY aliasCmd.label                "Rename">
--- a/im/themes/blist.css
+++ b/im/themes/blist.css
@@ -111,22 +111,16 @@ richlistbox {
 }
 
 conv,
 contact,
 group {
   padding: 0 2px;
 }
 
-conv,
-contact,
-buddy {
-  height: 20px; /* 16+2+2px for the protocol icon, padding top and bottom */
-}
-
 /* The vertical padding directly on the binding would not be animated. */
 .prplBuddyIcon,
 group>* {
   padding-top: 2px;
   padding-bottom: 2px;
 }
 
 contact[open] {
@@ -178,17 +172,17 @@ contact[droptarget] > buddy[dummy] {
   margin: 2px 0;
   -moz-margin-start: 2px;
   min-height: 16px;
   overflow-x: hidden;
 }
 
 /* Avoid a strange jumping bug when hovering and the startChatBubble appears */
 .contact-vbox {
-  min-height: 40px;
+  min-height: calc(var(--blist-item-height) * 2);
 }
 
 .hideGroupButton,
 .startChatBubble,
 .expander-up,
 .expander-down {
   margin: 0 3px;
   padding: 0;
@@ -251,18 +245,18 @@ contact[droptarget] > buddy[dummy] {
 
 .protoIcon,
 .statusIcon,
 .dummyBuddyIcon,
 .hideGroupButton,
 .startChatBubble,
 .expander-up,
 .expander-down {
-  width: 16px;
-  height: 16px;
+  max-width: 16px;
+  max-height: 16px;
   min-height: 16px;
   min-width: 16px;
 }
 
 group label {
   margin: 0 2px;
   -moz-margin-end: 0;
 }