957157 - underscore dividers are often too wide in email app

Status: RESOLVED WONTFIX

(Firefox OS Graveyard :: Gaia::E-Mail, defect)

Description

[Ben Kelly [:bkelly, not reviewing]]

Many email signatures include a horizontal divider constructed from consecutive underscores.  For example:

  _______________________________________________
  dev-b2g mailing list

This often causes the b2g mail app to create a display port that is too large horizontally.  The majority of the content fits in the device window, but the divider extends the space to the right.  This then allows horizontal scrolling to appear which create bad UX for the user trying to read the message.

Perhaps we could auto-detect lines that are purely underscores and automatically reduce their width to fit our desired page size?

Comment 1

[Andrew Sutherland [:asuth] (he/him)]

Blarg.  Looking into this for triaging bug 1007560.  Found:

CSS's word-wrap/overflow-wrap (https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap) "break-word" is the magic that causes us to perform last-ditch line-breaking when we would otherwise trigger overflow.

For text/plain we have this on our ".msg-body-content" selector, but that's only for things that we believe are message-author authored-content.  We detect list footers and they get to be the class "msg-body-list" which does not get the style.

Since word-wrap is inheriting, I think we actually want to put it on the ".msg-body-container" selector which is the selector for our root body container node.  I'll address that over on bug 1007560.

Unfortunately it's not a panacea.  Good news: there's no longer accidentally someplace horizontally to scroll for no good reason.  Bad news: the wrapped extra underscores look stupid.  Okay news: most people are blind to those footers in general.


I think the easiest solution for ASCII art <hr> style things like this is likely to make the quote generate a custom content-type for them and give them a CSS style that compels them to clip their horizontal overflow along the lines of:
  display: block;
  overflow: hidden;
  word-wrap: normal;

We already have the regex for section delimiters, we just lump them together with whatever we determine the section is.  See:
https://github.com/mozilla-b2g/gaia-email-libs-and-more/blob/master/data/lib/mailapi/quotechew.js#L112
https://github.com/mozilla-b2g/gaia-email-libs-and-more/blob/master/data/lib/mailapi/quotechew.js#L293