Bug 1523419 - fixed editing of chat room topic. r=mkmelin DONTBUILD
authorKhushil Mistry <khushil324@gmail.com>
Wed, 19 Jun 2019 11:53:38 +0200
changeset 35897 402119bccd02c6de2fd6d7d193dcadccd58e5e46
parent 35896 2611a3ec1882fa63406e6ed176f281c15e186d1e
child 35898 d2122e452112c2c87573d4a27e670be6076302b0
push id392
push userclokep@gmail.com
push dateMon, 02 Sep 2019 20:17:19 +0000
reviewersmkmelin
bugs1523419
Bug 1523419 - fixed editing of chat room topic. r=mkmelin DONTBUILD
mail/components/im/content/chat-conversation-info.js
mail/components/im/content/chat.css
mail/components/im/themes/chat.css
mail/themes/linux/mail/chat.css
mail/themes/osx/mail/chat.css
mail/themes/windows/mail/chat.css
--- a/mail/components/im/content/chat-conversation-info.js
+++ b/mail/components/im/content/chat-conversation-info.js
@@ -31,16 +31,17 @@ class MozChatConversationInfo extends Mo
   static get inheritedAttributes() {
     return {
       ".userIconHolder": "userIcon",
       ".userIcon": "src=userIcon",
       ".statusTypeIcon": "status,typing,tooltiptext=statusTypeTooltiptext",
       ".displayName": "value=displayName",
       ".prplIcon": "src=prplIcon",
       ".statusMessage": "value=statusMessage,tooltiptext=statusTooltiptext,editable=topicEditable,editing,noTopic",
+      ".statusMessageInput": "value=statusMessage,tooltiptext=statusTooltiptext,editable=topicEditable,editing,noTopic",
     };
   }
 
   connectedCallback() {
     if (this.hasChildNodes() || this.delayConnectedCallback()) {
       return;
     }
     this.setAttribute("orient", "vertical");
@@ -58,18 +59,18 @@ class MozChatConversationInfo extends Mo
           <image class="statusTypeIcon"></image>
         </stack>
         <stack class="displayNameAndstatusMessageStack" mousethrough="always" flex="1">
           <hbox align="center" flex="1">
             <description class="displayName" flex="1" crop="end">
             </description>
             <image class="prplIcon"></image>
           </hbox>
-          <description class="statusMessage" mousethrough="never" crop="end" flex="100000">
-          </description>
+          <description class="statusMessage" mousethrough="never" crop="end" flex="100000"/>
+          <textbox class="statusMessageInput" mousethrough="never" crop="end" flex="100000" collapsed="true"/>
         </stack>
       </hbox>
       <hbox class="otr-container" align="left" valign="middle" hidden="true">
         <label class="otr-label" crop="end" data-l10n-id="state-label" flex="1"/>
         <toolbarbutton id="otrButton"
                        mode="dialog"
                        class="otr-button toolbarbutton-1"
                        type="menu"
@@ -97,34 +98,41 @@ class MozChatConversationInfo extends Mo
     }
     this.initializeAttributeInheritance();
   }
 
   get topic() {
     return this.querySelector(".statusMessage");
   }
 
+  get topicInput() {
+    return this.querySelector(".statusMessageInput");
+  }
+
   finishEditTopic(save) {
     if (!this.hasAttribute("editing")) {
       return;
     }
 
     let panel = document.getElementById("conversationsDeck").selectedPanel;
 
-    let elt = this.topic;
+    let topic = this.topic;
+    let topicInput = this.topicInput;
+    topic.setAttribute("collapsed", "false");
+    topicInput.setAttribute("collapsed", "true");
     if (save) {
       // apply the new topic only if it is different from the current one
-      if (elt.value != elt.getAttribute("value")) {
-        panel._conv.topic = elt.value;
+      if (topicInput.value != topicInput.getAttribute("value")) {
+        panel._conv.topic = topicInput.value;
       }
     }
     this.removeAttribute("editing");
-    elt.removeEventListener("keypress", this._topicKeyPress, true);
+    topicInput.removeEventListener("keypress", this._topicKeyPress, true);
     delete this._topicKeyPress;
-    elt.removeEventListener("blur", this._topicBlur);
+    topicInput.removeEventListener("blur", this._topicBlur);
     delete this._topicBlur;
 
     // After removing the "editing" attribute, the focus is on an element
     // that can't receive keyboard events, so move it to somewhere else.
     panel.editor.focus();
   }
 
   topicKeyPress(event) {
@@ -137,37 +145,42 @@ class MozChatConversationInfo extends Mo
         this.finishEditTopic(false);
         event.stopPropagation();
         event.preventDefault();
         break;
     }
   }
 
   topicBlur(event) {
-    if (event.originalTarget == this.topic.inputField) {
+    if (event.originalTarget == this.topicInput.inputField) {
       this.finishEditTopic(true);
     }
   }
 
   startEditTopic() {
-    let elt = this.topic;
-    if (!elt.hasAttribute("editable") || this.hasAttribute("editing")) {
+    let topic = this.topic;
+    let topicInput = this.topicInput;
+    if (!topic.hasAttribute("editable") || this.hasAttribute("editing")) {
       return;
     }
 
     this.setAttribute("editing", "true");
+    topicInput.setAttribute("collapsed", "false");
+    topic.setAttribute("collapsed", "true");
     this._topicKeyPress = this.topicKeyPress.bind(this);
-    elt.addEventListener("keypress", this._topicKeyPress);
+    topicInput.addEventListener("keypress", this._topicKeyPress);
     this._topicBlur = this.topicBlur.bind(this);
-    elt.addEventListener("blur", this._topicBlur);
-    elt.getBoundingClientRect();
+    topicInput.addEventListener("blur", this._topicBlur);
+    topicInput.getBoundingClientRect();
     if (this.hasAttribute("noTopic")) {
-      elt.value = "";
+      topicInput.value = "";
+    } else {
+      topicInput.value = topic.value;
     }
-    elt.select();
+    topicInput.inputField.select();
   }
 
   otrButtonClicked(aEvent) {
     aEvent.preventDefault();
     let otrMenu = this.querySelector(".otr-menu-popup");
     otrMenu.openPopup(otrMenu.parentNode, "after_start");
   }
 
--- a/mail/components/im/content/chat.css
+++ b/mail/components/im/content/chat.css
@@ -57,21 +57,21 @@ tooltip[type="im"] {
 #statusTypeIcon:not([disabled]) {
   cursor: pointer;
 }
 
 #statusMessage {
   width: 15em;
 }
 
-#statusMessage:not([statusType="offline"]):not([disabled]), .statusMessage[editable] {
+#statusMessage:not([statusType="offline"]):not([disabled]), .statusMessageInput[editable] {
   cursor: text;
 }
 
-#statusMessage[editing], .statusMessage[editing] {
+#statusMessage[editing], .statusMessageInput[editing] {
   -moz-appearance: textfield;
 }
 
 toolbar[mode="text"] #button-chat {
   -moz-box-orient: horizontal;
 }
 
 .badgeButton-badge {
--- a/mail/components/im/themes/chat.css
+++ b/mail/components/im/themes/chat.css
@@ -442,22 +442,22 @@ richlistitem[state="disconnected"] .acco
 .statusTypeIcon[typing="active"] {
   list-style-image: url('chrome://chat/skin/typing-16.png');
 }
 
 .statusTypeIcon[typing="paused"] {
   list-style-image: url('chrome://chat/skin/typed-16.png');
 }
 
-.statusMessage {
+.statusMessage, .statusMessageInput {
   margin: 32px 0 0;
   min-height: 16px;
 }
 
-.statusMessage[noTopic]:not([editing]),
+.statusMessageInput[noTopic]:not([editing]),
 .statusMessageWithDash[noTopic] {
   font-style: italic;
 }
 
 .status-overlay-icon[status="away"],
 .status-overlay-icon[status="unavailable"] {
   list-style-image: url('chrome://chat/skin/away.png');
 }
--- a/mail/themes/linux/mail/chat.css
+++ b/mail/themes/linux/mail/chat.css
@@ -61,17 +61,17 @@
 .closeConversationButton > .button-box > .button-icon {
   margin-inline-end: 0;
 }
 
 .conv-hbox {
   -moz-box-align: center;
 }
 
-.statusMessage[editing] {
+.statusMessageInput[editing] {
   color: -moz-dialogtext;
   margin: 29px 0 -3px -4px;
 }
 
 #displayNameAndstatusMessageStack #statusMessage {
   margin: 32px 0 0;
 }
 
--- a/mail/themes/osx/mail/chat.css
+++ b/mail/themes/osx/mail/chat.css
@@ -96,17 +96,17 @@
   margin-inline-start: 0;
 }
 
 /* Set a background color to avoid lightweight theme backgrounds */
 #contextPane {
   background-color: #fff;
 }
 
-.statusMessage[editing] {
+.statusMessageInput[editing] {
   color: -moz-dialogtext;
   margin: 29px 0 -1px -4px;
 }
 
 #displayNameAndstatusMessageStack #statusMessage {
   margin: 32px 0 0;
   min-height: 16px;
 }
--- a/mail/themes/windows/mail/chat.css
+++ b/mail/themes/windows/mail/chat.css
@@ -62,17 +62,17 @@
   -moz-appearance: none;
   margin: 0;
   padding-top: 2px;
   padding-bottom: 2px;
   border-bottom: 1px solid ThreeDShadow;
   background-color: -moz-Dialog;
 }
 
-.statusMessage[editing] {
+.statusMessageInput[editing] {
   color: -moz-dialogtext;
   margin: 28px 0 -1px -2px;
 }
 
 #displayNameAndstatusMessageStack #statusMessage {
   margin: 32px 0 0;
 }