Bug 1590503 - Only resize mail account setup dialog to make it bigger; let subtitle wrap if needed. r=jorgk
authorAlessandro Castellani <alessandro@thunderbird.net> and Richard Marti <richard.marti@gmail.com>
Wed, 30 Oct 2019 17:38:00 +0100
changeset 28055 7c267fcfa4826158825055e2ecbf2a3702ed2e80
parent 28054 1902ef02323e01c66123dcc658181e842fd6f564
child 28056 57ed655003489810c820fce4ff0eeab7aa25c95d
push id16630
push usermozilla@jorgk.com
push dateWed, 30 Oct 2019 16:41:07 +0000
treeherdercomm-central@7c267fcfa482 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjorgk
bugs1590503
Bug 1590503 - Only resize mail account setup dialog to make it bigger; let subtitle wrap if needed. r=jorgk
mail/components/accountcreation/content/emailWizard.js
mail/components/accountcreation/content/emailWizard.xul
mail/themes/shared/mail/creationDialog.css
--- a/mail/components/accountcreation/content/emailWizard.js
+++ b/mail/components/accountcreation/content/emailWizard.js
@@ -147,16 +147,17 @@ function removeChildNodes(el) {
   while (el.hasChildNodes()) {
     el.lastChild.remove();
   }
 }
 
 function EmailConfigWizard() {
   this._init();
 }
+
 EmailConfigWizard.prototype = {
   _init() {
     gEmailWizardLogger.info("Initializing setup wizard");
     this._abortable = null;
   },
 
   onLoad() {
     /**
@@ -276,16 +277,36 @@ EmailConfigWizard.prototype = {
     _hide("manual-edit_area");
 
     this.switchToMode("start");
     e("realname").select();
     window.sizeToContent();
   },
 
   /**
+   * Resize the window based on the content height and width.
+   * Since the sizeToContent() method doesn't account for the height of
+   * wrapped text, we're checking if the width and height of the "mastervbox"
+   * is taller than the window width and height. This is necessary to account
+   * for l10n strings or the user manually resizing the window. Bug 1590503.
+   */
+  resizeDialog() {
+    let contentHeight = document.getElementById("mastervbox").clientHeight;
+    let contentWidth = document.getElementById("mastervbox").clientWidth;
+
+    if (contentHeight > window.innerHeight) {
+      window.innerHeight = contentHeight;
+    }
+
+    if (contentWidth > window.innerWidth) {
+      window.innerWidth = contentWidth;
+    }
+  },
+
+  /**
    * 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
    *    "result" : We found a config and display it to the user.
    *       The user may create the account.
    *    "manual-edit" : The user wants (or needs) to manually enter their
@@ -297,17 +318,16 @@ 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") {
@@ -400,17 +420,17 @@ EmailConfigWizard.prototype = {
     // the advanced config button if we have a current config.
     if (Services.io.offline) {
       if (this._currentConfig != null) {
         _hide("half-manual-test_button");
         _hide("create_button");
         _hide("manual-edit_button");
       }
     }
-    window.sizeToContent();
+    this.resizeDialog();
 
     // In a new profile, the first request to live.thunderbird.net
     // is much slower because of one-time overheads.
     // Let's create some dummy requests to prime the connections.
     fetch(Services.prefs.getCharPref("mailnews.auto_config_url"), {
       method: "OPTIONS",
     });
     fetch(Services.prefs.getCharPref("mailnews.auto_config.addons_url"), {
@@ -714,17 +734,17 @@ EmailConfigWizard.prototype = {
         // success
         self._abortable = null;
         self.foundConfig(config);
         self.stopSpinner(
           Services.io.offline
             ? "guessed_settings_offline"
             : "found_settings_guess"
         );
-        window.sizeToContent();
+        this.resizeDialog();
       },
       function(e, config) {
         // guessconfig failed
         if (e instanceof CancelledException) {
           return;
         }
         self._abortable = null;
         gEmailWizardLogger.info("guessConfig failed: " + e);
@@ -811,26 +831,26 @@ EmailConfigWizard.prototype = {
   },
 
   stopSpinner(actionStrName) {
     if (!actionStrName) {
       e("status-area").removeAttribute("status");
       this._showStatusTitle("");
       _hide("stop_button");
       gEmailWizardLogger.warn("all spinner stop");
-      window.sizeToContent();
+      this.resizeDialog();
       return;
     }
 
     e("status-area").setAttribute("status", "result");
 
     this._showStatusTitle(actionStrName);
     _hide("stop_button");
     gEmailWizardLogger.warn("all spinner stop " + actionStrName);
-    window.sizeToContent();
+    this.resizeDialog();
   },
 
   showErrorStatus(actionStrName) {
     e("status-area").setAttribute("status", "error");
     gEmailWizardLogger.warn("status error " + actionStrName);
     this._showStatusTitle(actionStrName);
   },
 
@@ -1016,25 +1036,25 @@ EmailConfigWizard.prototype = {
               "gEmailConfigWizard.addonInstall(this.addon);"
             );
             buttonE.addon = addon;
           }
           _show("result_addon_install");
           _disable("create_button");
         }
 
-        window.sizeToContent();
+        this.resizeDialog();
       })();
       return;
     }
 
     _show("result_hostnames");
     _hide("result_exchange");
     _enable("create_button");
-    window.sizeToContent();
+    this.resizeDialog();
 
     var unknownString = gStringsBundle.getString("resultUnknown");
 
     function _makeHostDisplayString(server, descrE) {
       let type = gStringsBundle.getString(
         sanitize.translate(server.type, {
           imap: "resultIMAP",
           pop3: "resultPOP3",
@@ -1980,17 +2000,17 @@ EmailConfigWizard.prototype = {
       },
       function(e) {
         // failed
         // Could be a wrong password, but there are 1000 other
         // reasons why this failed. Only the backend knows.
         // If we got no message, then something other than VerifyLogon failed.
         self.showErrorMsg(e.message || e.toString());
 
-        window.sizeToContent();
+        this.resizeDialog();
         // 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");
       }
     );
   },
@@ -2220,31 +2240,31 @@ SecurityWarningDialog.prototype = {
       _hide("outgoing_box");
     }
     _show("acknowledge_warning");
     assert(
       !e("incoming_box").hidden || !e("outgoing_box").hidden,
       "warning dialog shown for unknown reason"
     );
 
-    window.sizeToContent();
+    this.resizeDialog();
   },
 
   toggleDetails(id) {
     let details = e(id + "_details");
     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();
+    this.resizeDialog();
   },
 
   /**
    * user checked checkbox that he understood it and wishes
    * to ignore the warning.
    */
   toggleAcknowledge() {
     if (e("acknowledge_warning").checked) {
@@ -2255,17 +2275,17 @@ SecurityWarningDialog.prototype = {
   },
 
   /**
    * [Cancel] button pressed. Get me out of here!
    */
   onCancel() {
     _hide("warningbox");
     _show("mastervbox");
-    window.sizeToContent();
+    this.resizeDialog();
 
     this._cancelCallback();
   },
 
   /**
    * [OK] button pressed.
    * Implies that the user toggled the acknowledge checkbox,
    * i.e. approved the config and ignored the warnings,
@@ -2282,17 +2302,17 @@ SecurityWarningDialog.prototype = {
 
     // need filled in, in case hostname is placeholder
     var storeConfig = this._currentConfigFilledIn.copy();
     this._acknowledged.push(storeConfig.incoming);
     this._acknowledged.push(storeConfig.outgoing);
 
     _show("mastervbox");
     _hide("warningbox");
-    window.sizeToContent();
+    this.resizeDialog();
 
     this._okCallback();
   },
 
   /**
    * Shows a(nother) dialog which allows the user to see and override
    * (manually accept) a bad certificate. It also optionally adds it
    * permanently to the "good certs" store of NSS in the profile.
--- a/mail/components/accountcreation/content/emailWizard.xul
+++ b/mail/components/accountcreation/content/emailWizard.xul
@@ -117,17 +117,17 @@
     </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 class="hub-subtitle">&emailWizard.title;</description>
         <description>&emailWizard.caption;</description>
       </vbox>
 
       <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"
--- a/mail/themes/shared/mail/creationDialog.css
+++ b/mail/themes/shared/mail/creationDialog.css
@@ -72,17 +72,18 @@
 }
 
 .hub-title {
   font-size: x-large;
 }
 
 .hub-subtitle {
   font-size: large;
-  margin-bottom: 5px;
+  margin: 0 0 5px;
+  text-align: center;
 }
 
 .hub-description {
   font-size: medium;
 }
 
 /* Custom tabbox style =================================== */
 .hub-tabs {
@@ -296,9 +297,9 @@ separator.dot {
   text-transform: uppercase;
   text-align: center;
   font-size: 10px;
   font-weight: 600;
 }
 
 .manual-row {
   margin-bottom: 5px;
-}
\ No newline at end of file
+}