Add ability to toggle between view as HTML and text while viewing a message (#1486939)

CHANGELOG

@@ -1,6 +1,7 @@
 CHANGELOG Roundcube Webmail
 ===========================
 
+- Add ability to toggle between HTML and text while viewing a message (#1486939)
 - Better handling of session errors in ajax requests (#1488960)
 - Fix HTML part detection for some specific message structures (#1488992)
 - Don't show fake address - phishing prevention (#1488981)

program/js/app.js

@@ -229,7 +229,7 @@ function rcube_webmail()
         this.env.message_commands = ['show', 'reply', 'reply-all', 'reply-list',
           'moveto', 'copy', 'delete', 'open', 'mark', 'edit', 'viewsource',
           'print', 'load-attachment', 'download-attachment', 'show-headers', 'hide-headers', 'download',
-          'forward', 'forward-inline', 'forward-attachment'];
+          'forward', 'forward-inline', 'forward-attachment', 'change-format'];
 
         if (this.env.action == 'show' || this.env.action == 'preview') {
           this.enable_command(this.env.message_commands, this.env.uid);
@@ -608,6 +608,17 @@ function rcube_webmail()
         }
         break;
 
+      case 'change-format':
+        url = this.env.permaurl + '&_format=' + props;
+
+        if (this.env.action == 'preview')
+          url = url.replace(/_action=show/, '_action=preview') + '&_framed=1';
+        if (this.env.extwin)
+          url += '&_extwin=1';
+
+        location.href = url;
+        break;
+
       case 'menu-open':
         if (props && props.menu == 'attachmentmenu') {
           var mimetype = this.env.attachments[props.id];

program/localization/en_US/labels.inc

@@ -205,6 +205,8 @@ $labels['body']  = 'Body';
 
 $labels['openinextwin'] = 'Open in new window';
 $labels['emlsave'] = 'Download (.eml)';
+$labels['changeformattext'] = 'Display in plain text format';
+$labels['changeformathtml'] = 'Display in HTML format';
 
 // message compose
 $labels['editasnew']      = 'Edit as new';

program/steps/mail/compose.inc

@@ -183,9 +183,18 @@ $LINE_LENGTH = $RCMAIL->config->get('line_length', 72);
 
 if (!empty($msg_uid) && empty($COMPOSE['as_attachment']))
 {
-  // similar as in program/steps/mail/show.inc
+  $mbox_name = $RCMAIL->storage->get_folder();
-  // re-set 'prefer_html' to have possibility to use html part for compose
+
-  $CONFIG['prefer_html'] = $CONFIG['prefer_html'] || $CONFIG['htmleditor'] || $compose_mode == RCUBE_COMPOSE_DRAFT || $compose_mode == RCUBE_COMPOSE_EDIT;
+  // set format before rcube_message construction
+  // use the same format as for the message view
+  if (isset($_SESSION['msg_formats'][$mbox_name.':'.$msg_uid])) {
+    $RCMAIL->config->set('prefer_html', $_SESSION['msg_formats'][$mbox_name.':'.$msg_uid]);
+  }
+  else {
+    $prefer_html = $CONFIG['prefer_html'] || $CONFIG['htmleditor'] || $compose_mode == RCUBE_COMPOSE_DRAFT || $compose_mode == RCUBE_COMPOSE_EDIT;
+    $RCMAIL->config->set('prefer_html', $prefer_html);
+  }
+
   $MESSAGE = new rcube_message($msg_uid);
 
   // make sure message is marked as read
@@ -538,8 +547,8 @@ function rcmail_compose_editor_mode()
 
 function rcmail_message_is_html()
 {
-    global $MESSAGE;
+    global $RCMAIL, $MESSAGE;
-    return ($MESSAGE instanceof rcube_message) && $MESSAGE->has_html_part(true);
+    return $RCMAIL->config->get('prefer_html') && ($MESSAGE instanceof rcube_message) && $MESSAGE->has_html_part(true);
 }
 
 function rcmail_prepare_message_body()

program/steps/mail/show.inc

@@ -19,7 +19,7 @@
  +-----------------------------------------------------------------------+
 */
 
-$PRINT_MODE = $RCMAIL->action=='print' ? TRUE : FALSE;
+$PRINT_MODE = $RCMAIL->action == 'print' ? TRUE : FALSE;
 
 // Read browser capabilities and store them in session
 if ($caps = get_input_value('_caps', RCUBE_INPUT_GET)) {
@@ -31,8 +31,21 @@ if ($caps = get_input_value('_caps', RCUBE_INPUT_GET)) {
   $_SESSION['browser_caps'] = $browser_caps;
 }
 
+$uid       = get_input_value('_uid', RCUBE_INPUT_GET);
+$mbox_name = $RCMAIL->storage->get_folder();
+
 // similar code as in program/steps/mail/get.inc
-if ($uid = get_input_value('_uid', RCUBE_INPUT_GET)) {
+if ($uid) {
+  // set message format (need to be done before rcube_message construction)
+  if (!empty($_GET['_format'])) {
+    $prefer_html = $_GET['_format'] == 'html';
+    $RCMAIL->config->set('prefer_html', $prefer_html);
+    $_SESSION['msg_formats'][$mbox_name.':'.$uid] = $prefer_html;
+  }
+  else if (isset($_SESSION['msg_formats'][$mbox_name.':'.$uid])) {
+    $RCMAIL->config->set('prefer_html', $_SESSION['msg_formats'][$mbox_name.':'.$uid]);
+  }
+
   $MESSAGE = new rcube_message($uid);
 
   // if message not found (wrong UID)...
@@ -40,7 +53,6 @@ if ($uid = get_input_value('_uid', RCUBE_INPUT_GET)) {
     rcmail_message_error($uid);
   }
 
-  $mbox_name = $RCMAIL->storage->get_folder();
 
   // show images?
   rcmail_check_safe($MESSAGE);
@@ -106,6 +118,11 @@ if ($uid = get_input_value('_uid', RCUBE_INPUT_GET)) {
     $OUTPUT->add_label('checkingmail', 'deletemessage', 'movemessagetotrash',
       'movingmessage', 'deletingmessage', 'markingmessage');
 
+  $prefer_html = $RCMAIL->config->get('prefer_html');
+  if ($MESSAGE->has_html_part()) {
+    $OUTPUT->set_env('optional_format', $prefer_html ? 'text' : 'html');
+  }
+
   // check for unset disposition notification
   if ($MESSAGE->headers->mdn_to
       && empty($MESSAGE->headers->flags['MDNSENT'])
@@ -288,9 +305,9 @@ $OUTPUT->add_handlers(array(
 ));
 
 
-if ($RCMAIL->action=='print' && $OUTPUT->template_exists('messageprint'))
+if ($RCMAIL->action == 'print' && $OUTPUT->template_exists('messageprint'))
   $OUTPUT->send('messageprint', false);
-else if ($RCMAIL->action=='preview' && $OUTPUT->template_exists('messagepreview'))
+else if ($RCMAIL->action == 'preview' && $OUTPUT->template_exists('messagepreview'))
   $OUTPUT->send('messagepreview', false);
 else
   $OUTPUT->send('message', false);

skins/classic/mail.css

@@ -1312,18 +1312,25 @@ div.message-htmlpart div.rcmBody
   text-decoration: underline;
 }
 
-#openextwinlink
+#messagelinks
 {
   position: absolute;
   top: 8px;
   right: 10px;
-  width: 15px;
+  height: 16px;
-  height: 15px;
+  text-align: right;
-  border: 0;
+}
+
+#messageframe #messagelinks
+{
+  top: 2px;
+  right: 2px;
 }
 
 #compose-headers #openextwinlink
 {
+  position: absolute;
+  height: 15px;
   top: 4px;
   right: 2px;
 }

skins/classic/templates/message.html

@@ -39,6 +39,14 @@
 
 <div id="messageframe">
 <div class="boxlistcontent" style="top:0; overflow-x:auto">
+  <div id="messagelinks">
+    <roundcube:if condition="env:optional_format=='text'" />
+      <roundcube:button command="change-format" prop="text" image="/images/icons/text.png" width="15" height="15" title="changeformattext" id="changeformattext" />
+    <roundcube:endif />
+    <roundcube:if condition="env:optional_format=='html'" />
+      <roundcube:button command="change-format" prop="html" image="/images/icons/html.png" width="15" height="15" title="changeformathtml" id="changeformathtml" />
+    <roundcube:endif />
+  </div>
 <roundcube:object name="messageHeaders" class="headers-table" cellspacing="0" cellpadding="2" addicon="/images/icons/silhouette.png" summary="Message headers" />
 <roundcube:object name="messageFullHeaders" id="full-headers" />
 <roundcube:object name="messageAttachments" id="attachment-list" />

skins/classic/templates/messagepreview.html

@@ -9,7 +9,15 @@
 <body class="iframe" onload="rcube_init_mail_ui()">
 
 <div class="messageheaderbox">
-<roundcube:button command="extwin" image="/images/icons/extwin.png" width="15" height="15" title="openinextwin" id="openextwinlink" />
+  <div id="messagelinks">
+    <roundcube:if condition="env:optional_format=='text'" />
+      <roundcube:button command="change-format" prop="text" image="/images/icons/text.png" width="15" height="15" title="changeformattext" id="changeformattext" />
+    <roundcube:endif />
+    <roundcube:if condition="env:optional_format=='html'" />
+      <roundcube:button command="change-format" prop="html" image="/images/icons/html.png" width="15" height="15" title="changeformathtml" id="changeformathtml" />
+    <roundcube:endif />
+    <roundcube:button command="extwin" image="/images/icons/extwin.png" width="15" height="15" title="openinextwin" id="openextwinlink" />
+  </div>
 <roundcube:object name="messageHeaders" class="headers-table" cellspacing="0" cellpadding="2" addicon="/images/icons/silhouette.png" summary="Message headers" />
 <roundcube:object name="messageFullHeaders" id="full-headers" />
 <roundcube:object name="messageAttachments" id="attachment-list" />