Bug 1628497 - Improve the UI of the XMPP account settings tab. r=paenglab
authorAlessandro Castellani <alessandro@thunderbird.net>
Sat, 23 May 2020 13:14:05 +0300
changeset 39218 1f54197e9163125c2b1ec3a0a121b77dd0e86fa6
parent 39217 1ba42b85d43f98c9b8b8c32e467d58bf82d8e4f6
child 39219 b785d5738e79cb79312b77369acc6bffa1a2d6cf
push id402
push userclokep@gmail.com
push dateMon, 29 Jun 2020 20:48:04 +0000
reviewerspaenglab
bugs1628497
Bug 1628497 - Improve the UI of the XMPP account settings tab. r=paenglab
chat/content/imAccountOptionsHelper.js
mail/themes/shared/mail/accountManage.css
--- a/chat/content/imAccountOptionsHelper.js
+++ b/chat/content/imAccountOptionsHelper.js
@@ -30,37 +30,40 @@ var accountOptionsHelper = {
     input.setAttribute("value", aValue);
     input.setAttribute("id", aName);
 
     container.appendChild(input);
     return container;
   },
 
   createMenulist(aList, aLabel, aName) {
-    let vbox = document.createXULElement("vbox");
     let hbox = document.createXULElement("hbox");
+    hbox.setAttribute("align", "baseline");
+    hbox.setAttribute("equalsize", "always");
+    hbox.classList.add("input-container");
 
     let label = document.createXULElement("label");
     label.setAttribute("value", aLabel);
     label.setAttribute("control", aName);
+    label.classList.add("label-inline");
     hbox.appendChild(label);
-    vbox.appendChild(hbox);
 
     let menulist = document.createXULElement("menulist");
     menulist.setAttribute("id", aName);
     menulist.setAttribute("flex", "1");
+    menulist.classList.add("input-inline");
     let popup = menulist.appendChild(document.createXULElement("menupopup"));
     for (let elt of aList) {
       let item = document.createXULElement("menuitem");
       item.setAttribute("label", elt.name);
       item.setAttribute("value", elt.value);
       popup.appendChild(item);
     }
-    vbox.appendChild(menulist);
-    return vbox;
+    hbox.appendChild(menulist);
+    return hbox;
   },
 
   // Adds options with specific prefix for ids to UI according to their types
   // with optional attributes for each type and returns true if at least one
   // option has been added to UI, otherwise returns false.
   addOptions(aIdPrefix, aOptions, aAttributes) {
     let vbox = document.getElementById("protoSpecific");
     while (vbox.hasChildNodes()) {
--- a/mail/themes/shared/mail/accountManage.css
+++ b/mail/themes/shared/mail/accountManage.css
@@ -116,16 +116,20 @@ fieldset:last-of-type {
 .input-container:not([hidden="true"]) {
   display: flex;
 }
 
 .input-container:not([hidden="true"]) > .input-inline {
   flex: 1;
 }
 
+menulist.input-inline {
+  margin: 2px 4px;
+}
+
 .identity-table {
   margin-inline-end: 14px;
 }
 
 .folderMenuItem::part(dropmarker) {
   -moz-image-region: auto;
 }