Merge pull request #598 from damencho/minimize-document-modifications

Minimize document modifications on every presence

modules/UI/side_pannels/contactlist/ContactList.js

     },
 
     onDisplayNameChange (id, displayName) {
+        if(!displayName)
+            return;
         if (id === 'localVideoContainer') {
             id = APP.conference.localId;
         }
         let contactName = $(`#contacts #${id}>p`);
 
-        if (displayName) {
+        if (contactName.text() !== displayName) {
             contactName.text(displayName);
         }
     },

modules/UI/videolayout/ConnectionIndicator.js

             APP.translation.translateString("connectionindicator.na") + "</div>",
             skin: "black"});
 
+    // override popover show method to make sure we will update the content
+    // before showing the popover
+    var origShowFunc = this.popover.show;
+    this.popover.show = function () {
+        // update content by forcing it, to finish even if popover
+        // is not visible
+        this.updatePopoverData(true);
+        // call the original show, passing its actual this
+        origShowFunc.call(this.popover);
+    }.bind(this);
+
     this.emptyIcon = this.connectionIndicatorContainer.appendChild(
         createIcon(["connection", "connection_empty"]));
     this.fullIcon = this.connectionIndicatorContainer.appendChild(
 };
 
 /**
- * Updates the content of the popover
+ * Updates the content of the popover if its visible
+ * @param force to work even if popover is not visible
  */
-ConnectionIndicator.prototype.updatePopoverData = function () {
-    this.popover.updateContent(
-        `<div class="connection_info">${this.generateText()}</div>`
-    );
-    APP.translation.translateElement($(".connection_info"));
+ConnectionIndicator.prototype.updatePopoverData = function (force) {
+    // generate content, translate it and add it to document only if
+    // popover is visible or we force to do so.
+    if(this.popover.popoverShown || force) {
+        this.popover.updateContent(
+            `<div class="connection_info">${this.generateText()}</div>`
+        );
+        APP.translation.translateElement($(".connection_info"));
+    }
 };
 
 /**

modules/UI/videolayout/RemoteVideo.js

     // If we already have a display name for this video.
     if (nameSpan.length > 0) {
         if (displayName && displayName.length > 0) {
-            $('#' + this.videoSpanId + '_name').text(displayName);
+            var displaynameSpan = $('#' + this.videoSpanId + '_name');
+            if (displaynameSpan.text() !== displayName)
+                displaynameSpan.text(displayName);
         }
         else if (key && key.length > 0) {
             var nameHtml = APP.translation.generateTranslationHTML(key);