@openui5/sap.ui.core 1.93.1 → 1.96.0

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.93.1
+		 * @version 1.96.0
 		 * @private
 		 * @alias sap.ui.core.support.plugins.Trace
 		 */
@@ -68,19 +68,89 @@ sap.ui.define([
 			var that = this;
 
 			var rm = sap.ui.getCore().createRenderManager();
-			rm.write("<div class='sapUiSupportToolbar'>");
-			rm.write("<button id='" + this.getId() + "-clear' class='sapUiSupportRoundedButton'>Clear</button>");
-			rm.write("<label class='sapUiSupportLabel'>Filter:</label><input type='text' id='" + this.getId() + "-filter' class='sapUiSupportTxtFld'>");
-			rm.write("<label class='sapUiSupportLabel'>Log Level:</label><select id='" + this.getId() + "-loglevel' class='sapUiSupportTxtFld sapUiSupportSelect'>");
-			rm.write("<option value='0'>FATAL</option>");
-			rm.write("<option value='1'>ERROR</option>");
-			rm.write("<option value='2'>WARNING</option>");
-			rm.write("<option value='3'>INFO</option>");
-			rm.write("<option value='4'>DEBUG</option>");
-			rm.write("<option value='5'>TRACE</option>");
-			rm.write("<option value='6' selected=''>ALL</option>");
-			rm.write("</select>");
-			rm.write("</div><div class='sapUiSupportTraceCntnt'></div>");
+			rm.openStart("div")
+				.class("sapUiSupportToolbar")
+				.openEnd();
+
+			rm.openStart("button", this.getId() + "-clear")
+				.class("sapUiSupportRoundedButton")
+				.openEnd()
+				.text("Clear")
+				.close("button");
+
+			rm.openStart("label")
+				.class("sapUiSupportLabel")
+				.openEnd()
+				.text("Filter:")
+				.close("label");
+
+			rm.voidStart("input", this.getId() + "-filter")
+				.class("sapUiSupportTxtFld")
+				.attr("type", "text")
+				.voidEnd();
+
+			rm.openStart("label")
+				.class("sapUiSupportLabel")
+				.openEnd()
+				.text("Log Level:")
+				.close("label");
+
+			rm.openStart("select", this.getId() + "-loglevel")
+				.class("sapUiSupportTxtFld")
+				.class("sapUiSupportSelect")
+				.openEnd();
+
+			rm.openStart("option")
+				.attr("value", "0")
+				.openEnd()
+				.text("FATAL")
+				.close("option");
+
+			rm.openStart("option")
+				.attr("value", "1")
+				.openEnd()
+				.text("ERROR")
+				.close("option");
+
+			rm.openStart("option")
+				.attr("value", "2")
+				.openEnd()
+				.text("WARNING")
+				.close("option");
+
+			rm.openStart("option")
+				.attr("value", "3")
+				.openEnd()
+				.text("INFO")
+				.close("option");
+
+			rm.openStart("option")
+				.attr("value", "4")
+				.openEnd()
+				.text("DEBUG")
+				.close("option");
+
+			rm.openStart("option")
+				.attr("value", "5")
+				.openEnd()
+				.text("TRACE")
+				.close("option");
+
+			rm.openStart("option")
+				.attr("value", "6")
+				.attr("selected", "")
+				.openEnd()
+				.text("ALL")
+				.close("option");
+
+			rm.close("select");
+			rm.close("div");
+
+			rm.openStart("div")
+				.class("sapUiSupportTraceCntnt")
+				.openEnd()
+				.close("div");
+
 			rm.flush(this.$().get(0));
 			rm.destroy();
 
@@ -116,7 +186,6 @@ sap.ui.define([
 			this.$("loglevel").on("change", this._fLogLevelHandler);
 		};
 
-
 		Trace.prototype.exit = function(oSupportStub){
 			if (this.runsAsToolPlugin()) {
 				if (this._fClearHandler) {
@@ -138,7 +207,6 @@ sap.ui.define([
 			Plugin.prototype.exit.apply(this, arguments);
 		};
 
-
 		function log(oPlugin, oEntry){
 			var jContentRef = jQuery(".sapUiSupportTraceCntnt", oPlugin.$());
 			if (!oEntry) {
@@ -157,20 +225,17 @@ sap.ui.define([
 			}
 		}
 
-
 		function getEntryHTML(oPlugin, oEntry){
 			var aLevelInfo = oEntry._levelInfo;
-			var sStyle = " style='color:" + aLevelInfo[1] + ";'";
-			var sResult = "<div class='sapUiSupportTraceEntry'><span class='sapUiSupportTraceEntryLevel'" + sStyle + ">" + aLevelInfo[0] +
-					"</span><span class='sapUiSupportTraceEntryTime'" + sStyle + ">" + oPlugin._oDateFormat.format(new Date(oEntry.timestamp)) +
+			var sResult = "<div class='sapUiSupportTraceEntry'><span class='sapUiSupportTraceEntryLevel sapUiSupportTraceEntryLevel_" + aLevelInfo[0] + "'>" + aLevelInfo[0] +
+					"</span><span class='sapUiSupportTraceEntryTime'>" + oPlugin._oDateFormat.format(new Date(oEntry.timestamp)) +
 					"</span><span class='sapUiSupportTraceEntryMessage'>" + encodeXML(oEntry.message || "") + "</div>";
 			return sResult;
 		}
 
-
 		function applyFilter(sFilterValue, iLogLevel, oEntry){
 			var aLevelInfo = oEntry._levelInfo;
-			if (oEntry._levelInfo[2] <= iLogLevel) {
+			if (oEntry._levelInfo[1] <= iLogLevel) {
 				if (sFilterValue) {
 					var aParts = sFilterValue.split(" ");
 					var bResult = true;
@@ -184,27 +249,25 @@ sap.ui.define([
 			return false;
 		}
 
-
 		function getLevel(iLogLevel){
 			switch (iLogLevel) {
 				case Log.Level.FATAL:
-					return ["FATAL", "#E60000", iLogLevel];
+					return ["FATAL", iLogLevel];
 				case Log.Level.ERROR:
-					return ["ERROR", "#E60000", iLogLevel];
+					return ["ERROR", iLogLevel];
 				case Log.Level.WARNING:
-					return ["WARNING", "#FFAA00", iLogLevel];
+					return ["WARNING", iLogLevel];
 				case Log.Level.INFO:
-					return ["INFO", "#000000", iLogLevel];
+					return ["INFO", iLogLevel];
 				case Log.Level.DEBUG:
-					return ["DEBUG", "#000000", iLogLevel];
+					return ["DEBUG", iLogLevel];
 				case Log.Level.TRACE:
-					return ["TRACE", "#000000", iLogLevel];
+					return ["TRACE", iLogLevel];
+				default:
+					return ["unknown", iLogLevel];
 			}
-			return ["unknown", "#000000", iLogLevel];
 		}
 
-
-
 	return Trace;
 
 });

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

@@ -20,7 +20,7 @@ sap.ui.define([
 		 * 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.93.1
+		 * @version 1.96.0
 		 * @private
 		 * @alias sap.ui.core.support.plugins.ViewInfo
 		 */
@@ -65,7 +65,7 @@ sap.ui.define([
 
 			if (typeof this.supportInfo !== "function") {
 				this.$().get(0).innerHTML =
-					"<div class='sapUISupportLabel' style='padding: 5px;'>" +
+					"<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." +
 					"</div>";
@@ -204,30 +204,6 @@ sap.ui.define([
 			this._propertyChangeDebugger = {};
 			this._methodDebugger = {};
 			var rm = sap.ui.getCore().createRenderManager();
-			rm.write('<style>' +
-				'.viewxmlinfo {width: 620px; height: 300px; position: absolute;margin-top: -310px;margin-left: 810px; box-sizing:border-box;}' +
-				'.viewxmlinfo .content {overflow: auto; box-sizing:border-box;}' +
-				'.viewxmlinfo .toolbar {padding:4px 10px;box-sizing:border-box;height:25px}' +
-				'.viewxmlinfo .title {padding:4px 10px;box-sizing:border-box;height:25px;font-size:17px;}' +
-				'.viewxmlinfo .title a {color: #007dc0; text-decoration: none}' +
-				'.viewxmlinfo .title a:hover {color: #007dc0; text-decoration: underline}' +
-				'.viewxmlheader {cursor:default;font-family:arial; font-size: 14px;}' +
-				'.viewxmlheader .info{margin-left:3px;display:inline-block}' +
-				'.viewxmlheader[collapsed=\'true\'] .settingscontainer {display:none;margin-left: 8px;}' +
-				'.viewxmlheader[collapsed=\'false\'] .settingscontainer {margin-top: 3px; display:block;margin-left: 12px;}' +
-				'.viewxmlmain .settingscontainer {margin-left: 12px;}' +
-				'.viewxmlmain .settings{font-size:14px;margin: 0px 6px;padding:2px 6px;color:#007dc0;cursor:pointer; display:inline-block;width:180px;white-space:nowrap;}' +
-				'.viewxmlmain .settings [selected=\'true\'] {background-color:#007dc0;}' +
-				'.viewxmlmain .settings [selected] {border: 1px solid #007dc0;height: 11px;display: inline-block;width: 11px;box-sizing: border-box;margin-right: 4px;margin-bottom: -1px;}' +
-				'.viewxmlheader .settings {margin: 0px 6px;padding:2px 6px;color:#007dc0;cursor:pointer; display:inline-block;width:180px;white-space:nowrap;}' +
-				'.viewxmlheader .settings [selected=\'true\'] {background-color:#007dc0;}' +
-				'.viewxmlheader .settings [selected] {border: 1px solid #007dc0;height: 11px;display: inline-block;width: 11px;box-sizing: border-box;margin-right: 4px;margin-bottom: -1px;}' +
-				'.viewxmlheader[collapsed=\'true\'] .toggle {border-color: transparent transparent transparent #333;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;}' +
-				'.viewxmlheader[collapsed=\'false\'] .toggle {border-color: #333 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: 8px;margin-right: 5px;display: inline-block;}' +
-				'.viewxmlsplitter {font-family: consolas, monospace; width: 5px; overflow: auto; height: 300px; position: absolute;margin-top: -310px;margin-left: 810px; padding-left:10px}' +
-				TreeViewer.getCss() +
-				ObjectViewer.getCss() +
-				'</style>');
 
 			if (!this.aTrees) {
 				this.aTrees = [];
@@ -243,11 +219,11 @@ 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"  style="display:none" raise="_onToggleDebugNodes" idx="' + i + '">Expand debugged nodes</span><span class="settings"  style="display:none" raise="_onToggleRealIds" idx="' + i + '" style=\"display:none\"><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 style="display:none"><div id="treecontent_' + i + '"></div>');
+							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" id="objectHeader' + i + '" style="display:none">Header</div><div class="toolbar" id="objectToolbar' + i + '" style="display:none">Toolbar</div><div class="content" id="selectedcontent_' + i + '">');
+							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>');
 						}
 						oMetadata.env.tree = oTree;
@@ -300,7 +276,7 @@ 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" raise="_onToggleRealIds" idx="' + i + '" style=\"display:none\"><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="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>');
 						} else {
 							var sTemplatedBy = "";
 							if (oView.env.metamodels) {
@@ -316,10 +292,10 @@ sap.ui.define([
 							}
 							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.write('<div style="display:none"><div id="treecontent_' + i + '"></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" id="objectHeader' + i + '" style="display:none">Header</div><div class="toolbar" id="objectToolbar' + i + '" style="display:none">Toolbar</div><div class="content" id="selectedcontent_' + i + '">');
+						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>');
 						i++;
 					}
@@ -395,7 +371,7 @@ sap.ui.define([
 			} catch (ex) {
 				return {error: "Property " + sName + " - Invalid Binding:" + ex.message};
 			}
-			var vValue = sValue = oBindingInfo || sValue; // oBindingInfo could be an unescaped string
+			var vValue = sValue = typeof oBindingInfo === "string" ? oBindingInfo : sValue; // oBindingInfo could be an unescaped string
 			var oType = DataType.getType(sType);
 			if (oType) {
 				if (oType instanceof DataType) {
@@ -933,46 +909,6 @@ sap.ui.define([
 				oDomRef.nextSibling.style.display = "none";
 			}
 		};
-		ViewInfo.prototype.createTemplateTreeNodes = function(oRootNode) {
-			var oTemplateTree = (new DOMParser()).parseFromString("", "application/xml");
-			var aInfos = this.supportInfo.getAll();
-			var oCurrentNode = oTemplateTree;
-			var sCurrentAttributeName = "";
-			var sCurrentAttributeValue = "";
-			var aParents = [];
-			for (var i = 0; i < aInfos.length; i++) {
-				var oInfo = aInfos[i];
-				if (oInfo.env.before) {
-					if (oInfo.env.caller === "visitNode") {
-						var oProcessedNode = oInfo.context;
-						if (oCurrentNode === oProcessedNode) {
-							continue;
-						}
-						oTemplateTree.importNode(oProcessedNode);
-						oProcessedNode.removeAttribute("support:data");
-						oProcessedNode.removeAttribute("xmlns:support");
-						if (oTemplateTree === oCurrentNode) {
-							oCurrentNode.replaceChild(oProcessedNode, oCurrentNode.firstChild);
-							aParents.push(oCurrentNode);
-						} else {
-							oCurrentNode.appendChild(oProcessedNode);
-							aParents.push(oCurrentNode);
-						}
-						oCurrentNode = oProcessedNode;
-					} else if (oInfo.env.caller === "visitAttributes") {
-						sCurrentAttributeName = oInfo.env.before.name;
-						sCurrentAttributeValue = oInfo.env.before.value;
-						oCurrentNode.setAttribute(sCurrentAttributeName, sCurrentAttributeValue);
-					}
-				} else if (oInfo.env.after) {
-					if (oInfo.env.caller === "visitNode") {
-						oCurrentNode = oCurrentNode.parentNode || oInfo.env.parent;
-					}
-
-				}
-			}
-			return oTemplateTree.childNodes[0];
-		};
 
 		ViewInfo.prototype.getValidDebugStackIndices = function(oNode) {
 			var aResults = [],

package/src/sap/ui/core/support/support.css

@@ -183,6 +183,15 @@ button.sapUiSupportHelpButton:hover {
 	padding: 0.25rem 0.5rem;
 }
 
+.sapUiSupportLabel img {
+	vertical-align: middle;
+	margin-left: 3px;
+}
+
+.sapUiSupportLabelBold {
+	font-weight: bold;
+}
+
 .sapUiSupportToolbar {
 	background-color: #F2F2F2;
 	height: 31px;
@@ -243,6 +252,26 @@ button.sapUiSupportHelpButton:hover {
 	background-color: #346187;
 }
 
+.sapUiSupportTechInfoBorder .sapUiSupportRoundedButton {
+	margin-left: 10px;
+}
+
+.sapUiSupportTechInfoBorder table {
+	width: 100%;
+}
+
+.sapUiSupportTechInfoXMLOutput {
+	margin-top:5px;
+}
+
+.sapUiSupportTechInfoXMLOutput textarea {
+	width: 100%;
+	height: 50px;
+	margin-top: 5px;
+	resize: none;
+	box-sizing: border-box;
+}
+
 .sapUiSupportPerfHeaderFilters .sapUiSupportTxtFld,
 .sapUiSupportToolbar > .sapUiSupportTxtFld {
 	margin-top: 2px;
@@ -256,7 +285,7 @@ button.sapUiSupportHelpButton:hover {
 
 /** Plugins **/
 
-#sapUiSupportTechInfo {
+#sapUiSupportTechInfo, #sapUiSupportTrace {
 	height: 350px;
 }
 
@@ -274,8 +303,7 @@ button.sapUiSupportHelpButton:hover {
 	right: 15px;
 }
 
-#sapUiSupportTrace,
-#sapUiSupportMessageTest {
+#sapUiSupportTrace {
 	overflow: hidden;
 }
 
@@ -288,14 +316,9 @@ button.sapUiSupportHelpButton:hover {
 	padding: 5px;
 }
 
-#sapUiSupportMessageTest > .sapUiSupportToolbar > button {
-	margin-left: 5px;
-}
-
 #sapUiSupportPerf .sapUiSupportPerfCntnt,
 #sapUiSupportTechInfo .sapUiSupportTechInfoCntnt,
-#sapUiSupportTrace .sapUiSupportTraceCntnt,
-#sapUiSupportMessageTest .sapUiSupportMessageCntnt {
+#sapUiSupportTrace .sapUiSupportTraceCntnt {
 	overflow: auto;
 	position: absolute;
 	top: 33px;
@@ -320,6 +343,29 @@ button.sapUiSupportHelpButton:hover {
 	width: 70px;
 }
 
+.sapUiSupportTraceEntryLevel_unknown,
+.sapUiSupportTraceEntryLevel_unknown .sapUiSupportTraceEntryTime,
+.sapUiSupportTraceEntryLevel_TRACE,
+.sapUiSupportTraceEntryLevel_TRACE .sapUiSupportTraceEntryTime,
+.sapUiSupportTraceEntryLevel_DEBUG,
+.sapUiSupportTraceEntryLevel_DEBUG .sapUiSupportTraceEntryTime,
+.sapUiSupportTraceEntryLevel_INFO,
+.sapUiSupportTraceEntryLevel_INFO .sapUiSupportTraceEntryTime {
+	color: #000000
+}
+
+.sapUiSupportTraceEntryLevel_FATAL,
+.sapUiSupportTraceEntryLevel_FATAL .sapUiSupportTraceEntryTime,
+.sapUiSupportTraceEntryLevel_ERROR,
+.sapUiSupportTraceEntryLevel_ERROR .sapUiSupportTraceEntryTime {
+	color: #E60000;
+}
+
+.sapUiSupportTraceEntryLevel_WARNING,
+.sapUiSupportTraceEntryLevel_WARNING .sapUiSupportTraceEntryTime {
+	color: #FFAA00
+}
+
 #sapUiSupportTrace .sapUiSupportTraceEntry {
 	border-bottom: 1px solid #BFBFBF;
 	margin-top: 10px;
@@ -340,6 +386,10 @@ button.sapUiSupportHelpButton:hover {
 	overflow: hidden;
 }
 
+.sapUiSupportControlTreeTitle {
+	padding: 0.5rem;
+}
+
 .sapUISupportLabel {
 	margin: 0.25rem auto;
 }
@@ -356,6 +406,11 @@ button.sapUiSupportHelpButton:hover {
 	float: left;
 	position: relative;
 }
+
+#sapUiSupportControlPropertiesArea h2 {
+	padding-left: 5px;
+}
+
 .sapUiSupportContainer {
 	border: 0;
 	height: auto;
@@ -377,19 +432,21 @@ ul.sapUiSupportControlTreeList li {
 	padding: 0;
 }
 
+ul.sapUiSupportControlTreeList .sapUiSupportLabel {
+	vertical-align: middle;
+}
+
 #sapUiSupportControlTreeArea li {
 	overflow: hidden;
 	cursor: pointer;
 }
 
-#sapUiSupportControlTreeArea li img.sapUiControlTreeIcon,
-#sapUiSupportControlTreeArea li img.sapUiControlPicture {
-	float: left;
-}
-
 #sapUiSupportControlTreeArea li img.sapUiControlTreeIcon {
+	float: left;
 	margin-top: 5px;
 	margin-right: 3px;
+	width: 12px;
+	height: 12px;
 }
 
 #sapUiSupportControlTreeArea li div {
@@ -426,6 +483,14 @@ ul.sapUiSupportControlTreeList li {
 	float: right;
 }
 
+.sapUiSupportControlTabsHidden {
+	visibility: hidden;
+}
+
+.sapUiSupportItemHidden {
+	display: none;
+}
+
 #sapUiSupportControlPropertiesArea ul.sapUiSupportControlTreeList li span {
 	display: inline-block;
 	padding: 5px 0;
@@ -465,6 +530,14 @@ ul.sapUiSupportControlTreeList li {
 	box-sizing: border-box;
 }
 
+.sapUiSupportControlProperties .sapUiSupportModelPathInvalid {
+	color: red;
+}
+
+.sapUiSupportControlProperties .sapUiSupportModelPathUnverified {
+	color: orange;
+}
+
 #sapUiSupportPerf > .sapUiSupportToolbar > button {
 	margin-right: 5px;
 }
@@ -1366,3 +1439,25 @@ html[data-sap-ui-browser^="cr"] .sapUiSupportIntFupInputMask > input {
 	vertical-align: middle;
 	bottom: 1px;
 }
+
+.remove-breakpoint,
+.remove-class {
+	cursor:pointer;
+	margin-left:5px;
+}
+
+.sapUiSupportRefreshBinding {
+	cursor: pointer;
+	margin-left: 5px;
+	vertical-align: middle;
+}
+
+#sapUiSupportDebuggingClassContainer .sapUISupportLabel,
+#sapUiSupportDebuggingMethodContainer .sapUISupportLabel {
+	margin-right: 5px;
+}
+
+#sapUiSupportDebuggingMethodContainer p {
+	text-align: center;
+	font-weight: bold;
+}

package/src/sap/ui/core/support/support.html

@@ -1,5 +1,5 @@
 <!DOCTYPE HTML>
-<html style="overflow: auto;">
+<html>
 <head>
 	<meta charset="utf-8">
 	<title>UI5 Diagnostics</title>
@@ -7,12 +7,16 @@
 	<link rel="stylesheet" href="InteractionTree.css" type="text/css">
 	<link rel="stylesheet" href="interactionSlider.css" type="text/css">
 	<link rel="stylesheet" href="TimelineOverview.css" type="text/css">
+	<link rel="stylesheet" href="ViewInfo.css" type="text/css">
 	<script id="sap-ui-bootstrap" src="../../../../sap-ui-core.js"
 			data-sap-ui-theme="sap_belize"
 			data-sap-ui-bindingsyntax="complex"
 			data-sap-ui-libs="sap.ui.core"
 			data-sap-ui-modules="sap.ui.core.support.Support"
-			data-sap-ui-oninit="sap.ui.core.support.Support.getStub(sap.ui.core.support.Support.StubType.TOOL)"></script>
+			data-sap-ui-oninit="module:sap/ui/core/support/BootSupportTool"
+			data-sap-ui-resourceroots='{
+				"sap.ui.core.support": "./"
+			}'></script>
 	<script src="bootstrapFallback.js"></script>
 </head>
 <body class="sapUiSupportBody">

package/src/sap/ui/core/support/techinfo/TechnicalInfo.fragment.xml

@@ -33,6 +33,7 @@
 			adjustLabelSpan="false"
 			ariaLabelledBy="title"
 			layout="ResponsiveGridLayout"
+			core:require="{RGL:'sap/ui/layout/form/ResponsiveGridLayout'}"
 			editable="true">
 			<f:content>
 				<!-- Product Version info -->