Bug 1622000 - fix renaming of the contacts in the Chat is not working. r=clokep
authorKhushil Mistry <khushil324@gmail.com>
Fri, 20 Mar 2020 11:21:12 +1300
changeset 29034 22309738f263347581c0852841334abb7f39df6e
parent 29033 a37cba884251c58d9304e65870ab18cb95df9ddb
child 29035 ba0be99cb7702128a827d597aa80f4ea33deaccc
push id17166
push usergeoff@darktrojan.net
push dateThu, 19 Mar 2020 22:21:58 +0000
treeherdercomm-central@ba0be99cb770 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersclokep
bugs1622000
Bug 1622000 - fix renaming of the contacts in the Chat is not working. r=clokep
mail/components/im/content/chat-contact.js
mail/components/im/themes/chat.css
--- a/mail/components/im/content/chat-contact.js
+++ b/mail/components/im/content/chat-contact.js
@@ -21,16 +21,17 @@
    */
   class MozChatContactRichlistitem extends MozElements.MozRichlistitem {
     static get inheritedAttributes() {
       return {
         ".box-line": "selected",
         ".protoIcon": "src=iconPrpl,status",
         ".statusIcon": "status",
         ".contactDisplayName": "value=displayname,status",
+        ".contactDisplayNameInput": "value=displayname",
         ".contactStatusText": "value=statusTextWithDash",
       };
     }
     connectedCallback() {
       if (this.delayConnectedCallback() || this.hasChildNodes()) {
         return;
       }
 
@@ -95,20 +96,25 @@
         MozXULElement.parseXULToFragment(
           `
           <vbox class="box-line"></vbox>
           <stack class="prplBuddyIcon">
             <image class="protoIcon"></image>
             <image class="statusIcon"></image>
           </stack>
           <hbox flex="1" class="contact-hbox">
-            <label crop="end"
-                   flex="1"
-                   class="contactDisplayName blistDisplayName">
-            </label>
+            <stack>
+              <label crop="end"
+                     flex="1"
+                     class="contactDisplayName blistDisplayName">
+              </label>
+              <html:input type="text"
+                          class="contactDisplayNameInput"
+                          hidden="hidden"/>
+            </stack>
             <label crop="end"
                    flex="100000"
                    class="contactStatusText">
             </label>
             <button class="startChatBubble"
                     tooltiptext="&openConversationButton.tooltip;">
             </button>
           </hbox>
@@ -159,19 +165,26 @@
     }
 
     startAliasing() {
       if (this.hasAttribute("aliasing")) {
         return; // prevent re-entry.
       }
 
       this.setAttribute("aliasing", "true");
-      let textbox = this.querySelector(".contactDisplayName");
-      textbox.getBoundingClientRect(); // force binding attachmant by forcing layout
-      textbox.select();
+      let input = this.querySelector(".contactDisplayNameInput");
+      let label = this.querySelector(".contactDisplayName");
+      input.removeAttribute("hidden");
+      label.setAttribute("hidden", "true");
+      input.focus();
+
+      this._inputBlurListener = function(event) {
+        this.finishAliasing(true);
+      }.bind(this);
+      input.addEventListener("blur", this._inputBlurListener);
 
       // Some keys (home/end for example) can make the selected item
       // of the richlistbox change without producing a blur event on
       // our textbox. Make sure we watch richlistbox selection changes.
       this._parentSelectListener = function(event) {
         if (event.target == this.parentNode) {
           this.finishAliasing(true);
         }
@@ -179,21 +192,26 @@
       this.parentNode.addEventListener("select", this._parentSelectListener);
     }
 
     finishAliasing(save) {
       // Cache the parentNode because when we change the contact alias, we
       // trigger a re-order (and a removeContact call), which sets
       // this.parentNode to undefined.
       let listbox = this.parentNode;
+      let input = this.querySelector(".contactDisplayNameInput");
+      let label = this.querySelector(".contactDisplayName");
+      input.setAttribute("hidden", "hidden");
+      label.removeAttribute("hidden");
       if (save) {
-        this.contact.alias = this.querySelector(".contactDisplayName").value;
+        this.contact.alias = input.value;
       }
       this.removeAttribute("aliasing");
       listbox.removeEventListener("select", this._parentSelectListener);
+      input.removeEventListener("blur", this._inputBlurListener);
       delete this._parentSelectListener;
       listbox.focus();
     }
 
     deleteContact() {
       this.contact.remove();
     }
 
--- a/mail/components/im/themes/chat.css
+++ b/mail/components/im/themes/chat.css
@@ -203,20 +203,25 @@ richlistitem[is="chat-imconv-richlistite
 /* From instantbird/themes/blist.css */
 .contactStatusText,
 .convStatusText {
   color: GrayText;
 }
 
 .convUnreadCount,
 .contactDisplayName,
-.convDisplayName {
+.convDisplayName,
+.contactDisplayNameInput {
   margin-inline-end: 0;
 }
 
+.contactDisplayNameInput {
+  margin: 0;
+}
+
 .convUnreadCount {
   margin-inline-start: 0.5ch;
 }
 
 .convUnreadTargetedCount {
   color: hsl(0, 100%, 27%);
   background-color: hsl(0, 100%, 87%);
 %ifdef XP_WIN