Bug 1559641 - fixed chat status selector. r=mkmelin
authorKhushil Mistry <khushil324@gmail.com>
Sat, 22 Jun 2019 04:26:00 +0200
changeset 35927 7ad11431613a9329d152abd7a6ffd45f69d72ed9
parent 35926 3d905e57ebe0ac1386ffab24fb25560221160555
child 35928 f7382be702d4214d3f3046576bd8bdaa011f6be5
push id392
push userclokep@gmail.com
push dateMon, 02 Sep 2019 20:17:19 +0000
reviewersmkmelin
bugs1559641
Bug 1559641 - fixed chat status selector. r=mkmelin
mail/components/im/content/chat-messenger.inc.xul
mail/components/im/content/chat.css
mail/components/im/content/imAccounts.css
mail/components/im/content/imAccounts.xul
mail/components/im/content/imStatusSelector.js
mail/components/im/themes/chat.css
mail/components/im/themes/imAccounts.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-messenger.inc.xul
+++ b/mail/components/im/content/chat-messenger.inc.xul
@@ -39,19 +39,22 @@
                               status="available" class="menuitem-iconic"/>
                     <menuitem id="statusTypeUnavailable" label="&status.unavailable;"
                               status="unavailable" class="menuitem-iconic"/>
                     <menuseparator id="statusTypeOfflineSeparator"/>
                     <menuitem id="statusTypeOffline" label="&status.offline;"
                               status="offline" class="menuitem-iconic"/>
                   </menupopup>
                 </toolbarbutton>
-                <label id="statusMessage" crop="end" flex="1" value=""
-                       class="statusMessageToolbarItem"
-                       onclick="statusSelector.statusMessageClick();"/>
+                <vbox flex="1" orient="horizontal" align="center">
+                  <label id="statusMessage" flex="1" value="" class="statusMessageToolbarItem"
+                         onclick="statusSelector.statusMessageClick();"/>
+                  <textbox id="statusMessageInput" flex="1" value="" class="statusMessageToolbarItem"
+                           collapsed="true" style="margin:0;"/>
+                </vbox>
               </toolbaritem>
               <toolbarbutton id="button-chat-accounts"
                              class="toolbarbutton-1"
                              label="&chatAccountsButton.label;"
                              oncommand="openIMAccountMgr()"/>
 
               <toolbaritem id="gloda-im-search" insertafter="button-stop"
                            title="&amp;glodaSearch.title;"
--- a/mail/components/im/content/chat.css
+++ b/mail/components/im/content/chat.css
@@ -49,25 +49,25 @@ tooltip[type="im"] {
 #IMSearchInput {
   -moz-binding: url("chrome://messenger/content/search.xml#glodaSearch");
 }
 
 #statusTypeIcon:not([disabled]) {
   cursor: pointer;
 }
 
-#statusMessage {
+#statusMessage, #statusMessageInput {
   width: 15em;
 }
 
 #statusMessage:not([statusType="offline"]):not([disabled]), .statusMessageInput[editable] {
   cursor: text;
 }
 
-#statusMessage[editing], .statusMessageInput[editing] {
+#statusMessageInput[editing], .statusMessageInput[editing] {
   -moz-appearance: textfield;
 }
 
 toolbar[mode="text"] #button-chat {
   -moz-box-orient: horizontal;
 }
 
 .badgeButton-badge {
--- a/mail/components/im/content/imAccounts.css
+++ b/mail/components/im/content/imAccounts.css
@@ -6,12 +6,13 @@
   cursor: pointer;
 }
 
 #displayName,
 #statusMessage:not([statusType="offline"]) {
   cursor: text;
 }
 
-#displayName[editing],
-#statusMessage[editing] {
+
+#displayNameInput[editing],
+#statusMessageInput[editing] {
   -moz-appearance: textfield;
 }
--- a/mail/components/im/content/imAccounts.xul
+++ b/mail/components/im/content/imAccounts.xul
@@ -121,20 +121,23 @@
            <menuseparator id="statusTypeOfflineSeparator"/>
            <menuitem id="statusTypeOffline" label="&status.offline;"
                      status="offline" class="menuitem-iconic"/>
          </menupopup>
        </button>
      </stack>
      <stack id="displayNameAndstatusMessageStack" flex="1">
        <vbox flex="1" pack="center">
-         <label id="displayName" onclick="statusSelector.displayNameClick();"/>
+         <label id="displayName" onclick="statusSelector.displayNameClick();" align="center" pack="center"/>
        </vbox>
+       <textbox id="displayNameInput" collapsed="true"/>
        <label id="statusMessage" crop="end" value=""
               onclick="statusSelector.statusMessageClick();"/>
+       <textbox id="statusMessageInput" crop="end" value=""
+                collapsed="true"/>
      </stack>
    </toolbar>
  </toolbox>
 
   <deck flex="1" id="accountsDesk" ondblclick="gAccountManager.new();">
     <vbox flex="1" id="noAccountScreen" align="center" pack="center">
       <hbox id="noAccountBox" align="top">
         <vbox id="noAccountInnerBox" flex="1">
--- a/mail/components/im/content/imStatusSelector.js
+++ b/mail/components/im/content/imStatusSelector.js
@@ -76,58 +76,66 @@ var statusSelector = {
       this._statusTypeBeforeEditing = currentStatusType;
       this._statusTypeEditing = aStatusType;
       this.displayStatusType(aStatusType);
     }
     this.statusMessageClick();
   },
 
   statusMessageClick() {
-    let elt = document.getElementById("statusMessage");
+    let statusMessage = document.getElementById("statusMessage");
+    let statusMessageInput = document.getElementById("statusMessageInput");
+    statusMessage.setAttribute("collapsed", "true");
+    statusMessageInput.setAttribute("collapsed", "false");
     let statusType =
       document.getElementById("statusTypeIcon").getAttribute("status");
-    if (statusType == "offline" || elt.disabled)
+    if (statusType == "offline" || statusMessage.disabled) {
       return;
+    }
 
-    if (!elt.hasAttribute("editing")) {
-      elt.setAttribute("editing", "true");
-      elt.addEventListener("blur", this.statusMessageBlur);
-      if (elt.hasAttribute("usingDefault")) {
+    if (!statusMessageInput.hasAttribute("editing")) {
+      statusMessageInput.setAttribute("editing", "true");
+      statusMessageInput.addEventListener("blur", this.statusMessageBlur);
+      if (statusMessage.hasAttribute("usingDefault")) {
         if ("_statusTypeBeforeEditing" in this &&
-            this._statusTypeBeforeEditing == "offline")
-          elt.setAttribute("value", Services.core.globalUserStatus.statusText);
-        else
-          elt.removeAttribute("value");
+            this._statusTypeBeforeEditing == "offline") {
+          statusMessageInput.setAttribute("value", Services.core.globalUserStatus.statusText);
+        } else {
+          statusMessageInput.removeAttribute("value");
+        }
+      } else {
+        statusMessageInput.setAttribute("value", statusMessage.getAttribute("value"));
       }
 
       if (Services.prefs.getBoolPref("mail.spellcheck.inline")) {
-        elt.setAttribute("spellcheck", "true");
+        statusMessageInput.setAttribute("spellcheck", "true");
       } else {
-        elt.removeAttribute("spellcheck");
+        statusMessageInput.removeAttribute("spellcheck");
       }
 
       // force binding attachment by forcing layout
-      elt.getBoundingClientRect();
-      elt.select();
+      statusMessageInput.getBoundingClientRect();
+      statusMessageInput.select();
     }
 
     this.statusMessageRefreshTimer();
   },
 
   statusMessageRefreshTimer() {
     const timeBeforeAutoValidate = 20 * 1000;
     if ("_stopEditStatusTimeout" in this)
       clearTimeout(this._stopEditStatusTimeout);
     this._stopEditStatusTimeout = setTimeout(this.finishEditStatusMessage,
                                              timeBeforeAutoValidate, true);
   },
 
   statusMessageBlur(aEvent) {
-    if (aEvent.originalTarget == document.getElementById("statusMessage").inputField)
+    if (aEvent.originalTarget == document.getElementById("statusMessageInput").inputField) {
       statusSelector.finishEditStatusMessage(true);
+    }
   },
 
   statusMessageKeyPress(aEvent) {
     if (!this.hasAttribute("editing")) {
       if (aEvent.keyCode == aEvent.DOM_VK_DOWN) {
         let button = document.getElementById("statusTypeIcon");
         document.getElementById("setStatusTypeMenupopup").openPopup(button);
       }
@@ -146,52 +154,58 @@ var statusSelector = {
       default:
         statusSelector.statusMessageRefreshTimer();
     }
   },
 
   finishEditStatusMessage(aSave) {
     clearTimeout(this._stopEditStatusTimeout);
     delete this._stopEditStatusTimeout;
-    let elt = document.getElementById("statusMessage");
+    let statusMessage = document.getElementById("statusMessage");
+    let statusMessageInput = document.getElementById("statusMessageInput");
+    statusMessage.setAttribute("collapsed", "false");
+    statusMessageInput.setAttribute("collapsed", "true");
     if (aSave) {
       let newStatus = Ci.imIStatusInfo.STATUS_UNKNOWN;
       if ("_statusTypeEditing" in this) {
         let statusType = this._statusTypeEditing;
-        if (statusType == "available")
+        if (statusType == "available") {
           newStatus = Ci.imIStatusInfo.STATUS_AVAILABLE;
-        else if (statusType == "unavailable")
+        } else if (statusType == "unavailable") {
           newStatus = Ci.imIStatusInfo.STATUS_UNAVAILABLE;
-        else if (statusType == "offline")
+        } else if (statusType == "offline") {
           newStatus = Ci.imIStatusInfo.STATUS_OFFLINE;
+        }
         delete this._statusTypeBeforeEditing;
         delete this._statusTypeEditing;
       }
       // apply the new status only if it is different from the current one
       if (newStatus != Ci.imIStatusInfo.STATUS_UNKNOWN ||
-          elt.value != elt.getAttribute("value"))
-        Services.core.globalUserStatus.setStatus(newStatus, elt.value);
+          statusMessageInput.value != statusMessageInput.getAttribute("value")) {
+        Services.core.globalUserStatus.setStatus(newStatus, statusMessageInput.value);
+      }
     } else if ("_statusTypeBeforeEditing" in this) {
       this.displayStatusType(this._statusTypeBeforeEditing);
       delete this._statusTypeBeforeEditing;
       delete this._statusTypeEditing;
     }
 
-    if (elt.hasAttribute("usingDefault"))
-      elt.setAttribute("value", elt.getAttribute("usingDefault"));
+    if (statusMessage.hasAttribute("usingDefault")) {
+      statusMessage.setAttribute("value", statusMessage.getAttribute("usingDefault"));
+    }
 
-    elt.removeAttribute("editing");
-    elt.removeEventListener("blur", this.statusMessageBlur);
+    statusMessageInput.removeAttribute("editing");
+    statusMessageInput.removeEventListener("blur", this.statusMessageBlur);
 
     // We need to put the focus back on the label after the textbox
     // binding has been detached, otherwise the focus gets lost (it's
     // on none of the elements in the document), but before that we
     // need to flush the layout.
-    elt.getBoundingClientRect();
-    elt.focus();
+    statusMessageInput.getBoundingClientRect();
+    statusMessageInput.focus();
   },
 
   userIconClick() {
     const nsIFilePicker = Ci.nsIFilePicker;
     let fp = Cc["@mozilla.org/filepicker;1"]
                .createInstance(nsIFilePicker);
     let bundle = document.getElementById("chatBundle");
     fp.init(window, bundle.getString("userIconFilePickerTitle"),
@@ -201,42 +215,49 @@ var statusSelector = {
       if (rv != nsIFilePicker.returnOK || !fp.file) {
         return;
       }
       Services.core.globalUserStatus.setUserIcon(fp.file);
     });
   },
 
   displayNameClick() {
-    let elt = document.getElementById("displayName");
-    if (!elt.hasAttribute("editing")) {
-      elt.setAttribute("editing", "true");
-      if (elt.hasAttribute("usingDefault"))
-        elt.removeAttribute("value");
-      elt.addEventListener("keypress", this.displayNameKeyPress);
-      elt.addEventListener("blur", this.displayNameBlur);
+    let displayName = document.getElementById("displayName");
+    let displayNameInput = document.getElementById("displayNameInput");
+    displayName.setAttribute("collapsed", "true");
+    displayNameInput.setAttribute("collapsed", "false");
+    if (!displayNameInput.hasAttribute("editing")) {
+      displayNameInput.setAttribute("editing", "true");
+      if (displayName.hasAttribute("usingDefault")) {
+        displayNameInput.removeAttribute("value");
+      } else {
+        displayNameInput.setAttribute("value", displayName.getAttribute("value"));
+      }
+      displayNameInput.addEventListener("keypress", this.displayNameKeyPress);
+      displayNameInput.addEventListener("blur", this.displayNameBlur);
       // force binding attachmant by forcing layout
-      elt.getBoundingClientRect();
-      elt.select();
+      displayNameInput.getBoundingClientRect();
+      displayNameInput.select();
     }
 
     this.displayNameRefreshTimer();
   },
 
   _stopEditDisplayNameTimeout: 0,
   displayNameRefreshTimer() {
     const timeBeforeAutoValidate = 20 * 1000;
     clearTimeout(this._stopEditDisplayNameTimeout);
     this._stopEditDisplayNameTimeout =
       setTimeout(this.finishEditDisplayName, timeBeforeAutoValidate, true);
   },
 
   displayNameBlur(aEvent) {
-    if (aEvent.originalTarget == document.getElementById("displayName").inputField)
+    if (aEvent.originalTarget == document.getElementById("displayNameInput").inputField) {
       statusSelector.finishEditDisplayName(true);
+    }
   },
 
   displayNameKeyPress(aEvent) {
     switch (aEvent.keyCode) {
       case aEvent.DOM_VK_RETURN:
         statusSelector.finishEditDisplayName(true);
         break;
 
@@ -246,26 +267,30 @@ var statusSelector = {
 
       default:
         statusSelector.displayNameRefreshTimer();
     }
   },
 
   finishEditDisplayName(aSave) {
     clearTimeout(this._stopEditDisplayNameTimeout);
-    let elt = document.getElementById("displayName");
+    let displayName = document.getElementById("displayName");
+    let displayNameInput = document.getElementById("displayNameInput");
+    displayName.setAttribute("collapsed", "false");
+    displayNameInput.setAttribute("collapsed", "true");
     // Apply the new display name only if it is different from the current one.
-    if (aSave && elt.value != elt.getAttribute("value"))
-      Services.core.globalUserStatus.displayName = elt.value;
-    else if (elt.hasAttribute("usingDefault"))
-      elt.setAttribute("value", elt.getAttribute("usingDefault"));
+    if (aSave && displayNameInput.value != displayNameInput.getAttribute("value")) {
+      Services.core.globalUserStatus.displayName = displayNameInput.value;
+    } else if (displayName.hasAttribute("usingDefault")) {
+      displayName.setAttribute("value", displayName.getAttribute("usingDefault"));
+    }
 
-    elt.removeAttribute("editing");
-    elt.removeEventListener("keypress", this.displayNameKeyPress);
-    elt.removeEventListener("blur", this.displayNameBlur);
+    displayNameInput.removeAttribute("editing");
+    displayNameInput.removeEventListener("keypress", this.displayNameKeyPress);
+    displayNameInput.removeEventListener("blur", this.displayNameBlur);
   },
 
   init() {
     let events = ["status-changed"];
     statusSelector.displayCurrentStatus();
 
     if (document.getElementById("displayName")) {
       events.push("user-display-name-changed");
@@ -273,18 +298,21 @@ var statusSelector = {
     }
 
     if (document.getElementById("userIcon")) {
       events.push("user-icon-changed");
       statusSelector.displayUserIcon();
     }
 
     let statusMessage = document.getElementById("statusMessage");
-    if (statusMessage)
+    let statusMessageInput = document.getElementById("statusMessageInput");
+    if (statusMessage && statusMessageInput) {
       statusMessage.addEventListener("keypress", this.statusMessageKeyPress);
+      statusMessageInput.addEventListener("keypress", this.statusMessageKeyPress);
+    }
 
     for (let event of events)
       Services.obs.addObserver(statusSelector, event);
     statusSelector._events = events;
 
     window.addEventListener("unload", statusSelector.unload);
   },
 
--- a/mail/components/im/themes/chat.css
+++ b/mail/components/im/themes/chat.css
@@ -800,42 +800,42 @@ toolbar[mode="text"] #statusTypeIcon > .
 .statusMessageToolbarItem {
   margin: 2px 4px;
   margin-inline-start: -1px;
   padding: 3px 5px 4px;
   border: 1px solid transparent;
   background-clip: padding-box;
 }
 
-#chat-status-selector:hover > .statusMessageToolbarItem,
+#chat-status-selector:hover > vbox > .statusMessageToolbarItem,
 .statusMessageToolbarItem:focus {
   border-color: ThreeDShadow;
 }
 
-#chat-status-selector:-moz-lwtheme:hover > .statusMessageToolbarItem,
+#chat-status-selector:-moz-lwtheme:hover > vbox > .statusMessageToolbarItem,
 .statusMessageToolbarItem:-moz-lwtheme:focus {
   background-color: var(--lwt-toolbar-field-background-color, hsla(0,0%,100%,.8));
   color: var(--lwt-toolbar-field-color, black);
   border-color: var(--lwt-toolbar-field-border-color, hsla(240,5%,5%,.25));
 }
 
 .statusMessageToolbarItem[statusType="offline"],
 .statusMessageToolbarItem[disabled] {
   border: none;
 }
 
-#chat-status-selector > .statusMessageToolbarItem[editing] {
+#chat-status-selector > vbox > .statusMessageToolbarItem[editing] {
   -moz-appearance: none;
   padding-inline-start: 4px;
   padding-inline-end: 4px;
   border-color: ThreeDShadow;
   background-color: -moz-field;
 }
 
-#chat-status-selector:-moz-lwtheme > .statusMessageToolbarItem[editing] {
+#chat-status-selector:-moz-lwtheme > vbox > .statusMessageToolbarItem[editing] {
   background-color: var(--lwt-toolbar-field-focus, var(--lwt-toolbar-field-background-color, white));
   color: var(--lwt-toolbar-field-focus-color, var(--lwt-toolbar-field-color, black));
   border-color: var(--toolbar-field-focus-border-color);
 }
 
 .tabmail-tab[type="chat"] {
   list-style-image: url("chrome://messenger/skin/icons/chat.svg");
 }
@@ -920,9 +920,9 @@ toolbar[mode="text"] #statusTypeIcon > .
 
 :root[lwt-tree] #nicklist > richlistitem[inactive][selected] > label,
 :root[lwt-tree] #nicklist:focus > richlistitem[inactive][selected] > label {
   color: var(--sidebar-highlight-text-color, var(--sidebar-text-color)) !important;
 }
 
 :root[lwt-tree] #logTree {
   -moz-appearance: none;
-}
+}
\ No newline at end of file
--- a/mail/components/im/themes/imAccounts.css
+++ b/mail/components/im/themes/imAccounts.css
@@ -155,17 +155,17 @@ richlistitem[error="true"] .accountState
   list-style-image: url("chrome://global/skin/icons/warning.svg");
 }
 
 #statusArea {
   margin: 0 0;
   padding: 0 0;
 }
 
-#displayName {
+#displayName, #displayNameInput {
   font-size: 16px;
   border-bottom: 1px solid rgba(0,0,0,0.25);
   margin: 0 0 16px;
 }
 
 #displayName[usingDefault]:not([editing]) {
   color: GrayText;
 }
--- a/mail/themes/linux/mail/chat.css
+++ b/mail/themes/linux/mail/chat.css
@@ -66,25 +66,25 @@
   -moz-box-align: center;
 }
 
 .statusMessageInput[editing] {
   color: -moz-dialogtext;
   margin: 29px 0 -3px -4px;
 }
 
-#displayNameAndstatusMessageStack #statusMessage {
+#displayNameAndstatusMessageStack #statusMessage, #statusMessageInput {
   margin: 32px 0 0;
 }
 
-#displayNameAndstatusMessageStack #statusMessage[editing] {
+#displayNameAndstatusMessageStack #statusMessageInput[editing] {
   margin: 30px -2px -2px -4px;
 }
 
-#displayNameAndstatusMessageStack #displayName[editing] {
+#displayNameAndstatusMessageStack #displayNameInput[editing] {
   margin-left: -4px;
   margin-right: -2px;
   margin-bottom: 18px;
 }
 
 #setStatusTypeMenupopup .menu-iconic-icon,
 #imAccountsStatus .menu-iconic-icon,
 #appmenu_imAccountsStatus .menu-iconic-icon {
--- a/mail/themes/osx/mail/chat.css
+++ b/mail/themes/osx/mail/chat.css
@@ -47,41 +47,40 @@
   border-bottom-left-radius: 0;
 }
 
 #statusTypeIcon > .toolbarbutton-text {
   display: none;
 }
 
 .statusMessageToolbarItem {
-  height: 22px;
   margin-inline-start: -3px;
   margin-bottom: 2px;
   padding-bottom: 3px;
 }
 
-#chat-status-selector:not(:-moz-lwtheme):hover > .statusMessageToolbarItem,
-#chat-status-selector:not(:-moz-lwtheme) > .statusMessageToolbarItem[editing],
+#chat-status-selector:not(:-moz-lwtheme):hover > vbox > .statusMessageToolbarItem,
+#chat-status-selector:not(:-moz-lwtheme) > vbox > .statusMessageToolbarItem[editing],
 .statusMessageToolbarItem:not(:-moz-lwtheme):focus {
   border-color: #aaa;
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
               0 1px 0 rgba(255, 255, 255, 0.5) inset;
 }
 
-#chat-status-selector:not(:-moz-lwtheme) > .statusMessageToolbarItem[editing] {
+#chat-status-selector:not(:-moz-lwtheme) > vbox > .statusMessageToolbarItem[editing] {
   border-color: #888;
 }
 
-#chat-status-selector:-moz-lwtheme:hover > .statusMessageToolbarItem,
+#chat-status-selector:-moz-lwtheme:hover > vbox > .statusMessageToolbarItem,
 .statusMessageToolbarItem:-moz-lwtheme:focus,
-#chat-status-selector:-moz-lwtheme > .statusMessageToolbarItem[editing] {
+#chat-status-selector:-moz-lwtheme > vbox > .statusMessageToolbarItem[editing] {
   text-shadow: none;
 }
 
-#chat-status-selector:-moz-lwtheme > .statusMessageToolbarItem[editing] {
+#chat-status-selector:-moz-lwtheme > vbox > .statusMessageToolbarItem[editing] {
   box-shadow: 0 0 0 1px var(--toolbar-field-focus-border-color) inset,
               0 0 0 1px var(--toolbar-field-focus-border-color);
 }
 
 /* Adaptation of #folderpane_splitter */
 #listSplitter,
 #contextSplitter {
   min-width: 5px;
@@ -101,22 +100,22 @@
   background-color: #fff;
 }
 
 .statusMessageInput[editing] {
   color: -moz-dialogtext;
   margin: 29px 0 -1px -4px;
 }
 
-#displayNameAndstatusMessageStack #statusMessage {
+#displayNameAndstatusMessageStack #statusMessage, #statusMessageInput {
   margin: 32px 0 0;
   min-height: 16px;
 }
 
-#displayNameAndstatusMessageStack #statusMessage[editing] {
+#displayNameAndstatusMessageStack #statusMessageInput[editing] {
   margin: 29px 2px 0 -4px;
 }
 
-#displayNameAndstatusMessageStack #displayName[editing] {
+#displayNameAndstatusMessageStack #displayNameInput[editing] {
   margin-left: -4px;
   margin-right: -2px;
   margin-bottom: 18px;
 }
--- a/mail/themes/windows/mail/chat.css
+++ b/mail/themes/windows/mail/chat.css
@@ -67,25 +67,25 @@
   background-color: -moz-Dialog;
 }
 
 .statusMessageInput[editing] {
   color: -moz-dialogtext;
   margin: 28px 0 -1px -2px;
 }
 
-#displayNameAndstatusMessageStack #statusMessage {
+#displayNameAndstatusMessageStack #statusMessage, #statusMessageInput {
   margin: 32px 0 0;
 }
 
-#displayNameAndstatusMessageStack  #statusMessage[editing] {
+#displayNameAndstatusMessageStack  #statusMessageInput[editing] {
   margin: 30px 0 1px -2px;
 }
 
-#displayNameAndstatusMessageStack #displayName[editing] {
+#displayNameAndstatusMessageStack #displayNameInput[editing] {
   margin-left: -2px;
   margin-bottom: 18px;
 }
 
 .statusMessageToolbarItem {
   margin: 0 1px;
   margin-inline-start: -2px;
   padding: 3px 3px 4px;
@@ -110,29 +110,29 @@
   .conv-status-container {
     border-bottom-color: #a9b7c9;
   }
 
   #statusTypeIcon > .toolbarbutton-menu-dropmarker {
     padding: 1px 3px;
   }
 
-  #chat-status-selector > .statusMessageToolbarItem[editing] {
+  #chat-status-selector > vbox > .statusMessageToolbarItem[editing] {
     -moz-appearance: none;
     padding-inline-start: 2px;
     padding-inline-end: 2px;
   }
 
-  #chat-status-selector:not(:-moz-lwtheme):hover > .statusMessageToolbarItem,
+  #chat-status-selector:not(:-moz-lwtheme):hover > vbox > .statusMessageToolbarItem,
   .statusMessageToolbarItem:not(:-moz-lwtheme):focus {
     border-color: hsla(210, 54%, 20%, .25) hsla(210, 54%, 20%, .27)
                   hsla(210, 54%, 20%, .3);
   }
 
-  #chat-status-selector:not(:-moz-lwtheme) > .statusMessageToolbarItem[editing] {
+  #chat-status-selector:not(:-moz-lwtheme) > vbox > .statusMessageToolbarItem[editing] {
     border-color: hsla(206, 100%, 60%, .65) hsla(206, 100%, 55%, .65)
                   hsla(206, 100%, 50%, .65);
     background-color: -moz-field;
   }
 
   #nicklist > richlistitem[selected] > label,
   #nicklist:focus > richlistitem[inactive][selected] > label {
     color: -moz-dialogtext !important;