<vbox flex="1">
  <hbox id="messagepanewrapper" flex="1">
    <stack flex="1">
      <browser id="messagepane" context="mailContext">
        (メール本文)
      </browser>
    </stack>
  </hbox>
 
  <splitter id="attachment-splitter">(仕切り)</splitter>
 
  <vbox id="attachmentView">
    <hbox id="attachmentBar">
      (添付ファイルバー)
    </hbox>
    <hbox class="attachments-container">
      <richlistbox id="attachmentList" class="attachmentList">
        (添付ファイルのアイコン付きリスト)
      </richlistbox>
    </hbox>
  </vbox>
</vbox>

@-moz-document url-prefix("chrome://messenger/content/messenger.xhtml") {
  /* 通知バーの下ボーダーは添付ヘッダーの上ボーダーと離接するので取っておく */
  #mail-notification-top { border-bottom: none !important; }
  /* メール本文と添付ファイルを表示するボックスを flexコンテナーにし、逆順表示を設定 */
  #mail-notification-top + vbox { display: flex; flex-direction: column-reverse; }
  /* 添付ファイル表示の下にボーダーを入れる */
  #attachmentView { border-bottom: 1px solid var(--splitter-color); }
  /* メール本文の縦方向のサイズを自動にする */
  #messagepanewrapper { flex: auto; }
  /* 仕切りに背景色を設定 */
  #attachment-splitter { background-color: -moz-Dialog; }
  /* アイコンサイズを16px->32pxに拡大 */
  .attachmentcell-icon { width: 32px !important; height: 32px !important; }
}