Bug 1589005 - Implement new Account Hub for users with existing account. r=mkmelin, ui-r=paenglab
authorAlessandro Castellani <alessandro@thunderbird.net>
Tue, 31 Mar 2020 11:01:02 -0700
changeset 38681 eb455a1431bf73d8235267fdca9bad577a941308
parent 38680 a544c55bcfe5c09f054b901e3f7451a4e24ed761
child 38682 05ffac8e4aa4de742c1d3cf386df3e701a4dc7ac
push id400
push userclokep@gmail.com
push dateMon, 04 May 2020 18:56:09 +0000
reviewersmkmelin, paenglab
bugs1589005
Bug 1589005 - Implement new Account Hub for users with existing account. r=mkmelin, ui-r=paenglab
mail/locales/en-US/messenger/accountCentral.ftl
mail/themes/linux/mail/accountCentral.css
mail/themes/osx/mail/accountCentral.css
mail/themes/shared/jar.inc.mn
mail/themes/shared/mail/accountCentral.css
mail/themes/shared/mail/icons/encryption-key.svg
mail/themes/shared/mail/icons/folder.svg
mail/themes/shared/mail/icons/inbox.svg
mail/themes/windows/mail/accountCentral.css
mailnews/base/content/msgAccountCentral.js
mailnews/base/content/msgAccountCentral.xhtml
mailnews/jar.mn
--- a/mail/locales/en-US/messenger/accountCentral.ftl
+++ b/mail/locales/en-US/messenger/accountCentral.ftl
@@ -1,15 +1,20 @@
 # 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/.
 
 account-central-title = Welcome to { -brand-full-name }
+account-settings = Account Settings
 
-setup-title = Choose What to Set Up
+#   $accounts (Number) - the number of configured accounts
+setup-title = { $accounts ->
+    [0]      Choose What to Set Up
+    *[other] Set Up Another Account
+}
 about-title = About { -brand-full-name }
 resources-title = Resources
 
 release-notes =
     .title = About { -brand-full-name }
 
 email-label = Email
     .aria-label = Connect to your existing email account
@@ -49,8 +54,16 @@ about-paragraph = Thunderbird is the lea
 
 about-paragraph-2 = <b>Thunderbird is funded by users like you! If you like Thunderbird, please consider making a donation.</b> The best way for you to ensure Thunderbird remains available is to
 about-donation = make a donation
 
 explore-link = Explore Features
 support-link = Support
 involved-link = Get Involved
 developer-link = Developer Documentation
+
+read = Read messages
+compose = Write a new message
+search = Search messages
+filter = Manage message filters
+nntp-subscription = Manage newsgroup subscriptions
+rss-subscription = Manage feed subscriptions
+e2e = End-to-end Encryption
--- a/mail/themes/linux/mail/accountCentral.css
+++ b/mail/themes/linux/mail/accountCentral.css
@@ -2,76 +2,8 @@
  * 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/. */
 
 /* ===== accountCentral.css ==========================================
   == Styles for the Messenger Account Central panel.
   ======================================================================= */
 
 @import url("chrome://messenger/skin/shared/accountCentral.css");
-
-/* ::::: links ::::: */
-
-#readMessages label {
-  background: url("chrome://messenger/skin/accountcentral/read-messages.png")  no-repeat;
-}
-
-#composeMessage label {
-  background: url("chrome://messenger/skin/accountcentral/write-message.png")  no-repeat;
-}
-
-#accountSettings label {
-  background: url("chrome://messenger/skin/accountcentral/account-settings.png")  no-repeat;
-}
-
-#createAccount label {
-  background: url("chrome://messenger/skin/accountcentral/create-account.png")  no-repeat;
-  background-position: 0% -2px;
-}
-
-#createAccount label:-moz-locale-dir(rtl) {
-  background-position: 100% -2px;
-}
-
-#searchMessages label {
-  background: url("chrome://messenger/skin/accountcentral/search-messages.png")  no-repeat;
-}
-
-#createFilters label {
-  background: url("chrome://messenger/skin/accountcentral/manage-filters.png")  no-repeat;
-}
-
-#offlineSettings label {
-  background: url("chrome://messenger/skin/accountcentral/offline-settings.png")  no-repeat;
-}
-
-#createAccountMail,
-#createAccountMovemail {
-  background-image: -moz-image-rect(url("chrome://messenger/skin/icons/folder-pane.png"), 16, 16, 32, 0);
-  background-repeat: no-repeat;
-}
-
-#createAccountChat {
-  background-image: url("chrome://chat/skin/chat-16.png");
-  background-repeat: no-repeat;
-}
-
-#createAccountNewsgroups {
-  background-image: -moz-image-rect(url("chrome://messenger/skin/icons/server.png"), 0, 64, 16, 48);
-  background-repeat: no-repeat;
-}
-
-#createAccountRSS {
-  background-image: -moz-image-rect(url("chrome://messenger-newsblog/skin/rss-feed.png"), 0, 16, 16, 0);
-  background-repeat: no-repeat;
-}
-
-#subscribeImapFolders label {
-  background: url("chrome://messenger/skin/accountcentral/manage-imap.png")  no-repeat;
-}
-
-#subscribeNewsgroups label {
-  background: url("chrome://messenger/skin/accountcentral/manage-newsgroups.png")  no-repeat;
-}
-
-#subscribeRSS label {
-  background: url("chrome://messenger/skin/accountcentral/manage-rss.png")  no-repeat;
-}
--- a/mail/themes/osx/mail/accountCentral.css
+++ b/mail/themes/osx/mail/accountCentral.css
@@ -3,170 +3,12 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* ===== accountCentral.css ==========================================
   == Styles for the Messenger Account Central panel.
   ======================================================================= */
 
 @import url("chrome://messenger/skin/shared/accountCentral.css");
 
-#acctCentralLayout {
-  font: menu;
-}
-
-.acctCentralText {
-  padding-top: 3px;
-}
-
-/* ::::: links ::::: */
-
-#readMessages label {
-  background: url("chrome://messenger/skin/accountcentral/mailbox.png") no-repeat;
-  background-size: 24px 24px;
-}
-
-#composeMessage label {
-  background: url("chrome://messenger/skin/accountcentral/writemail.png") no-repeat;
-  background-size: 24px 24px;
-}
-
-#junkSettingsMail label {
-  background: url("chrome://messenger/skin/accountcentral/junk.png") no-repeat;
-  background-size: 24px 24px;
-}
-
-#subscribeNewsgroups label {
-  background: url("chrome://messenger/skin/accountcentral/manage-subscriptions.png") no-repeat;
-  background-size: 24px 24px;
-}
-
-#accountSettings label {
-  background: url("chrome://messenger/skin/accountcentral/accountsettings.png") no-repeat;
-  background-size: 24px 24px;
-}
-
-#createAccount label {
-  background: url("chrome://messenger/skin/accountcentral/newaccount.png") no-repeat;
-  background-size: 24px 24px;
-}
-
-#searchMessages label {
-  background: url("chrome://messenger/skin/accountcentral/search-messages.png") no-repeat;
-  background-size: 24px 24px;
-}
-
-#createFilters label {
-  background: url("chrome://messenger/skin/accountcentral/mailbox.png") no-repeat;
-  background-size: 24px 24px;
-}
-
-#subscribeImapFolders label {
-  background: url("chrome://messenger/skin/accountcentral/folder.png") no-repeat;
-  background-size: 24px 24px;
-}
-
-#subscribeRSS label {
-  background: url("chrome://messenger/skin/accountcentral/manage-rss.png") no-repeat;
-  background-size: 24px 24px;
-}
-
-#offlineSettings label {
-  background: url("chrome://messenger/skin/accountcentral/offline.png") no-repeat;
-  background-size: 24px 24px;
-}
-
-#createAccountMail,
-#createAccountMovemail {
-  background-image: -moz-image-rect(url("chrome://messenger/skin/icons/server.png"), 0, 16, 16, 0);
-  background-repeat: no-repeat;
-}
-
-#createAccountChat {
-  background: url("chrome://chat/skin/chat-16.png") no-repeat;
-}
-
-#createAccountNewsgroups {
-  background-image: -moz-image-rect(url("chrome://messenger/skin/icons/server.png"), 0, 64, 16, 48);
-  background-repeat: no-repeat;
+#accountName {
+  /* Prevents UI jumping when dinamically changing the content. */
+  min-height: 17px;
 }
-
-#createAccountRSS {
-  background-image: -moz-image-rect(url("chrome://messenger-newsblog/skin/rss-feed.png"), 0, 16, 16, 0);
-  background-repeat: no-repeat;
-}
-
-@media (min-resolution: 2dppx) {
-  #readMessages label {
-    background: url("chrome://messenger/skin/accountcentral/mailbox@2x.png") no-repeat;
-    background-size: 24px 24px;
-  }
-
-  #composeMessage label {
-    background: url("chrome://messenger/skin/accountcentral/writemail@2x.png") no-repeat;
-    background-size: 24px 24px;
-  }
-
-  #junkSettingsMail label {
-    background: url("chrome://messenger/skin/accountcentral/junk@2x.png") no-repeat;
-    background-size: 24px 24px;
-  }
-
-  #subscribeNewsgroups label {
-    background: url("chrome://messenger/skin/accountcentral/manage-subscriptions@2x.png") no-repeat;
-    background-size: 24px 24px;
-  }
-
-  #accountSettings label {
-    background: url("chrome://messenger/skin/accountcentral/accountsettings@2x.png") no-repeat;
-    background-size: 24px 24px;
-  }
-
-  #createAccount label {
-    background: url("chrome://messenger/skin/accountcentral/newaccount@2x.png") no-repeat;
-    background-size: 24px 24px;
-  }
-
-  #searchMessages label {
-    background: url("chrome://messenger/skin/accountcentral/search-messages@2x.png") no-repeat;
-    background-size: 24px 24px;
-  }
-
-  #createFilters label {
-    background: url("chrome://messenger/skin/accountcentral/mailbox@2x.png") no-repeat;
-    background-size: 24px 24px;
-  }
-
-  #subscribeImapFolders label {
-    background: url("chrome://messenger/skin/accountcentral/folder@2x.png") no-repeat;
-    background-size: 24px 24px;
-  }
-
-  #subscribeRSS label {
-    background: url("chrome://messenger/skin/accountcentral/manage-rss@2x.png") no-repeat;
-    background-size: 24px 24px;
-  }
-
-  #offlineSettings label {
-    background: url("chrome://messenger/skin/accountcentral/offline@2x.png") no-repeat;
-    background-size: 24px 24px;
-  }
-
-  #createAccountMail,
-  #createAccountMovemail {
-    background-image: -moz-image-rect(url("chrome://messenger/skin/icons/server@2x.png"), 0, 32, 32, 0);
-    background-size: 16px 16px;
-  }
-
-  #createAccountChat {
-    background: url("chrome://messenger/skin/icons/chat-16@2x.png") no-repeat;
-    background-size: 16px 16px;
-  }
-
-  #createAccountNewsgroups {
-    background-image: -moz-image-rect(url("chrome://messenger/skin/icons/server@2x.png"), 0, 160, 32, 128);
-    background-size: 16px 16px;
-  }
-
-  #createAccountRSS {
-    background-image: -moz-image-rect(url("chrome://messenger-newsblog/skin/rss-feed@2x.png"), 0, 32, 32, 0);
-    background-size: 16px 16px;
-  }
-}
--- a/mail/themes/shared/jar.inc.mn
+++ b/mail/themes/shared/jar.inc.mn
@@ -42,29 +42,32 @@
   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/developer.svg                  (../shared/mail/icons/developer.svg)
   skin/classic/messenger/icons/exclude.svg                    (../shared/mail/icons/exclude.svg)
+  skin/classic/messenger/icons/encryption-key.svg             (../shared/mail/icons/encryption-key.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/folder.svg                     (../shared/mail/icons/folder.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/globe.svg                      (../shared/mail/icons/globe.svg)
   skin/classic/messenger/icons/help.svg                       (../shared/mail/icons/help.svg)
   skin/classic/messenger/icons/hidden.svg                     (../shared/mail/icons/hidden.svg)
   skin/classic/messenger/icons/highlights.svg                 (../shared/mail/icons/highlights.svg)
   skin/classic/messenger/icons/import.svg                     (../shared/mail/icons/import.svg)
+  skin/classic/messenger/icons/inbox.svg                      (../shared/mail/icons/inbox.svg)
   skin/classic/messenger/icons/info.svg                       (../shared/mail/icons/info.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/link.svg                       (../shared/mail/icons/link.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)
--- a/mail/themes/shared/mail/accountCentral.css
+++ b/mail/themes/shared/mail/accountCentral.css
@@ -1,191 +1,61 @@
 /* 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/");
 
-@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
-:root {
-  --body-background-color: -moz-Field;
-  --body-text-color: -moz-FieldText;
-  --head-background-color: ButtonFace;
-  --head-text-color: -moz-DialogText;
-  --head-border-color: ThreeDDarkShadow;
-  --link-color-hover: -moz-nativehyperlinktext;
-  --link-color-active: -moz-activehyperlinktext;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --body-background-color: #2a2a2e;
-    --body-text-color: rgb(249, 249, 250);
-    --head-background-color: #4a4a4f;
-    --head-text-color: var(--body-text-color);
-    --head-border-color: #737373;
-    --link-color-hover: #0060df;
-    --link-color-active: #003eaa;
-  }
-}
-
 html {
   height: 100%;
 }
 
-#acctCentralLayout {
-  overflow: auto;
-  background-color: var(--body-background-color);
-  color: var(--body-text-color);
-  height: 100vh;
-}
-
-spacer {
-  max-height: .4em;
-}
-
-spacer.big {
-  max-height: 3em;
-}
-
-#acctCentralHeaderRow {
-  padding-top: 10px;
-  padding-bottom: 10px;
-  padding-inline-start: 10px;
-  padding-inline-end: 0;
-  font-size: 160%;
-  font-weight: bold;
-}
-
-.acctCentralTitleRow {
-  padding-left: 10px;
-}
-.acctCentralRowTitleBox {
-  background-color: var(--head-background-color);
-  border: 1px solid var(--head-border-color);
-  margin: 15px 6px 0;
-  border-radius: 3px;
-  color: var(--head-text-color);
-  padding-top: 2px;
-  padding-bottom: 0;
-  padding-inline-start: 8px;
-  padding-inline-end: 4px;
-  font-size: 150%;
-  font-weight: bold;
-}
-
-.acctCentralRow {
-  margin-inline-start: 10px;
-  font-size: 125%;
-}
-
-.acctCentralRow > hbox {
-  margin-inline-start: 6px;
-}
-
-.row-iconic-icon {
-  list-style-image: inherit;
-  margin-inline-end: 10px;
-}
-
-.acctCentralText {
-  padding-inline-start: 45px;
-  margin-top: .5em;
-  margin-bottom: .5em;
-  min-height: 24px; /* icon height */
-}
-
-.acctCentralNewAcctText {
-  padding-inline-start: 20px;
-  padding-inline-end: 10px;
-}
-
-.acctCentralLinkText {
-  cursor: pointer;
-}
-
-.acctCentralLinkText:hover,
-.acctCentralLinkText:focus {
-  color: var(--link-color-hover);
-  text-decoration: underline;
-}
-
-.acctCentralLinkText:active {
-  color: var(--link-color-active);
-}
-
-#createAccountsList {
-  display: block;
-  padding-inline-start: 45px;
-  margin-bottom: .6em;
-}
-
-#readMessages label:-moz-locale-dir(rtl),
-#composeMessage label:-moz-locale-dir(rtl),
-#accountSettings label:-moz-locale-dir(rtl),
-#createAccount label:-moz-locale-dir(rtl),
-#searchMessages label:-moz-locale-dir(rtl),
-#createFilters label:-moz-locale-dir(rtl),
-#offlineSettings label:-moz-locale-dir(rtl),
-#createAccountMail:-moz-locale-dir(rtl),
-#createAccountMovemail:-moz-locale-dir(rtl),
-#createAccountChat:-moz-locale-dir(rtl),
-#createAccountNewsgroups:-moz-locale-dir(rtl),
-#createAccountRSS:-moz-locale-dir(rtl),
-#subscribeImapFolders label:-moz-locale-dir(rtl),
-#subscribeNewsgroups label:-moz-locale-dir(rtl),
-#subscribeRSS label:-moz-locale-dir(rtl),
-#junkSettingsMail label:-moz-locale-dir(rtl) {
-  background-position: right center;
-}
-
-
-/* New layout */
-
 :root {
   --bg-color: #ffffff;
   --bg-watermark: url("chrome://messenger/skin/images/account-watermark.png");
   --header-bg-color: rgba(0, 0, 0, 0.05);
+  --accounts-bg-color: rgba(0, 0, 0, 0.03);
   --text-color: #36385A;
   --title-color: #002275;
   --primary-color: #0a84ff;
   --primary-color-hover: #0060df;
   --btn-color: #36385A;
   --btn-color-hover: #FFFFFF;
   --btn-bg: #FFFFFF;
   --btn-bg-hover: #0060df;
   --btn-shadow-hover: rgba(0, 0, 0, 0.3);
   --popup-bg: #EDEDF0;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --bg-color: #2E2F30;
+    --bg-color: #2f2f33;
     --bg-watermark: url("chrome://messenger/skin/images/account-watermark-light.png");
     --header-bg-color: rgba(255, 255, 255, 0.05);
+    --accounts-bg-color: rgba(255, 255, 255, 0.03);
     --text-color: #f9f9fa;
-    --title-color: #b1b1b3;
+    --title-color: #fefefe;
     --primary-color: #0a84ff;
     --primary-color-hover: #0a84ff;
     --btn-color: #FFFFFF;
     --btn-color-hover: #FFFFFF;
     --btn-bg: #38383d;
     --btn-bg-hover: #0060df;
     --btn-shadow-hover: rgba(0, 0, 0, 0.3);
     --popup-bg: #474749;
   }
 }
 
 :root[lwt-tree-brighttext] {
-  --bg-color: #2E2F30;
+  --bg-color: #2f2f33;
   --bg-watermark: url("chrome://messenger/skin/images/account-watermark-light.png");
   --header-bg-color: rgba(255, 255, 255, 0.05);
+  --accounts-bg-color: rgba(255, 255, 255, 0.03);
   --text-color: #f9f9fa;
-  --title-color: #b1b1b3;
+  --title-color: #fefefe;
   --primary-color: #0a84ff;
   --primary-color-hover: #0a84ff;
   --btn-color: #FFFFFF;
   --btn-color-hover: #FFFFFF;
   --btn-bg: #38383d;
   --btn-bg-hover: #0060df;
   --btn-shadow-hover: rgba(0, 0, 0, 0.3);
   --popup-bg: #474749;
@@ -204,47 +74,95 @@ body {
   background-image: var(--bg-watermark);
   background-position: bottom right;
   background-repeat: no-repeat;
   color: var(--text-color);
   overflow: auto;
   height: 100vh;
 }
 
-#accountCentral[hidden] {
-  display: none;
-}
-
 #brandLogo {
   width: 64px;
   height: 64px;
   margin-inline-end: 20px;
   flex-shrink: 0;
 }
 
+#accountLogo {
+  -moz-context-properties: fill;
+  fill: currentColor;
+  color: var(--primary-color);
+  width: 18px;
+  height: 18px;
+  margin-inline-end: 10px;
+  flex-shrink: 0;
+  background: url("chrome://messenger/skin/icons/message.svg") center no-repeat;
+  background-size: contain;
+  display: block;
+}
+
+#accountLogo[type="none"] {
+  background-image: url("chrome://messenger/skin/icons/folder.svg");
+}
+
+#accountLogo[type="rss"],
+#setupFeeds::before,
+#rssSubscriptionButton:before,
+#nntpSubscriptionButton:before {
+  background-image: url("chrome://messenger/skin/icons/subscribe.svg");
+}
+
+#accountLogo[type="nntp"] {
+  background-image: url("chrome://messenger/skin/icons/reader-mode.svg");
+}
+
 .account-central-header {
   display: flex;
   align-items: center;
   background-color: var(--header-bg-color);
   padding: 20px 30px;
 }
 
+.account-central-header.summary-header {
+  padding-block: 16px;
+}
+
+[hidden] {
+  display: none !important; /* Ensure flex items obey hidden="hidden". */
+}
+
 .account-central-header > aside {
   display: flex;
   align-items: center;
   width: 160px;
   flex: 1 1 auto;
 }
 
+aside.settings-btn-container {
+  justify-content: end;
+}
+
 .account-central-title {
   font-size: x-large;
   margin-inline-end: 6px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
+  margin-block: 0;
+}
+
+#accountName {
+  font-size: 1.2em;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  margin-block: 0;
+  /* Prevents UI jumping when dinamically changing the content. */
+  min-height: 21px;
 }
 
 .account-central-version {
   display: flex;
   align-items: center;
   flex-shrink: 0;
   font-size: small;
   margin-top: 10px;
@@ -280,37 +198,56 @@ body {
   padding-block: 10px;
   position: relative;
 }
 
 .account-central-section.setup-section {
   padding-block-end: 30px;
 }
 
+.account-central-section.zebra {
+  background-color: var(--accounts-bg-color);
+}
+
+#accountFeaturesSection {
+  margin-block-start: 20px;
+}
+
 .section-title {
   font-size: larger;
   font-weight: 600;
   color: var(--title-color);
   margin-block: 10px 20px;
+  /* Prevents UI jumping when dinamically changing the content. */
+  min-height: 21px;
 }
 
 .row-container {
   margin-inline: -10px;
   display: flex;
   flex-wrap: wrap;
 }
 
 .row-container > p {
   flex: 1;
   display: block;
   min-width: 300px;
+  max-width: 550px;
   margin-inline: 10px;
   margin-block: 0 20px;
 }
 
+.row-container.account-options {
+  max-width: 800px;
+}
+
+.row-container.account-options > .btn-link {
+  margin-inline: 10px 20px;
+}
+
 /* Custom buttons style =================================== */
 .btn-hub {
   transition: background-color 280ms ease,
               color 280ms ease,
               box-shadow 280ms ease;
   -moz-appearance: none;
   display: flex;
   flex-direction: column;
@@ -339,17 +276,19 @@ body {
   box-shadow: 0 14px 16px -12px var(--btn-shadow-hover),
               inset 20px 20px 50px -30px rgba(255, 255, 255, .35);
 }
 
 .btn-hub.btn-inline {
   flex-direction: row;
   width: auto;
   height: auto;
-  padding: 10px 14px;
+  padding: 8px 12px;
+  justify-content: flex-start;
+  min-width: 140px;
 }
 
 .btn-hub:focus:not(:hover) {
   color: var(--primary-color);
 }
 
 .btn-hub::before {
   position: relative;
@@ -392,20 +331,16 @@ body {
 #setupChat::before {
   background-image: url("chrome://messenger/skin/icons/chat.svg");
 }
 
 #setupFilelink::before {
   background-image: url("chrome://messenger/skin/icons/link.svg");
 }
 
-#setupFeeds::before {
-  background-image: url("chrome://messenger/skin/icons/subscribe.svg");
-}
-
 #setupNewsgroups::before {
   background-image: url("chrome://messenger/skin/icons/reader-mode.svg");
 }
 
 #importButton::before {
   background-image: url("chrome://messenger/skin/icons/import.svg");
 }
 
@@ -421,16 +356,17 @@ body {
   z-index: 1;
 }
 
 .account-description > p {
   display: inline-block;
   background-color: var(--popup-bg);
   padding: 4px 8px;
   border-radius: 4px;
+  box-shadow: 0 2px 5px -4px rgba(0, 0, 0, 0.8);
 }
 
 .btn-hub:hover + .account-description,
 .btn-hub:focus + .account-description {
   opacity: 1;
 }
 
 /* Custom link style =================================== */
@@ -445,37 +381,58 @@ body {
 .donation-link:hover {
   color: var(--primary-color-hover);
 }
 
 .donation-link:focus:not(:hover) {
   outline: 1px dotted Highlight;
 }
 
+.btn-link {
+  -moz-appearance: none;
+  display: flex;
+  background-color: transparent;
+  color: var(--text-color);
+  -moz-context-properties: fill;
+  fill: currentColor;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1em;
+  align-items: center;
+  transition: color .2s;
+}
+
+.btn-link.btn-inline {
+  margin-block-end: 20px;
+}
+
 .resource-link {
   color: var(--text-color);
   -moz-context-properties: fill;
   fill: currentColor;
   margin-block-end: 10px;
   margin-inline: 10px 30px;
   transition: color .2s;
   cursor: pointer;
 }
 
+.btn-link:before,
 .resource-link:before {
   position: relative;
   display: inline-block;
   content: '';
   background-repeat: no-repeat;
   width: 16px;
   height: 16px;
   margin-inline-end: 5px;
   vertical-align: sub;
 }
 
+.btn-link:hover,
 .resource-link:hover {
   color: var(--primary-color-hover);
 }
 
 .resource-link:focus:not(:hover) {
   outline: 1px dotted Highlight;
 }
 
@@ -489,8 +446,32 @@ body {
 
 #involvedLink:before {
   background-image: url("chrome://messenger/skin/icons/globe.svg");
 }
 
 #developerLink:before {
   background-image: url("chrome://messenger/skin/icons/developer.svg");
 }
+
+#settingsButton:before {
+  background-image: url("chrome://mozapps/skin/extensions/utilities.svg");
+}
+
+#readButton:before {
+  background-image: url("chrome://messenger/skin/icons/inbox.svg");
+}
+
+#composeButton:before {
+  background-image: url("chrome://messenger/skin/icons/newmsg.svg");
+}
+
+#searchButton:before {
+  background-image: url("chrome://messenger/skin/icons/search-glass.svg");
+}
+
+#filterButton:before {
+  background-image: url("chrome://messenger/skin/icons/filter.svg");
+}
+
+#e2eButton:before {
+  background-image: url("chrome://messenger/skin/icons/encryption-key.svg");
+}
new file mode 100644
--- /dev/null
+++ b/mail/themes/shared/mail/icons/encryption-key.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 width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="context-fill" fill-opacity="context-fill-opacity" d="M12 4a4 4 0 0 0-3.86 3H1a1 1 0 0 0 0 2v1a1 1 0 0 0 2 0V9h1v1a1 1 0 0 0 2 0V9h2.14A4 4 0 1 0 12 4zm0 6a2 2 0 1 1 2-2 2 2 0 0 1-2 2z"></path></svg>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/mail/themes/shared/mail/icons/folder.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="M14 3H8.151L6.584 1.538A2 2 0 0 0 5.219 1H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM5.219 3l1.072 1H2V3zM14 13H2V5h6v-.014c.05 0 .1.014.151.014H14z"></path></svg>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/mail/themes/shared/mail/icons/inbox.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="M13 1H3a3.007 3.007 0 0 0-3 3v8a3.009 3.009 0 0 0 3 3h10a3.005 3.005 0 0 0 3-3V4a3.012 3.012 0 0 0-3-3zM3 3h10a1 1 0 0 1 1 1v3h-3.5a.5.5 0 0 0-.5.5c0 .751-.146 2.5-1.5 2.5h-1C6.146 10 6 8.251 6 7.5a.5.5 0 0 0-.5-.5H2V4a1 1 0 0 1 1-1zm10 10H3a1 1 0 0 1-1-1V8h3.017c.134 1.889 1.041 3 2.483 3h1c1.442 0 2.349-1.111 2.483-3H14v4a1 1 0 0 1-1 1z"></path></svg>
\ No newline at end of file
--- a/mail/themes/windows/mail/accountCentral.css
+++ b/mail/themes/windows/mail/accountCentral.css
@@ -2,88 +2,8 @@
  * 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/. */
 
 /* ===== accountCentral.css ==========================================
   == Styles for the Messenger Account Central panel.
   ======================================================================= */
 
 @import url("chrome://messenger/skin/shared/accountCentral.css");
-
-/* ::::: links ::::: */
-
-.acctCentralNewAcctText {
-  background-position: 0 4px;
-}
-
-.acctCentralNewAcctText:-moz-locale-dir(rtl) {
-  background-position: 100% 4px;
-}
-
-#readMessages label {
-  background: url("chrome://messenger/skin/accountcentral/read-messages.png") no-repeat;
-}
-
-#composeMessage label {
-  background: url("chrome://messenger/skin/accountcentral/write-message.png") no-repeat;
-}
-
-#accountSettings label {
-  background: url("chrome://messenger/skin/accountcentral/account-settings.png") no-repeat;
-}
-
-#createAccount label {
-  background: url("chrome://messenger/skin/accountcentral/create-account.png") no-repeat;
-  background-position: 0% -4px;
-}
-
-#createAccount label:-moz-locale-dir(rtl) {
-  background-position: 100% -4px;
-}
-
-#searchMessages label {
-  background: url("chrome://messenger/skin/accountcentral/search-messages.png") no-repeat;
-}
-
-#createFilters label {
-  background: url("chrome://messenger/skin/accountcentral/manage-filters.png") no-repeat;
-}
-
-#offlineSettings label {
-  background: url("chrome://messenger/skin/accountcentral/offline-settings.png") no-repeat;
-}
-
-#createAccountChat {
-  background-image: url("chrome://chat/skin/chat-16.png");
-  background-repeat: no-repeat;
-}
-
-#createAccountMail,
-#createAccountMovemail {
-  background-image: -moz-image-rect(url("chrome://messenger/skin/icons/server.png"), 0, 16, 16, 0);
-  background-repeat: no-repeat;
-}
-
-#createAccountNewsgroups {
-  background-image: -moz-image-rect(url("chrome://messenger/skin/icons/server.png"), 0, 64, 16, 48);
-  background-repeat: no-repeat;
-}
-
-#createAccountRSS {
-  background-image: -moz-image-rect(url("chrome://messenger-newsblog/skin/rss-feed.png"), 0, 16, 16, 0);
-  background-repeat: no-repeat;
-}
-
-#subscribeImapFolders label {
-  background: url("chrome://messenger/skin/accountcentral/manage-imap.png") no-repeat;
-}
-
-#subscribeNewsgroups label {
-  background: url("chrome://messenger/skin/accountcentral/manage-newsgroups.png") no-repeat;
-}
-
-#subscribeRSS label {
-  background: url("chrome://messenger/skin/accountcentral/manage-rss.png") no-repeat;
-}
-
-#junkSettingsMail label {
-  background: url("chrome://messenger/skin/accountcentral/junk.png") no-repeat;
-}
--- a/mailnews/base/content/msgAccountCentral.js
+++ b/mailnews/base/content/msgAccountCentral.js
@@ -15,382 +15,252 @@ var l10n = new Localization(["messenger/
 var gSelectedServer = null;
 var gSelectedFolder = null;
 
 /**
  * Set up the whole page depending on the selected folder/account.
  * The folder is passed in via the document URL.
  */
 function OnInit() {
-  try {
-    // Title will contain the brand name of the application and the account
-    // type (mail/news) and the name of the account.
-    let title;
-    // Get the brand name
-    let brandName = document
-      .getElementById("bundle_brand")
-      .getString("brandShortName");
-    let messengerBundle = document.getElementById("bundle_messenger");
+  document.getElementById("setupTitle").textContent = l10n.formatValueSync(
+    "setup-title",
+    {
+      accounts: MailServices.accounts.accounts.length,
+    }
+  );
 
-    // Selected folder URI is passed as folderURI argument in the query string.
-    let folderURI = document.location.search.replace("?folderURI=", "");
-    gSelectedFolder = folderURI ? MailUtils.getExistingFolder(folderURI) : null;
-    gSelectedServer = gSelectedFolder ? gSelectedFolder.server : null;
-    if (gSelectedServer) {
-      // Get the account type
-      let serverType = gSelectedServer.type;
-      let acctType;
-      if (serverType == "nntp") {
-        acctType = messengerBundle.getString("newsAcctType");
-      } else if (serverType == "rss") {
-        acctType = messengerBundle.getString("feedsAcctType");
-      } else {
-        acctType = messengerBundle.getString("mailAcctType");
-      }
+  // Selected folder URI is passed as folderURI argument in the query string.
+  let folderURI = document.location.search.replace("?folderURI=", "");
+  gSelectedFolder = folderURI ? MailUtils.getExistingFolder(folderURI) : null;
+  gSelectedServer = gSelectedFolder ? gSelectedFolder.server : null;
 
-      // Get the account name
-      let acctName = gSelectedServer.prettyName;
-      title = messengerBundle.getFormattedString("acctCentralTitleFormat", [
-        brandName,
-        acctType,
-        acctName,
-      ]);
-      // Display and collapse items presented to the user based on account type
-      ArrangeAccountCentralItems();
-      document.getElementById("accountCentral").hidden = true;
-      document.getElementById("acctCentralLayout").hidden = false;
-    } else {
-      // If there is no gSelectedServer, we are in a brand new profile with
-      // no accounts - show the create account rows.
-      title = brandName;
-      document.getElementById("accountCentral").hidden = false;
-      document.getElementById("acctCentralLayout").hidden = true;
+  if (gSelectedServer) {
+    // Display and collapse items presented to the user based on account type
+    updateAccountCentralUI();
+  } else {
+    // If there is no gSelectedServer, we are in a brand new profile.
+    document.getElementById("headerFirstRun").hidden = false;
+    document.getElementById("headerExistingAccounts").hidden = true;
+    document.getElementById("version").textContent = Services.appinfo.version;
 
-      SetItemDisplay("accountsHeader", true);
-      SetItemDisplay("createAccount", true);
-      SetItemDisplay("createAccounts", true);
+    // Update the style of the account setup buttons and area.
+    let accountSection = document.getElementById("accountSetupSection");
+    for (let btn of accountSection.querySelectorAll(".btn-hub")) {
+      btn.classList.remove("btn-inline");
+    }
+    accountSection.classList.remove("zebra");
 
-      document.getElementById("version").textContent = Services.appinfo.version;
-    }
-    // Set the title for the document
-    document.getElementById("accountCentralTitle").setAttribute("value", title);
-  } catch (ex) {
-    Cu.reportError("Error getting selected account: " + ex + "\n");
+    document.getElementById("accountFeaturesSection").hidden = true;
   }
 
-  // Append the donation link at the end of the second paragraph.
+  addDonationLink();
+}
+
+/**
+ * Append the donation link at the end of the second paragraph.
+ */
+function addDonationLink() {
   let donationLink = document.createElement("a");
   donationLink.setAttribute(
     "href",
     "https://give.thunderbird.net/en-US/?utm_source=start_page_tb_release&utm_medium=referral&utm_content=paragraph_text"
   );
   donationLink.classList.add("donation-link");
   donationLink.setAttribute("tabindex", 0);
-  donationLink.addEventListener("click", () => {
-    openLink(donationLink.href);
+  donationLink.addEventListener("click", event => {
+    openLink(event);
   });
   donationLink.addEventListener("keypress", event => {
     if (event.key == "Enter") {
-      openLink(donationLink.href);
+      openLink(event);
     }
   });
   donationLink.textContent = l10n.formatValueSync("about-donation");
 
   let donationParagraph = document.getElementById("donationParagraph");
   donationParagraph.append(" ");
   donationParagraph.appendChild(donationLink);
   donationParagraph.append(".");
 }
 
 /**
  * Show items in the AccountCentral page depending on the capabilities
  * of the given server.
  */
-/* eslint-disable complexity */
-function ArrangeAccountCentralItems() {
+function updateAccountCentralUI() {
+  // Set the account name.
+  document.getElementById("accountName").textContent =
+    gSelectedServer.prettyName;
+
+  // Update the account logo.
+  document
+    .getElementById("accountLogo")
+    .setAttribute("type", gSelectedServer.type);
+
   let exceptions = [];
   let protocolInfo = null;
   try {
     protocolInfo = gSelectedServer.protocolInfo;
   } catch (e) {
     exceptions.push(e);
   }
 
   // Is this a RSS account?
-  let displayRssHeader = gSelectedServer && gSelectedServer.type == "rss";
+  let isRssAccount = gSelectedServer && gSelectedServer.type == "rss";
 
-  /* Email header and items : Begin */
-
-  // Read Messages
+  // It can read messages.
   let canGetMessages = false;
   try {
     canGetMessages = protocolInfo && protocolInfo.canGetMessages;
-    SetItemDisplay("readMessages", canGetMessages && !displayRssHeader);
-  } catch (e) {
-    exceptions.push(e);
-  }
-
-  // Compose Messages link
-  let showComposeMsgLink = false;
-  try {
-    showComposeMsgLink = protocolInfo && protocolInfo.showComposeMsgLink;
-    SetItemDisplay("composeMessage", showComposeMsgLink);
+    document
+      .getElementById("readButton")
+      .toggleAttribute("hidden", !canGetMessages || isRssAccount);
   } catch (e) {
     exceptions.push(e);
   }
 
-  // Junk mail settings (false, until ready for prime time)
-  let canControlJunkEmail = false;
+  // It can compose messages.
+  let showComposeMsgLink = false;
   try {
-    canControlJunkEmail =
-      false &&
-      protocolInfo &&
-      protocolInfo.canGetIncomingMessages &&
-      protocolInfo.canGetMessages;
-    SetItemDisplay("junkSettingsMail", canControlJunkEmail);
+    showComposeMsgLink = protocolInfo && protocolInfo.showComposeMsgLink;
+    document
+      .getElementById("composeButton")
+      .toggleAttribute("hidden", !showComposeMsgLink);
   } catch (e) {
     exceptions.push(e);
   }
 
-  // Display Email header, only if any of the items are displayed
-  let displayEmailHeader =
-    !displayRssHeader &&
-    (canGetMessages || showComposeMsgLink || canControlJunkEmail);
-  SetItemDisplay("emailHeader", displayEmailHeader);
-
-  /* Email header and items : End */
-
-  /* News header and items : Begin */
-
-  // Subscribe to Newsgroups
+  // It can subscribe to a newsgroup.
   let canSubscribe = false;
   try {
     canSubscribe =
       gSelectedFolder &&
       gSelectedFolder.canSubscribe &&
       protocolInfo &&
       !protocolInfo.canGetMessages;
-    SetItemDisplay("subscribeNewsgroups", canSubscribe);
-  } catch (e) {
-    exceptions.push(e);
-  }
-
-  // Junk news settings (false, until ready for prime time)
-  let canControlJunkNews = false;
-  try {
-    canControlJunkNews =
-      false &&
-      protocolInfo &&
-      protocolInfo.canGetIncomingMessages &&
-      !protocolInfo.canGetMessages;
-    SetItemDisplay("junkSettingsNews", canControlJunkNews);
-  } catch (e) {
-    exceptions.push(e);
-  }
-
-  // Display News header, only if any of the items are displayed
-  let displayNewsHeader = canSubscribe || canControlJunkNews;
-  SetItemDisplay("newsHeader", displayNewsHeader);
-
-  /* News header and items : End */
-
-  /* RSS header and items : Begin */
-
-  // Display RSS header, only if this is RSS account
-  SetItemDisplay("rssHeader", displayRssHeader);
-
-  // Subscribe to RSS Feeds
-  SetItemDisplay("subscribeRSS", displayRssHeader);
-
-  /* RSS header and items : End */
-
-  // If either of above sections exists, show section separators
-  SetItemDisplay(
-    "messagesSection",
-    displayNewsHeader || displayEmailHeader || displayRssHeader
-  );
-
-  /* Accounts : Begin */
-
-  // Account Settings if a server is found
-  let canShowAccountSettings = gSelectedServer != null;
-  SetItemDisplay("accountSettings", canShowAccountSettings);
-
-  // Show New Mail Account Wizard if not prohibited by pref
-  let canShowCreateAccount = false;
-  try {
-    canShowCreateAccount = !Services.prefs.prefIsLocked(
-      "mail.disable_new_account_addition"
-    );
-    SetItemDisplay("createAccount", canShowCreateAccount);
-    SetItemDisplay("createAccounts", canShowCreateAccount);
+    document
+      .getElementById("nntpSubscriptionButton")
+      .toggleAttribute("hidden", !canSubscribe);
   } catch (e) {
     exceptions.push(e);
   }
 
-  // Display Accounts header, only if any of the items are displayed
-  SetItemDisplay("accountsHeader", canShowCreateAccount);
+  // It can subscribe to an RSS feed.
+  document
+    .getElementById("rssSubscriptionButton")
+    .toggleAttribute("hidden", !isRssAccount);
 
-  /* Accounts : End */
-
-  /* Advanced Features header and items : Begin */
-
-  // Search Messages
+  // It can search messages.
   let canSearchMessages = false;
   try {
     canSearchMessages = gSelectedServer && gSelectedServer.canSearchMessages;
-    SetItemDisplay("searchMessages", canSearchMessages);
-  } catch (e) {
-    exceptions.push(e);
-  }
-
-  // Create Filters
-  let canHaveFilters = false;
-  try {
-    canHaveFilters = gSelectedServer && gSelectedServer.canHaveFilters;
-    SetItemDisplay("createFilters", canHaveFilters);
+    document
+      .getElementById("searchButton")
+      .toggleAttribute("hidden", !canSearchMessages);
   } catch (e) {
     exceptions.push(e);
   }
 
-  // Subscribe to IMAP Folders
-  let canSubscribeImapFolders = false;
+  // It can create filters.
+  let canHaveFilters = false;
   try {
-    canSubscribeImapFolders =
-      gSelectedFolder &&
-      gSelectedFolder.canSubscribe &&
-      protocolInfo &&
-      protocolInfo.canGetMessages;
-    SetItemDisplay("subscribeImapFolders", canSubscribeImapFolders);
+    canHaveFilters = gSelectedServer && gSelectedServer.canHaveFilters;
+    document
+      .getElementById("filterButton")
+      .toggleAttribute("hidden", !canHaveFilters);
   } catch (e) {
     exceptions.push(e);
   }
 
-  // Offline Settings
-  let supportsOffline = false;
-  try {
-    supportsOffline =
-      gSelectedServer && gSelectedServer.offlineSupportLevel != 0;
-    SetItemDisplay("offlineSettings", supportsOffline);
-  } catch (e) {
-    exceptions.push(e);
-  }
+  // It can have End-to-end Encryption.
+  document
+    .getElementById("e2eButton")
+    .toggleAttribute("hidden", !canGetMessages || isRssAccount);
 
-  // Display Adv Features header, only if any of the items are displayed
-  let displayAdvFeatures =
-    canSearchMessages ||
-    canHaveFilters ||
-    canSubscribeImapFolders ||
-    supportsOffline;
-  SetItemDisplay("advancedFeaturesHeader", displayAdvFeatures);
-
-  /* Advanced Featuers header and items : End */
-
-  // If either of above features exist, show section separators
-  SetItemDisplay("accountsSection", displayAdvFeatures);
-
+  // Check if we collected any exception.
   while (exceptions.length) {
     Cu.reportError(
       "Error in setting AccountCentral Items: " + exceptions.pop() + "\n"
     );
   }
 }
-/* eslint-enable complexity */
-
-// Show the item if the item feature is supported
-function SetItemDisplay(elemId, displayThisItem) {
-  if (displayThisItem) {
-    let elem = document.getElementById(elemId);
-    if (elem) {
-      elem.setAttribute("collapsed", false);
-    }
-
-    let elemSpacer = document.getElementById(elemId + "Spacer");
-    if (elemSpacer) {
-      elemSpacer.setAttribute("collapsed", false);
-    }
-  }
-}
 
 /**
- * Open Inbox for selected server.
- * If needed, open the twisty and select Inbox.
+ * Open the Inbox for selected server. If needed, open the twisty and
+ * select the Inbox menuitem.
  */
-function ReadMessages() {
+function readMessages() {
   if (!gSelectedServer) {
     return;
   }
+
   try {
     window.parent.OpenInboxForServer(gSelectedServer);
   } catch (ex) {
     Cu.reportError("Error opening Inbox for server: " + ex + "\n");
   }
 }
 
-// Trigger composer for a new message
-function ComposeAMessage(event) {
-  // Pass event to allow holding Shift key for toggling HTML vs. plaintext format
-  window.parent.MsgNewMessage(event);
+/**
+ * Open the AccountManager to view the settings for a given account.
+ *
+ * @param selectPage - The xhtml file name for the viewing page,
+ *   null for the account main page, other pages are 'am-server.xhtml',
+ *   'am-copies.xhtml', 'am-offline.xhtml', 'am-addressing.xhtml',
+ *   'am-smtp.xhtml'
+ */
+function viewSettings(selectPage) {
+  window.parent.MsgAccountManager(selectPage, gSelectedServer);
 }
 
 /**
- * Open AccountManager to view settings for a given account
- * @param selectPage  the xul file name for the viewing page,
- *                    null for the account main page, other pages are
- *                    'am-server.xhtml', 'am-copies.xhtml', 'am-offline.xhtml',
- *                    'am-addressing.xhtml', 'am-smtp.xhtml'
+ * Open the newsgroup account wizard.
  */
-function ViewSettings(selectPage) {
-  window.parent.MsgAccountManager(selectPage, gSelectedServer);
-}
-
-// Open AccountWizard to create an account
-function CreateNewAccount() {
-  window.parent.msgOpenAccountWizard();
-}
-
-function CreateNewsgroups() {
+function createNewsgroups() {
   window.parent.msgOpenAccountWizard(function(state) {
     updateMailPaneUI();
     let win = getMostRecentMailWindow();
     if (state && win && win.gFolderTreeView && this.gCurrentAccount) {
       win.gFolderTreeView.selectFolder(
         this.gCurrentAccount.incomingServer.rootMsgFolder
       );
     }
   });
 }
 
-// Bring up search interface for selected account
-function SearchMessages() {
+/**
+ * Bring up the search interface for selected account.
+ */
+function searchMessages() {
   window.parent.MsgSearchMessages(gSelectedFolder);
 }
 
-// Open filters window
-function CreateMsgFilters() {
+/**
+ * Open the filters window.
+ */
+function createMsgFilters() {
   window.parent.MsgFilters(null, gSelectedFolder);
 }
 
-// Open Subscribe dialog
-function Subscribe() {
+/**
+ * Open the subscribe dialog.
+ */
+function subscribe() {
   if (!gSelectedServer) {
     return;
   }
   if (gSelectedServer.type == "rss") {
     window.parent.openSubscriptionsDialog(gSelectedServer.rootFolder);
   } else {
     window.parent.MsgSubscribe(gSelectedFolder);
   }
 }
 
-// Open junk mail settings dialog
-function JunkSettings() {
-  // TODO: function does not exist yet, will throw an exception if exposed
-  window.parent.MsgJunkMail();
+/**
+ * Open the target's url on an external browser.
+ *
+ * @param {Event} event - The keypress or click event.
+ */
+function openLink(event) {
+  let messenger = Cc["@mozilla.org/messenger;1"].createInstance();
+  messenger = messenger.QueryInterface(Ci.nsIMessenger);
+  messenger.launchExternalURL(event.target.href);
 }
-
-function openLink(url) {
-  let m =
-    "messenger" in window
-      ? window.messenger
-      : Cc["@mozilla.org/messenger;1"].createInstance(Ci.nsIMessenger);
-  m.launchExternalURL(url);
-}
--- a/mailnews/base/content/msgAccountCentral.xhtml
+++ b/mailnews/base/content/msgAccountCentral.xhtml
@@ -1,140 +1,171 @@
 <?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://messenger/skin/accountCentral.css" type="text/css"?>
 <?xml-stylesheet href="chrome://calendar/skin/shared/accountCentral.css" type="text/css"?>
 
-<!DOCTYPE html [
-  <!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd">
-   %brandDTD;
-  <!ENTITY % globalDTD SYSTEM "chrome://global/locale/global.dtd">
-   %globalDTD;
-  <!ENTITY % acctCentralDTD SYSTEM "chrome://messenger/locale/msgAccountCentral.dtd">
-   %acctCentralDTD;
-  <!ENTITY % lightningDTD SYSTEM "chrome://lightning/locale/lightning.dtd">
-   %lightningDTD;
-]>
+<!DOCTYPE html>
 
 <html xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
       windowtype="mail:accountcentral"
       lightweightthemes="true">
 
   <head>
-    <xul:stringbundle id="bundle_brand"
-                      src="chrome://branding/locale/brand.properties"/>
-    <xul:stringbundle id="bundle_messenger"
-                      src="chrome://messenger/locale/messenger.properties"/>
-    <xul:stringbundle id="bundle_prefs"
-                      src="chrome://messenger/locale/prefs.properties"/>
-
     <link rel="localization" href="branding/brand.ftl"/>
     <link rel="localization" href="messenger/accountCentral.ftl"/>
 
     <script src="chrome://communicator/content/utilityOverlay.js"></script>
     <script src="chrome://messenger/content/accountUtils.js"></script>
     <script src="chrome://messenger/content/commandglue.js"></script>
     <script src="chrome://messenger/content/mailWindowOverlay.js"></script>
     <script src="chrome://messenger/content/mailWindow.js"></script>
     <script src="chrome://messenger/content/msgMail3PaneWindow.js"></script>
     <script src="chrome://messenger/content/msgAccountCentral.js"></script>
     <script src="chrome://messenger/content/mailCore.js"></script>
   </head>
 
   <body onload="OnInit();">
-    <main id="accountCentral" hidden="true">
+    <main id="accountCentral">
 
-      <header class="account-central-header">
-        <img id="brandLogo" src="chrome://branding/content/about-logo.svg" alt=""/>
+      <header id="headerFirstRun" class="account-central-header" hidden="hidden">
+        <img id="brandLogo" src="chrome://branding/content/about-logo.svg"
+             alt="" />
         <aside>
-          <h1 class="account-central-title" data-l10n-id="account-central-title"></h1>
+          <h1 class="account-central-title"
+              data-l10n-id="account-central-title"></h1>
           <div class="account-central-version">
             <span id="version"></span>
             <a id="releasenotes" data-l10n-id="release-notes"
                onclick="openAboutDialog();"
                onkeypress="if (event.key == 'Enter') { openAboutDialog(); }">
-              <img src="chrome://messenger/skin/icons/info.svg" alt=""/>
+              <img src="chrome://messenger/skin/icons/info.svg" alt="" />
             </a>
           </div>
         </aside>
       </header>
 
-      <section class="account-central-section setup-section">
-        <h2 class="section-title" data-l10n-id="setup-title"></h2>
+      <header id="headerExistingAccounts" class="account-central-header summary-header">
+        <span id="accountLogo"></span>
+        <aside>
+          <h1 id="accountName"></h1>
+        </aside>
+        <aside class="settings-btn-container">
+          <button id="settingsButton" type="button"
+                  data-l10n-id="account-settings"
+                  class="btn-link" onclick="viewSettings(null);">
+          </button>
+        </aside>
+      </header>
+
+      <section id="accountFeaturesSection" class="account-central-section">
+        <aside class="row-container account-options">
+          <button id="nntpSubscriptionButton" type="button"
+                  data-l10n-id="nntp-subscription" class="btn-link btn-inline"
+                  onclick="subscribe();" hidden="hidden">
+          </button>
+          <button id="rssSubscriptionButton" type="button"
+                  data-l10n-id="rss-subscription" class="btn-link btn-inline"
+                  onclick="subscribe();" hidden="hidden">
+          </button>
+          <button id="readButton" type="button"
+                  data-l10n-id="read" class="btn-link btn-inline"
+                  onclick="readMessages();" hidden="hidden">
+          </button>
+          <button id="composeButton" type="button"
+                  data-l10n-id="compose" class="btn-link btn-inline"
+                  onclick="window.parent.MsgNewMessage(event);" hidden="hidden">
+          </button>
+          <button id="searchButton" type="button"
+                  data-l10n-id="search" class="btn-link btn-inline"
+                  onclick="searchMessages();" hidden="hidden">
+          </button>
+          <button id="filterButton" type="button"
+                  data-l10n-id="filter" class="btn-link btn-inline"
+                  onclick="createMsgFilters();" hidden="hidden">
+          </button>
+          <button id="e2eButton" type="button"
+                  data-l10n-id="e2e" class="btn-link btn-inline"
+                  onclick="viewSettings('am-e2e.xhtml');" hidden="hidden">
+          </button>
+        </aside>
+      </section>
+
+      <section id="accountSetupSection" class="account-central-section setup-section zebra">
+        <h2 id="setupTitle" class="section-title"></h2>
 
         <aside class="row-container">
           <button id="setupEmail"
                   type="button"
                   data-l10n-id="email-label"
-                  class="btn-hub"
+                  class="btn-hub btn-inline"
                   onclick="AddMailAccount();">
           </button>
           <div class="account-description">
             <p data-l10n-id="email-description"></p>
           </div>
 
           <button id="setupCalendar"
                   type="button"
                   data-l10n-id="calendar-label"
-                  class="btn-hub"
+                  class="btn-hub btn-inline"
                   onclick="window.parent.cal.window.openCalendarWizard(window);">
           </button>
           <div class="account-description">
             <p data-l10n-id="calendar-description"></p>
           </div>
 
           <button id="setupAddressBook"
                   type="button"
                   data-l10n-id="addressbook-label"
-                  class="btn-hub"
+                  class="btn-hub btn-inline"
                   onclick="AddAddressBook();">
           </button>
           <div class="account-description">
             <p data-l10n-id="addressbook-description"></p>
           </div>
 
           <button id="setupChat"
                   type="button"
                   data-l10n-id="chat-label"
-                  class="btn-hub"
+                  class="btn-hub btn-inline"
                   onclick="AddIMAccount();">
           </button>
           <div class="account-description">
             <p data-l10n-id="chat-description"></p>
           </div>
 
           <button id="setupFilelink"
                   type="button"
                   data-l10n-id="filelink-label"
-                  class="btn-hub"
+                  class="btn-hub btn-inline"
                   onclick="openOptionsDialog('paneCompose', 'compositionAttachmentsCategory');">
           </button>
           <div class="account-description">
             <p data-l10n-id="filelink-description"></p>
           </div>
 
           <button id="setupFeeds"
                   type="button"
                   data-l10n-id="feeds-label"
-                  class="btn-hub"
+                  class="btn-hub btn-inline"
                   onclick="AddFeedAccount();">
           </button>
           <div class="account-description">
             <p data-l10n-id="feeds-description"></p>
           </div>
 
           <button id="setupNewsgroups"
                   type="button"
                   data-l10n-id="newsgroups-label"
-                  class="btn-hub"
-                  onclick="CreateNewsgroups();">
+                  class="btn-hub btn-inline"
+                  onclick="createNewsgroups();">
           </button>
           <div class="account-description">
             <p data-l10n-id="newsgroups-description"></p>
           </div>
         </aside>
       </section>
 
       <section class="account-central-section">
@@ -193,216 +224,10 @@
              data-l10n-id="developer-link"
              onclick="openLink(event);"
              onkeypress="if (event.key == 'Enter') { openLink(event); }"
              tabindex="0"></a>
         </aside>
       </section>
 
     </main>
-
-    <xul:hbox id="acctCentralLayout" flex="1"
-         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-      <vbox id="acctCentralRows" flex="2">
-        <hbox id="acctCentralHeaderRow">
-          <label id="accountCentralTitle"/>
-        </hbox>
-        <spacer id="acctCentralHeaderSpacer" flex="2"/>
-
-        <hbox id="emailHeader" class="acctCentralTitleRow" collapsed="true">
-          <hbox class="acctCentralRowTitleBox" flex="1">
-            <description>&emailSectionHdr.label;</description>
-          </hbox>
-        </hbox>
-
-        <spacer id="readMessagesSpacer" flex="1" collapsed="true"/>
-        <hbox id="readMessages" class="acctCentralRow" collapsed="true">
-          <hbox>
-            <label class="acctCentralText acctCentralLinkText"
-                  value="&readMsgsLink.label;"
-                  chromedir="&locale.dir;"
-                  onclick="ReadMessages();"/>
-          </hbox>
-        </hbox>
-
-        <spacer id="composeMessageSpacer" flex="1" collapsed="true"/>
-        <hbox id="composeMessage" class="acctCentralRow" collapsed="true">
-          <hbox>
-            <label class="acctCentralText acctCentralLinkText"
-                  value="&composeMsgLink.label;"
-                  chromedir="&locale.dir;"
-                  onclick="ComposeAMessage(event);"/>
-          </hbox>
-        </hbox>
-
-        <spacer id="junkSettingsMailSpacer" flex="1" collapsed="true"/>
-        <hbox id="junkSettingsMail" class="acctCentralRow" collapsed="true">
-          <hbox>
-            <label class="acctCentralText acctCentralLinkText"
-                  value="&junkSettings.label;"
-                  onclick="JunkSettings();"/>
-          </hbox>
-        </hbox>
-
-        <spacer id="newsHeaderSpacer" flex="1" collapsed="true"/>
-        <hbox id="newsHeader" class="acctCentralTitleRow" collapsed="true">
-          <hbox class="acctCentralRowTitleBox" flex="1">
-            <description>&newsSectionHdr.label;</description>
-          </hbox>
-        </hbox>
-
-        <spacer id="subscribeNewsgroupsSpacer" flex="1" collapsed="true"/>
-        <hbox id="subscribeNewsgroups" class="acctCentralRow" collapsed="true">
-          <hbox>
-            <label class="acctCentralText acctCentralLinkText"
-                  value="&subscribeNewsLink.label;"
-                  chromedir="&locale.dir;"
-                  onclick="Subscribe();"/>
-          </hbox>
-        </hbox>
-
-        <spacer id="junkSettingsNewsSpacer" flex="1" collapsed="true"/>
-        <hbox id="junkSettingsNews" class="acctCentralRow" collapsed="true">
-          <hbox>
-            <label class="acctCentralText acctCentralLinkText"
-                  value="&junkSettings.label;"
-                  onclick="JunkSettings();"/>
-          </hbox>
-        </hbox>
-
-        <spacer id="rssHeaderSpacer" flex="1" collapsed="true"/>
-        <hbox id="rssHeader" class="acctCentralTitleRow" collapsed="true">
-          <hbox class="acctCentralRowTitleBox" flex="1">
-            <description>&feedsSectionHdr.label;</description>
-          </hbox>
-        </hbox>
-
-        <spacer id="subscribeRSSSpacer" flex="1" collapsed="true"/>
-        <hbox id="subscribeRSS" class="acctCentralRow" collapsed="true">
-          <hbox>
-            <label class="acctCentralText acctCentralLinkText"
-                  value="&subscribeFeeds.label;"
-                  chromedir="&locale.dir;"
-                  onclick="Subscribe();"/>
-          </hbox>
-        </hbox>
-
-        <spacer id="messagesSectionSpacer" class="big" flex="5" collapsed="true"/>
-
-        <hbox id="accountsHeader" class="acctCentralTitleRow" collapsed="true">
-          <hbox class="acctCentralRowTitleBox" flex="1">
-            <description>&accountsSectionHdr.label;</description>
-          </hbox>
-        </hbox>
-
-        <spacer id="accountSettingsSpacer" flex="1" collapsed="true"/>
-        <hbox id="accountSettings" class="acctCentralRow" collapsed="true">
-          <hbox>
-            <label class="acctCentralText acctCentralLinkText"
-                  value="&settingsLink.label;"
-                  chromedir="&locale.dir;"
-                  onclick="ViewSettings(null);"/>
-          </hbox>
-        </hbox>
-
-        <spacer id="createAccountSpacer" flex="1" collapsed="true"/>
-        <hbox id="createAccount" class="acctCentralRow" collapsed="true">
-          <hbox>
-#ifdef MOZ_THUNDERBIRD
-            <label class="acctCentralText"
-                  value="&setupNewAcct.label;"
-                  chromedir="&locale.dir;"/>
-#else
-            <label class="acctCentralText acctCentralLinkText"
-                  value="&newAcctLink.label;"
-                  chromedir="&locale.dir;"
-                  onclick="CreateNewAccount();"/>
-#endif
-          </hbox>
-        </hbox>
-#ifdef MOZ_THUNDERBIRD
-        <hbox id="createAccounts" class="acctCentralRow" collapsed="true">
-          <vbox id="createAccountsList">
-            <label id="createAccountMail"
-                  class="acctCentralNewAcctText acctCentralLinkText"
-                  value="&emailSectionHdr.label;"
-                  chromedir="&locale.dir;"
-                  onclick="AddMailAccount();"/>
-            <label id="createAccountChat"
-                  class="acctCentralNewAcctText acctCentralLinkText"
-                  value="&chat.label;"
-                  chromedir="&locale.dir;"
-                  onclick="openIMAccountWizard();"/>
-            <label id="createAccountNewsgroups"
-                  class="acctCentralNewAcctText acctCentralLinkText"
-                  value="&newsSectionHdr.label;"
-                  chromedir="&locale.dir;"
-                  onclick="CreateNewsgroups();"/>
-            <label id="createAccountRSS"
-                  class="acctCentralNewAcctText acctCentralLinkText"
-                  value="&feedsSectionHdr.label;"
-                  chromedir="&locale.dir;"
-                  onclick="AddFeedAccount();"/>
-          </vbox>
-        </hbox>
-#endif
-
-        <spacer id="calendar-newCalendar-separator" flex="1"/>
-        <hbox id="calendar-newCalendar-row" class="acctCentralRow">
-          <hbox>
-            <label class="acctCentralText acctCentralLinkText"
-                  value="&lightning.acctCentral.newCalendar.label;"
-                  onclick="window.parent.cal.window.openCalendarWizard(window);"/>
-          </hbox>
-        </hbox>
-
-        <spacer id="accountsSectionSpacer" class="big" flex="5" collapsed="true"/>
-
-        <hbox id="advancedFeaturesHeader" class="acctCentralTitleRow" collapsed="true">
-          <hbox class="acctCentralRowTitleBox" flex="1">
-            <description>&advFeaturesSectionHdr.label;</description>
-          </hbox>
-        </hbox>
-
-        <spacer id="searchMessagesSpacer" flex="1" collapsed="true"/>
-        <hbox id="searchMessages" class="acctCentralRow" collapsed="true">
-          <hbox>
-            <label class="acctCentralText acctCentralLinkText"
-                  value="&searchMsgsLink.label;"
-                  chromedir="&locale.dir;"
-                  onclick="SearchMessages();"/>
-          </hbox>
-        </hbox>
-
-        <spacer id="createFiltersSpacer" flex="1" collapsed="true"/>
-        <hbox id="createFilters" class="acctCentralRow" collapsed="true">
-          <hbox>
-            <label class="acctCentralText acctCentralLinkText"
-                  value="&filtersLink.label;"
-                  chromedir="&locale.dir;"
-                  onclick="CreateMsgFilters();"/>
-          </hbox>
-        </hbox>
-
-        <spacer id="subscribeImapFoldersSpacer" flex="1" collapsed="true"/>
-        <hbox id="subscribeImapFolders" class="acctCentralRow" collapsed="true">
-          <hbox>
-            <label class="acctCentralText acctCentralLinkText"
-                  value="&subscribeImapFolders.label;"
-                  chromedir="&locale.dir;"
-                  onclick="Subscribe();"/>
-          </hbox>
-        </hbox>
-
-        <spacer id="offlineSettingsSpacer" flex="1" collapsed="true"/>
-        <hbox id="offlineSettings" class="acctCentralRow" collapsed="true">
-          <hbox>
-            <label class="acctCentralText acctCentralLinkText"
-                  value="&offlineLink.label;"
-                  chromedir="&locale.dir;"
-                  onclick="ViewSettings('am-offline.xhtml');"/>
-          </hbox>
-        </hbox>
-      </vbox>
-      <vbox flex="3"/>
-    </xul:hbox>
   </body>
 </html>
--- a/mailnews/jar.mn
+++ b/mailnews/jar.mn
@@ -66,17 +66,17 @@ messenger.jar:
     content/messenger/msgSynchronize.xhtml                                     (base/content/msgSynchronize.xhtml)
     content/messenger/msgSynchronize.js                                        (base/content/msgSynchronize.js)
     content/messenger/folderProps.xhtml                                        (base/content/folderProps.xhtml)
     content/messenger/menulist-charsetpicker.js                                (base/content/menulist-charsetpicker.js)
     content/messenger/folderProps.js                                           (base/content/folderProps.js)
     content/messenger/folder-menupopup.js                                      (base/content/folder-menupopup.js)
     content/messenger/newFolderDialog.xhtml                                    (base/content/newFolderDialog.xhtml)
     content/messenger/newFolderDialog.js                                       (base/content/newFolderDialog.js)
-*   content/messenger/msgAccountCentral.xhtml                                  (base/content/msgAccountCentral.xhtml)
+    content/messenger/msgAccountCentral.xhtml                                  (base/content/msgAccountCentral.xhtml)
     content/messenger/msgAccountCentral.js                                     (base/content/msgAccountCentral.js)
     content/messenger/renameFolderDialog.xhtml                                 (base/content/renameFolderDialog.xhtml)
     content/messenger/renameFolderDialog.js                                    (base/content/renameFolderDialog.js)
     content/messenger/retention.js                                             (base/content/retention.js)
     content/messenger/subscribe.js                                             (base/content/subscribe.js)
     content/messenger/subscribe.xhtml                                          (base/content/subscribe.xhtml)
     content/messenger/virtualFolderListEdit.xhtml                              (base/content/virtualFolderListEdit.xhtml)
     content/messenger/virtualFolderListEdit.js                                 (base/content/virtualFolderListEdit.js)