Bug 1475817 - Part 13: Convert simple <listbox> to <richlistbox>, chat. r=jorgk DONTBUILD
authorRichard Marti <richard.marti@gmail.com>
Thu, 19 Jul 2018 12:44:41 +0200
changeset 24304 02051239a1bd883510f6ac9b248334384f633f2b
parent 24303 5dbe1e828a0357807e0f0f75f72e598df934efe5
child 24305 aa5d645f1d7218064e2c0a98ffb415903ef6ca0e
push id14639
push usermozilla@jorgk.com
push dateThu, 19 Jul 2018 19:21:46 +0000
treeherdercomm-central@02051239a1bd [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjorgk
bugs1475817
Bug 1475817 - Part 13: Convert simple <listbox> to <richlistbox>, chat. r=jorgk DONTBUILD
chat/content/imtooltip.xml
mail/components/im/content/chat-messenger.inc
mail/components/im/content/imconversation.xml
mail/components/im/themes/chat.css
mail/themes/windows/mail/chat.css
--- a/chat/content/imtooltip.xml
+++ b/chat/content/imtooltip.xml
@@ -430,17 +430,17 @@
 
 #ifdef MOZ_THUNDERBIRD
          if (localName == "imconv" && elt.conv)
            return updateTooltipFromConversation(elt.conv);
 
          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,
                                                elt.chatBuddy);
          }
 #else
          if (localName == "tab") {
            if (!elt.linkedConversation || !elt.linkedConversation.conv)
@@ -452,17 +452,17 @@
            return updateTooltipFromConversation(elt.conv);
 
          if (localName == "buddy")
            return updateTooltipFromBuddy(elt.buddy.preferredAccountBuddy);
 
          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);
          }
 #endif
 
          let classList = elt.classList;
          if (classList.contains("ib-nick") ||
--- a/mail/components/im/content/chat-messenger.inc
+++ b/mail/components/im/content/chat-messenger.inc
@@ -164,24 +164,24 @@
                 <vbox id="contextPaneFlexibleBox" flex="1">
                   <vbox flex="1" class="conv-chat" width="150">
                     <hbox align="baseline" class="conv-nicklist-header">
                       <label class="conv-nicklist-header-label"
                              id="participantLabel" control="participantCount"
                              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;"/>
                     <tree id="logTree" flex="1" hidecolumnpicker="true" seltype="single"
                           context="logTreeContext" onselect="chatHandler.onLogSelect();">
                       <treecols>
                         <treecol id="logCol" flex="1" primary="true" hideheader="true"
                                  crop="center" ignoreincolumnpicker="true"/>
--- a/mail/components/im/content/imconversation.xml
+++ b/mail/components/im/content/imconversation.xml
@@ -167,17 +167,17 @@
           }
           else {
             // Buddy no longer in the room
             color = this._computeColor(name);
           }
           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();
         let shouldSetUnreadFlag = this.tab && isUnreadMessage && !isTabFocused;
         let firstUnread = this.tab && !this.tab.hasAttribute("unread") &&
                           isUnreadMessage && this._isAfterFirstRealMessage &&
                           (!isTabFocused || this._writingContextMessages);
 
@@ -1045,19 +1045,19 @@
            else if (buddy.halfOp)
              image = "half-operator";
            else if (buddy.voiced)
              image = "voice";
            else if (buddy.founder)
              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>
 
      <!-- compute color for a nick -->
      <method name="_computeColor">
        <parameter name="aName"/>
        <body>
@@ -1104,20 +1104,24 @@
          var name = aBuddy.name;
          if (!name)
            throw "The empty string isn't a valid nick.";
          if (this.buddies.has(name))
            throw "Adding chat buddy " + name + " twice?!";
 
          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);
          var style = "color: hsl(" + color + ", 100%, 40%);";
          item.colorStyle = style;
          item.setAttribute("style", style);
          if (!this._isBuddyActive(name))
            item.setAttribute("inactive", "true");
--- a/mail/components/im/themes/chat.css
+++ b/mail/components/im/themes/chat.css
@@ -522,25 +522,27 @@ imcontact[aliasing] .contactDisplayName 
 #conv-toolbar {
   border-style: none;
 }
 
 #logTree {
   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
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
 %endif
 }
 
-.conv-nicklist > .listitem-iconic .listcell-icon {
+.conv-nicklist > richlistitem > image {
+  pointer-events: none;
   min-width: 16px;
   margin: 0 2px;
 }
 
 .conv-logs-header-label {
   -moz-appearance: treeheadercell;
   margin: 0 -1px 0 0;
   padding-left: 3px;
@@ -573,38 +575,38 @@ imcontact[aliasing] .contactDisplayName 
 }
 %endif
 %ifdef XP_WIN
 .splitter.conv-chat {
   border-left: 1px solid rgba(0, 0, 0, 0.25);
 }
 %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
   color: -moz-cellhighlighttext !important;
 %endif
 }
 
-.conv-nicklist:focus > .listitem-iconic[inactive][selected] .listcell-label {
+.conv-nicklist:focus > richlistitem[inactive][selected] > label {
   color: HighlightText !important;
 }
 
 /* from instantbird/themes/blist.css */
 %ifndef XP_MACOSX
 imgroup .twisty {
   padding-top: 1px;
   width: 9px; /* The image's width is 9 pixels */
--- a/mail/themes/windows/mail/chat.css
+++ b/mail/themes/windows/mail/chat.css
@@ -172,25 +172,20 @@
     background-color: -moz-field;
   }
 
   .splitter,
   #logsSplitter {
     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"],
 #statusTypeAvailable,
 .statusTypeIcon[status="available"],
 #imStatusAvailable,
 #appmenu_imStatusAvailable,
 richlistitem[state="connected"] .accountStateIcon {