@openui5/sap.ui.core 1.93.1 → 1.96.0

package/src/sap/ui/core/support/controls/InteractionTree.js

@@ -7,6 +7,7 @@
 sap.ui.define([
 	'sap/ui/base/ManagedObject',
 	'sap/ui/core/IconPool',
+	'sap/ui/core/Core',
 	'sap/m/library',
 	'sap/m/Popover',
 	'sap/m/Text',
@@ -21,6 +22,7 @@ sap.ui.define([
     function(
 		ManagedObject,
 	   IconPool,
+	   Core,
 	   mobileLibrary,
 	   Popover,
 	   Text,
@@ -48,7 +50,6 @@ sap.ui.define([
 
        InteractionTree.expandIcon = 'sap-icon://navigation-right-arrow';
        InteractionTree.collapseIcon = 'sap-icon://navigation-down-arrow';
-       InteractionTree.headerIcon = '<img class="sapUiInteractionSvgImage" src="HeaderIcon.svg">';
 
        InteractionTree.prototype.setInteractions = function (interactions) {
 
@@ -100,9 +101,9 @@ sap.ui.define([
        InteractionTree.prototype.renderAt = function (parent) {
           this.parent = parent;
 
-          var rm = sap.ui.getCore().createRenderManager();
+          var rm = Core.createRenderManager();
           this.render(rm);
-          rm.flush(parent);
+          rm.flush(parent, true);
           rm.destroy();
 
           this.attachEvents();
@@ -111,18 +112,19 @@ sap.ui.define([
        };
 
        InteractionTree.prototype.render = function (rm) {
+          rm.openStart("div", this.getId())
+             .class("sapUiInteractionTreeContainer")
+             .class("sapUiSizeCompact")
+             .openEnd();
 
-          rm.write('<div id="' + this.getId() + '" class="sapUiInteractionTreeContainer sapUiSizeCompact">');
+          rm.openStart("div")
+             .class("sapUiInteractionGridLinesContainer")
+             .openEnd()
+             .close("div");
 
-          rm.write('<div class="sapUiInteractionGridLinesContainer"></div>');
-
-          rm.write('<ul');
-
-          rm.addClass("sapUiInteractionTree");
-
-          rm.writeClasses();
-
-          rm.write(">");
+          rm.openStart("ul")
+             .class("sapUiInteractionTree")
+             .openEnd();
 
           this.renderHeaders(rm);
 
@@ -139,9 +141,8 @@ sap.ui.define([
              this.renderInteraction(rm, interaction, i);
           }
 
-          rm.write("</ul>");
-
-          rm.write("</div>");
+          rm.close("ul");
+          rm.close("div");
        };
 
        InteractionTree.prototype.attachEvents = function () {
@@ -173,32 +174,51 @@ sap.ui.define([
 
        InteractionTree.prototype.updateGridLines = function () {
 
-          var gridContainer = this.gridContainer,
-              range = this.timeRange,
-              width = this.gridContainer.width();
+           var gridContainer = this.gridContainer,
+               range = this.timeRange,
+               width = this.gridContainer.width(),
+               rm = Core.createRenderManager();
 
-          if (this.gridContainerWidth == width) {
-             return;
-          }
+           if (this.gridContainerWidth === width) {
+               return;
+           }
 
-          gridContainer.empty();
 
-          gridContainer.append('<div style="left:' + (this.getPosition(width, range, 0) + 6) + 'px" class="sapUiInteractionGridLineIntervalText">' + this.formatGridLineDuration(0) + '</div>');
+           rm.openStart("div")
+               .style("left", this.getPosition(width, range, 0) + 6 + "px")
+               .class("sapUiInteractionGridLineIntervalText")
+               .openEnd()
+               .text(this.formatGridLineDuration(0))
+               .close("div");
 
-          var interval = this.calculateInterval(width, range);
+           var interval = this.calculateInterval(width, range);
 
-          for (var i = interval; i < range; i += interval) {
+           for (var i = interval; i < range; i += interval) {
 
-             var position = this.getPosition(width, range, i);
+               var position = this.getPosition(width, range, i);
 
-             if (i + interval < range) {
-                gridContainer.append('<div style="left:' + (position + 6) + 'px" class="sapUiInteractionGridLineIntervalText">' + this.formatGridLineDuration(i) + '</div>');
-             }
+               if (i + interval < range) {
 
-             gridContainer.append('<div style="left:' + position + 'px" class="sapUiInteractionGridLine"></div>');
-          }
+                   rm.openStart("div")
+                       .style("left", position + 6 + "px")
+                       .class("sapUiInteractionGridLineIntervalText")
+                       .openEnd()
+                       .text(this.formatGridLineDuration(i))
+                       .close("div");
+               }
 
-          this.gridContainerWidth = width;
+               rm.openStart("div")
+                   .style("left", position + "px")
+                   .class("sapUiInteractionGridLine")
+                   .openEnd()
+                   .close("div");
+           }
+
+           gridContainer.empty();
+           rm.flush(gridContainer[0], true);
+           rm.destroy();
+
+           this.gridContainerWidth = width;
        };
 
        InteractionTree.prototype.calculateInterval = function (width, range) {
@@ -243,8 +263,11 @@ sap.ui.define([
           var $parent = $icon.parent();
           $icon.remove();
 
-          var iconHTML = this.getIconHTML(!expanded);
-          $parent.children().eq(0).after(iconHTML);
+          var rm = Core.createRenderManager();
+          this.renderIcon(rm, !expanded);
+
+          rm.flush($parent[0], false, true);
+          rm.destroy();
 
           var $li = $parent.parent().parent();
           $li.toggleClass('sapUiInteractionItemExpanded');
@@ -262,46 +285,49 @@ sap.ui.define([
        };
 
        InteractionTree.prototype.renderHeaders = function (rm) {
-          rm.write('<li>');
-
-          rm.write('<div');
-
-          rm.addClass("sapUiInteractionTreeItem");
-          rm.addClass("sapUiInteractionItemDiv");
-          rm.addClass("sapUiInteractionHeader");
-
-          rm.writeClasses();
-
-          rm.write(">");
+           rm.openStart("li")
+               .openEnd();
 
-          rm.write('<div class="sapUiInteractionTreeItemLeft">');
+           rm.openStart("div")
+               .class("sapUiInteractionTreeItem")
+               .class("sapUiInteractionItemDiv")
+               .class("sapUiInteractionHeader")
+               .openEnd();
 
-          rm.write("<div>");
 
-          rm.write('<span class="sapUiInteractionItemComponentText">');
-          rm.writeEscaped('Component');
-          rm.write('</span>');
+           rm.openStart("div")
+               .class("sapUiInteractionTreeItemLeft")
+               .openEnd();
 
+           rm.openStart("div")
+               .openEnd();
 
-          rm.write("<br>");
+           rm.openStart("span")
+               .class("sapUiInteractionItemComponentText")
+               .openEnd()
+               .text("Component")
+               .close("span");
 
+           rm.voidStart("br")
+               .voidEnd();
 
-          rm.write('<span class="sapUiInteractionItemTriggerText">');
-          rm.writeEscaped('Trigger');
-          rm.write('</span>');
+           rm.openStart("span")
+               .class("sapUiInteractionItemTriggerText")
+               .openEnd()
+               .text("Trigger")
+               .close("span");
 
-          rm.write("</div>");
 
-          rm.write('</div>'); // sapUiInteractionTreeItemLeft
+           rm.close("div");
+           rm.close("div"); // sapUiInteractionTreeItemLeft
 
+           rm.openStart("div")
+               .class("sapUiInteractionTreeItemRight")
+               .openEnd()
+               .close("div");
 
-          rm.write('<div class="sapUiInteractionTreeItemRight">');
-
-          rm.write('</div>');
-          rm.write("</div>");
-
-
-          rm.write("</li>");
+           rm.close("div");
+           rm.close("li");
        };
 
        InteractionTree.prototype.isInteractionVisible = function (interaction) {
@@ -348,27 +374,27 @@ sap.ui.define([
              return;
           }
 
-          rm.write('<li data-interaction-index="' + index + '"');
+          rm.openStart("li")
+            .attr("data-interaction-index", index);
+
 
           if (interaction.isExpanded) {
-             rm.addClass('sapUiInteractionItemExpanded');
-             rm.writeClasses();
+             rm.class('sapUiInteractionItemExpanded');
           }
 
-          rm.write('>');
+          rm.openEnd();
 
           this.renderInteractionDiv(rm, interaction);
 
-          rm.write("<ul");
+          rm.openStart("ul");
 
-          rm.addClass("sapUiInteractionItem");
+          rm.class("sapUiInteractionItem");
 
           if (!interaction.isExpanded) {
-             rm.addClass("sapUiHiddenUiInteractionItems");
+             rm.class("sapUiHiddenUiInteractionItems");
           }
 
-          rm.writeClasses();
-          rm.write(">");
+          rm.openEnd();
 
 
           for (var i = 0; i < requests.length; i++) {
@@ -376,125 +402,168 @@ sap.ui.define([
              this.renderRequest(rm, interaction, request, i);
           }
 
-          rm.write("</ul>");
-          rm.write("</li>");
+          rm.close("ul");
+          rm.close("li");
        };
 
        InteractionTree.prototype.renderInteractionDiv = function (rm, interaction) {
-          rm.write('<div');
+           rm.openStart("div");
 
-          rm.addClass("sapUiInteractionTreeItem");
-          rm.addClass("sapUiInteractionItemDiv");
+           rm.class("sapUiInteractionTreeItem");
+           rm.class("sapUiInteractionItemDiv");
 
-          rm.writeClasses();
+           rm.openEnd();
 
-          rm.write(">");
+           rm.openStart("div")
+               .class("sapUiInteractionLeft")
+               .class("sapUiInteractionTreeItemLeft")
+               .openEnd();
 
-          rm.write('<div class="sapUiInteractionLeft sapUiInteractionTreeItemLeft">');
+           rm.openStart("div")
+               .openEnd();
 
-          rm.write("<div>");
+           rm.openStart("span")
+               .class("sapUiInteractionItemComponentText")
+               .openEnd();
 
-          rm.write('<span class="sapUiInteractionItemComponentText">');
-          rm.writeEscaped((interaction.component !== "undetermined") ? interaction.component : 'Initial Loading');
-          rm.write('</span>');
+           rm.text((interaction.component !== "undetermined") ? interaction.component : 'Initial Loading');
+           rm.close("span");
 
 
-          rm.write("<br>");
+           rm.voidStart("br")
+               .voidEnd();
 
 
-          rm.write('<span class="sapUiInteractionItemTriggerText">');
-          rm.writeEscaped(interaction.trigger + " / " + interaction.event);
-          rm.write('</span>');
+           rm.openStart("span")
+               .class("sapUiInteractionItemTriggerText")
+               .openEnd()
+               .text(interaction.trigger + " / " + interaction.event)
+               .close("span");
 
-          rm.write("</div>");
+           rm.close("div");
 
-          if (interaction.requests.length) {
-             this.renderIcon(rm, interaction.isExpanded);
-          }
+           if (interaction.requests.length) {
+               this.renderIcon(rm, interaction.isExpanded);
+           }
 
-          if (interaction.sapStatistics.length && interaction.requests.length) {
-             rm.write('<div class="sapUiInteractionHeaderIcon">' + InteractionTree.headerIcon + '</div>');
-          }
+           if (interaction.sapStatistics.length && interaction.requests.length) {
 
-          rm.write('</div>'); // sapUiInteractionTreeItemLeft
+               rm.openStart("div")
+                   .class("sapUiInteractionHeaderIcon")
+                   .openEnd();
 
-          rm.write('<div class="sapUiInteractionTreeItemRight">');
+               rm.voidStart("img")
+                   .class("sapUiInteractionSvgImage")
+                   .attr("src", "HeaderIcon.svg")
+                   .voidEnd();
 
-          var middle = Math.round(interaction.start + interaction.duration);
+               rm.close("div");
+           }
 
-          this.renderInteractionPart(rm, interaction.start, middle, 'sapUiInteractionBlue');
-          // this.renderInteractionPart(rm, middle, interaction.end, 'sapUiInteractionBlueLight');
+           rm.close("div"); // sapUiInteractionTreeItemLeft
 
-          rm.write('</div>');
-          rm.write("</div>");
-       };
+           rm.openStart("div")
+               .class("sapUiInteractionTreeItemRight")
+               .openEnd();
 
-       InteractionTree.prototype.renderInteractionPart = function (rm, start, end, colorClass) {
-          if (this.actualStartTime > end || this.actualEndTime < start) {
-             return;
-          }
 
-          end = Math.min(end, this.actualEndTime);
-          start = Math.max(start, this.actualStartTime);
+           var middle = Math.round(interaction.start + interaction.duration);
 
-          var left = 100 / this.timeRange * (start - this.actualStartTime);
-          var right = 100 / this.timeRange * (end - this.actualStartTime);
-          var width = right - left;
+           this.renderInteractionPart(rm, interaction.start, middle, 'sapUiInteractionBlue');
+           // this.renderInteractionPart(rm, middle, interaction.end, 'sapUiInteractionBlueLight');
+
+           rm.close("div");
+           rm.close("div");
+       };
 
-          rm.write('<span style="margin-left: ' + left + '%; width: ' + width + '%" class="sapUiInteractionTimeframe sapUiInteractionTimeInteractionFrame ' + colorClass + '"></span>');
+       InteractionTree.prototype.renderInteractionPart = function (rm, start, end, colorClass) {
+           if (this.actualStartTime > end || this.actualEndTime < start) {
+               return;
+           }
+
+           end = Math.min(end, this.actualEndTime);
+           start = Math.max(start, this.actualStartTime);
+
+           var left = 100 / this.timeRange * (start - this.actualStartTime);
+           var right = 100 / this.timeRange * (end - this.actualStartTime);
+           var width = right - left;
+
+           rm.openStart("span")
+               .style("margin-left", left + "%")
+               .style("width", width + "%")
+               .class("sapUiInteractionTimeframe")
+               .class("sapUiInteractionTimeInteractionFrame")
+               .class(colorClass)
+               .openEnd()
+               .close("span");
        };
 
        InteractionTree.prototype.renderRequest = function (rm, interaction, request, index) {
 
-          var fetchStartOffset = request.fetchStartOffset;
+           var fetchStartOffset = request.fetchStartOffset;
 
-          var start = fetchStartOffset + request.startTime;
-          var end = fetchStartOffset + request.startTime + this.getRequestDuration(request);
+           var start = fetchStartOffset + request.startTime;
+           var end = fetchStartOffset + request.startTime + this.getRequestDuration(request);
 
-          if (this.actualStartTime > end || this.actualEndTime < start) {
-             return;
-          }
+           if (this.actualStartTime > end || this.actualEndTime < start) {
+               return;
+           }
 
-          rm.write('<li data-request-index="' + index + '"');
+           rm.openStart("li")
+               .attr("data-request-index", index)
+               .class("sapUiInteractionTreeItem")
+               .class("sapUiInteractionRequest")
+               .openEnd();
 
-          rm.addClass("sapUiInteractionTreeItem");
-          rm.addClass("sapUiInteractionRequest");
+           rm.openStart("div")
+               .class("sapUiInteractionTreeItemLeft")
+               .class("sapUiInteractionRequestLeft")
+               .openEnd();
 
-          rm.writeClasses();
+           var requestType = request.initiatorType || request.entryType;
 
-          rm.write(">");
+           var colorClass = this.getRequestColorClass(requestType);
 
-          rm.write('<div class="sapUiInteractionTreeItemLeft sapUiInteractionRequestLeft">');
+           rm.openStart("span")
+               .class("sapUiInteractionRequestIcon")
+               .class(colorClass)
+               .openEnd()
+               .close("span");
 
-          var requestType = request.initiatorType || request.entryType;
+           rm.openStart("span")
+               .class("sapUiInteractionItemEntryTypeText")
+               .openEnd()
+               .text(requestType)
+               .close("span");
 
-          var colorClass = this.getRequestColorClass(requestType);
+           if (this.getRequestSapStatistics(interaction, request)) {
+               rm.openStart("div")
+                   .class("sapUiInteractionRequestHeaderIcon")
+                   .openEnd();
 
-          rm.write('<span class="sapUiInteractionRequestIcon ' + colorClass + '"></span>');
+               rm.voidStart("img")
+                   .class("sapUiInteractionSvgImage")
+                   .attr("src", "HeaderIcon.svg")
+                   .voidEnd();
 
-          rm.write('<span class="sapUiInteractionItemEntryTypeText">');
-          rm.writeEscaped(requestType);
-          rm.write('</span>');
+               rm.close("div");
+           }
 
-          if (this.getRequestSapStatistics(interaction, request)) {
-            rm.write('<div class="sapUiInteractionRequestHeaderIcon">' + InteractionTree.headerIcon + '</div>');
-          }
-
-          rm.write('</div>');
-
-          rm.write('<div class="sapUiInteractionTreeItemRight"');
-          rm.write('>');
+           rm.close("div");
 
-          var requestStart = this.getRequestRequestStart(request) + fetchStartOffset;
-          var responseStart = this.getRequestResponseStart(request) + fetchStartOffset;
+           rm.openStart("div")
+               .class("sapUiInteractionTreeItemRight")
+               .openEnd();
 
-          this.renderRequestPart(rm, start, requestStart, colorClass + '70');
-          this.renderRequestPart(rm, requestStart, responseStart, colorClass);
-          this.renderRequestPart(rm, responseStart, end, colorClass + '70');
+           var requestStart = this.getRequestRequestStart(request) + fetchStartOffset;
+           var responseStart = this.getRequestResponseStart(request) + fetchStartOffset;
 
-          rm.write('</div>');
+           this.renderRequestPart(rm, start, requestStart, colorClass + '70');
+           this.renderRequestPart(rm, requestStart, responseStart, colorClass);
+           this.renderRequestPart(rm, responseStart, end, colorClass + '70');
 
-          rm.write("</li>");
+           rm.close("div");
+           rm.close("li");
        };
 
        InteractionTree.prototype.getRequestSapStatistics = function (interaction, request) {
@@ -543,18 +612,19 @@ sap.ui.define([
 
           /* eslint-disable no-loop-func */
           if (requestDivElements.length) {
-             var oPopover = createEmptyPopOver();
+              var oPopover = createEmptyPopOver();
 
-             for (var i = 0; i < requestDivElements.length; i++) {
-                requestDivElements[i].addEventListener('click', function (event) {
-                   initializePopOverClientServerProgressBar.call(this);
-                   initializePopOverRequestData.call(this);
-                   initializePopOverSapStatisticsData.call(this);
+              for (var i = 0; i < requestDivElements.length; i++) {
+                  requestDivElements[i].addEventListener('click', function (event) {
+                      initializePopOverRequestData.call(this);
+                      initializePopOverSapStatisticsData.call(this);
 
-                   var requestBarElement = jQuery(this).children()[0];
-                   oPopover.openBy(requestBarElement);
-                });
-             }
+                      var requestBarElement = jQuery(this).children()[0];
+                      oPopover.openBy(requestBarElement);
+
+                      initializePopOverClientServerProgressBar.call(this);
+                  });
+              }
           }
           /* eslint-enable no-loop-func */
 
@@ -627,54 +697,106 @@ sap.ui.define([
 
           function initializePopOverClientServerProgressBar() {
 
-             var request = that.getRequestFromElement(jQuery(this));
+              var rm = Core.createRenderManager();
+              var request = that.getRequestFromElement(jQuery(this));
 
-             var fetchStartOffset = request.fetchStartOffset;
-             var duration = that.getRequestDuration(request);
+              var fetchStartOffset = request.fetchStartOffset;
+              var duration = that.getRequestDuration(request);
 
-             var start = fetchStartOffset + request.startTime;
-             var end = start + duration;
+              var start = fetchStartOffset + request.startTime;
+              var end = start + duration;
+
+              var requestStart = that.getRequestRequestStart(request) + fetchStartOffset;
+              var responseStart = that.getRequestResponseStart(request) + fetchStartOffset;
+
+              var preprocessingTime = requestStart - start;
+              var serverTotalTime = responseStart - requestStart;
+
+              var clientTotalTime = end - responseStart;
+
+              var serverTimePercent = Math.floor(100 * serverTotalTime / duration);
+              var clientTimePercent = Math.floor(100 * clientTotalTime / duration);
+              var preprocessingTimePercent = Math.floor(100 * preprocessingTime / duration);
+
+              rm.openStart("div")
+                  .class("sapUiInteractionTitle")
+                  .openEnd();
+
+
+              [['PREPROCESSING', that.formatDuration(preprocessingTime)],
+                  ['SERVER', that.formatDuration(serverTotalTime)],
+                  ['CLIENT', that.formatDuration(clientTotalTime)]].forEach(function (item) {
 
-             var requestStart = that.getRequestRequestStart(request) + fetchStartOffset;
-             var responseStart = that.getRequestResponseStart(request) + fetchStartOffset;
+                  rm.openStart("span")
+                      .class("sapUiInteractionTitleSection")
+                      .openEnd();
 
-             var preprocessingTime = requestStart - start;
-             var serverTotalTime = responseStart - requestStart;
+                  rm.openStart("div")
+                      .class("sapUiInteractionTitleText")
+                      .openEnd()
+                      .text(item[0])
+                      .close("div");
 
-             var clientTotalTime = end - responseStart;
+                  rm.openStart("div")
+                      .class("sapUiInteractionTitleSubText")
+                      .openEnd()
+                      .text(item[1])
+                      .close("div");
 
-             var serverTimePercent = Math.floor(100 * serverTotalTime / duration);
-             var clientTimePercent = Math.floor(100 * clientTotalTime / duration);
-             var preprocessingTimePercent = Math.floor(100 *  preprocessingTime / duration);
+                  rm.close("span");
+              });
 
-             var titleTemplate = '<span class="sapUiInteractionTitleSection"><div class="sapUiInteractionTitleText">{Title}</div><div class="sapUiInteractionTitleSubText">{Subtitle}</div></span>';
+              rm.close("div");
 
-             var clientVsServerHTML = '<div class="sapUiInteractionTitle">';
+              rm.flush(jQuery(".sapUiSupportPopoverTitle")[0], true);
+              rm.destroy();
 
-             clientVsServerHTML += titleTemplate.replace('{Title}', 'PREPROCESSING').replace('{Subtitle}', that.formatDuration(preprocessingTime));
-             clientVsServerHTML += titleTemplate.replace('{Title}', 'SERVER').replace('{Subtitle}', that.formatDuration(serverTotalTime));
-             clientVsServerHTML += titleTemplate.replace('{Title}', 'CLIENT').replace('{Subtitle}', that.formatDuration(clientTotalTime));
+              var requestType = request.initiatorType || request.entryType;
 
-             clientVsServerHTML += '</div>';
+              var colorClass = that.getRequestColorClass(requestType);
+              var colorClass70 = colorClass + '70';
 
-             clientVsServerTitle.setContent(clientVsServerHTML);
+              rm = Core.createRenderManager();
 
-             var requestType = request.initiatorType || request.entryType;
+              rm.openStart("div")
+                  .class("sapUiSupportIntProgressBarParent")
+                  .openEnd();
 
-             var colorClass = that.getRequestColorClass(requestType);
-             var colorClass70 = colorClass + '70';
+              rm.openStart("span")
+                  .class("sapUiSupportIntProgressBar")
+                  .class(colorClass70)
+                  .style("width", "calc(" + preprocessingTimePercent + "% - 1px)")
+                  .openEnd()
+                  .close("span");
 
-             var preprocessHTML = "<span class='sapUiSupportIntProgressBar " + colorClass70 + "'' style=\"width:calc(" + preprocessingTimePercent +
-                 "% - 1px)\"></span><span class='sapUiSupportIntProgressBarSeparator'></span>";
+              rm.openStart("span")
+                  .class("sapUiSupportIntProgressBarSeparator")
+                  .openEnd()
+                  .close("span");
 
-             var serverHTML = "<span class='sapUiSupportIntProgressBar " + colorClass + "' style=\"width:calc(" + serverTimePercent + "% - 1px)\"></span>" +
-                 "<span class='sapUiSupportIntProgressBarSeparator'></span>";
+              rm.openStart("span")
+                  .class("sapUiSupportIntProgressBar")
+                  .class(colorClass)
+                  .style("width", "calc(" + serverTimePercent + "% - 1px)")
+                  .openEnd()
+                  .close("span");
 
-             var clientHTML = "<span class='sapUiSupportIntProgressBar " + colorClass70 + "'' style=\"width:calc(" + clientTimePercent + "% - 1px)\"></span>";
+              rm.openStart("span")
+                  .class("sapUiSupportIntProgressBarSeparator")
+                  .openEnd()
+                  .close("span");
 
-             var progressBarHTML = "<div class='sapUiSupportIntProgressBarParent'>" + preprocessHTML + serverHTML + clientHTML + "</div>";
+              rm.openStart("span")
+                  .class("sapUiSupportIntProgressBar")
+                  .class(colorClass70)
+                  .style("width", "calc(" + clientTimePercent + "% - 1px)")
+                  .openEnd()
+                  .close("span");
 
-             progressBar.setContent(progressBarHTML);
+              rm.close("div");
+
+              rm.flush(jQuery(".sapUiSupportPopoverProgressBar")[0], true);
+              rm.destroy();
           }
 
           function createEmptyPopOver() {
@@ -698,8 +820,14 @@ sap.ui.define([
           }
 
           function createPopOverContent() {
-             clientVsServerTitle = new HTML();
-             progressBar = new HTML();
+             clientVsServerTitle = new HTML({
+                 content: '<div class="sapUiSupportPopoverTitle"></div>',
+                 preferDOM: false
+             });
+             progressBar = new HTML({
+                 content: '<div class="sapUiSupportPopoverProgressBar"></div>',
+                 preferDOM: false
+             });
              closeButton = new Button({
                 icon : IconPool.getIconURI("decline"),
                 type: "Transparent",
@@ -889,19 +1017,25 @@ sap.ui.define([
        };
 
        InteractionTree.prototype.renderRequestPart = function (rm, start, end, colorClass) {
-          if (this.actualStartTime > end || this.actualEndTime < start) {
-             return;
-          }
-
-          end = Math.min(end, this.actualEndTime);
-          start = Math.max(start, this.actualStartTime);
-
-          var left = 100 / this.timeRange * (start - this.actualStartTime);
-          var right = 100 / this.timeRange * (end - this.actualStartTime);
-          var width = right - left;
-
-          rm.write('<span style="margin-left: ' + left + '%; width: ' + width + '%" class="sapUiInteractionTimeframe sapUiInteractionTimeRequestFrame ' + colorClass + '"></span>');
-
+           if (this.actualStartTime > end || this.actualEndTime < start) {
+               return;
+           }
+
+           end = Math.min(end, this.actualEndTime);
+           start = Math.max(start, this.actualStartTime);
+
+           var left = 100 / this.timeRange * (start - this.actualStartTime);
+           var right = 100 / this.timeRange * (end - this.actualStartTime);
+           var width = right - left;
+
+           rm.openStart("span")
+               .style("margin-left", left + "%")
+               .style("width", width + "%")
+               .class("sapUiInteractionTimeframe")
+               .class("sapUiInteractionTimeRequestFrame")
+               .class(colorClass)
+               .openEnd()
+               .close("span");
        };
 
        InteractionTree.prototype.getRequestDuration = function(request) {
@@ -961,32 +1095,28 @@ sap.ui.define([
        };
 
        InteractionTree.prototype.renderIcon = function (rm, expanded) {
-          var html = this.getIconHTML(expanded);
-          rm.write(html);
-       };
-
-       InteractionTree.prototype.getIconHTML = function (expanded) {
+           var icon = expanded ? InteractionTree.collapseIcon : InteractionTree.expandIcon;
 
-          var icon = expanded ? InteractionTree.collapseIcon : InteractionTree.expandIcon;
+           rm.openStart("span")
+               .attr("aria-hidden", "true")
+               .attr("expanded", expanded)
+               .class("sapUiIcon")
+               .class("sapUiInteractionTreeIcon");
 
-          var classes = "sapUiIcon sapUiInteractionTreeIcon";
 
-          if (iconInfo && !iconInfo.suppressMirroring) {
-             classes += " sapUiIconMirrorInRTL";
-          }
-
-          var html = '<span aria-hidden="true" expanded="' + expanded + '" class="' + classes + '" ';
+           if (iconInfo && !iconInfo.suppressMirroring) {
+               rm.class("sapUiIconMirrorInRTL");
+           }
 
-          var iconInfo = IconPool.getIconInfo(icon);
-
-          if (iconInfo) {
-             html += 'data-sap-ui-icon-content="' + iconInfo.content + '"';
-             html += ' style="font-family:\'SAP-icons\'"';
-          }
+           var iconInfo = IconPool.getIconInfo(icon);
 
-          html += "></span>";
+           if (iconInfo) {
+               rm.attr("data-sap-ui-icon-content", iconInfo.content);
+               rm.style("font-family", "SAP-icons");
+           }
 
-          return html;
+           rm.openEnd()
+               .close("span");
        };
 
        return InteractionTree;