remove-w2ui: convert status bar to JSDialog

- move plain html controls into HTMLContent widget - reuse scrollable bar from notebookbar - use dynamically loaded menu entries in MenuButton - allow to update MenuButton which contains menu id in the id Signed-off-by: Szymon Kłos <szymon.klos@collabora.com> Change-Id: I2b77479520c03420fefeb32dd09d6b34279e5686
2024-03-24 09:27:50 +01:00 · 2024-03-24 09:27:50 +01:00 · 6a452d9023
parent a091d1970c
commit 6a452d9023
34 changed files with 720 additions and 595 deletions
--- a/browser/css/cool.css
+++ b/browser/css/cool.css
@ -390,6 +390,7 @@ nav.spreadsheet-color-indicator ~ #sidebar-dock-wrapper {
 }

 #search-input {
+	min-width: 100px;
 	width: 200px;
 	height: 22px;
 	background: var(--color-background-lighter);
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@ -1654,8 +1654,11 @@ input[type='number']:hover::-webkit-outer-spin-button {

 /* toolbuttons */

-.jsdialog .ui-content.unobutton {
+.jsdialog:not(.menubutton) > .ui-content.unobutton {
 	width: var(--btn-size);
+}
+
+.jsdialog .ui-content.unobutton {
 	height: var(--btn-size);
 	padding: 0px;
 	vertical-align: middle;
@ -1731,7 +1734,6 @@ input[type='number']:hover::-webkit-outer-spin-button {
 	overflow: -moz-scrollbars-none; /* Firefox < 64 */
 	-ms-overflow-style: none;  /* Internet Explorer 10+ */
 	display: flex;
-	height: 72px;
 	align-items: center;
 }

--- a/browser/css/toolbar.css
+++ b/browser/css/toolbar.css
@ -33,45 +33,42 @@
 	to { left: 100%; }
 }

+/* status bar / mobile bottom bar */
+
 #toolbar-down {
-	left: 0;
-	right: 0;
-	text-align: center;
+	position: sticky;
 	padding: 0;
-	bottom: 0;
 	z-index: 11;
 	border-top: 1px solid var(--color-border);
-	display: block;
 }
-#toolbar-down *{
-	font-family: var(--cool-font);
-	color: var(--color-main-text);
+#toolbar-down > div > div {
+	display: flex;
+	padding: 0px 5px;
 }
 #toolbar-down .menubutton {
 	line-height: normal;
 }
 #toolbar-down .unotoolbutton,
-#toolbar-down .menubutton {
-	margin: auto;
+#toolbar-down .menubutton,
+#toolbar-down .ui-pushbutton,
+#toolbar-down .cool-font {
+	margin: auto 2px;
+	padding: 3px;
+	text-wrap: nowrap;
+	height: inherit;
+}
+#toolbar-down .unotoolbutton button {
+	width: inherit;
+	display: flex;
+}
+#toolbar-down .unotoolbutton .w2ui-icon {
+	width: var(--btn-size);
+	height: var(--btn-size);
+	margin: 0px;
 }
 #toolbar-down:not(.mobile) {
 	background-color: var(--color-main-background);
 }
-#tb_actionbar_item_LanguageStatus table table td:first-of-type{
-	min-width: max-content !important;
-}
-#tb_actionbar_item_LanguageStatus .w2ui-tb-caption{
-	float: none;
-}
-#toolbar-down.readonly #tb_actionbar_item_LanguageStatus .w2ui-button .w2ui-tb-down {
-	display: none;
-}
-#toolbar-down.readonly #tb_actionbar_item_LanguageStatus .w2ui-button {
-	border-color: transparent !important;
-}
-#tb_actionbar_item_StateTableCellMenu .w2ui-tb-down {
-	padding: 4px;
-}
 #InsertMode.insert-mode-false,
 #PermissionMode.status-readonly-mode {
 	background-color: var(--color-warning);
@ -82,10 +79,10 @@
 	/* to do: replace hard coded px */
 	margin-top: 3px;
 }
-#tb_actionbar_item_zoom .w2ui-tb-caption{
+#toolbar-down #zoom {
 	min-width: 43px;
 }
-#tb_actionbar_item_zoom .w2ui-tb-caption::after {
+#toolbar-down #zoom .unolabel::after {
 	content: '%';
 }

@ -100,14 +97,6 @@
 	border-top: 1px solid var(--color-border);
 }

-#tb_actionbar_item_prev .w2ui-icon.prev {
-	background: url('images/lc_prevrecord.svg') no-repeat center/24px;
-}
-
-#tb_actionbar_item_next .w2ui-icon.next {
-	background: url('images/lc_nextrecord.svg') no-repeat center/24px;
-}
-
 .w2ui-icon-check:before {
 	color: var(--color-primary);
 }
@ -158,13 +147,6 @@ w2ui-toolbar {
 .w2ui-overlay.bottom-arrow:after {
 	border-top-color: var(--color-background-lighter);
 }
-#tb_actionbar_item_LanguageStatus .w2ui-button.checked .w2ui-tb-down > div,
-#tb_actionbar_item_StateTableCellMenu .w2ui-button.checked .w2ui-tb-down > div,
-#tb_actionbar_item_zoom .w2ui-button.checked .w2ui-tb-down > div {
-	border-color: transparent;
-	border-bottom: 5px solid var(--color-text-dark);
-	margin-top: -5px;
-}

 #presentation-toolbar {
 	bottom: 0;
@ -210,6 +192,9 @@ w2ui-toolbar {
 	background-color: var(--color-background-dark);
 	box-shadow: 0px 0px 7px var(--color-box-shadow);
 }
+.notebookbar-scroll-wrapper {
+	height: 72px;
+}
 #toolbar-wrapper.hasnotebookbar .w2ui-scroll-left,
 #toolbar-wrapper.hasnotebookbar .w2ui-scroll-right {
 	/* .notebookbar-scroll-wrapper's height */
@ -362,13 +347,6 @@ td[id^='tb_editbar_item_sidebar']{
 	background-color: var(--color-background-darker);
 }

-#tb_actionbar_item_left {
-	width: 45%;
-}
-#tb_actionbar_item_right {
-	width: 100%;
-}
-
 #tb_searchbar_item_left {
 	width: 95%;
 }
@ -1044,11 +1022,9 @@ button.leaflet-control-search-next
 .w2ui-icon.insertpage{ background: url('images/lc_insertpage.svg') no-repeat center; }
 .w2ui-icon.conditionalformatdialog{ background: url('images/lc_conditionalformatmenu.svg') no-repeat center; }
 .w2ui-icon.search{ background: url('images/sc_recsearch.svg') no-repeat center; }
-.w2ui-icon.next{ background: url('images/lc_downsearch.svg') no-repeat center; }
 .w2ui-icon.presentation{ background: url('images/lc_dia.svg') no-repeat center; }
 .w2ui-icon.sign_ok{ background: url('images/sign_ok.svg') no-repeat center; }
 .w2ui-icon.sign_not_ok{ background: url('images/sign_not_ok.svg') no-repeat center; }
-.w2ui-icon.prev{ background: url('images/lc_upsearch.svg') no-repeat center; }
 .w2ui-icon.save{ background: url('images/lc_save.svg') no-repeat center; }
 .w2ui-icon.saveas{ background: url('images/lc_saveas.svg') no-repeat center; }
 .w2ui-icon.savemodified{ background: url('images/savemodified_large.svg') no-repeat center; }
@ -1339,11 +1315,9 @@ button.leaflet-control-search-next
 [data-theme='dark'] .w2ui-icon.insertsheet{ background: url('images/dark/plus.svg') no-repeat center; }
 [data-theme='dark'] .w2ui-icon.conditionalformatdialog{ background: url('images/dark/lc_conditionalformatmenu.svg') no-repeat center; }
 [data-theme='dark'] .w2ui-icon.search{ background: url('images/dark/sc_recsearch.svg') no-repeat center; }
-[data-theme='dark'] .w2ui-icon.next{ background: url('images/dark/lc_downsearch.svg') no-repeat center; }
 [data-theme='dark'] .w2ui-icon.presentation{ background: url('images/dark/lc_dia.svg') no-repeat center; }
 [data-theme='dark'] .w2ui-icon.sign_ok{ background: url('images/dark/sign_ok.svg') no-repeat center; }
 [data-theme='dark'] .w2ui-icon.sign_not_ok{ background: url('images/dark/sign_not_ok.svg') no-repeat center; }
-[data-theme='dark'] .w2ui-icon.prev{ background: url('images/dark/lc_upsearch.svg') no-repeat center; }
 [data-theme='dark'] .w2ui-icon.save{ background: url('images/dark/lc_save.svg') no-repeat center; }
 [data-theme='dark'] .w2ui-icon.saveas{ background: url('images/dark/lc_saveas.svg') no-repeat center; }
 [data-theme='dark'] .w2ui-icon.savemodified{ background: url('images/dark/savemodified_large.svg') no-repeat center; }
@ -1417,14 +1391,6 @@ button.leaflet-control-search-next
 [data-theme='dark'] .w2ui-icon.frame11 { background: url('images/dark/fr011.svg') no-repeat center; }
 [data-theme='dark'] .w2ui-icon.frame12 { background: url('images/dark/fr012.svg') no-repeat center; }

-[data-theme='dark'] #tb_actionbar_item_prev .w2ui-icon.prev {
-	background: url('images/dark/lc_prevrecord.svg') no-repeat center/24px;
-}
-
-[data-theme='dark'] #tb_actionbar_item_next .w2ui-icon.next {
-	background: url('images/dark/lc_nextrecord.svg') no-repeat center/24px;
-}
-
 [data-theme='dark'] .Open_Local_Editor {
 	filter: invert(1);
 }
--- a/browser/images/lc_next.svg
+++ b/browser/images/lc_next.svg
@ -0,0 +1,13 @@
+<?xml-stylesheet type="text/css" href="icons.css" ?>
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g id="background"
+	 class="icn icn--text-color"
+     fill="none"
+     stroke="#696969"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width="2"
+     >
+      <path d="m 8,5 8,7 -8,7" />
+  </g>
+</svg>
--- a/browser/images/lc_prev.svg
+++ b/browser/images/lc_prev.svg
@ -0,0 +1,13 @@
+<?xml-stylesheet type="text/css" href="icons.css" ?>
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g id="background"
+	 class="icn icn--text-color"
+     fill="none"
+     stroke="#696969"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width="2"
+     >
+      <path d="m 16,5 -8,7 8,7" />
+  </g>
+</svg>
--- a/browser/images/lc_searchnext.svg
+++ b/browser/images/lc_searchnext.svg
@ -0,0 +1,13 @@
+<?xml-stylesheet type="text/css" href="icons.css" ?>
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g id="background"
+	 class="icn icn--text-color"
+     fill="none"
+     stroke="#696969"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width="2"
+     >
+      <path d="M 19,8 12,16 5,8" />
+  </g>
+</svg>
--- a/browser/images/lc_searchprev.svg
+++ b/browser/images/lc_searchprev.svg
@ -0,0 +1,13 @@
+<?xml-stylesheet type="text/css" href="icons.css" ?>
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g id="background"
+	 class="icn icn--text-color"
+     fill="none"
+     stroke="#696969"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width="2"
+     >
+      <path d="M 19,16 12,8 5,16" />
+  </g>
+</svg>
--- a/browser/images/lc_userslistmenu.svg
+++ b/browser/images/lc_userslistmenu.svg
@ -0,0 +1 @@
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m9 1c-1.746 0-3 1.43-3 2.8 0 1.4.1 2.4.8 3.5.224.29.485.35.7.6.135.5.24 1 .1 1.5-.436.153-.85.332-1.27.5-.51-.273-1.1-.5-1.61-.7-.07-.28-.02-.487.05-.75.12-.125.23-.18.36-.3.37-.45.39-1.21.39-1.75 0-.8-.72-1.4-1.5-1.4-.87 0-1.5.72-1.5 1.4h-.02c0 .7.05 1.2.4 1.75.1.15.242.175.35.3.0674.25.121.5.05.75-.64.223-1.244.5-1.8.8-.42.3-.233.182-.5 1.15-.124.5 1.3.73 2.32.81-.05.275-.12.64-.32 1.34-.32 1.25 4.353 1.7 6 1.7 2.43 0 6.313-.456 5.98-1.7-.52-1.94-.208-1.71-.98-2.3-1.09-.654-2.452-1.167-3.6-1.6-.15-.557-.04-.97.1-1.5.235-.25.5-.36.72-.6.69-.884.78-2.424.78-3.5 0-1.586-1.43-2.8-3-2.8z" fill="#555"/></svg>
--- a/browser/src/control/Control.JSDialogBuilder.js
+++ b/browser/src/control/Control.JSDialogBuilder.js
@ -2144,6 +2144,8 @@ L.Control.JSDialogBuilder = L.Control.extend({
 			'downloadas-pdf': 'exportpdf',
 			'downloadas-direct-pdf': 'exportdirectpdf',
 			'downloadas-epub': 'exportepub',
+			'languagestatusmenu': 'languagemenu',
+			'cancelsearch': 'cancel'
 		};
 		if (iconURLAliases[cleanName]) {
 			cleanName = iconURLAliases[cleanName];
@ -2246,14 +2248,20 @@ L.Control.JSDialogBuilder = L.Control.extend({
 			if (hasPopUp)
 				button.setAttribute('aria-haspopup', true);

-			var buttonImage = L.DomUtil.create('img', '', button);
-			if (data.icon) {
+			if (data.w2icon) {
+				// FIXME: DEPRECATED, this is legacy way to setup icon based on CSS class
+				var buttonImage = L.DomUtil.create('div', 'w2ui-icon ' + data.w2icon, button);
+			}
+			else if (data.icon) {
+				buttonImage = L.DomUtil.create('img', '', button);
 				this._isStringCloseToURL(data.icon) ? buttonImage.src = data.icon : L.LOUtil.setImage(buttonImage, data.icon, builder.map);
 			}
 			else if (data.image) {
+				buttonImage = L.DomUtil.create('img', '', button);
 				buttonImage.src =  data.image;
 			}
 			else {
+				buttonImage = L.DomUtil.create('img', '', button);
 				L.LOUtil.setImage(buttonImage, builder._createIconURL(data.command), builder.map);
 			}

@ -2948,9 +2956,13 @@ L.Control.JSDialogBuilder = L.Control.extend({
 	},

 	_updateWidgetImpl: function (container, data, buildFunc) {
-		var control = container.querySelector('[id=\'' + data.id + '\']');
+		var elementId = data.id;
+		var separatorPos = elementId.indexOf(':'); // delete menuId
+		if (separatorPos > 0)
+			elementId = elementId.substr(0, separatorPos);
+		var control = container.querySelector('[id=\'' + elementId + '\']');
 		if (!control) {
-			window.app.console.warn('jsdialogupdate: not found control with id: "' + data.id + '"');
+			window.app.console.warn('jsdialogupdate: not found control with id: "' + elementId + '"');
 			return;
 		}

@ -2971,7 +2983,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		var backupGridSpan = control.style.gridColumn;
 		L.DomUtil.remove(control);

-		var newControl = container.querySelector('[id=\'' + data.id + '\']');
+		var newControl = container.querySelector('[id=\'' + elementId + '\']');
 		if (newControl) {
 			newControl.scrollTop = scrollTop;
 			newControl.style.gridColumn = backupGridSpan;
--- a/browser/src/control/Control.StatusBar.js
+++ b/browser/src/control/Control.StatusBar.js
@ -12,7 +12,7 @@
 * L.Control.StatusBar
 */

-/* global $ app w2ui _ _UNO */
+/* global $ app JSDialog _ _UNO */
 L.Control.StatusBar = L.Control.extend({

 	initialize: function () {
@ -20,20 +20,25 @@ L.Control.StatusBar = L.Control.extend({

 	onAdd: function (map) {
 		this.map = map;
+		this.parentContainer = document.getElementById('toolbar-down');
+		this.builder = new L.control.jsDialogBuilder(
+			{
+				mobileWizard: this,
+				map: this.map,
+				cssClass: 'jsdialog',
+				callback: this.callback.bind(this)
+			});
+
+		this.create();
+
 		map.on('doclayerinit', this.onDocLayerInit, this);
 		map.on('languagesupdated', this.onLanguagesUpdated, this);
 		map.on('commandstatechanged', this.onCommandStateChanged, this);
 		map.on('contextchange', this.onContextChange, this);
 		map.on('updatepermission', this.onPermissionChanged, this);
 		map.on('updatestatepagenumber', this.onPageChange, this);
-		this.create();
-
-		$(window).resize(function() {
-			if ($(window).width() !== map.getSize().x) {
-				var statusbar = w2ui['actionbar'];
-				statusbar.resize();
-			}
-		});
+		map.on('search', this.onSearch, this);
+		map.on('zoomend', this.onZoomEnd, this);
 	},

 	hideTooltip: function(toolbar, id) {
@ -45,13 +50,6 @@ L.Control.StatusBar = L.Control.extend({
 		}
 	},

-	updateToolbarItem: function(toolbar, id, html) {
-		var item = toolbar.get(id);
-		if (item) {
-			item.html = html;
-		}
-	},
-
 	localizeStateTableCell: function(text) {
 		var stateArray = text.split(';');
 		var stateArrayLength = stateArray.length;
@ -74,195 +72,78 @@ L.Control.StatusBar = L.Control.extend({
 		return text;
 	},

-	_updateToolbarsVisibility: function(context) {
+	_updateToolbarsVisibility: function(/*context*/) {
 		var isReadOnly = this.map.isReadOnlyMode();
-		var statusbar = w2ui['actionbar'];
 		if (isReadOnly) {
-			statusbar.disable('LanguageStatus');
-			statusbar.hide('InsertMode');
-			statusbar.hide('break6');
-			statusbar.hide('StatusSelectionMode');
-			statusbar.hide('break7');
+			this.enableItem('languagestatus', false);
+			this.showItem('insertmode-container', false);
+			this.showItem('statusselectionmode-container', false);
 		} else {
-			statusbar.enable('LanguageStatus');
-			statusbar.show('InsertMode');
-			statusbar.show('break6');
-			statusbar.show('StatusSelectionMode');
-			statusbar.show('break7');
+			this.enableItem('languagestatus', true);
+			this.showItem('insertmode-container', true);
+			this.showItem('statusselectionmode-container', true);
 		}
-		window.updateVisibilityForToolbar(statusbar, context);
+		// TODO window.updateVisibilityForToolbar(statusbar, context);
 	},

 	onContextChange: function(event) {
 		this._updateToolbarsVisibility(event.context);
 	},

-	onClick: function(e, id, item, subItem) {
-		if ('actionbar' in w2ui && w2ui['actionbar'].get(id) !== null) {
-			var toolbar = w2ui['actionbar'];
-			item = toolbar.get(id);
-		}
-
-		this.map.preventKeyboardPopup(id);
-
-		if (item.disabled)
+	callback: function (objectType, eventType, object, data, builder) {
+		if (object.id === 'zoom') {
+			var selected = this._generateZoomItems().filter((item) => { return item.id === data; });
+			if (selected.length)
+				this.map.setZoom(selected[0].scale, null, true /* animate? */);
 			return;
-
-		var docLayer = this.map._docLayer;
-
-		if (item.uno) {
-			this.map.executeUnoAction(item);
-		}
-		else if (id === 'zoomin' && this.map.getZoom() < this.map.getMaxZoom()) {
-			this.map.zoomIn(1, null, true /* animate? */);
-		}
-		else if (id === 'zoomout' && this.map.getZoom() > this.map.getMinZoom()) {
-			this.map.zoomOut(1, null, true /* animate? */);
-		}
-		else if (item.scale) {
-			this.map.setZoom(item.scale, null, true /* animate? */);
-		}
-		else if (id === 'zoomreset') {
-			this.map.setZoom(this.map.options.zoom);
-		}
-		else if (id === 'prev' || id === 'next') {
-			if (docLayer._docType === 'text') {
-				this.map.goToPage(id);
+		} else if (object.id === 'StateTableCellMenu') {
+			// TODO: multi-selection
+			var selected = [];
+			if (data === '1') { // 'None' was clicked, remove all other options
+				selected = ['1'];
+			} else { // Something else was clicked, remove the 'None' option from the array
+				selected = [data];
 			}
-			else {
-				this.map.setPart(id);
+
+			var value = 0;
+			for (var it = 0; it < selected.length; it++) {
+				value = +value + parseInt(selected[it]);
 			}
-		}
-		else if (id === 'searchprev') {
-			this.map.search(L.DomUtil.get('search-input').value, true);
-		}
-		else if (id === 'searchnext') {
-			this.map.search(L.DomUtil.get('search-input').value);
-		}
-		else if (id === 'cancelsearch') {
-			this.map.cancelSearch();
-		}
-		else if (id.startsWith('StateTableCellMenu') && subItem) {
-			e.done(function () {
-				var menu = w2ui['actionbar'].get('StateTableCellMenu');
-				if (subItem.id === '1') { // 'None' was clicked, remove all other options
-					menu.selected = ['1'];
+
+			var command = {
+				'StatusBarFunc': {
+					type: 'unsigned short',
+					value: value
 				}
-				else { // Something else was clicked, remove the 'None' option from the array
-					var index = menu.selected.indexOf('1');
-					if (index > -1) {
-						menu.selected.splice(index, 1);
-					}
-				}
-				var value = 0;
-				for (var it = 0; it < menu.selected.length; it++) {
-					value = +value + parseInt(menu.selected[it]);
-				}
-				var command = {
-					'StatusBarFunc': {
-						type: 'unsigned short',
-						value: value
-					}
-				};
-				this.map.sendUnoCommand('.uno:StatusBarFunc', command);
-			}.bind(this));
+			};
+
+			this.map.sendUnoCommand('.uno:StatusBarFunc', command);
+			return;
 		}
-		else if (id === 'userlist') {
-			this.map.fire('openuserlist');
-		}
-		else if (id === 'signstatus') {
-			this.map.sendUnoCommand('.uno:Signature');
-		}
-		else if (subItem && subItem.id === 'morelanguages') {
-			this.map.fire('morelanguages', { applyto: 'all' });
-		}
-		else if (subItem && subItem.id === 'langpara') {
-			this.map.fire('morelanguages', { applyto: 'paragraph' });
-		}
-		else if (subItem && subItem.id === 'langselection') {
-			this.map.fire('morelanguages', { applyto: 'selection' });
+
+		this.builder._defaultCallbackHandler(objectType, eventType, object, data, builder);
+	},
+
+	onSearch: function(e) {
+		var searchInput = L.DomUtil.get('search-input');
+		if (e.count === 0) {
+			this.enableItem('searchprev', false);
+			this.enableItem('searchnext', false);
+			this.showItem('cancelsearch', false);
+			L.DomUtil.addClass(searchInput, 'search-not-found');
+			$('#findthis').addClass('search-not-found');
+			this.map.resetSelection();
+			setTimeout(function () {
+				$('#findthis').removeClass('search-not-found');
+				L.DomUtil.removeClass(searchInput, 'search-not-found');
+			}, 800);
 		}
 	},
-	onPageChange: function(e) {
-		var statusbar = w2ui['actionbar'];
-		var state = e.state;
-		state = this.toLocalePattern('Page %1 of %2', 'Page (\\d+) of (\\d+)', state, '%1', '%2');
-		this.updateToolbarItem(statusbar, 'StatePageNumber', $('#StatePageNumber').html(state ? state : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp').parent().html());
-	},
-	create: function() {
-		var toolbar = $('#toolbar-down');
-		var that = this;

-		if (!window.mode.isMobile()) {
-			toolbar.w2toolbar({
-				name: 'actionbar',
-				items: [
-					{type: 'html',  id: 'search',
-						html: '<div class="cool-font">' +
-					'<label for="search-input" class="visuallyhidden" aria-hidden="false">Search:</label>' +
-					'<input size="15" id="search-input" placeholder="' + _('Search') + '"' +
-					'style="padding: 3px; border-radius: var(--border-radius); border: 1px solid var(--color-border)"/>' +
-					'</div>'
-					},
-					{type: 'button',  id: 'searchprev', img: 'prev', hint: _UNO('.uno:UpSearch'), disabled: true},
-					{type: 'button',  id: 'searchnext', img: 'next', hint: _UNO('.uno:DownSearch'), disabled: true},
-					{type: 'button',  id: 'cancelsearch', img: 'cancel', hint: _('Cancel the search'), hidden: true},
-					{type: 'html',  id: 'left'},
-					{type: 'html',  id: 'right'},
-					{type: 'drop', id: 'userlist', img: 'users', hidden: true, html: L.control.createUserListWidget()},
-					{type: 'break', id: 'userlistbreak', hidden: true, mobile: false },
-					{type: 'button',  id: 'prev', img: 'prev', hint: _UNO('.uno:PageUp', 'text')},
-					{type: 'button',  id: 'next', img: 'next', hint: _UNO('.uno:PageDown', 'text')},
-					{type: 'break', id: 'prevnextbreak'},
-				].concat(window.mode.isTablet() ? [] : [
-					{type: 'button',  id: 'zoomreset', img: 'zoomreset', hint: _('Reset zoom')},
-					{type: 'button',  id: 'zoomout', img: 'zoomout', hint: _UNO('.uno:ZoomMinus')},
-					{type: 'menu-radio', id: 'zoom', text: '100',
-						selected: 'zoom100',
-						mobile: false,
-						items: [
-							{ id: 'zoom20', text: '20', scale: 1},
-							{ id: 'zoom25', text: '25', scale: 2},
-							{ id: 'zoom30', text: '30', scale: 3},
-							{ id: 'zoom35', text: '35', scale: 4},
-							{ id: 'zoom40', text: '40', scale: 5},
-							{ id: 'zoom50', text: '50', scale: 6},
-							{ id: 'zoom60', text: '60', scale: 7},
-							{ id: 'zoom70', text: '70', scale: 8},
-							{ id: 'zoom85', text: '85', scale: 9},
-							{ id: 'zoom100', text: '100', scale: 10},
-							{ id: 'zoom120', text: '120', scale: 11},
-							{ id: 'zoom150', text: '150', scale: 12},
-							{ id: 'zoom175', text: '175', scale: 13},
-							{ id: 'zoom200', text: '200', scale: 14},
-							{ id: 'zoom235', text: '235', scale: 15},
-							{ id: 'zoom280', text: '280', scale: 16},
-							{ id: 'zoom335', text: '335', scale: 17},
-							{ id: 'zoom400', text: '400', scale: 18},
-						]
-					},
-					{type: 'button',  id: 'zoomin', img: 'zoomin', hint: _UNO('.uno:ZoomPlus')}
-				]),
-				onClick: function (e) {
-					that.hideTooltip(this, e.target);
-					that.onClick(e, e.target, e.item, e.subItem);
-				},
-				onRefresh: function() {
-					$('#tb_actionbar_item_userlist .w2ui-tb-caption').addClass('cool-font');
-					window.setupSearchInput();
-				}
-			});
-			this.map.uiManager.enableTooltip(toolbar);
-		}
-
-		toolbar.bind('touchstart', function() {
-			w2ui['actionbar'].touchStarted = true;
-		});
-
-		this.map.on('zoomend', function () {
-			var zoomPercent = 100;
-			var zoomSelected = null;
-			switch (that.map.getZoom()) {
+	onZoomEnd: function() {
+		var zoomPercent = 100;
+		var zoomSelected = null;
+		switch (this.map.getZoom()) {
 			case 1:  zoomPercent =  20; zoomSelected = 'zoom20'; break;  // 0.2102
 			case 2:  zoomPercent =  25; zoomSelected = 'zoom25'; break;  // 0.2500
 			case 3:  zoomPercent =  30; zoomSelected = 'zoom30'; break;  // 0.2973
@ -283,179 +164,244 @@ L.Control.StatusBar = L.Control.extend({
 			case 17: zoomPercent = 335; zoomSelected = 'zoom335'; break; // 3.3636
 			case 18: zoomPercent = 400; zoomSelected = 'zoom400'; break; // 4
 			default:
-				var zoomRatio = that.map.getZoomScale(that.map.getZoom(), that.map.options.zoom);
+				var zoomRatio = this.map.getZoomScale(this.map.getZoom(), this.map.options.zoom);
 				zoomPercent = Math.round(zoomRatio * 100);
-				break;
-			}
-			w2ui['actionbar'].set('zoom', {text: zoomPercent, selected: zoomSelected});
-		});
+			break;
+		}
+
+		this.builder.updateWidget(this.parentContainer,
+			{
+				id: 'zoom',
+				type: 'menubutton',
+				text: '' + zoomPercent,
+				selected: zoomSelected,
+				menu: this._generateZoomItems()
+			});
+	},
+
+	onPageChange: function(e) {
+		var state = e.state;
+		state = this.toLocalePattern('Page %1 of %2', 'Page (\\d+) of (\\d+)', state, '%1', '%2');
+		this.updateHtmlItem('StatePageNumber', state ? state : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp');
+	},
+
+	_generateHtmlItem(id) {
+		var isReadOnlyMode = app.map ? app.map.isReadOnlyMode() : true;
+		var canUserWrite = !app.isReadOnly();
+
+		return {
+			type: 'container',
+			id: id + '-container',
+			children: [
+				{type: 'htmlcontent', id: id, htmlId: id, text: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp', isReadOnlyMode: isReadOnlyMode, canUserWrite: canUserWrite},
+				{type: 'separator', id: id + 'break', orientation: 'vertical'}
+			],
+			vertical: false,
+			visible: false
+		};
+	},
+
+	_generateStateTableCellMenuItem(value, visible) {
+		var submenu = [
+			{id: '2', text: _('Average')},
+			{id: '8', text: _('CountA')},
+			{id: '4', text: _('Count')},
+			{id: '16', text: _('Maximum')},
+			{id: '32', text: _('Minimum')},
+			{id: '512', text: _('Sum')},
+			{id: '8192', text: _('Selection count')},
+			{id: '1', text: _('None')}
+		];
+		var selected = submenu.filter((item) => { return item.id === value; });
+		var text = selected.length ? selected[0].text : _('None');
+		return {type: 'menubutton', id: 'StateTableCellMenu', text: text, menu: submenu, visible: visible};
+	},
+
+	_generateZoomItems() {
+		return [
+			{ id: 'zoom20', text: '20', scale: 1},
+			{ id: 'zoom25', text: '25', scale: 2},
+			{ id: 'zoom30', text: '30', scale: 3},
+			{ id: 'zoom35', text: '35', scale: 4},
+			{ id: 'zoom40', text: '40', scale: 5},
+			{ id: 'zoom50', text: '50', scale: 6},
+			{ id: 'zoom60', text: '60', scale: 7},
+			{ id: 'zoom70', text: '70', scale: 8},
+			{ id: 'zoom85', text: '85', scale: 9},
+			{ id: 'zoom100', text: '100', scale: 10},
+			{ id: 'zoom120', text: '120', scale: 11},
+			{ id: 'zoom150', text: '150', scale: 12},
+			{ id: 'zoom175', text: '175', scale: 13},
+			{ id: 'zoom200', text: '200', scale: 14},
+			{ id: 'zoom235', text: '235', scale: 15},
+			{ id: 'zoom280', text: '280', scale: 16},
+			{ id: 'zoom335', text: '335', scale: 17},
+			{ id: 'zoom400', text: '400', scale: 18},
+		];
+	},
+
+	create: function() {
+		if (this.parentContainer.firstChild)
+			return;
+
+		var data = [
+			{type: 'edit',  id: 'search-input', placeholder: _('Search'), text: ''},
+			{type: 'customtoolitem',  id: 'searchprev', command: 'searchprev', hint: _UNO('.uno:UpSearch'), disabled: true},
+			{type: 'customtoolitem',  id: 'searchnext', command: 'searchnext', hint: _UNO('.uno:DownSearch'), disabled: true},
+			{type: 'customtoolitem',  id: 'cancelsearch', command: 'cancelsearch', hint: _('Cancel the search'), visible: false},
+			{type: 'separator', id: 'searchbreak', orientation: 'vertical' },
+			this._generateHtmlItem('statusdocpos'), 					// spreadsheet
+			this._generateHtmlItem('rowcolselcount'), 					// spreadsheet
+			this._generateHtmlItem('statepagenumber'), 					// text
+			this._generateHtmlItem('statewordcount'), 					// text
+			this._generateHtmlItem('insertmode'),						// spreadsheet, text
+			this._generateHtmlItem('statusselectionmode'),				// text
+			this._generateHtmlItem('slidestatus'),						// presentation
+			this._generateHtmlItem('pagestatus'),						// drawing
+			{type: 'menubutton', id: 'languagestatus:LanguageStatusMenu'},	// spreadsheet, text, presentation
+			{type: 'separator', id: 'languagestatusbreak', orientation: 'vertical', visible: false}, // spreadsheet
+			this._generateHtmlItem('statetablecell'),					// spreadsheet
+			this._generateStateTableCellMenuItem('2', false),			// spreadsheet
+			{type: 'separator', id: 'statetablebreak', orientation: 'vertical', visible: false}, // spreadsheet
+			this._generateHtmlItem('permissionmode'),					// spreadsheet, text, presentation
+			{type: 'toolitem', id: 'signstatus', command: '.uno:Signature', w2icon: '', text: _UNO('.uno:Signature'), visible: false},
+			{type: 'spacer',  id: 'permissionspacer'},
+			{type: 'menubutton', id: 'userlist:UsersListMenu', visible: false},
+			{type: 'separator', id: 'userlistbreak', visible: false, orientation: 'vertical' },
+			{type: 'customtoolitem',  id: 'prev', command: 'prev', hint: _UNO('.uno:PageUp', 'text')},
+			{type: 'customtoolitem',  id: 'next', command: 'next', hint: _UNO('.uno:PageDown', 'text')},
+			{type: 'separator', id: 'prevnextbreak', orientation: 'vertical'},
+		].concat(window.mode.isTablet() ? [] : [
+			{type: 'customtoolitem',  id: 'zoomreset', command: 'zoomreset', hint: _('Reset zoom')},
+			{type: 'customtoolitem',  id: 'zoomout', command: 'zoomout', hint: _UNO('.uno:ZoomMinus')},
+			{type: 'menubutton', id: 'zoom', text: '100', selected: 'zoom100', menu: this._generateZoomItems()},
+			{type: 'customtoolitem',  id: 'zoomin', command: 'zoomin', hint: _UNO('.uno:ZoomPlus')}
+		]);
+
+		this.parentContainer.innerHTML = '';
+		this.builder.build(this.parentContainer, data);
+
+		this.onLanguagesUpdated();
+		window.setupSearchInput();
+		JSDialog.MakeScrollable(this.parentContainer, this.parentContainer.querySelector('div'));
+		JSDialog.RefreshScrollables();
 	},

 	onDocLayerInit: function () {
-		var statusbar = w2ui['actionbar'];
+		var showStatusbar = this.map.uiManager.getSavedStateOrDefault('ShowStatusbar');
+		if (showStatusbar)
+			this.map.uiManager.showStatusBar();
+		else
+			this.map.uiManager.hideStatusBar(true);
+
 		var docType = this.map.getDocType();
-		var isReadOnlyMode = this.map.isReadOnlyMode();
-		var canUserWrite = !app.isReadOnly();

 		switch (docType) {
 		case 'spreadsheet':
-			if (statusbar)
-				statusbar.remove('prev', 'next', 'prevnextbreak');
+			this.showItem('prev', false);
+			this.showItem('next', false);
+			this.showItem('prevnextbreak', false);

 			if (!window.mode.isMobile()) {
-				statusbar.insert('left', [
-					{type: 'break', id: 'break1'},
-					{
-						type: 'html', id: 'StatusDocPos',
-						html: '<div id="StatusDocPos" class="cool-font" title="' + _('Number of Sheets') + '" style="padding: 5px 5px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</div>'
-					},
-					{type: 'break', id: 'break2'},
-					{
-						type: 'html', id: 'RowColSelCount',
-						html: '<div id="RowColSelCount" class="cool-font" title="' + _('Selected range of cells') + '" style="padding: 5px 5px;line-height:0;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</div>'
-					},
-					{type: 'break', id: 'break3', tablet: false},
-					{
-						type: 'html', id: 'InsertMode', mobile: false, tablet: false,
-						html: '<div id="InsertMode" class="cool-font insert-mode-true" title="' + _('Entering text mode') + '" style="padding: 5px 5px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</div>'
-					},
-					{type: 'break', id: 'break4', tablet: false},
-					{type: 'menu-radio', id: 'LanguageStatus',
-						mobile: false
-					},
-					{type: 'break', id: 'break5', tablet: false},
-					{
-						type: 'html', id: 'StatusSelectionMode', mobile: false, tablet: false,
-						html: '<div id="StatusSelectionMode" class="cool-font" title="' + _('Selection Mode') + '" style="padding: 5px 5px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</div>'
-					},
-					{type: 'break', id: 'break8', mobile: false, tablet: false},
-					{
-						type: 'html', id: 'StateTableCell', mobile: false, tablet: false,
-						html: '<div id="StateTableCell" class="cool-font" title="' + _('Choice of functions') + '" style="padding: 5px 5px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</div>'
-					},
-					{
-						type: 'menu-check', id: 'StateTableCellMenu', caption: '', selected: ['2', '512'], items: [
-							{id: '2', text: _('Average')},
-							{id: '8', text: _('CountA')},
-							{id: '4', text: _('Count')},
-							{id: '16', text: _('Maximum')},
-							{id: '32', text: _('Minimum')},
-							{id: '512', text: _('Sum')},
-							{id: '8192', text: _('Selection count')},
-							{id: '1', text: _('None')}
-						], tablet: false
-					},
-					{type: 'break', id: 'break9', mobile: false},
-					{
-						type: 'html', id: 'PermissionMode', mobile: false, tablet: true,
-						html: this._getPermissionModeHtml(isReadOnlyMode, canUserWrite)
-					}
-				]);
+				this.showItem('statusdocpos-container', true);
+				this.showItem('rowcolselcount-container', true);
+				this.showItem('insertmode-container', true);
+				this.showItem('statusselectionmode-container', true);
+				this.showItem('languagestatus', true);
+				this.showItem('languagestatusbreak', true);
+				this.showItem('statetablecell-container', true);
+				this.showItem('StateTableCellMenu', true);
+				this.showItem('statetablebreak', true);
+				this.showItem('permissionmode-container', true);
 			}
 			break;

 		case 'text':
 			if (!window.mode.isMobile()) {
-				statusbar.insert('left', [
-					{type: 'break', id: 'break1'},
-					{
-						type: 'html', id: 'StatePageNumber',
-						html: '<div id="StatePageNumber" class="cool-font" title="' + _('Number of Pages') + '" style="padding: 5px 5px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</div>'
-					},
-					{type: 'break', id: 'break2'},
-					{
-						type: 'html', id: 'StateWordCount', mobile: false, tablet: false,
-						html: '<div id="StateWordCount" class="cool-font" title="' + _('Word Counter') + '" style="padding: 5px 5px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</div>'
-					},
-					{type: 'break', id: 'break5', mobile: false, tablet: false},
-					{
-						type: 'html', id: 'InsertMode', mobile: false, tablet: false,
-						html: '<div id="InsertMode" class="cool-font insert-mode-true" title="' + _('Entering text mode') + '" style="padding: 5px 5px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</div>'
-					},
-					{type: 'break', id: 'break6', mobile: false, tablet: false},
-					{
-						type: 'html', id: 'StatusSelectionMode', mobile: false, tablet: false,
-						html: '<div id="StatusSelectionMode" class="cool-font" title="' + _('Selection Mode') + '" style="padding: 5px 5px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</div>'
-					},
-					{type: 'break', id: 'break7', mobile: false, tablet: false},
-					{type: 'menu-radio', id: 'LanguageStatus',
-						mobile: false
-					},
-					{type: 'break', id: 'break8', mobile: false},
-					{
-						type: 'html', id: 'PermissionMode', mobile: false, tablet: true,
-						html: this._getPermissionModeHtml(isReadOnlyMode, canUserWrite)
-					}
-				]);
+				this.showItem('statepagenumber-container', true);
+				this.showItem('statewordcount-container', true);
+				this.showItem('insertmode-container', true);
+				this.showItem('statusselectionmode-container', true);
+				this.showItem('languagestatus', true);
+				this.showItem('languagestatusbreak', true);
+				this.showItem('permissionmode-container', true);
 			}
 			break;

 		case 'presentation':
 			if (!window.mode.isMobile()) {
-				statusbar.insert('left', [
-					{type: 'break', id: 'break1'},
-					{
-						type: 'html', id: 'PageStatus',
-						html: '<div id="PageStatus" class="cool-font" title="' + _('Number of Slides') + '" style="padding: 5px 5px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</div>'
-					},
-					{type: 'break', id: 'break2', mobile: false, tablet: false},
-					{type: 'menu-radio', id: 'LanguageStatus',
-						mobile: false
-					},
-					{type: 'break', id: 'break8', mobile: false},
-					{
-						type: 'html', id: 'PermissionMode', mobile: false, tablet: true,
-						html: this._getPermissionModeHtml(isReadOnlyMode, canUserWrite)
-					}
-				]);
+				this.showItem('slidestatus-container', true);
+				this.showItem('languagestatus', true);
+				this.showItem('languagestatusbreak', true);
+				this.showItem('permissionmode-container', true);
 			}
 			break;
 		case 'drawing':
 			if (!window.mode.isMobile()) {
-				statusbar.insert('left', [
-					{type: 'break', id: 'break1'},
-					{
-						type: 'html', id: 'PageStatus',
-						html: '<div id="PageStatus" class="cool-font" title="' + _('Number of Pages') + '" style="padding: 5px 5px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</div>'
-					},
-					{type: 'break', id: 'break2', mobile: false, tablet: false},
-					{type: 'menu-radio', id: 'LanguageStatus',
-						mobile: false
-					},
-					{type: 'break', id: 'break8', mobile: false},
-					{
-						type: 'html', id: 'PermissionMode', mobile: false, tablet: true,
-						html: this._getPermissionModeHtml(isReadOnlyMode, canUserWrite)
-					}
-				]);
+				this.showItem('pagestatus-container', true);
+				this.showItem('languagestatus', true);
+				this.showItem('languagestatusbreak', true);
+				this.showItem('permissionmode-container', true);
 			}
 			break;
 		}

 		this.map.fire('updateuserlistcount');

+		var language = app.map['stateChangeHandler'].getItemValue('.uno:LanguageStatus');
+		if (language)
+			this.updateLanguageItem(this.extractLanguageFromStatus(language));
+
 		this._updateToolbarsVisibility();
-
-		if (statusbar)
-			statusbar.refresh();
-
-		var showStatusbar = this.map.uiManager.getSavedStateOrDefault('ShowStatusbar');
-		if (showStatusbar)
-			this.map.uiManager.toggleStatusBar();
-		else
-			this.map.uiManager.hideStatusBar(true);
+		JSDialog.RefreshScrollables();
 	},

-	_getPermissionModeHtml: function(isReadOnlyMode, canUserWrite) {
-		var permissionModeDiv = '<div id="PermissionMode" class="cool-font ';
-		if (isReadOnlyMode && !canUserWrite) {
-			permissionModeDiv += ' status-readonly-mode" title="' + _('Permission Mode') + '" style="padding: 5px 5px;"> ' + _('Read-only') + ' </div>';
-		} else if (isReadOnlyMode && canUserWrite) {
-			permissionModeDiv += ' status-readonly-transient-mode" style="display: none;"></div>';
-		} else {
-			permissionModeDiv += ' status-edit-mode" title="' + _('Permission Mode') + '" style="padding: 5px 5px;"> ' + _('Edit') + ' </div>';
-		}
-		return permissionModeDiv;
+	show: function() {
+		this.parentContainer.style.display = '';
+		JSDialog.RefreshScrollables();
+	},
+
+	hide: function() {
+		this.parentContainer.style.display = 'none';
+	},
+
+	enableItem(command, enable) {
+		this.builder.executeAction(this.parentContainer, {
+			'control_id': command,
+			'action_type': enable ? 'enable' : 'disable'
+		});
+	},
+
+	showItem(command, show) {
+		this.builder.executeAction(this.parentContainer, {
+			'control_id': command,
+			'action_type': show ? 'show' : 'hide'
+		});
+
+		JSDialog.RefreshScrollables();
+	},
+
+	updateHtmlItem: function (id, text) {
+		this.builder.updateWidget(this.parentContainer, {
+			id: id,
+			type: 'htmlcontent',
+			htmlId: id.toLowerCase(),
+			text: text
+		});
+
+		JSDialog.RefreshScrollables();
+	},
+
+	updateLanguageItem: function (language) {
+		this.builder.updateWidget(this.parentContainer,
+			{type: 'menubutton', id: 'languagestatus:LanguageStatusMenu', noLabel: false, text: language});
+		JSDialog.RefreshScrollables();
+	},
+
+	showSigningItem: function (icon, text) {
+		this.builder.updateWidget(this.parentContainer,
+			{type: 'toolitem', id: 'signstatus', command: '.uno:Signature', w2icon: icon, text: text ? text : _UNO('.uno:Signature')});
+		JSDialog.RefreshScrollables();
 	},

 	onPermissionChanged: function(event) {
@ -465,11 +411,28 @@ L.Control.StatusBar = L.Control.extend({
 		} else {
 			$('#toolbar-down').removeClass('readonly');
 		}
-		$('#PermissionMode').parent().html(this._getPermissionModeHtml(isReadOnlyMode, !app.isReadOnly()));
+
+		this.builder.updateWidget(this.parentContainer, {
+			id: 'PermissionMode',
+			type: 'htmlcontent',
+			htmlId: 'permissionmode',
+			isReadOnlyMode: isReadOnlyMode,
+			canUserWrite: !app.isReadOnly()
+		});
+
+		JSDialog.RefreshScrollables();
+	},
+
+	extractLanguageFromStatus(state) {
+		var code = state;
+		var language = _(state);
+		var split = code.split(';');
+		if (split.length > 1)
+			language = _(split[0]);
+		return language;
 	},

 	onCommandStateChanged: function(e) {
-		var statusbar = w2ui['actionbar'];
 		var commandName = e.commandName;
 		var state = e.state;

@ -478,25 +441,19 @@ L.Control.StatusBar = L.Control.extend({

 		if (commandName === '.uno:StatusDocPos') {
 			state = this.toLocalePattern('Sheet %1 of %2', 'Sheet (\\d+) of (\\d+)', state, '%1', '%2');
-			this.updateToolbarItem(statusbar, 'StatusDocPos', $('#StatusDocPos').html(state ? state : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp').parent().html());
+			this.updateHtmlItem('StatusDocPos', state ? state : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp');
 		}
 		else if (commandName === '.uno:LanguageStatus') {
-			var code = state;
-			var language = _(state);
-			var split = code.split(';');
-			if (split.length > 1) {
-				language = _(split[0]);
-				code = split[1];
-			}
-			w2ui['actionbar'].set('LanguageStatus', {text: language, selected: language});
+			var language = this.extractLanguageFromStatus(state);
+			this.updateLanguageItem(language);
 		}
 		else if (commandName === '.uno:RowColSelCount') {
 			state = this.toLocalePattern('$1 rows, $2 columns selected', '(\\d+) rows, (\\d+) columns selected', state, '$1', '$2');
 			state = this.toLocalePattern('$1 of $2 records found', '(\\d+) of (\\d+) records found', state, '$1', '$2');
-			this.updateToolbarItem(statusbar, 'RowColSelCount', $('#RowColSelCount').html(state ? state : '<span class="ToolbarStatusInactive">&nbsp;' + _('Select multiple cells') + '&nbsp;</span>').parent().html());
+			this.updateHtmlItem('RowColSelCount', state ? state : '&nbsp;' + _('Select multiple cells') + '&nbsp;');
 		}
 		else if (commandName === '.uno:InsertMode') {
-			this.updateToolbarItem(statusbar, 'InsertMode', $('#InsertMode').html(state ? L.Styles.insertMode[state].toLocaleString() : '<span class="ToolbarStatusInactive">&nbsp;' + _('Insert mode: inactive') + '&nbsp;</span>').parent().html());
+			this.updateHtmlItem('InsertMode', state ? L.Styles.insertMode[state].toLocaleString() : '&nbsp;' + _('Insert mode: inactive') + '&nbsp;');

 			$('#InsertMode').removeClass();
 			$('#InsertMode').addClass('cool-font insert-mode-' + state);
@ -507,45 +464,41 @@ L.Control.StatusBar = L.Control.extend({
 				this.map.hyperlinkPopup = null;
 			}
 		}
-		else if (commandName === '.uno:StatusSelectionMode' ||
-				commandName === '.uno:SelectionMode') {
-			this.updateToolbarItem(statusbar, 'StatusSelectionMode', $('#StatusSelectionMode').html(state ? L.Styles.selectionMode[state].toLocaleString() : '<span class="ToolbarStatusInactive">&nbsp;' + _('Selection mode: inactive') + '&nbsp;</span>').parent().html());
+		else if (commandName === '.uno:StatusSelectionMode' || commandName === '.uno:SelectionMode') {
+			this.updateHtmlItem('StatusSelectionMode', state ? L.Styles.selectionMode[state].toLocaleString() : '&nbsp;' + _('Selection mode: inactive') + '&nbsp;');
 		}
 		else if (commandName == '.uno:StateTableCell') {
-			this.updateToolbarItem(statusbar, 'StateTableCell', $('#StateTableCell').html(state ? this.localizeStateTableCell(state) : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp').parent().html());
+			this.updateHtmlItem('StateTableCell', state ? this.localizeStateTableCell(state) : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp');
 		}
 		else if (commandName === '.uno:StatusBarFunc') {
-			var item = statusbar.get('StateTableCellMenu');
-			if (item) {
-				item.selected = [];
-				// Check 'None' even when state is 0
-				if (state === '0') {
-					state = 1;
-				}
-				for (var it = 0; it < item.items.length; it++) {
-					if (item.items[it].id & state) {
-						item.selected.push(item.items[it].id);
-					}
-				}
-			}
+			// Check 'None' even when state is 0
+			if (state === '0')
+				state = '1';
+
+			this.builder.updateWidget(this.parentContainer, this._generateStateTableCellMenuItem(state, true));
+			JSDialog.RefreshScrollables();
 		}
 		else if (commandName === '.uno:StatePageNumber') {
 			this.onPageChange(e);
+			return;
 		}
 		else if (commandName === '.uno:StateWordCount') {
 			state = this.toLocalePattern('%1 words, %2 characters', '([\\d,]+) words, ([\\d,]+) characters', state, '%1', '%2');
-			this.updateToolbarItem(statusbar, 'StateWordCount', $('#StateWordCount').html(state ? state : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp').parent().html());
+			this.updateHtmlItem('StateWordCount', state ? state : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp');
 		}
 		else if (commandName === '.uno:PageStatus') {
-			if (this.map.getDocType() === 'presentation')
+			if (this.map.getDocType() === 'presentation') {
 				state = this.toLocalePattern('Slide %1 of %2', 'Slide (\\d+) of (\\d+)', state, '%1', '%2');
-			else
+				this.updateHtmlItem('SlideStatus', state ? state : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp');
+			} else {
 				state = this.toLocalePattern('Page %1 of %2', 'Slide (\\d+) of (\\d+)', state, '%1', '%2');
-			this.updateToolbarItem(statusbar, 'PageStatus', $('#PageStatus').html(state ? state : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp').parent().html());
+				this.updateHtmlItem('PageStatus', state ? state : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp');
+			}
 		}
 	},

 	onLanguagesUpdated: function() {
+		var menuEntries = [];
 		var translated, neutral;
 		var constLang = '.uno:LanguageStatus?Language:string=';
 		var constDefault = 'Default_RESET_LANGUAGES';
@ -554,11 +507,7 @@ L.Control.StatusBar = L.Control.extend({
 		var noneLang = _('None (Do not check spelling)');
 		var languages = app.languages;

-		var toolbaritems = [];
-		toolbaritems.push({ text: noneLang,
-			id: 'nonelanguage',
-			uno: constLang + constNone });
-
+		menuEntries.push({id: 'nonelanguage', uno: constLang + constNone, text: noneLang});

 		for (var lang in languages) {
 			if (languages.length > 10 && app.favouriteLanguages.indexOf(languages[lang].iso) < 0)
@ -567,19 +516,18 @@ L.Control.StatusBar = L.Control.extend({
 			translated = languages[lang].translated;
 			neutral = languages[lang].neutral;
 			var splitNeutral = neutral.split(';');
-			toolbaritems.push({ id: neutral, text: translated, uno: constLang + encodeURIComponent('Default_' + splitNeutral[0]) });
+			menuEntries.push({id: neutral, text: translated, uno: constLang + encodeURIComponent('Default_' + splitNeutral[0])});
 		}

-		toolbaritems.push({ id: 'reset', text: resetLang, uno: constLang + constDefault });
-
-		toolbaritems.push({ id: 'morelanguages', text: _('Set Language for All text') });
+		menuEntries.push({id: 'reset', text: resetLang, uno: constLang + constDefault});
+		menuEntries.push({id: 'morelanguages', action: 'morelanguages-all', text: _('Set Language for All text')});

 		if (this.map.getDocType() === 'text') {
-			toolbaritems.push({ id: 'langpara', text: _('Set Language for Paragraph') });
-			toolbaritems.push({ id: 'langselection', text: _('Set Language for Selection') });
+			menuEntries.push({id: 'langpara', action: 'morelanguages-paragraph', text: _('Set Language for Paragraph')});
+			menuEntries.push({id: 'langselection', action: 'morelanguages-selection', text:  _('Set Language for Selection')});
 		}

-		w2ui['actionbar'].set('LanguageStatus', {items: toolbaritems});
+		JSDialog.MenuDefinitions.set('LanguageStatusMenu', menuEntries);
 	},
 });

--- a/browser/src/control/Control.Toolbar.js
+++ b/browser/src/control/Control.Toolbar.js
@ -18,23 +18,6 @@

 var map;

-function _cancelSearch() {
-	var toolbar = window.mode.isMobile() ? w2ui['searchbar'] : w2ui['actionbar'];
-	var searchInput = L.DomUtil.get('search-input');
-	map.resetSelection();
-	toolbar.hide('cancelsearch');
-	toolbar.disable('searchprev');
-	toolbar.disable('searchnext');
-	searchInput.value = '';
-	if (window.mode.isMobile()) {
-		searchInput.focus();
-		// odd, but on mobile we need to invoke it twice
-		toolbar.hide('cancelsearch');
-	}
-
-	map._onGotFocus();
-}
-
 function getUNOCommand(unoData) {
 	if (typeof unoData !== 'object')
 		return unoData;
@ -844,14 +827,25 @@ function unoCmdToToolbarId(commandname)
 }

 function updateSearchButtons() {
-	var toolbar = window.mode.isMobile() ? w2ui['searchbar'] : w2ui['actionbar'];
+	var toolbar = window.mode.isMobile() ? w2ui['searchbar'] : null;
+	var statusBar = app.map.statusBar;
 	// conditionally disabling until, we find a solution for tdf#108577
 	if (L.DomUtil.get('search-input').value === '') {
-		toolbar.disable('searchprev');
-		toolbar.disable('searchnext');
-		toolbar.hide('cancelsearch');
+		if (statusBar) {
+			statusBar.enableItem('searchprev', false);
+			statusBar.enableItem('searchnext', false);
+			statusBar.showItem('cancelsearch', false);
+		} else {
+			toolbar.disable('searchprev');
+			toolbar.disable('searchnext');
+			toolbar.hide('cancelsearch');
+		}
 	}
-	else {
+	else if (statusBar) {
+		statusBar.enableItem('searchprev', true);
+		statusBar.enableItem('searchnext', true);
+		statusBar.showItem('cancelsearch', true);
+	} else {
 		toolbar.enable('searchprev');
 		toolbar.enable('searchnext');
 		toolbar.show('cancelsearch');
@ -880,7 +874,7 @@ function onSearchKeyDown(e) {
 		entry.select();
 		e.originalEvent.preventDefault();
 	} else if (e.keyCode === 27) {
-		_cancelSearch();
+		map.cancelSearch();
 	}
 }

@ -1220,11 +1214,11 @@ function setupToolbar(e) {

 	map.on('search', function (e) {
 		var searchInput = L.DomUtil.get('search-input');
-		var toolbar = w2ui['actionbar'];
+		var toolbar = app.map.statusBar;
 		if (e.count === 0) {
-			toolbar.disable('searchprev');
-			toolbar.disable('searchnext');
-			toolbar.hide('cancelsearch');
+			toolbar.enableItem('searchprev', false);
+			toolbar.enableItem('searchnext', false);
+			toolbar.showItem('cancelsearch', false);
 			L.DomUtil.addClass(searchInput, 'search-not-found');
 			$('#findthis').addClass('search-not-found');
 			map.resetSelection();
--- a/browser/src/control/Control.UIManager.js
+++ b/browser/src/control/Control.UIManager.js
@ -885,7 +885,7 @@ L.Control.UIManager = L.Control.extend({

 	showStatusBar: function() {
 		$('#document-container').css('bottom', this.documentBottom);
-		$('#toolbar-down').show();
+		this.map.statusBar.show();
 		this.setSavedState('ShowStatusbar', true);
 		this.map.fire('statusbarchanged');
 	},
@ -896,7 +896,7 @@ L.Control.UIManager = L.Control.extend({

 		this.documentBottom = $('#document-container').css('bottom');
 		$('#document-container').css('bottom', '0px');
-		$('#toolbar-down').hide();
+		this.map.statusBar.hide();
 		if (!firstStart)
 			this.setSavedState('ShowStatusbar', false);
 		this.map.fire('statusbarchanged');
@ -915,7 +915,7 @@ L.Control.UIManager = L.Control.extend({
 	},

 	isStatusBarVisible: function() {
-		return $('#toolbar-down').is(':visible');
+		return document.getElementById('toolbar-down').style.display !== 'none';
 	},

 	// Event handlers
--- a/browser/src/control/Control.UserList.ts
+++ b/browser/src/control/Control.UserList.ts
@ -362,15 +362,6 @@ class UserList extends L.Control {
 	}

 	updateUserListCount() {
-		const userlistItem =
-			this.map.statusBar &&
-			this.map.statusBar.hasItem &&
-			this.map.statusBar.hasItem('userlist');
-
-		if (userlistItem == null) {
-			return;
-		}
-
 		const count = this.users.size;
 		let text = '';
 		if (count > 1) {
@ -381,15 +372,23 @@ class UserList extends L.Control {
 			text = this.options.noUser;
 		}

-		if (this.map.statusBar.setUsersCountText)
+		if (this.map.statusBar && this.map.statusBar.setUsersCountText)
 			this.map.statusBar.setUsersCountText(text);

-		if (!this.hideUserList() && count > 1 && !window.mode.isDesktop()) {
-			this.map.statusBar.showItem('userlist');
-			this.map.statusBar.showItem('userlistbreak');
+		if (!this.hideUserList() && count > 1) {
+			if (window.mode.isDesktop()) {
+				this.map.statusBar.showItem('userlist', true);
+				this.map.statusBar.showItem('userlistbreak', true);
+			} else {
+				var toolbar = w2ui['actionbar'];
+				toolbar.show('userlist');
+			}
+		} else if (window.mode.isDesktop()) {
+			this.map.statusBar.showItem('userlist', false);
+			this.map.statusBar.showItem('userlistbreak', false);
 		} else {
-			this.map.statusBar.hideItem('userlist');
-			this.map.statusBar.hideItem('userlistbreak');
+			var toolbar = w2ui['actionbar'];
+			toolbar.hide('userlist');
 		}
 	}

@ -405,11 +404,9 @@ class UserList extends L.Control {
 	}

 	onOpenUserList() {
+		// TODO: used on mobile, remove w2ui and it will be not needed
 		setTimeout(() => {
-			var docLayer = this.map._docLayer;
-			var viewId = docLayer._followThis;
-			var followUser = docLayer._followUser;
-			if (followUser) this.selectUser(viewId);
+			this.renderAll();
 		}, 100);
 	}

@ -466,22 +463,32 @@ class UserList extends L.Control {
 		const statusbarPopoverElement = document.getElementById('userlist-entries');
 		if (statusbarPopoverElement)
 			this.renderHeaderAvatarPopover(statusbarPopoverElement);
+		const mobilePopoverElement = document.getElementById(
+			'w2ui-overlay-actionbar',
+		);
+		if (mobilePopoverElement)
+			this.renderHeaderAvatarPopover(mobilePopoverElement);
 		this.renderFollowingChip();
 	}

 	showTooltip(text: string) {
-		// TODO: better placement, where it should appear?
-		const userList = $('#tb_actionbar_item_userlist');
+		const userList = $('#userListHeader');
 		if (userList) {
+			userList.get(0).title = text;
 			userList.tooltip({
 				content: text,
 			});
+			userList.tooltip('enable');
 			userList.tooltip('open');
 		}
 	}

 	hideTooltip() {
-		$('#tb_actionbar_item_userlist').tooltip('option', 'disabled', true);
+		const userList = $('#userListHeader');
+		if (userList) {
+			userList.get(0).title = undefined;
+			userList.tooltip('option', 'disabled', true);
+		}
 		$('#userListPopover').hide();
 	}

--- a/browser/src/control/Signing.js
+++ b/browser/src/control/Signing.js
@ -12,7 +12,7 @@
 * Document Signing
 */

-/* global _ w2ui*/
+/* global _ app w2ui*/

 L.Map.include({
 	onChangeSignStatus: function(signstatus) {
@ -51,7 +51,7 @@ L.Map.include({

 		if (statusText) {
 			if (!window.mode.isMobile())
-				w2ui['actionbar'].insert('prev', {type: 'button',  id: 'signstatus', img: statusIcon, hint: statusText});
+				app.map.statusBar.showSigningItem(statusIcon, statusText);
 			else
 				w2ui['actionbar'].insert('undo', {type: 'button',  id: 'signstatus', img: statusIcon, hint: statusText});
 		}
--- a/browser/src/control/Toolbar.js
+++ b/browser/src/control/Toolbar.js
@ -1004,12 +1004,19 @@ L.Map.include({
 	},

 	cancelSearch: function() {
-		var toolbar = window.mode.isMobile() ? w2ui['searchbar'] : w2ui['actionbar'];
+		var toolbar = window.mode.isMobile() ? w2ui['searchbar'] : null;
+		var statusBar = this.statusBar;
 		var searchInput = L.DomUtil.get('search-input');
 		this.resetSelection();
-		toolbar.hide('cancelsearch');
-		toolbar.disable('searchprev');
-		toolbar.disable('searchnext');
+		if (toolbar) {
+			toolbar.hide('cancelsearch');
+			toolbar.disable('searchprev');
+			toolbar.disable('searchnext');
+		} else if (statusBar) {
+			statusBar.showItem('cancelsearch', false);
+			statusBar.enableItem('searchprev', false);
+			statusBar.enableItem('searchnext', false);
+		}
 		searchInput.value = '';
 		if (window.mode.isMobile()) {
 			searchInput.focus();
@ -1080,15 +1087,17 @@ L.Map.include({
 		setTimeout(function() {
 			if ($('.leaflet-cursor').is(':visible'))
 				return;
-			var mobileTopBar = w2ui['actionbar'];
+			var mobileTopBar = window.mode.isMobile() ? w2ui['actionbar'] : null;
 			var jsdialogFormulabar = map.formulabar;

 			var target = window.mode.isMobile() ? mobileTopBar : jsdialogFormulabar;
 			target.hide('cancelformula');
 			target.hide('acceptformula');

-			mobileTopBar.show('undo');
-			mobileTopBar.show('redo');
+			if (mobileTopBar) {
+				mobileTopBar.show('undo');
+				mobileTopBar.show('redo');
+			}

 			$('#AutoSumMenu-button').css('margin-inline', '0');
 			$('#AutoSumMenu .unoarrow').css('margin', '0');
--- a/browser/src/control/jsdialog/Definitions.Menu.ts
+++ b/browser/src/control/jsdialog/Definitions.Menu.ts
@ -376,4 +376,10 @@ menuDefinitions.set('ColorPickerMenu', [
 	{ type: 'separator' }, // required to show dropdown arrow
 ] as Array<MenuDefinition>);

+menuDefinitions.set('LanguageStatusMenu', [
+	{ type: 'separator' },
+	{ type: 'separator' },
+	// dynamically updated in Constol.StatusBar
+] as Array<MenuDefinition>);
+
 JSDialog.MenuDefinitions = menuDefinitions;
--- a/browser/src/control/jsdialog/Widget.Combobox.js
+++ b/browser/src/control/jsdialog/Widget.Combobox.js
@ -35,7 +35,7 @@ JSDialog.comboboxEntry = function (parentContainer, data, builder) {

 	if (data.w2icon) {
 		// FIXME: DEPRECATED, this is legacy way to setup icon based on CSS class
-		L.DomUtil.create('div', 'ui-combobox-icon ' + data.w2icon, entry);
+		L.DomUtil.create('div', 'w2ui-icon ui-combobox-icon ' + data.w2icon, entry);
 	}

 	if (data.icon) {
--- a/browser/src/control/jsdialog/Widget.HTMLContent.ts
+++ b/browser/src/control/jsdialog/Widget.HTMLContent.ts
@ -21,11 +21,91 @@ interface HtmlContentJson {
 	type: 'htmlcontent';
 	htmlId: string;
 	closeCallback: EventListenerOrEventListenerObject;
+	isReadOnlyMode: boolean | undefined;
+	canUserWrite: boolean | undefined;
+	text: string | undefined;
+}
+
+function getPermissionModeHtml(isReadOnlyMode: boolean, canUserWrite: boolean) {
+	var permissionModeDiv =
+		'<div id="PermissionMode" class="cool-font jsdialog unotoolbutton ';
+	if (isReadOnlyMode && !canUserWrite) {
+		permissionModeDiv +=
+			' status-readonly-mode" title="' +
+			_('Permission Mode') +
+			'" style="padding: 5px 5px;"> ' +
+			_('Read-only') +
+			' </div>';
+	} else if (isReadOnlyMode && canUserWrite) {
+		permissionModeDiv +=
+			' status-readonly-transient-mode" style="display: none;"></div>';
+	} else {
+		permissionModeDiv +=
+			' status-edit-mode" title="' +
+			_('Permission Mode') +
+			'" style="padding: 5px 5px;"> ' +
+			_('Edit') +
+			' </div>';
+	}
+	return permissionModeDiv;
+}
+
+function getStatusbarItemHtml(id: string, title: string, text: string) {
+	return (
+		'<div id="' +
+		id +
+		'" class="cool-font" title="' +
+		title +
+		'" style="padding: 5px 5px;">' +
+		text +
+		'</div>'
+	);
+}
+
+function getPageNumberHtml(text: string) {
+	return getStatusbarItemHtml('StatePageNumber', _('Number of Pages'), text);
+}
+
+function getWordCountHtml(text: string) {
+	return getStatusbarItemHtml('StateWordCount', _('Word Counter'), text);
+}
+
+function getStatusDocPosHtml(text: string) {
+	return getStatusbarItemHtml('StatusDocPos', _('Number of Sheets'), text);
+}
+
+function getInsertModeHtml(text: string) {
+	return getStatusbarItemHtml('InsertMode', _('Entering text mode'), text);
+}
+
+function getSelectionModeHtml(text: string) {
+	return getStatusbarItemHtml('StatusSelectionMode', _('Selection Mode'), text);
+}
+
+function getRowColSelCountHtml(text: string) {
+	return getStatusbarItemHtml(
+		'RowColSelCount',
+		_('Selected range of cells'),
+		text,
+	);
+}
+
+function getStateTableCellHtml(text: string) {
+	return getStatusbarItemHtml('StateTableCell', _('Choice of functions'), text);
+}
+
+function getSlideStatusHtml(text: string) {
+	return getStatusbarItemHtml('SlideStatus', _('Number of Slides'), text);
+}
+
+function getPageStatusHtml(text: string) {
+	return getStatusbarItemHtml('PageStatus', _('Number of Pages'), text);
 }

 var getHtmlFromId = function (
 	id: string,
 	closeCallback: EventListenerOrEventListenerObject,
+	data: HtmlContentJson,
 ) {
 	if (id === 'iconset')
 		return (window as any).getConditionalFormatMenuHtml('iconsetoverlay', true);
@ -48,6 +128,17 @@ var getHtmlFromId = function (
 	else if (id === 'insertconnectorspopup')
 		return (window as any).getConnectorsPopupHtml(closeCallback);
 	else if (id === 'userslistpopup') return L.control.createUserListWidget();
+	else if (id === 'permissionmode')
+		return getPermissionModeHtml(data.isReadOnlyMode, data.canUserWrite);
+	else if (id === 'statepagenumber') return getPageNumberHtml(data.text);
+	else if (id === 'statewordcount') return getWordCountHtml(data.text);
+	else if (id === 'statusdocpos') return getStatusDocPosHtml(data.text);
+	else if (id === 'insertmode') return getInsertModeHtml(data.text);
+	else if (id === 'statusselectionmode') return getSelectionModeHtml(data.text);
+	else if (id === 'rowcolselcount') return getRowColSelCountHtml(data.text);
+	else if (id === 'statetablecell') return getStateTableCellHtml(data.text);
+	else if (id === 'slidestatus') return getSlideStatusHtml(data.text);
+	else if (id === 'pagestatus') return getPageStatusHtml(data.text);
 };

 function htmlContent(
@ -55,7 +146,11 @@ function htmlContent(
 	data: HtmlContentJson,
 	builder: any,
 ) {
-	parentContainer.innerHTML = getHtmlFromId(data.htmlId, data.closeCallback);
+	parentContainer.innerHTML = getHtmlFromId(
+		data.htmlId,
+		data.closeCallback,
+		data,
+	);

 	// TODO: remove this and create real widget for userslistpopup
 	if (data.htmlId === 'userslistpopup')
--- a/browser/src/control/jsdialog/Widget.MenuButton.js
+++ b/browser/src/control/jsdialog/Widget.MenuButton.js
@ -65,13 +65,6 @@ function _menubuttonControl (parentContainer, data, builder) {
 		if (!data.command)
 			data.command = menuId;

-		if (menuEntries.length && menuEntries[0].type === 'colorpicker') {
-			// make copy and fill with information to identify color command
-			menuEntries = JSON.parse(JSON.stringify(menuEntries));
-			menuEntries[0].command = data.command;
-			menuEntries[0].id = data.id;
-		}
-
 		var options = {hasDropdownArrow: menuEntries.length > 1};
 		var control = builder._unoToolButton(parentContainer, data, builder, options);

@ -108,10 +101,18 @@ function _menubuttonControl (parentContainer, data, builder) {
 				return false;
 			};

-			if (menuEntries.length === 1) {
-				callback(null, 'selected', null, null, menuEntries[0]);
+			var freshMenu = builder._menus.get(menuId); // refetch to apply dynamic changes
+			if (freshMenu.length && freshMenu[0].type === 'colorpicker') {
+				// make copy and fill with information to identify color command
+				freshMenu = JSON.parse(JSON.stringify(freshMenu));
+				freshMenu[0].command = data.command;
+				freshMenu[0].id = data.id;
+			}
+
+			if (freshMenu.length === 1) {
+				callback(null, 'selected', null, null, freshMenu[0]);
 			} else {
-				JSDialog.OpenDropdown(dropdownId, control.container, menuEntries, callback);
+				JSDialog.OpenDropdown(dropdownId, control.container, freshMenu, callback);
 			}
 		};

--- a/browser/src/docdispatcher.ts
+++ b/browser/src/docdispatcher.ts
@ -112,6 +112,35 @@ class Dispatcher {
 		this.actionsMap['insertcomment'] = function () {
 			app.map.insertComment();
 		};
+
+		this.actionsMap['zoomin'] = () => {
+			app.map.zoomIn(1, null, true /* animate? */);
+		};
+		this.actionsMap['zoomout'] = () => {
+			app.map.zoomOut(1, null, true /* animate? */);
+		};
+		this.actionsMap['zoomreset'] = () => {
+			app.map.setZoom(app.map.options.zoom);
+		};
+
+		this.actionsMap['searchprev'] = () => {
+			app.map.search(L.DomUtil.get('search-input').value, true);
+		};
+		this.actionsMap['searchnext'] = () => {
+			app.map.search(L.DomUtil.get('search-input').value);
+		};
+		this.actionsMap['cancelsearch'] = () => {
+			app.map.cancelSearch();
+		};
+
+		this.actionsMap['prev'] = () => {
+			if (app.map._docLayer._docType === 'text') app.map.goToPage('prev');
+			else app.map.setPart('prev');
+		};
+		this.actionsMap['next'] = () => {
+			if (app.map._docLayer._docType === 'text') app.map.goToPage('next');
+			else app.map.setPart('next');
+		};
 	}

 	private addExportCommands() {
--- a/browser/src/unocommands.js
+++ b/browser/src/unocommands.js
@ -431,6 +431,7 @@ var unoCommandsArray = {
 	'Shrink':{global:{context:_('Decrease Font Size'),menu:_('Decrease Size'),},},
 	'Sidebar':{global:{menu:_('Sidebar'),},},
 	'SidebarDeck.ElementsDeck':{global:{menu:_('Open the Elements Deck'),},},
+	'Signature':{global:{menu:_('Digital Signatu~res...'),},},
 	'SlideChangeWindow':{presentation:{menu:_('Slide Transition'),},},
 	'SlideMenu':{presentation:{menu:_('S~lide'),},},
 	'SlideSetup':{presentation:{menu:_('Slide Properties...'),},},
--- a/cypress_test/integration_tests/common/desktop_helper.js
+++ b/cypress_test/integration_tests/common/desktop_helper.js
@ -168,7 +168,7 @@ function checkDialogAndClose(dialogTitle) {
 function shouldHaveZoomLevel(zoomLevel) {
 	cy.log('>> shouldHaveZoomLevel - start');

-	cy.cGet('#tb_actionbar_item_zoom .w2ui-tb-caption').should('have.text', zoomLevel);
+	cy.cGet('#toolbar-down #zoom .unolabel').should('have.text', zoomLevel);

 	cy.log('<< shouldHaveZoomLevel - end');
 }
@ -179,14 +179,14 @@ function shouldHaveZoomLevel(zoomLevel) {
 function makeZoomItemsVisible() {
 	cy.log('>> makeZoomItemsVisible - start');

-	cy.cGet('.w2ui-tb-image.w2ui-icon.zoomin')
+	cy.cGet('#toolbar-down #zoomin')
 		.then(function(zoomInItem) {
 			if (!Cypress.dom.isVisible(zoomInItem)) {
 				cy.cGet('#toolbar-down .w2ui-scroll-right').click();
 			}
 		});

-	cy.cGet('.w2ui-tb-image.w2ui-icon.zoomin').should('be.visible');
+	cy.cGet('#toolbar-down #zoomin').should('be.visible');

 	cy.log('<< makeZoomItemsVisible - end');
 }
@ -198,7 +198,7 @@ function doZoom(zoomIn) {
 	cy.log('>> doZoom - start');

 	var prevZoom = '';
-	cy.cGet('#tb_actionbar_item_zoom .w2ui-tb-caption')
+	cy.cGet('#toolbar-down #zoom .unolabel')
 		.should(function(zoomLevel) {
 			prevZoom = zoomLevel.text();
 			expect(prevZoom).to.not.equal('');
@ -206,15 +206,15 @@ function doZoom(zoomIn) {

 	// Force because sometimes the icons are scrolled off the screen to the right
 	if (zoomIn) {
-		cy.cGet('#tb_actionbar_item_zoomin .w2ui-button').click({force: true});
+		cy.cGet('#toolbar-down #zoomin').click({force: true});
 	} else {
-		cy.cGet('#tb_actionbar_item_zoomout .w2ui-button').click({force: true});
+		cy.cGet('#toolbar-down #zoomout').click({force: true});
 	}

 	// Wait for animation to complete
 	cy.wait(500);

-	cy.cGet('#tb_actionbar_item_zoom .w2ui-tb-caption')
+	cy.cGet('#toolbar-down #zoom .unolabel')
 		.should(function(zoomLevel) {
 			expect(zoomLevel.text()).to.not.equal(prevZoom);
 		});
@ -241,8 +241,9 @@ function selectZoomLevel(zoomLevel) {
 	cy.log('>> selectZoomLevel - start');

 	// Force because sometimes the icons are scrolled off the screen to the right
-	cy.cGet('#tb_actionbar_item_zoom .w2ui-button').click({force: true});
-	cy.cGet('#w2ui-overlay-actionbar').contains('.menu-text', zoomLevel).click({force: true});
+	makeZoomItemsVisible();
+	cy.cGet('#toolbar-down #zoom .arrowbackground').click({force: true});
+	cy.cGet('#zoom-dropdown').contains('.ui-combobox-entry', zoomLevel).click({force: true});
 	shouldHaveZoomLevel(zoomLevel);

 	cy.log('<< selectZoomLevel - end');
@ -253,7 +254,7 @@ function resetZoomLevel() {
 	cy.log('>> resetZoomLevel - start');

 	// Force because sometimes the icons are scrolled off the screen to the right
-	cy.cGet('#tb_actionbar_item_zoomreset .w2ui-button').click({force: true});
+	cy.cGet('#toolbar-down #zoomreset').click({force: true});
 	shouldHaveZoomLevel('100');

 	cy.log('<< resetZoomLevel - end');
--- a/cypress_test/integration_tests/common/search_helper.js
+++ b/cypress_test/integration_tests/common/search_helper.js
@ -37,9 +37,9 @@ function typeIntoSearchFieldDesktop(text) {

 	cy.cGet('input#search-input').clear().type(text);
 	cy.cGet('input#search-input').should('have.prop', 'value', text);
-	cy.cGet('#tb_actionbar_item_searchprev').should('not.have.class', 'disabled');
-	cy.cGet('#tb_actionbar_item_searchnext').should('not.have.class', 'disabled');
-	cy.cGet('#tb_actionbar_item_cancelsearch').should('be.visible');
+	cy.cGet('#searchprev').should('not.have.attr', 'disabled');
+	cy.cGet('#searchnext').should('not.have.attr', 'disabled');
+	cy.cGet('#cancelsearch').should('be.visible');

 	cy.log('<< typeIntoSearchFieldDesktop - end');
 }
@ -56,7 +56,7 @@ function searchNext() {
 function searchNextDesktop() {
 	cy.log('>> searchNextDesktop - start');

-	cy.cGet('#tb_actionbar_item_searchnext').click();
+	cy.cGet('#searchnext').click();

 	cy.log('<< searchNextDesktop - end');
 }
@ -65,7 +65,7 @@ function searchNextDesktop() {
 function searchPrev() {
 	cy.log('>> searchPrev - start');

-	cy.cGet('#tb_searchbar_item_searchnext').click();
+	cy.cGet('#tb_searchbar_item_searchprev').click();

 	cy.log('<< searchPrev - end');
 }
@ -73,7 +73,7 @@ function searchPrev() {
 function searchPrevDesktop() {
 	cy.log('>> searchPrevDesktop - start');

-	cy.cGet('#tb_actionbar_item_searchprev').click();
+	cy.cGet('#searchprev').click();

 	cy.log('<< searchPrevDesktop - end');
 }
@ -95,11 +95,11 @@ function cancelSearch() {
 function cancelSearchDesktop() {
 	cy.log('>> cancelSearchDesktop - start');

-	cy.cGet('#tb_actionbar_item_cancelsearch').click();
+	cy.cGet('#toolbar-down #cancelsearch').click();
 	cy.cGet('input#search-input').should('have.prop', 'value', '');
-	cy.cGet('#tb_actionbar_item_searchprev').should('have.class', 'disabled');
-	cy.cGet('#tb_actionbar_item_searchnext').should('have.class', 'disabled');
-	cy.cGet('#tb_actionbar_item_cancelsearch').should('not.be.visible');
+	cy.cGet('#toolbar-down #searchprev').should('have.attr', 'disabled');
+	cy.cGet('#toolbar-down #searchnext').should('have.attr', 'disabled');
+	cy.cGet('#toolbar-down #cancelsearch').should('not.be.visible');

 	cy.log('<< cancelSearchDesktop - end');
 }
--- a/cypress_test/integration_tests/desktop/calc/bottom_bar_spec.js
+++ b/cypress_test/integration_tests/desktop/calc/bottom_bar_spec.js
@ -20,8 +20,8 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Calc bottom bar tests.', f
 		cy.cGet('#map').focus();
 		calcHelper.clickOnFirstCell();
 		desktophelper.makeZoomItemsVisible();
-		cy.cGet('#tb_actionbar_item_StateTableCellMenu .w2ui-button').click();
+		cy.cGet('#StateTableCellMenu').click();
 		// If it clicks, it passes.
-		cy.cGet('body').contains('.w2ui-drop-menu .menu-text', 'CountA').click();
+		cy.cGet('body').contains('.ui-combobox-entry', 'CountA').click();
 	});
 });
--- a/cypress_test/integration_tests/desktop/draw/navigator_spec.js
+++ b/cypress_test/integration_tests/desktop/draw/navigator_spec.js
@ -58,27 +58,27 @@ describe.skip(['tagdesktop'], 'Scroll through document, insert/delete items', fu
 	it('Jump to element. Document -> Navigator', function() {
 		// Click some items in document, and check if Navigator will jump to it. (if the items row will be selected, and visible)
 		// Risky: it clicks x,y coordinates, if scroll or layout change it may need to be changed
-		cy.cGet('#tb_actionbar_item_next').click();
+		cy.cGet('#toolbar-down #next').click();
 		cy.cGet('body').click(600,360);
 		checkIfItemSelectedAndVisible('Shape 6 (Text Frame \'Text3\')');

-		cy.cGet('#tb_actionbar_item_next').click();
-		cy.cGet('#tb_actionbar_item_next').click();
+		cy.cGet('#toolbar-down #next').click();
+		cy.cGet('#toolbar-down #next').click();
 		cy.cGet('body').click(370,270);
 		checkIfItemSelectedAndVisible('Shape 1 (SVG)');

-		cy.cGet('#tb_actionbar_item_prev').click();
+		cy.cGet('#toolbar-down #prev').click();
 		cy.cGet('body').click(355,435);
 		// T2 is part of a group. The group will be selected in Navigator.
 		checkIfItemExSelectedAndVisible('Shape 3 (Group object)');

-		cy.cGet('#tb_actionbar_item_next').click();
+		cy.cGet('#toolbar-down #next').click();
 		cy.cGet('body').click(500,520);
 		checkIfItemSelectedAndVisible('Object 3');

-		cy.cGet('#tb_actionbar_item_prev').click();
-		cy.cGet('#tb_actionbar_item_prev').click();
-		cy.cGet('#tb_actionbar_item_prev').click();
+		cy.cGet('#toolbar-down #prev').click();
+		cy.cGet('#toolbar-down #prev').click();
+		cy.cGet('#toolbar-down #prev').click();
 		cy.cGet('body').click(630,330);
 		checkIfItemSelectedAndVisible('Shape 2 (Text Frame \'Some text\')');
 	});
--- a/cypress_test/integration_tests/desktop/impress/annotation_spec.js
+++ b/cypress_test/integration_tests/desktop/impress/annotation_spec.js
@ -159,12 +159,12 @@ describe(['tagdesktop'], 'Comment Scrolling',function() {
 		helper.waitUntilIdle('.leaflet-control-scroll-up');
 		cy.cGet('.leaflet-control-scroll-up').should('be.visible');
 		cy.cGet('.leaflet-control-scroll-up').click().wait(300);
-		cy.cGet('#PageStatus').should('contain','Slide 1 of 3');
+		cy.cGet('#SlideStatus').should('contain','Slide 1 of 3');

 		//scroll down
 		cy.cGet('.leaflet-control-scroll-down').should('exist');
 		cy.cGet('.leaflet-control-scroll-down').click().wait(1000);
-		cy.cGet('#PageStatus').should('contain','Slide 3 of 3');
+		cy.cGet('#SlideStatus').should('contain','Slide 3 of 3');
 	});

 	it('switch to previous or next slide',function() {
@ -176,13 +176,13 @@ describe(['tagdesktop'], 'Comment Scrolling',function() {
 		addSlide(1);
 		cy.cGet('.leaflet-control-scroll-up').should('exist');
 		cy.cGet('.leaflet-control-scroll-up').click().wait(300);
-		cy.cGet('#PageStatus').should('contain','Slide 2 of 3');
+		cy.cGet('#SlideStatus').should('contain','Slide 2 of 3');

 		//scroll down
 		changeSlide(1,'previous');
 		cy.cGet('.leaflet-control-scroll-down').should('exist');
 		cy.cGet('.leaflet-control-scroll-down').click().wait(300);
-		cy.cGet('#PageStatus').should('contain','Slide 2 of 3');
+		cy.cGet('#SlideStatus').should('contain','Slide 2 of 3');
 	});
 });

--- a/cypress_test/integration_tests/desktop/impress/navigator_spec.js
+++ b/cypress_test/integration_tests/desktop/impress/navigator_spec.js
@ -37,48 +37,48 @@ describe.skip(['tagdesktop'], 'Scroll through document, insert/delete items', fu
 		// Click items in navigator, and check if it goes to the right slide.
 		// items should be visible (scrolled right), but that is not tested yet
 		cy.cGet('#tree').contains('.jsdialog.sidebar.ui-treeview-cell-text', 'Shape 2 (Text Frame \'Text1\')').dblclick();
-		cy.cGet('#PageStatus').should('have.text', 'Slide 2 of 4');
+		cy.cGet('#SlideStatus').should('have.text', 'Slide 2 of 4');

 		cy.cGet('#tree').contains('.jsdialog.sidebar.ui-treeview-cell-text', 'Object 2').dblclick();
-		cy.cGet('#PageStatus').should('have.text', 'Slide 4 of 4');
+		cy.cGet('#SlideStatus').should('have.text', 'Slide 4 of 4');

 		cy.cGet('#tree').contains('.jsdialog.sidebar.ui-treeview-cell-text', 'Shape 1 (Title text \'Title1\')').dblclick();
-		cy.cGet('#PageStatus').should('have.text', 'Slide 1 of 4');
+		cy.cGet('#SlideStatus').should('have.text', 'Slide 1 of 4');

 		cy.cGet('#tree').contains('.jsdialog.sidebar.ui-treeview-cell-text', 'Shape 5 (Image)').dblclick();
-		cy.cGet('#PageStatus').should('have.text', 'Slide 4 of 4');
+		cy.cGet('#SlideStatus').should('have.text', 'Slide 4 of 4');

 		cy.cGet('#tree').contains('.jsdialog.sidebar.ui-treeview-cell-text', 'Shape 4 (Text Frame \'T3\')').dblclick();
-		cy.cGet('#PageStatus').should('have.text', 'Slide 3 of 4');
+		cy.cGet('#SlideStatus').should('have.text', 'Slide 3 of 4');

 		cy.cGet('#tree').contains('.jsdialog.sidebar.ui-treeview-cell-text', 'Shape 1 (SVG)').dblclick();
-		cy.cGet('#PageStatus').should('have.text', 'Slide 4 of 4');
+		cy.cGet('#SlideStatus').should('have.text', 'Slide 4 of 4');
 	});

 	it('Jump to element. Document -> Navigator', function() {
 		// Click some items in document, and check if Navigator will jump to it
 		// Risky: it clicks x,y coordinates, if scroll or layout change it may need to be changed
-		cy.cGet('#tb_actionbar_item_next').click();
+		cy.cGet('#toolbar-down #next').click();
 		cy.cGet('body').click(600,360);
 		checkIfItemSelectedAndVisible('Shape 6 (Text Frame \'Text3\')');

-		cy.cGet('#tb_actionbar_item_next').click();
-		cy.cGet('#tb_actionbar_item_next').click();
+		cy.cGet('#toolbar-down #next').click();
+		cy.cGet('#toolbar-down #next').click();
 		cy.cGet('body').click(370,270);
 		checkIfItemSelectedAndVisible('Shape 1 (SVG)');

-		cy.cGet('#tb_actionbar_item_prev').click();
+		cy.cGet('#toolbar-down #prev').click();
 		cy.cGet('body').click(355,435);
 		// T2 is part of a group. The group will be selected in Navigator.
 		checkIfItemExSelectedAndVisible('Shape 3 (Group object)');

-		cy.cGet('#tb_actionbar_item_next').click();
+		cy.cGet('#toolbar-down #next').click();
 		cy.cGet('body').click(500,520);	//Object 3
 		checkIfItemSelectedAndVisible('Object 3');

-		cy.cGet('#tb_actionbar_item_prev').click();
-		cy.cGet('#tb_actionbar_item_prev').click();
-		cy.cGet('#tb_actionbar_item_prev').click();
+		cy.cGet('#toolbar-down #prev').click();
+		cy.cGet('#toolbar-down #prev').click();
+		cy.cGet('#toolbar-down #prev').click();
 		cy.cGet('body').click(630,330);	//Some text
 		checkIfItemSelectedAndVisible('Shape 2 (Text Frame \'Some text\')');
 	});
--- a/cypress_test/integration_tests/desktop/impress/slide_operations_spec.js
+++ b/cypress_test/integration_tests/desktop/impress/slide_operations_spec.js
@ -54,7 +54,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Slide operations', functio
 		helper.clickOnIdle('#presentation-toolbar #duplicatepage');

 		impressHelper.assertNumberOfSlidePreviews(2);
-		cy.cGet('#PageStatus').should('have.text', 'Slide 2 of 2');
+		cy.cGet('#SlideStatus').should('have.text', 'Slide 2 of 2');
 		cy.cGet('#annotation-content-area-2').should('include.text', 'some text0');

 	});
--- a/cypress_test/integration_tests/desktop/impress/statusbar_spec.js
+++ b/cypress_test/integration_tests/desktop/impress/statusbar_spec.js
@ -20,11 +20,11 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Statubar tests.', function
 	});

 	it('Selected slide.', function() {
-		cy.cGet('#PageStatus').should('have.text', 'Slide 1 of 2');
-		cy.cGet('#tb_actionbar_item_next').click();
-		cy.cGet('#PageStatus').should('have.text', 'Slide 2 of 2');
-		cy.cGet('#tb_actionbar_item_prev').click();
-		cy.cGet('#PageStatus').should('have.text', 'Slide 1 of 2');
+		cy.cGet('#SlideStatus').should('have.text', 'Slide 1 of 2');
+		cy.cGet('#toolbar-down #next').click();
+		cy.cGet('#SlideStatus').should('have.text', 'Slide 2 of 2');
+		cy.cGet('#toolbar-down #prev').click();
+		cy.cGet('#SlideStatus').should('have.text', 'Slide 1 of 2');
 	});

 	it('Change zoom level.', function() {
--- a/cypress_test/integration_tests/desktop/writer/help_dialog_update_spec.js
+++ b/cypress_test/integration_tests/desktop/writer/help_dialog_update_spec.js
@ -31,7 +31,7 @@ describe(['tagscreenshot'], 'Help dialog screenshot updation', function() {
 		var w1, w2;
 		cy.cGet('#toolbar-down').should('exist').then(el => {
 			w1 = el[0].getBoundingClientRect().left;
-			cy.cGet('#tb_actionbar_item_break8').should('exist').then(el => {
+			cy.cGet('#toolbar-down #permissionspacer').should('exist').then(el => {
 				w2 = el[0].getBoundingClientRect().left;
 				var width = w2 - w1;
 				cy.log('w1 w2 ' + w1 + ' ' + w2);
@ -46,7 +46,7 @@ describe(['tagscreenshot'], 'Help dialog screenshot updation', function() {
 		var w1, w2;
 		cy.cGet('#toolbar-down').should('exist').then(el => {
 			w1 = el[0].getBoundingClientRect().right;
-			cy.cGet('#tb_actionbar_item_break8').should('exist').then(el => {
+			cy.cGet('#toolbar-down #permissionspacer').should('exist').then(el => {
 				w2 = el[0].getBoundingClientRect().right;
 				var width = w1 - w2 + 10;
 				cy.cGet('#toolbar-down').screenshot('information-bar', { clip: { x: w2, y: 0, height: 300, width: width} });
--- a/cypress_test/integration_tests/desktop/writer/invalidations_spec.js
+++ b/cypress_test/integration_tests/desktop/writer/invalidations_spec.js
@ -24,7 +24,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Invalidation tests.', func

 		// Add some main body text of X
 		ceHelper.type('X');
-		cy.cGet('#tb_actionbar_item_StateWordCount').should('have.text', '    1 word, 1 character');
+		cy.cGet('#toolbar-down #StateWordCount').should('have.text', '1 word, 1 character');

 		cy.cGet('.empty-deltas').then(($before) => {
 			const beforeCount = $before.text();
@ -35,7 +35,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Invalidation tests.', func

 			// Wait until we have round trip of selection of 'X' and tile updates will have arrived.
 			writerHelper.selectAllTextOfDoc();
-			cy.cGet('#tb_actionbar_item_StateWordCount').should('have.text', '    Selected: 1 word, 1 character');
+			cy.cGet('#toolbar-down #StateWordCount').should('have.text', 'Selected: 1 word, 1 character');

 			cy.cGet('.empty-deltas').should(($after) => {
 				expect($after.text()).to.eq(beforeCount);
@ -57,7 +57,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Invalidation tests.', func
 		// Click back in main document
 		cy.cGet('.leaflet-layer').click(200, 200);
 		writerHelper.selectAllTextOfDoc();
-		cy.cGet('#tb_actionbar_item_StateWordCount').should('have.text', '    Selected: 1 word, 1 character');
+		cy.cGet('#toolbar-down #StateWordCount').should('have.text', 'Selected: 1 word, 1 character');

 		cy.cGet('.empty-deltas').then(($before) => {
 			const beforeCount = $before.text();
@ -70,7 +70,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Invalidation tests.', func

 			// verify the content is 'YY'
 			writerHelper.selectAllTextOfDoc();
-			cy.cGet('#tb_actionbar_item_StateWordCount').should('have.text', '    Selected: 1 word, 2 characters');
+			cy.cGet('#toolbar-down #StateWordCount').should('have.text', 'Selected: 1 word, 2 characters');

 			// verify empty deltas is unchanged
 			cy.cGet('.empty-deltas').should(($after) => {
@ -86,7 +86,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Invalidation tests.', func

 			// verify the content is 'X'
 			writerHelper.selectAllTextOfDoc();
-			cy.cGet('#tb_actionbar_item_StateWordCount').should('have.text', '    Selected: 1 word, 1 character');
+			cy.cGet('#toolbar-down #StateWordCount').should('have.text', 'Selected: 1 word, 1 character');

 			// verify empty deltas is unchanged
 			cy.cGet('.empty-deltas').should(($after) => {
@ -101,7 +101,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Invalidation tests.', func
 		// Add some main body text of X and bullet
 		ceHelper.type('XX');
 		cy.cGet('.notebookbar > .unoDefaultBullet > button').click();
-		cy.cGet('#tb_actionbar_item_StateWordCount').should('have.text', '    2 words, 3 characters');
+		cy.cGet('#toolbar-down #StateWordCount').should('have.text', '2 words, 3 characters');

 		cy.cGet('.empty-deltas').then(($before) => {
 			const beforeCount = $before.text();
@ -116,7 +116,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Invalidation tests.', func
 			ceHelper.moveCaret('end');

 			ceHelper.moveCaret('left', 'shift');
-			cy.cGet('#tb_actionbar_item_StateWordCount').should('have.text', '    Selected: 1 word, 1 character');
+			cy.cGet('#toolbar-down #StateWordCount').should('have.text', 'Selected: 1 word, 1 character');

 			cy.cGet('.empty-deltas').should(($after) => {
 				expect($after.text()).to.eq(beforeCount);
--- a/cypress_test/integration_tests/desktop/writer/searchbar_spec.js
+++ b/cypress_test/integration_tests/desktop/writer/searchbar_spec.js
@ -29,9 +29,9 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Searching via search bar'
 		writerHelper.selectAllTextOfDoc();
 		cy.cGet('input#search-input').clear().type('q');
 		cy.cGet('input#search-input').should('have.prop', 'value', 'q');
-		cy.cGet('#tb_actionbar_item_searchprev').should('have.class', 'disabled');
-		cy.cGet('#tb_actionbar_item_searchnext').should('have.class', 'disabled');
-		cy.cGet('#tb_actionbar_item_cancelsearch').should('not.be.visible');
+		cy.cGet('#toolbar-down #searchprev').should('have.attr', 'disabled');
+		cy.cGet('#toolbar-down #searchnext').should('have.attr', 'disabled');
+		cy.cGet('#toolbar-down #cancelsearch').should('not.be.visible');
 		helper.textSelectionShouldNotExist();
 	});

--- a/cypress_test/integration_tests/desktop/writer/statusbar_spec.js
+++ b/cypress_test/integration_tests/desktop/writer/statusbar_spec.js
@ -21,9 +21,9 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Statubar tests.', function
 	});

 	it('Text selection.', function() {
-		cy.cGet('body').contains('#tb_actionbar_item_StateWordCount', '2 words, 9 characters');
+		cy.cGet('body').contains('#toolbar-down #StateWordCount', '2 words, 9 characters');
 		helper.moveCursor('right', 'shift');
-		cy.cGet('body').contains('#tb_actionbar_item_StateWordCount', 'Selected: 1 word, 1 character');
+		cy.cGet('body').contains('#toolbar-down #StateWordCount', 'Selected: 1 word, 1 character');
 	});

 	it('Switching page.', function() {
@ -31,9 +31,9 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Statubar tests.', function
 		cy.cGet('#menu-insert').click();
 		cy.cGet('body').contains('#menu-insert li a', 'Page Break').click();
 		cy.cGet('#StatePageNumber').invoke('text').should('be.oneOf', ['Page 2 of 2', 'Pages 1 and 2 of 2']);
-		cy.cGet('#tb_actionbar_item_prev').click();
+		cy.cGet('#toolbar-down #prev').click();
 		cy.cGet('#StatePageNumber').should('have.text', 'Page 1 of 2');
-		cy.cGet('#tb_actionbar_item_next').click();
+		cy.cGet('#toolbar-down #next').click();
 		cy.cGet('#StatePageNumber').invoke('text').should('be.oneOf', ['Page 2 of 2', 'Pages 1 and 2 of 2']);
 	});

--- a/cypress_test/integration_tests/multiuser/writer/invalidations_spec.js
+++ b/cypress_test/integration_tests/multiuser/writer/invalidations_spec.js
@ -31,13 +31,13 @@ describe(['tagmultiuser'], 'Joining a document should not trigger an invalidatio
 		ceHelper.type('X');

 		cy.cSetActiveFrame('#iframe2');
-		cy.cGet('#tb_actionbar_item_StateWordCount').should('have.text', '    1 word, 1 character');
+		cy.cGet('#toolbar-down #StateWordCount').should('have.text', '    1 word, 1 character');

 		cy.cSetActiveFrame('#iframe1');
 		writerHelper.selectAllTextOfDoc();
-		cy.cGet('#tb_actionbar_item_StateWordCount').should('have.text', '    Selected: 1 word, 1 character');
+		cy.cGet('#toolbar-down #StateWordCount').should('have.text', '    Selected: 1 word, 1 character');
 		cy.cGet('.leaflet-layer').click();
-		cy.cGet('#tb_actionbar_item_StateWordCount').should('have.text', '    1 word, 1 character');
+		cy.cGet('#toolbar-down #StateWordCount').should('have.text', '    1 word, 1 character');

 		cy.cGet('.empty-deltas').then(($before) => {
 			const beforeCount = $before.text();
@ -48,9 +48,9 @@ describe(['tagmultiuser'], 'Joining a document should not trigger an invalidatio

 			cy.cSetActiveFrame('#iframe1');
 			writerHelper.selectAllTextOfDoc();
-			cy.cGet('#tb_actionbar_item_StateWordCount').should('have.text', '    Selected: 1 word, 1 character');
+			cy.cGet('#toolbar-down #StateWordCount').should('have.text', '    Selected: 1 word, 1 character');
 			cy.cGet('.leaflet-layer').click();
-			cy.cGet('#tb_actionbar_item_StateWordCount').should('have.text', '    1 word, 1 character');
+			cy.cGet('#toolbar-down #StateWordCount').should('have.text', '    1 word, 1 character');

 			cy.cGet('.empty-deltas').should(($after) => {
 				expect($after.text()).to.eq(beforeCount);
@ -71,13 +71,13 @@ describe(['tagmultiuser'], 'Joining a document should not trigger an invalidatio
 		ceHelper.type('X');

 		cy.cSetActiveFrame('#iframe2');
-		cy.cGet('#tb_actionbar_item_StateWordCount').should('have.text', '    1 word, 1 character');
+		cy.cGet('#toolbar-down #StateWordCount').should('have.text', '    1 word, 1 character');

 		cy.cSetActiveFrame('#iframe1');
 		writerHelper.selectAllTextOfDoc();
-		cy.cGet('#tb_actionbar_item_StateWordCount').should('have.text', '    Selected: 1 word, 1 character');
+		cy.cGet('#toolbar-down #StateWordCount').should('have.text', '    Selected: 1 word, 1 character');
 		cy.cGet('.leaflet-layer').click();
-		cy.cGet('#tb_actionbar_item_StateWordCount').should('have.text', '    1 word, 1 character');
+		cy.cGet('#toolbar-down #StateWordCount').should('have.text', '    1 word, 1 character');

 		cy.cGet('.empty-deltas').then(($before) => {
 			var beforeCount = parseInt($before.text());
@ -94,11 +94,11 @@ describe(['tagmultiuser'], 'Joining a document should not trigger an invalidatio

 			cy.cSetActiveFrame('#iframe1');
 			writerHelper.selectAllTextOfDoc();
-			cy.cGet('#tb_actionbar_item_StateWordCount').should('have.text', '    Selected: 1 word, 1 character');
+			cy.cGet('#toolbar-down #StateWordCount').should('have.text', '    Selected: 1 word, 1 character');
 			cy.cGet('.leaflet-layer').click();
-			cy.cGet('#tb_actionbar_item_StateWordCount').should('have.text', '    1 word, 1 character');
+			cy.cGet('#toolbar-down #StateWordCount').should('have.text', '    1 word, 1 character');
 			ceHelper.type('X');
-			cy.cGet('#tb_actionbar_item_StateWordCount').should('have.text', '    1 word, 2 characters');
+			cy.cGet('#toolbar-down #StateWordCount').should('have.text', '    1 word, 2 characters');

 			cy.cGet('.empty-deltas').should(($after) => {
 				// allow one row of empty deltas, the case this protects regression against
				`@ -0,0 +1 @@`
				<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m9 1c-1.746 0-3 1.43-3 2.8 0 1.4.1 2.4.8 3.5.224.29.485.35.7.6.135.5.24 1 .1 1.5-.436.153-.85.332-1.27.5-.51-.273-1.1-.5-1.61-.7-.07-.28-.02-.487.05-.75.12-.125.23-.18.36-.3.37-.45.39-1.21.39-1.75 0-.8-.72-1.4-1.5-1.4-.87 0-1.5.72-1.5 1.4h-.02c0 .7.05 1.2.4 1.75.1.15.242.175.35.3.0674.25.121.5.05.75-.64.223-1.244.5-1.8.8-.42.3-.233.182-.5 1.15-.124.5 1.3.73 2.32.81-.05.275-.12.64-.32 1.34-.32 1.25 4.353 1.7 6 1.7 2.43 0 6.313-.456 5.98-1.7-.52-1.94-.208-1.71-.98-2.3-1.09-.654-2.452-1.167-3.6-1.6-.15-.557-.04-.97.1-1.5.235-.25.5-.36.72-.6.69-.884.78-2.424.78-3.5 0-1.586-1.43-2.8-3-2.8z" fill="#555"/></svg>