[WO-409] show images only on user request

src/js/controller/read.js

@@ -338,14 +338,40 @@ define(function(require) {
     ngModule.directive('frameLoad', function($sce, $timeout) {
         return function(scope, elm, attrs) {
             scope.$watch(attrs.frameLoad, function(value) {
+                var html = value;
                 scope.html = undefined;
-                if (value) {
-                    $timeout(function() {
-                        scope.html = true;
-                        var iframe = elm[0];
-                        iframe.contentWindow.postMessage(value, '*');
-                    });
+                var iframe = elm[0];
+
+                if (!html) {
+                    return;
                 }
+
+                // if there are image tags in the html?
+                var hasImages = /<img[^>]+\bsrc=['"][^'">]+['"]/ig.test(html);
+                scope.showImageButton = hasImages;
+
+                // inital loading
+                $timeout(function() {
+                    scope.html = true;
+                    iframe.contentWindow.postMessage({
+                        html: html,
+                        removeImages: hasImages // avoids doing unnecessary work on the html
+                    }, '*');
+                });
+
+                // no need to add a scope function to reload the html if there are no images
+                if (!hasImages) {
+                    return;
+                }
+
+                // reload WITH images
+                scope.displayImages = function() {
+                    scope.showImageButton = false;
+                    iframe.contentWindow.postMessage({
+                        html: html,
+                        removeImages: false
+                    }, '*');
+                };
             });
         };
     });

src/sandbox.js

@@ -3,6 +3,18 @@
 
     // set listener for event from main window
     window.addEventListener('message', function(e) {
-        document.body.innerHTML = e.data.replace(/<a /g, '<a target="_blank" ');
+        var html = e.data.html;
+
+        // make links open in a new window
+        html = html.replace(/<a /g, '<a target="_blank" ');
+
+        // remove sources where necessary
+        if (e.data.removeImages) {
+            html = html.replace(/(<img[^>]+\b)src=['"][^'">]+['"]/ig, function(match, prefix) {
+                return prefix;
+            });
+        }
+
+        document.body.innerHTML = html;
     }, false);
 })();

src/sass/views/_read.scss

@@ -114,6 +114,17 @@
         }
     }
 
+    .showImages {
+        flex-shrink: 0;
+        padding: 1em;
+        text-align: center;
+
+        a {
+            text-decoration: none;
+            color: $color-blue;
+        }
+    }
+
     iframe {
         flex-grow: 1;
         margin-top: 1.75em;

src/tpl/read.html

@@ -53,6 +53,10 @@
     </div><!--/.working-->
   </div><!--/.working-wrapper-->
 
+  <div class="showImages" ng-show="html && showImageButton">
+    <a href='#' ng-click="displayImages(); $event.preventDefault()">Display images</a>
+  </div>
+
   <!-- Render html body in sandboxed iframe -->
   <iframe ng-show="html" sandbox="allow-popups allow-scripts" src="sandbox.html" 
     frame-load="state.mailList.selected.html">