Bug 63941 - "New Card layout shouldn't assume high screen resolution" [r=Standard8,sr=Neil,ui-review=clarkbw
authorFriedrich Beckmann : Fritz <friedrich.beckmann@gmx.de>
Wed, 05 Nov 2008 14:35:56 +0000
changeset 1021 4ae62e9a43c3dc39feeea1039d866ee6346afa7d
parent 1020 83675cb6e4791bf477e167591bb76fbb8b9bf419
child 1022 74a7415a42a9374076b138cd3495b06fac328659
push idunknown
push userunknown
push dateunknown
reviewersStandard8, Neil
bugs63941
Bug 63941 - "New Card layout shouldn't assume high screen resolution" [r=Standard8,sr=Neil,ui-review=clarkbw
mail/locales/en-US/chrome/messenger/addressbook/abCardOverlay.dtd
mail/themes/pinstripe/mail/addrbook/cardDialog.css
mail/themes/qute/mail/addrbook/cardDialog.css
mailnews/addrbook/resources/content/abCardOverlay.xul
suite/locales/en-US/chrome/mailnews/addressbook/abCardOverlay.dtd
suite/themes/classic/messenger/addressbook/cardDialog.css
suite/themes/modern/messenger/addressbook/cardDialog.css
--- a/mail/locales/en-US/chrome/messenger/addressbook/abCardOverlay.dtd
+++ b/mail/locales/en-US/chrome/messenger/addressbook/abCardOverlay.dtd
@@ -68,86 +68,91 @@
 <!ENTITY NickName.accesskey             "N">
 
 <!ENTITY Internet.box                   "Internet">
 <!ENTITY PrimaryEmail.label             "Email:">
 <!ENTITY PrimaryEmail.accesskey         "E">
 <!ENTITY SecondEmail.label              "Additional Email:">
 <!ENTITY SecondEmail.accesskey          "i">
 <!ENTITY PreferMailFormat.label         "Prefers to receive messages formatted as:">
-<!ENTITY PreferMailFormat.accesskey     "r">
+<!ENTITY PreferMailFormat.accesskey     "v">
 <!ENTITY PlainText.label                "Plain Text">
 <!ENTITY HTML.label                     "HTML">
 <!ENTITY Unknown.label                  "Unknown">
 <!ENTITY ScreenName.label               "Screen Name:">
 <!ENTITY ScreenName.accesskey           "S">
 
-<!ENTITY allowRemoteContent.label       "Allow remote images in HTML mail.">
-<!ENTITY allowRemoteContent.accesskey   "w">
+<!ENTITY allowRemoteContent.label       "Allow remote images.">
+<!ENTITY allowRemoteContent.accesskey   "r">
+<!ENTITY allowRemoteContent.tooltip     "In HTML messages it is possible to
+embed images from remote sources. Opening such a message will open a
+connection to this external source. This may allow tracking of the
+message being read. Checking this box will allow such external embedded
+images in HTML messages from this contact.">
 
-<!ENTITY Phones.box                     "Phones">
 <!ENTITY WorkPhone.label                "Work:">
 <!ENTITY WorkPhone.accesskey            "k">
 <!ENTITY HomePhone.label                "Home:">
 <!ENTITY HomePhone.accesskey            "o">
 <!ENTITY FaxNumber.label                "Fax:">
 <!ENTITY FaxNumber.accesskey            "x">
 <!ENTITY PagerNumber.label              "Pager:">
-<!ENTITY PagerNumber.accesskey          "P">
+<!ENTITY PagerNumber.accesskey          "g">
 <!ENTITY CellularNumber.label           "Mobile:">
 <!ENTITY CellularNumber.accesskey       "M">
 
-<!ENTITY Address.tab                    "Address">
-<!ENTITY Address.accesskey              "A">
-<!ENTITY Home.box                       "Home">
+<!ENTITY Home.tab                       "Private">
+<!ENTITY Home.accesskey                 "P">
 <!ENTITY HomeAddress.label              "Address:">
-<!ENTITY HomeAddress.accesskey          "d">
+<!ENTITY HomeAddress.accesskey          "A">
 <!ENTITY HomeAddress2.label             "">
 <!ENTITY HomeAddress2.accesskey         "">
 <!ENTITY HomeCity.label                 "City:">
 <!ENTITY HomeCity.accesskey             "y">
 <!ENTITY HomeState.label                "State/Province:">
 <!ENTITY HomeState.accesskey            "S">
 <!ENTITY HomeZipCode.label              "ZIP/Postal Code:">
 <!ENTITY HomeZipCode.accesskey          "Z">
 <!ENTITY HomeCountry.label              "Country:">
 <!ENTITY HomeCountry.accesskey          "u">
 <!ENTITY HomeWebPage.label              "Web Page:">
-<!ENTITY HomeWebPage.accesskey          "W">
-<!ENTITY Work.box                       "Work">
+<!ENTITY HomeWebPage.accesskey          "e">
+
+<!ENTITY Work.tab                       "Work">
+<!ENTITY Work.accesskey                 "W">
 <!ENTITY JobTitle.label                 "Title:">
-<!ENTITY JobTitle.accesskey             "e">
+<!ENTITY JobTitle.accesskey             "i">
 <!ENTITY Department.label               "Department:">
 <!ENTITY Department.accesskey           "m">
 <!ENTITY Company.label                  "Organization:">
 <!ENTITY Company.accesskey              "O">
 <!ENTITY WorkAddress.label              "Address:">
-<!ENTITY WorkAddress.accesskey          "r">
+<!ENTITY WorkAddress.accesskey          "A">
 <!ENTITY WorkAddress2.label             "">
 <!ENTITY WorkAddress2.accesskey         "">
 <!ENTITY WorkCity.label                 "City:">
-<!ENTITY WorkCity.accesskey             "i">
+<!ENTITY WorkCity.accesskey             "y">
 <!ENTITY WorkState.label                "State/Province:">
-<!ENTITY WorkState.accesskey            "v">
+<!ENTITY WorkState.accesskey            "S">
 <!ENTITY WorkZipCode.label              "ZIP/Postal Code:">
-<!ENTITY WorkZipCode.accesskey          "P">
+<!ENTITY WorkZipCode.accesskey          "Z">
 <!ENTITY WorkCountry.label              "Country:">
-<!ENTITY WorkCountry.accesskey          "n">
+<!ENTITY WorkCountry.accesskey          "u">
 <!ENTITY WorkWebPage.label              "Web Page:">
-<!ENTITY WorkWebPage.accesskey          "b">
+<!ENTITY WorkWebPage.accesskey          "e">
 
 <!ENTITY Other.tab                      "Other">
 <!ENTITY Other.accesskey                "h">
 <!ENTITY Birthday.label                 "Birthday:">
 <!ENTITY Birthday.accesskey             "B">
 <!ENTITY Year.emptytext                 "Year">
 <!ENTITY Or.value                       "or">
 <!ENTITY Age.emptytext                  "Age">
 <!ENTITY Custom1.label                  "Custom 1:">
 <!ENTITY Custom1.accesskey              "1">
 <!ENTITY Custom2.label                  "Custom 2:">
 <!ENTITY Custom2.accesskey              "2">
 <!ENTITY Custom3.label                  "Custom 3:">
 <!ENTITY Custom3.accesskey              "3">
 <!ENTITY Custom4.label                  "Custom 4:">
 <!ENTITY Custom4.accesskey              "4">
-<!ENTITY Notes.box                      "Notes">
+<!ENTITY Notes.label                    "Notes:">
 <!ENTITY Notes.accesskey                "N">
--- a/mail/themes/pinstripe/mail/addrbook/cardDialog.css
+++ b/mail/themes/pinstripe/mail/addrbook/cardDialog.css
@@ -42,26 +42,30 @@
 
 @import url("chrome://messenger/skin/");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 /* ::::: Card Edit dialog ::::: */
 
 .CardEditWidth {
-  width: 25em;
+  width: 42ch;
+}
+
+.PhoneEditWidth {
+  width: 24ch;
 }
 
-.CardEditLabel {
-  padding: 0px;
-  margin-top: 3px;
+.AddressCardEditWidth {
+  width: 72ch;
 }
 
-.alignBoxWithFieldset {
-  margin-left: 6px;
-  margin-right: 5px;
+.YearWidth {
+  width: 8ch;
 }
 
 .stateZipSpacer {
-  width: 3em;
+  width: 6ch;
 }
 
-
+.ZipWidth {
+  width: 14ch;
+}
--- a/mail/themes/qute/mail/addrbook/cardDialog.css
+++ b/mail/themes/qute/mail/addrbook/cardDialog.css
@@ -42,31 +42,37 @@
 
 @import url("chrome://messenger/skin/");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 /* ::::: Card Edit dialog ::::: */
 
 .CardEditWidth {
-  width: 25em;
+  width: 42ch;
+}
+
+.PhoneEditWidth {
+  width: 24ch;
 }
 
-.CardEditLabel {
-  padding: 0px;
-  margin-top: 3px;
+.AddressCardEditWidth {
+  width: 72ch;
 }
 
-.alignBoxWithFieldset {
-  -moz-margin-start: 6px;
-  -moz-margin-end: 5px;
+.YearWidth {
+  width: 8ch;
 }
 
 .stateZipSpacer {
-  width: 3em;
+  width: 6ch;
+}
+
+.ZipWidth {
+  width: 14ch;
 }
 
 /* ::::: List dialogs ::::: */
 
 #addressingWidget {
   -moz-user-focus: none;
   width: 0;
 }
--- a/mailnews/addrbook/resources/content/abCardOverlay.xul
+++ b/mailnews/addrbook/resources/content/abCardOverlay.xul
@@ -16,16 +16,17 @@
  March 31, 1998.
 
  The Initial Developer of the Original Code is
  Netscape Communications Corporation.
  Portions created by the Initial Developer are Copyright (C) 1998-1999
  the Initial Developer. All Rights Reserved.
 
  Contributor(s):
+   Friedrich Beckmann <friedrich.beckmann@gmx.de>
 
  Alternatively, the contents of this file may be used under the terms of
  either of the GNU General Public License Version 2 or later (the "GPL"),
  or the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
  in which case the provisions of the GPL or the LGPL are applicable instead
  of those above. If you wish to allow use of your version of this file only
  under the terms of either the GPL or the LGPL, and not to allow others to
  use your version of this file under the terms of the MPL, indicate your
@@ -46,365 +47,346 @@
 <stringbundleset id="stringbundleset">
   <stringbundle id="bundle_addressBook" src="chrome://messenger/locale/addressbook/addressBook.properties"/>
 </stringbundleset>
 
 <script type="application/x-javascript" src="chrome://messenger/content/addressbook/abCommon.js"/>
 <script type="application/x-javascript" src="chrome://messenger/content/addressbook/abCardOverlay.js"/>
 
 <vbox id="editcard">
-
   <tabbox>
     <tabs id="abTabs">
       <tab label="&Contact.tab;" accesskey="&Contact.accesskey;"/>
-      <tab label="&Address.tab;" accesskey="&Address.accesskey;"/>
+      <tab label="&Home.tab;" accesskey="&Home.accesskey;"/>
+      <tab label="&Work.tab;" accesskey="&Work.accesskey;"/>
       <tab label="&Other.tab;" accesskey="&Other.accesskey;"/>
     </tabs>
 
     <tabpanels id="abTabPanels" flex="1">
-
       <!-- ** Name Tab ** -->
-      <vbox index="name" flex="1">
-      <groupbox flex="1">
-        <caption label="&Name.box;"/>
-        <vbox>
-
-        <!-- LOCALIZATION NOTE: 
-        NameField1, NameField2, PhoneticField1, PhoneticField2
-        those fields are either LN or FN depends on the target country.
-        They are configurable in the .dtd file. 
-        -->
-
-          <hbox>
-            <spacer flex="1"/>
-            <label control="&NameField1.id;" value="&NameField1.label;" accesskey="&NameField1.accesskey;" class="CardEditLabel"/>
-            <hbox class="CardEditWidth">
-              <textbox id="&NameField1.id;" flex="1" oninput="GenerateDisplayName()"/>
+      <!-- The following vbox contains two hboxes
+           top: Name/Email/Phonenumber bottom: Email prefs. -->
+      <vbox id="abNameTab" >
+        <!-- This hbox contains two vboxes
+             left: Name/Email, right: Phonenumbers -->
+        <hbox>
+          <vbox> <!-- This box contains the Names and Emailnames -->
 
-              <!-- LOCALIZATION NOTE:
-              Fields for phonetic are disabled as default and can be enabled by 
-              editing "mail.addr_book.show_phonetic_fields"    
-              -->
-
-              <spacer id="PhoneticSpacer1" flex="1" hidden="true"/>
-              <label id="PhoneticLabel1" control="&PhoneticField1.id;" value="&PhoneticField1.label;" class="CardEditLabel" hidden="true"/>
-              <textbox id="&PhoneticField1.id;" flex="1" hidden="true"/>
-            </hbox>
-          </hbox>
-          <hbox>
-            <spacer flex="1"/>
-            <label control="&NameField2.id;" value="&NameField2.label;" accesskey="&NameField2.accesskey;" class="CardEditLabel"/>
-            <hbox class="CardEditWidth">
-              <textbox id="&NameField2.id;" flex="1" oninput="GenerateDisplayName()"/>
-
-              <!-- LOCALIZATION NOTE:
-              Fields for phonetic are disabled as default and can be enabled by 
-              editing "mail.addr_book.show_phonetic_fields"    
+            <!-- LOCALIZATION NOTE:
+                 NameField1, NameField2, PhoneticField1, PhoneticField2
+                 those fields are either LN or FN depends on the target country.
+                 They are configurable in the .dtd file.
               -->
 
-              <spacer id="PhoneticSpacer2" flex="1" hidden="true"/>
-              <label id="PhoneticLabel2" control="&PhoneticField2.id;" value="&PhoneticField2.label;" class="CardEditLabel" hidden="true"/>
-              <textbox id="&PhoneticField2.id;" flex="1" hidden="true"/>
-            </hbox>
-          </hbox>
-          <hbox>
-            <spacer flex="1"/>
-            <label control="DisplayName" value="&DisplayName.label;" accesskey="&DisplayName.accesskey;" class="CardEditLabel"/>
-            <hbox class="CardEditWidth">
-              <textbox id="DisplayName" flex="1" oninput="DisplayNameChanged()"/>
-            </hbox>
-          </hbox>
-          <hbox id="nickNameContainer">
-            <spacer flex="1"/>
-            <label control="NickName" value="&NickName.label;" accesskey="&NickName.accesskey;" class="CardEditLabel"/>
-            <hbox class="CardEditWidth">
-              <textbox id="NickName" flex="1"/>
-            </hbox>
-          </hbox>
-        </vbox>
-      </groupbox>
+            <hbox align="center">
+              <spacer flex="1"/>
+              <label control="&NameField1.id;" value="&NameField1.label;"
+                     accesskey="&NameField1.accesskey;"/>
+              <hbox class="CardEditWidth">
+                <textbox id="&NameField1.id;" flex="1"
+                         oninput="GenerateDisplayName()"/>
 
-      <groupbox flex="1">
-        <caption label="&Internet.box;"/>
-        <vbox>
-          <hbox>
-            <spacer flex="1"/>
-            <label control="PrimaryEmail" value="&PrimaryEmail.label;" accesskey="&PrimaryEmail.accesskey;"  class="CardEditLabel"/>
-            <hbox class="CardEditWidth">
-              <textbox id="PrimaryEmail" flex="1" class="uri-element"/>
-            </hbox>
-          </hbox>
-          <hbox id="secondaryEmailContainer">
-            <spacer flex="1"/>
-            <label control="SecondEmail" value="&SecondEmail.label;" accesskey="&SecondEmail.accesskey;" class="CardEditLabel"/>
-            <hbox class="CardEditWidth">
-              <textbox id="SecondEmail" flex="1" class="uri-element"/>
+                <!-- LOCALIZATION NOTE:
+                     Fields for phonetic are disabled as default and can be
+                     enabled by^editing "mail.addr_book.show_phonetic_fields"
+                  -->
+
+                <spacer id="PhoneticSpacer1" flex="1" hidden="true"/>
+                <label id="PhoneticLabel1" control="&PhoneticField1.id;"
+                       value="&PhoneticField1.label;" hidden="true"/>
+                <textbox id="&PhoneticField1.id;" flex="1" hidden="true"/>
+              </hbox>
             </hbox>
-          </hbox>
-          <hbox id="screenNameContainer">
-            <spacer flex="1"/>
-            <label control="ScreenName" value="&ScreenName.label;" accesskey="&ScreenName.accesskey;" class="CardEditLabel"/>
-            <hbox class="CardEditWidth">
-              <textbox id="ScreenName" flex="1"/>
-            </hbox>
-          </hbox>          
-          <hbox>
-            <vbox valign="middle">
-              <label control="PreferMailFormatPopup" value="&PreferMailFormat.label;" accesskey="&PreferMailFormat.accesskey;"/>
-            </vbox>
-            <menulist id="PreferMailFormatPopup">
-              <menupopup>
-                <!-- 0,1,2 come from nsIAbPreferMailFormat in nsIAbCard.idl -->
-                <menuitem value="0" label="&Unknown.label;"/>
-                <menuitem value="1" label="&PlainText.label;"/>
-                <menuitem value="2" label="&HTML.label;"/>
-              </menupopup>
-            </menulist>
-          </hbox>
-          <checkbox id="allowRemoteContent" label="&allowRemoteContent.label;" accesskey="&allowRemoteContent.accesskey;"/>
-        </vbox>
-      </groupbox>
+            <hbox align="center">
+              <spacer flex="1"/>
+              <label control="&NameField2.id;" value="&NameField2.label;"
+                     accesskey="&NameField2.accesskey;"/>
+              <hbox class="CardEditWidth">
+                <textbox id="&NameField2.id;" flex="1"
+                         oninput="GenerateDisplayName()"/>
 
-      <groupbox flex="1">
-        <caption label="&Phones.box;"/>
-        <vbox>
-          <hbox>
-            <spacer flex="1"/>
-            <label control="WorkPhone" value="&WorkPhone.label;" accesskey="&WorkPhone.accesskey;" class="CardEditLabel"/>
-            <hbox class="CardEditWidth">
-              <textbox id="WorkPhone" flex="1"/>
-            </hbox>
-          </hbox>
-          <hbox>
-            <spacer flex="1"/>
-            <label control="HomePhone" value="&HomePhone.label;" accesskey="&HomePhone.accesskey;" class="CardEditLabel"/>
-            <hbox class="CardEditWidth">
-              <textbox id="HomePhone" flex="1"/>
-            </hbox>
-          </hbox>
-          <hbox>
-            <spacer flex="1"/>
-            <label control="FaxNumber" value="&FaxNumber.label;" accesskey="&FaxNumber.accesskey;" class="CardEditLabel"/>
-            <hbox class="CardEditWidth">
-              <textbox id="FaxNumber" flex="1"/>
+                <!-- LOCALIZATION NOTE:
+                     Fields for phonetic are disabled as default and can be
+                     enabled by editing "mail.addr_book.show_phonetic_fields"
+                  -->
+
+                <spacer id="PhoneticSpacer2" flex="1" hidden="true"/>
+                <label id="PhoneticLabel2" control="&PhoneticField2.id;"
+                       value="&PhoneticField2.label;" hidden="true"/>
+                <textbox id="&PhoneticField2.id;" flex="1" hidden="true"/>
+              </hbox>
             </hbox>
-          </hbox>
-          <hbox>
-            <spacer flex="1"/>
-            <label control="PagerNumber" value="&PagerNumber.label;" accesskey="&PagerNumber.accesskey;" class="CardEditLabel"/>
-            <hbox class="CardEditWidth">
-              <textbox id="PagerNumber" flex="1"/>
-            </hbox>
-          </hbox>
-          <hbox>
-            <spacer flex="1"/>
-            <label control="CellularNumber" value="&CellularNumber.label;" accesskey="&CellularNumber.accesskey;" class="CardEditLabel"/>
-            <hbox class="CardEditWidth">
-              <textbox id="CellularNumber" flex="1"/>
+            <hbox align="center">
+              <spacer flex="1"/>
+              <label control="DisplayName" value="&DisplayName.label;"
+                     accesskey="&DisplayName.accesskey;" />
+              <hbox class="CardEditWidth">
+                <textbox id="DisplayName" flex="1"
+                         oninput="DisplayNameChanged()"/>
+              </hbox>
             </hbox>
-          </hbox>
-        </vbox>
-      </groupbox>
-    </vbox>
-
-    <!-- ** Address Tab ** -->
-    <vbox index="address" flex="1">
-      <groupbox id="homeAddressGroup" flex="1">
-        <caption label="&Home.box;"/>
-        <vbox>
-          <hbox>
-            <spacer flex="1"/>
-            <label control="HomeAddress" value="&HomeAddress.label;"
-                   accesskey="&HomeAddress.accesskey;" class="CardEditLabel"/>
-            <hbox class="CardEditWidth">
-              <textbox id="HomeAddress" flex="1"/>
-            </hbox>
-          </hbox>
-          <hbox>
-            <spacer flex="1"/>
-            <label control="HomeAddress2" value="&HomeAddress2.label;"
-                   accesskey="&HomeAddress2.accesskey;" class="CardEditLabel"/>
-            <hbox class="CardEditWidth">
-              <textbox id="HomeAddress2" flex="1"/>
+            <hbox id="nickNameContainer" align="center">
+              <spacer flex="1"/>
+              <label control="NickName" value="&NickName.label;"
+                     accesskey="&NickName.accesskey;"/>
+              <hbox class="CardEditWidth">
+                <textbox id="NickName" flex="1"/>
+              </hbox>
             </hbox>
-          </hbox>
-          <hbox>
-            <spacer flex="1"/>
-            <label control="HomeCity" value="&HomeCity.label;"
-                   accesskey="&HomeCity.accesskey;" class="CardEditLabel"/>
-            <hbox class="CardEditWidth">
-              <textbox id="HomeCity" flex="1"/>
-            </hbox>
-          </hbox>
-          <hbox>
-            <spacer flex="1"/>
-            <label control="HomeState" value="&HomeState.label;"
-                   accesskey="&HomeState.accesskey;" class="CardEditLabel"/>
-            <hbox class="CardEditWidth">
-              <textbox id="HomeState" flex="1"/>
-              <spacer class="stateZipSpacer"/>
-              <label control="HomeZipCode" value="&HomeZipCode.label;"
-                     accesskey="&HomeZipCode.accesskey;" class="CardEditLabel"/>
-              <textbox id="HomeZipCode" flex="1"/>
+            <hbox align="center">
+              <spacer flex="1"/>
+              <label control="PrimaryEmail" value="&PrimaryEmail.label;"
+                     accesskey="&PrimaryEmail.accesskey;"/>
+              <hbox class="CardEditWidth">
+                <textbox id="PrimaryEmail" flex="1" class="uri-element"/>
+              </hbox>
             </hbox>
-          </hbox>
-          <hbox>
-            <spacer flex="1"/>
-            <label control="HomeCountry" value="&HomeCountry.label;"
-                   accesskey="&HomeCountry.accesskey;" class="CardEditLabel"/>
-            <hbox class="CardEditWidth">
-              <textbox id="HomeCountry" flex="1"/>
+            <hbox id="secondaryEmailContainer" align="center">
+              <spacer flex="1"/>
+              <label control="SecondEmail" value="&SecondEmail.label;"
+                     accesskey="&SecondEmail.accesskey;"/>
+              <hbox class="CardEditWidth">
+                <textbox id="SecondEmail" flex="1" class="uri-element"/>
+              </hbox>
             </hbox>
-          </hbox>
-          <hbox>
-            <spacer flex="1"/>
-            <label control="WebPage2" value="&HomeWebPage.label;"
-                   accesskey="&HomeWebPage.accesskey;" class="CardEditLabel"/>
-            <hbox class="CardEditWidth">
-              <textbox id="WebPage2" flex="1" class="uri-element"/>
-            </hbox>
-          </hbox>
-        </vbox>
-      </groupbox>
-
-      <groupbox>
-        <caption label="&Work.box;"/>
-          <vbox>
-            <hbox>
+            <hbox id="screenNameContainer" align="center">
               <spacer flex="1"/>
-              <label control="JobTitle" value="&JobTitle.label;"
-                     accesskey="&JobTitle.accesskey;" class="CardEditLabel"/>
+              <label control="ScreenName" value="&ScreenName.label;"
+                     accesskey="&ScreenName.accesskey;"/>
               <hbox class="CardEditWidth">
-                <textbox id="JobTitle" flex="1"/>
+                <textbox id="ScreenName" flex="1"/>
               </hbox>
             </hbox>
-            <hbox>
+          </vbox> <!-- End of Name/Email -->
+          <!-- Phone Number section -->
+          <vbox>
+            <hbox align="center">
               <spacer flex="1"/>
-              <label control="Department" value="&Department.label;"
-                     accesskey="&Department.accesskey;" class="CardEditLabel"/>
-              <hbox class="CardEditWidth">
-                <textbox id="Department" flex="1"/>
-              </hbox>
-            </hbox>
-            <hbox>
-              <spacer flex="1"/>
-              <label control="Company" value="&Company.label;"
-                     accesskey="&Company.accesskey;" class="CardEditLabel"/>
-              <hbox class="CardEditWidth">
-                <textbox id="Company" flex="1"/>
-              </hbox>
+              <label control="WorkPhone" value="&WorkPhone.label;"
+                     accesskey="&WorkPhone.accesskey;" />
+              <textbox id="WorkPhone" class="PhoneEditWidth"/>
             </hbox>
-            <hbox>
+            <hbox align="center">
               <spacer flex="1"/>
-              <label control="WorkAddress" value="&WorkAddress.label;"
-                     accesskey="&WorkAddress.accesskey;" class="CardEditLabel"/>
-              <hbox class="CardEditWidth">
-                <textbox id="WorkAddress" flex="1"/>
-              </hbox>
+              <label control="HomePhone" value="&HomePhone.label;"
+                     accesskey="&HomePhone.accesskey;"/>
+              <textbox id="HomePhone" class="PhoneEditWidth"/>
             </hbox>
-            <hbox>
+            <hbox align="center">
               <spacer flex="1"/>
-              <label control="WorkAddress2" value="&WorkAddress2.label;"
-                     accesskey="&WorkAddress2.accesskey;" class="CardEditLabel"/>
-              <hbox class="CardEditWidth">
-                <textbox id="WorkAddress2" flex="1"/>
-              </hbox>
+              <label control="FaxNumber" value="&FaxNumber.label;"
+                     accesskey="&FaxNumber.accesskey;"/>
+              <textbox id="FaxNumber" class="PhoneEditWidth"/>
             </hbox>
-            <hbox>
+            <hbox align="center">
+              <spacer flex="1"/>
+              <label control="PagerNumber" value="&PagerNumber.label;"
+                     accesskey="&PagerNumber.accesskey;"/>
+              <textbox id="PagerNumber" class="PhoneEditWidth"/>
+            </hbox>
+            <hbox align="center">
               <spacer flex="1"/>
-              <label control="WorkCity" value="&WorkCity.label;"
-                     accesskey="&WorkCity.accesskey;" class="CardEditLabel"/>
-              <hbox class="CardEditWidth">
-                <textbox id="WorkCity" flex="1"/>
-              </hbox>
-            </hbox>
-            <hbox>
-              <spacer flex="1"/>
-              <label control="WorkState" value="&WorkState.label;"
-                     accesskey="&WorkState.accesskey;" class="CardEditLabel"/>
-              <hbox class="CardEditWidth">
-                <textbox id="WorkState" flex="1"/>
-                <spacer class="stateZipSpacer"/>
-                <label control="WorkZipCode" value="&WorkZipCode.label;"
-                       accesskey="&WorkZipCode.accesskey;" class="CardEditLabel"/>
-                <textbox id="WorkZipCode" flex="1"/>
-              </hbox>
+              <label control="CellularNumber" value="&CellularNumber.label;"
+                     accesskey="&CellularNumber.accesskey;"/>
+              <textbox id="CellularNumber" class="PhoneEditWidth"/>
             </hbox>
-            <hbox>
-              <spacer flex="1"/>
-              <label control="WorkCountry" value="&WorkCountry.label;"
-                     accesskey="&WorkCountry.accesskey;" class="CardEditLabel"/>
-              <hbox class="CardEditWidth">
-                <textbox id="WorkCountry" flex="1"/>
-              </hbox>
-            </hbox>
-            <hbox>
-              <spacer flex="1"/>
-              <label control="WebPage1" value="&WorkWebPage.label;"
-                     accesskey="&WorkWebPage.accesskey;" class="CardEditLabel"/>
-              <hbox class="CardEditWidth">
-                <textbox id="WebPage1" flex="1" class="uri-element"/>
-              </hbox>
-            </hbox>
+          </vbox> <!-- End of Phonenumbers -->
+        </hbox> <!-- End of Name/Email/Phonenumbers -->
+        <!-- Email Preferences -->
+        <hbox>
+          <vbox valign="middle">
+            <label control="PreferMailFormatPopup"
+                   value="&PreferMailFormat.label;"
+                   accesskey="&PreferMailFormat.accesskey;"/>
           </vbox>
-        </groupbox>
+          <menulist id="PreferMailFormatPopup">
+            <menupopup>
+              <!-- 0,1,2 come from nsIAbPreferMailFormat in nsIAbCard.idl -->
+              <menuitem value="0" label="&Unknown.label;"/>
+              <menuitem value="1" label="&PlainText.label;"/>
+              <menuitem value="2" label="&HTML.label;"/>
+            </menupopup>
+          </menulist>
+          <checkbox id="allowRemoteContent" label="&allowRemoteContent.label;"
+                    accesskey="&allowRemoteContent.accesskey;"
+                    tooltiptext="&allowRemoteContent.tooltip;"/>
+        </hbox>
+      </vbox> <!-- End of Name Tab -->
+
+      <!-- ** Home Address Tab ** -->
+      <vbox id="abHomeTab" >
+        <hbox align="center">
+          <spacer flex="1"/>
+          <label control="HomeAddress" value="&HomeAddress.label;"
+                 accesskey="&HomeAddress.accesskey;"/>
+          <hbox class="AddressCardEditWidth">
+            <textbox id="HomeAddress" flex="1"/>
+          </hbox>
+        </hbox>
+        <hbox align="center">
+          <spacer flex="1"/>
+          <label control="HomeAddress2" value="&HomeAddress2.label;"
+                 accesskey="&HomeAddress2.accesskey;"/>
+          <hbox class="AddressCardEditWidth">
+            <textbox id="HomeAddress2" flex="1"/>
+          </hbox>
+        </hbox>
+        <hbox align="center">
+          <spacer flex="1"/>
+          <label control="HomeCity" value="&HomeCity.label;"
+                 accesskey="&HomeCity.accesskey;"/>
+          <hbox class="AddressCardEditWidth">
+            <textbox id="HomeCity" flex="1"/>
+          </hbox>
+        </hbox>
+        <hbox align="center">
+          <spacer flex="1"/>
+          <label control="HomeState" value="&HomeState.label;"
+                 accesskey="&HomeState.accesskey;"/>
+          <hbox align="center" class="AddressCardEditWidth">
+            <textbox id="HomeState" flex="1"/>
+            <spacer class="stateZipSpacer"/>
+            <label control="HomeZipCode" value="&HomeZipCode.label;"
+                   accesskey="&HomeZipCode.accesskey;"/>
+            <textbox id="HomeZipCode" class="ZipWidth"/>
+          </hbox>
+        </hbox>
+        <hbox align="center">
+          <spacer flex="1"/>
+          <label control="HomeCountry" value="&HomeCountry.label;"
+                 accesskey="&HomeCountry.accesskey;"/>
+          <hbox class="AddressCardEditWidth">
+            <textbox id="HomeCountry" flex="1"/>
+          </hbox>
+        </hbox>
+        <hbox align="center">
+          <spacer flex="1"/>
+          <label control="WebPage2" value="&HomeWebPage.label;"
+                 accesskey="&HomeWebPage.accesskey;"/>
+          <hbox class="AddressCardEditWidth">
+            <textbox id="WebPage2" flex="1" class="uri-element"/>
+          </hbox>
+        </hbox>
+        <hbox id="birthdayField" align="center">
+          <spacer flex="1"/>
+          <label control="Birthday" value="&Birthday.label;"
+                 accesskey="&Birthday.accesskey;"/>
+          <hbox class="AddressCardEditWidth" align="center">
+            <!-- NOTE: This datepicker is modified.
+                 See abCardOverlay.js for details-->
+            <datepicker id="Birthday" type="popup"/>
+            <textbox id="BirthYear" maxlength="4"
+                     emptytext="&Year.emptytext;" class="YearWidth" />
+            <label control="Age" value="&Or.value;" disabled="true"/>
+            <textbox id="Age" maxlength="4"
+                     emptytext="&Age.emptytext;" class="YearWidth" />
+            <spacer flex="1"/>
+          </hbox>
+        </hbox>
+      </vbox>
+
+      <!-- ** Business Address Tab ** -->
+      <vbox id="abBusinessTab" >
+        <hbox align="center">
+          <spacer flex="1"/>
+          <label control="JobTitle" value="&JobTitle.label;"
+                 accesskey="&JobTitle.accesskey;"/>
+          <hbox class="AddressCardEditWidth" align="center">
+            <textbox id="JobTitle" flex="1"/>
+            <label control="Department" value="&Department.label;"
+                   accesskey="&Department.accesskey;"/>
+            <textbox id="Department" flex="1"/>
+          </hbox>
+        </hbox>
+        <hbox align="center">
+          <spacer flex="1"/>
+          <label control="Company" value="&Company.label;"
+                 accesskey="&Company.accesskey;"/>
+          <hbox class="AddressCardEditWidth">
+            <textbox id="Company" flex="1"/>
+          </hbox>
+        </hbox>
+        <hbox align="center">
+          <spacer flex="1"/>
+          <label control="WorkAddress" value="&WorkAddress.label;"
+                 accesskey="&WorkAddress.accesskey;"/>
+          <hbox class="AddressCardEditWidth">
+            <textbox id="WorkAddress" flex="1"/>
+          </hbox>
+        </hbox>
+        <hbox align="center">
+          <spacer flex="1"/>
+          <label control="WorkAddress2" value="&WorkAddress2.label;"
+                 accesskey="&WorkAddress2.accesskey;"/>
+          <hbox class="AddressCardEditWidth">
+            <textbox id="WorkAddress2" flex="1"/>
+          </hbox>
+        </hbox>
+        <hbox align="center">
+          <spacer flex="1"/>
+          <label control="WorkCity" value="&WorkCity.label;"
+                 accesskey="&WorkCity.accesskey;"/>
+          <hbox class="AddressCardEditWidth">
+            <textbox id="WorkCity" flex="1"/>
+          </hbox>
+        </hbox>
+        <hbox align="center">
+          <spacer flex="1"/>
+          <label control="WorkState" value="&WorkState.label;"
+                 accesskey="&WorkState.accesskey;"/>
+          <hbox class="AddressCardEditWidth" align="center">
+            <textbox id="WorkState" flex="1"/>
+            <spacer class="stateZipSpacer"/>
+            <label control="WorkZipCode" value="&WorkZipCode.label;"
+                   accesskey="&WorkZipCode.accesskey;"/>
+            <textbox id="WorkZipCode" class="ZipWidth"/>
+          </hbox>
+        </hbox>
+        <hbox align="center">
+          <spacer flex="1"/>
+          <label control="WorkCountry" value="&WorkCountry.label;"
+                 accesskey="&WorkCountry.accesskey;"/>
+          <hbox class="AddressCardEditWidth">
+            <textbox id="WorkCountry" flex="1"/>
+          </hbox>
+        </hbox>
+        <hbox align="center">
+          <spacer flex="1"/>
+          <label control="WebPage1" value="&WorkWebPage.label;"
+                 accesskey="&WorkWebPage.accesskey;"/>
+          <hbox class="AddressCardEditWidth">
+            <textbox id="WebPage1" flex="1" class="uri-element"/>
+          </hbox>
+        </hbox>
       </vbox>
 
       <!-- ** Other Tab ** -->
-      <vbox index="other" flex="1">
-        <vbox id="birthdayField" class="alignBoxWithFieldset">
-          <hbox flex="1">
-            <spacer flex="1"/>
-            <label control="Birthday" value="&Birthday.label;" accesskey="&Birthday.accesskey;" class="CardEditLabel"/>
-            <hbox class="CardEditWidth">
-              <!-- NOTE: This datepicker is modified.  See abCardOverlay.js for details-->
-              <datepicker id="Birthday" type="popup"/>
-              <textbox id="BirthYear" maxlength="4" emptytext="&Year.emptytext;" width="60"/>
-              <label control="Age" value="&Or.value;" class="CardEditLabel" disabled="true"/>
-              <textbox id="Age" maxlength="4" emptytext="&Age.emptytext;" width="60"/>
-            </hbox>
+      <vbox id="abOtherTab" >
+        <vbox id="customFields">
+          <hbox flex="1" align="center">
+            <label control="Custom1" value="&Custom1.label;"
+                   accesskey="&Custom1.accesskey;"/>
+            <textbox id="Custom1" flex="1"/>
+          </hbox>
+          <hbox flex="1" align="center">
+            <label control="Custom2" value="&Custom2.label;"
+                   accesskey="&Custom2.accesskey;"/>
+            <textbox id="Custom2" flex="1"/>
+          </hbox>
+          <hbox flex="1" align="center">
+            <label control="Custom3" value="&Custom3.label;"
+                   accesskey="&Custom3.accesskey;"/>
+            <textbox id="Custom3" flex="1"/>
+          </hbox>
+          <hbox flex="1" align="center">
+            <label control="Custom4" value="&Custom4.label;"
+                   accesskey="&Custom4.accesskey;"/>
+            <textbox id="Custom4" flex="1"/>
           </hbox>
         </vbox>
-        <vbox id="customFields" class="alignBoxWithFieldset">
-          <hbox flex="1">
-            <spacer flex="1"/>
-            <label control="Custom1" value="&Custom1.label;" accesskey="&Custom1.accesskey;" class="CardEditLabel"/>
-            <hbox class="CardEditWidth">
-              <textbox id="Custom1" flex="1"/>
-            </hbox>
-          </hbox>
-          <hbox flex="1">
-            <spacer flex="1"/>
-            <label control="Custom2" value="&Custom2.label;" accesskey="&Custom2.accesskey;" class="CardEditLabel"/>
-            <hbox class="CardEditWidth">
-              <textbox id="Custom2" flex="1"/>
-            </hbox>
-          </hbox>
-          <hbox flex="1">
-            <spacer flex="1"/>
-            <label control="Custom3" value="&Custom3.label;" accesskey="&Custom3.accesskey;" class="CardEditLabel"/>
-            <hbox class="CardEditWidth">
-              <textbox id="Custom3" flex="1"/>
-            </hbox>
-          </hbox>
-          <hbox flex="1">
-            <spacer flex="1"/>
-            <label control="Custom4" value="&Custom4.label;" accesskey="&Custom4.accesskey;" class="CardEditLabel"/>
-            <hbox class="CardEditWidth">
-              <textbox id="Custom4" flex="1"/>
-            </hbox>
-          </hbox>
-        </vbox>
-        <groupbox flex="1">
-          <caption>
-            <label control="Notes" value="&Notes.box;" accesskey="&Notes.accesskey;"/>
-          </caption>
-          <textbox id="Notes" multiline="true" wrap="virtual" flex="1"/>
-        </groupbox>
-
+        <label control="Notes" value="&Notes.label;"
+               accesskey="&Notes.accesskey;"/>
+        <textbox id="Notes" multiline="true" wrap="virtual" flex="1"/>
       </vbox>
-
-    </tabpanels> 
+    </tabpanels>
   </tabbox>
 </vbox>
-
 </overlay>
-
--- a/suite/locales/en-US/chrome/mailnews/addressbook/abCardOverlay.dtd
+++ b/suite/locales/en-US/chrome/mailnews/addressbook/abCardOverlay.dtd
@@ -17,18 +17,18 @@
  The Initial Developer of the Original Code is
  Netscape Communications Corporation.
  Portions created by the Initial Developer are Copyright (C) 1998-1999
  the Initial Developer. All Rights Reserved.
 
  Contributor(s):
 
  Alternatively, the contents of this file may be used under the terms of
- either of the GNU General Public License Version 2 or later (the "GPL"),
- or the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ either the GNU General Public License Version 2 or later (the "GPL"), or
+ the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
  in which case the provisions of the GPL or the LGPL are applicable instead
  of those above. If you wish to allow use of your version of this file only
  under the terms of either the GPL or the LGPL, and not to allow others to
  use your version of this file under the terms of the MPL, indicate your
  decision by deleting the provisions above and replace them with the notice
  and other provisions required by the GPL or the LGPL. If you do not delete
  the provisions above, a recipient may use your version of this file under
  the terms of any one of the MPL, the GPL or the LGPL.
@@ -68,86 +68,91 @@
 <!ENTITY NickName.accesskey             "N">
 
 <!ENTITY Internet.box                   "Internet">
 <!ENTITY PrimaryEmail.label             "Email:">
 <!ENTITY PrimaryEmail.accesskey         "E">
 <!ENTITY SecondEmail.label              "Additional Email:">
 <!ENTITY SecondEmail.accesskey          "i">
 <!ENTITY PreferMailFormat.label         "Prefers to receive messages formatted as:">
-<!ENTITY PreferMailFormat.accesskey     "r">
+<!ENTITY PreferMailFormat.accesskey     "v">
 <!ENTITY PlainText.label                "Plain Text">
 <!ENTITY HTML.label                     "HTML">
 <!ENTITY Unknown.label                  "Unknown">
 <!ENTITY ScreenName.label               "Screen Name:">
 <!ENTITY ScreenName.accesskey           "S">
 
-<!ENTITY allowRemoteContent.label       "Allow remote images in HTML mail.">
-<!ENTITY allowRemoteContent.accesskey   "w">
+<!ENTITY allowRemoteContent.label       "Allow remote images.">
+<!ENTITY allowRemoteContent.accesskey   "r">
+<!ENTITY allowRemoteContent.tooltip     "In HTML messages it is possible to
+embed images from remote sources. Opening such a message will open a
+connection to this external source. This may allow tracking of the
+message being read. Checking this box will allow such external embedded
+images in HTML messages from this contact.">
 
-<!ENTITY Phones.box                     "Phones">
 <!ENTITY WorkPhone.label                "Work:">
 <!ENTITY WorkPhone.accesskey            "k">
 <!ENTITY HomePhone.label                "Home:">
 <!ENTITY HomePhone.accesskey            "o">
 <!ENTITY FaxNumber.label                "Fax:">
 <!ENTITY FaxNumber.accesskey            "x">
 <!ENTITY PagerNumber.label              "Pager:">
-<!ENTITY PagerNumber.accesskey          "P">
+<!ENTITY PagerNumber.accesskey          "g">
 <!ENTITY CellularNumber.label           "Mobile:">
 <!ENTITY CellularNumber.accesskey       "M">
 
-<!ENTITY Address.tab                    "Address">
-<!ENTITY Address.accesskey              "A">
-<!ENTITY Home.box                       "Home">
+<!ENTITY Home.tab                       "Private">
+<!ENTITY Home.accesskey                 "P">
 <!ENTITY HomeAddress.label              "Address:">
-<!ENTITY HomeAddress.accesskey          "d">
+<!ENTITY HomeAddress.accesskey          "A">
 <!ENTITY HomeAddress2.label             "">
 <!ENTITY HomeAddress2.accesskey         "">
 <!ENTITY HomeCity.label                 "City:">
 <!ENTITY HomeCity.accesskey             "y">
 <!ENTITY HomeState.label                "State/Province:">
 <!ENTITY HomeState.accesskey            "S">
 <!ENTITY HomeZipCode.label              "ZIP/Postal Code:">
 <!ENTITY HomeZipCode.accesskey          "Z">
 <!ENTITY HomeCountry.label              "Country:">
 <!ENTITY HomeCountry.accesskey          "u">
 <!ENTITY HomeWebPage.label              "Web Page:">
-<!ENTITY HomeWebPage.accesskey          "W">
-<!ENTITY Work.box                       "Work">
+<!ENTITY HomeWebPage.accesskey          "e">
+
+<!ENTITY Work.tab                       "Work">
+<!ENTITY Work.accesskey                 "W">
 <!ENTITY JobTitle.label                 "Title:">
-<!ENTITY JobTitle.accesskey             "e">
+<!ENTITY JobTitle.accesskey             "i">
 <!ENTITY Department.label               "Department:">
 <!ENTITY Department.accesskey           "m">
 <!ENTITY Company.label                  "Organization:">
 <!ENTITY Company.accesskey              "O">
 <!ENTITY WorkAddress.label              "Address:">
-<!ENTITY WorkAddress.accesskey          "r">
+<!ENTITY WorkAddress.accesskey          "A">
 <!ENTITY WorkAddress2.label             "">
 <!ENTITY WorkAddress2.accesskey         "">
 <!ENTITY WorkCity.label                 "City:">
-<!ENTITY WorkCity.accesskey             "i">
+<!ENTITY WorkCity.accesskey             "y">
 <!ENTITY WorkState.label                "State/Province:">
-<!ENTITY WorkState.accesskey            "v">
+<!ENTITY WorkState.accesskey            "S">
 <!ENTITY WorkZipCode.label              "ZIP/Postal Code:">
-<!ENTITY WorkZipCode.accesskey          "P">
+<!ENTITY WorkZipCode.accesskey          "Z">
 <!ENTITY WorkCountry.label              "Country:">
-<!ENTITY WorkCountry.accesskey          "n">
+<!ENTITY WorkCountry.accesskey          "u">
 <!ENTITY WorkWebPage.label              "Web Page:">
-<!ENTITY WorkWebPage.accesskey          "b">
+<!ENTITY WorkWebPage.accesskey          "e">
 
 <!ENTITY Other.tab                      "Other">
 <!ENTITY Other.accesskey                "h">
 <!ENTITY Birthday.label                 "Birthday:">
 <!ENTITY Birthday.accesskey             "B">
 <!ENTITY Year.emptytext                 "Year">
 <!ENTITY Or.value                       "or">
 <!ENTITY Age.emptytext                  "Age">
 <!ENTITY Custom1.label                  "Custom 1:">
 <!ENTITY Custom1.accesskey              "1">
 <!ENTITY Custom2.label                  "Custom 2:">
 <!ENTITY Custom2.accesskey              "2">
 <!ENTITY Custom3.label                  "Custom 3:">
 <!ENTITY Custom3.accesskey              "3">
 <!ENTITY Custom4.label                  "Custom 4:">
 <!ENTITY Custom4.accesskey              "4">
-<!ENTITY Notes.box                      "Notes">
+<!ENTITY Notes.label                    "Notes:">
 <!ENTITY Notes.accesskey                "N">
--- a/suite/themes/classic/messenger/addressbook/cardDialog.css
+++ b/suite/themes/classic/messenger/addressbook/cardDialog.css
@@ -42,24 +42,30 @@
 
 @import url("chrome://messenger/skin/");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 /* ::::: Card Edit dialog ::::: */
 
 .CardEditWidth {
-  width: 25em;
+  width: 42ch;
+}
+
+.PhoneEditWidth {
+  width: 24ch;
 }
 
-.CardEditLabel {
-  padding: 0px;
-  margin-top: 3px;
+.AddressCardEditWidth {
+  width: 72ch;
 }
 
-.alignBoxWithFieldset {
-  margin-left: 6px;
-  margin-right: 5px;
+.YearWidth {
+  width: 8ch;
 }
 
 .stateZipSpacer {
-  width: 3em;
+  width: 6ch;
 }
+
+.ZipWidth {
+  width: 14ch;
+}
--- a/suite/themes/modern/messenger/addressbook/cardDialog.css
+++ b/suite/themes/modern/messenger/addressbook/cardDialog.css
@@ -42,24 +42,30 @@
 
 @import url("chrome://messenger/skin/");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 /* ::::: Card Edit dialog ::::: */
 
 .CardEditWidth {
-  width: 25em;
+  width: 42ch;
+}
+
+.PhoneEditWidth {
+  width: 24ch;
 }
 
-.CardEditLabel {
-  padding: 0px;
-  margin-top: 3px;
+.AddressCardEditWidth {
+  width: 72ch;
 }
 
-.alignBoxWithFieldset {
-  margin-left: 6px;
-  margin-right: 5px;
+.YearWidth {
+  width: 8ch;
 }
 
 .stateZipSpacer {
-  width: 3em;
+  width: 6ch;
 }
+
+.ZipWidth {
+  width: 14ch;
+}