Mail App
Updated 2,601 Days AgoPublic

The Mail app comes with it's own routes, nested under a top-level /mail route, which maps to shell.mail in the Router's model.

It's initializer:

  1. Maps it's route hierarchy into the class accessed via application.resolve('router:main').
  2. Registers it's user-visible "app name" and top-level route app route into the apps service provided by Shell.


The models associated with each route are as follows:

  1. shell.mail: An array of all Mailboxes present in the account.
  2. shell.mail.mailbox: An array of Messages present in the mailbox.
  3. shell.mail.mailbox.message: The Message with this id.
Thomas says: shell.mail relating to a list of mailboxes seems a bit magic. Why not naming it more explicitly like mail.mailboxes? Also bear in mind that in JMAP there might be multiple accounts where one can fetch mailboxes for. Actually, shared mailboxes (Jane sharing a folder with John) appear as additional account "Jane" with mailboxes related to that account.

Message view

A Message should be rendered as HTML if the htmlBody property is present and non-empty, otherwise the contents of the textBody should be shown.


To keep the stylesheets separate, and avoid a whole lot of security issues, it would be necessary to heavily sanitize the html before placing it anywhere on the DOM.

There are several options being evaluated right now (in order of ease of grokking from top to bottom):

Once the content is sanitized, we may wish to either put it in an iframe for maximum isolation, or directly onto the main DOM if we have sufficient confidence in the cleanup.

iframes would be tricky if we wish to use Decorators, see below.


A Decorator is a piece of code (likely an Ember Controller) that takes a Roundcube HTML message, and returns a transformed version of it along with firing some events to inform the rest of Roundcube of the presence of the newly inserted content.

There can be many types of Decorators, for example:

  • A "remote images" decorator, which scans the HTML for any images referenced on other servers, and blocks them from rendering. It then renders it's component at the top of the message, which asks - "Show remote images?" with buttons "Yes", "No", and "Always show". If the last button is clicked, it shows the images and fires an event like mail.settings.changeconfig with { alwaysShowRemoteContent: true }.
  • An "calendar" decorator, which scans the message for strings that loosely match date/time information, which subsequently upon hover display a small popup widget that asks "Add to calendar?".

Note that the second thing would be a lot more difficult to do if we used an iframe to embed messages in.

Last Author
Last Edited
Feb 14 2016, 2:05 PM

Event Timeline

Adityab created this document.Dec 9 2015, 11:53 AM
Adityab edited the content of this document. (Show Details)
Adityab added subscribers: bruederli, petersen, vanmeeuwen.
bruederli edited the content of this document. (Show Details)Feb 14 2016, 2:05 PM