@openui5/sap.ui.core 1.93.3 → 1.96.2

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

@@ -23,9 +23,9 @@ function(ManagedObject, encodeXML) {
 
 	//private functions and vars
 	var mRenderTemplates = {
-		rowstart : "<div class=\"{cssclass}\" collapsed=\"{collapsed}\" visible=\"{visible}\" style=\"padding-left:{pxlevel};margin-left: 16px;\" idx=\"{idx}\" key=\"{key}\" sectionkey=\"{sectionkey}\" level=\"level\" raise=\"_select\" hover=\"_hover\" args=\"{sectionkey},{key}\">",
+		rowstart : "<div class=\"sapUiSupportObjectViewerMarginLeft {cssclass}\" collapsed=\"{collapsed}\" visible=\"{visible}\" idx=\"{idx}\" key=\"{key}\" sectionkey=\"{sectionkey}\" level=\"{level}\" raise=\"_select\" hover=\"_hover\" args=\"{sectionkey},{key}\">",
 		namestart : "<span class=\"key\" title=\"{key}\">",
-		keyinfo : "<span class=\"keyinfo {color}\" selected=\"{selected}\" sectionkey=\"{sectionkey}\" key=\"{key}\" raise=\"_keyInfoPress\" args=\"{sectionkey},{key},{infoidx}\"  title=\"{tooltip}\" style=\"margin-right:{pxlevel}\"></span>",
+		keyinfo : "<span class=\"keyinfo {color}\" selected=\"{selected}\" sectionkey=\"{sectionkey}\" key=\"{key}\" raise=\"_keyInfoPress\" args=\"{sectionkey},{key},{infoidx}\"  title=\"{tooltip}\"></span>",
 		nameend : "{key}</span>",
 		separator : "<span class=\"colon\">:</span>",
 		valuestart : "<span class=\"value\" title=\"{value}\"><input {readonly} class=\"valueInput\"value=\"{value}\" raise=\"_changeValue\" args=\"{sectionkey},{key}\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\">",
@@ -55,7 +55,6 @@ function(ManagedObject, encodeXML) {
 					sectionkey: n,
 					key: m,
 					level: oContent._level || 0,
-					pxlevel: ((oContent._level || 0) * 16) + "px",
 					cssclass: "",
 					visible: !bCollapsed,
 					header: n,
@@ -72,7 +71,6 @@ function(ManagedObject, encodeXML) {
 							infoidx: i + "",
 							sectionkey: n,
 							key: m,
-							pxlevel: (((oContent[m].__level || 0) * 16) + 3) + "px",
 							selected: oInfo.selected || false,
 							color: oInfo.color || "orange",
 							tooltip: oInfo.tooltip || ""
@@ -101,7 +99,6 @@ function(ManagedObject, encodeXML) {
 						sectionkey: n,
 						key: m,
 						level: oContent._level || 0,
-						pxlevel: ((oContent._level || 0) * 16) + "px",
 						cssclass: "hiddenkey",
 						visible: !bCollapsed,
 						header: n,
@@ -118,7 +115,6 @@ function(ManagedObject, encodeXML) {
 								infoidx: i + "",
 								sectionkey: n,
 								key: m,
-								pxlevel: (((oContent[m].__level || 0) * 16) + 3) + "px",
 								selected: oInfo.selected || false,
 								color: oInfo.color || "orange",
 								tooltip: encodeXML(String(oInfo.tooltip) || "")
@@ -267,6 +263,7 @@ function(ManagedObject, encodeXML) {
 			}
 			oRenderContext.add("</div>");
 			this._oRenderParent.innerHTML = oRenderContext.toString();
+
 			var that = this;
 			this._oRenderParent.firstChild.addEventListener("click", function(oEvent) {
 				if (oEvent.target.tagName === "INPUT") {
@@ -358,41 +355,6 @@ function(ManagedObject, encodeXML) {
 			});
 		}
 	};
-	ObjectViewer.getCss = function() {
-		return [
-		'.objectviewer {white-space: nowrap;font-family:consolas;display:block;cursor:default;width: 100%; overflow: auto; height: 100%; padding:10px; box-sizing:border-box;}',
-		'.objectviewer .key {white-space: nowrap;color: #b93232; width: 40%; overflow:hidden; display: inline-block; text-overflow: ellipsis;}',
-		'.objectviewer .hiddenkey .keyinfo{visibility:hidden}',
-		'.objectviewer .hiddenkey .colon{visibility:hidden}',
-		'.objectviewer .hiddenkey .key{visibility:hidden}',
-		'.objectviewer .value {white-space: nowrap;color: #007dc0; width: 50%; overflow:hidden; display: inline-block; text-overflow: ellipsis;}',
-		'.objectviewer .value .valueInput {font-family:consolas;border:none; padding:0; background-color:transparent;white-space: nowrap;color: #007dc0; width: 100%; overflow:hidden; display: inline-block; text-overflow: ellipsis;}',
-		'.objectviewer .value .valueInput:not([readonly])[error=\'true\'] {color:#d80000;solid 2px rgba(255, 0, 0, 0.26)}',
-		'.objectviewer .value .valueInput:not([readonly]):hover {background-color:#f5f5f5}',
-		'.objectviewer .value .valueInput:not([readonly]):focus {background-color:#fff;border:none;outline:none}',
-		'.objectviewer .colon {padding:0 6px;display: inline-block;overflow: hidden; width: 2%}',
-		'.objectviewer .header {color:#666; font-size: 14px; font-family:arial;margin: 3px 0 2px;}',
-		'.objectviewer .control .key{font-weight:bold; color:#333}',
-		'.objectviewer .control .value{font-weight:bold; color:#333}',
-		'.objectviewer .keyinfo.orange {border: 1px solid orange;}',
-		'.objectviewer .keyinfo.blue {border: 1px solid #007dc0;}',
-		'.objectviewer .keyinfo.green {border: 1px solid green;}',
-		'.objectviewer .keyinfo.red {border: 1px solid #cc1919;}',
-		'.objectviewer .keyinfo.orange[selected=\'true\'] {background-color: orange;}',
-		'.objectviewer .keyinfo.blue[selected=\'true\'] {background-color: #007dc0;}',
-		'.objectviewer .keyinfo.green[selected=\'true\'] {background-color: green;}',
-		'.objectviewer .keyinfo.red[selected=\'true\'] {background-color: #cc1919;}',
-		'.objectviewer .keyinfo {display: inline-block; border-radius: 10px; height: 10px;width: 10px;overflow: hidden; margin-right: 3px;position: relative;vertical-align: top;margin-top: 1px;}',
-		'.objectviewer .header[collapsed=\'true\'] .expand{border-color: transparent transparent transparent #cecece;border-radius: 0;border-style: solid;border-width: 4px 3px 4px 8px;height: 0;width: 0;position: relative;margin-top: 0px;margin-left: 2px;display: inline-block;}',
-		'.objectviewer [collapsed=\'false\'] .expand  {border-color: #cecece transparent transparent transparent;border-radius: 0;border-style: solid;border-width: 8px 4px 0px 4px;height: 0;width: 0;position: relative;margin-top: 0px;margin-left: 0px;margin-right: 5px;display: inline-block;}',
-		'.objectviewer [collapsed=\'true\'] .expand:hover {border-color: transparent transparent transparent #aaa;}',
-		'.objectviewer [collapsed=\'false\'] .expand:hover {border-color: #aaa transparent transparent transparent;}',
-		'.objectviewer [visible=\'false\'] {display: none}',
-		'.objectviewer .internal {opacity: 0.7}',
-		'.objectviewer .private {opacity: 0.7}',
-		'.objectviewer .default {opacity: 0.7}',
-		'.objectviewer .end { border-top:1px solid #e0e0e0; height:1px;}'].join("");
-	};
 
 	return ObjectViewer;
 });

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

@@ -4,9 +4,10 @@
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
-sap.ui.define(['sap/ui/base/ManagedObject'],
-	function (ManagedObject) {
-		'use strict';
+sap.ui.define([
+	"sap/ui/base/ManagedObject"
+], function (ManagedObject) {
+		"use strict";
 		var TimelineOverview = ManagedObject.extend("sap.ui.core.support.controls.TimelineOverview", {
 			metadata: {
 				library: "sap.ui.core"
@@ -40,14 +41,12 @@ sap.ui.define(['sap/ui/base/ManagedObject'],
 		};
 
 		TimelineOverview.prototype.render = function (rm) {
-			rm.write('<div id="sapUiInteractionTimelineOverview"><ol id="' + this.getId() + '"');
-
-			rm.addClass("InteractionTimeline");
-
-			rm.writeClasses();
-
-			rm.write(">");
+			rm.openStart("div", "sapUiInteractionTimelineOverview")
+				.openEnd();
 
+			rm.openStart("ol", this.getId())
+				.class("InteractionTimeline")
+				.openEnd();
 
 			var interaction,
 				interactions = this.interactions;
@@ -75,7 +74,8 @@ sap.ui.define(['sap/ui/base/ManagedObject'],
 				this.renderInteractionStep(rm, interaction, i);
 			}
 
-			rm.write("</ol></div>");
+			rm.close("ol");
+			rm.close("div");
 		};
 
 		TimelineOverview.prototype.renderInteractionStep = function (rm, step, index) {
@@ -83,45 +83,70 @@ sap.ui.define(['sap/ui/base/ManagedObject'],
 			var MAX_ALLOWED_HEIGHT_IN_PERC = 69,
 				stepDurationInPercent = Math.ceil((step.totalDuration / this.maxDuration) * MAX_ALLOWED_HEIGHT_IN_PERC);
 
+			rm.openStart("li")
+				.openEnd();
+
+			rm.openStart("div")
+				.class("bars-wrapper")
+				.attr("title", "Duration: " + step.totalDuration + "ms")
+				.openEnd();
+
+			rm.openStart("div")
+				.class("duration")
+				.style("height", stepDurationInPercent + "%;");
 
-			var stepDurationInPercentInlineStyle = 'height: ' + stepDurationInPercent + '%;';
 			if (stepDurationInPercent > 0) {
-				stepDurationInPercentInlineStyle += ' min-height: 1px;';
+				rm.style("min-height", "1px");
 			}
 
-			rm.write('<li>');
-			rm.write('<div class="bars-wrapper" title="Duration: ' + step.totalDuration + 'ms">');
-			rm.write('<div class="duration" style="' + stepDurationInPercentInlineStyle + '">');
+			rm.openEnd();
+
 			// write step duration
 			var aInteractions = step.interactions,
 				stepInteractionInPercent = 100;
 			aInteractions.forEach(function(interaction, index) {
 				stepInteractionInPercent = (step.totalDuration === 0) ? 100 : Math.ceil((interaction.calculatedDuration
 					/ step.totalDuration) * 100);
-				rm.write('<div class="requestType" style="height: ' + stepInteractionInPercent + '%; min-height: 1px;"></div>');
+				rm.openStart("div")
+					.class("requestType")
+					.style("height", stepInteractionInPercent + "%")
+					.style("min-height", "1px")
+					.openEnd()
+					.close("div");
+
 				//write spacer between interactions
 				if (index !== (aInteractions.length - 1)) {
-					rm.write('<div style="min-height: 1px;"></div>');
+					rm.openStart("div")
+						.style("min-height", "1px")
+						.openEnd()
+						.close("div");
 				}
 			});
 
+			rm.close("div"); // duration
+			rm.close("div"); // bars-wrapper
 
-			rm.write('</div>');
-			rm.write('</div>');
 			var intIndex = index + 1;
 			var sClassNameSeparator = (intIndex % 10 === 0 ) ? "sapUiInteractionTimelineStepRightBold" :
 				"sapUiInteractionTimelineStepRight";
 
 			if (intIndex % 2 === 0 ) {
-				rm.write('<div class="' + sClassNameSeparator + '"></div>');
+				rm.openStart("div")
+					.class(sClassNameSeparator)
+					.openEnd()
+					.close("div");
 			}
 
 			if (intIndex % 10 === 0 && intIndex !== this.stepCount) {
-				rm.write('<div class="sapUiInteractionTimelineTimeLbl">' + Math.round((index * this.timeRange /
-						this.stepCount) / 10 ) / 100 + 's</div>');
+				rm.openStart("div")
+					.class("sapUiInteractionTimelineTimeLbl")
+					.openEnd()
+					.text(Math.round((index * this.timeRange / this.stepCount) / 10 ) / 100 + "s")
+					.close("div");
 			}
-			rm.write('</li>');
+			rm.close("li");
 		};
+
 		TimelineOverview.prototype._getTimelineOverviewData = function(copiedData) {
 			var stepCount = this.stepCount;
 			var stepTime = this.timeRange / stepCount;

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

@@ -4,10 +4,13 @@
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 sap.ui.define([
+	'jquery.sap.global',
 	'sap/ui/base/ManagedObject',
 	"sap/base/security/encodeXML"
 ],
-function(ManagedObject, encodeXML) {
+function(jQuery,
+		 ManagedObject,
+		 encodeXML) {
 	'use strict';
 	var TreeViewer = ManagedObject.extend("sap.ui.core.support.controls.TreeViewer", {
 		metadata: {
@@ -22,10 +25,10 @@ function(ManagedObject, encodeXML) {
 
 	//private functions and vars
 	var mRenderTemplates = {
-		nodestart : "<div tabindex=\"0\" idx=\"{idx}\" class=\"node start {cssclass}\" haschildnodes=\"{haschildnodes}\" visible=\"{visible}\" collapsed=\"{collapsed}\" style=\"padding-left:{pxlevel}\" level=\"{level}\" raise=\"_selectNode\" args=\"{idx}\"><span class=\"expand\" raise=\"_toggleNode\" args=\"{idx}\"></span>&lt;<span class=\"nstag\" reason=\"tagName\"><span class=\"ns\" reason=\"namespace\">{namespaceURI}</span><span class=\"tag\"  reason=\"localName\">{localName}</span></span>",
+		nodestart : "<div tabindex=\"0\" idx=\"{idx}\" class=\"node start {cssclass}\" haschildnodes=\"{haschildnodes}\" visible=\"{visible}\" collapsed=\"{collapsed}\" level=\"{level}\" raise=\"_selectNode\" args=\"{idx}\"><span class=\"expand\" raise=\"_toggleNode\" args=\"{idx}\"></span>&lt;<span class=\"nstag\" reason=\"tagName\"><span class=\"ns\" reason=\"namespace\">{namespaceURI}</span><span class=\"tag\"  reason=\"localName\">{localName}</span></span>",
 		nodestartend : "&gt;</div>",
-		nodenochildend : "&gt;&lt;/<span class=\"nstagend\"><span class=\"nstag\"><span class=\"ns\">{namespaceURI}</span><span class=\"tag\">{localName}</span></span></span>&gt;</div><div class=\"node end\" style=\"display:none\" visible=\"{visible}\" haschildnodes=\"{haschildnodes}\" collapsed=\"{collapsed}\" style=\"padding-left:{pxlevel}\" level=\"{level}\">&lt;/<span class=\"nstag\"><span class=\"ns\">{namespaceURI}</span><span class=\"tag\">{localName}</span></span>&gt;</div>",
-		nodeend : "<div class=\"node end {cssclass}\" visible=\"{visible}\" haschildnodes=\"{haschildnodes}\" collapsed=\"{collapsed}\" style=\"padding-left:{pxlevel}\" level=\"{level}\">&lt;/<span class=\"nstag\"><span class=\"ns\">{namespaceURI}</span><span class=\"tag\">{localName}</span></span>&gt;</div>",
+		nodenochildend : "&gt;&lt;/<span class=\"nstagend\"><span class=\"nstag\"><span class=\"ns\">{namespaceURI}</span><span class=\"tag\">{localName}</span></span></span>&gt;</div><div class=\"node end sapUiSupportViewInfoElementHidden\" visible=\"{visible}\" haschildnodes=\"{haschildnodes}\" collapsed=\"{collapsed}\" level=\"{level}\">&lt;/<span class=\"nstag\"><span class=\"ns\">{namespaceURI}</span><span class=\"tag\">{localName}</span></span>&gt;</div>",
+		nodeend : "<div class=\"node end {cssclass}\" visible=\"{visible}\" haschildnodes=\"{haschildnodes}\" collapsed=\"{collapsed}\" level=\"{level}\">&lt;/<span class=\"nstag\"><span class=\"ns\">{namespaceURI}</span><span class=\"tag\">{localName}</span></span>&gt;</div>",
 		attribute: "&nbsp;<span class=\"attr\" modified=\"{modified}\" oldValue=\"{oldValue}\" title=\"{oldValue}\" reason=\"attributeName\"><span class=\"attrname\">{attributeName}</span>=&quot;<span class=\"attrvalue\" reason=\"attributeValue\">{attributeValue}</span>&quot;</span>",
 		idattribute: "&nbsp;<span class=\"attr\" modified=\"{modified}\" oldValue=\"{oldValue}\" title=\"originalValue: {oldValue}\" reason=\"attributeName\"><span class=\"attrname\">{attributeName}</span>=&quot;<span class=\"attrvalue attrvalue1\" reason=\"attributeValue\">{attributeValue1}</span><span class=\"attrvalue attrvalue2\" reason=\"attributeValue\">{attributeValue2}</span>&quot;</span>",
 		nodeinfo: "<span class=\"info {color}\" selected=\"{selected}\"title=\"{tooltip}\" raise=\"_onInfoClick\" args=\"{idx},{infoidx}\"></span>"
@@ -148,7 +151,6 @@ function(ManagedObject, encodeXML) {
 			visible: iLevel < oRenderContext.initialExpandedLevel,
 			cssclass: sCssClass,
 			level: iLevel,
-			pxlevel: (iLevel * 16) + "px",
 			collapsed: iLevel >= (oRenderContext.initialExpandedLevel - 1),
 			localName: oNode.localName,
 			namespaceURI:  oNode.namespaceURI ? encodeXML(String(oNode.namespaceURI)) + ":" : ""
@@ -177,7 +179,6 @@ function(ManagedObject, encodeXML) {
 				visible: iLevel < oRenderContext.initialExpandedLevel,
 				level: iLevel,
 				cssclass: sCssClass,
-				pxlevel: (iLevel * 16) + "px",
 				collapsed: iLevel >= (oRenderContext.initialExpandedLevel - 1),
 				localName: oNode.localName,
 				namespaceURI:  oNode.namespaceURI ? encodeXML(String(oNode.namespaceURI)) + ":" : ""
@@ -189,7 +190,6 @@ function(ManagedObject, encodeXML) {
 				haschildnodes: bHasChildNodes,
 				visible: iLevel < oRenderContext.initialExpandedLevel,
 				level: iLevel,
-				pxlevel: (iLevel * 16) + "px",
 				collapsed: iLevel >= (oRenderContext.initialExpandedLevel - 1),
 				localName: oNode.localName,
 				namespaceURI: oNode.namespaceURI ? encodeXML(String(oNode.namespaceURI)) + ":" : ""
@@ -460,6 +460,11 @@ function(ManagedObject, encodeXML) {
 			}
 			oRenderContext.add("</div>");
 			this._oRenderParent.innerHTML = oRenderContext.toString();
+
+			jQuery(this._oRenderParent).find(".node.start, .node.end").each(function (index, item) {
+				item.style.paddingLeft = 16 * parseFloat(item.getAttribute("level")) + "px";
+			});
+
 			var that = this;
 			this._oRenderParent.firstChild.addEventListener("click", function(oEvent) {
 				var oDomRef = oEvent.target,
@@ -534,56 +539,5 @@ function(ManagedObject, encodeXML) {
 		}
 	};
 
-	TreeViewer.getCss = function() {
-		return [
-		'.treeviewer { padding-top:10px;margin-left:15px;font-family: consolas, monospace; width: 100%; overflow: auto; height: 100%; position: relative; cursor:default}',
-		'.treeviewer .node {border: 1px solid transparent}',
-		'.treeviewer .node.start {white-space: nowrap;}',
-		'.treeviewer .node.inactive {color: gray!important; opacity:0.6}',
-		'.treeviewer .node.inactive SPAN {color: gray!important; background-color:transparent!important;}',
-		'.treeviewer .node.replace .nstag {text-decoration: line-through}',
-		'.treeviewer .node.start.select {background-color: #fff8ad;}',
-		'.treeviewer .node.start.highlight {background-color:#fff;}',
-		'.treeviewer .node.end {white-space: nowrap;}',
-		'.treeviewer .node .info {margin: 0px 2px}',
-		'.treeviewer .node .info.orange {border: 1px solid orange;}',
-		'.treeviewer .node .info.orange[selected=\'true\'] {background-color:orange;}',
-		'.treeviewer .node .info.blue {border: 1px solid #007dc0;}',
-		'.treeviewer .node .info.blue[selected=\'true\'] {background-color:#007dc0;}',
-		'.treeviewer .node .info.green {border: 1px solid green}',
-		'.treeviewer .node .info.green[selected=\'true\'] {background-color:green;}',
-		'.treeviewer .node .info.red {border: 1px solid #b93232}',
-		'.treeviewer .node .info.red[selected=\'true\'] {background-color:#b93232;}',
-		'.treeviewer .node .info {opacity: 0.6;display: inline-block;border-radius: 10px;height: 6px;width: 6px;}',
-		'.treeviewer .node .info[selected=\'true\'] {opacity: 1;display: inline-block;border-radius: 10px;height: 6px;width: 6px;}',
-		'.treeviewer .node .info:hover {opacity: 1}',
-		'.treeviewer .node .attrname {color:#b93232; border: 1px solid transparent; display:inline-block;}',
-		'.treeviewer .node .attrname:hover {border: 1px solid #b93232;background-color:#fde3d5}',
-		'.treeviewer .node .attrvalue {color:#007dc0; border: 1px solid transparent; display:inline-block;}',
-		'.treeviewer .node .attr[modified=\'true\'] .attrvalue {color:#d210f3; border: 1px solid transparent; display:inline-block;}',
-		'.treeviewer .node .attr[modified=\'true\'] {background-color:#ffe7fc;}',
-		'.treeviewer .node .attr[oldvalue=\'null\'] .attrname {color:#d210f3; border: 1px solid transparent; display:inline-block;}',
-		'.treeviewer.id1 .node .attrvalue2 {display:none;}',
-		'.treeviewer.id2 .node .attrvalue1 {display:none;}',
-		'.treeviewer .node .attrvalue:hover {border: 1px solid #007dc0;background-color:#e1e1ff}',
-		'.treeviewer .node .ns {color:green}',
-		'.treeviewer.hideNS .node .ns {display:none}',
-		'.treeviewer.hideInactive .node.inactive {display:none!important}',
-		'.treeviewer .node .tag {color:green}',
-		'.treeviewer .node .nstag {color:green; border: 1px solid transparent; display:inline-block;}',
-		'.treeviewer .node.start .nstag:hover {border: 1px solid green;background-color:#d5e6d5}',
-		'.treeviewer .node.start .nstagend .nstag:hover {border: 1px solid transparent;background-color:transparent}',
-		'.treeviewer .node.end[visible=\'true\'] {display: inline-block;}',
-		'.treeviewer .node:focus {border: 1px dotted #e1e1ff;outline:none}',
-		'.treeviewer .node.end[visible=\'true\'][haschildnodes=\'true\'] {display: block;}',
-		'.treeviewer .node[visible=\'false\'] {display: none;}',
-		'.treeviewer .node[collapsed=\'true\'][haschildnodes=\'true\'] .expand {border-color: transparent transparent transparent #cecece;border-radius: 0;border-style: solid;border-width: 4px 3px 4px 8px;height: 0;width: 0;position: relative;margin-top: 0px;margin-left: -10px;display: inline-block;}',
-		'.treeviewer .node[collapsed=\'false\'][haschildnodes=\'true\'] .expand {border-color: #cecece transparent transparent transparent;border-radius: 0;border-style: solid;border-width: 8px 4px 0px 4px;height: 0;width: 0;position: relative;margin-top: 0px;margin-left: -12px;margin-right: 5px;display: inline-block;}',
-		'.treeviewer .node[collapsed=\'true\'][haschildnodes=\'true\']:hover .expand {border-color: transparent transparent transparent #aaa;}',
-		'.treeviewer .node[collapsed=\'false\'][haschildnodes=\'true\']:hover .expand {border-color: #aaa transparent transparent transparent;}',
-		'.treeviewer .node[collapsed=\'true\'][haschildnodes=\'true\'] .expand:hover {border-color: transparent transparent transparent #999;}',
-		'.treeviewer .node[collapsed=\'false\'][haschildnodes=\'true\'] .expand:hover {border-color: #999 transparent transparent transparent;}'].join("");
-	};
-
 	return TreeViewer;
 });

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

@@ -15,6 +15,7 @@ sap.ui.define([
 	'sap/ui/core/ElementMetadata',
 	'sap/ui/core/UIArea',
 	'sap/ui/core/mvc/View',
+	'sap/ui/core/mvc/XMLView',
 	'sap/ui/model/Binding',
 	'sap/ui/model/CompositeBinding',
 	'sap/base/util/ObjectPath',
@@ -32,6 +33,7 @@ sap.ui.define([
 	ElementMetadata,
 	UIArea,
 	View,
+	XMLView,
 	Binding,
 	CompositeBinding,
 	ObjectPath,
@@ -49,7 +51,7 @@ sap.ui.define([
 		 * @class This class represents the ControlTree 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.93.3
+		 * @version 1.96.2
 		 * @private
 		 * @alias sap.ui.core.support.plugins.ControlTree
 		 */
@@ -194,11 +196,11 @@ sap.ui.define([
 		ControlTree.prototype.renderContentAreas = function() {
 			var rm = sap.ui.getCore().createRenderManager();
 
-			rm.write('<div style="padding: 0.5rem">You can find a control in this tree by clicking it in the application UI while pressing the Ctrl+Alt+Shift keys.</div>');
+			rm.write('<div class="sapUiSupportControlTreeTitle">You can find a control in this tree by clicking it in the application UI while pressing the Ctrl+Alt+Shift keys.</div>');
 
 			rm.write('<div id="sapUiSupportControlTreeArea"><ul class="sapUiSupportControlTreeList"></ul></div>');
 
-			rm.write('<div id="sapUiSupportControlTabs" style="visibility:hidden">');
+			rm.write('<div id="sapUiSupportControlTabs" class="sapUiSupportControlTabsHidden">');
 				rm.write('<button id="sapUiSupportControlTabProperties" class="sapUiSupportBtn sapUiSupportTab sapUiSupportTabLeft">Properties</button>');
 				rm.write('<button id="sapUiSupportControlTabBindingInfos" class="sapUiSupportBtn sapUiSupportTab">Binding Infos</button>');
 				rm.write('<button id="sapUiSupportControlTabBreakpoints" class="sapUiSupportBtn sapUiSupportTab">Breakpoints</button>');
@@ -218,10 +220,10 @@ sap.ui.define([
 				var bHasChildren = mElement.aggregation.length > 0 || mElement.association.length > 0;
 				rm.write("<li id=\"sap-debug-controltree-" + encode(mElement.id) + "\" class=\"sapUiControlTreeElement\">");
 				var sImage = bHasChildren ? "minus" : "space";
-				rm.write("<img class=\"sapUiControlTreeIcon\" style=\"height: 12px; width: 12px;\" src=\"../../debug/images/" + sImage + ".gif\">");
+				rm.write("<img class=\"sapUiControlTreeIcon\" src=\"../../debug/images/" + sImage + ".gif\">");
 
 				if (mElement.isAssociation) {
-					rm.write("<img title=\"Association\" class=\"sapUiControlTreeIcon\" style=\"height: 12px; width: 12px;\" src=\"../../debug/images/link.gif\">");
+					rm.write("<img title=\"Association\" class=\"sapUiControlTreeIcon\" src=\"../../debug/images/link.gif\">");
 				}
 
 				var sClass = basename(mElement.type);
@@ -229,7 +231,7 @@ sap.ui.define([
 				rm.write('<div>');
 
 				rm.write('<span class="name" title="' + encode(mElement.type) + '">' + encode(sClass) + ' - ' + encode(mElement.id) + '</span>');
-				rm.write('<span class="sapUiSupportControlTreeBreakpointCount" title="Number of active breakpoints / methods" style="display:none;"></span>');
+				rm.write('<span class="sapUiSupportControlTreeBreakpointCount sapUiSupportItemHidden" title="Number of active breakpoints / methods"></span>');
 
 				rm.write('</div>');
 
@@ -246,8 +248,8 @@ sap.ui.define([
 						if (oValue.isAssociationLink) {
 							var sType = basename(oValue.type);
 							rm.write("<li data-sap-ui-controlid=\"" + encode(oValue.id) + "\" class=\"sapUiControlTreeLink\">");
-							rm.write("<img class=\"sapUiControlTreeIcon\" style=\"height: 12px; width: 12px;\" align=\"middle\" src=\"../../debug/images/space.gif\">");
-							rm.write("<img class=\"sapUiControlTreeIcon\" style=\"height: 12px; width: 12px;\" align=\"middle\" src=\"../../debug/images/link.gif\">");
+							rm.write("<img class=\"sapUiControlTreeIcon\" align=\"middle\" src=\"../../debug/images/space.gif\">");
+							rm.write("<img class=\"sapUiControlTreeIcon\" align=\"middle\" src=\"../../debug/images/link.gif\">");
 							rm.write("<div><span title=\"Association '" + encode(oValue.name) + "' to '" + encode(oValue.id) + "' with type '" + encode(oValue.type) + "'\">" +
 								encode(sType) + " - " + encode(oValue.id) + " (" + encode(oValue.name) + ")</span></div>");
 							rm.write("</li>");
@@ -288,7 +290,7 @@ sap.ui.define([
 
 						rm.write("<tr><td>");
 						rm.write("<label class='sapUiSupportLabel'>" + encode(oProperty.name) + ((oProperty.isBound) ?
-								'<img title="Value is bound (see Binding Infos)" src="../../debug/images/link.gif" style="vertical-align:middle;margin-left:3px">' : "") + "</label>");
+								'<img title="Value is bound (see Binding Infos)" src="../../debug/images/link.gif">' : "") + "</label>");
 						rm.write("</td><td>");
 
 						if (oProperty.type === "boolean") {
@@ -386,7 +388,7 @@ sap.ui.define([
 			rm.flush(this.$().find("#sapUiSupportControlPropertiesArea").get(0));
 			rm.destroy();
 
-			this.$().find("#sapUiSupportControlTabs").css("visibility", "");
+			this.$().find("#sapUiSupportControlTabs").removeClass("sapUiSupportControlTabsHidden");
 
 			this.selectTab(this._tab.properties);
 		};
@@ -397,7 +399,7 @@ sap.ui.define([
 
 			if (mBindingInfos.contexts.length > 0) {
 
-				rm.write('<h2 style="padding-left:5px">Contexts</h2>');
+				rm.write('<h2>Contexts</h2>');
 
 				rm.write('<ul class="sapUiSupportControlTreeList" data-sap-ui-controlid="' + encode(sControlId) + '">');
 
@@ -422,9 +424,9 @@ sap.ui.define([
 					rm.write('<div><span');
 
 					if (oContext.invalidPath) {
-						rm.write(' style="color:red"');
+						rm.write(' class="sapUiSupportModelPathInvalid"');
 					} else if (oContext.unverifiedPath) {
-						rm.write(' style="color:orange"');
+						rm.write(' class="sapUiSupportModelPathUnverified"');
 					}
 
 					rm.write('>' + encode(oContext.path));
@@ -466,7 +468,7 @@ sap.ui.define([
 
 			if (mBindingInfos.bindings.length > 0) {
 
-				rm.write('<h2 style="padding-left:5px">Bindings</h2>');
+				rm.write('<h2>Bindings</h2>');
 
 				rm.write('<ul class="sapUiSupportControlTreeList" data-sap-ui-controlid="' + encode(sControlId) + '">');
 
@@ -476,9 +478,8 @@ sap.ui.define([
 
 					rm.write('<span>');
 
-					rm.write('<label class="sapUiSupportLabel" style="vertical-align: middle">' + encode(oBindingInfo.name) + '</label>');
-					rm.write('<img class="sapUiSupportRefreshBinding" title="Refresh Binding" ' +
-						'src="../../debug/images/refresh.gif" style="cursor:pointer;margin-left:5px;vertical-align:middle">');
+					rm.write('<label class="sapUiSupportLabel">' + encode(oBindingInfo.name) + '</label>');
+					rm.write('<img class="sapUiSupportRefreshBinding" title="Refresh Binding" src="../../debug/images/refresh.gif">');
 
 					rm.write('</span>');
 
@@ -499,9 +500,9 @@ sap.ui.define([
 						rm.write('<div><span');
 
 						if (oBinding.invalidPath) {
-							rm.write(' style="color:red"');
+							rm.write(' class="sapUiSupportModelPathInvalid"');
 						} else if (oBinding.unverifiedPath) {
-							rm.write(' style="color:orange"');
+							rm.write(' class="sapUiSupportModelPathUnverified"');
 						}
 
 						rm.write('>' + encode(oBinding.path));
@@ -688,8 +689,7 @@ sap.ui.define([
 				}
 
 				rm.write('<li><span>' + encode(oValue.name) + '</span>' +
-						 '<img class="remove-breakpoint" style="cursor:pointer;margin-left:5px" ' +
-						 'src="../../debug/images/delete.gif"></li>');
+						 '<img class="remove-breakpoint"  src="../../debug/images/delete.gif"></li>');
 			});
 
 			rm.write('</ul></div>');
@@ -728,11 +728,10 @@ sap.ui.define([
 			var $breakpoints = $("#sap-debug-controltree-" + sControlId + " > div span.sapUiSupportControlTreeBreakpointCount");
 
 			if (mBpCount.active > 0) {
-				$breakpoints.text(mBpCount.active + " / " + mBpCount.all).show();
+				$breakpoints.text(mBpCount.active + " / " + mBpCount.all).toggleClass("sapUiSupportItemHidden", false);
 			} else {
-				$breakpoints.text("").hide();
+				$breakpoints.text("").toggleClass("sapUiSupportItemHidden", true);
 			}
-
 		};
 
 		// -------------------------------
@@ -840,10 +839,10 @@ sap.ui.define([
 			var $source = $(oEvent.target);
 			if ($source.parent().attr("data-sap-ui-collapsed")) {
 				$source.attr("src", $source.attr("src").replace("plus", "minus")).parent().removeAttr("data-sap-ui-collapsed");
-				$source.siblings("ul").show();
+				$source.siblings("ul").toggleClass("sapUiSupportItemHidden", false);
 			} else {
 				$source.attr("src", $source.attr("src").replace("minus", "plus")).parent().attr("data-sap-ui-collapsed", "true");
-				$source.siblings("ul").hide();
+				$source.siblings("ul").toggleClass("sapUiSupportItemHidden", true);
 			}
 			if (oEvent.stopPropagation) {
 				oEvent.stopPropagation();
@@ -1133,54 +1132,46 @@ sap.ui.define([
 
 			var oViewSerializer;
 			var mViews;
-			sap.ui.controller(sType + "ViewController", {});
-			sap.ui.jsview(sType + "ViewExported", {
-				getControllerName : function() {
-					return sType + "ViewController";
-				},
-				createContent : function(oController) { }
-			});
-
-			sap.ui.controller(sType + "ViewController", {});
-			sap.ui.jsview(sType + "ViewExported", {
-				getControllerName : function() {
-					return sType + "ViewController";
-				},
-				createContent : function(oController) { }
-			});
-
-			try {
-				if (oControl) {
-					if (oControl instanceof View) {
-						oViewSerializer = new ViewSerializer(oControl, window, "sap.m");
+			var sViewName = sType + "ViewExported";
+
+			XMLView.create({
+				definition: document
+			}).then(function (oView) {
+				oView.setViewName(sViewName);
+				oView._controllerName = sType + "ViewController";
+
+				try {
+					if (oControl) {
+						if (oControl instanceof View) {
+							oViewSerializer = new ViewSerializer(oControl, window, "sap.m");
+						} else {
+							oView.addContent(oControl.clone());
+							oViewSerializer = new ViewSerializer(oView, window, "sap.m");
+						}
+						// By now just XML and HTML can be serialized
+						mViews = (sType && sType !== "XML") ? oViewSerializer.serializeToHTML() : oViewSerializer.serializeToXML();
 					} else {
-						var oView = sap.ui.jsview(sType + "ViewExported");
-						oView.addContent(oControl.clone());
+						var oUIArea = this.oCore.getUIArea(oEvent.getParameter("controlID"));
+						var aContent = oUIArea.getContent();
+						for ( var i = 0; i < aContent.length; i++) {
+							oView.addContent(aContent[i]);
+						}
 						oViewSerializer = new ViewSerializer(oView, window, "sap.m");
+						// By now just XML and HTML can be serialized
+						mViews = (sType && sType !== "XML") ? oViewSerializer.serializeToHTML() : oViewSerializer.serializeToXML();
+						for ( var i = 0; i < aContent.length; i++) {
+							oUIArea.addContent(aContent[i]);
+						}
 					}
-					// By now just XML and HTML can be serialized
-					mViews = (sType && sType !== "XML") ? oViewSerializer.serializeToHTML() : oViewSerializer.serializeToXML();
-				} else {
-					var oUIArea = this.oCore.getUIArea(oEvent.getParameter("controlID"));
-					var oView = sap.ui.jsview(sType + "ViewExported");
-					var aContent = oUIArea.getContent();
-					for ( var i = 0; i < aContent.length; i++) {
-						oView.addContent(aContent[i]);
-					}
-					oViewSerializer = new ViewSerializer(oView, window, "sap.m");
-					// By now just XML and HTML can be serialized
-					mViews = (sType && sType !== "XML") ? oViewSerializer.serializeToHTML() : oViewSerializer.serializeToXML();
-					for ( var i = 0; i < aContent.length; i++) {
-						oUIArea.addContent(aContent[i]);
+
+					if (oViewSerializer) {
+						this._oStub.sendEvent(this.getId() + "ReceiveControlTreeExport", { serializedViews: JSON.stringify(mViews), sType: sType });
 					}
+				} catch (err) {
+					this._oStub.sendEvent(this.getId() + "ReceiveControlTreeExportError", { errorMessage: err.message });
 				}
 
-				if (oViewSerializer) {
-					this._oStub.sendEvent(this.getId() + "ReceiveControlTreeExport", { serializedViews: JSON.stringify(mViews), sType: sType });
-				}
-			} catch (err) {
-				this._oStub.sendEvent(this.getId() + "ReceiveControlTreeExportError", { errorMessage: err.message });
-			}
+			}.bind(this));
 		};
 
 		ControlTree.prototype.onsapUiSupportControlTreeRequestProperties = function(oEvent) {