@openui5/sap.ui.documentation 1.113.0 → 1.114.1

package/src/sap/ui/documentation/messagebundle_zh_CN.properties

@@ -388,6 +388,8 @@ TOOLS_CARD_14_TEXT=\u7075\u6D3B\u7684\u7F16\u7A0B\u6A21\u578B\u4FBF\u4E8E\u60A8\
 TOOLS_CARD_14_IMG_ALT=\u56FE\u7247\u663E\u793A\u4E86\u7075\u6D3B\u7F16\u7A0B\u6A21\u578B\u6D4F\u89C8\u5668
 TOOLS_CARD_15_TEXT=\u8F85\u52A9\u529F\u80FD\u6307\u5357\u63D0\u4F9B\u4E86\u6709\u5173 web \u8F85\u52A9\u529F\u80FD\u7684\u6DF1\u5165\u4FE1\u606F\u53CA\u793A\u4F8B\uFF0C\u65E0\u8BBA\u60A8\u662F\u63A7\u4EF6\u6216\u5E94\u7528\u7A0B\u5E8F\u5F00\u53D1\u4EBA\u5458\u8FD8\u662F\u4E1A\u52A1\u7528\u6237\uFF0C\u90FD\u53EF\u4EE5\u901A\u8FC7\u641C\u7D22\u4E86\u89E3\u6709\u5173 SAPUI5 \u8303\u56F4\u5185 web \u8F85\u52A9\u529F\u80FD\u7684\u66F4\u591A\u4FE1\u606F\u3002
 TOOLS_CARD_15_IMG_ALT=\u56FE\u7247\u663E\u793A\u4E86\u8F85\u52A9\u529F\u80FD\u6307\u5357
+TOOLS_CARD_16_TEXT=\u501F\u52A9 UI5 \u6D4B\u8BD5\u5F55\u5236\u5668\u8FD9\u4E00\u5DE5\u5177\uFF0C\u53EF\u4EE5\u901A\u8FC7\u5728\u6D4F\u89C8\u5668\u4E2D\u5F55\u5236\u64CD\u4F5C\u6765\u521B\u5EFA UI5 \u96C6\u6210\u6D4B\u8BD5\u3002
+TOOLS_CARD_16_IMG_ALT=\u56FE\u7247\u663E\u793A\u4E86 UI5 \u6D4B\u8BD5\u5F55\u5236\u5668
 API_MASTER_PLACEHOLDER=\u8FC7\u6EE4\u5668
 API_MASTER_EXPAND_BTN_TOOLTIP=\u5168\u90E8\u5C55\u5F00
 API_MASTER_COLLAPSE_BTN_TOOLTIP=\u5168\u90E8\u6298\u53E0

package/src/sap/ui/documentation/messagebundle_zh_TW.properties

@@ -388,6 +388,8 @@ TOOLS_CARD_14_TEXT=\u4F7F\u7528 SAP Fiori \u5143\u7D20 (\u9069\u7528\u65BC OData
 TOOLS_CARD_14_IMG_ALT=\u7528\u65BC\u986F\u793A\u5F48\u6027\u7A0B\u5F0F\u8A2D\u8A08\u6A21\u578B\u700F\u89BD\u5668\u7684\u5716\u7247
 TOOLS_CARD_15_TEXT=\u7121\u8AD6\u60A8\u662F\u63A7\u5236\u4EBA\u54E1\u3001\u61C9\u7528\u7A0B\u5F0F\u958B\u767C\u4EBA\u54E1\uFF0C\u6216\u662F\u5728 SAPUI5 \u5340\u57DF\u4E2D\u641C\u5C0B\u4EE5\u77AD\u89E3\u7DB2\u8DEF\u53EF\u5B58\u53D6\u6027\u76F8\u95DC\u8CC7\u8A0A\u7684\u4F01\u696D\u4F7F\u7528\u8005\uFF0C\u6B64\u300C\u53EF\u5B58\u53D6\u6027\u6307\u5357\u300D\u6703\u63D0\u4F9B\u6709\u95DC\u7DB2\u8DEF\u53EF\u5B58\u53D6\u6027\u7BC4\u4F8B\u7684\u6DF1\u5165\u8CC7\u8A0A\u3002
 TOOLS_CARD_15_IMG_ALT=\u7528\u65BC\u986F\u793A\u53EF\u5B58\u53D6\u6027\u6307\u5357\u7684\u5716\u7247
+TOOLS_CARD_16_TEXT=UI5 \u6E2C\u8A66\u8A18\u9304\u5668\u5DE5\u5177\u6703\u900F\u904E\u5728\u700F\u89BD\u5668\u4E2D\u8A18\u9304\u60A8\u7684\u52D5\u4F5C\uFF0C\u4EE5\u5354\u52A9\u60A8\u5EFA\u7ACB UI5 \u6574\u5408\u6E2C\u8A66\u3002
+TOOLS_CARD_16_IMG_ALT=\u7528\u65BC\u986F\u793A UI5 \u6E2C\u8A66\u8A18\u9304\u5668\u7684\u5716\u7247
 API_MASTER_PLACEHOLDER=\u7BE9\u9078
 API_MASTER_EXPAND_BTN_TOOLTIP=\u5168\u90E8\u5C55\u958B
 API_MASTER_COLLAPSE_BTN_TOOLTIP=\u5168\u90E8\u6536\u7E2E

package/src/sap/ui/documentation/sdk/Component.js

@@ -201,7 +201,7 @@ sap.ui.define([
 					versionName: oVersionInfo.name,
 					version: [oVersion.getMajor(), oVersion.getMinor(), oVersion.getPatch()].join("."),
 					fullVersion: oVersionInfo.version,
-					openUi5Version: sVersionPrefixPath || sap.ui.version,
+					openUi5Version: sVersionPrefixPath || oVersionInfo.version,
 					isOpenUI5: bOpenUI5,
 					isSnapshotVersion: bSnapshot,
 					isDevVersion: bSnapshot,

package/src/sap/ui/documentation/sdk/controller/App.controller.js

@@ -163,20 +163,17 @@ sap.ui.define([
 				ThemePicker.init(oController);
 
 				this.MENU_LINKS_MAP = {
-					"legal": "https://www.sap.com/corporate/en/legal/impressum.html",
-					"privacy": "https://www.sap.com/corporate/en/legal/privacy.html",
-					"terms_of_use": "https://www.sap.com/corporate/en/legal/terms-of-use.html",
 					"copyright": "https://www.sap.com/corporate/en/legal/copyright.html",
 					"trademark": "https://www.sap.com/corporate/en/legal/trademark.html",
 					"disclaimer": "https://help.sap.com/viewer/disclaimer",
-					"sitemap": "sitemap",
-					"license": "LICENSE.txt"
+					"sitemap": "sitemap"
 				};
 
+				jQuery.extend(this.MENU_LINKS_MAP, BaseController.LEGAL_LINKS);
+
 				this.getOwnerComponent().loadVersionInfo().then(function () {
 					var sProduct;
 					if (this.getModel("versionData").getProperty("/isOpenUI5")) {
-						this.MENU_LINKS_MAP["Terms of Use"] = "TermsOfUse.txt";
 						sProduct = "OPENUI5";
 					} else {
 						sProduct = "SAPUI5";

package/src/sap/ui/documentation/sdk/controller/BaseController.js

@@ -23,11 +23,13 @@ sap.ui.define([
 		// shortcut for sap.m.SplitAppMode
 		var SplitAppMode = mobileLibrary.SplitAppMode;
 
+		var URLHelper = mobileLibrary.URLHelper;
+
 		var _oWebPageTitleUtil = new WebPageTitleUtil();
 
 		var _oPageTitle = [];
 
-		return Controller.extend("sap.ui.documentation.sdk.controller.BaseController", {
+		var BaseController = Controller.extend("sap.ui.documentation.sdk.controller.BaseController", {
 
 			// Prerequisites
 			_oCore: sap.ui.getCore(),
@@ -233,6 +235,16 @@ sap.ui.define([
 			handleLandingImageLoad: function () {
 				this.getView().byId("landingImageHeadline").setVisible(true);
 			},
+			/**
+			 * Handles the click on an item of the Footer Master (the footer placed
+			 * at the bottom of any MasterPage (left side of the SplitApp)).
+			 * @param {object} oEvent the Event object from which we are going to get the correct item key.
+			 */
+			handleFooterMasterItemPress: function(oEvent) {
+				var sTargetText = oEvent.getParameter("item").getKey(),
+				sTarget = BaseController.LEGAL_LINKS[sTargetText];
+				URLHelper.redirect(sTarget, true);
+			},
 			/**
 			 * Checks if a control has API Reference
 			 * @param {string} sControlName
@@ -261,5 +273,17 @@ sap.ui.define([
 				return;
 			}
 		});
+
+		/**
+		 * STATIC MEMBERS
+		 */
+		BaseController.LEGAL_LINKS = {
+			"legal": "https://www.sap.com/corporate/en/legal/impressum.html",
+			"privacy": "https://www.sap.com/corporate/en/legal/privacy.html",
+			"terms_of_use": "https://www.sap.com/corporate/en/legal/terms-of-use.html",
+			"license": "LICENSE.txt"
+		};
+
+		return BaseController;
 	}
 );

package/src/sap/ui/documentation/sdk/controller/SampleBaseController.js

@@ -196,9 +196,34 @@ sap.ui.define([
 				});
 		},
 
+		/**
+		 * Formats the name in NPM style string:
+		 *
+		 * A package.json file must contain "name" and "version" fields.
+		 * The "name" field contains your package's name, and must be lowercase and one word,
+		 * and may contain hyphens and underscores.
+		 *
+		 * @param {string} name The name to format
+		 * @returns {string} Formatted name
+		 */
+		_formatNameToNpmSpec: function (name) {
+			var result;
+			var testValidChars = /[^\w_\-\.]+/gi; // Only "words", "-", "_" and "."
+
+			name = name
+				.replace(testValidChars, "") // Cleanup invalid characters
+				.replaceAll(".", "-"); // Replace the dots with dashes
+
+			result = name.split(/(?=[A-Z])/); // Split on Capital letters
+
+			return result
+				.map(function (chunk) { return chunk.toLowerCase(); })
+				.join("-");
+		},
+
 		_formatPackageJson: function (sPackageFile, sManifestFile, oData) {
 			var sFormattedPackageFile = sPackageFile.replace(/{{TITLE}}/g, oData.title)
-				.replace(/{{SAMPLE_ID}}/g, oData.id),
+				.replace(/{{SAMPLE_ID}}/g, this._formatNameToNpmSpec(oData.id)),
 				oPackageFile = JSON.parse(sFormattedPackageFile),
 				oPackageDependencies = oPackageFile.dependencies,
 				oManifestFile,
@@ -226,7 +251,7 @@ sap.ui.define([
 		},
 
 		_formatYamlFile: function(sFile, oData) {
-			return sFile.replace(/{{SAMPLE_ID}}/g, oData.id);
+			return sFile.replace(/{{SAMPLE_ID}}/g, this._formatNameToNpmSpec(oData.id));
 		},
 
 		_formatManifestJsFile: function (sRawManifestFileJs) {

package/src/sap/ui/documentation/sdk/controller/Tools.controller.js

@@ -60,8 +60,8 @@ sap.ui.define([
 			this.setModel(new JSONModel({
 				inspectorHomeLink: "topic/b24e72443eb34d0fb7bf6940f2d697eb",
 				supportAssistantHomeLink: oData.supportAssistant.href,
-				iconExplorerHomeLink: "topic/21ea0ea94614480d9a910b2e93431291"
-				// etc
+				iconExplorerHomeLink: "topic/21ea0ea94614480d9a910b2e93431291",
+				ui5TestRecorderHomeLink: oData.ui5TestRecorder.href
 			}), "newWindowLinks");
 		},
 

package/src/sap/ui/documentation/sdk/controller/VersionNotFound.controller.js

@@ -47,13 +47,13 @@ sap.ui.define([
 				sUrl = document.location.href,
 				sRedirectUrl,
 				sVersion = DemokitURLUtil.parseVersion(sUrl),
-				isRemoved = false;
+				oPatchInfo = this._getPatchInfo(oVersionInfo, sVersion),
+				isRemoved = oPatchInfo && oPatchInfo.removed,
+				isRuntimeOnly = oPatchInfo && oPatchInfo.runtimeOnly;
 
 			oMessagePage.setBusy(false);
 
-			isRemoved = this._isVersionRemoved(oVersionInfo, sVersion);
-
-			if (isRemoved && DemokitURLUtil.requestsDemokitView(sUrl)) {
+			if ((isRemoved || isRuntimeOnly) && DemokitURLUtil.requestsDemokitView(sUrl)) {
 				// redirect to the latest (version-less) URL
 				sRedirectUrl = DemokitURLUtil.removeVersion(sUrl);
 				mLib.URLHelper.redirect(sRedirectUrl);
@@ -72,6 +72,10 @@ sap.ui.define([
 				// show removed message
 				oMessagePage.setText(this._getLibraryResourceBundle().getText("NOT_FOUND_REMOVED_TEXT"));
 				oReadMoreBtn.setVisible(true);
+			} else if (isRuntimeOnly) {
+				// show removed message
+				oMessagePage.setText(this._getLibraryResourceBundle().getText("NOT_FOUND_DK_REMOVED_TEXT"));
+				oReadMoreBtn.setVisible(true);
 			} else {
 				// show unavailable message
 				oReadMoreBtn.setVisible(false);
@@ -79,17 +83,11 @@ sap.ui.define([
 			}
 		},
 
-		_isVersionRemoved: function (oVersionInfo, sVersion) {
-			var aPatches = oVersionInfo.patches,
-				iVersionIndex,
-				reVersion;
-
-			iVersionIndex = aPatches.findIndex(function (oData) {
-				reVersion = new RegExp(oData.version);
-				return oData.removed && reVersion.test(sVersion);
+		_getPatchInfo: function (oVersionInfo, sVersion) {
+			var aPatches = oVersionInfo.patches;
+			return aPatches.find(function (oData) {
+				return sVersion === oData.version;
 			});
-
-			return iVersionIndex > -1;
 		},
 
 		_getLibraryResourceBundle: function () {

package/src/sap/ui/documentation/sdk/controller/util/Highlighter.js

@@ -230,7 +230,7 @@ function() {
 	Highlighter.prototype._createHighlightedNode = function (oTokensToHighlight, sText) {
 		var oRootNode = document.createElement("span"),
 			aAllTokens = [],
-			fnSort = function(a, b) {return a > b;},
+			fnSort = function(a, b) {return parseInt(a) > parseInt(b);},
 			aIndices = Object.keys(oTokensToHighlight).sort(fnSort),
 			iIndex,
 			iStartIndex = 0;

package/src/sap/ui/documentation/sdk/controller/util/ToolsInfo.js

@@ -78,6 +78,12 @@ sap.ui.define([],
 				"text": "Accessibility Guide",
 				"href": "test-resources/sap/m/demokit/accessibilityGuide/webapp/index.html",
 				"hideOnPhone": true
+			},
+			{
+				"id": "ui5TestRecorder",
+				"text": "UI5 Test Recorder",
+				"href": "topic/2535ef9272064cb6bd6b44e5402d531d",
+				"hideOnPhone": true
 			}
 		];
 

package/src/sap/ui/documentation/sdk/css/style.css

@@ -87,15 +87,14 @@ pre.sapUiDocumentationAPICode,
 	margin-left: 0;
 }
 
-html:not(.sapUiMedia-StdExt-Phone) .sapUiDocumentationFooter {
-	height: 2.5rem;
+.sapMTB.sapUiDocumentationFooter {
+	height: auto;
+	padding: .5rem 1rem 0.25rem 1rem;
 }
 
-.sapUiBlockLayoutSizeM:not(.sapUiBlockLayoutKeepFontSize) .sapUiDocumentationFooter > .sapUiBlockCellContent,
-.sapUiBlockLayoutSizeL:not(.sapUiBlockLayoutKeepFontSize) .sapUiDocumentationFooter > .sapUiBlockCellContent,
-.sapUiBlockLayoutSizeXL:not(.sapUiBlockLayoutKeepFontSize) .sapUiDocumentationFooter > .sapUiBlockCellContent {
-	padding-top: 0.25rem;
-	padding-bottom: 0.25rem;
+.sap-phone .sapMTB.sapUiDocumentationFooter {
+	padding: 1rem;
+	padding-top: 1.25rem;
 }
 
 /* 'index by version' entry item */
@@ -898,6 +897,22 @@ html.sapUiTheme-sap_belize_plus .sapUiDemokit .sapUiDocumentationSplitApp > .sap
 	border-right: 1px solid #4f667a;
 }
 
+.sapUiDemokit .sapUiDocumentationMasterPage .sapUiFixFlex .sapUiFixFlexFlexible .sapUiFixFlexFlexibleContainer {
+	overflow-y: auto;
+	margin-bottom: .5625rem;
+}
+
+.sapUiDemokit .sapUiDocumentationMasterPage .sapUiFixFlex .sapUiFixFlexFlexible:after {
+	content: "";
+	display: block;
+	width: calc(100% - 2rem);
+	height: .0625rem;
+	margin: .3125rem 1rem 0 1rem;
+	background: var(--sapUiDemoKitAccentColor6);
+	position: absolute;
+	bottom: .25rem;
+}
+
 html.sapUiTheme-sap_fiori_3_hcb .sapUiDemokit .sapMSplitContainerMaster,
 html.sapUiTheme-sap_fiori_3_hcw .sapUiDemokit .sapMSplitContainerMaster,
 html.sapUiTheme-sap_belize_hcb .sapUiDemokit .sapMSplitContainerMaster,
@@ -935,10 +950,6 @@ html:not(.sapUiTheme-sap_belize_hcb):not(.sapUiTheme-sap_belize_hcw):not(.sapUiT
 	background-color: #d5e2ef;
 }
 
-html:not(.sapUiTheme-sap_belize_hcb):not(.sapUiTheme-sap_belize_hcw):not(.sapUiTheme-sap_fiori_3_hcb):not(.sapUiTheme-sap_fiori_3_hcw) .sapUiBlockLayout .sapUiBlockLayoutRow.sapUiBlockHorizontalCellsRow .sapUiBlockLayoutCell.demokitInitialPagesColorPatternFContrast {
-	background-color: #354a5f;
-}
-
 html:not(.sapUiTheme-sap_belize_hcb):not(.sapUiTheme-sap_belize_hcw):not(.sapUiTheme-sap_fiori_3_hcb):not(.sapUiTheme-sap_fiori_3_hcw) .demokitInitialPagesWhiteText {
 	color: #fff;
 	text-shadow: none;

package/src/sap/ui/documentation/sdk/tmpl/package.json.tmpl

@@ -11,6 +11,6 @@
 		"@openui5/themelib_sap_fiori_3" : "^1"
 	},
 	"devDependencies": {
-		"@ui5/cli": "^2.0.0"
+		"@ui5/cli": "^3"
 	}
 }

package/src/sap/ui/documentation/sdk/tmpl/ui5.yaml.tmpl

@@ -1,4 +1,4 @@
-specVersion: '2.3'
+specVersion: '3.0'
 metadata:
   name: "{{SAMPLE_ID}}"
 type: application

package/src/sap/ui/documentation/sdk/view/ApiDetailInitial.view.xml

@@ -278,10 +278,7 @@
 			</l:BlockLayout>
 		</Panel>
 
-		<l:BlockLayout>
-			<l:BlockLayoutRow>
 				<core:Fragment id="footerFragment" fragmentName="sap.ui.documentation.sdk.view.Footer" type="XML" />
-			</l:BlockLayoutRow>
-		</l:BlockLayout>
+
 	</Page>
 </mvc:View>

package/src/sap/ui/documentation/sdk/view/ApiMaster.view.xml

@@ -2,6 +2,8 @@
 		controllerName="sap.ui.documentation.sdk.controller.ApiMaster"
 		xmlns:mvc="sap.ui.core.mvc"
 		xmlns="sap.m"
+		xmlns:l="sap.ui.layout"
+		xmlns:core="sap.ui.core"
 		xmlns:custom="sap.ui.documentation"
 		class="sapContrast sapContrastPlus">
 
@@ -28,20 +30,27 @@
 
 		<content>
 
-			<Tree
-				id="tree"
-				mode="SingleSelectMaster"
-				noDataText="{i18n>API_MASTER_NO_DATA_TEXT}"
-				selectionChange="onNodeSelect"
-				items="{treeData>/}">
-				<custom:DemokitTreeItem
-						title="{treeData>displayName}"
-						target="{treeData>name}"
-                        entityType="{treeData>kind}"
-						section="api"
-						class="sapDemokitTreeItem"
-						deprecated="{treeData>deprecated}"/>
-			</Tree>
+			<l:FixFlex fixFirst="false">
+				<l:flexContent>
+					<Tree
+						id="tree"
+						mode="SingleSelectMaster"
+						noDataText="{i18n>API_MASTER_NO_DATA_TEXT}"
+						selectionChange="onNodeSelect"
+						items="{treeData>/}">
+						<custom:DemokitTreeItem
+								title="{treeData>displayName}"
+								target="{treeData>name}"
+								entityType="{treeData>kind}"
+								section="api"
+								class="sapDemokitTreeItem"
+								deprecated="{treeData>deprecated}"/>
+					</Tree>
+				</l:flexContent>
+				<l:fixContent>
+					<core:Fragment fragmentName="sap.ui.documentation.sdk.view.FooterMaster" type="XML" />
+				</l:fixContent>
+			</l:FixFlex>
 
 		</content>
 

package/src/sap/ui/documentation/sdk/view/Controls.view.xml

@@ -406,10 +406,7 @@
 			</l:BlockLayout>
 		</Panel>
 
-		<l:BlockLayout>
-			<l:BlockLayoutRow>
-				<core:Fragment id="footerFragment" fragmentName="sap.ui.documentation.sdk.view.Footer" type="XML" />
-			</l:BlockLayoutRow>
-		</l:BlockLayout>
+		<core:Fragment id="footerFragment" fragmentName="sap.ui.documentation.sdk.view.Footer" type="XML" />
+
 	</Page>
 </mvc:View>

package/src/sap/ui/documentation/sdk/view/ControlsMaster.view.xml

@@ -1,6 +1,8 @@
 <mvc:View
 		controllerName="sap.ui.documentation.sdk.controller.ControlsMaster"
 		xmlns:mvc="sap.ui.core.mvc"
+		xmlns:l="sap.ui.layout"
+		xmlns:core="sap.ui.core"
 		xmlns="sap.m"
 		class="sapContrast sapContrastPlus">
 	<Page
@@ -20,36 +22,43 @@
 
 		<!-- Navigation List -->
 		<content>
-			<List id="exploredMasterList"
-				  mode="{viewModel>/listMode}"
-				  selectionChange="onNavToEntity"
-				  noDataText="{i18n>CONTROLS_MASTER_NO_DATA_TEXT}"
-				  items="{path: '/entities',
-				  groupHeaderFactory: '.getGroupHeader',
-				  sorter: [{
-						path: 'category',
-						descending: false,
-						group: true
-					},{
-						path: 'name',
-						descending: false
-					}]}">
-				<infoToolbar>
-					<Toolbar id="vsFilterBar"
-							active="true"
-							visible="false"
-							press="handleListSettings">
-						<Label id="vsFilterLabel" />
-					</Toolbar>
-				</infoToolbar>
-				<items>
-					<StandardListItem
-							title="{name}"
-							counter="{sampleCount}"
-							type="{viewModel>/listItemType}"
-							press="onNavToEntity" />
-				</items>
-			</List>
+			<l:FixFlex fixFirst="false">
+				<l:flexContent>
+					<List id="exploredMasterList"
+							mode="{viewModel>/listMode}"
+							selectionChange="onNavToEntity"
+							noDataText="{i18n>CONTROLS_MASTER_NO_DATA_TEXT}"
+							items="{path: '/entities',
+							groupHeaderFactory: '.getGroupHeader',
+							sorter: [{
+								path: 'category',
+								descending: false,
+								group: true
+							},{
+								path: 'name',
+								descending: false
+							}]}">
+						<infoToolbar>
+							<Toolbar id="vsFilterBar"
+									active="true"
+									visible="false"
+									press="handleListSettings">
+								<Label id="vsFilterLabel" />
+							</Toolbar>
+						</infoToolbar>
+						<items>
+							<StandardListItem
+									title="{name}"
+									counter="{sampleCount}"
+									type="{viewModel>/listItemType}"
+									press="onNavToEntity" />
+						</items>
+					</List>
+				</l:flexContent>
+				<l:fixContent>
+					<core:Fragment fragmentName="sap.ui.documentation.sdk.view.FooterMaster" type="XML" />
+				</l:fixContent>
+			</l:FixFlex>			
 		</content>
 	</Page>
 </mvc:View>

package/src/sap/ui/documentation/sdk/view/DemoApps.view.xml

@@ -107,13 +107,9 @@
 						</l:BlockLayout>
 					</Panel>
 				</l:VerticalLayout>
-				<l:BlockLayout
-						id="demoAppsFooter"
-						visible="{/bFooterVisible}">
-					<l:BlockLayoutRow>
-						<core:Fragment id="footerFragment" fragmentName="sap.ui.documentation.sdk.view.Footer" type="XML" />
-					</l:BlockLayoutRow>
-				</l:BlockLayout>
+
+				<core:Fragment id="demoAppsFooter" visible="{/bFooterVisible}" fragmentName="sap.ui.documentation.sdk.view.Footer" type="XML" />
+
 			</ScrollContainer>
 		</content>
 		<dependents>

package/src/sap/ui/documentation/sdk/view/Footer.fragment.xml

@@ -1,8 +1,7 @@
 <core:FragmentDefinition
 		xmlns="sap.m"
-		xmlns:l="sap.ui.layout"
 		xmlns:core="sap.ui.core">
-	<l:BlockLayoutCell	class="demokitInitialPagesColorPatternFContrast sapUiDocumentationFooter">
+	<Toolbar style="Clear" class="sapUiDocumentationFooter">
 		<FlexBox
 				alignItems="{= ${device>/system/phone} ? 'Start' : 'Center' }"
 				justifyContent="SpaceBetween"
@@ -20,29 +19,27 @@
 						class="sapUiTinyMarginTop">
 					<items>
 						<Link
-								class="demokitInitialPagesBrightLink sapUiLargeMarginEnd sapUiTinyMarginBottom"
+								class="sapUiLargeMarginEnd sapUiTinyMarginBottom"
 								text="{i18n>FOOTER_LEGAL_DISCOLURE}"
 								href="https://www.sap.com/corporate/en/legal/impressum.html"
 								target="_blank"/>
 						<Link
-								class="demokitInitialPagesBrightLink sapUiLargeMarginEnd sapUiTinyMarginBottom"
+								class="sapUiLargeMarginEnd sapUiTinyMarginBottom"
 								text="{i18n>FOOTER_PRIVACY}"
 								href="https://www.sap.com/corporate/en/legal/privacy.html"
 								target="_blank"/>
 						<Link
-								class="demokitInitialPagesBrightLink"
 								text="{i18n>FOOTER_TERMS}"
 								href="https://www.sap.com/corporate/en/legal/terms-of-use.html"
 								visible="{=!${versionData>/isOpenUI5}}"
 								target="_blank"/>
 						<Link
-								class="demokitInitialPagesBrightLink sapUiTinyMarginBottom sapUiLargeMarginEnd"
+								class="sapUiTinyMarginBottom sapUiLargeMarginEnd"
 								text="{i18n>FOOTER_LICENSE}"
 								href="LICENSE.txt"
 								visible="{versionData>/isOpenUI5}"
 								target="_blank"/>
 						<Link
-								class="demokitInitialPagesBrightLink"
 								text="{i18n>FOOTER_TERMS}"
 								href="TermsOfUse.txt"
 								visible="{versionData>/isOpenUI5}"
@@ -51,5 +48,5 @@
 				</FlexBox>
 			</items>
 		</FlexBox>
-	</l:BlockLayoutCell>
+	</Toolbar>
 </core:FragmentDefinition>

package/src/sap/ui/documentation/sdk/view/FooterMaster.fragment.xml

@@ -0,0 +1,11 @@
+<core:FragmentDefinition
+		xmlns="sap.m"
+		xmlns:tnt="sap.tnt"
+		xmlns:core="sap.ui.core">
+	<tnt:NavigationList itemSelect="handleFooterMasterItemPress">
+		<tnt:NavigationListItem icon="sap-icon://compare" key="legal" text="{i18n>APP_INFORMATION_BTN_LEGAL}" />
+		<tnt:NavigationListItem icon="sap-icon://locked" key="privacy" text="{i18n>APP_INFORMATION_BTN_PRIVACY}" />
+		<tnt:NavigationListItem icon="sap-icon://permission" text="{i18n>APP_INFORMATION_BTN_LICENSE}" key="license" visible="{versionData>/isOpenUI5}" />
+		<tnt:NavigationListItem icon="sap-icon://document-text" key="terms_of_use" text="{i18n>APP_INFORMATION_BTN_TERMS_OF_USE}" visible="{=!${versionData>/isOpenUI5}}" />
+	</tnt:NavigationList>
+</core:FragmentDefinition>

package/src/sap/ui/documentation/sdk/view/Tools.view.xml

@@ -443,11 +443,33 @@
 					</VBox>
 				</f:content>
 			</f:Card>
+			<!-- UI5 Test Recorder -->
+			<f:Card class="threeColumnLayoutCard"
+				visible="{
+							path: '/ui5TestRecorder',
+							formatter: '.formatter.formatToolCardVisibility'}">
+				<f:content>
+					<VBox justifyContent="SpaceBetween">
+						<VBox class="sapUiSmallMargin toolspageCardInfo">
+							<custom:TitleLink
+									level="H1"
+									titleStyle="H1"
+									text="{/ui5TestRecorder/text}"
+									class="sapUiSmallMarginBottom"
+									href="{newWindowLinks>/ui5TestRecorderHomeLink}"
+									target="_blank"/>
+							<Text class="sapUiSmallMarginBottom" text="{i18n>TOOLS_CARD_16_TEXT}" />
+							<HBox wrap="Wrap">
+								<Link text="{i18n>TOOLS_VIEW_DOC}"
+									target="_blank"
+									href="{newWindowLinks>/ui5TestRecorderHomeLink}"/>
+							</HBox>
+						</VBox>
+						<Image src="./resources/sap/ui/documentation/sdk/images/tools/UI5TestRecorder.png" class="toolsPageImage"  alt="{i18n>TOOLS_CARD_16_IMG_ALT}"/>
+					</VBox>
+				</f:content>
+			</f:Card>
 		</l:Grid>
-		<l:BlockLayout>
-			<l:BlockLayoutRow>
-				<core:Fragment id="footerFragment" fragmentName="sap.ui.documentation.sdk.view.Footer" type="XML" />
-			</l:BlockLayoutRow>
-		</l:BlockLayout>
+		<core:Fragment id="footerFragment" fragmentName="sap.ui.documentation.sdk.view.Footer" type="XML" />
 	</Page>
 </mvc:View>

package/src/sap/ui/documentation/sdk/view/TopicDetailInitial.view.xml

@@ -236,10 +236,6 @@
 			</l:BlockLayout>
 		</Panel>
 
-		<l:BlockLayout>
-			<l:BlockLayoutRow>
-				<core:Fragment id="footerFragment" fragmentName="sap.ui.documentation.sdk.view.Footer" type="XML" />
-			</l:BlockLayoutRow>
-		</l:BlockLayout>
+		<core:Fragment id="footerFragment" fragmentName="sap.ui.documentation.sdk.view.Footer" type="XML" />
 	</Page>
 </mvc:View>