Bug 1475817 - Part 13: Convert simple <listbox> to <richlistbox>, chat. r=jorgk DONTBUILD

chat/content/imtooltip.xml

@@ -435,7 +435,7 @@
          if (localName == "imcontact")
            return updateTooltipFromBuddy(elt.contact.preferredBuddy.preferredAccountBuddy);
 
-         if (localName == "listitem") {
+         if (localName == "richlistitem") {
            let contactlistbox = document.getElementById("contactlistbox");
            let conv = contactlistbox.selectedItem.conv;
            return updateTooltipFromParticipant(elt.chatBuddy.name, conv,
@@ -457,7 +457,7 @@
          if (localName == "contact")
            return updateTooltipFromContact(elt.contact);
 
-         if (localName == "listitem") {
+         if (localName == "richlistitem") {
            let conv = document.getBindingParent(elt).conv;
            return updateTooltipFromParticipant(elt.chatBuddy.name, conv,
                                                elt.chatBuddy);

mail/components/im/content/chat-messenger.inc

@@ -169,14 +169,14 @@
                              value="&chat.participants;"/>
                       <textbox flex="1" readonly="true" class="plain" id="participantCount"/>
                     </hbox>
-                    <listbox id="nicklist" class="conv-nicklist"
-                             flex="1" seltype="multiple"
-                             tooltip="imTooltip"
-                             onclick="chatHandler.onNickClick(event);"
-                             onkeypress="chatHandler.onNicklistKeyPress(event);"/>
+                    <richlistbox id="nicklist" class="conv-nicklist theme-listbox"
+                                 flex="1" seltype="multiple"
+                                 tooltip="imTooltip"
+                                 onclick="chatHandler.onNickClick(event);"
+                                 onkeypress="chatHandler.onNicklistKeyPress(event);"/>
                   </vbox>
                   <splitter id="logsSplitter" class="conv-chat" collapse="after"/>
-                  <vbox flex="1" id="previousConversations">
+                  <vbox flex="1" id="previousConversations" style="min-height: 200px;">
                     <label class="conv-logs-header-label"
                            id="participantLabel"
                            value="&chat.previousConversations;"/>

mail/components/im/content/imconversation.xml

@@ -172,7 +172,7 @@
           aMsg.color = "color: hsl(" + color + ", 100%, 40%);";
         }
 
-        // Porting note: In TB, this.tab points at the imconv listitem element.
+        // Porting note: In TB, this.tab points at the imconv richlistitem element.
         let read = this._readCount > 0;
         let isUnreadMessage = !read && aMsg.incoming && !aMsg.system;
         let isTabFocused = this.tab && this.tab.selected && document.hasFocus();
@@ -1050,9 +1050,9 @@
              image = "founder";
          }
          if (image)
-           aItem.setAttribute("image", "chrome://messenger/skin/" + image + ".png");
+           aItem.firstChild.setAttribute("src", "chrome://messenger/skin/" + image + ".png");
          else
-           aItem.removeAttribute("image");
+           aItem.firstChild.removeAttribute("image");
        ]]>
        </body>
      </method>
@@ -1109,10 +1109,14 @@
 
          this.trackNick(name);
 
-         var item = document.createElement("listitem");
+         let image = document.createElement("image");
+         let label = document.createElement("label");
+         label.setAttribute("value", name);
+
+         var item = document.createElement("richlistitem");
          item.chatBuddy = aBuddy;
-         item.setAttribute("class", "listitem-iconic");
-         item.setAttribute("label", name);
+         item.appendChild(image);
+         item.appendChild(label);
          this.setBuddyAttributes(item);
 
          var color = this._computeColor(name);

mail/components/im/themes/chat.css

@@ -527,7 +527,8 @@ imcontact[aliasing] .contactDisplayName {
   margin: 0 0;
 }
 
-.conv-nicklist > .listitem-iconic .listcell-label {
+.conv-nicklist > richlistitem > label {
+  pointer-events: none;
   font-weight: bold;
   padding-inline-start: 1px;
 %ifdef XP_MACOSX
@@ -535,7 +536,8 @@ imcontact[aliasing] .contactDisplayName {
 %endif
 }
 
-.conv-nicklist > .listitem-iconic .listcell-icon {
+.conv-nicklist > richlistitem > image {
+  pointer-events: none;
   min-width: 16px;
   margin: 0 2px;
 }
@@ -578,20 +580,20 @@ imcontact[aliasing] .contactDisplayName {
 }
 %endif
 
-.listitem-iconic[inactive] .listcell-icon {
+richlistitem[inactive] > image {
   opacity: 0.45;
 }
 
-.listitem-iconic[inactive][selected] .listcell-icon {
+richlistitem[inactive][selected] > image {
   opacity: 0.7;
 }
 
-.listitem-iconic[inactive] .listcell-label {
+richlistitem[inactive] > label {
   color: GrayText !important;
   font-weight: normal;
 }
 
-.listitem-iconic[inactive][selected] .listcell-label {
+richlistitem[inactive][selected] > label {
 %ifdef MACOSX
   color: -moz-DialogText !important;
 %else
@@ -599,7 +601,7 @@ imcontact[aliasing] .contactDisplayName {
 %endif
 }
 
-.conv-nicklist:focus > .listitem-iconic[inactive][selected] .listcell-label {
+.conv-nicklist:focus > richlistitem[inactive][selected] > label {
   color: HighlightText !important;
 }
 

mail/themes/windows/mail/chat.css

@@ -177,15 +177,10 @@
     border-bottom: 1px solid #a9b7c9;
   }
 
-  .listitem-iconic[selected] .listcell-label,
-  #nicklist:focus > .listitem-iconic[inactive][selected] .listcell-label {
+  richlistitem[selected] > label,
+  #nicklist:focus > richlistitem[inactive][selected] > label {
     color: -moz-dialogtext !important;
   }
-
-  #nicklist > listitem {
-    border-width: 1px !important;
-    outline: none !important;
-  }
 }
 
 #statusTypeIcon[status="available"],