I find the animation stuff very confusing, so I propose that we add some comments for my sanity.  I propose the following comments as a starting point... trying to copy and paste  just the whole HTML in really.  This seems to preview correctly, but in case I screw it up still, pastebinned to http://pastebin.mozilla.org/4370795
```html
<div class="card-folder-picker card anim-vertical anim-overlay one-account">
  <!-- Our card does not have a header of its own; it reuses the message_list's
       header.  We want to steal clicks on its menu button too, hence this node
       and fld-header-back which is a transparent button that overlays the menu
       button. -->
  <div class="fld-header-placeholder">
    <button class="fld-header-back"></button>
  </div>
  <!-- Backing semi-opaque layer for everything below the header so that
       anything that the folder drawer does not cover looks inactive-ish.
       Clicking on this makes the drawer go away. -->
  <div class="fld-shield"></div>
  <!-- This exists to clip fld-content so that when it animates in/out using
       translateY it doesn't paint over-top of the header. -->
  <div class="fld-content-container">
    <!-- This is the actual drawer thing that slides up/down using translateY.
         -->
    <div class="fld-content">
      <!-- Scrollable container holds everything but the non-scrolling settings
           button. -->
      <div class="fld-acct-scrollouter">
        <!-- Combo-box style widget that shows the current account name when
             collapsed and the fld-acct-header-account-header label when
             expanded.  The actual items live in fld-accountlist-container
             for animation reasons; see below. -->
        <a class="fld-acct-header closed" role="region">
          <span class="fld-acct-header-account-label"></span>
          <span class="fld-acct-header-account-header">Accounts</span>
          <span class="fld-account-switch-arrow"></span>
        </a>
        <!-- Exists to clip fld-acct-container which uses translateY to hide the
             list of accounts in negative-space until the account list is
             opened.  This has an explicit height style set based on whether the
             list of accounts is displayed or not because fld-acct-scrollinner
             will always have the same height for layout purposes because the
             translateY hiding does not affect layout. -->
        <div class="fld-acct-scrollinner">
          <!-- The list of all accounts and the folders for the current account.
               As noted above, translateY is used to hide the list of accounts
               when we don't want to be displaying it. -->
          <div class="fld-acct-container">
            <!-- The list of accounts -->
            <div class="fld-accountlist-container">
            </div>
            <!-- The list of folders for the current account. -->
            <div class="fld-folders-container">
            </div>
          </div>
        </div>
      </div>
      <!-- settings button; always present; does not scroll -->
      <a class="fld-nav-toolbar bottom-toolbar">
        <span class="fld-settings-link" data-l10n-id="fld-settings-link">SettingS</span>
      </a>
    </div>
  </div>
</div>
```