Bug 636014 - [autoconfig] Align labels and textfields on the existing account wizard. r=bwinton,ui-review=andreasn,a=Standard8. Patch by Standard8, theme tweaks by Richard Marti
authorMark Banner <bugzilla@standard8.plus.com>
Mon, 13 Feb 2012 14:12:57 +0000
changeset 10170 6fa3d8b42adeb4f861f7a3bcb6efb43a1433a6d8
parent 10169 e5f48721a62908856f2bb566ff441a06d6bae33f
child 10171 66d01c6ae24489154dc693e5d18290a4edf985e0
push idunknown
push userunknown
push dateunknown
reviewersbwinton, Standard8
bugs636014
Bug 636014 - [autoconfig] Align labels and textfields on the existing account wizard. r=bwinton,ui-review=andreasn,a=Standard8. Patch by Standard8, theme tweaks by Richard Marti
mail/themes/gnomestripe/mail/accountCreation.css
mail/themes/pinstripe/mail/accountCreation.css
mail/themes/qute/mail/accountCreation.css
mailnews/base/prefs/content/accountcreation/emailWizard.js
mailnews/base/prefs/content/accountcreation/emailWizard.xul
--- a/mail/themes/gnomestripe/mail/accountCreation.css
+++ b/mail/themes/gnomestripe/mail/accountCreation.css
@@ -33,20 +33,20 @@ menulist[disabled="true"] > .menulist-dr
 #outgoing_protocol {
   padding: 6px;
 }
 
 window {
   -moz-appearance: none;
 }
 
-vbox.icon {
-  width: 22px;
-  height: 22px;
-  background-repeat: no-repeat;
+image.warningicon {
+  width: 16px;
+  height: 16px;
+  background: url("chrome://global/skin/icons/warning-16.png") no-repeat;
 }
 
 image.insecureLarry {
   height: 64px;
   width: 64px;
   padding: 0;
   background: url("chrome://global/skin/icons/sslWarning.png") no-repeat;
 }
@@ -174,39 +174,32 @@ textbox.host {
 }
 
 menulist.host {
   width: 12em;
   margin-bottom: 4px !important;
   margin-top: 4px !important;
 }
 
-textbox[disabled="true"] {
-  -moz-appearance: textfield;
-  color: -moz-DialogText;
-}
-
 .technical_details {
   cursor: pointer;
   margin: 0px;
   padding-left: 20px;
   background: url("chrome://messenger/skin/section_collapsed.png") left 0 no-repeat;
 }
 
 .technical_details[expanded] {
   background-image: url("chrome://messenger/skin/section_expanded.png");
 }
 
 label.autoconfigLabel {
-  width: 100px;
   text-align: right;
 }
 
 label.textbox-label {
-  width: 58px;
   text-align: right;
 }
 
 textbox[disabled="true"],
 input[disabled="true"],
 menulist[disabled="true"] {
   -moz-appearance: none;
   border: 0;
--- a/mail/themes/pinstripe/mail/accountCreation.css
+++ b/mail/themes/pinstripe/mail/accountCreation.css
@@ -23,20 +23,20 @@
 /* Missing:
  * #config_status_title
  */
 
 window {
   -moz-appearance: none;
 }
 
-vbox.icon {
-  width: 22px;
-  height: 22px;
-  background-repeat: no-repeat;
+image.warningicon {
+  width: 16px;
+  height: 16px;
+  background: url("chrome://global/skin/icons/warning-16.png") no-repeat;
 }
 
 image.insecureLarry {
   height: 64px;
   width: 64px;
   padding: 0;
   background: url("chrome://global/skin/icons/sslWarning.png") no-repeat;
 }
@@ -126,20 +126,16 @@ checkbox.acknowledge_checkbox {
 }
 
 .popup-panel {
   padding: 2px 3px;
   background-color: #ffffc7;
   max-width: 320px;
 }
 
-/* Missing:
- * label.textbox-label
- */
-
 .protocol {
   width: 8em;
 }
 
 .protocol > label {
   -moz-padding-start: 6px;
 }
 
@@ -180,22 +176,20 @@ menulist.host {
   background: url("chrome://messenger/skin/section_collapsed.png") left 0 no-repeat;
 }
 
 .technical_details[expanded] {
   background-image: url("chrome://messenger/skin/section_expanded.png");
 }
 
 label.autoconfigLabel {
-  width: 80px;
   text-align: right;
 }
 
 label.textbox-label {
-  width: 58px;
   text-align: right;
 }
 
 textbox[disabled="true"],
 input[disabled="true"],
 menulist[disabled="true"] {
   -moz-appearance: none;
   border: 0;
--- a/mail/themes/qute/mail/accountCreation.css
+++ b/mail/themes/qute/mail/accountCreation.css
@@ -1,8 +1,10 @@
+@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 */
 #stop_button, #half-manual-test_button {
@@ -48,20 +50,20 @@ menulist[disabled="true"] > .menulist-dr
   font-weight: bold;
 }
 
 window {
   -moz-appearance: none;
   padding: 14px;
 }
 
-vbox.icon {
-  width: 22px;
-  height: 22px;
-  background-repeat: no-repeat;
+image.warningicon {
+  width: 16px;
+  height: 16px;
+  background: url("chrome://global/skin/icons/warning-16.png") no-repeat;
 }
 
 image.insecureLarry {
   height: 64px;
   width: 64px;
   padding: 0;
   background: url("chrome://global/skin/icons/sslWarning.png") no-repeat;
 }
@@ -186,50 +188,47 @@ textbox.host {
 }
 
 menulist.host {
   width: 12em;
   margin-bottom: 4px !important;
   margin-top: 4px !important;
 }
 
-/* Missing:
- * textbox[disabled="true"]
- */
-
 .technical_details {
   cursor: pointer;
   margin: 0px;
   padding-left: 20px;
   background: url("chrome://messenger/skin/section_collapsed.png") left 0 no-repeat;
 }
 
 .technical_details[expanded] {
   background-image: url("chrome://messenger/skin/section_expanded.png");
 }
 
 label.autoconfigLabel {
-  width: 80px;
   text-align: right;
 }
 
 label.textbox-label {
-  width: 58px;
   text-align: right;
 }
 
 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:-moz-placeholder {
+  font-style: normal;
+}
 
 /* status area */
 
 #status_area[status=loading] #status_msg {
   font-weight: bold;
 }
 
 #status_area[status=error] #status_msg {
--- a/mailnews/base/prefs/content/accountcreation/emailWizard.js
+++ b/mailnews/base/prefs/content/accountcreation/emailWizard.js
@@ -1451,16 +1451,17 @@ EmailConfigWizard.prototype =
   },
 
   setError : function(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); }
   },
 
 
 
   /////////////////////////////////////////////////////////////////
   // Finish & dialog close functions
 
--- a/mailnews/base/prefs/content/accountcreation/emailWizard.xul
+++ b/mailnews/base/prefs/content/accountcreation/emailWizard.xul
@@ -152,76 +152,89 @@
   </tooltip>
   <tooltip id="optional-password">
     <description>&password.text;</description>
   </tooltip>
 
   <spacer id="fullwidth"/>
 
   <vbox id="mastervbox" class="mastervbox" flex="1">
-    <groupbox id="initialSettings">
-      <hbox align="center">
-        <label accesskey="&name.accesskey;"
-               class="autoconfigLabel"
-               value="&name.label;"
-               control="realname"/>
-        <textbox id="realname"
-                 class="padded"
-                 placeholder="&name.placeholder;"
-                 oninput="gEmailConfigWizard.onInputRealname();"
-                 onblur="gEmailConfigWizard.onBlurRealname();"/>
-        <description id="nametext" class="initialDesc">&name.text;</description>
-        <image id="nameerroricon"
-               hidden="true"
-               src="chrome://global/skin/icons/warning-16.png"/>
-        <description id="nameerror" class="errordescription" hidden="true"/>
-      </hbox>
-      <hbox align="center">
-        <label accesskey="&email.accesskey;"
-               class="autoconfigLabel"
-               value="&email.label;"
-               control="email"/>
-        <textbox id="email"
-                 class="padded uri-element"
-                 placeholder="&email.placeholder;"
-                 oninput="gEmailConfigWizard.onInputEmail();"
-                 onblur="gEmailConfigWizard.onBlurEmail();"/>
-        <image id="emailerroricon"
-               hidden="true"
-               src="chrome://global/skin/icons/warning-16.png"/>
-        <description id="emailerror" class="errordescription" hidden="true"/>
-      </hbox>
-      <hbox 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"
-               value="&password.label;"
-               control="password"
-               tooltip="optional-password"/>
-        <textbox id="password"
-                 class="padded"
-                 placeholder="&password.placeholder;"
-                 type="text"
-                 oninput="gEmailConfigWizard.onInputPassword();"
-                 onfocus="gEmailConfigWizard.onFocusPassword();"
-                 onblur="gEmailConfigWizard.onBlurPassword();"/>
-        <image id="passworderroricon"
-               hidden="true"
-               src="chrome://global/skin/icons/warning-16.png"/>
-        <description id="passworderror" class="errordescription" hidden="true"/>
-      </hbox>
-      <hbox align="center" pack="start">
-        <label class="autoconfigLabel"/>
-        <checkbox id="remember_password"
-                  label="&rememberPassword.label;"
-                  accesskey="&rememberPassword.accesskey;"
-                  checked="true"/>
-      </hbox>
-    </groupbox>
+    <grid id="initialSettings">
+      <columns>
+        <column/>
+        <column/>
+        <column/>
+      </columns>
+      <rows>
+        <row align="center">
+          <label accesskey="&name.accesskey;"
+                 class="autoconfigLabel"
+                 value="&name.label;"
+                 control="realname"/>
+          <textbox id="realname"
+                   class="padded"
+                   placeholder="&name.placeholder;"
+                   oninput="gEmailConfigWizard.onInputRealname();"
+                   onblur="gEmailConfigWizard.onBlurRealname();"/>
+          <hbox>
+            <description id="nametext" class="initialDesc">&name.text;</description>
+            <image id="nameerroricon"
+                   hidden="true"
+                   class="warningicon"/>
+            <description id="nameerror" class="errordescription" hidden="true"/>
+          </hbox>
+        </row>
+        <row align="center">
+          <label accesskey="&email.accesskey;"
+                 class="autoconfigLabel"
+                 value="&email.label;"
+                 control="email"/>
+          <textbox id="email"
+                   class="padded uri-element"
+                   placeholder="&email.placeholder;"
+                   oninput="gEmailConfigWizard.onInputEmail();"
+                   onblur="gEmailConfigWizard.onBlurEmail();"/>
+          <hbox>
+            <image id="emailerroricon"
+                   hidden="true"
+                   class="warningicon"/>
+            <description id="emailerror" class="errordescription" hidden="true"/>
+          </hbox>
+        </row>
+        <row 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"
+                 value="&password.label;"
+                 control="password"
+                 tooltip="optional-password"/>
+          <textbox id="password"
+                   class="padded"
+                   placeholder="&password.placeholder;"
+                   type="text"
+                   oninput="gEmailConfigWizard.onInputPassword();"
+                   onfocus="gEmailConfigWizard.onFocusPassword();"
+                   onblur="gEmailConfigWizard.onBlurPassword();"/>
+          <hbox>
+            <image id="passworderroricon"
+                   hidden="true"
+                   class="warningicon"/>
+            <description id="passworderror" class="errordescription" hidden="true"/>
+          </hbox>
+        </row>
+        <row align="center" pack="start">
+          <label class="autoconfigLabel"/>
+          <checkbox id="remember_password"
+                    label="&rememberPassword.label;"
+                    accesskey="&rememberPassword.accesskey;"
+                    checked="true"/>
+        </row>
+      </rows>
+    </grid>
     <spacer flex="1" />
 
      <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. -->
@@ -230,28 +243,39 @@
 
     <groupbox id="result_area" hidden="true">
       <radiogroup id="result_imappop" orient="horizontal">
         <radio id="result_select_imap" label="&imapLong.label;" value="1"
                oncommand="gEmailConfigWizard.onResultIMAPOrPOP3();"/>
         <radio id="result_select_pop3" label="&pop3Long.label;" value="2"
                oncommand="gEmailConfigWizard.onResultIMAPOrPOP3();"/>
       </radiogroup>
-      <hbox>
-        <label class="textbox-label" value="&incoming.label;"/>
-        <description id="result-incoming" flex="1">&#160;</description>
-      </hbox>
-      <hbox>
-        <label class="textbox-label" value="&outgoing.label;"/>
-        <description id="result-outgoing" flex="1">&#160;</description>
-      </hbox>
-      <hbox>
-        <label class="textbox-label" value="&username.label;"/>
-        <description id="result-username" flex="1">&#160;</description>
-      </hbox>
+      <grid>
+        <columns>
+          <column/>
+          <column flex="1"/>
+        </columns>
+        <rows>
+          <row align="center">
+            <label class="textbox-label" value="&incoming.label;"
+                   control="result-incoming"/>
+            <textbox id="result-incoming" disabled="true" flex="1"/>
+          </row>
+          <row align="center">
+            <label class="textbox-label" value="&outgoing.label;"
+                   control="result-outgoing"/>
+            <textbox id="result-outgoing" disabled="true" flex="1"/>
+          </row>
+          <row align="center">
+            <label class="textbox-label" value="&username.label;"
+                   control="result-username"/>
+            <textbox id="result-username" disabled="true" flex="1"/>
+          </row>
+        </rows>
+      </grid>
     </groupbox>
 
     <groupbox id="manual-edit_area" hidden="true">
       <grid>
         <columns>
           <column/><!-- row label, e.g. "incoming" -->
           <column/><!-- protocol, e.g. "IMAP" -->
           <column flex="1"/><!-- hostname / username -->