Use iframe-resizer

* dynamically resize iframe based on content
* scroll on complete read-view instead of just iframe-content
* open writer when email address is clicked in iframe
* convert tabs to spaces in read-directive file
* Scale html mails to viewport only from the outside
* Delete release branch before each release in aws_release.sh script
* Make read-controls in read view always visible

Gruntfile.js

@@ -265,6 +265,7 @@ module.exports = function(grunt) {
                     'src/lib/angular/angular-animate.js',
                     'src/lib/ngtagsinput/ng-tags-input.min.js',
                     'node_modules/ng-infinite-scroll/build/ng-infinite-scroll.min.js',
+                    'node_modules/iframe-resizer/js/iframeResizer.min.js',
                     'src/lib/fastclick/fastclick.js',
                     'src/lib/lawnchair/lawnchair-git.js',
                     'src/lib/lawnchair/lawnchair-adapter-webkit-sqlite-git.js',
@@ -283,6 +284,7 @@ module.exports = function(grunt) {
             readSandbox: {
                 src: [
                     'node_modules/dompurify/purify.js',
+                    'node_modules/iframe-resizer/js/iframeResizer.contentWindow.min.js',
                     'src/js/controller/app/read-sandbox.js'
                 ],
                 dest: 'dist/js/read-sandbox.min.js'

package.json

@@ -62,6 +62,7 @@
     "grunt-string-replace": "~1.0.0",
     "grunt-svgmin": "~1.0.0",
     "grunt-svgstore": "~0.3.4",
+    "iframe-resizer": "^2.8.3",
     "imap-client": "~0.11.0",
     "jquery": "~2.1.1",
     "mailreader": "~0.4.0",

res/aws_release.sh

@@ -14,8 +14,8 @@ fi
 
 # switch branch
 git checkout $2
-git branch release/$1
+git branch -D release/$1
-git checkout release/$1
+git checkout -b release/$1
 git merge $2 --no-edit
 
 # build and test

src/js/controller/app/read-sandbox.js

@@ -6,7 +6,7 @@ window.onmessage = function(e) {
 
     if (e.data.html) {
         // display html mail body
-        html = '<div class="scale-body">' + e.data.html + '</div>';
+        html = e.data.html;
     } else if (e.data.text) {
         // diplay text mail body by with colored conversation nodes
         html = renderNodes(parseConversation(e.data.text));
@@ -26,10 +26,34 @@ window.onmessage = function(e) {
 
     document.body.innerHTML = html;
 
-    scaleToFit();
+    attachClickHandlers();
 };
 
-window.addEventListener('resize', scaleToFit);
+/**
+ * Send a message to the main window when email address is clicked
+ */
+function attachClickHandlers() {
+    var elements = document.getElementsByTagName('a');
+    for (var i = 0, len = elements.length; i < len; i++) {
+        elements[i].onclick = handle;
+    }
+
+    function handle(e) {
+        var text = e.target.textContent || e.target.innerText;
+        if (checkEmailAddress(text)) {
+            e.preventDefault();
+            window.parentIFrame.sendMessage({
+                type: 'email',
+                address: text
+            });
+        }
+    }
+
+    function checkEmailAddress(text) {
+        var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return re.test(text);
+    }
+}
 
 /**
  * Parse email body and generate conversation nodes
@@ -189,27 +213,3 @@ function renderNodes(root) {
 
     return '<div class="view-read-body">' + body + '</div>';
 }
-
-/**
- * Transform scale content to fit iframe width
- */
-function scaleToFit() {
-    var view = document.getElementsByClassName('scale-body').item(0);
-    if (!view) {
-        return;
-    }
-
-    var parentWidth = view.parentNode.offsetWidth;
-    var w = view.offsetWidth;
-    var scale = '';
-
-    if (w > parentWidth) {
-        scale = parentWidth / w;
-        scale = 'scale(' + scale + ',' + scale + ')';
-    }
-
-    view.style['-webkit-transform-origin'] = '0 0';
-    view.style.transformOrigin = '0 0';
-    view.style['-webkit-transform'] = scale;
-    view.style.transform = scale;
-}

src/js/controller/app/write.js

@@ -158,7 +158,7 @@ var WriteCtrl = function($scope, $window, $filter, $q, appConfig, auth, keychain
         if (forward) {
             $scope.subject = 'Fwd: ' + re.subject;
         } else {
-            $scope.subject = 'Re: ' + ((re.subject) ? re.subject.replace('Re: ', '') : '');
+            $scope.subject = re.subject ? 'Re: ' + re.subject.replace('Re: ', '') : '';
         }
 
         // fill text body

src/js/directive/read.js

@@ -45,7 +45,7 @@ ngModule.directive('replySelection', function() {
     };
 });
 
-ngModule.directive('frameLoad', function($timeout, $window) {
+ngModule.directive('frameLoad', function($window) {
     return function(scope, elm) {
         var iframe = elm[0];
 
@@ -58,7 +58,29 @@ ngModule.directive('frameLoad', function($timeout, $window) {
             }
         });
 
-		$window.addEventListener('resize', scaleToFit);
+        scope.$on('$destroy', function() {
+            $window.removeEventListener('resize', resetWidth);
+            $window.removeEventListener('orientationchange', resetWidth);
+        });
+
+        $window.addEventListener('resize', resetWidth);
+        $window.addEventListener('orientationchange', resetWidth);
+
+        // use iframe-resizer to dynamically adapt iframe size to its content
+        elm.iFrameResize({
+            enablePublicMethods: true,
+            sizeWidth: true,
+            resizedCallback: scaleToFit,
+            messageCallback: function(e) {
+                if (e.message.type === 'email') {
+                    scope.state.writer.write({
+                        from: [{
+                            address: e.message.address
+                        }]
+                    });
+                }
+            }
+        });
 
         iframe.onload = function() {
             // set listeners
@@ -74,12 +96,12 @@ ngModule.directive('frameLoad', function($timeout, $window) {
                 return;
             }
 
+            resetWidth();
+
             // send text body for rendering in iframe
             iframe.contentWindow.postMessage({
                 text: body
             }, '*');
-
-			$timeout(scaleToFit, 0);
         }
 
         function displayHtml(html) {
@@ -87,6 +109,8 @@ ngModule.directive('frameLoad', function($timeout, $window) {
                 return;
             }
 
+            resetWidth();
+
             // if there are image tags in the html?
             var hasImages = /<img[^>]+\bsrc=['"][^'">]+['"]/ig.test(html);
             scope.showImageButton = hasImages;
@@ -107,25 +131,36 @@ ngModule.directive('frameLoad', function($timeout, $window) {
                     }, '*');
                 };
             }
-
-			$timeout(scaleToFit, 0);
         }
 
-		// transform scale iframe (necessary on iOS) to fit container width
+        // reset the iframe width to the original (min-width:100%)
+        // usually required before a new scaleToFit event
+        function resetWidth() {
+            elm.css('width', '');
+        }
+
+        // transform scale iframe to fit container width
+        // necessary if iframe is wider than container
         function scaleToFit() {
             var parentWidth = elm.parent().width();
             var w = elm.width();
-			var scale = '';
+            var scale = 'none';
 
-			if (w > parentWidth) {
+            // only scale html mails
+            var mail = scope.state.mailList.selected;
+            if (mail && mail.html && (w > parentWidth)) {
                 scale = parentWidth / w;
                 scale = 'scale(' + scale + ',' + scale + ')';
             }
 
             elm.css({
                 '-webkit-transform-origin': '0 0',
+                '-moz-transform-origin': '0 0',
+                '-ms-transform-origin': '0 0',
                 'transform-origin': '0 0',
                 '-webkit-transform': scale,
+                '-moz-transform': scale,
+                '-ms-transform': scale,
                 'transform': scale
             });
         }

src/js/util/dummy.js

@@ -101,7 +101,7 @@ Dummy.prototype.listMails = function() {
             '>> from 0.7.0.1\n' +
             '>>\n' +
             '>> God speed!'; // plaintext body
-        //this.html = '<!DOCTYPE html><html><head></head><body><h1 style="border: 1px solid red; width: 500px;">Hello there' + Math.random() + '</h1></body></html>';
+        this.html = '<!DOCTYPE html><html><head></head><body><h1 style="border: 1px solid red; width: 500px; margin:0;">Hello there' + Math.random() + '</h1></body></html>';
         this.encrypted = true;
         this.decrypted = true;
     };

src/sass/blocks/views/_read.scss

@@ -23,11 +23,32 @@
             display: none;
         }
     }
+    &__working {
+        position: relative;
+        flex-grow: 1;
+        padding: 0 $padding-horizontal;
+        & > div {
+            @include scut-vcenter-tt;
+            width: 100%;
+            text-align: center;
+            font-size: $font-size-bigger;
+
+            strong {
+                color: $color-text-light;
+                vertical-align: middle;
+            }
+        }
+    }
+    &__content {
+        flex-grow: 1;
+        overflow: auto;
+        // allow scrolling on iOS
+        -webkit-overflow-scrolling: touch;
+    }
 
     // Header components
 
     &__header {
-        flex-shrink: 0;
         margin-bottom: 1em;
         padding: $padding-vertical $padding-horizontal 0;
 
@@ -41,15 +62,28 @@
     }
     &__controls {
         display: none;
-        float: right;
+        position: absolute;
-        margin-left: 1em;
+        top: 0;
-        .btn-icon-light {
+        right: $scrollbar-width; // don't cover scrollbar
+        padding: $padding-vertical $padding-horizontal;
+        background-color: $color-white;
+        .btn-icon-light + .btn-icon-light {
             margin-left: 1.4em;
         }
         @include respond-to(md) {
             display: block;
         }
     }
+    &__controls__dummy {
+        display: none;
+        float: right;
+        // the size of the real controls
+        width: 242px;
+        height: 39px;
+        @include respond-to(md) {
+            display: block;
+        }
+    }
     &__subject {
         font-weight: normal;
         color: $color-text;
@@ -103,7 +137,6 @@
     // Content components
 
     &__signature-status {
-        flex-shrink: 0;
         margin-top: 0;
         margin-bottom: 0.5em;
         text-align: center;
@@ -111,40 +144,17 @@
         padding: 0 $padding-horizontal;
     }
     &__display-images {
-        flex-shrink: 0;
         margin-bottom: 0.5em;
         text-align: center;
         padding: 0 $padding-horizontal;
     }
-    &__working {
-        position: relative;
-        flex-grow: 1;
-        padding: 0 $padding-horizontal;
-        & > div {
-            @include scut-vcenter-tt;
-            width: 100%;
-            text-align: center;
-            font-size: $font-size-bigger;
-
-            strong {
-                color: $color-text-light;
-                vertical-align: middle;
-            }
-        }
-    }
     &__body {
-        flex-grow: 1;
-        display: flex;
-        flex-direction: column;
-        // allow scrolling on iOS
-        overflow: auto;
-        -webkit-overflow-scrolling: touch;
         padding: 0 $padding-horizontal $padding-vertical;
+        overflow: hidden; // necessary due to iframe scaling via transitions
 
         iframe {
-            flex-grow: 1;
             border: none;
-            width: 100%;
+            min-width: 100%;
         }
     }
 

src/sass/read-sandbox.scss

@@ -5,24 +5,11 @@
 // Mixins
 
 @import "mixins/responsive";
-@import "mixins/scrollbar";
-
-@include scrollbar();
-
-html {
-    // use overflow auto and not scroll otherwise IE shows scrollbars always
-    overflow: auto;
-}
 
 body {
     margin: 0;
 }
 
-.scale-body {
-    // necessary to compute overflowing content width in JS
-    float: left;
-}
-
 .view-read-body {
     font-family: $font-family-base;
     font-size: $font-size-base;

src/tpl/create-account.html

@@ -5,7 +5,7 @@
     </header>
     <main class="page__main">
       <h2 class="typo-title">Create Whiteout account</h2>
-      <p class="typo-paragraph">Sign up for an encrypted mailbox hosted in Germany.<br>Already have an account? <a href="#" wo-touch="$event.preventDefault(); loginToExisting()">Log in here</a>.</p>
+      <p class="typo-paragraph">Sign up for an encrypted mailbox hosted in Germany. Already have an account? <a href="#" wo-touch="$event.preventDefault(); loginToExisting()">Log in here</a>.</p>
       <form class="form" name="form">
         <p class="form__error-message" ng-show="errMsg">{{errMsg}}</p>
         <div class="form__row">

src/tpl/read.html

@@ -13,7 +13,6 @@
     </div>
   </div><!--/read__folder-toolbar-->
 
-  <header class="read__header">
   <div class="read__controls">
     <span class="u-hidden-lg" ng-controller="ActionBarCtrl">
       <button wo-touch="flagMessage(state.mailList.selected, !state.mailList.selected.flagged)" class="btn-icon-light" title="{{state.mailList.selected.flagged ? 'Remove Star' : 'Add Star'}}">
@@ -41,6 +40,20 @@
     </span>
   </div><!--/read__controls-->
 
+  <!-- working spinner -->
+  <div class="read__working"
+    ng-if="state.mailList.selected && state.mailList.selected.html === undefined && (state.mailList.selected.body === undefined || (state.mailList.selected.encrypted && !state.mailList.selected.decrypted))">
+    <div>
+      <span class="spinner"></span>
+      <strong ng-bind="(state.mailList.selected.decryptingBody) ? 'Decrypting...' : 'Loading...' "></strong>
+    </div>
+  </div><!--/read__working-->
+
+  <div class="read__content"
+    ng-show="state.mailList.selected && (!state.mailList.selected.encrypted && (state.mailList.selected.body || state.mailList.selected.html)) || (state.mailList.selected.encrypted && state.mailList.selected.decrypted)">
+    <header class="read__header">
+      <div class="read__controls__dummy"></div>
+
       <h2 class="read__subject" wo-touch="notStripped = !notStripped">
         <button ng-hide="notStripped" class="btn-icon-very-light">
           <svg><use xlink:href="#icon-dropdown" /><title>More</title></svg>
@@ -86,7 +99,7 @@
             </span>
           </span>
         </div>
-    </div>
+      </div><!--/read__addresses-->
 
       <ul class="attachments" ng-show="state.mailList.selected.attachments !== undefined && state.mailList.selected.attachments.length > 0">
         <li ng-repeat="attachment in state.mailList.selected.attachments"
@@ -98,15 +111,6 @@
       </ul>
     </header><!--/read__header-->
 
-  <!-- working spinner -->
-  <div class="read__working"
-    ng-if="state.mailList.selected && state.mailList.selected.html === undefined && (state.mailList.selected.body === undefined || (state.mailList.selected.encrypted && !state.mailList.selected.decrypted))">
-    <div>
-      <span class="spinner"></span>
-      <strong ng-bind="(state.mailList.selected.decryptingBody) ? 'Decrypting...' : 'Loading...' "></strong>
-    </div>
-  </div>
-
     <p class="read__signature-status"
       ng-show="(state.mailList.selected.body || state.mailList.selected.html) && state.mailList.selected.signed && !state.mailList.selected.signaturesValid">
       Invalid PGP signature. This message could have been tampered with.
@@ -116,13 +120,11 @@
       <button class="btn btn--light" wo-touch="displayImages()">Display images</button>
     </div>
 
+    <div class="read__body">
       <!-- Render html body in sandboxed iframe -->
-  <div class="read__body"
+      <iframe sandbox="allow-popups allow-scripts" src="tpl/read-sandbox.html" scrolling="no" frame-load></iframe>
-    ng-show="state.mailList.selected && (!state.mailList.selected.encrypted && (state.mailList.selected.body || state.mailList.selected.html)) || (state.mailList.selected.encrypted && state.mailList.selected.decrypted)">
+    </div>
-    <iframe sandbox="allow-popups allow-scripts" src="tpl/read-sandbox.html"
+  </div><!--/read__content-->
-      frame-load>
-    </iframe>
-  </div><!--/read__body-->
 
   <div class="read__action-toolbar" ng-controller="ActionBarCtrl">
     <div class="toolbar">
@@ -179,4 +181,4 @@
     </li>
   </ul><!--/dropdown-->
 
-</div>
+</div><!--/read-->