Improve "load images" button from Webmail

UI/Templates/MailerUI/UIxMailViewTemplate.wox

@@ -59,8 +59,9 @@
             ng-click="doDelete(message)"><i class="md-icon-delete"><!-- delete --></i>
         </md-button>
       <md-button class="iconButton" aria-label="Load Images"
-            ng-show="message.hasUnsafeContent"
-            ng-click="loadImages()"><var:string label:value="Load Images"/>
+            ng-show="message.$hasUnsafeContent"
+            ng-click="message.loadUnsafeContent()">
+        <md-tooltip md-direction="left"><var:string label:value="Load Images"/></md-tooltip>
         <i class="md-icon-image"><!--icon--></i>
       </md-button>
     </div>

UI/WebServerResources/js/Mailer/message-model.js

@@ -13,6 +13,8 @@
   function Message(accountId, mailbox, futureMessageData) {
     this.accountId = accountId;
     this.$mailbox = mailbox;
+    this.$hasUnsafeContent = false;
+    this.$loadUnsafeContent = false;
     // Data is immediately available
     if (typeof futureMessageData.then !== 'function') {
       //console.debug(JSON.stringify(futureMessageData, undefined, 2));
@@ -124,6 +126,15 @@
     return address;
   };
 
+  /**
+   * @function loadUnsafeContent
+   * @memberof Message.prototype
+   * @desc Mark the message to load unsafe resources when calling $content().
+   */
+  Message.prototype.loadUnsafeContent = function() {
+    this.$loadUnsafeContent = true;
+  };
+
   /**
    * @function $content
    * @memberof Message.prototype
@@ -131,8 +142,31 @@
    * @returns the HTML representation of the body
    */
   Message.prototype.$content = function() {
-    this.hasUnsafeContent = (this.content.indexOf(' unsafe-') > -1);
-    return Message.$sce.trustAs('html', this.content);
+    var _this = this;
+
+    if (this.$loadUnsafeContent) {
+      if (angular.isUndefined(this.unsafeContent)) {
+        this.unsafeContent = document.createElement('div');
+        this.unsafeContent.innerHTML = this.content;
+        angular.forEach(['src', 'data', 'classid', 'background', 'style'], function(suffix) {
+          var elements = _this.unsafeContent.querySelectorAll('[unsafe-' + suffix + ']'),
+              element,
+              value,
+              i;
+          for (i = 0; i < elements.length; i++) {
+            element = angular.element(elements[i]);
+            value = element.attr('unsafe-' + suffix);
+            element.attr(suffix, value);
+            element.removeAttr('unsafe-' + suffix);
+          }
+        });
+      }
+      this.$hasUnsafeContent = false;
+      return Message.$sce.trustAs('html', this.unsafeContent.innerHTML);
+    }
+    else {
+      return Message.$sce.trustAs('html', this.content);
+    }
   };
 
   /**
@@ -212,6 +246,7 @@
    * @see {@link Message.$reply}
    * @see {@link Message.$replyAll}
    * @see {@link Message.$forwad}
+   * @param {string} action - the HTTP action to perform on the message
    * @returns a promise of the HTTP operations
    */
   Message.prototype.$newDraft = function(action) {
@@ -315,6 +350,8 @@
         angular.extend(_this, data);
         _this.id = _this.$absolutePath();
         _this.$formatFullAddresses();
+        _this.$hasUnsafeContent = (_this.content.indexOf(' unsafe-') > -1);
+        _this.$loadUnsafeContent = false;
         deferred.resolve(_this);
       });
       if (!_this.isread) {

UI/WebServerResources/js/MailerUI.js

@@ -244,22 +244,6 @@
 
     .controller('MessageCtrl', ['$scope', '$rootScope', '$stateParams', '$state', 'stateAccount', 'stateMailbox', 'stateMessage', '$timeout', 'encodeUriFilter', 'sgFocus', 'sgDialog', 'sgAccount', 'sgMailbox', function($scope, $rootScope, $stateParams, $state, stateAccount, stateMailbox, stateMessage, $timeout, encodeUriFilter, focus, Dialog, Account, Mailbox) {
       $rootScope.message = stateMessage;
-      $scope.loadImages = function() {
-        // Load external resources
-        angular.forEach(['src', 'data', 'classid', 'background', 'style'], function(suffix) {
-          var elements = document.querySelectorAll('#messageView [unsafe-' + suffix + ']'),
-              element,
-              value,
-              i;
-          for (i = 0; i < elements.length; i++) {
-            element = angular.element(elements[i]);
-            value = element.attr('unsafe-' + suffix);
-            element.attr(suffix, value);
-            element.removeAttr('unsafe-' + suffix);
-          }
-          stateMessage.hasUnsafeContent = false;
-        });
-      };
       $scope.doDelete = function() {
         stateMailbox.$deleteMessages([stateMessage.uid]).then(function() {
           // Remove card from list of addressbook