@openui5/sap.ui.core 1.98.0 → 1.101.0

package/src/sap/ui/core/support/plugins/Interaction.js

@@ -38,7 +38,7 @@ sap.ui.define([
 		 * With this plugIn the performance measurements are displayed
 		 *
 		 * @extends sap.ui.core.support.Plugin
-		 * @version 1.98.0
+		 * @version 1.101.0
 		 * @private
 		 * @alias sap.ui.core.support.plugins.Interaction
 		 */
@@ -104,93 +104,81 @@ sap.ui.define([
 		function initInTools(oSupportStub) {
 
 			var rm = sap.ui.getCore().createRenderManager();
-			rm.write("<div class=\"sapUiSupportToolbar\">");
-			rm.write("<button id=\"" + this.getId() + "-record\" class=\"sapUiSupportIntToggleRecordingBtn\"></button>");
-			rm.write("<label class='sapUiSupportIntODataLbl'><input type='checkbox' id=\"" + this.getId() + "-odata\" > Enable OData Statistics</label>");
-			rm.write("<div class='sapUiSupportIntFupInputMask'>");
-			rm.write("<input id=\"" + this.getId() + "-fileImport\" tabindex='-1' size='1' accept='application/zip' type='file'>");
-			rm.write("</div>");
-			rm.write("<button id=\"" + this.getId() + "-import\" class=\"sapUiSupportIntImportExportBtn sapUiSupportIntImportBtn sapUiSupportRoundedButton \">Import</button>");
-			rm.write("<button id=\"" + this.getId() + "-export\" class=\"sapUiSupportIntImportExportBtn sapUiSupportIntExportBtn sapUiSupportRoundedButton sapUiSupportIntHidden \">Export</button>");
-			rm.write("<span id=\"" + this.getId() + "-info\" class=\"sapUiSupportIntRecordingInfo\"></span>");
-			rm.write("</div><div class=\"sapUiSupportInteractionCntnt\">");
-			rm.write("</div>");
-
-			rm.write('<div class="sapUiPerformanceStatsDiv sapUiSupportIntHidden">');
-			rm.write('<div class="sapUiPerformanceTimeline"></div>');
-			rm.write('<div class="sapUiPerformanceTop">');
-			rm.write('</div>');
-
-			rm.write('<div class="sapUiPerformanceBottom">');
-			rm.write('</div>');
-
-			rm.write('</div>');
-
-			rm.flush(this.$().get(0));
+			rm.openStart("div").class("sapUiSupportToolbar").openEnd();
+				rm.openStart("button", this.getId() + "-record").class("sapUiSupportIntToggleRecordingBtn").openEnd().close("button");
+				rm.openStart("label").class("sapUiSupportIntODataLbl").openEnd();
+					rm.voidStart("input", this.getId() + "-odata").attr("type", "checkbox").voidEnd();
+					rm.text("Enable OData Statistics");
+				rm.close("label");
+				rm.openStart("div").class("sapUiSupportIntFupInputMask").openEnd();
+					rm.voidStart("input", this.getId() + "-fileImport").attr("tabindex", "-1").attr("size", "1").attr("accept", "application/zip").attr("type", "file").voidEnd();
+				rm.close("div");
+				rm.openStart("button", this.getId() + "-import").class("sapUiSupportIntImportExportBtn").class("sapUiSupportIntImportBtn").class("sapUiSupportRoundedButton").openEnd().text("Import").close("button");
+				rm.openStart("button", this.getId() + "-export").class("sapUiSupportIntImportExportBtn").class("sapUiSupportIntExportBtn").class("sapUiSupportRoundedButton").class("sapUiSupportIntHidden").openEnd().text("Export").close("button");
+				rm.openStart("span", this.getId() + "-info").class("sapUiSupportIntRecordingInfo").openEnd().close("span");
+			rm.close("div");
+
+			rm.openStart("div").class("sapUiSupportInteractionCntnt").openEnd();
+			rm.close("div");
+
+			rm.openStart("div").class("sapUiPerformanceStatsDiv").class("sapUiSupportIntHidden").openEnd();
+				rm.openStart("div").class("sapUiPerformanceTimeline").openEnd().close("div");
+				rm.openStart("div").class("sapUiPerformanceTop").openEnd();
+				rm.close("div");
+
+				rm.openStart("div").class("sapUiPerformanceBottom").openEnd();
+				rm.close("div");
+
+			rm.close("div");
+
+			rm.flush(this.dom());
 			rm.destroy();
 
 			// render timeline
 			rm = sap.ui.getCore().createRenderManager();
 			this._oTimelineOverview.render(rm);
-			rm.flush(this.$().find('.sapUiPerformanceStatsDiv .sapUiPerformanceTimeline').get(0));
+			rm.flush(this.dom('.sapUiPerformanceStatsDiv .sapUiPerformanceTimeline'));
 			rm.destroy();
 
 			// render interaction slider
 			rm = sap.ui.getCore().createRenderManager();
 			this._oInteractionSlider.render(rm);
-			rm.flush(this.$().find('.sapUiPerformanceStatsDiv .sapUiPerformanceTop').get(0));
+			rm.flush(this.dom('.sapUiPerformanceStatsDiv .sapUiPerformanceTop'));
 			rm.destroy();
 			this._oInteractionSlider._registerEventListeners();
-			var that = this;
-			jQuery(".sapUiPerformanceTop").on("InteractionSliderChange", {
-			}, function( event, arg1, arg2 ) {
-				that._oInteractionTree.setRange(arg1, arg2);
-			});
-
-			this.$("refresh").on("click", jQuery.proxy(function(oEvent) {
-				this._oStub.sendEvent(this.getId() + "Refresh");
-			}, this));
-			this.$("clear").on("click", jQuery.proxy(function(oEvent) {
-				this._oStub.sendEvent(this.getId() + "Clear");
-			}, this));
+			this.$().find(".sapUiPerformanceTop").on("InteractionSliderChange", {}, function( event, arg1, arg2 ) {
+				this._oInteractionTree.setRange(arg1, arg2);
+			}.bind(this));
 
-			this.$("export").on("click", jQuery.proxy(function(oEvent) {
+			this.dom("export").addEventListener("click", function(oEvent) {
 				//this._oStub.sendEvent(this.getId() + "Export");
 				this.onsapUiSupportInteractionExport();
-			}, this));
-			this.$("fileImport").on("change", jQuery.proxy(function(oEvent) {
+			}.bind(this));
+			this.dom("fileImport").addEventListener("change", function(oEvent) {
 				this.onsapUiSupportInteractionImport();
 				//this._oStub.sendEvent(this.getId() + "Import");
-			}, this));
-			this.$("active").on("click", jQuery.proxy(function(oEvent) {
-				var bActive = false;
-				if (this.$("active").prop("checked")) {
-					bActive = true;
-				}
-				this._oStub.sendEvent(this.getId() + "Activate", {"active": bActive});
-			}, this));
-			this.$("odata").attr('checked',this._bODATA_Stats_On).on("click", jQuery.proxy(function(oEvent) {
+			}.bind(this));
+			this.dom("odata").checked = this._bODATA_Stats_On;
+			this.dom("odata").addEventListener("click", function(oEvent) {
 				jQuery.sap.statistics(!jQuery.sap.statistics());
-			}, this));
-
+			});
 
-			this.$('record').attr('data-state', (!this._bFesrActive) ? 'Start recording' : 'Stop recording');
 
-			this.$('record').on("click", jQuery.proxy(function(oEvent) {
-				if (this.$('record').attr('data-state') === 'Stop recording') {
+			this.dom('record').dataset.state = (!this._bFesrActive) ? 'Start recording' : 'Stop recording';
+			this.dom('record').addEventListener("click", function(oEvent) {
+				var oRecordButton = this.dom('record');
+				if (oRecordButton.dataset.state === 'Stop recording') {
 					this._oStub.sendEvent(this.getId() + "Refresh");
 					this._oStub.sendEvent(this.getId() + "Activate", {"active": false});
-					this.$('record').attr('data-state', 'Start recording');
-					jQuery(".sapUiPerformanceStatsDiv.sapUiSupportIntHidden").removeClass("sapUiSupportIntHidden");
-					jQuery(".sapUiSupportIntExportBtn.sapUiSupportIntHidden").removeClass("sapUiSupportIntHidden");
-				} else if (this.$('record').attr('data-state') === 'Start recording') {
-					jQuery(".sapUiPerformanceStatsDiv").addClass("sapUiSupportIntHidden");
-					jQuery(".sapUiSupportIntExportBtn").addClass("sapUiSupportIntHidden");
+					oRecordButton.dataset.state = 'Start recording';
+					this._showPerfData();
+				} else if (this.dom('record').dataset.state === 'Start recording') {
+					this._hidePerfData();
 					this._oStub.sendEvent(this.getId() + "Clear");
 					this._oStub.sendEvent(this.getId() + "Activate", {"active": true});
-					this.$('record').attr('data-state', 'Stop recording');
+					oRecordButton.dataset.state = 'Stop recording';
 				}
-			}, this));
+			}.bind(this));
 
 		}
 
@@ -246,7 +234,7 @@ sap.ui.define([
 
 			}
 
-			//this._oStub.$('record').attr('data-state', (bActive) ? 'Stop recording' : 'Start recording');
+			//this._oStub.dom('record').dataset.state = (bActive) ? 'Stop recording' : 'Start recording';
 			this._oStub.sendEvent(this.getId() + "SetMeasurements", { "measurements": aMeasurements });
 			this._oStub.sendEvent(this.getId() + "SetActive", {"active": bActive});
 		}
@@ -262,8 +250,8 @@ sap.ui.define([
 			var oParam = oEvent.getParameter("queryString");
 			this._bFesrActive = oParam.bFesrActive;
 			this._bODATA_Stats_On = oParam.bODATA_Stats_On;
-			this.$("odata").attr('checked',this._bODATA_Stats_On);
-			this.$('record').attr('data-state', (!this._bFesrActive) ? 'Start recording' : 'Stop recording');
+			this.dom("odata").checked = this._bODATA_Stats_On;
+			this.dom('record').dataset.state = (!this._bFesrActive) ? 'Start recording' : 'Stop recording';
 		};
 
 
@@ -286,15 +274,6 @@ sap.ui.define([
 		 */
 		Interaction.prototype.onsapUiSupportInteractionSetActive = function(oEvent) {
 
-			var bActive = oEvent.getParameter("active");
-			var oCheckBox = this.$("active");
-
-			if (bActive) {
-				oCheckBox.attr("checked", "checked");
-			} else {
-				oCheckBox.removeAttr("checked");
-			}
-
 		};
 
 		/**
@@ -330,7 +309,7 @@ sap.ui.define([
 		 */
 		Interaction.prototype.onsapUiSupportInteractionStart = function(oEvent) {
 
-			Measurement.start(this.getId() + "-perf","Measurement by support tool");
+			Measurement.start(this.getId() + "-perf", "Measurement by support tool");
 
 		};
 
@@ -390,7 +369,7 @@ sap.ui.define([
 		 * @private
 		 */
 		Interaction.prototype.onsapUiSupportInteractionImport = function(oEvent) {
-			var aFiles = this.$().find('#' + this.getId() + "-fileImport").get(0).files;
+			var aFiles = this.dom("fileImport").files;
 
 			if (aFiles.length === 0) {
 				MessageToast.show('Select a file for import first!', {
@@ -506,16 +485,14 @@ sap.ui.define([
 			}
 
 			if (aMeasurements.length > 0) {
-				jQuery(".sapUiPerformanceStatsDiv.sapUiSupportIntHidden").removeClass("sapUiSupportIntHidden");
-				jQuery(".sapUiSupportIntExportBtn.sapUiSupportIntHidden").removeClass("sapUiSupportIntHidden");
-				this.$('info').text("Total " + requestsCount + " Requests in " + aMeasurements.length + " Interactions");
+				this._showPerfData();
+				this.dom('info').textContent = "Total " + requestsCount + " Requests in " + aMeasurements.length + " Interactions";
 			} else {
-				jQuery(".sapUiPerformanceStatsDiv").addClass("sapUiSupportIntHidden");
-				jQuery(".sapUiSupportIntExportBtn").addClass("sapUiSupportIntHidden");
-				this.$('info').text("");
+				this._hidePerfData();
+				this.dom('info').textContent = "";
 			}
 
-			var oTimelineDiv = this.$().find('.sapUiPerformanceStatsDiv .sapUiPerformanceTimeline').get(0);
+			var oTimelineDiv = this.dom('.sapUiPerformanceStatsDiv .sapUiPerformanceTimeline');
 			var rm = sap.ui.getCore().createRenderManager();
 			this._oTimelineOverview.setInteractions(aMeasurements);
 			this._oTimelineOverview.render(rm);
@@ -525,11 +502,20 @@ sap.ui.define([
 			this._oInteractionSlider._initSlider();
 			this._oInteractionSlider.setDuration(aMeasurements);
 			//
-			var oStatsDiv = this.$().find('.sapUiPerformanceStatsDiv .sapUiPerformanceBottom').get(0);
+			var oStatsDiv = this.dom('.sapUiPerformanceStatsDiv .sapUiPerformanceBottom');
 			this._oInteractionTree.setInteractions(aMeasurements);
 			this._oInteractionTree.renderAt(oStatsDiv);
 		};
 
+		Interaction.prototype._showPerfData = function() {
+			this.dom(".sapUiPerformanceStatsDiv").classList.remove("sapUiSupportIntHidden");
+			this.dom("export").classList.remove("sapUiSupportIntHidden");
+		};
+
+		Interaction.prototype._hidePerfData = function() {
+			this.dom(".sapUiPerformanceStatsDiv").classList.add("sapUiSupportIntHidden");
+			this.dom("export").classList.add("sapUiSupportIntHidden");
+		};
 
 		return Interaction;
 

package/src/sap/ui/core/support/plugins/LocalStorage.js

@@ -15,7 +15,7 @@ sap.ui.define(['sap/ui/core/support/Plugin', "sap/base/Log"],
 		 * @class This class represents the LocalStorage plugin for the support tool functionality of UI5. This class is internal and all its functions must not be used by an application.
 		 *
 		 * @extends sap.ui.core.support.Plugin
-		 * @version 1.98.0
+		 * @version 1.101.0
 		 * @private
 		 * @alias sap.ui.core.support.plugins.LocalStorage
 		 */

package/src/sap/ui/core/support/plugins/Performance.js

@@ -56,7 +56,7 @@ sap.ui.define([
 		 * With this plugIn the performance measurements are displayed
 		 *
 		 * @extends sap.ui.core.support.Plugin
-		 * @version 1.98.0
+		 * @version 1.101.0
 		 * @private
 		 * @alias sap.ui.core.support.plugins.Performance
 		 */
@@ -99,13 +99,7 @@ sap.ui.define([
 		};
 
 		function initInTools(oSupportStub) {
-			var rm = Core.createRenderManager();
-
-			//create the initial html for the performance tool
-			rm.write(_getPerformanceToolHTML());
-			rm.flush(this.$().get(0));
-			rm.destroy();
-
+			this.$().get(0).innerHTML = _getPerformanceToolHTML();
 			//create all event listeners
 			_registerEventListeners();
 		}
@@ -349,13 +343,14 @@ sap.ui.define([
 			}, false);
 
 			window.addEventListener('keydown', _onArrowMove);
-			jQuery("#slideHandle").on('dblclick', _initSlider);
-			jQuery("#sapUiSupportPerfToggleRecordingBtn").on("click", _handlerTogglePlayButton).attr('data-state', 'Start recording');
+			document.getElementById("slideHandle").addEventListener('dblclick', _initSlider);
+			document.getElementById("sapUiSupportPerfToggleRecordingBtn").addEventListener("click", _handlerTogglePlayButton);
+			document.getElementById("sapUiSupportPerfToggleRecordingBtn").dataset.state = 'Start recording';
 		}
 
 		/* =============================================================================================================
 		 * Timeline overview
-		 ============================================================================================================= */
+		 ========1===================================================================================================== */
 
 		function _getTimelineOverViewBarTitle(duration, time) {
 			return 'Duration: ' + duration.toFixed(2) + ' ms.\nTime: ' + time.toFixed(2) + ' ms.';
@@ -681,8 +676,7 @@ sap.ui.define([
 				className = 'renderingType';
 			}
 
-			//escaping is not needed
-			return encodeXML(className);
+			return className;
 		}
 
 		function _getBarColor(time) {
@@ -954,6 +948,9 @@ sap.ui.define([
 		}
 
 		function _calculateSliderSize() {
+			if (_sliderVars.nodes.handle == null ||  _sliderVars.nodes.slider == null) {
+				return;
+			}
 			var handleComputedWidth = window.getComputedStyle(_sliderVars.nodes.handle).width;
 			var oldSliderWidth = _sliderVars.sizes.width;
 

package/src/sap/ui/core/support/plugins/Selector.js

@@ -20,7 +20,7 @@ sap.ui.define([
 		 * @class This class represents the selector plugin for the support tool functionality of UI5. This class is internal and all its functions must not be used by an application.
 		 *
 		 * @extends sap.ui.core.support.Plugin
-		 * @version 1.98.0
+		 * @version 1.101.0
 		 * @private
 		 * @alias sap.ui.core.support.plugins.Selector
 		 */

package/src/sap/ui/core/support/plugins/TechInfo.js

@@ -6,7 +6,9 @@
 
 // Provides class sap.ui.core.support.plugins.TechInfo (TechInfo support plugin)
 sap.ui.define([
+	'jquery.sap.global',
 	'sap/base/Log',
+	'sap/base/util/each',
 	'sap/base/util/isEmptyObject',
 	'sap/base/util/isPlainObject',
 	'../Plugin',
@@ -14,7 +16,7 @@ sap.ui.define([
 	'../ToolsAPI',
 	'sap/base/security/encodeXML'
 ],
-	function(Log, isEmptyObject, isPlainObject, Plugin, Support, ToolsAPI, encodeXML) {
+	function(jQuery, Log, each, isEmptyObject, isPlainObject, Plugin, Support, ToolsAPI, encodeXML) {
 	"use strict";
 
 
@@ -23,7 +25,7 @@ sap.ui.define([
 		 * @class This class represents the technical info plugin for the support tool functionality of UI5. This class is internal and all its functions must not be used by an application.
 		 *
 		 * @extends sap.ui.core.support.Plugin
-		 * @version 1.98.0
+		 * @version 1.101.0
 		 * @private
 		 * @alias sap.ui.core.support.plugins.TechInfo
 		 */
@@ -116,7 +118,7 @@ sap.ui.define([
 			}
 			multiline(html, true, true, "Loaded Libraries", oData.loadedLibraries);
 			line(html, true, true, "Loaded Modules", function(buffer){
-				jQuery.each(oData.modules, function(i,v){
+				each(oData.modules, function(i,v){
 					if (v.indexOf("sap.ui.core.support") < 0) {
 						buffer.push("<span>", encode(v), "</span>");
 						if (i < oData.modules.length - 1) {

package/src/sap/ui/core/support/plugins/Trace.js

@@ -19,7 +19,7 @@ sap.ui.define([
 		 * @class This class represents the trace plugin for the support tool functionality of UI5. This class is internal and all its functions must not be used by an application.
 		 *
 		 * @extends sap.ui.core.support.Plugin
-		 * @version 1.98.0
+		 * @version 1.101.0
 		 * @private
 		 * @alias sap.ui.core.support.plugins.Trace
 		 */
@@ -208,18 +208,18 @@ sap.ui.define([
 		};
 
 		function log(oPlugin, oEntry){
-			var jContentRef = jQuery(".sapUiSupportTraceCntnt", oPlugin.$());
+			var oContentRef = oPlugin.$()[0].querySelector(".sapUiSupportTraceCntnt");
 			if (!oEntry) {
-				jContentRef.html("");
+				oContentRef.textContent = "";
 				oPlugin._aLogEntries = [];
 			} else if (typeof (oEntry) === "string") {
-				jContentRef.html(encodeXML(oEntry));
-				jContentRef[0].scrollTop = jContentRef[0].scrollHeight;
+				oContentRef.textContent = encodeXML(oEntry);
+				oContentRef.scrollTop = oContentRef.scrollHeight;
 			} else {
 				oEntry._levelInfo = getLevel(oEntry.level);
 				if (applyFilter(oPlugin._filter, oPlugin._iLogLevel, oEntry)) {
-					jContentRef.append(getEntryHTML(oPlugin, oEntry));
-					jContentRef[0].scrollTop = jContentRef[0].scrollHeight;
+					oContentRef.insertAdjacentHTML("beforeend", getEntryHTML(oPlugin, oEntry));
+					oContentRef.scrollTop = oContentRef.scrollHeight;
 				}
 				oPlugin._aLogEntries.push(oEntry);
 			}

package/src/sap/ui/core/support/plugins/ViewInfo.js

@@ -10,17 +10,17 @@ sap.ui.define([
 	'sap/ui/core/support/controls/TreeViewer',
 	'sap/ui/core/support/controls/ObjectViewer',
 	'sap/ui/Device',
-	"sap/base/Log",
-	"sap/base/security/encodeXML"
-], function(Plugin, TreeViewer, ObjectViewer, Device, Log, encodeXML) {
+	'sap/base/Log',
+	'sap/base/security/encodeXML',
+	'sap/ui/thirdparty/jquery'
+], function(Plugin, TreeViewer, ObjectViewer, Device, Log, encodeXML, $) {
 	"use strict";
 
-		var $ = jQuery;
 		/**
 		 * Creates an instance of sap.ui.core.support.plugins.ViewInfo.
 		 * @class This class represents the ViewInfo plugin for the support tool functionality of UI5. This class is internal and all its functions must not be used by an application.
 		 * @extends sap.ui.core.support.Plugin
-		 * @version 1.98.0
+		 * @version 1.101.0
 		 * @private
 		 * @alias sap.ui.core.support.plugins.ViewInfo
 		 */
@@ -42,7 +42,6 @@ sap.ui.define([
 							that.oCore = undefined;
 						}
 					});
-
 				}
 			}
 		});
@@ -67,7 +66,7 @@ sap.ui.define([
 				this.$().get(0).innerHTML =
 					"<div class='sapUISupportLabel'>" +
 						"View Info Support Tool is only available in <b>Support Mode.</b>" +
-						"<br>Turn it on by adding '<b>sap-ui-support=true</b>' to the url or your application." +
+						"<br>Turn it on by adding '<b>sap-ui-support=true</b>' to the URL of your application." +
 					"</div>";
 				return;
 			}
@@ -83,7 +82,7 @@ sap.ui.define([
 				this.$().get(0).innerHTML = "View Info Support Tool did not record any information on the current page.<br>" +
 						"Possible reasons:<br>" +
 						"There are no XML Views defined in the current app.<br>" +
-						"Views where not loaded before the Diagnistics tool was started.";
+						"Views where not loaded before the Diagnostics tool was started.";
 			}
 			if (this.runsAsToolPlugin()) {
 				initInTools.call(this, oSupportStub);
@@ -210,7 +209,11 @@ sap.ui.define([
 				this.aDataTrees = [];
 				this.aObjectViewers = [];
 				var i = 0;
-				rm.write('<div class="viewxmlmain"><div class="settingscontainer"><span class="settings" raise="_onClearAllBreakpoints">Clear all breakpoints</span><span class="settings" raise="_onClearAllXMLModifications">Clear all XML modifications</span></div>');
+				rm.openStart("div").class("viewxmlmain").openEnd();
+				rm.openStart("div").class("settingscontainer").openEnd();
+				rm.openStart("span").class("settings").attr("raise", "_onClearAllBreakpoints").openEnd().text("Clear all breakpoints").close("span");
+				rm.openStart("span").class("settings").attr("raise", "_onClearAllXMLModifications").openEnd().text("Clear all XML modifications").close("span");
+				rm.close("div");
 				this.aMetamodels = [];
 				if (this.aOdataModels) {
 					for (var j = 0; j < this.aOdataModels.length; j++) {
@@ -219,12 +222,34 @@ sap.ui.define([
 							this.aMetamodels.push(oMetadata);
 							var oTree = this.createTree(oMetadata, i);
 							this.aTrees[i] = oTree;
-							rm.write('<div class="viewxmlheader" collapsed="true"><span class="toggle"></span><span class="info">Metadata: ' + encodeXML(oMetadata.env.settings.response.requestUri) + '</span><div class="settingscontainer"><span class="settings sapUiSupportViewInfoElementHidden" raise="_onToggleDebugNodes" idx="' + i + '">Expand debugged nodes</span><span class="settings sapUiSupportViewInfoElementHidden" raise="_onToggleRealIds" idx="' + i + '"><span selected="false"></span>Show XML View Ids</span><span class="settings" raise="_onToggleNamespace" idx="' + i + '" ><span selected="false"></span>Hide tag namespace</span><span class="settings" raise="_onToggleInactive" idx="' + i + '" ><span selected="false"></span>Hide inactive</span></div></div>');
-							rm.write('<div class="sapUiSupportViewInfoElementHidden"><div id="treecontent_' + i + '"></div>');
-							rm.write('<div class="viewxmlsplitter">');
-							rm.write('</div>');
-							rm.write('<div class="viewxmlinfo"><div class="title sapUiSupportViewInfoElementHidden" id="objectHeader' + i + '">Header</div><div class="toolbar sapUiSupportViewInfoElementHidden" id="objectToolbar' + i + '">Toolbar</div><div class="content" id="selectedcontent_' + i + '">');
-							rm.write('</div></div></div>');
+							rm.openStart("div").class("viewxmlheader").attr("collapsed", "true").openEnd();
+								rm.openStart("span").class("toggle").openEnd().close("span");
+								rm.openStart("span").class("info").openEnd().text("Metadata: " + oMetadata.env.settings.response.requestUri).close("span");
+								rm.openStart("div").class("settingscontainer").openEnd();
+									rm.openStart("span").class("settings").class("sapUiSupportViewInfoElementHidden").attr("raise", "_onToggleDebugNodes").attr("idx", i).openEnd().text("Expand debugged nodes").close("span");
+									rm.openStart("span").class("settings").class("sapUiSupportViewInfoElementHidden").attr("raise", "_onToggleRealIds").attr("idx", i).openEnd();
+										rm.openStart("span").attr("selected", "false").openEnd().close("span");
+										rm.text("Show XML View Ids");
+									rm.close("span");
+									rm.openStart("span").class("settings").attr("raise", "_onToggleNamespace").attr("idx", i).openEnd();
+										rm.openStart("span").attr("selected", "false").openEnd().close("span");
+										rm.text("Hide tag namespace");
+									rm.close("span");
+									rm.openStart("span").class("settings").attr("raise", "_onToggleInactive").attr("idx", i).openEnd();
+										rm.openStart("span").attr("selected", "false").openEnd().close("span");
+										rm.text("Hide inactive");
+									rm.close("span");
+								rm.close("div");
+							rm.close("div");
+							rm.openStart("div").class("sapUiSupportViewInfoElementHidden").openEnd();
+								rm.openStart("div", "treecontent_" + i).openEnd().close("div");
+								rm.openStart("div").class("viewxmlsplitter").openEnd().close("div");
+								rm.openStart("div").class("viewxmlinfo").openEnd();
+									rm.openStart("div", "objectHeader" + i).class("title").class("sapUiSupportViewInfoElementHidden").openEnd().text("Header").close("div");
+									rm.openStart("div", "objectToolbar" + i).class("toolbar").class("sapUiSupportViewInfoElementHidden").openEnd().text("Toolbar").close("div");
+									rm.openStart("div", "selectedcontent_" + i).class("content").openEnd().close("div");
+								rm.close("div");
+							rm.close("div");
 						}
 						oMetadata.env.tree = oTree;
 						i++;
@@ -276,7 +301,25 @@ sap.ui.define([
 						}
 
 						if (oView.env.type === "template") {
-							rm.write('<div class="viewxmlheader" collapsed="true"><span class="toggle"></span><span class="info">' + sId + ' (' + oView.env.type + ')</span><div class="settingscontainer"><span class="settings" raise="_onToggleDebugNodes" idx="' + i + '">Expand debugged nodes</span><span class="settings sapUiSupportViewInfoElementHidden" raise="_onToggleRealIds" idx="' + i + '"><span selected="false"></span>Show XML View Ids</span><span class="settings" raise="_onToggleNamespace" idx="' + i + '" ><span selected="false"></span>Hide tag namespace</span><span class="settings" raise="_onToggleInactive" idx="' + i + '" ><span selected="false"></span>Hide inactive</span></div></div>');
+							rm.openStart("div").class("viewxmlheader").attr("collapsed", "true").openEnd();
+								rm.openstart("span").class("toggle").openEnd().close("span");
+								rm.openStart("span").class("info").openEnd().text(sId + ' (' + oView.env.type + ')').close("span");
+								rm.openStart("div").class("settingscontainer").openEnd();
+									rm.openStart("span").class("settings").attr("raise", "_onToggleDebugNodes").attr("idx", i).openEnd().text("Expand debugged nodes").close("span");
+									rm.openStart("span").class("settings").class("sapUiSupportViewInfoElementHidden").attr("raise", "_onToggleRealIds").attr("idx", i).openEnd();
+										rm.openStart("span").attr("selected", "false").openEnd().close("span");
+										rm.text("Show XML View Ids");
+									rm.close("span");
+									rm.openStart("span").class("settings").attr("raise", "_onToggleNamespace").attr("idx", i).openEnd();
+										rm.openStart("span").attr("selected", "false").openEnd().close("span");
+										rm.text("Hide tag namespace");
+									rm.close("span");
+									rm.openStart("span").class("settings").attr("raise", "_onToggleInactive").attr("idx", i).openEnd();
+										rm.openStart("span").attr("selected", "false").openEnd().close("span");
+										rm.text("Hide inactive");
+									rm.close("span");
+								rm.close("div");
+							rm.close("div");
 						} else {
 							var sTemplatedBy = "";
 							if (oView.env.metamodels) {
@@ -290,13 +333,32 @@ sap.ui.define([
 							if (oView.env.settings.cache) {
 								sCache += " from client cache " + JSON.stringify(oView.env.settings.cache);
 							}
-							rm.write('<div class="viewxmlheader" collapsed="true"><span class="toggle"></span><span class="info">' + sId + ' (' + oView.env.type + encodeXML(String(sTemplatedBy)) + ') ' + encodeXML(String(sCache)) + '</span><div class="settingscontainer"><span class="settings" raise="_onToggleDebugNodes" idx="' + i + '">Expand debugged nodes</span><span class="settings" raise="_onToggleRealIds" idx="' + i + '" ><span selected="false"></span>Show XML View Ids</span><span class="settings" raise="_onToggleNamespace" idx="' + i + '" ><span selected="false"></span>Hide tag namespace</span></div></div>');
+							rm.openStart("div").class("viewxmlheader").attr("collapsed", "true").openEnd();
+								rm.openStart("span").class("toggle").openEnd().close("span");
+								rm.openStart("span").class("info").openEnd().text(sId + ' (' + oView.env.type + sTemplatedBy + ') ' + sCache).close("span");
+								rm.openStart("div").class("settingscontainer").openEnd();
+									rm.openStart("span").class("settings").attr("raise", "_onToggleDebugNodes").attr("idx", i).openEnd().text("Expand debugged nodes").close("span");
+									rm.openStart("span").class("settings").attr("raise", "_onToggleRealIds").attr("idx", i).openEnd();
+										rm.openStart("span").attr("selected", "false").openEnd().close("span");
+										rm.text("Show XML View Ids");
+									rm.close("span");
+									rm.openStart("span").class("settings").attr("raise", "_onToggleNamespace").attr("idx", i).openEnd();
+										rm.openStart("span").attr("selected", "false").openEnd().close("span");
+										rm.text("Hide tag namespace");
+									rm.close("span");
+								rm.close("div");
+							rm.close("div");
 						}
-						rm.write('<div class="sapUiSupportViewInfoElementHidden"><div id="treecontent_' + i + '"></div>');
-						rm.write('<div class="viewxmlsplitter">');
-						rm.write('</div>');
-						rm.write('<div class="viewxmlinfo"><div class="title sapUiSupportViewInfoElementHidden" id="objectHeader' + i + '">Header</div><div class="toolbar sapUiSupportViewInfoElementHidden" id="objectToolbar' + i + '">Toolbar</div><div class="content" id="selectedcontent_' + i + '">');
-						rm.write('</div></div></div></div>');
+						rm.openStart("div").class("sapUiSupportViewInfoElementHidden").openEnd();
+							rm.openStart("div", "treecontent_" + i).openEnd().close("div");
+							rm.openStart("div").class("viewxmlsplitter").openEnd().close("div");
+							rm.openStart("div").class("viewxmlinfo").openEnd();
+								rm.openStart("div", "objectHeader" + i).class("title").class("sapUiSupportViewInfoElementHidden").openEnd().text("Header").close("div");
+								rm.openStart("div", "objectToolbar" + i).class("toolbar").class("sapUiSupportViewInfoElementHidden").openEnd().text("Toolbar").close("div");
+								rm.openStart("div", "selectedcontent_" + i).class("content").openEnd().close("div");
+							rm.close("div");
+						rm.close("div");
+						rm.close("div");
 						i++;
 					}
 				}