Bug 1551133 - Implement new UI to Account Creation Dialog. r=mkmelin draft
authorAlessandro Castellani <alessandro@thunderbird.net>
Mon, 13 May 2019 18:12:43 -0700
changeset 76415 ce596711000820dab5663c43c21ed4447497450a
parent 76414 bec4c1774b736a6f7fc62a7f3f5c75a924f17b5f
child 76416 09b8f74740e6e85f2d619a89c96d419c99332af6
push id8881
push useralessandro@thunderbird.net
push dateWed, 24 Jul 2019 18:44:13 +0000
treeherdertry-comm-central@09b8f74740e6 [default view] [failures only]
reviewersmkmelin
bugs1551133
Bug 1551133 - Implement new UI to Account Creation Dialog. r=mkmelin
mail/components/accountcreation/content/emailWizard.js
mail/components/accountcreation/content/emailWizard.xul
mail/locales/en-US/chrome/messenger/accountCreation.dtd
mail/locales/en-US/chrome/messenger/accountCreation.properties
mail/test/mozmill/account/test-mail-account-setup-wizard.js
mail/test/mozmill/account/test-retest-config.js
mail/themes/linux/jar.mn
mail/themes/linux/mail/accountCreation.css
mail/themes/linux/mail/creationDialog.css
mail/themes/osx/jar.mn
mail/themes/osx/mail/accountCreation.css
mail/themes/osx/mail/creationDialog.css
mail/themes/shared/jar.inc.mn
mail/themes/shared/mail/accountCreation.css
mail/themes/shared/mail/creationDialog.css
mail/themes/shared/mail/icons/check.svg
mail/themes/shared/mail/icons/exclude.svg
mail/themes/shared/mail/icons/hidden.svg
mail/themes/shared/mail/icons/information.svg
mail/themes/shared/mail/icons/more.svg
mail/themes/shared/mail/icons/visible.svg
mail/themes/windows/jar.mn
mail/themes/windows/mail/accountCreation.css
mail/themes/windows/mail/creationDialog.css
mailnews/base/prefs/content/accountUtils.js
--- a/mail/components/accountcreation/content/emailWizard.js
+++ b/mail/components/accountcreation/content/emailWizard.js
@@ -119,17 +119,17 @@ function _disable(id) {
 }
 
 function setText(id, value) {
   var element = e(id);
   assert(element, "setText() on non-existant element ID");
 
   if (element.localName == "textbox" || element.localName == "label") {
     element.value = value;
-  } else if (element.localName == "description") {
+  } else if (element.localName == "description" || element.localName == "hbox") {
     element.textContent = value;
   } else {
     throw new NotReached("XUL element type not supported");
   }
 }
 
 function setLabelFromStringBundle(elementID, stringName) {
   e(elementID).label = gMessengerBundle.getString(stringName);
@@ -172,16 +172,17 @@ EmailConfigWizard.prototype = {
       let userInfo = Cc["@mozilla.org/userinfo;1"].getService(Ci.nsIUserInfo);
       // Assume that it's a genuine full name if it includes a space.
       if (userInfo.fullname.includes(" ")) {
         this._realname = userInfo.fullname;
       }
     }
     e("realname").value = this._realname;
     this._password = "";
+    this._showPassword = false;
     this._exchangeUsername = ""; // only for Exchange AutoDiscover and only if needed
     this._okCallback = null;
 
     if (window.arguments && window.arguments[0]) {
       if (window.arguments[0].msgWindow) {
         this._parentMsgWindow = window.arguments[0].msgWindow;
       }
       if (window.arguments[0].okCallback) {
@@ -209,21 +210,16 @@ EmailConfigWizard.prototype = {
         "authPasswordEncrypted");
     setLabelFromStringBundle("out-authMethod-kerberos", "authKerberos");
     setLabelFromStringBundle("out-authMethod-ntlm", "authNTLM");
     setLabelFromStringBundle("out-authMethod-oauth2", "authOAuth2");
 
     e("incoming_port").value = gStringsBundle.getString("port_auto");
     this.fillPortDropdown("smtp");
 
-    // If the account provisioner is preffed off, don't display
-    // the account provisioner button.
-    if (!Services.prefs.getBoolPref("mail.provider.enabled"))
-      _hide("provisioner_button");
-
     let menulist = e("outgoing_hostname");
     // Add the entry for the new host to the menulist
     let menuitem = menulist.appendItem("", "-new-"); // label,value
     menuitem.serverKey = null;
 
     // Populate SMTP server dropdown with already configured SMTP servers from
     // other accounts.
     let smtpServers = MailServices.smtp.servers;
@@ -246,26 +242,23 @@ EmailConfigWizard.prototype = {
       rememberPasswordE.disabled = true;
     }
 
     // First, unhide the main window areas, and store the width,
     // so that we don't resize wildly when we unhide areas.
     // switchToMode() will then hide the unneeded parts again.
     // We will add some leeway of 10px, in case some of the <description>s wrap,
     // e.g. outgoing username != incoming username.
-    _show("status_area");
+    _show("status-area");
     _show("result_area");
     _hide("manual-edit_area");
-    window.sizeToContent();
-    e("mastervbox").setAttribute("style",
-        "min-width: " + document.documentElement.clientWidth + "px; " +
-        "min-height: " + (document.documentElement.clientHeight + 10) + "px;");
 
     this.switchToMode("start");
     e("realname").select();
+    window.sizeToContent();
   },
 
   /**
    * Changes the window configuration to the different modes we have.
    * Shows/hides various window parts and buttons.
    * @param modename {String-enum}
    *    "start" : Just the realname, email address, password fields
    *    "find-config" : detection step, adds the progress message/spinner
@@ -280,136 +273,118 @@ EmailConfigWizard.prototype = {
    *    "manual-edit-testing" : User pressed the [Re-test] button and
    *         we're currently detecting the "Auto" values
    *    "manual-edit-complete" : user entered (or we tested) all necessary
    *         values, and we're ready to create to account
    * Currently, this doesn't cover the warning dialogs etc.. It may later.
    */
   switchToMode(modename) {
     if (modename == this._currentModename) {
+      window.sizeToContent();
       return;
     }
     this._currentModename = modename;
     gEmailWizardLogger.info("switching to UI mode " + modename);
 
     // _show("initialSettings"); always visible
     // _show("cancel_button"); always visible
     if (modename == "start") {
-      _hide("status_area");
+      _hide("status-area");
       _hide("result_area");
       _hide("manual-edit_area");
 
       _show("next_button");
       _disable("next_button"); // will be enabled by code
       _hide("half-manual-test_button");
       _hide("create_button");
       _hide("stop_button");
       _hide("manual-edit_button");
-      _hide("advanced-setup_button");
     } else if (modename == "find-config") {
-      _show("status_area");
+      _show("status-area");
       _hide("result_area");
       _hide("manual-edit_area");
 
       _show("next_button");
       _disable("next_button");
       _hide("half-manual-test_button");
       _hide("create_button");
       _show("stop_button");
       this.onStop = this.onStopFindConfig;
-      _show("manual-edit_button");
-      _hide("provisioner_button");
-      _hide("advanced-setup_button");
+      _hide("manual-edit_button");
     } else if (modename == "result") {
-      _show("status_area");
+      _show("status-area");
       _show("result_area");
       _hide("manual-edit_area");
 
       _hide("next_button");
       _hide("half-manual-test_button");
       _show("create_button");
       _enable("create_button");
       _hide("stop_button");
       _show("manual-edit_button");
-      _hide("provisioner_button");
-      _hide("advanced-setup_button");
     } else if (modename == "manual-edit") {
-      _show("status_area");
+      _show("status-area");
       _hide("result_area");
       _show("manual-edit_area");
 
       _hide("next_button");
       _show("half-manual-test_button");
       _disable("half-manual-test_button");
       _show("create_button");
       _disable("create_button");
       _hide("stop_button");
       _hide("manual-edit_button");
-      _hide("provisioner_button");
-      _show("advanced-setup_button");
-      _disable("advanced-setup_button");
     } else if (modename == "manual-edit-have-hostname") {
-      _show("status_area");
+      _show("status-area");
       _hide("result_area");
       _show("manual-edit_area");
       _hide("manual-edit_button");
       _hide("next_button");
       _show("create_button");
 
       _show("half-manual-test_button");
       _enable("half-manual-test_button");
       _disable("create_button");
       _hide("stop_button");
-      _show("advanced-setup_button");
-      _disable("advanced-setup_button");
     } else if (modename == "manual-edit-testing") {
-      _show("status_area");
+      _show("status-area");
       _hide("result_area");
       _show("manual-edit_area");
       _hide("manual-edit_button");
       _hide("next_button");
       _show("create_button");
 
       _show("half-manual-test_button");
       _disable("half-manual-test_button");
       _disable("create_button");
       _show("stop_button");
       this.onStop = this.onStopHalfManualTesting;
-      _hide("provisioner_button");
-      _show("advanced-setup_button");
-      _disable("advanced-setup_button");
     } else if (modename == "manual-edit-complete") {
-      _show("status_area");
+      _show("status-area");
       _hide("result_area");
       _show("manual-edit_area");
       _hide("manual-edit_button");
       _hide("next_button");
       _show("create_button");
 
       _show("half-manual-test_button");
       _enable("half-manual-test_button");
       _enable("create_button");
       _hide("stop_button");
-      _hide("provisioner_button");
-      _show("advanced-setup_button");
-      _enable("advanced-setup_button");
     } else {
       throw new NotReached("unknown mode");
     }
     // If we're offline, we're going to disable the create button, but enable
     // the advanced config button if we have a current config.
     if (Services.io.offline) {
       if (this._currentConfig != null) {
-        _show("advanced-setup_button");
-        _enable("advanced-setup_button");
         _hide("half-manual-test_button");
         _hide("create_button");
         _hide("manual-edit_button");
       }
-      _hide("provisioner_button");
     }
     window.sizeToContent();
   },
 
   /**
    * Start from beginning with possibly new email address.
    */
   onStartOver() {
@@ -483,66 +458,65 @@ EmailConfigWizard.prototype = {
   /**
    * This does very little other than to check that a name was entered at all
    * Since this is such an insignificant test we should be using a very light
    * or even jovial warning.
    */
   onBlurRealname() {
     let realnameEl = e("realname");
     if (this._realname) {
-      this.clearError("nameerror");
-      _show("nametext");
+      this.clearError("realname");
       realnameEl.removeAttribute("error");
     // bug 638790: don't show realname error until user enter an email address
     } else if (this.validateEmailMinimally(this._email)) {
-      _hide("nametext");
-      this.setError("nameerror", "please_enter_name");
+      this.setError("realname", "please_enter_name");
       realnameEl.setAttribute("error", "true");
     }
   },
 
   /**
    * This check is only done as an informative warning.
    * We don't want to block the person, if they've entered an email address
    * that doesn't conform to our regex.
    */
   onBlurEmail() {
     if (!this._email) {
+      this.clearError("email");
+      e("email").removeAttribute("error");
       return;
     }
-    var emailEl = e("email");
+
+    let emailEl = e("email");
     if (this.validateEmail(this._email)) {
-      this.clearError("emailerror");
+      this.clearError("email");
       emailEl.removeAttribute("error");
       this.onBlurRealname();
     } else {
-      this.setError("emailerror", "double_check_email");
+      this.setError("email", "double_check_email");
       emailEl.setAttribute("error", "true");
     }
   },
 
-  /**
-   * If the user just tabbed through the password input without entering
-   * anything, set the type back to text so we don't wind up showing the
-   * emptytext as bullet characters.
-   */
-  onBlurPassword() {
+  passwordToggle() {
     if (!this._password) {
+      return;
+    }
+
+    if (e("password").type == "password") {
+      this._showPassword = true;
       e("password").type = "text";
+      e("passwordInfo").classList.add("icon-visible");
+    } else {
+      this._showPassword = false;
+      e("password").type = "password";
+      e("passwordInfo").classList.remove("icon-visible");
     }
   },
 
   /**
-   * @see onBlurPassword()
-   */
-  onFocusPassword() {
-    e("password").type = "password";
-  },
-
-  /**
    * Check whether the user entered the minimum of information
    * needed to leave the "start" mode (entering of name, email, pw)
    * and is allowed to proceed to detection step.
    */
   checkStartDone() {
     if (this.validateEmailMinimally(this._email) &&
         this._realname) {
       this._domain = this._email.split("@")[1].toLowerCase();
@@ -735,37 +709,48 @@ EmailConfigWizard.prototype = {
     this._onStopCommon();
     this.validateManualEditComplete();
   },
 
   // -----------
   // Status area
 
   startSpinner(actionStrName) {
-    e("status_area").setAttribute("status", "loading");
+    e("status-area").setAttribute("status", "loading");
     gEmailWizardLogger.warn("spinner start " + actionStrName);
     this._showStatusTitle(actionStrName);
   },
 
   stopSpinner(actionStrName) {
-    e("status_area").setAttribute("status", "result");
+    if (!actionStrName) {
+      e("status-area").removeAttribute("status");
+      this._showStatusTitle("");
+      _hide("stop_button");
+      gEmailWizardLogger.warn("all spinner stop");
+      window.sizeToContent();
+      return;
+    }
+
+    e("status-area").setAttribute("status", "result");
+
+    this._showStatusTitle(actionStrName);
     _hide("stop_button");
-    this._showStatusTitle(actionStrName);
     gEmailWizardLogger.warn("all spinner stop " + actionStrName);
+    window.sizeToContent();
   },
 
   showErrorStatus(actionStrName) {
-    e("status_area").setAttribute("status", "error");
+    e("status-area").setAttribute("status", "error");
     gEmailWizardLogger.warn("status error " + actionStrName);
     this._showStatusTitle(actionStrName);
   },
 
   showErrorMsg(errorMsg) {
     gEmailWizardLogger.warn("error " + errorMsg);
-    e("status_area").setAttribute("status", "error");
+    e("status-area").setAttribute("status", "error");
     e("status_msg").textContent = errorMsg;
   },
 
   _showStatusTitle(msgName) {
     let msg = " "; // assure height. Do via min-height in CSS, for 2 lines?
     try {
       if (msgName) {
         msg = gStringsBundle.getFormattedString(msgName, [gBrandShortName]);
@@ -778,25 +763,25 @@ EmailConfigWizard.prototype = {
     e("status_msg").textContent = msg;
     gEmailWizardLogger.info("status msg: " + msg);
   },
 
   // UI to show status updates in parallel
 
   addStatusLine(msgID, call) {
     _show("status-lines");
-    var statusLine = document.createXULElement("hbox");
+    let statusLine = document.createXULElement("hbox");
+    statusLine.setAttribute("align", "center");
     e("status-lines").appendChild(statusLine);
     statusLine.classList.add("status-line");
     var statusDescr = document.createXULElement("description");
-    statusDescr.classList.add("status_msg");
+    statusDescr.classList.add("status-msg");
     statusLine.appendChild(statusDescr);
-    var statusImg = document.createXULElement("vbox");
+    var statusImg = document.createXULElement("image");
     statusImg.classList.add("status-img");
-    statusImg.setAttribute("pack", "start");
     statusLine.appendChild(statusImg);
     let msg = msgID;
     try {
       msg = gStringsBundle.getFormattedString(msgID, [gBrandShortName]);
     } catch (e) {
       console.error(e);
     }
     statusDescr.textContent = msg;
@@ -881,51 +866,52 @@ EmailConfigWizard.prototype = {
           _hide("result_addon_intro");
           _hide("result_addon_install");
           _enable("create_button");
           this.onCreate = () => { // TODO
             this._currentConfig.incoming.type = installedAddon.useType.addonAccountType;
             this.validateAndFinish();
           };
         } else {
-          _hide("status_area");
+          _hide("status-area");
           _show("result_addon_intro");
           var msg = gStringsBundle.getString("addon-intro");
           if (!config.incomingAlternatives.find(alt => (alt.type == "imap" || alt.type == "pop3"))) {
             msg = gStringsBundle.getString("no-open-protocols") + " " + msg;
           }
           setText("result_addon_intro", msg);
 
           let containerE = e("result_addon_install_rows");
           for (let addon of config.addons) {
             // Creates
-            // <row>
+            // <hbox flex="1">
             //   <image src="https://live.thunderbird.net/owl32.png" />
             //   <label is="text-link" href="https://live.thunderbird.net/owl">
             //     A third party addon that ...
             //   </label>
-            //   <button
-            //     class="larger-button"
-            //     orient="vertical" crop="right"
-            //     label="Install"
-            //     oncommand="…" />
-            // </row>
-            let addonE = document.createXULElement("row");
+            //   <button class="larger-button"
+            //           orient="vertical" crop="right"
+            //           label="Install"
+            //           oncommand="…" />
+            // </hbox>
+            let addonE = document.createXULElement("hbox");
             let iconE = document.createXULElement("image");
             let descrE = document.createXULElement("label", {is: "text-link"}); // must be <label> to be clickable
             let buttonE = document.createXULElement("button");
             addonE.appendChild(iconE);
             addonE.appendChild(descrE);
             addonE.appendChild(buttonE);
             containerE.appendChild(addonE);
+            addonE.setAttribute("flex", "1");
             addonE.setAttribute("align", "center");
             iconE.classList.add("icon");
             if (addon.icon32) {
               iconE.setAttribute("src", addon.icon32);
             }
+            descrE.setAttribute("flex", "1");
             descrE.setAttribute("href", addon.websiteURL);
             descrE.textContent = addon.description;
             buttonE.classList.add("larger-button");
             buttonE.setAttribute("orient", "vertical");
             buttonE.setAttribute("crop", "right");
             buttonE.setAttribute("label", gStringsBundle.getString("addonInstallShortLabel"));
             buttonE.setAttribute("oncommand", "gEmailConfigWizard.addonInstall(this.addon);");
             buttonE.addon = addon;
@@ -937,52 +923,69 @@ EmailConfigWizard.prototype = {
         window.sizeToContent();
       })();
       return;
     }
 
     _show("result_hostnames");
     _hide("result_exchange");
     _enable("create_button");
+    window.sizeToContent();
 
     var unknownString = gStringsBundle.getString("resultUnknown");
 
     function _makeHostDisplayString(server, descrE) {
       let type = gStringsBundle.getString(sanitize.translate(server.type,
-          { imap: "resultIMAP", pop3: "resultPOP3", smtp: "resultSMTP", exchange: "resultExchange" }),
-          unknownString);
+        { imap: "resultIMAP", pop3: "resultPOP3", smtp: "resultSMTP", exchange: "resultExchange" }),
+        unknownString);
       let domain = Services.eTLD.getBaseDomainFromHost(server.hostname);
       let host = server.hostname.substr(0, server.hostname.length - domain.length);
       let port = (isStandardPort(server.port) ? "" : ":" + server.port);
       let ssl = gStringsBundle.getString(sanitize.translate(server.socketType,
           { 1: "resultNoEncryption", 2: "resultSSL", 3: "resultSTARTTLS" }),
           unknownString);
       let certStatus = gStringsBundle.getString(server.badCert ?
           "resultSSLCertWeak" : "resultSSLCertOK");
       // TODO: we should really also display authentication method here.
 
       function _addComponent(text, className) {
         let textE = document.createXULElement("label");
         textE.classList.add(className);
         textE.textContent = text;
         descrE.appendChild(textE);
       }
+
+      function _addCertStatus(text, className) {
+        let textE = document.createXULElement("label");
+        textE.classList.add(className);
+        textE.textContent = text;
+        descrE.parentNode.appendChild(textE);
+      }
+
+      function _removeCertStatus() {
+        let el = descrE.parentNode.querySelector(".certStatus");
+        if (el != null) {
+          el.remove();
+        }
+      }
+
       removeChildNodes(descrE);
+      _removeCertStatus();
       _addComponent(type, "protocolType");
       _addComponent(host, "host-without-domain");
       _addComponent(domain, "domain");
       _addComponent(port, "port");
       _addComponent(ssl, "ssl");
-      _addComponent(certStatus, "certStatus");
+      _addCertStatus(certStatus, "certStatus");
 
       if (server.socketType != 2 && server.socketType != 3) { // not SSL/STARTTLS
         descrE.querySelector(".ssl").classList.add("insecure");
       }
       if (server.badCert) {
-        descrE.querySelector(".certStatus").classList.add("insecure");
+        descrE.parentNode.querySelector(".certStatus").classList.add("insecure");
       }
     }
 
     if (configFilledIn.incoming.hostname) {
       _makeHostDisplayString(configFilledIn.incoming, e("result-incoming"));
     }
 
     if (!config.outgoing.existingServerKey) {
@@ -1036,17 +1039,17 @@ EmailConfigWizard.prototype = {
    * Called when user clicks [Install] button.
    *
    * @param {AddonInfo} addon - @see AccountConfig.addons
    */
   async addonInstall(addon) {
     _hide("result_addon_install");
     _hide("result_addon_intro");
     _disable("create_button");
-    _show("status_area");
+    _show("status-area");
     this.startSpinner("addonInstallStarted");
 
     try {
       var installer = this._abortable = new AddonInstaller(addon);
       await installer.install();
 
       this._abortable = null;
       this.stopSpinner("addonInstallSuccess");
@@ -1422,18 +1425,17 @@ EmailConfigWizard.prototype = {
     this.adjustOutgoingPortToSSLAndProtocol(this.getUserConfig());
     this.onChangedManualEdit();
   },
   onChangedInAuth() {
     this.onChangedManualEdit();
   },
   onChangedOutAuth(aSelectedAuth) {
     if (aSelectedAuth) {
-      e("outgoing_label").hidden = e("outgoing_username").hidden =
-                                   (aSelectedAuth.id == "out-authMethod-no");
+      e("outgoing_username").disabled = (aSelectedAuth.id == "out-authMethod-no");
     }
     this.onChangedManualEdit();
   },
   onInputInUsername() {
     if (this.sameInOutUsernames)
       e("outgoing_username").value = e("incoming_username").value;
     this.onChangedManualEdit();
   },
@@ -1461,26 +1463,26 @@ EmailConfigWizard.prototype = {
    * This changes only the UI. The values are read in getUserConfig().
    */
   onChangedOutgoingDropdown() {
     var menulist = e("outgoing_hostname");
     var menuitem = menulist.selectedItem;
     if (menuitem && menuitem.serverKey) {
       // an existing server has been selected from the dropdown
       menulist.editable = false;
-      _hide("outgoing_port");
-      _hide("outgoing_ssl");
-      _hide("outgoing_authMethod");
+      _disable("outgoing_port");
+      _disable("outgoing_ssl");
+      _disable("outgoing_authMethod");
       this.onChangedManualEdit();
     } else {
       // new server, with hostname, port etc.
       menulist.editable = true;
-      _show("outgoing_port");
-      _show("outgoing_ssl");
-      _show("outgoing_authMethod");
+      _enable("outgoing_port");
+      _enable("outgoing_ssl");
+      _enable("outgoing_authMethod");
     }
 
     this.onChangedManualEdit();
   },
 
   onChangedManualEdit() {
     if (this._abortable) {
       this.onStop();
@@ -1546,16 +1548,22 @@ EmailConfigWizard.prototype = {
     let configFilledIn = this.getConcreteConfig();
 
     if (checkIncomingServerAlreadyExists(configFilledIn)) {
       alertPrompt(gStringsBundle.getString("error_creating_account"),
                   gStringsBundle.getString("incoming_server_exists"));
       return;
     }
 
+    if (!Services.prompt.confirm(null,
+      gStringsBundle.getString("confirmAdvancedConfigTitle"),
+      gStringsBundle.getString("confirmAdvancedConfigText"))) {
+      return;
+    }
+
     gEmailWizardLogger.info("creating account in backend");
     let newAccount = createAccountInBackend(configFilledIn);
 
     let existingAccountManager = Services.wm
         .getMostRecentWindow("mailnews:accountmanager");
     if (existingAccountManager) {
       existingAccountManager.focus();
     } else {
@@ -1616,28 +1624,27 @@ EmailConfigWizard.prototype = {
     assert(emailsplit.length > 1);
     var emaillocal = sanitize.nonemptystring(emailsplit[0]);
     initialConfig.incoming.username = emaillocal;
     initialConfig.outgoing.username = emaillocal;
     return initialConfig;
   },
 
   clearError(which) {
-    _hide(which);
-    _hide(which + "icon");
-    e(which).textContent = "";
+    _hide(`${which}Warning`);
+    _show(`${which}Info`);
   },
 
   setError(which, msg_name) {
     try {
-      _show(which);
-      _show(which + "icon");
-      e(which).textContent = gStringsBundle.getString(msg_name);
-      window.sizeToContent();
-    } catch (ex) { alertPrompt("missing error string", msg_name); }
+      _hide(`${which}Info`);
+      _show(`${which}Warning`);
+    } catch (ex) {
+      alertPrompt("missing error string", msg_name);
+    }
   },
 
   // -------------------------------
   // Finish & dialog close functions
 
   onKeyDown(event) {
     let key = event.keyCode;
     if (key == 27) { // Escape key
@@ -1717,17 +1724,16 @@ EmailConfigWizard.prototype = {
       }
     }
 
     // TODO use a UI mode (switchToMode()) for verification, too.
     // But we need to go back to the previous mode, because we might be in
     // "result" or "manual-edit-complete" mode.
     _disable("create_button");
     _disable("half-manual-test_button");
-    _disable("advanced-setup_button");
     // no stop button: backend has no ability to stop :-(
     var self = this;
     this.startSpinner("checking_password");
     // logic function defined in verifyConfig.js
     verifyConfig(
       configFilledIn,
       // guess login config?
       configFilledIn.source != AccountConfig.kSourceXML,
@@ -1761,17 +1767,16 @@ EmailConfigWizard.prototype = {
         self.showErrorMsg(e.message || e.toString());
 
         window.sizeToContent();
         // TODO use switchToMode(), see above
         // give user something to proceed after fixing
         _enable("create_button");
         // hidden in non-manual mode, so it's fine to enable
         _enable("half-manual-test_button");
-        _enable("advanced-setup_button");
       });
   },
 
   finish(concreteConfig) {
     gEmailWizardLogger.info("creating account in backend");
     var account = createAccountInBackend(concreteConfig);
 
     // Trigger first login, to get folder structure, show account, etc..
@@ -1975,16 +1980,18 @@ SecurityWarningDialog.prototype = {
     let tech = e(id + "_technical");
     if (details.getAttribute("collapsed")) {
       details.removeAttribute("collapsed");
       tech.setAttribute("expanded", true);
     } else {
       details.setAttribute("collapsed", true);
       tech.removeAttribute("expanded");
     }
+
+    window.sizeToContent();
   },
 
   /**
    * user checked checkbox that he understood it and wishes
    * to ignore the warning.
    */
   toggleAcknowledge() {
     if (e("acknowledge_warning").checked) {
--- a/mail/components/accountcreation/content/emailWizard.xul
+++ b/mail/components/accountcreation/content/emailWizard.xul
@@ -1,28 +1,30 @@
 <?xml version="1.0"?>
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://messenger/skin/menulist.css" type="text/css"?>
 <?xml-stylesheet href="chrome://messenger/skin/accountCreation.css" type="text/css"?>
+<?xml-stylesheet href="chrome://messenger/skin/creationDialog.css" type="text/css"?>
 
 <!DOCTYPE window [
   <!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd">
   %brandDTD;
   <!ENTITY % acDTD SYSTEM "chrome://messenger/locale/accountCreation.dtd">
   %acDTD;
 ]>
 
-<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
         id="autoconfigWizard"
         windowtype="mail:autoconfig"
-        title="&autoconfigWizard2.title;"
+        title="&emailWizard.title;"
         onload="gEmailConfigWizard.onLoad();"
         onkeypress="gEmailConfigWizard.onKeyDown(event);"
         onclose="gEmailConfigWizard.onWizardShutdown();"
         onunload="gEmailConfigWizard.onWizardShutdown();">
 
   <stringbundleset>
     <stringbundle id="bundle_brand"
           src="chrome://branding/locale/brand.properties"/>
@@ -47,516 +49,509 @@
   <script src="chrome://messenger/content/accountcreation/MyBadCertHandler.js"/>
   <script src="chrome://messenger/content/accountUtils.js" />
   <script src="chrome://messenger/content/customElements.js"/>
 
   <keyset id="mailKeys">
     <key keycode="VK_ESCAPE" oncommand="window.close();"/>
   </keyset>
 
-  <panel id="insecureserver-cleartext-panel" class="popup-panel">
-    <hbox>
-      <image class="insecureLarry"/>
-      <vbox flex="1">
-        <description class="title">&insecureServer.tooltip.title;</description>
-        <description class="details">
-                                &insecureUnencrypted.description;</description>
-      </vbox>
-    </hbox>
-  </panel>
-  <panel id="insecureserver-selfsigned-panel" class="popup-panel">
-    <hbox>
-      <image class="insecureLarry"/>
-      <vbox flex="1">
-        <description class="title">&insecureServer.tooltip.title;</description>
-        <description class="details">
-                                 &insecureSelfSigned.description;</description>
-      </vbox>
-    </hbox>
-  </panel>
-  <panel id="secureserver-panel" class="popup-panel">
-    <hbox>
-      <image class="secureLarry"/>
-      <vbox flex="1">
-        <description class="title">&secureServer.description;</description>
-      </vbox>
-    </hbox>
-  </panel>
+  <vbox id="mainContainer" class="hub-container" flex="1">
 
-  <tooltip id="insecureserver-cleartext">
-    <hbox>
-      <image class="insecureLarry"/>
-      <vbox>
-        <description class="title">&insecureServer.tooltip.title;</description>
-        <description class="details">
-                                 &insecureServer.tooltip.details;</description>
-      </vbox>
-    </hbox>
-  </tooltip>
-  <tooltip id="insecureserver-selfsigned">
-    <hbox>
-      <image class="insecureLarry"/>
-      <vbox>
-        <description class="title">&insecureServer.tooltip.title;</description>
-        <description class="details">
-                                 &insecureServer.tooltip.details;</description>
-      </vbox>
-    </hbox>
-  </tooltip>
-  <tooltip id="secureservertooltip">
-    <hbox>
-      <image class="secureLarry"/>
-      <description class="title">&secureServer.description;</description>
-    </hbox>
-  </tooltip>
-  <tooltip id="optional-password">
-    <description>&password.text;</description>
-  </tooltip>
-
-  <spacer id="fullwidth"/>
-
-  <vbox id="mastervbox" class="mastervbox" flex="1">
-    <hbox>
-      <hbox class="align-end label-box" align="center">
-        <label accesskey="&name.accesskey;"
-               class="autoconfigLabel"
-               value="&name.label;"
-               control="realname"/>
+    <panel id="insecureserver-cleartext-panel" class="popup-panel">
+      <hbox>
+        <image class="insecureLarry"/>
+        <vbox flex="1">
+          <description class="title">&insecureServer.tooltip.title;</description>
+          <description class="details">
+            &insecureUnencrypted.description;
+          </description>
+        </vbox>
       </hbox>
-      <hbox class="textbox-box">
-        <textbox id="realname"
-                 class="padded"
-                 placeholder="&name.placeholder;"
-                 oninput="gEmailConfigWizard.onInputRealname();"
-                 onblur="gEmailConfigWizard.onBlurRealname();"/>
-      </hbox>
-      <hbox align="center" flex="1">
-        <description id="nametext" class="initialDesc">&name.text;</description>
-        <image id="nameerroricon"
-                hidden="true"
-                class="warningicon"/>
-        <description id="nameerror" class="errordescription" hidden="true"/>
-      </hbox>
-    </hbox>
-    <hbox>
-      <hbox class="align-end label-box" align="center">
-        <label accesskey="&email.accesskey;"
-                class="autoconfigLabel"
-                value="&email.label;"
-                control="email"/>
-      </hbox>
-      <hbox class="textbox-box">
-        <textbox id="email"
-                  class="padded uri-element"
-                  placeholder="&email2.placeholder;"
-                  oninput="gEmailConfigWizard.onInputEmail();"
-                  onblur="gEmailConfigWizard.onBlurEmail();"/>
+    </panel>
+    <panel id="insecureserver-selfsigned-panel" class="popup-panel">
+      <hbox>
+        <image class="insecureLarry"/>
+        <vbox flex="1">
+          <description class="title">&insecureServer.tooltip.title;</description>
+          <description class="details">
+            &insecureSelfSigned.description;
+          </description>
+        </vbox>
       </hbox>
-      <hbox align="center" flex="1">
-        <description id="emailtext" class="initialDesc">&email.text;</description>
-        <image id="emailerroricon"
-                hidden="true"
-                class="warningicon"/>
-        <description id="emailerror" class="errordescription" hidden="true"/>
-      </hbox>
-    </hbox>
-    <hbox>
-        <!-- this starts out as text so the emptytext shows, but then
-              changes to type=password once it's not empty -->
-      <hbox class="align-end label-box" align="center">
-        <label accesskey="&password.accesskey;"
-                class="autoconfigLabel"
-                value="&password.label;"
-                control="password"
-                tooltip="optional-password"/>
-      </hbox>
-      <hbox class="textbox-box">
-        <textbox id="password"
-                  class="padded"
-                  placeholder="&password.placeholder;"
-                  type="text"
-                  oninput="gEmailConfigWizard.onInputPassword();"
-                  onfocus="gEmailConfigWizard.onFocusPassword();"
-                  onblur="gEmailConfigWizard.onBlurPassword();"/>
-      </hbox>
-      <hbox align="center" flex="1">
-        <image id="passworderroricon"
-                hidden="true"
-                class="warningicon"/>
-        <description id="passworderror" class="errordescription" hidden="true"/>
-      </hbox>
-    </hbox>
-    <hbox>
-      <hbox class="align-end label-box" align="center">
-        <label class="autoconfigLabel"/>
-      </hbox>
-      <hbox align="center">
-        <checkbox id="remember_password"
-                  label="&rememberPassword.label;"
-                  accesskey="&rememberPassword.accesskey;"
-                  checked="true"/>
+    </panel>
+    <panel id="secureserver-panel" class="popup-panel">
+      <hbox>
+        <image class="secureLarry"/>
+        <vbox flex="1">
+          <description class="title">&secureServer.description;</description>
+        </vbox>
       </hbox>
-    </hbox>
-    <hbox id="usernameRow" hidden="true">
-      <!-- This is used only used for Exchange AutoDiscover, and even then
-           only when absolutely necessary and known to be needed. -->
-      <hbox class="align-end label-box" align="center">
-        <label accesskey="&usernameEx.accesskey;"
-                class="autoconfigLabel"
-                value="&usernameEx.label;"
-                control="usernameEx"/>
-      </hbox>
-      <hbox class="textbox-box">
-        <textbox id="usernameEx"
-                  class="padded"
-                  placeholder="&usernameEx.placeholder;"
-                  oninput="gEmailConfigWizard.onInputUsername();" />
-      </hbox>
-      <hbox align="center" flex="1">
-        <description id="usernametextEx" class="initialDesc">&usernameEx.text;</description>
-      </hbox>
-    </hbox>
-    <spacer flex="1" />
+    </panel>
 
-    <hbox id="status_area" flex="1">
-      <vbox id="status_img_before" pack="start"/>
-      <description id="status_msg">&#160;</description>
-              <!-- Include 160 = nbsp, to make the element occupy the
-                   full height, for at least one line. With a normal space,
-                   it does not have sufficient height. -->
-      <vbox id="status_img_after" pack="start"/>
-    </hbox>
-    <vbox id="status-lines"/>
-
-    <groupbox id="result_area" hidden="true">
-      <radiogroup id="result_servertype" orient="horizontal">
-        <radio id="result_select_imap" label="&imapLong.label;" value="imap"
-               oncommand="gEmailConfigWizard.onResultServerTypeChanged();"/>
-        <radio id="result_select_pop3" label="&pop3Long.label;" value="pop3"
-               oncommand="gEmailConfigWizard.onResultServerTypeChanged();"/>
-        <radio id="result_select_exchange" label="&exchange.label;" value="exchange"
-               oncommand="gEmailConfigWizard.onResultServerTypeChanged();"/>
-      </radiogroup>
-      <hbox id="result_hostnames">
+    <tooltip id="insecureserver-cleartext">
+      <hbox>
+        <image class="insecureLarry"/>
         <vbox>
-          <label class="textbox-label" value="&incoming.label;"
-                  control="result-incoming"/>
-          <label class="textbox-label" value="&outgoing.label;"
-                  control="result-outgoing"/>
-          <label class="textbox-label" value="&username.label;"
-                  control="result-username"/>
+          <description class="title">&insecureServer.tooltip.title;</description>
+          <description class="details">
+            &insecureServer.tooltip.details;
+          </description>
         </vbox>
-        <vbox flex="1">
-          <textbox id="result-incoming"
-                   class="result-host-info"
-                   disabled="true"/>
-          <textbox id="result-outgoing"
-                   class="result-host-info"
-                   disabled="true"/>
-          <textbox id="result-username"
-                   disabled="true"/>
+      </hbox>
+    </tooltip>
+    <tooltip id="insecureserver-selfsigned">
+      <hbox>
+        <image class="insecureLarry"/>
+        <vbox>
+          <description class="title">&insecureServer.tooltip.title;</description>
+          <description class="details">
+            &insecureServer.tooltip.details;
+          </description>
         </vbox>
       </hbox>
-      <vbox id="result_exchange" hidden="true">
-        <hbox id="result_exchange_hostname_container" align="center">
-          <label class="textbox-label" value="&exchange-hostname.label;"
-                 control="result_exchange_hostname"/>
-          <textbox id="result_exchange_hostname" class="result-host-info" disabled="true" flex="1"/>
-        </hbox>
-        <description id="result_addon_intro"/>
-        <grid id="result_addon_install">
-          <columns>
-            <column id="result_addon_install_column_icon" pack="start" align="center" />
-            <column id="result_addon_install_column_link" pack="start" align="center" />
-            <column id="result_addon_install_column_button" pack="start" align="center" />
-          </columns>
-          <rows id="result_addon_install_rows">
-          </rows>
-        </grid>
+    </tooltip>
+    <tooltip id="secureservertooltip">
+      <hbox>
+        <image class="secureLarry"/>
+        <description class="title">&secureServer.description;</description>
+      </hbox>
+    </tooltip>
+
+    <tooltip id="optional-password">
+      <description>&password.text;</description>
+    </tooltip>
+
+    <vbox id="mastervbox" flex="1">
+      <vbox align="center" class="hub-header">
+        <title class="hub-subtitle">&emailWizard.title;</title>
+        <description>&emailWizard.caption;</description>
       </vbox>
-    </groupbox>
+
+      <vbox class="hub-wrapper" flex="1">
+        <form id="form" orient="vertical">
+          <hbox class="form-control" align="center">
+            <label accesskey="&name.accesskey;"
+                  class="autoconfigLabel label-box"
+                  value="&name.label;"
+                  control="realname"/>
+            <hbox class="input-control" align="center" flex="1">
+              <html:input id="realname"
+                          type="text"
+                          class="hub-field"
+                          placeholder="&fullname.placeholder;"
+                          oninput="gEmailConfigWizard.onInputRealname();"
+                          onblur="gEmailConfigWizard.onBlurRealname();"/>
+            </hbox>
+            <image id="realnameInfo"
+                   class="form-icon icon-info"
+                   tooltiptext="&name.text;"/>
+            <image id="realnameWarning"
+                   class="form-icon icon-warning"
+                   tooltiptext="&name.error;"
+                   hidden="true"/>
+          </hbox>
+
+          <hbox class="form-control" align="center">
+            <label accesskey="&email.accesskey;"
+                  class="autoconfigLabel label-box"
+                  value="&email.label;"
+                  control="email"/>
+            <hbox class="input-control" align="center" flex="1">
+              <html:input id="email"
+                          type="email"
+                          class="hub-field uri-element"
+                          placeholder="&email3.placeholder;"
+                          oninput="gEmailConfigWizard.onInputEmail();"
+                          onblur="gEmailConfigWizard.onBlurEmail();"/>
+            </hbox>
+            <image id="emailInfo"
+                   class="form-icon icon-info"
+                   tooltiptext="&email.text;"/>
+            <image id="emailWarning"
+                  class="form-icon icon-warning"
+                  tooltiptext="&email.error;"
+                  hidden="true"/>
+          </hbox>
+
+          <hbox class="form-control" align="center">
+            <!-- this starts out as text so the emptytext shows, but then
+                changes to type=password once it's not empty -->
+            <label accesskey="&password.accesskey;"
+                   class="autoconfigLabel label-box"
+                   value="&password.label;"
+                   control="password"
+                   tooltip="optional-password"/>
+            <hbox class="input-control" align="center" flex="1">
+              <html:input id="password"
+                          type="password"
+                          flex="1"
+                          class="hub-field"
+                          placeholder="&password.placeholder;"
+                          oninput="gEmailConfigWizard.onInputPassword();"/>
+            </hbox>
+            <image id="passwordInfo"
+                   class="form-icon icon-hidden"
+                   tooltiptext="&password.toggle;"
+                   onclick="gEmailConfigWizard.passwordToggle();"/>
+          </hbox>
+
+          <hbox class="form-control" align="center">
+            <label class="autoconfigLabel label-box"/>
+            <checkbox id="remember_password"
+                      label="&rememberPassword.label;"
+                      accesskey="&rememberPassword.accesskey;"
+                      checked="true"/>
+          </hbox>
 
-    <groupbox id="manual-edit_area" hidden="true">
-      <html:table>
-        <html:tr id="labels_row" align="center">
-          <html:td>
-            <spacer/>
-          </html:td>
-          <html:td>
-            <spacer/>
-          </html:td>
-          <html:td>
-            <label value="&hostname.label;" class="columnHeader"/>
-          </html:td>
-          <html:td>
-            <label value="&port.label;" class="columnHeader"/>
-          </html:td>
-          <html:td>
-            <label value="&ssl.label;" class="columnHeader"/>
-          </html:td>
-          <html:td>
-            <label value="&auth.label;" class="columnHeader"/>
-          </html:td>
-        </html:tr>
-        <html:tr id="incoming_server_area">
-          <html:td class="align-end">
-            <label class="textbox-label"
+          <hbox id="usernameRow" class="form-control" align="center" hidden="true">
+            <!-- This is used only used for Exchange AutoDiscover, and even then
+                only when absolutely necessary and known to be needed. -->
+            <label accesskey="&usernameEx.accesskey;"
+                   class="autoconfigLabel label-box"
+                   value="&usernameEx.label;"
+                   control="usernameEx"/>
+            <hbox class="input-control" align="center" flex="1">
+              <html:input id="usernameEx"
+                          type="text"
+                          class="hub-field"
+                          placeholder="&usernameEx.placeholder;"
+                          oninput="gEmailConfigWizard.onInputUsername();"/>
+            </hbox>
+            <image id="usernameExInfo"
+                   class="form-icon icon-info"
+                   tooltiptext="&usernameEx.text;"/>
+          </hbox>
+
+          <vbox id="status-area" align="center" pack="center">
+            <hbox align="center" pack="center">
+              <image id="statusImgBefore"/>
+              <description id="status_msg" flex="1">&#160;</description>
+                <!-- Include 160 = nbsp, to make the element occupy the
+                    full height, for at least one line. With a normal space,
+                    it does not have sufficient height. -->
+              <image id="statusImgAfter"/>
+            </hbox>
+          </vbox>
+
+          <vbox id="status-lines" flex="1" align="center"/>
+        </form>
+      </vbox><!-- .hub-wrapper -->
+
+      <groupbox id="result_area"
+                class="hub-wrapper config-area"
+                hidden="true"
+                pack="center">
+        <hbox flex="1">
+          <label class="label-result"
+                 value="&protocol.label;"
+                 control="result_servertype"/>
+          <radiogroup id="result_servertype" orient="vertical" flex="1">
+            <radio id="result_select_imap" label="&imapLong.label;" value="imap"
+                   oncommand="gEmailConfigWizard.onResultServerTypeChanged();"/>
+            <radio id="result_select_pop3" label="&pop3Long.label;" value="pop3"
+                   oncommand="gEmailConfigWizard.onResultServerTypeChanged();"/>
+            <radio id="result_select_exchange" label="&exchange.label;" value="exchange"
+                   oncommand="gEmailConfigWizard.onResultServerTypeChanged();"/>
+          </radiogroup>
+        </hbox>
+
+        <vbox id="result_hostnames" flex="1">
+          <hbox flex="1" align="center">
+            <label class="label-result"
                    value="&incoming.label;"
-                   control="incoming_hostname"/>
-          </html:td>
-          <html:td>
+                   control="result-incoming"/>
+            <vbox flex="1">
+              <hbox id="result-incoming"
+                    class="result-host-info"
+                    flex="1"
+                    align="center"/>
+            </vbox>
+          </hbox>
+          <hbox flex="1" align="center">
+            <label class="label-result"
+                   value="&outgoing.label;"
+                   control="result-outgoing"/>
+            <vbox flex="1">
+              <hbox id="result-outgoing"
+                    class="result-host-info"
+                    flex="1"
+                    align="center"/>
+            </vbox>
+          </hbox>
+          <hbox flex="1" align="center">
+            <label class="label-result"
+                   value="&username.label;"
+                   control="result-username"/>
+            <hbox id="result-username"
+                  class="result-host-info"
+                  flex="1"/>
+          </hbox>
+        </vbox>
+
+        <vbox id="result_exchange" flex="1" hidden="true">
+          <hbox id="result_exchange_hostname_container" flex="1" align="center">
+            <label class="label-result"
+                   value="&exchange-hostname.label;"
+                   control="result_exchange_hostname"/>
+            <hbox id="result_exchange_hostname"
+                  class="result-host-info"
+                  flex="1"/>
+          </hbox>
+          <description id="result_addon_intro"/>
+          <hbox id="result_addon_install">
+            <vbox id="result_addon_install_rows" flex="1">
+            </vbox>
+          </hbox>
+        </vbox>
+      </groupbox>
+
+      <groupbox id="manual-edit_area"
+                class="hub-wrapper config-area"
+                hidden="true"
+                pack="center">
+        <vbox flex="1">
+          <hbox class="manual-row" align="baseline" equalsize="always">
+            <label flex="1"/>
+            <label class="column-title" value="&incomingColumn.label;" flex="1"/>
+            <label class="column-title" value="&outgoingColumn.label;" flex="1"/>
+          </hbox>
+          <hbox class="manual-row" align="baseline" equalsize="always">
+            <label value="&protocol.label;" flex="1"/>
             <menulist id="incoming_protocol"
                       oncommand="gEmailConfigWizard.onChangedProtocolIncoming();"
-                      sizetopopup="always">
+                      sizetopopup="always"
+                      flex="1">
               <menupopup>
                 <menuitem label="&imap.label;" value="1"/>
                 <menuitem label="&pop3.label;" value="2"/>
               </menupopup>
             </menulist>
-          </html:td>
-          <html:td>
-            <textbox id="incoming_hostname"
-                     oninput="gEmailConfigWizard.onInputHostname();"
-                     class="host uri-element"/>
-          </html:td>
-          <html:td>
+            <label id="outgoing_protocol"
+                   value="&smtp.label;"
+                   flex="1"/>
+          </hbox>
+          <hbox class="manual-row" align="baseline" equalsize="always">
+            <label value="&serverRow.label;" flex="1"/>
+            <hbox class="input-control" align="center" flex="1" equalsize="never">
+              <html:input id="incoming_hostname"
+                          type="text"
+                          oninput="gEmailConfigWizard.onInputHostname();"
+                          class="host uri-element input-field"/>
+            </hbox>
+            <menulist is="menulist-editable" id="outgoing_hostname"
+                      editable="true"
+                      sizetopopup="none"
+                      oninput="gEmailConfigWizard.onInputHostname();"
+                      oncommand="gEmailConfigWizard.onChangedOutgoingDropdown();"
+                      onpopupshowing="gEmailConfigWizard.onOpenOutgoingDropdown();"
+                      class="host uri-element"
+                      flex="1">
+              <menupopup id="outgoing_hostname_popup"/>
+            </menulist>
+          </hbox>
+          <hbox class="manual-row" align="baseline" equalsize="always">
+            <label value="&portRow.label;" flex="1"/>
             <menulist is="menulist-editable" id="incoming_port"
                       editable="true"
                       oninput="gEmailConfigWizard.onChangedPortIncoming();"
                       oncommand="gEmailConfigWizard.onChangedPortIncoming();"
-                      class="port">
+                      class="port"
+                      flex="1">
               <menupopup/>
             </menulist>
-          </html:td>
-          <html:td>
+            <menulist is="menulist-editable" id="outgoing_port"
+                      editable="true"
+                      oninput="gEmailConfigWizard.onChangedPortOutgoing();"
+                      oncommand="gEmailConfigWizard.onChangedPortOutgoing();"
+                      class="port"
+                      flex="1">
+              <menupopup/>
+            </menulist>
+          </hbox>
+          <hbox class="manual-row" align="baseline" equalsize="always">
+            <label value="&sslRow.label;" flex="1"/>
             <menulist id="incoming_ssl"
                       class="security"
                       oncommand="gEmailConfigWizard.onChangedSSLIncoming();"
-                      sizetopopup="none">
+                      sizetopopup="none"
+                      flex="1">
               <menupopup>
                 <!-- values defined in nsMsgSocketType -->
                 <menuitem label="&autodetect.label;" value="0"/>
                 <menuitem label="&noEncryption.label;" value="1"/>
                 <menuitem label="&starttls.label;" value="3"/>
                 <menuitem label="&sslTls.label;" value="2"/>
               </menupopup>
             </menulist>
-          </html:td>
-          <html:td>
-            <menulist id="incoming_authMethod"
-                      class="auth"
-                      oncommand="gEmailConfigWizard.onChangedInAuth();"
-                      sizetopopup="none">
-              <menupopup>
-                <menuitem label="&autodetect.label;" value="0"/>
-                <!-- values defined in nsMsgAuthMethod -->
-                <!-- labels set from messenger.properties
-                     to avoid duplication -->
-                <menuitem id="in-authMethod-password-cleartext" value="3"/>
-                <menuitem id="in-authMethod-password-encrypted" value="4"/>
-                <menuitem id="in-authMethod-kerberos" value="5"/>
-                <menuitem id="in-authMethod-ntlm" value="6"/>
-                <menuitem id="in-authMethod-oauth2" value="10" hidden="true"/>
-              </menupopup>
-            </menulist>
-          </html:td>
-        </html:tr>
-        <html:tr id="outgoing_server_area">
-          <html:td class="align-end">
-            <label class="textbox-label"
-                   value="&outgoing.label;"
-                   control="outgoing_hostname"/>
-          </html:td>
-          <html:td>
-            <label id="outgoing_protocol"
-                   value="&smtp.label;"/>
-          </html:td>
-          <html:td>
-            <menulist is="menulist-editable" id="outgoing_hostname"
-                      editable="true"
-                      sizetopopup="none"
-                      oninput="gEmailConfigWizard.onInputHostname();"
-                      oncommand="gEmailConfigWizard.onChangedOutgoingDropdown();"
-                      onpopupshowing="gEmailConfigWizard.onOpenOutgoingDropdown();"
-                      class="host uri-element">
-              <menupopup id="outgoing_hostname_popup"/>
-            </menulist>
-          </html:td>
-          <html:td>
-            <menulist is="menulist-editable" id="outgoing_port"
-                      editable="true"
-                      oninput="gEmailConfigWizard.onChangedPortOutgoing();"
-                      oncommand="gEmailConfigWizard.onChangedPortOutgoing();"
-                      class="port">
-              <menupopup/>
-            </menulist>
-          </html:td>
-          <html:td>
             <menulist id="outgoing_ssl"
                       class="security"
                       oncommand="gEmailConfigWizard.onChangedSSLOutgoing();"
-                      sizetopopup="none">
+                      sizetopopup="none"
+                      flex="1">
               <menupopup>
                 <!-- @see incoming -->
                 <menuitem label="&autodetect.label;" value="0"/>
                 <menuitem label="&noEncryption.label;" value="1"/>
                 <menuitem label="&starttls.label;" value="3"/>
                 <menuitem label="&sslTls.label;" value="2"/>
               </menupopup>
             </menulist>
-          </html:td>
-          <html:td>
+          </hbox>
+          <hbox class="manual-row" align="baseline" equalsize="always">
+            <label value="&auth.label;:" flex="1"/>
+            <menulist id="incoming_authMethod"
+                      class="auth"
+                      oncommand="gEmailConfigWizard.onChangedInAuth();"
+                      sizetopopup="none"
+                      flex="1">
+              <menupopup>
+                <menuitem label="&autodetect.label;" value="0"/>
+                <!-- values defined in nsMsgAuthMethod -->
+                <!-- labels set from messenger.properties
+                    to avoid duplication -->
+                <menuitem id="in-authMethod-password-cleartext" value="3"/>
+                <menuitem id="in-authMethod-password-encrypted" value="4"/>
+                <menuitem id="in-authMethod-kerberos" value="5"/>
+                <menuitem id="in-authMethod-ntlm" value="6"/>
+                <menuitem id="in-authMethod-oauth2" value="10" hidden="true"/>
+              </menupopup>
+            </menulist>
             <menulist id="outgoing_authMethod"
                       class="auth"
                       oncommand="gEmailConfigWizard.onChangedOutAuth(this.selectedItem);"
-                      sizetopopup="none">
+                      sizetopopup="none"
+                      flex="1">
               <menupopup>
                 <menuitem label="&autodetect.label;" value="0"/>
                 <!-- @see incoming -->
                 <menuitem id="out-authMethod-no" value="1"/>
                 <menuitem id="out-authMethod-password-cleartext" value="3"/>
                 <menuitem id="out-authMethod-password-encrypted" value="4"/>
                 <menuitem id="out-authMethod-kerberos" value="5"/>
                 <menuitem id="out-authMethod-ntlm" value="6"/>
                 <menuitem id="out-authMethod-oauth2" value="10" hidden="true"/>
               </menupopup>
             </menulist>
-          </html:td>
-        </html:tr>
-        <html:tr id="username_area">
-          <html:td class="align-end">
-            <label class="textbox-label"
-                   value="&username.label;"/>
-          </html:td>
-          <html:td>
-            <label class="columnHeader"
-                   value="&incoming.label;"
-                   control="incoming_username"/>
-          </html:td>
-          <html:td>
-            <textbox id="incoming_username"
-                     oninput="gEmailConfigWizard.onInputInUsername();"
-                     class="username"/>
-          </html:td>
-          <html:td>
-            <spacer/>
-          </html:td>
-          <html:td>
-            <label class="columnHeader"
-                   id="outgoing_label"
-                   value="&outgoing.label;"
-                   control="outgoing_username"/>
-          </html:td>
-          <html:td>
-            <textbox id="outgoing_username"
-                     oninput="gEmailConfigWizard.onInputOutUsername();"
-                     class="username"/>
-          </html:td>
-        </html:tr>
-      </html:table>
-    </groupbox>
+          </hbox>
+          <hbox class="manual-row" align="baseline" equalsize="always">
+            <label value="&username.label;" flex="1"/>
+            <hbox class="input-control" align="center" flex="1" equalsize="never">
+              <html:input id="incoming_username"
+                          type="text"
+                          oninput="gEmailConfigWizard.onInputInUsername();"
+                          class="username input-field"/>
+            </hbox>
+            <hbox class="input-control" align="center" flex="1" equalsize="never">
+              <html:input id="outgoing_username"
+                          type="text"
+                          oninput="gEmailConfigWizard.onInputOutUsername();"
+                          class="username input-field"/>
+            </hbox>
+          </hbox>
+
+          <hbox flex="1" pack="end">
+            <button id="advanced-setup_button"
+                    class="btn-link"
+                    label="&advancedSetup.label;"
+                    accesskey="&advancedSetup.accesskey;"
+                    oncommand="gEmailConfigWizard.onAdvancedSetup();"/>
+          </hbox>
+        </vbox>
+
+      </groupbox>
 
-    <spacer flex="1" />
-    <hbox id="buttons_area">
-      <hbox id="left_buttons_area" align="center" pack="start">
-        <button id="provisioner_button"
-                label="&open-provisioner.label;"
-                accesskey="&open-provisioner.accesskey;"
-                class="larger-button"
-                oncommand="gEmailConfigWizard.onSwitchToProvisioner();"/>
-        <button id="manual-edit_button"
-                label="&manual-edit.label;"
-                accesskey="&manual-edit.accesskey;"
-                hidden="true"
-                oncommand="gEmailConfigWizard.onManualEdit();"/>
-        <button id="advanced-setup_button"
-                label="&advancedSetup.label;"
-                accesskey="&advancedSetup.accesskey;"
-                disabled="true"
-                hidden="true"
-                oncommand="gEmailConfigWizard.onAdvancedSetup();"/>
-      </hbox>
-      <spacer flex="1"/>
-      <hbox id="right_buttons_area" align="center" pack="end">
-        <button id="stop_button"
-                label="&stop.label;"
-                accesskey="&stop.accesskey;"
-                hidden="true"
-                oncommand="gEmailConfigWizard.onStop();"/>
-        <button id="cancel_button"
-                label="&cancel.label;"
-                accesskey="&cancel.accesskey;"
-                oncommand="gEmailConfigWizard.onCancel();"/>
-        <button id="half-manual-test_button"
-                label="&half-manual-test.label;"
-                accesskey="&half-manual-test.accesskey;"
-                hidden="true"
-                oncommand="gEmailConfigWizard.onHalfManualTest();"/>
-        <button id="next_button"
-                label="&continue.label;"
-                accesskey="&continue.accesskey;"
-                hidden="false"
-                oncommand="gEmailConfigWizard.onNext();"/>
-        <button id="create_button"
-                label="&doneAccount.label;"
-                accesskey="&doneAccount.accesskey;"
-                class="important-button"
-                hidden="true"
-                oncommand="gEmailConfigWizard.onCreate();"/>
-      </hbox>
-    </hbox>
-  </vbox>
+      <hbox class="hub-footer">
+        <hbox id="left_buttons_area" align="center" pack="start" flex="1">
+          <button id="cancel_button"
+                  label="&cancel.label;"
+                  accesskey="&cancel.accesskey;"
+                  oncommand="gEmailConfigWizard.onCancel();"/>
+        </hbox>
 
-
-  <vbox id="warningbox" hidden="true" flex="1">
-    <hbox class="warning" flex="1">
-      <vbox class="larrybox">
-        <image id="insecure_larry" class="insecureLarry"/>
-      </vbox>
-      <vbox flex="1" class="warning_text">
-        <label class="warning-heading">&warning.label;</label>
-        <vbox id="incoming_box">
-          <hbox>
-            <label class="warning_settings" value="&incomingSettings.label;"/>
-            <description id="warning_incoming"/>
-          </hbox>
-          <label id="incoming_technical"
-                 class="technical_details"
-                 value="&technicaldetails.label;"
-                 onclick="gSecurityWarningDialog.toggleDetails('incoming');"/>
-          <description id="incoming_details" collapsed="true"/>
-        </vbox>
-        <vbox id="outgoing_box">
-          <hbox>
-            <label class="warning_settings" value="&outgoingSettings.label;"/>
-            <description id="warning_outgoing"/>
-          </hbox>
-          <label id="outgoing_technical"
-                 class="technical_details"
-                 value="&technicaldetails.label;"
-                 onclick="gSecurityWarningDialog.toggleDetails('outgoing');"/>
-          <description id="outgoing_details" collapsed="true"/>
-        </vbox>
-        <spacer flex="10"/>
-        <description id="findoutmore">
-            &contactYourProvider.description;</description>
-        <spacer flex="100"/>
-        <checkbox id="acknowledge_warning"
-                  label="&confirmWarning.label;"
-                  accesskey="&confirmWarning.accesskey;"
-                  class="acknowledge_checkbox"
-                  oncommand="gSecurityWarningDialog.toggleAcknowledge()"/>
-        <hbox>
-          <button id="getmeoutofhere"
-                  label="&changeSettings.label;"
-                  accesskey="&changeSettings.accesskey;"
-                  oncommand="gSecurityWarningDialog.onCancel()"/>
-          <spacer flex="1"/>
-          <button id="iknow"
+        <hbox id="right_buttons_area" align="center" pack="end">
+          <button id="manual-edit_button"
+                  label="&manual-config.label;"
+                  accesskey="&manual-config.accesskey;"
+                  hidden="true"
+                  oncommand="gEmailConfigWizard.onManualEdit();"/>
+          <button id="stop_button"
+                  label="&stop.label;"
+                  accesskey="&stop.accesskey;"
+                  hidden="true"
+                  oncommand="gEmailConfigWizard.onStop();"/>
+          <button id="half-manual-test_button"
+                  label="&half-manual-test.label;"
+                  accesskey="&half-manual-test.accesskey;"
+                  hidden="true"
+                  oncommand="gEmailConfigWizard.onHalfManualTest();"/>
+          <button id="next_button"
+                  label="&continue.label;"
+                  accesskey="&continue.accesskey;"
+                  hidden="false"
+                  oncommand="gEmailConfigWizard.onNext();"/>
+          <button id="create_button"
                   label="&doneAccount.label;"
                   accesskey="&doneAccount.accesskey;"
-                  disabled="true"
-                  oncommand="gSecurityWarningDialog.onOK()"/>
+                  class="important-button"
+                  hidden="true"
+                  oncommand="gEmailConfigWizard.onCreate();"/>
         </hbox>
-      </vbox>
-    </hbox>
+      </hbox>
+
+    </vbox>
+
+    <vbox id="warningbox" hidden="true" flex="1">
+      <hbox class="warning" flex="1">
+        <vbox flex="1" class="warning_text">
+          <hbox class="warning-header" align="center">
+            <image id="insecure_larry" class="insecureLarry"/>
+            <label class="warning-heading">&warning.label;</label>
+          </hbox>
+          <vbox id="incoming_box">
+            <hbox>
+              <label class="warning_settings" value="&incomingSettings.label;"/>
+              <description id="warning_incoming"/>
+            </hbox>
+            <label id="incoming_technical"
+                   class="technical_details"
+                   value="&technicaldetails.label;"
+                   onclick="gSecurityWarningDialog.toggleDetails('incoming');"/>
+            <description id="incoming_details" collapsed="true"/>
+          </vbox>
+          <vbox id="outgoing_box">
+            <hbox>
+              <label class="warning_settings" value="&outgoingSettings.label;"/>
+              <description id="warning_outgoing"/>
+            </hbox>
+            <label id="outgoing_technical"
+                   class="technical_details"
+                   value="&technicaldetails.label;"
+                   onclick="gSecurityWarningDialog.toggleDetails('outgoing');"/>
+            <description id="outgoing_details" collapsed="true"/>
+          </vbox>
+          <spacer flex="10"/>
+          <description id="findoutmore">
+              &contactYourProvider.description;</description>
+          <spacer flex="100"/>
+          <checkbox id="acknowledge_warning"
+                    label="&confirmWarning.label;"
+                    accesskey="&confirmWarning.accesskey;"
+                    class="acknowledge_checkbox"
+                    oncommand="gSecurityWarningDialog.toggleAcknowledge()"/>
+          <hbox>
+            <button id="getmeoutofhere"
+                    label="&changeSettings.label;"
+                    accesskey="&changeSettings.accesskey;"
+                    oncommand="gSecurityWarningDialog.onCancel()"/>
+            <spacer flex="1"/>
+            <button id="iknow"
+                    label="&doneAccount.label;"
+                    accesskey="&doneAccount.accesskey;"
+                    disabled="true"
+                    oncommand="gSecurityWarningDialog.onOK()"/>
+          </hbox>
+        </vbox>
+      </hbox>
+    </vbox>
+
   </vbox>
 </window>
--- a/mail/locales/en-US/chrome/messenger/accountCreation.dtd
+++ b/mail/locales/en-US/chrome/messenger/accountCreation.dtd
@@ -1,44 +1,50 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
-<!ENTITY autoconfigWizard2.title         "Set Up an Existing Email Account">
+<!ENTITY emailWizard.title               "Set Up Your Existing Email Address">
+<!ENTITY emailWizard.caption             "Use your current email address">
 <!ENTITY name.label                      "Your name:">
 <!ENTITY name.accesskey                  "n">
-<!ENTITY name.placeholder                "First Last">
+<!ENTITY fullname.placeholder            "Your full name">
 <!ENTITY name.text                       "Your name, as shown to others">
+<!ENTITY name.error                      "Please enter your name">
 <!ENTITY email.label                     "Email address:">
 <!ENTITY email.accesskey                 "E">
-<!-- LOCALIZATION NOTE(email.placeholder): Domain @example.com must stay in English -->
-<!ENTITY email2.placeholder              "you@example.com">
+<!ENTITY email3.placeholder              "Your email address">
 <!ENTITY email.text                      "Your existing email address">
+<!ENTITY email.error                     "Invalid email address">
 <!ENTITY password.label                  "Password:">
 <!ENTITY password.accesskey              "P">
 <!ENTITY password.placeholder            "Password">
 <!ENTITY password.text                   "Optional, will only be used to validate the username">
+<!ENTITY password.toggle                 "Show/Hide password">
 <!ENTITY rememberPassword.label          "Remember password">
 <!ENTITY rememberPassword.accesskey      "m">
 <!ENTITY usernameEx.label                "Your login:">
 <!ENTITY usernameEx.accesskey            "l">
 <!-- LOCALIZATION NOTE(usernameEx.placeholder): YOURDOMAIN refers to the Windows domain in ActiveDirectory. yourusername refers to the user's account name in Windows. -->
 <!ENTITY usernameEx.placeholder          "YOURDOMAIN\yourusername">
 <!-- LOCALIZATION NOTE(usernameEx.text): Domain refers to the Windows domain in ActiveDirectory. We mean the user's login in Windows at the local corporate network. -->
 <!ENTITY usernameEx.text                 "Domain login">
 
+<!ENTITY protocol.label                  "Protocol:">
 <!ENTITY imapLong.label                  "IMAP (remote folders)">
 <!ENTITY pop3Long.label                  "POP3 (keep mail on your computer)">
 
 <!ENTITY incoming.label                  "Incoming:">
+<!ENTITY incomingColumn.label            "Incoming">
 <!ENTITY outgoing.label                  "Outgoing:">
+<!ENTITY outgoingColumn.label            "Outgoing">
 <!ENTITY username.label                  "Username:">
-<!ENTITY hostname.label                  "Server hostname">
-<!ENTITY port.label                      "Port">
-<!ENTITY ssl.label                       "SSL">
+<!ENTITY serverRow.label                 "Server:">
+<!ENTITY portRow.label                   "Port:">
+<!ENTITY sslRow.label                    "SSL:">
 <!ENTITY auth.label                      "Authentication">
 <!ENTITY imap.label                      "IMAP">
 <!ENTITY pop3.label                      "POP3">
 <!-- LOCALIZATION NOTE(exchange.label): Do not translate Exchange, it is a product name. -->
 <!ENTITY exchange.label                  "Exchange">
 <!ENTITY smtp.label                      "SMTP">
 <!ENTITY autodetect.label                "Autodetect">
 <!-- LOCALIZATION NOTE(noEncryption.label): Neither SSL/TLS nor STARTTLS.
@@ -54,25 +60,27 @@
 <!ENTITY advancedSetup.accesskey         "A">
 <!ENTITY cancel.label                    "Cancel">
 <!ENTITY cancel.accesskey                "a">
 <!ENTITY continue.label                  "Continue">
 <!ENTITY continue.accesskey              "C">
 <!ENTITY stop.label                      "Stop">
 <!ENTITY stop.accesskey                  "S">
 <!-- LOCALIZATION NOTE (half-manual-test.label): This is the text that is
-     displayed on the button in manual edit mode which will re-guess
+     displayed on the button in manual config mode which will re-guess
      the account configuration, taking into account the settings that
      the user has manually changed. -->
 <!ENTITY half-manual-test.label          "Re-test">
 <!ENTITY half-manual-test.accesskey      "t">
-<!ENTITY manual-edit.label               "Manual config">
-<!ENTITY manual-edit.accesskey           "M">
+<!ENTITY manual-config.label             "Configure manually…">
+<!ENTITY manual-config.accesskey         "M">
 <!ENTITY open-provisioner.label          "Get a new email address…">
 <!ENTITY open-provisioner.accesskey      "g">
+<!ENTITY get-help.label                  "Get Help">
+<!ENTITY get-help.accesskey              "H">
 
 
 <!ENTITY warning.label                   "Warning!">
 <!ENTITY incomingSettings.label          "Incoming settings:">
 <!ENTITY outgoingSettings.label          "Outgoing settings:">
 <!ENTITY technicaldetails.label          "Technical Details">
 <!-- LOCALIZATION NOTE (confirmWarning.label): If there is a security
      warning on the outgoing server, then the user will need to check a
--- a/mail/locales/en-US/chrome/messenger/accountCreation.properties
+++ b/mail/locales/en-US/chrome/messenger/accountCreation.properties
@@ -91,13 +91,15 @@ resultOutgoingExisting=Use existing outg
 resultIMAP=IMAP
 resultPOP3=POP3
 resultSMTP=SMTP
 resultExchange=Exchange
 # LOCALIZATION NOTE(resultNoEncryption): Neither SSL/TLS nor STARTTLS. Transmission of emails in cleartext over the Internet.
 resultNoEncryption=No Encryption
 resultSSL=SSL
 resultSTARTTLS=STARTTLS
-# LOCALIZATION NOTE(resultSSLCertWeak): \u0020 is just a space
-resultSSLCertWeak=\u0020(Warning: Could not verify server)
+resultSSLCertWeak=Warning! Could not verify server
 resultSSLCertOK=
 resultUsernameBoth=%1$S
 resultUsernameDifferent=Incoming: %1$S, Outgoing: %2$S
+
+confirmAdvancedConfigTitle=Confirm Advanced Configuration
+confirmAdvancedConfigText=This dialog will be closed and an account with the current settings will be created, even if the configuration is incorrect. Do you want to proceeed?
--- a/mail/test/mozmill/account/test-mail-account-setup-wizard.js
+++ b/mail/test/mozmill/account/test-mail-account-setup-wizard.js
@@ -2,25 +2,27 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 /* import-globals-from ../shared-modules/test-account-manager-helpers.js */
 /* import-globals-from ../shared-modules/test-folder-display-helpers.js */
 /* import-globals-from ../shared-modules/test-keyboard-helpers.js */
+/* import-globals-from ../shared-modules/test-prompt-helpers.js */
 /* import-globals-from ../shared-modules/test-window-helpers.js */
 
 var MODULE_NAME = "test-mail-account-setup-wizard";
 var RELATIVE_ROOT = "../shared-modules";
 var MODULE_REQUIRES = [
   "folder-display-helpers",
   "window-helpers",
   "account-manager-helpers",
   "keyboard-helpers",
+  "prompt-helpers",
 ];
 
 var {Services} = ChromeUtils.import("resource://gre/modules/Services.jsm");
 var {MailServices} = ChromeUtils.import("resource:///modules/MailServices.jsm");
 
 var elib = ChromeUtils.import("chrome://mozmill/content/modules/elementslib.jsm");
 
 var user = {
@@ -84,22 +86,30 @@ function test_mail_account_setup() {
     // Load the autoconfig file from http://localhost:433**/autoconfig/example.com
     awc.click(awc.eid("next_button"));
 
     // XXX: This should probably use a notification, once we fix bug 561143.
     awc.waitFor(() => awc.window.gEmailConfigWizard._currentConfig != null,
                 "Timeout waiting for current config to become non-null",
                 8000, 600);
 
+    // Register the prompt service to handle the confirm() dialog
+    gMockPromptService.register();
+    gMockPromptService.returnValue = true;
+
     // Open the advanced settings (Account Manager) to create the account
     // immediately.  We use an invalid email/password so the setup will fail
     // anyway.
     open_advanced_settings_from_account_wizard(subtest_verify_account, awc);
 
+    let promptState = gMockPromptService.promptState;
+    assert_equals("confirm", promptState.method);
+
     // Clean up
+    gMockPromptService.unregister();
     Services.prefs.clearUserPref(pref_name);
   });
 }
 
 function subtest_verify_account(amc) {
   amc.waitFor(() => amc.window.currentAccount != null,
               "Timeout waiting for currentAccount to become non-null");
   let account = amc.window.currentAccount;
--- a/mail/test/mozmill/account/test-retest-config.js
+++ b/mail/test/mozmill/account/test-retest-config.js
@@ -74,31 +74,30 @@ function test_re_test_config() {
     awc.waitFor(function() { return !this.disabled; },
                 "Timeout waiting for re-test button to be enabled",
                 20000, 600, awc.e("half-manual-test_button"));
 
     // There used to be a "start over" button (line commented out below). Now just
     // changing the value of the email field does the trick.
     awc.e("realname").focus();
     awc.keypress(null, "VK_TAB", {});
+    awc.e("email").focus();
     input_value(awc, user.altEmail);
     awc.keypress(null, "VK_TAB", {});
 
     // Wait for the "continue" button to be back, which means we're back to the
     // original state.
     awc.waitFor(function() { return !this.hidden; },
                 "Timeout waiting for continue button to be visible",
                 20000, 600, awc.e("next_button"));
 
     awc.e("next_button").click();
 
     // Previously, we'd switched to the manual editing state. Now we've started
     // over, we should make sure the information is presented back in its original
     // "automatic" mode.
-    assert_true(!awc.e("manual-edit_button").hidden,
-      "We're not back to the original state!");
-    assert_true(awc.e("advanced-setup_button").hidden,
+    assert_true(awc.e("manual-edit_area").hidden,
       "We're not back to the original state!");
 
     close_window(awc);
   });
 }
 
--- a/mail/themes/linux/jar.mn
+++ b/mail/themes/linux/jar.mn
@@ -5,16 +5,17 @@
 classic.jar:
 % skin messenger classic/1.0 %skin/classic/messenger/
 #include ../shared/jar.inc.mn
   skin/classic/messenger/primaryToolbar.css                   (mail/primaryToolbar.css)
   skin/classic/messenger/accountCentral.css                   (mail/accountCentral.css)
   skin/classic/messenger/accountCreation.css                  (mail/accountCreation.css)
   skin/classic/messenger/accountManage.css                    (mail/accountManage.css)
   skin/classic/messenger/accountWizard.css                    (mail/accountWizard.css)
+  skin/classic/messenger/creationDialog.css                   (mail/creationDialog.css)
 * skin/classic/messenger/chat.css                             (mail/chat.css)
 * skin/classic/messenger/imAccounts.css                       (../../components/im/themes/imAccounts.css)
 * skin/classic/messenger/imAccountWizard.css                  (../../components/im/themes/imAccountWizard.css)
   skin/classic/messenger/imMenulist.css                       (../../components/im/themes/imMenulist.css)
 * skin/classic/messenger/imRichlistbox.css                    (../../components/im/themes/imRichlistbox.css)
   skin/classic/messenger/founder.png                          (../../components/im/themes/founder.png)
   skin/classic/messenger/operator.png                         (../../components/im/themes/operator.png)
   skin/classic/messenger/half-operator.png                    (../../components/im/themes/half-operator.png)
--- a/mail/themes/linux/mail/accountCreation.css
+++ b/mail/themes/linux/mail/accountCreation.css
@@ -36,39 +36,16 @@ menulist[disabled="true"] > .menulist-dr
   -moz-appearance: none;
   color: -moz-DialogText;
 }
 
 .mastervbox {
   padding: 8px;
 }
 
-#warningbox {
-  width: 800px;
-  height: 485px;
-}
-
-#result-username {
-  margin-inline-start: 1px;
-}
-
-textbox[disabled="true"],
-input[disabled="true"],
-menulist[disabled="true"] {
-  -moz-appearance: none;
-  border: 0;
-  background-color: -moz-dialog;
-  color: -moz-DialogText;
-}
-
-menulist:not([editable="true"]) {
-  padding-top: 2px;
-  padding-bottom: 3px;
-}
-
 .menulist-editable-box {
   -moz-appearance: textfield;
   min-width: 4em;
   padding-top: 2px;
   padding-bottom: 2px;
   padding-inline-start: 4px;
   padding-inline-end: 2px;
 }
@@ -78,20 +55,16 @@ menulist > .menulist-editable-input {
   padding-left: 1px !important;
 }
 
 /* Fix to show the menulist-dropmarker under newer GTK3 versions */
 menulist[editable="true"] > .menulist-dropmarker {
   min-width: 2em;
 }
 
-#status_area {
-  -moz-box-pack: center;
-}
-
 textbox.port[disabled="true"] {
   padding-top: 4px;
 }
 
 #outgoing_server_area {
   padding-top: 2px;
 }
 
new file mode 100644
--- /dev/null
+++ b/mail/themes/linux/mail/creationDialog.css
@@ -0,0 +1,5 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@import url("chrome://messenger/skin/shared/creationDialog.css");
--- a/mail/themes/osx/jar.mn
+++ b/mail/themes/osx/jar.mn
@@ -9,16 +9,17 @@ classic.jar:
   skin/classic/messenger/multimessageview.css                    (mail/multimessageview.css)
   skin/classic/messenger/dialogs.css                             (mail/dialogs.css)
   skin/classic/messenger/messenger.css                           (mail/messenger.css)
   skin/classic/messenger/primaryToolbar.css                      (mail/primaryToolbar.css)
   skin/classic/messenger/accountCentral.css                      (mail/accountCentral.css)
   skin/classic/messenger/accountCreation.css                     (mail/accountCreation.css)
   skin/classic/messenger/accountManage.css                       (mail/accountManage.css)
   skin/classic/messenger/accountWizard.css                       (mail/accountWizard.css)
+  skin/classic/messenger/creationDialog.css                      (mail/creationDialog.css)
 * skin/classic/messenger/chat.css                                (mail/chat.css)
 * skin/classic/messenger/imAccounts.css                          (../../components/im/themes/imAccounts.css)
 * skin/classic/messenger/imAccountWizard.css                     (../../components/im/themes/imAccountWizard.css)
   skin/classic/messenger/imMenulist.css                          (../../components/im/themes/imMenulist.css)
 * skin/classic/messenger/imRichlistbox.css                       (../../components/im/themes/imRichlistbox.css)
   skin/classic/messenger/founder.png                             (../../components/im/themes/founder.png)
   skin/classic/messenger/operator.png                            (../../components/im/themes/operator.png)
   skin/classic/messenger/half-operator.png                       (../../components/im/themes/half-operator.png)
--- a/mail/themes/osx/mail/accountCreation.css
+++ b/mail/themes/osx/mail/accountCreation.css
@@ -20,40 +20,22 @@
     background: url("chrome://messenger/skin/icons/identity@2x.png") no-repeat;
   }
 }
 
 .mastervbox {
   padding: 10px 8px;
 }
 
-#warningbox {
-  width: 650px;
-  height: 400px;
-}
-
-#result-username {
-  margin-inline-start: 6px;
-}
-
-textbox[disabled="true"],
-input[disabled="true"],
-menulist[disabled="true"] {
-  -moz-appearance: none;
-  border: 0;
-  background-color: #ececec;
-  color: #000000 !important;
-}
-
 menulist {
   margin-right: 4px;
   margin-left: 4px;
 }
 
-#status_area[status=error] #status_img_before {
+#status-area[status=error] #statusImgBefore {
   margin-right: 1em;
 }
 
 textbox.port[disabled="true"] {
   padding-top: 4px;
 }
 
 #incoming_protocol[disabled="true"] {
new file mode 100644
--- /dev/null
+++ b/mail/themes/osx/mail/creationDialog.css
@@ -0,0 +1,14 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@import url("chrome://messenger/skin/shared/creationDialog.css");
+
+tabbox {
+  margin: 0 !important;
+}
+
+tabs {
+  padding: 0 !important;
+  margin-bottom: 0 !important;
+}
--- a/mail/themes/shared/jar.inc.mn
+++ b/mail/themes/shared/jar.inc.mn
@@ -39,31 +39,35 @@
   skin/classic/messenger/icons/cut.svg                        (../shared/mail/icons/cut.svg)
   skin/classic/messenger/icons/correspondents.svg             (../shared/mail/icons/correspondents.svg)
   skin/classic/messenger/icons/compact.svg                    (../shared/mail/icons/compact.svg)
   skin/classic/messenger/icons/connection-insecure.svg        (../shared/mail/icons/connection-insecure.svg)
   skin/classic/messenger/icons/connection-mixed.svg           (../shared/mail/icons/connection-mixed.svg)
   skin/classic/messenger/icons/connection-secure.svg          (../shared/mail/icons/connection-secure.svg)
   skin/classic/messenger/icons/conversation.svg               (../shared/mail/icons/conversation.svg)
   skin/classic/messenger/icons/delete.svg                     (../shared/mail/icons/delete.svg)
+  skin/classic/messenger/icons/exclude.svg                    (../shared/mail/icons/exclude.svg)
   skin/classic/messenger/icons/file.svg                       (../shared/mail/icons/file.svg)
   skin/classic/messenger/icons/file-item.svg                  (../shared/mail/icons/file-item.svg)
   skin/classic/messenger/icons/filter.svg                     (../shared/mail/icons/filter.svg)
   skin/classic/messenger/icons/flag-col.svg                   (../shared/mail/icons/flag-col.svg)
   skin/classic/messenger/icons/forward.svg                    (../shared/mail/icons/forward.svg)
   skin/classic/messenger/icons/getmsg.svg                     (../shared/mail/icons/getmsg.svg)
   skin/classic/messenger/icons/goback.svg                     (../shared/mail/icons/goback.svg)
   skin/classic/messenger/icons/goforward.svg                  (../shared/mail/icons/goforward.svg)
+  skin/classic/messenger/icons/hidden.svg                     (../shared/mail/icons/hidden.svg)
   skin/classic/messenger/icons/info.svg                       (../shared/mail/icons/info.svg)
+  skin/classic/messenger/icons/information.svg                (../shared/mail/icons/information.svg)
   skin/classic/messenger/icons/join.svg                       (../shared/mail/icons/join.svg)
   skin/classic/messenger/icons/junk.svg                       (../shared/mail/icons/junk.svg)
   skin/classic/messenger/icons/junk-col.svg                   (../shared/mail/icons/junk-col.svg)
   skin/classic/messenger/icons/login.svg                      (../shared/mail/icons/login.svg)
   skin/classic/messenger/icons/mark.svg                       (../shared/mail/icons/mark.svg)
   skin/classic/messenger/icons/message.svg                    (../shared/mail/icons/message.svg)
+  skin/classic/messenger/icons/more.svg                       (../shared/mail/icons/more.svg)
   skin/classic/messenger/icons/move-bottom.svg                (../shared/mail/icons/move-bottom.svg)
   skin/classic/messenger/icons/move-down.svg                  (../shared/mail/icons/move-down.svg)
   skin/classic/messenger/icons/move-together.svg              (../shared/mail/icons/move-together.svg)
   skin/classic/messenger/icons/move-top.svg                   (../shared/mail/icons/move-top.svg)
   skin/classic/messenger/icons/move-up.svg                    (../shared/mail/icons/move-up.svg)
   skin/classic/messenger/icons/navigation.svg                 (../shared/mail/icons/navigation.svg)
   skin/classic/messenger/icons/new.svg                        (../shared/mail/icons/new.svg)
   skin/classic/messenger/icons/newmsg.svg                     (../shared/mail/icons/newmsg.svg)
@@ -96,17 +100,19 @@
   skin/classic/messenger/icons/sticky.svg                     (../shared/mail/icons/sticky.svg)
   skin/classic/messenger/icons/stop.svg                       (../shared/mail/icons/stop.svg)
   skin/classic/messenger/icons/tag.svg                        (../shared/mail/icons/tag.svg)
   skin/classic/messenger/icons/thread-col.svg                 (../shared/mail/icons/thread-col.svg)
   skin/classic/messenger/icons/tick.png                       (../shared/mail/icons/tick.png)
   skin/classic/messenger/icons/timeline.svg                   (../shared/mail/icons/timeline.svg)
   skin/classic/messenger/icons/toolbarbutton-arrow.svg        (../shared/mail/icons/toolbarbutton-arrow.svg)
   skin/classic/messenger/icons/userIcon.svg                   (../shared/mail/icons/userIcon.svg)
+  skin/classic/messenger/icons/visible.svg                    (../shared/mail/icons/visible.svg)
   skin/classic/messenger/icons/waiting.svg                    (../shared/mail/icons/waiting.svg)
+  skin/classic/messenger/shared/creationDialog.css            (../shared/mail/creationDialog.css)
   skin/classic/messenger/shared/accountCentral.css            (../shared/mail/accountCentral.css)
   skin/classic/messenger/shared/accountCreation.css           (../shared/mail/accountCreation.css)
   skin/classic/messenger/shared/accountManage.css             (../shared/mail/accountManage.css)
   skin/classic/messenger/shared/accountProvisioner.css        (../shared/mail/accountProvisioner.css)
   skin/classic/messenger/shared/addressbook.css               (../shared/mail/addressbook.css)
   skin/classic/messenger/shared/compacttheme.css              (../shared/mail/compacttheme.css)
   skin/classic/messenger/shared/in-content/applications.css   (../shared/mail/incontentprefs/applications.css)
   skin/classic/messenger/shared/in-content/dialog.css         (../shared/mail/incontentprefs/dialog.css)
--- a/mail/themes/shared/mail/accountCreation.css
+++ b/mail/themes/shared/mail/accountCreation.css
@@ -7,69 +7,71 @@
 .warningicon {
   width: 16px;
   height: 16px;
   background: url("chrome://global/skin/icons/warning.svg") no-repeat;
   margin-top: 5px;
 }
 
 .insecureLarry {
-  height: 64px;
-  width: 64px;
+  height: 32px;
+  width: 32px;
   padding: 0;
   background: url("chrome://global/skin/icons/sslWarning.png") no-repeat;
+  background-size: 32px;
+  margin-right: 1em;
 }
 
 .secureLarry {
-  height: 64px;
-  width: 64px;
+  height: 48px;
+  width: 48px;
   padding: 0;
   background: url("chrome://messenger/skin/icons/identity.png") no-repeat;
+  background-size: 48px;
 }
 
 #warningbox {
   background: #333 none repeat scroll 0% 0%;
   padding: 1em;
-  overflow: auto;
 }
 
 .warning {
-  padding: 2em;
-  border-radius: 10px;
+  padding: 1em;
+  border-radius: 8px;
   background-color: #722;
-  border: 1px solid ThreeDShadow;
+  overflow: auto;
 }
 
 .warning_text {
   color: white;
   font-size: 120%;
 }
 
 .warning_text > vbox {
   padding-top: 5px;
 }
 
-.warning-heading {
+.warning-header {
   border-bottom: 1px solid ThreeDLightShadow;
-  font-size: 160%;
+  padding-bottom: 0.5em;
+}
+
+.warning-heading {
+  font-size: 140%;
   margin: 0;
-  padding: 2px 2px 1px;
+  color: white;
 }
 
 .warning_settings {
   color: yellow;
   font-weight: bold;
   margin: 0;
   margin-right: 2px;
 }
 
-.larrybox {
-  padding-inline-end: 2em;
-}
-
 checkbox.acknowledge_checkbox {
   padding-top: .5em;
 }
 
 .title {
   font-weight: bold;
   padding: 0 3px;
 }
@@ -80,173 +82,185 @@ checkbox.acknowledge_checkbox {
 }
 
 .popup-panel {
   padding: 2px 3px;
   background-color: #ffffc7;
   max-width: 320px;
 }
 
-.protocol {
-  width: 8em;
-}
-
-.protocol > label {
-  padding-inline-start: 6px;
-}
-
-.security {
-  width: 10em;
-}
-
-textbox.port {
-  width: 4em;
-}
-
-textbox.username {
-  margin-bottom: 4px !important;
-  margin-top: 4px !important;
-}
-
-.auth,
-.host,
-textbox.username {
-  width: 15em;
-}
-
 .technical_details {
   cursor: pointer;
   margin: 0;
   padding-left: 20px;
-  background: url("chrome://messenger/skin/section_collapsed.png") left 0 no-repeat;
+  background: url("chrome://global/skin/icons/twisty-collapsed.svg") left center no-repeat;
+  -moz-context-properties: fill;
+  fill: currentColor;
 }
 
 .technical_details[expanded] {
-  background-image: url("chrome://messenger/skin/section_expanded.png");
+  background-image: url("chrome://global/skin/icons/twisty-expanded.svg");
 }
 
 .label-box {
-  min-width: 9em;
-}
-
-.textbox-box {
-  min-width: 12em;
+  min-width: 10em;
+  font-size: 1.1em;
 }
 
-.align-end {
-  text-align: end;
-}
-
-.textbox-label {
-  text-align: right;
+.label-result {
+  min-width: 10em;
 }
 
 .result-host-info {
-  margin: 0;
-  margin-inline-start: 6px;
-  padding: 0;
-}
-
-#result-username {
-  margin-top: 1px;
-  margin-bottom: 2px;
   padding-top: 0;
+  padding-bottom: 0;
+  background-color: transparent !important;
+  -moz-appearance: none;
+  color: var(--text-color) !important;
 }
 
 #initialSettings {
   margin-bottom: 1em;
 }
 
-#manual-edit_area {
-  margin-bottom: 2em;
-}
-
 /* status area */
 
 #status_msg {
   min-height: 1.5em;
   max-width: 30em;
+  margin-bottom: 0;
 }
 
 #status-lines {
-  -moz-box-pack: start;
-  -moz-box-flex: 10;
-  margin-left: 10em;
+  margin: 4px 20px;
+}
+
+.status-line {
+  margin: 2px 0px;
+}
+
+.status-msg {
+ font-style: italic;
+}
+
+.status-line .status-img {
+  -moz-context-properties: fill;
+  fill: currentColor;
+  width: 16px;
+  height: 16px;
 }
 
 .status-line[status="loading"] .status-img {
   background: url("chrome://global/skin/icons/loading.png") no-repeat;
-  width: 16px;
-  height: 16px;
+  background-size: 16px 16px;
 }
 
 .status-line[status="failed"] .status-img {
-  background: url("chrome://messenger/skin/icons/exclude.png") no-repeat;
-  width: 16px;
-  height: 16px;
+  list-style-image: url("chrome://messenger/skin/icons/exclude.svg");
 }
 
 .status-line[status="succeeded"] .status-img {
   background: url("chrome://messenger/skin/icons/tick.png") no-repeat;
-  width: 16px;
-  height: 16px;
 }
 
-#status_area[status=loading] #status_msg {
-  font-weight: bold;
+#status-area {
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  padding: 3px 4px;
+  color: var(--text-color);
 }
 
-#status_area[status=error] #status_msg {
-  font-weight: bold;
+#status-area[status=error] {
+  background-color: #FFE900;
+  border-color: #F2D00F;
+  color: -moz-DialogText;
 }
 
-#status_area[status=error] #status_img_before {
-  background: url("chrome://global/skin/icons/warning.svg") no-repeat;
-  background-position-y: 3px;
-  width: 16px;
-  height: 16px;
-}
-
-#status_area[status=loading] #status_img_after {
-  background: url("chrome://global/skin/icons/loading.png") no-repeat;
+#status-area #statusImgBefore,
+#status-area #statusImgAfter {
+  -moz-context-properties: fill;
+  fill: currentColor;
   width: 16px;
   height: 16px;
   background-size: 16px 16px;
 }
 
+#status-area[status=error] #statusImgBefore {
+  list-style-image: url("chrome://global/skin/icons/warning.svg");
+}
+
+#status-area[status=loading] {
+  background-color: rgba(0, 0, 0, 0.05);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+#status-area[status=loading] #statusImgAfter {
+  background: url("chrome://global/skin/icons/loading.png") no-repeat;
+}
+
 @media (min-resolution: 1.1dppx) {
-  #status_area[status=loading] #status_img_after {
+  #status-area[status=loading] #statusImgAfter,
+  .status-line[status=loading] .status-img {
     background-image: url("chrome://global/skin/icons/loading@2x.png");
+    background-size: 16px 16px;
   }
 }
 
+#status-area[status=result] #status_msg {
+  text-align: center;
+}
+
+#status-area[status=result] #statusImgBefore {
+  list-style-image: url("chrome://global/skin/icons/check.svg");
+  color: #12bc00;
+}
+
 /* result area */
 
-#result_area {
-  margin-bottom: 1em;
+.result-host-info > label.protocolType {
+  display: inline-block;
+  padding: 2px 4px;
+  font-size: 0.8rem;
+  margin-inline-end: 5px;
+  font-weight: bold;
+  border-radius: 2px;
+  line-height: 1rem;
+  background-color: var(--tab-color);
+  color: var(--bg-color);
 }
 
-textbox.result-host-info > label {
+.result-host-info > label {
   margin-left: 0;
   margin-right: 0;
 }
 
-textbox.result-host-info > label.host-without-domain,
-textbox.result-host-info > label.ssl,
-textbox.result-host-info > label.certStatus {
+.result-host-info > label.ssl {
   margin-left: 0.4em;
 }
 
-textbox.result-host-info > label.domain {
+.result-host-info > label.domain {
   font-weight: bold;
 }
 
-textbox.result-host-info > label.insecure {
-  color: red;
+.result-host-info > label.insecure {
+  display: inline-block;
+  padding: 2px 4px;
+  font-size: 0.8rem;
+  margin-inline-end: 5px;
   font-weight: bold;
+  border-radius: 2px;
+  line-height: 1rem;
+  background-color: var(--warning-bg);
+  color: var(--btn-bg-hover);
+}
+
+.certStatus.insecure {
+  margin: 0 0 5px 0;
+  color: var(--warning-bg);
 }
 
 #result_servertype {
   margin-bottom: 1.5em;
 }
 
 #result_exchange_hostname_container {
   margin-bottom: 0.5em;
@@ -267,15 +281,19 @@ textbox.result-host-info > label.insecur
 
 #result_addon_install image.icon {
   width: 32px;
   height: 32px;
   margin-left: 0.4em;
   margin-right: 0.4em;
 }
 
-#result_addon_install_column_link {
-  max-width: 30em;
+textbox[disabled="true"],
+input[disabled="true"],
+menulist[disabled="true"],
+menulist[is="menulist-editable"][editable="true"][disabled="true"] {
+  opacity: 0.5;
 }
 
-#result_addon_install_column_button {
-  max-width: 10em;
+menulist[is="menulist-editable"][editable="true"][disabled="true"]
+  .menulist-dropmarker {
+  display: none !important;
 }
new file mode 100644
--- /dev/null
+++ b/mail/themes/shared/mail/creationDialog.css
@@ -0,0 +1,304 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+:root {
+  --bg-color: #f2f2f2;
+  --text-color: #36385A;
+  --tab-bg: rgba(255, 255, 255, 0.6);
+  --tab-color: #5E5F7A;
+  --config-bg: rgba(0, 0, 0, 0.05);
+  --primary-color: #0a84ff;
+  --primary-color-hover: #0060df;
+  --warning-color: #FF9400;
+  --warning-bg: #ac0808;
+  --btn-bg: #FFFFFF;
+  --btn-bg-hover: #FFFFFF;
+  --btn-shadow-hover: rgba(0, 0, 0, 0.25);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-color: #2E2F30;
+    --text-color: #f2f2f2;
+    --tab-bg: rgba(0, 0, 0, 0.6);
+    --tab-color: #f2f2f2;
+    --config-bg: rgba(255, 255, 255, 0.05);
+    --primary-color: #0a84ff;
+    --primary-color-hover: #0a84ff;
+    --btn-bg: #efefef;
+    --btn-bg-hover: #FFFFFF;
+    --btn-shadow-hover: rgba(0, 110, 255, 0.25);
+  }
+}
+
+:root[lwt-tree-brighttext] {
+  --bg-color: #2E2F30;
+  --text-color: #f2f2f2;
+  --tab-bg: rgba(0, 0, 0, 0.6);
+  --tab-color: #f2f2f2;
+  --config-bg: rgba(255, 255, 255, 0.05);
+  --primary-color: #0a84ff;
+  --primary-color-hover: #0a84ff;
+  --btn-bg: #efefef;
+  --btn-bg-hover: #FFFFFF;
+  --btn-shadow-hover: rgba(0, 110, 255, 0.25);
+}
+
+#brandLogo {
+  list-style-image: url("chrome://branding/content/about-logo.svg");
+  width: 64px;
+  height: 64px;
+  margin-bottom: 10px;
+}
+
+.hub-container {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  width: 37em;
+  min-height: 45em;
+  overflow: hidden;
+}
+
+.hub-wrapper {
+  padding: 0 20px;
+}
+
+.hub-header {
+  color: var(--text-color);
+  padding: 30px 20px;
+}
+
+.hub-title {
+  font-size: x-large;
+}
+
+.hub-subtitle {
+  font-size: large;
+  margin-bottom: 5px;
+}
+
+.hub-description {
+  font-size: medium;
+}
+
+/* Custom tabbox style =================================== */
+.hub-tabs {
+  background-color: var(--tab-bg);
+}
+
+.hub-tabs .tabs-right,
+.hub-tabs .tabs-left {
+  display: none;
+}
+
+.hub-tabs tab,
+.hub-tabs tab[visuallyselected="true"] {
+  color: var(--tab-color);
+  -moz-appearance: none;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  padding: 10px 5px;
+  text-align: center;
+  cursor: pointer;
+  -moz-context-properties: fill, stroke-opacity;
+  fill: currentColor;
+  stroke-opacity: 0;
+}
+
+.hub-tabs > tab label {
+  cursor: pointer !important;
+}
+
+.hub-tabs tab > .tab-middle {
+  position: relative;
+}
+
+.hub-tabs tab > .tab-middle:after,
+.hub-tabs tab[visuallyselected="true"] > .tab-middle:after {
+  transition: transform 280ms ease, opacity 280ms ease;
+  position: absolute;
+  display: block;
+  content: '';
+  left: 0;
+  right: 0;
+  height: 2px;
+  background-color: var(--primary-color);
+  border-radius: 2px;
+  bottom: -12px;
+  opacity: 0;
+  transform: scaleX(0);
+}
+
+.hub-tabs tab[visuallyselected="true"] > .tab-middle:after {
+  transform: scaleX(1);
+  opacity: 1;
+}
+
+.hub-tabs tab[visuallyselected="true"] {
+  color: var(--primary-color);
+}
+
+.hub-tabs tab + tab {
+  margin-inline-start: 0px;
+}
+
+.hub-tabpanels {
+  -moz-appearance: none;
+}
+/* END Custom tabbox style =================================== */
+
+/* Footer style =================================== */
+.hub-footer {
+  padding: 20px;
+}
+
+.btn-link {
+  color: var(--primary-color);
+  -moz-appearance: none;
+  font-size: 0.95rem;
+  cursor: pointer;
+}
+
+.btn-link:hover {
+  color: var(--primary-color-hover) !important;
+}
+
+.footer-links {
+  margin-top: 20px;
+}
+
+.footer-links a {
+  color: var(--text-color);
+  -moz-margin-start: 4px;
+  -moz-margin-end: 4px;
+}
+
+separator.dot {
+  background: var(--text-color);
+  height: 2px;
+  width: 2px;
+  border-radius: 2px;
+  -moz-margin-end: 2px;
+  -moz-margin-start: 2px;
+  vertical-align: middle;
+}
+/* END Footer style =================================== */
+
+/* Custom buttons style =================================== */
+.btn-hub {
+  transition: background-color 280ms ease,
+              color 280ms ease,
+              box-shadow 280ms ease,
+              transform 280ms ease;
+  -moz-appearance: none;
+  font-size: 15px;
+  color: var(--primary-color);
+  background-color: var(--btn-bg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+  padding: 15px 25px;
+  border-radius: 2px;
+  margin: 10px 0;
+  cursor: pointer;
+  box-shadow: 0 5px 5px -5px var(--btn-shadow-hover);
+  transform: translateY(0px);
+}
+
+.btn-hub:hover {
+  color: var(--primary-color-hover) !important;
+  background-color: var(--btn-bg-hover);
+  box-shadow: 0 14px 16px -12px rgba(0,0,0,0.2);
+  transform: translateY(-5px);
+}
+
+.btn-hub image {
+  margin-inline-end: 10px;
+}
+
+.btn-hub-primary {
+  background-image: linear-gradient(45deg, #007FFE 0%, #005CE3 100%);
+  background-color: var(--primary-color);
+  color: #FFFFFF;
+}
+
+.btn-hub-primary:hover {
+  background-color: var(--primary-color-hover);
+  color: #FFFFFF !important;
+}
+/* END Custom buttons style =================================== */
+
+/* Form Fields style =================================== */
+.form-control {
+  position: relative;
+  margin-bottom: 10px;
+}
+
+.input-control {
+  display: flex;
+  align-items: stretch;
+}
+
+.hub-field {
+  padding: 5px 30px 5px 6px;
+  flex-grow: 1;
+  margin: 2px 4px;
+  width: 4rem;
+}
+
+.input-field {
+  padding: 2px 2px 3px;
+  margin: 2px 4px;
+  flex-grow: 1;
+  width: 4rem;
+}
+
+.hub-field[error="true"] {
+  box-shadow: 0 0 2px 1px var(--warning-color);
+}
+
+.form-icon {
+  cursor: pointer;
+  -moz-context-properties: fill, stroke-opacity;
+  fill: currentColor;
+  margin-left: -26px;
+  margin-right: 10px;
+  color: var(--text-color);
+}
+
+.icon-info {
+  list-style-image: url("chrome://messenger/skin/icons/info.svg");
+}
+
+.icon-hidden {
+  list-style-image: url("chrome://messenger/skin/icons/hidden.svg");
+}
+
+.icon-visible {
+  list-style-image: url("chrome://messenger/skin/icons/visible.svg");
+}
+
+.icon-warning {
+  list-style-image: url("chrome://global/skin/icons/warning.svg");
+  color: var(--warning-color);
+}
+/* END Form Fields style =================================== */
+
+.config-area {
+  background-color: var(--config-bg);
+  padding: 10px 20px;
+  margin-top: 10px;
+}
+
+.column-title {
+  text-transform: uppercase;
+  text-align: center;
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.manual-row {
+  margin-bottom: 5px;
+}
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/mail/themes/shared/mail/icons/check.svg
@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="context-fill" d="M6 14a1 1 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.639 1.146l-7 10a1 1 0 0 1-.732.427A.863.863 0 0 1 6 14z"></path></svg>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/mail/themes/shared/mail/icons/exclude.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16px" height="16px">
+  <path d="M 10.508 3.674 C 9.77 3.246 8.914 3 8 3 C 5.24 3 3 5.24 3 8 L 3 8 C 3 8.914 3.246 9.77 3.674 10.508 L 10.508 3.674 Z  M 12.326 5.492 C 12.754 6.23 13 7.086 13 8 C 13 10.76 10.76 13 8 13 C 7.086 13 6.23 12.754 5.492 12.326 L 12.326 5.492 Z  M 1 8 C 1 4.137 4.137 1 8 1 C 11.863 1 15 4.137 15 8 C 15 11.863 11.863 15 8 15 C 4.137 15 1 11.863 1 8 L 1 8 Z" fill-rule="evenodd" fill="context-fill"/>
+</svg>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/mail/themes/shared/mail/icons/hidden.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="16px" height="12px" viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M 4.9553418,9.3482143 5.6517704,8.0892857 C 4.6160561,7.3392856 3.9999846,6.1339284 3.9999846,4.8571427 c 0,-0.7053572 0.1875,-1.4017858 0.5446429,-2.0089286 -1.3928571,0.7142857 -2.5535715,1.8392858 -3.4017858,3.1517858 0.9285714,1.4375 2.2410714,2.6428572 3.8125001,3.3482144 z m 3.4732143,-6.776786 c 0,-0.2321428 -0.1964286,-0.4285714 -0.4285714,-0.4285714 -1.4910714,0 -2.7142857,1.2232143 -2.7142857,2.7142858 0,0.2321429 0.1964285,0.4285715 0.4285714,0.4285715 0.2321429,0 0.4285715,-0.1964286 0.4285715,-0.4285715 0,-1.0267857 0.8392856,-1.8571429 1.8571428,-1.8571429 0.2321428,0 0.4285714,-0.1964286 0.4285714,-0.4285715 z M 11.669628,0.8660711 c 0,0.017857 0,0.0625 -0.0089,0.080357 C 9.7767705,4.3124998 7.910699,7.6964285 6.0267704,11.0625 l -0.4375,0.794643 C 5.5356984,11.946429 5.4374846,12 5.3392704,12 5.1785561,12 4.3303418,11.482143 4.1428417,11.375 4.053556,11.321429 3.9999846,11.232143 3.9999846,11.125 c 0,-0.142857 0.3035715,-0.625 0.3928572,-0.776786 C 2.6606988,9.5625 1.2053417,8.2232143 0.17855593,6.6160713 0.0624845,6.4374999 -1.5497209e-5,6.2232141 -1.5497209e-5,5.9999999 -1.5497209e-5,5.7857142 0.0624845,5.5624998 0.17855593,5.3839285 1.9464131,2.6696426 4.7053417,0.8571426 7.9999847,0.8571426 c 0.5357143,0 1.0803572,0.053571 1.607143,0.1517857 L 10.08927,0.1428569 C 10.14284,0.0535709 10.232128,-3e-7 10.339271,-3e-7 c 0.160714,0 1,0.5178572 1.1875,0.625 0.08929,0.053571 0.142857,0.1428572 0.142857,0.2410714 z m 0.330357,3.9910716 c 0,1.6607143 -1.026786,3.1428572 -2.5714288,3.732143 l 2.4999998,-4.482143 c 0.04464,0.25 0.07143,0.5 0.07143,0.75 z m 4,1.1428572 c 0,0.2321428 -0.0625,0.4196428 -0.178571,0.6160714 -0.276786,0.4553572 -0.625001,0.8928571 -0.973215,1.2946429 -1.75,2.0089286 -4.160714,3.2321428 -6.8482143,3.2321428 L 8.6606991,9.9642857 C 11.258913,9.7410715 13.464271,8.1607143 14.857128,5.9999999 14.196413,4.9732141 13.3482,4.0714284 12.33927,3.3749998 l 0.562501,-1 c 1.107143,0.7410715 2.223214,1.8571429 2.919643,3.0089287 0.116071,0.1964285 0.178571,0.3839285 0.178571,0.6160714 z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/mail/themes/shared/mail/icons/information.svg
@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="context-fill" d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8zM8 2a6 6 0 1 0 6 6 6.006 6.006 0 0 0-6-6z"></path><path fill="context-fill" d="M8 7a1 1 0 0 0-1 1v3a1 1 0 0 0 2 0V8a1 1 0 0 0-1-1z"></path><circle cx="8" cy="5" r="1.188"></circle></svg>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/mail/themes/shared/mail/icons/more.svg
@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="context-fill" d="M2 6a2 2 0 1 0 2 2 2 2 0 0 0-2-2zm6 0a2 2 0 1 0 2 2 2 2 0 0 0-2-2zm6 0a2 2 0 1 0 2 2 2 2 0 0 0-2-2z"></path></svg>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/mail/themes/shared/mail/icons/visible.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" fill="context-fill" viewBox="0 0 16 11" height="11px" width="16px">
+  <path d="M 14.857143,5.4571427 C 14.008929,4.1446427 12.848214,3.0196426 11.455357,2.3053569 11.8125,2.9124997 12,3.6089283 12,4.3142855 c 0,2.2053572 -1.794643,4.0000001 -3.9999998,4.0000001 -2.2053572,0 -4.0000001,-1.7946429 -4.0000001,-4.0000001 0,-0.7053572 0.1875,-1.4017858 0.5446429,-2.0089286 -1.3928571,0.7142857 -2.5535715,1.8392858 -3.4017858,3.1517858 1.5267857,2.357143 3.9910715,4.0000001 6.857143,4.0000001 2.8660708,0 5.3303578,-1.6428571 6.8571428,-4.0000001 z M 8.4285716,2.0285712 c 0,-0.2321429 -0.1964286,-0.4285715 -0.4285714,-0.4285715 -1.4910714,0 -2.7142857,1.2232144 -2.7142857,2.7142858 0,0.2321429 0.1964285,0.4285715 0.4285714,0.4285715 0.2321429,0 0.4285715,-0.1964286 0.4285715,-0.4285715 0,-1.0178571 0.8392856,-1.8571429 1.8571428,-1.8571429 0.2321428,0 0.4285714,-0.1964286 0.4285714,-0.4285714 z M 16,5.4571427 C 16,5.6803569 15.92857,5.8857141 15.821429,6.0732141 14.178572,8.7785713 11.169643,10.6 8.0000002,10.6 4.8303573,10.6 1.8214287,8.7696428 0.17857143,6.0732141 0.07142858,5.8857141 0,5.6803569 0,5.4571427 0,5.2339284 0.07142858,5.0285712 0.17857143,4.8410713 1.8214287,2.1446425 4.8303573,0.3142854 8.0000002,0.3142854 c 3.1696428,0 6.1785718,1.8303571 7.8214288,4.5267859 C 15.928571,5.0285712 16,5.2339284 16,5.4571427 Z"/>
+</svg>
--- a/mail/themes/windows/jar.mn
+++ b/mail/themes/windows/jar.mn
@@ -5,16 +5,17 @@
 classic.jar:
 % skin messenger classic/1.0 %skin/classic/messenger/
 #include ../shared/jar.inc.mn
   skin/classic/messenger/primaryToolbar.css                   (mail/primaryToolbar.css)
   skin/classic/messenger/accountCentral.css                   (mail/accountCentral.css)
   skin/classic/messenger/accountCreation.css                  (mail/accountCreation.css)
   skin/classic/messenger/accountManage.css                    (mail/accountManage.css)
   skin/classic/messenger/accountWizard.css                    (mail/accountWizard.css)
+  skin/classic/messenger/creationDialog.css                   (mail/creationDialog.css)
 * skin/classic/messenger/chat.css                             (mail/chat.css)
 * skin/classic/messenger/imAccounts.css                       (../../components/im/themes/imAccounts.css)
 * skin/classic/messenger/imAccountWizard.css                  (../../components/im/themes/imAccountWizard.css)
   skin/classic/messenger/imMenulist.css                       (../../components/im/themes/imMenulist.css)
 * skin/classic/messenger/imRichlistbox.css                    (../../components/im/themes/imRichlistbox.css)
   skin/classic/messenger/founder.png                          (../../components/im/themes/founder.png)
   skin/classic/messenger/operator.png                         (../../components/im/themes/operator.png)
   skin/classic/messenger/half-operator.png                    (../../components/im/themes/half-operator.png)
--- a/mail/themes/windows/mail/accountCreation.css
+++ b/mail/themes/windows/mail/accountCreation.css
@@ -6,17 +6,17 @@
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 /* ::::: BUTTONS ::::: */
 
 .important-button {
   font-weight: bold;
 }
 
-/* Set the order of the buttons to: (stop|re-test), (continue|create account), cancel */
+/* Set the order of the buttons to: (stop|test), (continue|create account), cancel */
 #stop_button, #half-manual-test_button {
   -moz-box-ordinal-group: 1;
 }
 #next_button, #create_button {
   -moz-box-ordinal-group: 2;
 }
 #cancel_button {
   -moz-box-ordinal-group: 3;
@@ -53,39 +53,21 @@ menulist[disabled="true"] > .menulist-dr
 #config_status_title {
   font-weight: bold;
 }
 
 .mastervbox {
   padding: 8px;
 }
 
-#warningbox {
-  width: 650px;
-  height: 400px;
-}
-
 .outgoing_hostname {
   margin-bottom: 4px !important;
   margin-top: 4px !important;
 }
 
-#result-username {
-  margin-inline-start: 1px;
-}
-
-textbox[disabled="true"],
-input[disabled="true"],
-menulist[disabled="true"] {
-  -moz-appearance: none;
-  border: 0;
-  background-color: -moz-dialog;
-  color: -moz-DialogText;
-}
-
 textbox.padded html|*.textbox-input::placeholder {
   font-style: normal;
 }
 
 .textbox-input-box {
   padding-top: 2px;
   padding-bottom: 1px;
 }
new file mode 100644
--- /dev/null
+++ b/mail/themes/windows/mail/creationDialog.css
@@ -0,0 +1,5 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@import url("chrome://messenger/skin/shared/creationDialog.css");
--- a/mailnews/base/prefs/content/accountUtils.js
+++ b/mailnews/base/prefs/content/accountUtils.js
@@ -427,18 +427,18 @@ function msgNewMailAccount(msgWindow, ok
     throw new Error("msgNewMailAccount must be given a msgWindow.");
 
   let existingWindow = Services.wm.getMostRecentWindow("mail:autoconfig");
   if (existingWindow) {
     existingWindow.focus();
   } else if (AppConstants.MOZ_APP_NAME == "thunderbird") {
     // disabling modal for the time being, see 688273 REMOVEME
     window.openDialog("chrome://messenger/content/accountcreation/emailWizard.xul",
-                      "AccountSetup", "chrome,titlebar,centerscreen",
-                      { msgWindow, okCallback, extraData });
+      "AccountSetup", "chrome,titlebar,centerscreen,resizable",
+      { msgWindow, okCallback, extraData });
   }
 
   /*
   // TODO: Enable this block of code once the dialog above is made modal.
   // If we started with no servers at all and "smtp servers" list selected,
   // refresh display somehow. Bug 58506.
   // TODO Better fix: select newly created account (in all cases)
   let existingAccountManager =