Change Details

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. # Models The models associated with each route are as follows: 1. `shell.mail`: An array of all `Mailbox`es present in the account. 2. `shell.mail.mailbox`: An array of `Message`s present in the mailbox. 3. `shell.mail.mailbox.message`: The `Message` with this `id`. # 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. ## Safety 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): - https://github.com/cure53/DOMPurify (also being used by Fastmail, which is good to know) - https://github.com/gbirke/Sanitize.js - https://github.com/mozilla/bleach - https://developers.google.com/caja/ - https://github.com/Microsoft/JSanity 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. ## Decorators 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.

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. # Models The models associated with each route are as follows: 1. `shell.mail`: An array of all `Mailbox`es present in the account. 2. `shell.mail.mailbox`: An array of `Message`s present in the mailbox. 3. `shell.mail.mailbox.message`: The `Message` with this `id`. (NOTE) **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. ## Safety 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): - https://github.com/cure53/DOMPurify (also being used by Fastmail, which is good to know) - https://github.com/gbirke/Sanitize.js - https://github.com/mozilla/bleach - https://developers.google.com/caja/ - https://github.com/Microsoft/JSanity 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. ## Decorators 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.

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. # Models The models associated with each route are as follows: 1. `shell.mail`: An array of all `Mailbox`es present in the account. 2. `shell.mail.mailbox`: An array of `Message`s present in the mailbox. 3. `shell.mail.mailbox.message`: The `Message` with this `id`. (NOTE) **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. ## Safety 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): - https://github.com/cure53/DOMPurify (also being used by Fastmail, which is good to know) - https://github.com/gbirke/Sanitize.js - https://github.com/mozilla/bleach - https://developers.google.com/caja/ - https://github.com/Microsoft/JSanity 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. ## Decorators 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.