From e7b85f56033030f344d05a335dc0a8b6712c0171 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Mon, 22 Jan 2024 17:21:59 +0300
Subject: [PATCH 01/16] Add custom buttons to toolbar

---
 apps/common/main/lib/component/Button.js      |  34 ++++
 apps/common/main/lib/component/Mixtbar.js     |  11 ++
 .../main/lib/controller/LayoutManager.js      | 123 ++++++++++++-
 apps/common/main/lib/controller/Plugins.js    |   2 +-
 apps/common/main/lib/util/utils.js            | 161 +++++++++++++++++-
 5 files changed, 327 insertions(+), 4 deletions(-)

diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js
index 5a74a2d6a1..1b7ed6f0ec 100644
--- a/apps/common/main/lib/component/Button.js
+++ b/apps/common/main/lib/component/Button.js
@@ -969,5 +969,39 @@ define([
             }
         }
     });
+
+    Common.UI.ButtonCustom = Common.UI.Button.extend(_.extend({
+        initialize : function(options) {
+            Common.UI.Button.prototype.initialize.call(this, options);
+
+            this.iconsSet = Common.UI.iconsStr2IconsObj(this.options.iconsSet || ['']);
+            var icons = Common.UI.getSuitableIcons(this.iconsSet);
+            this.iconImg = icons['normal'];
+
+            Common.UI.Button.prototype.initialize.call(this, _.extend({
+                iconImg: this.iconImg
+            }, options));
+
+            this.iconActiveImg = icons['active'];
+        },
+
+        render: function (parentEl) {
+            Common.UI.Button.prototype.render.call(this, parentEl);
+            Common.NotificationCenter.on('uitheme:changed', this.updateIcons.bind(this));
+            Common.NotificationCenter.on('window:resize', this.updateIcons.bind(this));
+        },
+
+        updateIcons: function() {
+            var icons = Common.UI.getSuitableIcons(this.iconsSet);
+            this.iconImg = this.options.iconImg = icons['normal'];
+            this.iconActiveImg = icons['active'];
+            this.cmpEl && this.cmpEl.find("img").attr("src", this.pressed ? this.iconActiveImg : this.iconImg);
+        },
+
+        toggle: function(toggle, suppressEvent) {
+            Common.UI.Button.prototype.toggle.call(this, toggle, suppressEvent);
+            this.cmpEl && this.cmpEl.find("img").attr("src", this.pressed ? this.iconActiveImg : this.iconImg);
+        }
+    }, Common.UI.ButtonCustom || {}));
 });
 
diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js
index 81bd6cf10d..d2ecffac2c 100644
--- a/apps/common/main/lib/component/Mixtbar.js
+++ b/apps/common/main/lib/component/Mixtbar.js
@@ -391,6 +391,17 @@ define([
                 }
             },
 
+            getTab: function(tab) {
+                if (tab && this.$panels) {
+                    var panel = this.$panels.filter('[data-tab=' + tab + ']');
+                    return panel.length ? panel : undefined;
+                }
+            },
+
+            getLastTabIdx: function() {
+                return config.tabs.length;
+            },
+
             isCompact: function () {
                 return this.isFolded;
             },
diff --git a/apps/common/main/lib/controller/LayoutManager.js b/apps/common/main/lib/controller/LayoutManager.js
index b0f9f4dd6f..2571cd1ba6 100644
--- a/apps/common/main/lib/controller/LayoutManager.js
+++ b/apps/common/main/lib/controller/LayoutManager.js
@@ -47,7 +47,8 @@ if (Common.UI === undefined) {
 
 Common.UI.LayoutManager = new(function() {
     var _config,
-        _licensed;
+        _licensed,
+        _lastInternalTabIdx = 10;
     var _init = function(config, licensed) {
         _config = config;
         _licensed = licensed;
@@ -110,11 +111,129 @@ Common.UI.LayoutManager = new(function() {
         }
     };
 
+    var _createTab = function(toolbar, action, caption) {
+        if (!toolbar || !action || !caption) return;
+
+        var _tab = {action: action, caption: caption},
+            _panel = $('<section id="' + action + '" class="panel" data-tab="' + action + '"></section>'),
+            _group = $('<div class="group"></div>');
+        _group.appendTo(_panel);
+
+        toolbar.addTab(_tab, _panel, toolbar.getLastTabIdx());
+        toolbar.setVisible(action, true);
+        console.log('create ' + action);
+        return _panel;
+    };
+
+    var _getTab = function (toolbar, action, caption) {
+        if (!toolbar || !action) return;
+        return toolbar.getTab(action) || _createTab(toolbar, action, caption);
+    };
+
+    var _addCustomItems = function (toolbar, data, api) {
+        if (!data || data.length<1) return;
+
+        var lang = Common.Locale.getCurrentLanguage();
+        data.forEach(function(plugin) {
+            /*
+            plugin = {
+                guid: 'plugin-guid',
+                tab: {
+                    id: 'tab-id',
+                    text: 'caption' or { "fr": "french caption", "es": "spanish caption"}
+                },
+                items: [
+                    {
+                        id: 'button-id',
+                        type: 'button'='big-button' or 'small-button',
+                        icons: 'template string' or object
+                        text: 'caption' or { "fr": "french caption", "es": "spanish caption"},
+                        hint: 'hint' or { "fr": "french hint", "es": "spanish hint"},
+                        separator: true/false - inserted before item,
+                        split: true/false - used when has menu
+                        menu: [
+                            {
+                                id: 'item-id',
+                                text: 'caption' or { "fr": "french caption", "es": "spanish caption"},
+                                separator: true/false - inserted before item,
+                            }
+                        ],
+                        lockInViewMode: true/false - lock in view mode
+                    }
+                ]
+            }
+            */
+            if (plugin.tab) {
+                var $panel = _getTab(toolbar, plugin.tab.id, plugin.tab.text) || _getTab(toolbar, 'plugins');
+                if ($panel) {
+                    plugin.items && plugin.items.forEach(function(item) {
+                        var _groups = $panel.children().filter('.group'),
+                            _group;
+                        if (_groups.length>0 && !item.separator)
+                            _group = $(_groups[_groups.length-1]);
+                        else {
+                            item.separator && $('<div class="separator long"></div>').appendTo($panel);
+                            _group = $('<div class="group"></div>');
+                            _group.appendTo($panel);
+                        }
+
+                        if (item.type==='button' || item.type==='big-button') {
+                            var _set = Common.enumLock;
+                            var btn = new Common.UI.ButtonCustom({
+                                cls: 'btn-toolbar x-huge icon-top',
+                                iconsSet: item.icons,
+                                caption: ((typeof item.text == 'object') ? item.text[lang] || item.text['en'] : item.text) || '',
+                                menu: item.menu && item.menu.length > 0,
+                                split: item.menu && item.menu.length > 0 && !!item.split,
+                                value: item.id,
+                                guid: plugin.guid,
+                                hint: ((typeof item.hint == 'object') ? item.hint[lang] || item.hint['en'] : item.hint) || '',
+                                lock: item.lockInViewMode ? [_set.viewMode, _set.previewReviewMode, _set.viewFormMode, _set.docLockView, _set.docLockForms, _set.docLockComments, _set.selRangeEdit, _set.editFormula ] : [],
+                                dataHint: '1',
+                                dataHintDirection: 'bottom',
+                                dataHintOffset: 'small'
+                            });
+
+                            if (btn.menu) {
+                                var _menu_items = [];
+                                item.menu.forEach(function(menuItem) {
+                                    if (menuItem.separator) _menu_items.push({caption: '--'});
+                                    menuItem.text && _menu_items.push({
+                                        caption: ((typeof menuItem.text == 'object') ? menuItem.text[lang] || menuItem.text['en'] : menuItem.text) || '',
+                                        value: menuItem.id,
+                                        iconImg: Common.UI.getSuitableIcons(Common.UI.iconsStr2IconsObj(menuItem.icons)),
+                                        guid: plugin.guid
+                                    });
+                                });
+                                btn.setMenu(new Common.UI.Menu({
+                                    items: _menu_items
+                                }));
+                                btn.menu.on('item:click', function(menu, mi, e) {
+                                    api && api.onPluginButtonClick && api.onPluginButtonClick(mi.options.guid, mi.value);
+                                });
+                            }
+                            if ( !btn.menu || btn.split) {
+                                btn.on('click', function(b, e) {
+                                    api && api.onPluginButtonClick && api.onPluginButtonClick(b.options.guid, b.options.value);
+                                });
+                            }
+                            var $slot = $('<span class="btn-slot text x-huge"></span>').appendTo(_group);
+                            btn.render($slot);
+                        }
+                    });
+                }
+            }
+        });
+    };
+
     return {
         init: _init,
         applyCustomization: _applyCustomization,
         isElementVisible: _isElementVisible,
-        getInitValue: _getInitValue
+        getInitValue: _getInitValue,
+        lastTabIdx: _lastInternalTabIdx,
+        getTab: _getTab,
+        addCustomItems: _addCustomItems
     }
 })();
 
diff --git a/apps/common/main/lib/controller/Plugins.js b/apps/common/main/lib/controller/Plugins.js
index 64827f1fa7..cc5367422e 100644
--- a/apps/common/main/lib/controller/Plugins.js
+++ b/apps/common/main/lib/controller/Plugins.js
@@ -68,7 +68,7 @@ define([
                             var tab = {action: 'plugins', caption: me.viewPlugins.groupCaption, dataHintTitle: 'E', layoutname: 'toolbar-plugins'};
                             me.$toolbarPanelPlugins = me.viewPlugins.getPanel();
                             me.toolbar = toolbar;
-                            toolbar.addTab(tab, me.$toolbarPanelPlugins, 10);     // TODO: clear plugins list in left panel
+                            toolbar.addTab(tab, me.$toolbarPanelPlugins, Common.UI.LayoutManager.lastTabIdx);     // TODO: clear plugins list in left panel
                         }
                     }
                 },
diff --git a/apps/common/main/lib/util/utils.js b/apps/common/main/lib/util/utils.js
index 553816183d..9531a8af5b 100644
--- a/apps/common/main/lib/util/utils.js
+++ b/apps/common/main/lib/util/utils.js
@@ -1204,4 +1204,163 @@ Common.UI.isRTL = function () {
     }
 
     return window.isrtl;
-};
\ No newline at end of file
+};
+
+Common.UI.iconsStr2IconsObj = function(icons) {
+    let result = icons;
+    if (typeof result === 'string' && result.indexOf('%') !== -1) {
+        /*
+            valid params:
+            theme-type - {string} theme type (light|dark|common)
+            theme-name - {string} the name of theme
+            state - {string} state of icons for different situations (normal|hover|active)
+            scale - {string} list of avaliable scales (100|125|150|175|200|default|extended)
+            extension - {string} use it after symbol "." (png|jpeg|svg)
+
+            Example: "resources/%theme-type%(light|dark)/%state%(normal)icon%scale%(default).%extension%(png)"
+        */
+        let scaleValue = {
+            '100%' : '.',
+            '125%' : '@1.25x.',
+            '150%' : '@1.5x.',
+            '175%' : '@1.75x.',
+            '200%' : '@2x.'
+        }
+        let arrParams = ['theme-type', 'theme-name' ,'state', 'scale', 'extension'],
+            start = result.indexOf('%'),
+            template = result.substring(start).replace(/[/.]/g, ('')),
+            commonPart = result.substring(0, start),
+            end = 0,
+            param = null,
+            values = null,
+            iconName = '',
+            tempObj = {};
+
+        result = [];
+
+        for (let index = 0; index < arrParams.length; index++) {
+            param = arrParams[index];
+            start = template.indexOf(param) - 1;
+            if (start < 0 )
+                continue;
+
+            end = param.length + 2;
+            template = template.substring(0, start) + template.substring(start + end);
+            start = template.indexOf('(', 0);
+            end = template.indexOf(')', 0);
+            values = template.substring((start + 1), end);
+            template = template.substring(0, start) + template.substring(++end);
+            tempObj[param] = values.split('|');
+        }
+
+        if (template.length) {
+            iconName = template;
+        } else {
+            let arr = commonPart.split('/');
+            iconName = arr.pop().replace(/\./g, '');
+            commonPart = arr.join('/') + '/';
+        }
+
+        // we don't work with svg yet. Change it when we will work with it (extended variant).
+        if (tempObj['scale'] && (tempObj['scale'] == 'default' || tempObj['scale'] == 'extended') ) {
+            tempObj['scale'] = ['100', '125', '150', '175', '200'];
+        } else if (!tempObj['scale']) {
+            tempObj['scale'] = ['100'];
+        }
+
+        if (!tempObj['state']) {
+            tempObj['state'] = ['normal'];
+        }
+
+        if (!iconName) {
+            iconName = 'icon';
+        }
+
+        let bHasName = !!tempObj['theme-name'];
+        let bHasType = (tempObj['theme-type'] && tempObj['theme-type'][0] !== 'common');
+        let arrThemes = bHasName ? tempObj['theme-name'] : (bHasType ? tempObj['theme-type'] : []);
+        let paramName = bHasName ? 'theme' : 'style';
+        if (arrThemes.length) {
+            for (let thInd = 0; thInd < arrThemes.length; thInd++) {
+                let obj = {};
+                obj[paramName] = arrThemes[thInd];
+                result.push(obj);
+            }
+        } else {
+            result.push({});
+        }
+
+        for (let index = 0; index < result.length; index++) {
+            for (let scaleInd = 0; scaleInd < tempObj['scale'].length; scaleInd++) {
+                let themePath = (result[index][paramName] || 'img') + '/';
+                let scale = tempObj['scale'][scaleInd] + '%';
+                let obj = {};
+                for (let stateInd = 0; stateInd < tempObj['state'].length; stateInd++) {
+                    let state = tempObj['state'][stateInd];
+                    obj[state] = commonPart + themePath + (state == 'normal' ? '' : (state + '_')) + iconName + (scaleValue[scale] || '.') + tempObj['extension'][0];
+                }
+                result[index][scale] = obj;
+            }
+        }
+    }
+    return result;
+}
+
+Common.UI.getSuitableIcons = function(icons) {
+    if (!icons) return;
+
+    icons = Common.UI.iconsStr2IconsObj(icons);
+    if (icons.length && typeof icons[0] !== 'string') {
+        var theme = Common.UI.Themes.currentThemeId().toLowerCase(),
+            style = Common.UI.Themes.isDarkTheme() ? 'dark' : 'light',
+            idx = -1;
+        for (var i=0; i<icons.length; i++) {
+            if (icons[i].theme && icons[i].theme.toLowerCase() == theme) {
+                idx = i;
+                break;
+            }
+        }
+        if (idx<0)
+            for (var i=0; i<icons.length; i++) {
+                if (icons[i].style && icons[i].style.toLowerCase() == style) {
+                    idx = i;
+                    break;
+                }
+            }
+        (idx<0) && (idx = 0);
+
+        var ratio = Common.Utils.applicationPixelRatio()*100,
+            current = icons[idx],
+            bestDistance = 10000,
+            currentDistance = 0,
+            defUrl,
+            bestUrl;
+        for (var key in current) {
+            if (current.hasOwnProperty(key)) {
+                if (key=='default') {
+                    defUrl = current[key];
+                } else if (!isNaN(parseInt(key))) {
+                    currentDistance = Math.abs(ratio-parseInt(key));
+                    if (currentDistance < (bestDistance - 0.01))
+                    {
+                        bestDistance = currentDistance;
+                        bestUrl = current[key];
+                    }
+                }
+            }
+        }
+        (bestDistance>0.01 && defUrl) && (bestUrl = defUrl);
+        return {
+            'normal': bestUrl ? bestUrl['normal'] : '',
+            'hover': bestUrl ? bestUrl['hover'] || bestUrl['normal'] : '',
+            'active': bestUrl ? bestUrl['active'] || bestUrl['normal'] : ''
+        };
+    } else { // old version
+        var url = icons[((Common.Utils.applicationPixelRatio() > 1 && icons.length > 1) ? 1 : 0) + (icons.length > 2 ? 2 : 0)];
+        return {
+            'normal': url,
+            'hover': url,
+            'active': url
+        };
+    }
+}

From 38946d3ebbc2d267e7645b796cc15a5e833a13ce Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Thu, 25 Jan 2024 17:53:26 +0300
Subject: [PATCH 02/16] Change icons for custom toolbar buttons (scale, theme,
 state)

---
 apps/common/main/lib/component/Button.js      | 57 ++++++++++++++-----
 .../main/lib/controller/LayoutManager.js      |  4 +-
 apps/common/main/resources/less/buttons.less  |  5 ++
 3 files changed, 52 insertions(+), 14 deletions(-)

diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js
index 1b7ed6f0ec..25e3083781 100644
--- a/apps/common/main/lib/component/Button.js
+++ b/apps/common/main/lib/component/Button.js
@@ -972,35 +972,66 @@ define([
 
     Common.UI.ButtonCustom = Common.UI.Button.extend(_.extend({
         initialize : function(options) {
+            options.iconCls = 'icon-custom ' + (options.iconCls || '');
             Common.UI.Button.prototype.initialize.call(this, options);
 
-            this.iconsSet = Common.UI.iconsStr2IconsObj(this.options.iconsSet || ['']);
+            this.iconsSet = Common.UI.iconsStr2IconsObj(options.iconsSet || ['']);
             var icons = Common.UI.getSuitableIcons(this.iconsSet);
-            this.iconImg = icons['normal'];
-
-            Common.UI.Button.prototype.initialize.call(this, _.extend({
-                iconImg: this.iconImg
-            }, options));
-
+            this.iconNormalImg = icons['normal'];
             this.iconActiveImg = icons['active'];
         },
 
         render: function (parentEl) {
             Common.UI.Button.prototype.render.call(this, parentEl);
+
+            var _current_active = false,
+                me = this;
+            this.cmpButtonFirst = $('button:first', this.$el || $(this.el));
+            const _callback = function (records, observer) {
+                var _hasactive = me.cmpButtonFirst.hasClass('active') || me.cmpButtonFirst.is(':active');
+                if ( _hasactive !== _current_active ) {
+                    me.updateIcon();
+                    _current_active = _hasactive;
+                }
+            };
+            this.cmpButtonFirst[0] && (new MutationObserver(_callback))
+                .observe(this.cmpButtonFirst[0], {
+                    attributes : true,
+                    attributeFilter : ['class'],
+                });
+
+            if (this.menu && !this.split) {
+                var onMouseDown = function (e) {
+                    _callback();
+                    $(document).on('mouseup',   onMouseUp);
+                };
+                var onMouseUp = function (e) {
+                    _callback();
+                    $(document).off('mouseup',   onMouseUp);
+                };
+                this.cmpButtonFirst.on('mousedown', _.bind(onMouseDown, this));
+            }
+
+            this.updateIcon();
             Common.NotificationCenter.on('uitheme:changed', this.updateIcons.bind(this));
-            Common.NotificationCenter.on('window:resize', this.updateIcons.bind(this));
         },
 
         updateIcons: function() {
             var icons = Common.UI.getSuitableIcons(this.iconsSet);
-            this.iconImg = this.options.iconImg = icons['normal'];
+            this.iconNormalImg = icons['normal'];
             this.iconActiveImg = icons['active'];
-            this.cmpEl && this.cmpEl.find("img").attr("src", this.pressed ? this.iconActiveImg : this.iconImg);
+            this.updateIcon();
         },
 
-        toggle: function(toggle, suppressEvent) {
-            Common.UI.Button.prototype.toggle.call(this, toggle, suppressEvent);
-            this.cmpEl && this.cmpEl.find("img").attr("src", this.pressed ? this.iconActiveImg : this.iconImg);
+        updateIcon: function() {
+            this.$icon && this.$icon.css({'background-image': 'url('+ (this.cmpButtonFirst && (this.cmpButtonFirst.hasClass('active') || this.cmpButtonFirst.is(':active')) ? this.iconActiveImg : this.iconNormalImg) +')'});
+        },
+
+        applyScaling: function (ratio) {
+            if ( this.options.scaling !== ratio ) {
+                this.options.scaling = ratio;
+                this.updateIcons();
+            }
         }
     }, Common.UI.ButtonCustom || {}));
 });
diff --git a/apps/common/main/lib/controller/LayoutManager.js b/apps/common/main/lib/controller/LayoutManager.js
index 2571cd1ba6..6c84f5710a 100644
--- a/apps/common/main/lib/controller/LayoutManager.js
+++ b/apps/common/main/lib/controller/LayoutManager.js
@@ -158,6 +158,7 @@ Common.UI.LayoutManager = new(function() {
                                 separator: true/false - inserted before item,
                             }
                         ],
+                        enableToggle: true/false - can press and depress button, only when no menu or has split menu
                         lockInViewMode: true/false - lock in view mode
                     }
                 ]
@@ -185,6 +186,7 @@ Common.UI.LayoutManager = new(function() {
                                 caption: ((typeof item.text == 'object') ? item.text[lang] || item.text['en'] : item.text) || '',
                                 menu: item.menu && item.menu.length > 0,
                                 split: item.menu && item.menu.length > 0 && !!item.split,
+                                enableToggle: item.enableToggle && (!item.menu || !!item.split),
                                 value: item.id,
                                 guid: plugin.guid,
                                 hint: ((typeof item.hint == 'object') ? item.hint[lang] || item.hint['en'] : item.hint) || '',
@@ -214,7 +216,7 @@ Common.UI.LayoutManager = new(function() {
                             }
                             if ( !btn.menu || btn.split) {
                                 btn.on('click', function(b, e) {
-                                    api && api.onPluginButtonClick && api.onPluginButtonClick(b.options.guid, b.options.value);
+                                    api && api.onPluginButtonClick && api.onPluginButtonClick(b.options.guid, b.options.value, b.pressed);
                                 });
                             }
                             var $slot = $('<span class="btn-slot text x-huge"></span>').appendTo(_group);
diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index e96a3a868a..75f0eac33d 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -417,6 +417,11 @@
     }
 }
 
+.icon-custom {
+    background-position: 0 0 !important;
+    background-size: cover;
+}
+
 .btn-toolbar {
     display: inline-block;
     position: relative;

From b1d5099d76ef63e7c81641a534bdfac14ddf11d8 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Thu, 25 Jan 2024 19:30:47 +0300
Subject: [PATCH 03/16] Lock custom toolbar buttons in view mode

---
 .../main/lib/controller/LayoutManager.js      |   5 +-
 .../main/app/controller/Toolbar.js            | 125 ++++++++++++++++++
 2 files changed, 129 insertions(+), 1 deletion(-)

diff --git a/apps/common/main/lib/controller/LayoutManager.js b/apps/common/main/lib/controller/LayoutManager.js
index 6c84f5710a..fb0914a4b5 100644
--- a/apps/common/main/lib/controller/LayoutManager.js
+++ b/apps/common/main/lib/controller/LayoutManager.js
@@ -133,7 +133,8 @@ Common.UI.LayoutManager = new(function() {
     var _addCustomItems = function (toolbar, data, api) {
         if (!data || data.length<1) return;
 
-        var lang = Common.Locale.getCurrentLanguage();
+        var lang = Common.Locale.getCurrentLanguage(),
+            btns = [];
         data.forEach(function(plugin) {
             /*
             plugin = {
@@ -221,11 +222,13 @@ Common.UI.LayoutManager = new(function() {
                             }
                             var $slot = $('<span class="btn-slot text x-huge"></span>').appendTo(_group);
                             btn.render($slot);
+                            btns.push(btn);
                         }
                     });
                 }
             }
         });
+        return btns;
     };
 
     return {
diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js
index 1d1847acb6..5436f757ca 100644
--- a/apps/documenteditor/main/app/controller/Toolbar.js
+++ b/apps/documenteditor/main/app/controller/Toolbar.js
@@ -459,6 +459,7 @@ define([
                 this.api.asc_registerCallback('asc_onCoAuthoringDisconnect', _.bind(this.onApiCoAuthoringDisconnect, this));
                 Common.NotificationCenter.on('api:disconnect', _.bind(this.onApiCoAuthoringDisconnect, this));
             }
+            this.api.asc_registerCallback('onPluginContextMenu', _.bind(this.onPluginContextMenu, this)); // TODO: handle add buttons to toolbar
             this.api.asc_registerCallback('asc_onDownloadUrl', _.bind(this.onDownloadUrl, this));
             Common.NotificationCenter.on('protect:doclock', _.bind(this.onChangeProtectDocument, this));
         },
@@ -3710,6 +3711,130 @@ define([
             }
         },
 
+        onPluginContextMenu: function(data) {
+            // Common.UI.LayoutManager.getTab(toolbar, 'tab1', 'Tab 1');
+            // Common.UI.LayoutManager.getTab(toolbar, 'tab2', 'Tab 2');
+            // Common.UI.LayoutManager.getTab(toolbar, 'tab1', 'Tab 1');
+            // toolbar.setVisible('tab1', true);
+            // toolbar.setVisible('tab2', true);
+            var icons = [
+                {
+                    "theme" : "theme-classic-light",
+                    "100%": {
+                        "normal": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/light/icon.png",
+                        "active": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/dark/icon.png"
+                    },
+                    "200%": {
+                        "normal": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/light/icon@2x.png",
+                        "active": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/dark/icon@2x.png"
+                    }
+                },
+                {
+                    "style" : "light",
+                    "100%": {
+                        "normal": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/light/icon.png"
+                    },
+                    "200%": {
+                        "normal": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/light/icon@2x.png"
+                    }
+                },
+                {
+                    "style" : "dark",
+                    "100%": {
+                        "normal": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/dark/icon.png"
+                    },
+                    "200%": {
+                        "normal": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/dark/icon@2x.png"
+                    }
+                }
+            ];
+            data = [{
+                guid: 'plugin-guid-1',
+                tab: {
+                    id: 'tab1',
+                    text: 'Tab1'
+                },
+                items: [
+                    {
+                        id: 'button-id-1',
+                        type: 'button',
+                        icons: icons,
+                        text:  { "en": "english Button 1", "es": "spanish Button 1"},
+                        hint: 'hint',
+                        lockInViewMode: true
+                    },
+                    {
+                        id: 'button-id-2',
+                        type: 'button',
+                        icons: icons,
+                        text:  { "en": "english Toggle 2", "es": "spanish Toggle 2"},
+                        enableToggle: true,
+                        hint: 'hint',
+                        lockInViewMode: true
+                    },
+                    {
+                        id: 'button-id-3',
+                        type: 'button',
+                        icons: icons,
+                        text:  { "en": "english Menu 3", "es": "spanish Menu 3"},
+                        hint: 'hint',
+                        separator: true,
+                        split: false,
+                        menu: [
+                            {
+                                id: 'item-id-1',
+                                text: 'Text1'
+                            }
+                        ],
+                        lockInViewMode: true
+                    },
+                    {
+                        id: 'button-id-4',
+                        type: 'button',
+                        icons: icons,
+                        text:  { "en": "english Split Menu 4", "es": "spanish Split Menu 4"},
+                        hint: 'hint',
+                        split: true,
+                        menu: [
+                            {
+                                id: 'item-id-2',
+                                text: 'Text2'
+                            },
+                            {
+                                id: 'item-id-2',
+                                text: 'Text2',
+                                separator: true
+                            }
+                        ],
+                        lockInViewMode: true
+                    },
+                    {
+                        id: 'button-id-5',
+                        type: 'button',
+                        icons: icons,
+                        text:  { "en": "english Toggle Split Menu 5", "es": "spanish Toggle Split Menu 5"},
+                        hint: 'hint',
+                        split: true,
+                        enableToggle: true,
+                        menu: [
+                            {
+                                id: 'item-id-2',
+                                text: 'Text2'
+                            },
+                            {
+                                id: 'item-id-2',
+                                text: 'Text2',
+                                separator: true
+                            }
+                        ],
+                        lockInViewMode: true
+                    }
+                ]
+            }];
+            var btns = Common.UI.LayoutManager.addCustomItems(this.toolbar, data, this.api);
+            Array.prototype.push.apply(this.toolbar.lockControls, btns);
+        },
+
         textEmptyImgUrl                            : 'You need to specify image URL.',
         textWarning                                : 'Warning',
         textFontSizeErr                            : 'The entered value is incorrect.<br>Please enter a numeric value between 1 and 300',

From fdca25ff1d9d1cbd729a0c5bdce65c3eafe5ca95 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Fri, 26 Jan 2024 20:18:10 +0300
Subject: [PATCH 04/16] Add/update custom toolbar buttons, handle adding menus

---
 apps/common/main/lib/component/Button.js      |  16 +--
 .../main/lib/controller/LayoutManager.js      | 114 +++++++++++++-----
 apps/common/main/lib/view/ReviewChanges.js    |   3 +-
 .../main/app/controller/Main.js               |   2 +-
 .../main/app/controller/Toolbar.js            |  15 ++-
 apps/pdfeditor/main/app/controller/Main.js    |   2 +-
 .../main/app/controller/Main.js               |   2 +-
 .../main/app/controller/Main.js               |   2 +-
 8 files changed, 114 insertions(+), 42 deletions(-)

diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js
index 25e3083781..dcca1ab324 100644
--- a/apps/common/main/lib/component/Button.js
+++ b/apps/common/main/lib/component/Button.js
@@ -191,6 +191,10 @@ define([
                     'print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); %>' +
             '<% } %>';
 
+    var templateBtnCaption =
+        '<%= caption %>' +
+        '<i class="caret"></i>';
+
     var templateHugeCaption =
             '<button type="button" class="btn <%= cls %>" id="<%= id %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>" <% if (dataHintTitle) { %> data-hint-title="<%= dataHintTitle %>" <% } %>> ' +
                 '<div class="inner-box-icon">' +
@@ -208,9 +212,7 @@ define([
                     templateBtnIcon +
                 '</div>' +
                 '<div class="inner-box-caption">' +
-                    '<span class="caption"><%= caption %>' +
-                        '<i class="caret"></i>' +
-                    '</span>' +
+                    '<span class="caption">' + templateBtnCaption + '</span>' +
                     '<i class="caret compact-caret"></i>' +
                 '</div>' +
             '</button>' +
@@ -225,9 +227,7 @@ define([
             '</button>' +
             '<button type="button" class="btn <%= cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>" <% if (dataHintTitle) { %> data-hint-title="<%= dataHintTitle %>" <% } %>>' +
                 '<span class="btn-fixflex-vcenter">' +
-                    '<span class="caption"><%= caption %>' +
-                        '<i class="caret"></i>' +
-                    '</span>' +
+                    '<span class="caption">' + templateBtnCaption + '</span>' +
                     '<i class="caret compact-caret"></i>' +
                 '</span>' +
             '</button>' +
@@ -880,7 +880,7 @@ define([
 
         setCaption: function(caption) {
             if (this.caption != caption) {
-                if ( /icon-top/.test(this.cls) && !!this.caption && /huge/.test(this.cls) ) {
+                if ( /icon-top/.test(this.options.cls) && !!this.caption && /huge/.test(this.options.cls) ) {
                     var newCaption = this.getCaptionWithBreaks(caption);
                     this.caption = newCaption || caption;
                 } else
@@ -890,7 +890,7 @@ define([
                     var captionNode = this.cmpEl.find('.caption');
 
                     if (captionNode.length > 0) {
-                        captionNode.html(this.caption);
+                        captionNode.html((this.split || this.menu) ? _.template(templateBtnCaption)({caption: this.caption}) : this.caption);
                     } else {
                         this.cmpEl.find('button:first').addBack().filter('button').html(this.caption);
                     }
diff --git a/apps/common/main/lib/controller/LayoutManager.js b/apps/common/main/lib/controller/LayoutManager.js
index fb0914a4b5..3d0480f0ad 100644
--- a/apps/common/main/lib/controller/LayoutManager.js
+++ b/apps/common/main/lib/controller/LayoutManager.js
@@ -48,10 +48,12 @@ if (Common.UI === undefined) {
 Common.UI.LayoutManager = new(function() {
     var _config,
         _licensed,
+        _api,
         _lastInternalTabIdx = 10;
-    var _init = function(config, licensed) {
+    var _init = function(config, licensed, api) {
         _config = config;
         _licensed = licensed;
+        _api = api;
     };
 
     var _applyCustomization = function(config, el, prefix) {
@@ -111,6 +113,43 @@ Common.UI.LayoutManager = new(function() {
         }
     };
 
+    var _findCustomButton = function(toolbar, action, guid, id) {
+        if (toolbar && toolbar.customButtonsArr) {
+            for (var i=0; i< toolbar.customButtonsArr.length; i++) {
+                var btn = toolbar.customButtonsArr[i];
+                if (btn.options.tabid === action && btn.options.guid === guid && btn.options.value === id) {
+                    return btn;
+                }
+            }
+        }
+    }
+
+    var _fillButtonMenu = function(items, guid, lang, toMenu) {
+        if (toMenu)
+            toMenu.removeAll();
+        else {
+            toMenu = new Common.UI.Menu({
+                cls: 'shifted-right',
+                menuAlign: 'tl-tr',
+                items: []
+            });
+            toMenu.on('item:click', function(menu, mi, e) {
+                _api && _api.onPluginButtonClick && _api.onPluginButtonClick(mi.options.guid, mi.value);
+            });
+        }
+        items.forEach(function(menuItem) {
+            if (menuItem.separator) toMenu.addItem({caption: '--'});
+            menuItem.text && toMenu.addItem({
+                caption: ((typeof menuItem.text == 'object') ? menuItem.text[lang] || menuItem.text['en'] : menuItem.text) || '',
+                value: menuItem.id,
+                menu: menuItem.items ? _fillButtonMenu(menuItem.items, guid, lang) : false,
+                iconImg: Common.UI.getSuitableIcons(Common.UI.iconsStr2IconsObj(menuItem.icons)),
+                guid: guid
+            });
+        });
+        return toMenu;
+    }
+
     var _createTab = function(toolbar, action, caption) {
         if (!toolbar || !action || !caption) return;
 
@@ -130,7 +169,7 @@ Common.UI.LayoutManager = new(function() {
         return toolbar.getTab(action) || _createTab(toolbar, action, caption);
     };
 
-    var _addCustomItems = function (toolbar, data, api) {
+    var _addCustomItems = function (toolbar, data) {
         if (!data || data.length<1) return;
 
         var lang = Common.Locale.getCurrentLanguage(),
@@ -148,7 +187,7 @@ Common.UI.LayoutManager = new(function() {
                         id: 'button-id',
                         type: 'button'='big-button' or 'small-button',
                         icons: 'template string' or object
-                        text: 'caption' or { "fr": "french caption", "es": "spanish caption"},
+                        text: 'caption' or { "fr": "french caption", "es": "spanish caption"} or - can be empty
                         hint: 'hint' or { "fr": "french hint", "es": "spanish hint"},
                         separator: true/false - inserted before item,
                         split: true/false - used when has menu
@@ -157,10 +196,12 @@ Common.UI.LayoutManager = new(function() {
                                 id: 'item-id',
                                 text: 'caption' or { "fr": "french caption", "es": "spanish caption"},
                                 separator: true/false - inserted before item,
+                                icons: 'template string' or object
                             }
                         ],
                         enableToggle: true/false - can press and depress button, only when no menu or has split menu
-                        lockInViewMode: true/false - lock in view mode
+                        lockInViewMode: true/false - lock in view modes (preview review, view forms, disconnect, etc.),
+                        disabled: true/false
                     }
                 ]
             }
@@ -169,6 +210,31 @@ Common.UI.LayoutManager = new(function() {
                 var $panel = _getTab(toolbar, plugin.tab.id, plugin.tab.text) || _getTab(toolbar, 'plugins');
                 if ($panel) {
                     plugin.items && plugin.items.forEach(function(item) {
+                        var btn = _findCustomButton(toolbar, plugin.tab.id, plugin.guid, item.id),
+                            _set = Common.enumLock;
+                        if (btn) { // change caption, hint, disable state, menu items
+                            if (btn instanceof Common.UI.Button) {
+                                var caption = ((typeof item.text == 'object') ? item.text[lang] || item.text['en'] : item.text) || '';
+                                if (btn.options.caption !== (caption || ' ')) {
+                                    btn.cmpEl.closest('.btn-slot.x-huge').toggleClass('emptycaption', !caption);
+                                    btn.setCaption(caption || ' ');
+                                    btn.options.caption = caption || ' ';
+                                }
+                                btn.updateHint(((typeof item.hint == 'object') ? item.hint[lang] || item.hint['en'] : item.hint) || '',);
+                                (item.disabled!==undefined) && Common.Utils.lockControls(_set.customLock, !!item.disabled, {array: [btn]});
+                                if (btn.menu && item.menu && item.menu.length > 0) {// update menu items
+                                    if (typeof btn.menu !== 'object') {
+                                        btn.setMenu(new Common.UI.Menu({items: []}));
+                                        btn.menu.on('item:click', function(menu, mi, e) {
+                                            _api && _api.onPluginButtonClick && _api.onPluginButtonClick(mi.options.guid, mi.value);
+                                        });
+                                    }
+                                    _fillButtonMenu(item.menu, plugin.guid, lang, btn.menu);
+                                }
+                            }
+                            return;
+                        }
+
                         var _groups = $panel.children().filter('.group'),
                             _group;
                         if (_groups.length>0 && !item.separator)
@@ -180,51 +246,45 @@ Common.UI.LayoutManager = new(function() {
                         }
 
                         if (item.type==='button' || item.type==='big-button') {
-                            var _set = Common.enumLock;
-                            var btn = new Common.UI.ButtonCustom({
+                            var caption = ((typeof item.text == 'object') ? item.text[lang] || item.text['en'] : item.text) || '';
+                            btn = new Common.UI.ButtonCustom({
                                 cls: 'btn-toolbar x-huge icon-top',
                                 iconsSet: item.icons,
-                                caption: ((typeof item.text == 'object') ? item.text[lang] || item.text['en'] : item.text) || '',
-                                menu: item.menu && item.menu.length > 0,
-                                split: item.menu && item.menu.length > 0 && !!item.split,
+                                caption: caption || ' ',
+                                menu: item.menu,
+                                split: item.menu && !!item.split,
                                 enableToggle: item.enableToggle && (!item.menu || !!item.split),
                                 value: item.id,
                                 guid: plugin.guid,
+                                tabid: plugin.tab.id,
                                 hint: ((typeof item.hint == 'object') ? item.hint[lang] || item.hint['en'] : item.hint) || '',
-                                lock: item.lockInViewMode ? [_set.viewMode, _set.previewReviewMode, _set.viewFormMode, _set.docLockView, _set.docLockForms, _set.docLockComments, _set.selRangeEdit, _set.editFormula ] : [],
+                                lock: item.lockInViewMode ? [_set.customLock, _set.viewMode, _set.previewReviewMode, _set.viewFormMode, _set.docLockView, _set.docLockForms, _set.docLockComments, _set.selRangeEdit, _set.editFormula ] : [_set.customLock],
                                 dataHint: '1',
                                 dataHintDirection: 'bottom',
                                 dataHintOffset: 'small'
                             });
 
-                            if (btn.menu) {
-                                var _menu_items = [];
-                                item.menu.forEach(function(menuItem) {
-                                    if (menuItem.separator) _menu_items.push({caption: '--'});
-                                    menuItem.text && _menu_items.push({
-                                        caption: ((typeof menuItem.text == 'object') ? menuItem.text[lang] || menuItem.text['en'] : menuItem.text) || '',
-                                        value: menuItem.id,
-                                        iconImg: Common.UI.getSuitableIcons(Common.UI.iconsStr2IconsObj(menuItem.icons)),
-                                        guid: plugin.guid
-                                    });
-                                });
-                                btn.setMenu(new Common.UI.Menu({
-                                    items: _menu_items
-                                }));
+                            if (item.menu && typeof item.menu === 'object') {
+                                btn.setMenu(new Common.UI.Menu({items: []}));
                                 btn.menu.on('item:click', function(menu, mi, e) {
-                                    api && api.onPluginButtonClick && api.onPluginButtonClick(mi.options.guid, mi.value);
+                                    _api && _api.onPluginButtonClick && _api.onPluginButtonClick(mi.options.guid, mi.value);
                                 });
+                                _fillButtonMenu(item.menu, plugin.guid, lang, btn.menu);
                             }
                             if ( !btn.menu || btn.split) {
                                 btn.on('click', function(b, e) {
-                                    api && api.onPluginButtonClick && api.onPluginButtonClick(b.options.guid, b.options.value, b.pressed);
+                                    _api && _api.onPluginButtonClick && _api.onPluginButtonClick(b.options.guid, b.options.value, b.pressed);
                                 });
                             }
-                            var $slot = $('<span class="btn-slot text x-huge"></span>').appendTo(_group);
+                            var $slot = $('<span class="btn-slot text x-huge ' + (!caption ? 'emptycaption' : '') + '"></span>').appendTo(_group);
                             btn.render($slot);
                             btns.push(btn);
+                            item.disabled && Common.Utils.lockControls(_set.customLock, item.disabled, {array: [btn]});
                         }
                     });
+                    if (!toolbar.customButtonsArr)
+                        toolbar.customButtonsArr = [];
+                    Array.prototype.push.apply(toolbar.customButtonsArr, btns);
                 }
             }
         });
diff --git a/apps/common/main/lib/view/ReviewChanges.js b/apps/common/main/lib/view/ReviewChanges.js
index dab7de765d..485e982553 100644
--- a/apps/common/main/lib/view/ReviewChanges.js
+++ b/apps/common/main/lib/view/ReviewChanges.js
@@ -65,7 +65,8 @@ define([
         viewFormMode:   'view-form-mode', // view form mode on Forms tab
         viewMode:       'view-mode', // view mode on disconnect, version history etc (used for locking buttons not in toolbar) or view mode from header mode button (for toolbar)
         hideComments:   'hide-comments', // no live comments and left panel is closed
-        cantShare: 'cant-share'
+        cantShare: 'cant-share',
+        customLock: 'custom-lock' // for custom buttons in toolbar
     };
     for (var key in enumLock) {
         if (enumLock.hasOwnProperty(key)) {
diff --git a/apps/documenteditor/main/app/controller/Main.js b/apps/documenteditor/main/app/controller/Main.js
index 1d245586d9..89b4c7a78f 100644
--- a/apps/documenteditor/main/app/controller/Main.js
+++ b/apps/documenteditor/main/app/controller/Main.js
@@ -1656,7 +1656,7 @@ define([
                 this.appOptions.canRename && appHeader.setCanRename(true);
                 this.appOptions.canBrandingExt = params.asc_getCanBranding() && (typeof this.editorConfig.customization == 'object' || this.editorConfig.plugins);
                 this.getApplication().getController('Common.Controllers.Plugins').setMode(this.appOptions, this.api);
-                this.editorConfig.customization && Common.UI.LayoutManager.init(this.editorConfig.customization.layout, this.appOptions.canBrandingExt);
+                this.editorConfig.customization && Common.UI.LayoutManager.init(this.editorConfig.customization.layout, this.appOptions.canBrandingExt, this.api);
                 this.editorConfig.customization && Common.UI.FeaturesManager.init(this.editorConfig.customization.features, this.appOptions.canBrandingExt);
                 Common.UI.ExternalUsers.init(this.appOptions.canRequestUsers);
                 this.appOptions.user.image && Common.UI.ExternalUsers.setImage(this.appOptions.user.id, this.appOptions.user.image);
diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js
index 5436f757ca..af94b74f46 100644
--- a/apps/documenteditor/main/app/controller/Toolbar.js
+++ b/apps/documenteditor/main/app/controller/Toolbar.js
@@ -3780,6 +3780,7 @@ define([
                         hint: 'hint',
                         separator: true,
                         split: false,
+                        // disabled: true,
                         menu: [
                             {
                                 id: 'item-id-1',
@@ -3803,6 +3804,17 @@ define([
                             {
                                 id: 'item-id-2',
                                 text: 'Text2',
+                                items: [
+                                    {
+                                        id: 'item-id-3',
+                                        text: 'Text3'
+                                    },
+                                    {
+                                        id: 'item-id-3',
+                                        text: 'Text3',
+                                        separator: true
+                                    }
+                                ],
                                 separator: true
                             }
                         ],
@@ -3831,8 +3843,7 @@ define([
                     }
                 ]
             }];
-            var btns = Common.UI.LayoutManager.addCustomItems(this.toolbar, data, this.api);
-            Array.prototype.push.apply(this.toolbar.lockControls, btns);
+            Array.prototype.push.apply(this.toolbar.lockControls, Common.UI.LayoutManager.addCustomItems(this.toolbar, data));
         },
 
         textEmptyImgUrl                            : 'You need to specify image URL.',
diff --git a/apps/pdfeditor/main/app/controller/Main.js b/apps/pdfeditor/main/app/controller/Main.js
index 157bdcdec4..6c09ced7a5 100644
--- a/apps/pdfeditor/main/app/controller/Main.js
+++ b/apps/pdfeditor/main/app/controller/Main.js
@@ -1266,7 +1266,7 @@ define([
                 this.appOptions.canRename && appHeader.setCanRename(true);
                 this.appOptions.canBrandingExt = params.asc_getCanBranding() && (typeof this.editorConfig.customization == 'object' || this.editorConfig.plugins);
                 this.getApplication().getController('Common.Controllers.Plugins').setMode(this.appOptions, this.api);
-                this.editorConfig.customization && Common.UI.LayoutManager.init(this.editorConfig.customization.layout, this.appOptions.canBrandingExt);
+                this.editorConfig.customization && Common.UI.LayoutManager.init(this.editorConfig.customization.layout, this.appOptions.canBrandingExt, this.api);
                 this.editorConfig.customization && Common.UI.FeaturesManager.init(this.editorConfig.customization.features, this.appOptions.canBrandingExt);
                 Common.UI.ExternalUsers.init(this.appOptions.canRequestUsers);
                 this.appOptions.user.image && Common.UI.ExternalUsers.setImage(this.appOptions.user.id, this.appOptions.user.image);
diff --git a/apps/presentationeditor/main/app/controller/Main.js b/apps/presentationeditor/main/app/controller/Main.js
index 523a06e116..20727e34d1 100644
--- a/apps/presentationeditor/main/app/controller/Main.js
+++ b/apps/presentationeditor/main/app/controller/Main.js
@@ -1296,7 +1296,7 @@ define([
                 this.appOptions.canRename && appHeader.setCanRename(true);
                 this.appOptions.canBrandingExt = params.asc_getCanBranding() && (typeof this.editorConfig.customization == 'object' || this.editorConfig.plugins);
                 this.getApplication().getController('Common.Controllers.Plugins').setMode(this.appOptions);
-                this.editorConfig.customization && Common.UI.LayoutManager.init(this.editorConfig.customization.layout, this.appOptions.canBrandingExt);
+                this.editorConfig.customization && Common.UI.LayoutManager.init(this.editorConfig.customization.layout, this.appOptions.canBrandingExt, this.api);
                 this.editorConfig.customization && Common.UI.FeaturesManager.init(this.editorConfig.customization.features, this.appOptions.canBrandingExt);
                 Common.UI.ExternalUsers.init(this.appOptions.canRequestUsers);
                 this.appOptions.user.image && Common.UI.ExternalUsers.setImage(this.appOptions.user.id, this.appOptions.user.image);
diff --git a/apps/spreadsheeteditor/main/app/controller/Main.js b/apps/spreadsheeteditor/main/app/controller/Main.js
index ddab25f8e1..4cd846266a 100644
--- a/apps/spreadsheeteditor/main/app/controller/Main.js
+++ b/apps/spreadsheeteditor/main/app/controller/Main.js
@@ -1412,7 +1412,7 @@ define([
                 if (!this.appOptions.isEditDiagram && !this.appOptions.isEditMailMerge && !this.appOptions.isEditOle) {
                     this.appOptions.canBrandingExt = params.asc_getCanBranding() && (typeof this.editorConfig.customization == 'object' || this.editorConfig.plugins);
                     this.getApplication().getController('Common.Controllers.Plugins').setMode(this.appOptions);
-                    this.editorConfig.customization && Common.UI.LayoutManager.init(this.editorConfig.customization.layout, this.appOptions.canBrandingExt);
+                    this.editorConfig.customization && Common.UI.LayoutManager.init(this.editorConfig.customization.layout, this.appOptions.canBrandingExt, this.api);
                     this.editorConfig.customization && Common.UI.FeaturesManager.init(this.editorConfig.customization.features, this.appOptions.canBrandingExt);
                     Common.UI.ExternalUsers.init(this.appOptions.canRequestUsers);
                     this.appOptions.user.image && Common.UI.ExternalUsers.setImage(this.appOptions.user.id, this.appOptions.user.image);

From 150caf42e7ac16133ffd7965f42ac8b2e6ed751f Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Thu, 1 Feb 2024 14:54:51 +0300
Subject: [PATCH 05/16] Fix adding custom buttons (more panel, compact buttons)

---
 apps/common/main/lib/component/Mixtbar.js     | 15 ++++++++
 .../main/lib/controller/LayoutManager.js      | 35 ++++++++++++++-----
 2 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js
index d2ecffac2c..8de13dea3f 100644
--- a/apps/common/main/lib/component/Mixtbar.js
+++ b/apps/common/main/lib/component/Mixtbar.js
@@ -398,6 +398,10 @@ define([
                 }
             },
 
+            getMorePanel: function(tab) {
+                return tab && btnsMore[tab] ? btnsMore[tab].panel : null;
+            },
+
             getLastTabIdx: function() {
                 return config.tabs.length;
             },
@@ -459,6 +463,9 @@ define([
                             _.each($active.find('.btn-slot .x-huge'), function(item) {
                                 _btns.push($(item).closest('.btn-slot'));
                             });
+                            btnsMore[data.tab] && btnsMore[data.tab].panel && _.each(btnsMore[data.tab].panel.find('.btn-slot .x-huge'), function(item) {
+                                _btns.push($(item).closest('.btn-slot'));
+                            });
                             data.buttons = _btns;
                         }
                         if (!_flex) {
@@ -593,6 +600,14 @@ define([
                 }
             },
 
+            clearActiveData: function(tab) {
+                var panel = this.$panels.filter('[data-tab=' + tab + ']');
+                if ( panel.length ) {
+                    var data = panel.data();
+                    data.buttons = data.flex = data.rightedge = data.leftedge = undefined;
+                }
+            },
+
             resizeToolbar: function(reset) {
                 var $active = this.$panels.filter('.active'),
                     more_section = $active.find('.more-box');
diff --git a/apps/common/main/lib/controller/LayoutManager.js b/apps/common/main/lib/controller/LayoutManager.js
index 3d0480f0ad..49ea5d8b64 100644
--- a/apps/common/main/lib/controller/LayoutManager.js
+++ b/apps/common/main/lib/controller/LayoutManager.js
@@ -207,9 +207,13 @@ Common.UI.LayoutManager = new(function() {
             }
             */
             if (plugin.tab) {
-                var $panel = _getTab(toolbar, plugin.tab.id, plugin.tab.text) || _getTab(toolbar, 'plugins');
+                var $panel = _getTab(toolbar, plugin.tab.id, plugin.tab.text) || _getTab(toolbar, 'plugins'),
+                    $morepanel = toolbar.getMorePanel(plugin.tab.id),
+                    $moresection = $panel.find('.more-box'),
+                    compactcls = '';
+                ($moresection.length<1) && ($moresection = null);
                 if ($panel) {
-                    plugin.items && plugin.items.forEach(function(item) {
+                    plugin.items && plugin.items.forEach(function(item, index) {
                         var btn = _findCustomButton(toolbar, plugin.tab.id, plugin.guid, item.id),
                             _set = Common.enumLock;
                         if (btn) { // change caption, hint, disable state, menu items
@@ -235,14 +239,27 @@ Common.UI.LayoutManager = new(function() {
                             return;
                         }
 
-                        var _groups = $panel.children().filter('.group'),
-                            _group;
-                        if (_groups.length>0 && !item.separator)
+                        var _groups, _group;
+                        if ($morepanel) {
+                            _groups = $morepanel.children().filter('.group');
+                            if (_groups.length>0) {
+                                $moresection = null;
+                                $panel = $morepanel;
+                                compactcls = 'compactwidth';
+                            }
+                        }
+                        if (!_groups || _groups.length<1)
+                            _groups = $panel.children().filter('.group');
+
+                        if (_groups.length>0 && !item.separator && index>0) // add first item to new group
                             _group = $(_groups[_groups.length-1]);
                         else {
-                            item.separator && $('<div class="separator long"></div>').appendTo($panel);
+                            if (item.separator) {
+                                var el = $('<div class="separator long"></div>');
+                                $moresection ? $moresection.before(el) : el.appendTo($panel);
+                            }
                             _group = $('<div class="group"></div>');
-                            _group.appendTo($panel);
+                            $moresection ? $moresection.before(_group) : _group.appendTo($panel);
                         }
 
                         if (item.type==='button' || item.type==='big-button') {
@@ -276,12 +293,14 @@ Common.UI.LayoutManager = new(function() {
                                     _api && _api.onPluginButtonClick && _api.onPluginButtonClick(b.options.guid, b.options.value, b.pressed);
                                 });
                             }
-                            var $slot = $('<span class="btn-slot text x-huge ' + (!caption ? 'emptycaption' : '') + '"></span>').appendTo(_group);
+                            var $slot = $('<span class="btn-slot text x-huge ' + (!caption ? 'emptycaption ' : ' ') + compactcls + '"></span>').appendTo(_group);
                             btn.render($slot);
                             btns.push(btn);
                             item.disabled && Common.Utils.lockControls(_set.customLock, item.disabled, {array: [btn]});
                         }
                     });
+                    toolbar.clearActiveData(plugin.tab.id);
+                    toolbar.processPanelVisible(null, true, true);
                     if (!toolbar.customButtonsArr)
                         toolbar.customButtonsArr = [];
                     Array.prototype.push.apply(toolbar.customButtonsArr, btns);

From 69ba180320774f2477a296ce19877a8d9b06874b Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Thu, 1 Feb 2024 15:32:37 +0300
Subject: [PATCH 06/16] Refactoring

---
 apps/common/main/lib/component/Mixtbar.js       |  9 +++++++++
 .../common/main/lib/controller/LayoutManager.js | 17 +----------------
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js
index 8de13dea3f..4a29b34f96 100644
--- a/apps/common/main/lib/component/Mixtbar.js
+++ b/apps/common/main/lib/component/Mixtbar.js
@@ -398,6 +398,15 @@ define([
                 }
             },
 
+            createTab: function(action, caption, visible) {
+                if (!action || !caption) return;
+
+                var _panel = $('<section id="' + action + '" class="panel" data-tab="' + action + '"></section>');
+                this.addTab({action: action, caption: caption}, _panel, this.getLastTabIdx());
+                this.setVisible(action, !!visible);
+                return _panel;
+            },
+
             getMorePanel: function(tab) {
                 return tab && btnsMore[tab] ? btnsMore[tab].panel : null;
             },
diff --git a/apps/common/main/lib/controller/LayoutManager.js b/apps/common/main/lib/controller/LayoutManager.js
index 49ea5d8b64..5db6bbcc80 100644
--- a/apps/common/main/lib/controller/LayoutManager.js
+++ b/apps/common/main/lib/controller/LayoutManager.js
@@ -150,23 +150,8 @@ Common.UI.LayoutManager = new(function() {
         return toMenu;
     }
 
-    var _createTab = function(toolbar, action, caption) {
-        if (!toolbar || !action || !caption) return;
-
-        var _tab = {action: action, caption: caption},
-            _panel = $('<section id="' + action + '" class="panel" data-tab="' + action + '"></section>'),
-            _group = $('<div class="group"></div>');
-        _group.appendTo(_panel);
-
-        toolbar.addTab(_tab, _panel, toolbar.getLastTabIdx());
-        toolbar.setVisible(action, true);
-        console.log('create ' + action);
-        return _panel;
-    };
-
     var _getTab = function (toolbar, action, caption) {
-        if (!toolbar || !action) return;
-        return toolbar.getTab(action) || _createTab(toolbar, action, caption);
+        return toolbar && action ? toolbar.getTab(action) || toolbar.createTab(action, caption, true) : null;
     };
 
     var _addCustomItems = function (toolbar, data) {

From 50f7584ff8802ee9e3ec18d9c7e223cd28a66502 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Fri, 2 Feb 2024 16:47:33 +0300
Subject: [PATCH 07/16] Refactoring resizing combodataview in toolbar

---
 .../main/lib/component/ComboDataView.js       | 116 ++++++++++++------
 apps/common/main/lib/component/Mixtbar.js     |  35 ++++--
 .../main/lib/controller/LayoutManager.js      |   2 +-
 apps/common/main/lib/controller/Plugins.js    |   2 +-
 .../main/app/controller/Toolbar.js            |   2 +-
 apps/pdfeditor/main/app/controller/Toolbar.js |   2 +-
 .../main/app/controller/Toolbar.js            |   2 +-
 .../main/app/view/Animation.js                |   1 +
 .../main/app/view/Transitions.js              |   1 +
 .../main/app/controller/Toolbar.js            |   2 +-
 10 files changed, 112 insertions(+), 53 deletions(-)

diff --git a/apps/common/main/lib/component/ComboDataView.js b/apps/common/main/lib/component/ComboDataView.js
index f4603396cb..940e7eb1e6 100644
--- a/apps/common/main/lib/component/ComboDataView.js
+++ b/apps/common/main/lib/component/ComboDataView.js
@@ -142,9 +142,6 @@ define([
                 this.openButton.menu.setInnerMenu([{menu: this.menuPicker, index: 0}]);
             }
 
-            // Handle resize
-            setInterval(_.bind(this.checkSize, this), 500);
-
             if (this.options.el) {
                 this.render();
             }
@@ -200,6 +197,8 @@ define([
                     });
                 }
 
+                me.autoWidth && me.cmpEl.addClass('auto-width');
+
                 me.fieldPicker.on('item:select', _.bind(me.onFieldPickerSelect, me));
                 me.menuPicker.on('item:select',  _.bind(me.onMenuPickerSelect, me));
                 me.fieldPicker.on('item:click',  _.bind(me.onFieldPickerClick, me));
@@ -211,9 +210,10 @@ define([
                 me.menuPicker.el.addEventListener('contextmenu', _.bind(me.onPickerComboContextMenu, me), false);
 
                 Common.NotificationCenter.on('more:toggle', _.bind(this.onMoreToggle, this));
-
+                Common.NotificationCenter.on('tab:active', _.bind(this.onTabActive, this));
+                Common.NotificationCenter.on('window:resize', _.bind(this.startCheckSize, this));
+                me.checkSize();
                 me.onResize();
-
                 me.rendered = true;
                 
                 me.trigger('render:after', me);
@@ -227,17 +227,40 @@ define([
 
         onMoreToggle: function(btn, state) {
             if(state) {
-                this.checkSize();
+                this.startCheckSize();
             }
         },
 
+        onTabActive: function() {
+            this.startCheckSize();
+        },
+
+        startCheckSize: function() {
+            if (!this.cmpEl || !this.cmpEl.is(':visible')) return;
+
+            var me = this;
+            me.checkSize();
+            if (!me._timer_id) {
+                me._needCheckSize = 0;
+                me._timer_id =  setInterval(function() {
+                    if (me._needCheckSize++ < 10)
+                        me.checkSize();
+                    else {
+                        clearInterval(me._timer_id);
+                        delete me._timer_id;
+                    }
+                }, 500);
+            } else
+                me._needCheckSize = 0;
+        },
+
         checkSize: function() {
             if (this.cmpEl && this.cmpEl.is(':visible')) {
                 if(this.autoWidth && this.menuPicker.store.length > 0) {
                     var wrapWidth = this.$el.width();
                     if(wrapWidth != this.wrapWidth || this.needFillComboView){
-                        this.wrapWidth = wrapWidth;
-                        this.autoChangeWidth();
+                        wrapWidth = this.autoChangeWidth();
+                        wrapWidth && (this.wrapWidth = wrapWidth);
 
                         var picker = this.menuPicker;
                         var record = picker.getSelectedRec();
@@ -248,7 +271,6 @@ define([
                 var me = this,
                     width  = this.cmpEl.width(),
                     height = this.cmpEl.height();
-
                 if (width < this.minWidth) return;
 
                 if (this.rootWidth != width || this.rootHeight != height) {
@@ -290,32 +312,13 @@ define([
     
         autoChangeWidth: function() {
             if(this.menuPicker.dataViewItems[0]){
-                var wrapEl = this.$el;
-                var wrapWidth = wrapEl.width();
-
-                var itemEl = this.menuPicker.dataViewItems[0].$el;
-                var itemWidth = this.itemWidth + parseFloat(itemEl.css('padding-left')) + parseFloat(itemEl.css('padding-right')) + 2 * parseFloat(itemEl.css('border-width'));
-                var itemMargins = parseFloat(itemEl.css('margin-left')) + parseFloat(itemEl.css('margin-right'));
-
-                var fieldPickerEl = this.fieldPicker.$el;
-                var fieldPickerPadding = parseFloat(fieldPickerEl.css(Common.UI.isRTL() ? 'padding-left' : 'padding-right'));
-                var fieldPickerBorder = parseFloat(fieldPickerEl.css('border-width'));
-                var dataviewPaddings = parseFloat(this.fieldPicker.$el.find('.dataview').css('padding-left')) + parseFloat(this.fieldPicker.$el.find('.dataview').css('padding-right'));
-
-                var cmbDataViewEl = this.cmpEl;
-                var cmbDataViewPaddings = parseFloat(cmbDataViewEl.css('padding-left')) + parseFloat(cmbDataViewEl.css('padding-right'));
-
-                var itemsCount =  Math.floor((wrapWidth - fieldPickerPadding - dataviewPaddings - 2 * fieldPickerBorder - cmbDataViewPaddings) / (itemWidth + itemMargins));
-                if(itemsCount > this.store.length) 
-                    itemsCount = this.store.length;
-
-                var widthCalc = Math.ceil((itemsCount * (itemWidth + itemMargins) + fieldPickerPadding + dataviewPaddings + 2 * fieldPickerBorder + cmbDataViewPaddings) * 10) / 10;
-                
-                var maxWidth = parseFloat(cmbDataViewEl.css('max-width'));
-                if(widthCalc > maxWidth)
-                    widthCalc = maxWidth;
-                    
-                cmbDataViewEl.css('width', widthCalc);
+                var wrapEl = this.$el,
+                    widthCalc = this.checkAutoWidth(wrapEl, wrapEl.width()),
+                    cmbDataViewEl = this.cmpEl;
+                if (widthCalc) {
+                    cmbDataViewEl.css('width', widthCalc);
+                    wrapEl.css('width', (widthCalc + parseFloat(wrapEl.css('padding-left')) + parseFloat(wrapEl.css('padding-right'))) + 'px');
+                }
 
                 if(this.initAutoWidth) {
                     this.initAutoWidth = false;
@@ -324,9 +327,50 @@ define([
                     cmbDataViewEl.css('bottom', '50%');
                     cmbDataViewEl.css('margin', 'auto 0');
                 }
+
+                return widthCalc;
             }
         },
-        
+
+        checkAutoWidth: function(el, width) {
+            var $menuPicker = el.find('.menu-picker'),
+                $fieldPicker = el.find('.field-picker').closest('.view'),
+                cmbDataViewEl = el.find('.combo-dataview');
+            if ($menuPicker && $menuPicker.length>0) {
+                var itemEl = $menuPicker.find('.item'),
+                    storeLength = itemEl.length,
+                    fieldItemEl = $fieldPicker.find('.item');
+                if (itemEl.length>0) {
+                    itemEl = $(itemEl[0]);
+                    var itemWidth = itemEl.width();
+                    if (itemWidth<1) {
+                        itemWidth = fieldItemEl.length>0 ? $(fieldItemEl[0]).width() : 0;
+                    }
+                    if (itemWidth<1) return;
+
+                    itemWidth += parseFloat(itemEl.css('padding-left')) + parseFloat(itemEl.css('padding-right')) + 2 * parseFloat(itemEl.css('border-width'));
+                    var itemMargins = parseFloat(itemEl.css('margin-left')) + parseFloat(itemEl.css('margin-right'));
+
+                    var fieldPickerPadding = parseFloat($fieldPicker.css(Common.UI.isRTL() ? 'padding-left' : 'padding-right'));
+                    var fieldPickerBorder = parseFloat($fieldPicker.css('border-width'));
+                    var dataView = $fieldPicker.find('.dataview');
+                    var dataviewPaddings = parseFloat(dataView.css('padding-left')) + parseFloat(dataView.css('padding-right'));
+
+                    var cmbDataViewPaddings = parseFloat(cmbDataViewEl.css('padding-left')) + parseFloat(cmbDataViewEl.css('padding-right'));
+                    var itemsCount =  Math.floor((width - fieldPickerPadding - dataviewPaddings - 2 * fieldPickerBorder - cmbDataViewPaddings) / (itemWidth + itemMargins));
+                    if(itemsCount > storeLength)
+                        itemsCount = storeLength;
+
+                    var widthCalc = Math.ceil((itemsCount * (itemWidth + itemMargins) + fieldPickerPadding + dataviewPaddings + 2 * fieldPickerBorder + cmbDataViewPaddings) * 10) / 10;
+                    var maxWidth = parseFloat(cmbDataViewEl.css('max-width'));
+                    if(widthCalc > maxWidth)
+                        widthCalc = maxWidth;
+
+                    return widthCalc;
+                }
+            }
+        },
+
         onBeforeShowMenu: function(e) {
             var me = this;
 
diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js
index 4a29b34f96..a999a30e76 100644
--- a/apps/common/main/lib/component/Mixtbar.js
+++ b/apps/common/main/lib/component/Mixtbar.js
@@ -305,7 +305,7 @@ define([
                             me._timerSetTab = false;
                         }, 500);
                         me.setTab(tab);
-                        // me.processPanelVisible(null, true);
+                        // me.processPanelVisible();
                         if ( !me.isFolded ) {
                             if ( me.dblclick_timer ) clearTimeout(me.dblclick_timer);
                             me.dblclick_timer = setTimeout(function () {
@@ -337,7 +337,7 @@ define([
                         this.lastPanel = tab;
                         panel.addClass('active');
                         me.setMoreButton(tab, panel);
-                        me.processPanelVisible(null, true, true);
+                        me.processPanelVisible(null, true);
                     }
 
                     if ( panel.length ) {
@@ -353,6 +353,7 @@ define([
                     }
 
                     this.fireEvent('tab:active', [tab]);
+                    Common.NotificationCenter.trigger('tab:active',[tab]);
                 }
             },
 
@@ -446,10 +447,8 @@ define([
              * hide button's caption to decrease panel width
              * ##adopt-panel-width
             **/
-            processPanelVisible: function(panel, now, force) {
+            processPanelVisible: function(panel, force) {
                 var me = this;
-                if ( me._timer_id ) clearTimeout(me._timer_id);
-
                 function _fc() {
                     var $active = panel || me.$panels.filter('.active');
                     if ( $active && $active.length ) {
@@ -529,8 +528,13 @@ define([
                                 data.rightedge = _rightedge;
                                 if (_flex.length>0 && $active.find('.btn-slot.compactwidth').length<1) {
                                     for (var i=0; i<_flex.length; i++) {
-                                        var item = _flex[i];
-                                        item.el.css('width', item.width);
+                                        var item = _flex[i],
+                                            checkedwidth;
+                                        if (item.el.find('.combo-dataview').hasClass('auto-width')) {
+                                            checkedwidth = Common.UI.ComboDataView.prototype.checkAutoWidth(item.el,
+                                                me.$boxpanels.width() - $active.outerWidth() + item.el.width());
+                                        }
+                                        item.el.css('width', checkedwidth ? (checkedwidth + parseFloat(item.el.css('padding-left')) + parseFloat(item.el.css('padding-right'))) + 'px' : item.width);
                                         data.rightedge = $active.get(0).getBoundingClientRect().right;
                                     }
                                 }
@@ -539,11 +543,20 @@ define([
                     }
                 };
 
-                if ( now === true ) _fc(); else
-                me._timer_id =  setTimeout(function() {
-                    delete me._timer_id;
+                if (!me._timer_id) {
                     _fc();
-                }, 100);
+                    me._needProcessPanel = false;
+                    me._timer_id =  setInterval(function() {
+                        if (me._needProcessPanel) {
+                            _fc();
+                            me._needProcessPanel = false;
+                        } else {
+                            clearInterval(me._timer_id);
+                            delete me._timer_id;
+                        }
+                    }, 100);
+                } else
+                    me._needProcessPanel = true;
             },
             /**/
 
diff --git a/apps/common/main/lib/controller/LayoutManager.js b/apps/common/main/lib/controller/LayoutManager.js
index 5db6bbcc80..0172fb01d5 100644
--- a/apps/common/main/lib/controller/LayoutManager.js
+++ b/apps/common/main/lib/controller/LayoutManager.js
@@ -285,7 +285,7 @@ Common.UI.LayoutManager = new(function() {
                         }
                     });
                     toolbar.clearActiveData(plugin.tab.id);
-                    toolbar.processPanelVisible(null, true, true);
+                    toolbar.processPanelVisible(null, true);
                     if (!toolbar.customButtonsArr)
                         toolbar.customButtonsArr = [];
                     Array.prototype.push.apply(toolbar.customButtonsArr, btns);
diff --git a/apps/common/main/lib/controller/Plugins.js b/apps/common/main/lib/controller/Plugins.js
index cc5367422e..34316970ab 100644
--- a/apps/common/main/lib/controller/Plugins.js
+++ b/apps/common/main/lib/controller/Plugins.js
@@ -459,7 +459,7 @@ define([
                     me.viewPlugins.backgroundBtn.menu.on('show:before', onShowBefore);
                 }
 
-                me.toolbar && me.toolbar.isTabActive('plugins') && me.toolbar.processPanelVisible(null, true, true);
+                me.toolbar && me.toolbar.isTabActive('plugins') && me.toolbar.processPanelVisible(null, true);
                 var docProtection = me.viewPlugins._state.docProtection;
                 Common.Utils.lockControls(Common.enumLock.docLockView, docProtection.isReadOnly, {array: me.viewPlugins.lockedControls});
                 Common.Utils.lockControls(Common.enumLock.docLockForms, docProtection.isFormsOnly, {array: me.viewPlugins.lockedControls});
diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js
index af94b74f46..e564fb42b5 100644
--- a/apps/documenteditor/main/app/controller/Toolbar.js
+++ b/apps/documenteditor/main/app/controller/Toolbar.js
@@ -3429,7 +3429,7 @@ define([
                     me.toolbar.btnPaste.$el.detach().appendTo($box);
                     me.toolbar.btnPaste.$el.find('button').attr('data-hint-direction', 'bottom');
                     me.toolbar.btnCopy.$el.removeClass('split');
-                    me.toolbar.processPanelVisible(null, true, true);
+                    me.toolbar.processPanelVisible(null, true);
                 }
 
                 // if ( config.isDesktopApp ) {
diff --git a/apps/pdfeditor/main/app/controller/Toolbar.js b/apps/pdfeditor/main/app/controller/Toolbar.js
index 28c0a013d7..c7c9128459 100644
--- a/apps/pdfeditor/main/app/controller/Toolbar.js
+++ b/apps/pdfeditor/main/app/controller/Toolbar.js
@@ -886,7 +886,7 @@ define([
                     me.toolbar.btnPaste.$el.detach().appendTo($box);
                     me.toolbar.btnPaste.$el.find('button').attr('data-hint-direction', 'bottom');
                     me.toolbar.btnCopy.$el.removeClass('split');
-                    me.toolbar.processPanelVisible(null, true, true);
+                    me.toolbar.processPanelVisible(null, true);
                 }
             }
             if ( config.isEdit ) {
diff --git a/apps/presentationeditor/main/app/controller/Toolbar.js b/apps/presentationeditor/main/app/controller/Toolbar.js
index 50525d371a..297d5d5872 100644
--- a/apps/presentationeditor/main/app/controller/Toolbar.js
+++ b/apps/presentationeditor/main/app/controller/Toolbar.js
@@ -2743,7 +2743,7 @@ define([
                     me.toolbar.btnPaste.$el.detach().appendTo($box);
                     me.toolbar.btnPaste.$el.find('button').attr('data-hint-direction', 'bottom');
                     me.toolbar.btnCopy.$el.removeClass('split');
-                    me.toolbar.processPanelVisible(null, true, true);
+                    me.toolbar.processPanelVisible(null, true);
                 }
 
                 if ( config.isDesktopApp ) {
diff --git a/apps/presentationeditor/main/app/view/Animation.js b/apps/presentationeditor/main/app/view/Animation.js
index 628d0b8f01..9d9b336261 100644
--- a/apps/presentationeditor/main/app/view/Animation.js
+++ b/apps/presentationeditor/main/app/view/Animation.js
@@ -206,6 +206,7 @@ define([
                     itemWidth: itemWidth,
                     itemHeight: itemHeight,
                     style: 'min-width:200px;',
+                    autoWidth:       true,
                     itemTemplate: _.template([
                         '<div  class = "btn_item x-huge" id = "<%= id %>" style = "width: ' + itemWidth + 'px;height: ' + itemHeight + 'px;">',
                             '<div class = "icon toolbar__icon <%= iconCls %>"></div>',
diff --git a/apps/presentationeditor/main/app/view/Transitions.js b/apps/presentationeditor/main/app/view/Transitions.js
index 3af84cd1e8..731a2b68e3 100644
--- a/apps/presentationeditor/main/app/view/Transitions.js
+++ b/apps/presentationeditor/main/app/view/Transitions.js
@@ -143,6 +143,7 @@ define([
                     itemWidth: itemWidth,
                     itemHeight: itemHeight,
                     style: 'min-width:108px;',
+                    autoWidth:       true,
                     itemTemplate: _.template([
                         '<div  class = "btn_item x-huge" id = "<%= id %>" style = "width: ' + itemWidth + 'px;height: ' + itemHeight + 'px;">',
                         '<div class = "icon toolbar__icon <%= imageUrl %>"></div>',
diff --git a/apps/spreadsheeteditor/main/app/controller/Toolbar.js b/apps/spreadsheeteditor/main/app/controller/Toolbar.js
index 888dec05ca..19c2d47502 100644
--- a/apps/spreadsheeteditor/main/app/controller/Toolbar.js
+++ b/apps/spreadsheeteditor/main/app/controller/Toolbar.js
@@ -4636,7 +4636,7 @@ define([
                         me.toolbar.btnPaste.$el.detach().appendTo($box);
                         me.toolbar.btnPaste.$el.find('button').attr('data-hint-direction', 'bottom');
                         me.toolbar.btnCopy.$el.removeClass('split');
-                        me.toolbar.processPanelVisible(null, true, true);
+                        me.toolbar.processPanelVisible(null, true);
                     }
 
                     if ( config.canProtect ) {

From 5b5ce52a7cd4318d7f9d93c86af3304b3df9cda4 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Fri, 2 Feb 2024 23:19:42 +0300
Subject: [PATCH 08/16] Refactoring custom buttons

---
 apps/common/main/lib/component/Mixtbar.js     |  51 +++++-
 .../main/lib/controller/LayoutManager.js      | 153 +++++++-----------
 apps/common/main/resources/less/buttons.less  |   2 +-
 apps/common/main/resources/less/toolbar.less  |  30 ++--
 4 files changed, 121 insertions(+), 115 deletions(-)

diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js
index a999a30e76..d8ac8f516d 100644
--- a/apps/common/main/lib/component/Mixtbar.js
+++ b/apps/common/main/lib/component/Mixtbar.js
@@ -399,12 +399,12 @@ define([
                 }
             },
 
-            createTab: function(action, caption, visible) {
-                if (!action || !caption) return;
+            createTab: function(tab, visible) {
+                if (!tab.action || !tab.caption) return;
 
-                var _panel = $('<section id="' + action + '" class="panel" data-tab="' + action + '"></section>');
-                this.addTab({action: action, caption: caption}, _panel, this.getLastTabIdx());
-                this.setVisible(action, !!visible);
+                var _panel = $('<section id="' + tab.action + '" class="panel" data-tab="' + tab.action + '"></section>');
+                this.addTab(tab, _panel, this.getLastTabIdx());
+                this.setVisible(tab.action, !!visible);
                 return _panel;
             },
 
@@ -630,6 +630,47 @@ define([
                 }
             },
 
+            addCustomItems: function(tab, buttons) {
+                if (!tab.action) return;
+
+                var $panel = tab.action ? this.getTab(tab.action) || this.createTab(tab, true) || this.getTab('plugins') : null,
+                    $morepanel = this.getMorePanel(tab.action),
+                    $moresection = $panel ? $panel.find('.more-box') : null,
+                    compactcls = '';
+                ($moresection.length<1) && ($moresection = null);
+                if ($panel) {
+                    buttons && buttons.forEach(function(button, index) {
+                        var _groups, _group;
+                        if ($morepanel) {
+                            _groups = $morepanel.children().filter('.group');
+                            if (_groups.length>0) {
+                                $moresection = null;
+                                $panel = $morepanel;
+                                compactcls = 'compactwidth';
+                            }
+                        }
+                        if (!_groups || _groups.length<1)
+                            _groups = $panel.children().filter('.group');
+
+                        if (_groups.length>0 && !button.options.separator && index>0) // add first button to new group
+                            _group = $(_groups[_groups.length-1]);
+                        else {
+                            if (button.options.separator) {
+                                var el = $('<div class="separator long"></div>');
+                                $moresection ? $moresection.before(el) : el.appendTo($panel);
+                            }
+                            _group = $('<div class="group"></div>');
+                            $moresection ? $moresection.before(_group) : _group.appendTo($panel);
+                        }
+                        var $slot = $('<span class="btn-slot text x-huge ' + (!(button.options.caption || '').trim() ? 'nocaption ' : ' ') + compactcls + '"></span>').appendTo(_group);
+                        button.render($slot);
+                    });
+                }
+                this.clearActiveData(tab.action);
+                this.processPanelVisible(null, true);
+            },
+
+
             resizeToolbar: function(reset) {
                 var $active = this.$panels.filter('.active'),
                     more_section = $active.find('.more-box');
diff --git a/apps/common/main/lib/controller/LayoutManager.js b/apps/common/main/lib/controller/LayoutManager.js
index 0172fb01d5..4ba09999c9 100644
--- a/apps/common/main/lib/controller/LayoutManager.js
+++ b/apps/common/main/lib/controller/LayoutManager.js
@@ -150,10 +150,6 @@ Common.UI.LayoutManager = new(function() {
         return toMenu;
     }
 
-    var _getTab = function (toolbar, action, caption) {
-        return toolbar && action ? toolbar.getTab(action) || toolbar.createTab(action, caption, true) : null;
-    };
-
     var _addCustomItems = function (toolbar, data) {
         if (!data || data.length<1) return;
 
@@ -192,104 +188,72 @@ Common.UI.LayoutManager = new(function() {
             }
             */
             if (plugin.tab) {
-                var $panel = _getTab(toolbar, plugin.tab.id, plugin.tab.text) || _getTab(toolbar, 'plugins'),
-                    $morepanel = toolbar.getMorePanel(plugin.tab.id),
-                    $moresection = $panel.find('.more-box'),
-                    compactcls = '';
-                ($moresection.length<1) && ($moresection = null);
-                if ($panel) {
-                    plugin.items && plugin.items.forEach(function(item, index) {
-                        var btn = _findCustomButton(toolbar, plugin.tab.id, plugin.guid, item.id),
-                            _set = Common.enumLock;
-                        if (btn) { // change caption, hint, disable state, menu items
-                            if (btn instanceof Common.UI.Button) {
-                                var caption = ((typeof item.text == 'object') ? item.text[lang] || item.text['en'] : item.text) || '';
-                                if (btn.options.caption !== (caption || ' ')) {
-                                    btn.cmpEl.closest('.btn-slot.x-huge').toggleClass('emptycaption', !caption);
-                                    btn.setCaption(caption || ' ');
-                                    btn.options.caption = caption || ' ';
-                                }
-                                btn.updateHint(((typeof item.hint == 'object') ? item.hint[lang] || item.hint['en'] : item.hint) || '',);
-                                (item.disabled!==undefined) && Common.Utils.lockControls(_set.customLock, !!item.disabled, {array: [btn]});
-                                if (btn.menu && item.menu && item.menu.length > 0) {// update menu items
-                                    if (typeof btn.menu !== 'object') {
-                                        btn.setMenu(new Common.UI.Menu({items: []}));
-                                        btn.menu.on('item:click', function(menu, mi, e) {
-                                            _api && _api.onPluginButtonClick && _api.onPluginButtonClick(mi.options.guid, mi.value);
-                                        });
-                                    }
-                                    _fillButtonMenu(item.menu, plugin.guid, lang, btn.menu);
+                plugin.items && plugin.items.forEach(function(item, index) {
+                    var btn = _findCustomButton(toolbar, plugin.tab.id, plugin.guid, item.id),
+                        _set = Common.enumLock;
+                    if (btn) { // change caption, hint, disable state, menu items
+                        if (btn instanceof Common.UI.Button) {
+                            var caption = ((typeof item.text == 'object') ? item.text[lang] || item.text['en'] : item.text) || '';
+                            if (btn.options.caption !== (caption || ' ')) {
+                                btn.cmpEl.closest('.btn-slot.x-huge').toggleClass('nocaption', !caption);
+                                btn.setCaption(caption || ' ');
+                                btn.options.caption = caption || ' ';
+                            }
+                            btn.updateHint(((typeof item.hint == 'object') ? item.hint[lang] || item.hint['en'] : item.hint) || '',);
+                            (item.disabled!==undefined) && Common.Utils.lockControls(_set.customLock, !!item.disabled, {array: [btn]});
+                            if (btn.menu && item.menu && item.menu.length > 0) {// update menu items
+                                if (typeof btn.menu !== 'object') {
+                                    btn.setMenu(new Common.UI.Menu({items: []}));
+                                    btn.menu.on('item:click', function(menu, mi, e) {
+                                        _api && _api.onPluginButtonClick && _api.onPluginButtonClick(mi.options.guid, mi.value);
+                                    });
                                 }
+                                _fillButtonMenu(item.menu, plugin.guid, lang, btn.menu);
                             }
-                            return;
                         }
+                        return;
+                    }
 
-                        var _groups, _group;
-                        if ($morepanel) {
-                            _groups = $morepanel.children().filter('.group');
-                            if (_groups.length>0) {
-                                $moresection = null;
-                                $panel = $morepanel;
-                                compactcls = 'compactwidth';
-                            }
-                        }
-                        if (!_groups || _groups.length<1)
-                            _groups = $panel.children().filter('.group');
+                    if (item.type==='button' || item.type==='big-button') {
+                        btn = new Common.UI.ButtonCustom({
+                            cls: 'btn-toolbar x-huge icon-top',
+                            iconsSet: item.icons,
+                            caption: ((typeof item.text == 'object') ? item.text[lang] || item.text['en'] : item.text) || ' ',
+                            menu: item.menu,
+                            split: item.menu && !!item.split,
+                            enableToggle: item.enableToggle && (!item.menu || !!item.split),
+                            value: item.id,
+                            guid: plugin.guid,
+                            tabid: plugin.tab.id,
+                            separator: item.separator,
+                            hint: ((typeof item.hint == 'object') ? item.hint[lang] || item.hint['en'] : item.hint) || '',
+                            lock: item.lockInViewMode ? [_set.customLock, _set.viewMode, _set.previewReviewMode, _set.viewFormMode, _set.docLockView, _set.docLockForms, _set.docLockComments, _set.selRangeEdit, _set.editFormula ] : [_set.customLock],
+                            dataHint: '1',
+                            dataHintDirection: 'bottom',
+                            dataHintOffset: 'small'
+                        });
 
-                        if (_groups.length>0 && !item.separator && index>0) // add first item to new group
-                            _group = $(_groups[_groups.length-1]);
-                        else {
-                            if (item.separator) {
-                                var el = $('<div class="separator long"></div>');
-                                $moresection ? $moresection.before(el) : el.appendTo($panel);
-                            }
-                            _group = $('<div class="group"></div>');
-                            $moresection ? $moresection.before(_group) : _group.appendTo($panel);
+                        if (item.menu && typeof item.menu === 'object') {
+                            btn.setMenu(new Common.UI.Menu({items: []}));
+                            btn.menu.on('item:click', function(menu, mi, e) {
+                                _api && _api.onPluginButtonClick && _api.onPluginButtonClick(mi.options.guid, mi.value);
+                            });
+                            _fillButtonMenu(item.menu, plugin.guid, lang, btn.menu);
                         }
-
-                        if (item.type==='button' || item.type==='big-button') {
-                            var caption = ((typeof item.text == 'object') ? item.text[lang] || item.text['en'] : item.text) || '';
-                            btn = new Common.UI.ButtonCustom({
-                                cls: 'btn-toolbar x-huge icon-top',
-                                iconsSet: item.icons,
-                                caption: caption || ' ',
-                                menu: item.menu,
-                                split: item.menu && !!item.split,
-                                enableToggle: item.enableToggle && (!item.menu || !!item.split),
-                                value: item.id,
-                                guid: plugin.guid,
-                                tabid: plugin.tab.id,
-                                hint: ((typeof item.hint == 'object') ? item.hint[lang] || item.hint['en'] : item.hint) || '',
-                                lock: item.lockInViewMode ? [_set.customLock, _set.viewMode, _set.previewReviewMode, _set.viewFormMode, _set.docLockView, _set.docLockForms, _set.docLockComments, _set.selRangeEdit, _set.editFormula ] : [_set.customLock],
-                                dataHint: '1',
-                                dataHintDirection: 'bottom',
-                                dataHintOffset: 'small'
+                        if ( !btn.menu || btn.split) {
+                            btn.on('click', function(b, e) {
+                                _api && _api.onPluginButtonClick && _api.onPluginButtonClick(b.options.guid, b.options.value, b.pressed);
                             });
-
-                            if (item.menu && typeof item.menu === 'object') {
-                                btn.setMenu(new Common.UI.Menu({items: []}));
-                                btn.menu.on('item:click', function(menu, mi, e) {
-                                    _api && _api.onPluginButtonClick && _api.onPluginButtonClick(mi.options.guid, mi.value);
-                                });
-                                _fillButtonMenu(item.menu, plugin.guid, lang, btn.menu);
-                            }
-                            if ( !btn.menu || btn.split) {
-                                btn.on('click', function(b, e) {
-                                    _api && _api.onPluginButtonClick && _api.onPluginButtonClick(b.options.guid, b.options.value, b.pressed);
-                                });
-                            }
-                            var $slot = $('<span class="btn-slot text x-huge ' + (!caption ? 'emptycaption ' : ' ') + compactcls + '"></span>').appendTo(_group);
-                            btn.render($slot);
-                            btns.push(btn);
-                            item.disabled && Common.Utils.lockControls(_set.customLock, item.disabled, {array: [btn]});
                         }
-                    });
-                    toolbar.clearActiveData(plugin.tab.id);
-                    toolbar.processPanelVisible(null, true);
-                    if (!toolbar.customButtonsArr)
-                        toolbar.customButtonsArr = [];
-                    Array.prototype.push.apply(toolbar.customButtonsArr, btns);
-                }
+                        btns.push(btn);
+                        item.disabled && Common.Utils.lockControls(_set.customLock, item.disabled, {array: [btn]});
+                    }
+                });
+
+                toolbar.addCustomItems({action: plugin.tab.id, caption: ((typeof plugin.tab.text == 'object') ? plugin.tab.text[lang] || plugin.tab.text['en'] : plugin.tab.text) || ''}, btns);
+                if (!toolbar.customButtonsArr)
+                    toolbar.customButtonsArr = [];
+                Array.prototype.push.apply(toolbar.customButtonsArr, btns);
             }
         });
         return btns;
@@ -301,7 +265,6 @@ Common.UI.LayoutManager = new(function() {
         isElementVisible: _isElementVisible,
         getInitValue: _getInitValue,
         lastTabIdx: _lastInternalTabIdx,
-        getTab: _getTab,
         addCustomItems: _addCustomItems
     }
 })();
diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index 75f0eac33d..27b19ccff1 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -311,7 +311,7 @@
                     }
                 }
 
-                .emptycaption & {
+                .emptycaption & { // used for buttons without caption, but with color div
                     width: 37px;
                     .caret {
                         margin: 0 1px 0 2px;
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index 249778a258..02e349bef3 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -235,21 +235,23 @@
         }
 
         /* ##adopt-panel-width */
-        .panel .compactwidth:not(.emptycaption) {
-            .btn-group, .btn-toolbar {
-                &.x-huge {
-                    .caption {
-                        display: none;
-                    }
+        .panel {
+            .compactwidth:not(.emptycaption), .nocaption {
+                .btn-group, .btn-toolbar {
+                    &.x-huge {
+                        .caption {
+                            display: none;
+                        }
 
-                    .inner-box-caption {
-                        justify-content: center;
-                        align-items: center;
-                        padding: 0 2px;
-                    }
+                        .inner-box-caption {
+                            justify-content: center;
+                            align-items: center;
+                            padding: 0 2px;
+                        }
 
-                    .compact-caret {
-                        display: block;
+                        .compact-caret {
+                            display: block;
+                        }
                     }
                 }
             }
@@ -267,7 +269,7 @@
         .rtl & {
             padding: 12px 0 7px 10px;
         }
-        .compactwidth:not(.emptycaption) {
+        .compactwidth:not(.emptycaption), .nocaption {
             .btn-group, .btn-toolbar {
                 &.x-huge {
                     .caption {

From 40dd9edff3bbf7cf55a154bf4bec678be92d7af5 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Mon, 5 Feb 2024 19:35:40 +0300
Subject: [PATCH 09/16] Check license

---
 apps/common/main/lib/controller/LayoutManager.js    | 2 +-
 apps/documenteditor/main/app/controller/Main.js     | 2 +-
 apps/pdfeditor/main/app/controller/Main.js          | 2 +-
 apps/presentationeditor/main/app/controller/Main.js | 2 +-
 apps/spreadsheeteditor/main/app/controller/Main.js  | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/common/main/lib/controller/LayoutManager.js b/apps/common/main/lib/controller/LayoutManager.js
index 4ba09999c9..c5f117b2be 100644
--- a/apps/common/main/lib/controller/LayoutManager.js
+++ b/apps/common/main/lib/controller/LayoutManager.js
@@ -151,7 +151,7 @@ Common.UI.LayoutManager = new(function() {
     }
 
     var _addCustomItems = function (toolbar, data) {
-        if (!data || data.length<1) return;
+        if (!_licensed || !data || data.length<1) return;
 
         var lang = Common.Locale.getCurrentLanguage(),
             btns = [];
diff --git a/apps/documenteditor/main/app/controller/Main.js b/apps/documenteditor/main/app/controller/Main.js
index 89b4c7a78f..aa8782cd61 100644
--- a/apps/documenteditor/main/app/controller/Main.js
+++ b/apps/documenteditor/main/app/controller/Main.js
@@ -1656,7 +1656,7 @@ define([
                 this.appOptions.canRename && appHeader.setCanRename(true);
                 this.appOptions.canBrandingExt = params.asc_getCanBranding() && (typeof this.editorConfig.customization == 'object' || this.editorConfig.plugins);
                 this.getApplication().getController('Common.Controllers.Plugins').setMode(this.appOptions, this.api);
-                this.editorConfig.customization && Common.UI.LayoutManager.init(this.editorConfig.customization.layout, this.appOptions.canBrandingExt, this.api);
+                Common.UI.LayoutManager.init(this.editorConfig.customization ? this.editorConfig.customization.layout : null, this.appOptions.canBrandingExt, this.api);
                 this.editorConfig.customization && Common.UI.FeaturesManager.init(this.editorConfig.customization.features, this.appOptions.canBrandingExt);
                 Common.UI.ExternalUsers.init(this.appOptions.canRequestUsers);
                 this.appOptions.user.image && Common.UI.ExternalUsers.setImage(this.appOptions.user.id, this.appOptions.user.image);
diff --git a/apps/pdfeditor/main/app/controller/Main.js b/apps/pdfeditor/main/app/controller/Main.js
index 6c09ced7a5..09ad1d7dd2 100644
--- a/apps/pdfeditor/main/app/controller/Main.js
+++ b/apps/pdfeditor/main/app/controller/Main.js
@@ -1266,7 +1266,7 @@ define([
                 this.appOptions.canRename && appHeader.setCanRename(true);
                 this.appOptions.canBrandingExt = params.asc_getCanBranding() && (typeof this.editorConfig.customization == 'object' || this.editorConfig.plugins);
                 this.getApplication().getController('Common.Controllers.Plugins').setMode(this.appOptions, this.api);
-                this.editorConfig.customization && Common.UI.LayoutManager.init(this.editorConfig.customization.layout, this.appOptions.canBrandingExt, this.api);
+                Common.UI.LayoutManager.init(this.editorConfig.customization ? this.editorConfig.customization.layout : null, this.appOptions.canBrandingExt, this.api);
                 this.editorConfig.customization && Common.UI.FeaturesManager.init(this.editorConfig.customization.features, this.appOptions.canBrandingExt);
                 Common.UI.ExternalUsers.init(this.appOptions.canRequestUsers);
                 this.appOptions.user.image && Common.UI.ExternalUsers.setImage(this.appOptions.user.id, this.appOptions.user.image);
diff --git a/apps/presentationeditor/main/app/controller/Main.js b/apps/presentationeditor/main/app/controller/Main.js
index 20727e34d1..4a52cc8fe6 100644
--- a/apps/presentationeditor/main/app/controller/Main.js
+++ b/apps/presentationeditor/main/app/controller/Main.js
@@ -1296,7 +1296,7 @@ define([
                 this.appOptions.canRename && appHeader.setCanRename(true);
                 this.appOptions.canBrandingExt = params.asc_getCanBranding() && (typeof this.editorConfig.customization == 'object' || this.editorConfig.plugins);
                 this.getApplication().getController('Common.Controllers.Plugins').setMode(this.appOptions);
-                this.editorConfig.customization && Common.UI.LayoutManager.init(this.editorConfig.customization.layout, this.appOptions.canBrandingExt, this.api);
+                Common.UI.LayoutManager.init(this.editorConfig.customization ? this.editorConfig.customization.layout : null, this.appOptions.canBrandingExt, this.api);
                 this.editorConfig.customization && Common.UI.FeaturesManager.init(this.editorConfig.customization.features, this.appOptions.canBrandingExt);
                 Common.UI.ExternalUsers.init(this.appOptions.canRequestUsers);
                 this.appOptions.user.image && Common.UI.ExternalUsers.setImage(this.appOptions.user.id, this.appOptions.user.image);
diff --git a/apps/spreadsheeteditor/main/app/controller/Main.js b/apps/spreadsheeteditor/main/app/controller/Main.js
index 4cd846266a..f910f47bb4 100644
--- a/apps/spreadsheeteditor/main/app/controller/Main.js
+++ b/apps/spreadsheeteditor/main/app/controller/Main.js
@@ -1412,7 +1412,7 @@ define([
                 if (!this.appOptions.isEditDiagram && !this.appOptions.isEditMailMerge && !this.appOptions.isEditOle) {
                     this.appOptions.canBrandingExt = params.asc_getCanBranding() && (typeof this.editorConfig.customization == 'object' || this.editorConfig.plugins);
                     this.getApplication().getController('Common.Controllers.Plugins').setMode(this.appOptions);
-                    this.editorConfig.customization && Common.UI.LayoutManager.init(this.editorConfig.customization.layout, this.appOptions.canBrandingExt, this.api);
+                    Common.UI.LayoutManager.init(this.editorConfig.customization ? this.editorConfig.customization.layout : null, this.appOptions.canBrandingExt, this.api);
                     this.editorConfig.customization && Common.UI.FeaturesManager.init(this.editorConfig.customization.features, this.appOptions.canBrandingExt);
                     Common.UI.ExternalUsers.init(this.appOptions.canRequestUsers);
                     this.appOptions.user.image && Common.UI.ExternalUsers.setImage(this.appOptions.user.id, this.appOptions.user.image);

From 862e4b0bdc99f3d395648717ad2765139578e998 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Mon, 5 Feb 2024 20:43:36 +0300
Subject: [PATCH 10/16] Add plugin button to specified tab

---
 apps/common/main/lib/controller/Plugins.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/common/main/lib/controller/Plugins.js b/apps/common/main/lib/controller/Plugins.js
index 34316970ab..3729bef3d3 100644
--- a/apps/common/main/lib/controller/Plugins.js
+++ b/apps/common/main/lib/controller/Plugins.js
@@ -419,6 +419,11 @@ define([
                         me.backgroundPlugins.push(model);
                         return;
                     }
+                    if (model.get('tab')) {
+                        me.toolbar && me.toolbar.addCustomItems(model.get('tab'), [me.viewPlugins.createPluginButton(model)]);
+                        return;
+                    }
+
                     //if (new_rank === 1 || new_rank === 2) return; // for test
                     if ((new_rank === 0 || new_rank === 2) && !isBackground) {
                         _group = me.addBackgroundPluginsButton(_group);
@@ -872,7 +877,8 @@ define([
                             original: item,
                             isDisplayedInViewer: isDisplayedInViewer,
                             isBackgroundPlugin: pluginVisible && isBackgroundPlugin,
-                            isSystem: isSystem
+                            isSystem: isSystem,
+                            tab: item.tab ? {action: item.tab.id, caption: ((typeof item.tab.text == 'object') ? item.tab.text[lang] || item.tab.text['en'] : item.tab.text) || ''} : undefined
                         };
                         updatedItem ? updatedItem.set(props) : arr.push(new Common.Models.Plugin(props));
                     }

From 762768649aaee0a3441423fd6f902f00cd14e310 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Wed, 14 Feb 2024 19:31:42 +0300
Subject: [PATCH 11/16] Toolbar refactoring

---
 apps/common/main/lib/component/Mixtbar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js
index d8ac8f516d..326a0ccab9 100644
--- a/apps/common/main/lib/component/Mixtbar.js
+++ b/apps/common/main/lib/component/Mixtbar.js
@@ -623,7 +623,7 @@ define([
             },
 
             clearActiveData: function(tab) {
-                var panel = this.$panels.filter('[data-tab=' + tab + ']');
+                var panel = tab ? this.$panels.filter('[data-tab=' + tab + ']') : this.$panels.filter('.active');
                 if ( panel.length ) {
                     var data = panel.data();
                     data.buttons = data.flex = data.rightedge = data.leftedge = undefined;

From a1a987d5b92ddc897a4267280d26f5de7f508117 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Thu, 21 Mar 2024 13:48:14 +0300
Subject: [PATCH 12/16] Fix custom plugin buttons, handle sdk methods

---
 .../main/lib/controller/LayoutManager.js      |  10 +-
 .../main/app/controller/Toolbar.js            | 258 +++++++++---------
 apps/pdfeditor/main/app/controller/Toolbar.js |   5 +
 .../main/app/controller/Toolbar.js            |   5 +
 .../main/app/controller/Toolbar.js            |   6 +
 5 files changed, 150 insertions(+), 134 deletions(-)

diff --git a/apps/common/main/lib/controller/LayoutManager.js b/apps/common/main/lib/controller/LayoutManager.js
index c5f117b2be..1b1992f728 100644
--- a/apps/common/main/lib/controller/LayoutManager.js
+++ b/apps/common/main/lib/controller/LayoutManager.js
@@ -134,7 +134,7 @@ Common.UI.LayoutManager = new(function() {
                 items: []
             });
             toMenu.on('item:click', function(menu, mi, e) {
-                _api && _api.onPluginButtonClick && _api.onPluginButtonClick(mi.options.guid, mi.value);
+                _api && _api.onPluginToolbarMenuItemClick(mi.options.guid, mi.value);
             });
         }
         items.forEach(function(menuItem) {
@@ -151,7 +151,7 @@ Common.UI.LayoutManager = new(function() {
     }
 
     var _addCustomItems = function (toolbar, data) {
-        if (!_licensed || !data || data.length<1) return;
+        if (!data) return;
 
         var lang = Common.Locale.getCurrentLanguage(),
             btns = [];
@@ -205,7 +205,7 @@ Common.UI.LayoutManager = new(function() {
                                 if (typeof btn.menu !== 'object') {
                                     btn.setMenu(new Common.UI.Menu({items: []}));
                                     btn.menu.on('item:click', function(menu, mi, e) {
-                                        _api && _api.onPluginButtonClick && _api.onPluginButtonClick(mi.options.guid, mi.value);
+                                        _api && _api.onPluginToolbarMenuItemClick(mi.options.guid, mi.value);
                                     });
                                 }
                                 _fillButtonMenu(item.menu, plugin.guid, lang, btn.menu);
@@ -236,13 +236,13 @@ Common.UI.LayoutManager = new(function() {
                         if (item.menu && typeof item.menu === 'object') {
                             btn.setMenu(new Common.UI.Menu({items: []}));
                             btn.menu.on('item:click', function(menu, mi, e) {
-                                _api && _api.onPluginButtonClick && _api.onPluginButtonClick(mi.options.guid, mi.value);
+                                _api && _api.onPluginToolbarMenuItemClick(mi.options.guid, mi.value);
                             });
                             _fillButtonMenu(item.menu, plugin.guid, lang, btn.menu);
                         }
                         if ( !btn.menu || btn.split) {
                             btn.on('click', function(b, e) {
-                                _api && _api.onPluginButtonClick && _api.onPluginButtonClick(b.options.guid, b.options.value, b.pressed);
+                                _api && _api.onPluginToolbarMenuItemClick(b.options.guid, b.options.value, b.pressed);
                             });
                         }
                         btns.push(btn);
diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js
index e564fb42b5..93f6b254f0 100644
--- a/apps/documenteditor/main/app/controller/Toolbar.js
+++ b/apps/documenteditor/main/app/controller/Toolbar.js
@@ -459,7 +459,7 @@ define([
                 this.api.asc_registerCallback('asc_onCoAuthoringDisconnect', _.bind(this.onApiCoAuthoringDisconnect, this));
                 Common.NotificationCenter.on('api:disconnect', _.bind(this.onApiCoAuthoringDisconnect, this));
             }
-            this.api.asc_registerCallback('onPluginContextMenu', _.bind(this.onPluginContextMenu, this)); // TODO: handle add buttons to toolbar
+            this.api.asc_registerCallback('onPluginToolbarMenu', _.bind(this.onPluginToolbarMenu, this));
             this.api.asc_registerCallback('asc_onDownloadUrl', _.bind(this.onDownloadUrl, this));
             Common.NotificationCenter.on('protect:doclock', _.bind(this.onChangeProtectDocument, this));
         },
@@ -3711,139 +3711,139 @@ define([
             }
         },
 
-        onPluginContextMenu: function(data) {
+        onPluginToolbarMenu: function(data) {
             // Common.UI.LayoutManager.getTab(toolbar, 'tab1', 'Tab 1');
             // Common.UI.LayoutManager.getTab(toolbar, 'tab2', 'Tab 2');
             // Common.UI.LayoutManager.getTab(toolbar, 'tab1', 'Tab 1');
             // toolbar.setVisible('tab1', true);
             // toolbar.setVisible('tab2', true);
-            var icons = [
-                {
-                    "theme" : "theme-classic-light",
-                    "100%": {
-                        "normal": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/light/icon.png",
-                        "active": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/dark/icon.png"
-                    },
-                    "200%": {
-                        "normal": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/light/icon@2x.png",
-                        "active": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/dark/icon@2x.png"
-                    }
-                },
-                {
-                    "style" : "light",
-                    "100%": {
-                        "normal": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/light/icon.png"
-                    },
-                    "200%": {
-                        "normal": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/light/icon@2x.png"
-                    }
-                },
-                {
-                    "style" : "dark",
-                    "100%": {
-                        "normal": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/dark/icon.png"
-                    },
-                    "200%": {
-                        "normal": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/dark/icon@2x.png"
-                    }
-                }
-            ];
-            data = [{
-                guid: 'plugin-guid-1',
-                tab: {
-                    id: 'tab1',
-                    text: 'Tab1'
-                },
-                items: [
-                    {
-                        id: 'button-id-1',
-                        type: 'button',
-                        icons: icons,
-                        text:  { "en": "english Button 1", "es": "spanish Button 1"},
-                        hint: 'hint',
-                        lockInViewMode: true
-                    },
-                    {
-                        id: 'button-id-2',
-                        type: 'button',
-                        icons: icons,
-                        text:  { "en": "english Toggle 2", "es": "spanish Toggle 2"},
-                        enableToggle: true,
-                        hint: 'hint',
-                        lockInViewMode: true
-                    },
-                    {
-                        id: 'button-id-3',
-                        type: 'button',
-                        icons: icons,
-                        text:  { "en": "english Menu 3", "es": "spanish Menu 3"},
-                        hint: 'hint',
-                        separator: true,
-                        split: false,
-                        // disabled: true,
-                        menu: [
-                            {
-                                id: 'item-id-1',
-                                text: 'Text1'
-                            }
-                        ],
-                        lockInViewMode: true
-                    },
-                    {
-                        id: 'button-id-4',
-                        type: 'button',
-                        icons: icons,
-                        text:  { "en": "english Split Menu 4", "es": "spanish Split Menu 4"},
-                        hint: 'hint',
-                        split: true,
-                        menu: [
-                            {
-                                id: 'item-id-2',
-                                text: 'Text2'
-                            },
-                            {
-                                id: 'item-id-2',
-                                text: 'Text2',
-                                items: [
-                                    {
-                                        id: 'item-id-3',
-                                        text: 'Text3'
-                                    },
-                                    {
-                                        id: 'item-id-3',
-                                        text: 'Text3',
-                                        separator: true
-                                    }
-                                ],
-                                separator: true
-                            }
-                        ],
-                        lockInViewMode: true
-                    },
-                    {
-                        id: 'button-id-5',
-                        type: 'button',
-                        icons: icons,
-                        text:  { "en": "english Toggle Split Menu 5", "es": "spanish Toggle Split Menu 5"},
-                        hint: 'hint',
-                        split: true,
-                        enableToggle: true,
-                        menu: [
-                            {
-                                id: 'item-id-2',
-                                text: 'Text2'
-                            },
-                            {
-                                id: 'item-id-2',
-                                text: 'Text2',
-                                separator: true
-                            }
-                        ],
-                        lockInViewMode: true
-                    }
-                ]
-            }];
-            Array.prototype.push.apply(this.toolbar.lockControls, Common.UI.LayoutManager.addCustomItems(this.toolbar, data));
+            // var icons = [
+            //     {
+            //         "theme" : "theme-classic-light",
+            //         "100%": {
+            //             "normal": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/light/icon.png",
+            //             "active": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/dark/icon.png"
+            //         },
+            //         "200%": {
+            //             "normal": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/light/icon@2x.png",
+            //             "active": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/dark/icon@2x.png"
+            //         }
+            //     },
+            //     {
+            //         "style" : "light",
+            //         "100%": {
+            //             "normal": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/light/icon.png"
+            //         },
+            //         "200%": {
+            //             "normal": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/light/icon@2x.png"
+            //         }
+            //     },
+            //     {
+            //         "style" : "dark",
+            //         "100%": {
+            //             "normal": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/dark/icon.png"
+            //         },
+            //         "200%": {
+            //             "normal": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/dark/icon@2x.png"
+            //         }
+            //     }
+            // ];
+            // data = [{
+            //     guid: 'plugin-guid-1',
+            //     tab: {
+            //         id: 'tab1',
+            //         text: 'Tab1'
+            //     },
+            //     items: [
+            //         {
+            //             id: 'button-id-1',
+            //             type: 'button',
+            //             icons: icons,
+            //             text:  { "en": "english Button 1", "es": "spanish Button 1"},
+            //             hint: 'hint',
+            //             lockInViewMode: true
+            //         },
+            //         {
+            //             id: 'button-id-2',
+            //             type: 'button',
+            //             icons: icons,
+            //             text:  { "en": "english Toggle 2", "es": "spanish Toggle 2"},
+            //             enableToggle: true,
+            //             hint: 'hint',
+            //             lockInViewMode: true
+            //         },
+            //         {
+            //             id: 'button-id-3',
+            //             type: 'button',
+            //             icons: icons,
+            //             text:  { "en": "english Menu 3", "es": "spanish Menu 3"},
+            //             hint: 'hint',
+            //             separator: true,
+            //             split: false,
+            //             // disabled: true,
+            //             menu: [
+            //                 {
+            //                     id: 'item-id-1',
+            //                     text: 'Text1'
+            //                 }
+            //             ],
+            //             lockInViewMode: true
+            //         },
+            //         {
+            //             id: 'button-id-4',
+            //             type: 'button',
+            //             icons: icons,
+            //             text:  { "en": "english Split Menu 4", "es": "spanish Split Menu 4"},
+            //             hint: 'hint',
+            //             split: true,
+            //             menu: [
+            //                 {
+            //                     id: 'item-id-2',
+            //                     text: 'Text2'
+            //                 },
+            //                 {
+            //                     id: 'item-id-2',
+            //                     text: 'Text2',
+            //                     items: [
+            //                         {
+            //                             id: 'item-id-3',
+            //                             text: 'Text3'
+            //                         },
+            //                         {
+            //                             id: 'item-id-3',
+            //                             text: 'Text3',
+            //                             separator: true
+            //                         }
+            //                     ],
+            //                     separator: true
+            //                 }
+            //             ],
+            //             lockInViewMode: true
+            //         },
+            //         {
+            //             id: 'button-id-5',
+            //             type: 'button',
+            //             icons: icons,
+            //             text:  { "en": "english Toggle Split Menu 5", "es": "spanish Toggle Split Menu 5"},
+            //             hint: 'hint',
+            //             split: true,
+            //             enableToggle: true,
+            //             menu: [
+            //                 {
+            //                     id: 'item-id-2',
+            //                     text: 'Text2'
+            //                 },
+            //                 {
+            //                     id: 'item-id-2',
+            //                     text: 'Text2',
+            //                     separator: true
+            //                 }
+            //             ],
+            //             lockInViewMode: true
+            //         }
+            //     ]
+            // }];
+            this.toolbar && Array.prototype.push.apply(this.toolbar.lockControls, Common.UI.LayoutManager.addCustomItems(this.toolbar, data));
         },
 
         textEmptyImgUrl                            : 'You need to specify image URL.',
diff --git a/apps/pdfeditor/main/app/controller/Toolbar.js b/apps/pdfeditor/main/app/controller/Toolbar.js
index c7c9128459..463976b9d6 100644
--- a/apps/pdfeditor/main/app/controller/Toolbar.js
+++ b/apps/pdfeditor/main/app/controller/Toolbar.js
@@ -273,6 +273,7 @@ define([
             this.api.asc_registerCallback('asc_onCountPages',   _.bind(this.onCountPages, this));
             this.api.asc_registerCallback('asc_onCurrentPage',  _.bind(this.onCurrentPage, this));
             this.api.asc_registerCallback('asc_onDownloadUrl',  _.bind(this.onDownloadUrl, this));
+            this.api.asc_registerCallback('onPluginToolbarMenu', _.bind(this.onPluginToolbarMenu, this));
         },
 
         onChangeCompactView: function(view, compact) {
@@ -962,6 +963,10 @@ define([
             this.toolbar && this.toolbar.chShowComments && this.toolbar.chShowComments.setValue(Common.Utils.InternalSettings.get("pdfe-settings-livecomment"), true);
         },
 
+        onPluginToolbarMenu: function(data) {
+            this.toolbar && Array.prototype.push.apply(this.toolbar.lockControls, Common.UI.LayoutManager.addCustomItems(this.toolbar, data));
+        },
+
         textWarning: 'Warning',
         notcriticalErrorTitle: 'Warning',
         txtNeedCommentMode: 'To save changes to the file, switch to Сommenting mode. Or you can download a copy of the modified file.',
diff --git a/apps/presentationeditor/main/app/controller/Toolbar.js b/apps/presentationeditor/main/app/controller/Toolbar.js
index 297d5d5872..d0d948173e 100644
--- a/apps/presentationeditor/main/app/controller/Toolbar.js
+++ b/apps/presentationeditor/main/app/controller/Toolbar.js
@@ -437,6 +437,7 @@ define([
             } else if (this.mode.isRestrictedEdit) {
                 this.api.asc_registerCallback('asc_onCountPages',           _.bind(this.onApiCountPagesRestricted, this));
             }
+            this.api.asc_registerCallback('onPluginToolbarMenu', _.bind(this.onPluginToolbarMenu, this));
         },
 
         onChangeCompactView: function(view, compact) {
@@ -2908,6 +2909,10 @@ define([
             this.toolbar._isEyedropperStart = false;
         },
 
+        onPluginToolbarMenu: function(data) {
+            this.toolbar && Array.prototype.push.apply(this.toolbar.lockControls, Common.UI.LayoutManager.addCustomItems(this.toolbar, data));
+        },
+
         textEmptyImgUrl : 'You need to specify image URL.',
         textWarning     : 'Warning',
         textFontSizeErr : 'The entered value is incorrect.<br>Please enter a numeric value between 1 and 300',
diff --git a/apps/spreadsheeteditor/main/app/controller/Toolbar.js b/apps/spreadsheeteditor/main/app/controller/Toolbar.js
index 19c2d47502..8e33c2dbc6 100644
--- a/apps/spreadsheeteditor/main/app/controller/Toolbar.js
+++ b/apps/spreadsheeteditor/main/app/controller/Toolbar.js
@@ -531,6 +531,8 @@ define([
                 this.api.asc_registerCallback('asc_onSelectionChanged',     _.bind(this.onApiSelectionChangedRestricted, this));
                 Common.NotificationCenter.on('protect:wslock',              _.bind(this.onChangeProtectSheet, this));
             }
+            if ( !config.isEditDiagram  && !config.isEditMailMerge  && !config.isEditOle )
+                this.api.asc_registerCallback('onPluginToolbarMenu', _.bind(this.onPluginToolbarMenu, this));
         },
 
         // onNewDocument: function(btn, e) {
@@ -5218,6 +5220,10 @@ define([
             }
         },
 
+        onPluginToolbarMenu: function(data) {
+            this.toolbar && Array.prototype.push.apply(this.toolbar.lockControls, Common.UI.LayoutManager.addCustomItems(this.toolbar, data));
+        },
+
         textEmptyImgUrl     : 'You need to specify image URL.',
         warnMergeLostData   : 'Operation can destroy data in the selected cells.<br>Continue?',
         textWarning         : 'Warning',

From 593b83a2045e8445e4adb7a96793b3f4cd81fbbf Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Thu, 21 Mar 2024 22:14:50 +0300
Subject: [PATCH 13/16] Remove custom buttons from toolbar

---
 apps/common/main/lib/component/Mixtbar.js     | 44 ++++++++++++++-
 .../main/lib/controller/LayoutManager.js      | 55 ++++++++++++++-----
 2 files changed, 82 insertions(+), 17 deletions(-)

diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js
index 326a0ccab9..4e9108f74a 100644
--- a/apps/common/main/lib/component/Mixtbar.js
+++ b/apps/common/main/lib/component/Mixtbar.js
@@ -420,6 +420,10 @@ define([
                 return this.isFolded;
             },
 
+            isExpanded: function () {
+                return !this.isFolded || optsFold.$bar && optsFold.$bar.hasClass('expanded');
+            },
+
             hasTabInvisible: function() {
                 if ($boxTabs.length<1) return false;
 
@@ -630,7 +634,7 @@ define([
                 }
             },
 
-            addCustomItems: function(tab, buttons) {
+            addCustomItems: function(tab, added, removed) {
                 if (!tab.action) return;
 
                 var $panel = tab.action ? this.getTab(tab.action) || this.createTab(tab, true) || this.getTab('plugins') : null,
@@ -639,7 +643,25 @@ define([
                     compactcls = '';
                 ($moresection.length<1) && ($moresection = null);
                 if ($panel) {
-                    buttons && buttons.forEach(function(button, index) {
+                    if (removed) {
+                        removed.forEach(function(button, index) {
+                            if (button.cmpEl) {
+                                var group = button.cmpEl.closest('.group');
+                                button.cmpEl.closest('.btn-slot').remove();
+                                if (group.children().length<1) {
+                                    var in_more = group.closest('.more-container').length>0;
+                                    in_more ? group.next('.separator').remove() : group.prev('.separator').remove();
+                                    group.remove();
+                                    if (in_more && $morepanel.children().filter('.group').length === 0) {
+                                        btnsMore[tab.action] && btnsMore[tab.action].isActive() && btnsMore[tab.action].toggle(false);
+                                        $moresection && $moresection.css('display', "none");
+                                    }
+                                }
+                            }
+                        });
+                        $panel.find('.btn-slot:not(.slot-btn-more).x-huge').last().hasClass('compactwidth') && (compactcls = 'compactwidth');
+                    }
+                    added && added.forEach(function(button, index) {
                         var _groups, _group;
                         if ($morepanel) {
                             _groups = $morepanel.children().filter('.group');
@@ -668,8 +690,26 @@ define([
                 }
                 this.clearActiveData(tab.action);
                 this.processPanelVisible(null, true);
+
+                var visible = !this.isTabEmpty(tab.action) && Common.UI.LayoutManager.isElementVisible('toolbar-' + tab.action);
+                this.setVisible(tab.action, visible);
+                if (!visible && this.isTabActive(tab.action) && this.isExpanded()) {
+                    if (this.getTab('home'))
+                        this.setTab('home');
+                    else {
+                        tab = this.$tabs.siblings(':not(.x-lone):visible').first().find('> a[data-tab]').data('tab');
+                        this.setTab(tab);
+                    }
+                }
             },
 
+            isTabEmpty: function(tab) {
+                var $panel = this.getTab(tab),
+                    $morepanel = this.getMorePanel(tab),
+                    $moresection = $panel ? $panel.find('.more-box') : null;
+                ($moresection.length<1) && ($moresection = null);
+                return $panel ? !($panel.find('> .group').length>0 || $morepanel && $morepanel.find('.group').length>0) : false;
+            },
 
             resizeToolbar: function(reset) {
                 var $active = this.$panels.filter('.active'),
diff --git a/apps/common/main/lib/controller/LayoutManager.js b/apps/common/main/lib/controller/LayoutManager.js
index 1b1992f728..f8cc507d6d 100644
--- a/apps/common/main/lib/controller/LayoutManager.js
+++ b/apps/common/main/lib/controller/LayoutManager.js
@@ -114,9 +114,9 @@ Common.UI.LayoutManager = new(function() {
     };
 
     var _findCustomButton = function(toolbar, action, guid, id) {
-        if (toolbar && toolbar.customButtonsArr) {
-            for (var i=0; i< toolbar.customButtonsArr.length; i++) {
-                var btn = toolbar.customButtonsArr[i];
+        if (toolbar && toolbar.customButtonsArr && toolbar.customButtonsArr[guid] ) {
+            for (var i=0; i< toolbar.customButtonsArr[guid].length; i++) {
+                var btn = toolbar.customButtonsArr[guid][i];
                 if (btn.options.tabid === action && btn.options.guid === guid && btn.options.value === id) {
                     return btn;
                 }
@@ -124,6 +124,26 @@ Common.UI.LayoutManager = new(function() {
         }
     }
 
+    var _findRemovedButtons = function(toolbar, action, guid, items) {
+        var arr = [];
+        if (toolbar && toolbar.customButtonsArr && toolbar.customButtonsArr[guid] ) {
+            if (!items || items.length<1) {
+                arr = toolbar.customButtonsArr[guid];
+                toolbar.customButtonsArr[guid] = undefined;
+            } else {
+                for (var i=0; i< toolbar.customButtonsArr[guid].length; i++) {
+                    var btn = toolbar.customButtonsArr[guid][i];
+                    if (btn.options.tabid === action && !_.findWhere(items, {id: btn.options.value})) {
+                        arr.push(btn);
+                        toolbar.customButtonsArr[guid].splice(i, 1);
+                        i--;
+                    }
+                }
+            }
+        }
+        return arr;
+    }
+
     var _fillButtonMenu = function(items, guid, lang, toMenu) {
         if (toMenu)
             toMenu.removeAll();
@@ -140,7 +160,7 @@ Common.UI.LayoutManager = new(function() {
         items.forEach(function(menuItem) {
             if (menuItem.separator) toMenu.addItem({caption: '--'});
             menuItem.text && toMenu.addItem({
-                caption: ((typeof menuItem.text == 'object') ? menuItem.text[lang] || menuItem.text['en'] : menuItem.text) || '',
+                caption: menuItem.text || '',
                 value: menuItem.id,
                 menu: menuItem.items ? _fillButtonMenu(menuItem.items, guid, lang) : false,
                 iconImg: Common.UI.getSuitableIcons(Common.UI.iconsStr2IconsObj(menuItem.icons)),
@@ -161,21 +181,21 @@ Common.UI.LayoutManager = new(function() {
                 guid: 'plugin-guid',
                 tab: {
                     id: 'tab-id',
-                    text: 'caption' or { "fr": "french caption", "es": "spanish caption"}
+                    text: 'caption'
                 },
                 items: [
                     {
                         id: 'button-id',
                         type: 'button'='big-button' or 'small-button',
                         icons: 'template string' or object
-                        text: 'caption' or { "fr": "french caption", "es": "spanish caption"} or - can be empty
-                        hint: 'hint' or { "fr": "french hint", "es": "spanish hint"},
+                        text: 'caption' or - can be empty
+                        hint: 'hint',
                         separator: true/false - inserted before item,
                         split: true/false - used when has menu
                         menu: [
                             {
                                 id: 'item-id',
-                                text: 'caption' or { "fr": "french caption", "es": "spanish caption"},
+                                text: 'caption'
                                 separator: true/false - inserted before item,
                                 icons: 'template string' or object
                             }
@@ -188,18 +208,20 @@ Common.UI.LayoutManager = new(function() {
             }
             */
             if (plugin.tab) {
+                var added = [],
+                    removed = _findRemovedButtons(toolbar, plugin.tab.id, plugin.guid, plugin.items);
                 plugin.items && plugin.items.forEach(function(item, index) {
                     var btn = _findCustomButton(toolbar, plugin.tab.id, plugin.guid, item.id),
                         _set = Common.enumLock;
                     if (btn) { // change caption, hint, disable state, menu items
                         if (btn instanceof Common.UI.Button) {
-                            var caption = ((typeof item.text == 'object') ? item.text[lang] || item.text['en'] : item.text) || '';
+                            var caption = item.text || '';
                             if (btn.options.caption !== (caption || ' ')) {
                                 btn.cmpEl.closest('.btn-slot.x-huge').toggleClass('nocaption', !caption);
                                 btn.setCaption(caption || ' ');
                                 btn.options.caption = caption || ' ';
                             }
-                            btn.updateHint(((typeof item.hint == 'object') ? item.hint[lang] || item.hint['en'] : item.hint) || '',);
+                            btn.updateHint(item.hint || '');
                             (item.disabled!==undefined) && Common.Utils.lockControls(_set.customLock, !!item.disabled, {array: [btn]});
                             if (btn.menu && item.menu && item.menu.length > 0) {// update menu items
                                 if (typeof btn.menu !== 'object') {
@@ -218,7 +240,7 @@ Common.UI.LayoutManager = new(function() {
                         btn = new Common.UI.ButtonCustom({
                             cls: 'btn-toolbar x-huge icon-top',
                             iconsSet: item.icons,
-                            caption: ((typeof item.text == 'object') ? item.text[lang] || item.text['en'] : item.text) || ' ',
+                            caption: item.text || ' ',
                             menu: item.menu,
                             split: item.menu && !!item.split,
                             enableToggle: item.enableToggle && (!item.menu || !!item.split),
@@ -226,7 +248,7 @@ Common.UI.LayoutManager = new(function() {
                             guid: plugin.guid,
                             tabid: plugin.tab.id,
                             separator: item.separator,
-                            hint: ((typeof item.hint == 'object') ? item.hint[lang] || item.hint['en'] : item.hint) || '',
+                            hint: item.hint || '',
                             lock: item.lockInViewMode ? [_set.customLock, _set.viewMode, _set.previewReviewMode, _set.viewFormMode, _set.docLockView, _set.docLockForms, _set.docLockComments, _set.selRangeEdit, _set.editFormula ] : [_set.customLock],
                             dataHint: '1',
                             dataHintDirection: 'bottom',
@@ -245,15 +267,18 @@ Common.UI.LayoutManager = new(function() {
                                 _api && _api.onPluginToolbarMenuItemClick(b.options.guid, b.options.value, b.pressed);
                             });
                         }
-                        btns.push(btn);
+                        added.push(btn);
                         item.disabled && Common.Utils.lockControls(_set.customLock, item.disabled, {array: [btn]});
                     }
                 });
 
-                toolbar.addCustomItems({action: plugin.tab.id, caption: ((typeof plugin.tab.text == 'object') ? plugin.tab.text[lang] || plugin.tab.text['en'] : plugin.tab.text) || ''}, btns);
+                toolbar.addCustomItems({action: plugin.tab.id, caption: plugin.tab.text || ''}, added, removed);
                 if (!toolbar.customButtonsArr)
                     toolbar.customButtonsArr = [];
-                Array.prototype.push.apply(toolbar.customButtonsArr, btns);
+                if (!toolbar.customButtonsArr[plugin.guid])
+                    toolbar.customButtonsArr[plugin.guid] = [];
+                Array.prototype.push.apply(toolbar.customButtonsArr[plugin.guid], added);
+                Array.prototype.push.apply(btns, added);
             }
         });
         return btns;

From 81585ab647361b4d961d8b845703f3a463576a20 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Fri, 22 Mar 2024 17:40:32 +0300
Subject: [PATCH 14/16] Change config for custom buttons

---
 .../main/lib/controller/LayoutManager.js      | 183 +++++++++---------
 .../main/app/controller/Toolbar.js            | 167 ++++++++--------
 2 files changed, 185 insertions(+), 165 deletions(-)

diff --git a/apps/common/main/lib/controller/LayoutManager.js b/apps/common/main/lib/controller/LayoutManager.js
index f8cc507d6d..5bff58ac07 100644
--- a/apps/common/main/lib/controller/LayoutManager.js
+++ b/apps/common/main/lib/controller/LayoutManager.js
@@ -179,107 +179,116 @@ Common.UI.LayoutManager = new(function() {
             /*
             plugin = {
                 guid: 'plugin-guid',
-                tab: {
-                    id: 'tab-id',
-                    text: 'caption'
-                },
-                items: [
+                tabs: [
                     {
-                        id: 'button-id',
-                        type: 'button'='big-button' or 'small-button',
-                        icons: 'template string' or object
-                        text: 'caption' or - can be empty
-                        hint: 'hint',
-                        separator: true/false - inserted before item,
-                        split: true/false - used when has menu
-                        menu: [
+                        id: 'tab-id',
+                        text: 'caption',
+                        items: [
                             {
-                                id: 'item-id',
-                                text: 'caption'
-                                separator: true/false - inserted before item,
+                                id: 'button-id',
+                                type: 'button'='big-button' or 'small-button',
                                 icons: 'template string' or object
+                                text: 'caption' or - can be empty
+                                hint: 'hint',
+                                separator: true/false - inserted before item,
+                                split: true/false - used when has menu
+                                items: [
+                                    {
+                                        id: 'item-id',
+                                        text: 'caption'
+                                        separator: true/false - inserted before item,
+                                        icons: 'template string' or object
+                                    }
+                                ],
+                                enableToggle: true/false - can press and depress button, only when no menu or has split menu
+                                lockInViewMode: true/false - lock in view modes (preview review, view forms, disconnect, etc.),
+                                disabled: true/false
                             }
-                        ],
-                        enableToggle: true/false - can press and depress button, only when no menu or has split menu
-                        lockInViewMode: true/false - lock in view modes (preview review, view forms, disconnect, etc.),
-                        disabled: true/false
-                    }
+                        ]
+                    },
+                    {
+                        id: 'tab-id',
+                        text: 'caption',
+                        items: [...]
+                    },
                 ]
             }
             */
-            if (plugin.tab) {
-                var added = [],
-                    removed = _findRemovedButtons(toolbar, plugin.tab.id, plugin.guid, plugin.items);
-                plugin.items && plugin.items.forEach(function(item, index) {
-                    var btn = _findCustomButton(toolbar, plugin.tab.id, plugin.guid, item.id),
-                        _set = Common.enumLock;
-                    if (btn) { // change caption, hint, disable state, menu items
-                        if (btn instanceof Common.UI.Button) {
-                            var caption = item.text || '';
-                            if (btn.options.caption !== (caption || ' ')) {
-                                btn.cmpEl.closest('.btn-slot.x-huge').toggleClass('nocaption', !caption);
-                                btn.setCaption(caption || ' ');
-                                btn.options.caption = caption || ' ';
-                            }
-                            btn.updateHint(item.hint || '');
-                            (item.disabled!==undefined) && Common.Utils.lockControls(_set.customLock, !!item.disabled, {array: [btn]});
-                            if (btn.menu && item.menu && item.menu.length > 0) {// update menu items
-                                if (typeof btn.menu !== 'object') {
-                                    btn.setMenu(new Common.UI.Menu({items: []}));
-                                    btn.menu.on('item:click', function(menu, mi, e) {
-                                        _api && _api.onPluginToolbarMenuItemClick(mi.options.guid, mi.value);
-                                    });
+            plugin.tabs && plugin.tabs.forEach(function(tab) {
+                if (tab) {
+                    var added = [],
+                        removed = _findRemovedButtons(toolbar, tab.id, plugin.guid, tab.items);
+                    tab.items && tab.items.forEach(function(item, index) {
+                        var btn = _findCustomButton(toolbar, tab.id, plugin.guid, item.id),
+                            _set = Common.enumLock;
+                        if (btn) { // change caption, hint, disable state, menu items
+                            if (btn instanceof Common.UI.Button) {
+                                var caption = item.text || '';
+                                if (btn.options.caption !== (caption || ' ')) {
+                                    btn.cmpEl.closest('.btn-slot.x-huge').toggleClass('nocaption', !caption);
+                                    btn.setCaption(caption || ' ');
+                                    btn.options.caption = caption || ' ';
+                                }
+                                btn.updateHint(item.hint || '');
+                                (item.disabled!==undefined) && Common.Utils.lockControls(_set.customLock, !!item.disabled, {array: [btn]});
+                                if (btn.menu && item.items && item.items.length > 0) {// update menu items
+                                    if (typeof btn.menu !== 'object') {
+                                        btn.setMenu(new Common.UI.Menu({items: []}));
+                                        btn.menu.on('item:click', function(menu, mi, e) {
+                                            _api && _api.onPluginToolbarMenuItemClick(mi.options.guid, mi.value);
+                                        });
+                                    }
+                                    _fillButtonMenu(item.items, plugin.guid, lang, btn.menu);
                                 }
-                                _fillButtonMenu(item.menu, plugin.guid, lang, btn.menu);
                             }
+                            return;
                         }
-                        return;
-                    }
 
-                    if (item.type==='button' || item.type==='big-button') {
-                        btn = new Common.UI.ButtonCustom({
-                            cls: 'btn-toolbar x-huge icon-top',
-                            iconsSet: item.icons,
-                            caption: item.text || ' ',
-                            menu: item.menu,
-                            split: item.menu && !!item.split,
-                            enableToggle: item.enableToggle && (!item.menu || !!item.split),
-                            value: item.id,
-                            guid: plugin.guid,
-                            tabid: plugin.tab.id,
-                            separator: item.separator,
-                            hint: item.hint || '',
-                            lock: item.lockInViewMode ? [_set.customLock, _set.viewMode, _set.previewReviewMode, _set.viewFormMode, _set.docLockView, _set.docLockForms, _set.docLockComments, _set.selRangeEdit, _set.editFormula ] : [_set.customLock],
-                            dataHint: '1',
-                            dataHintDirection: 'bottom',
-                            dataHintOffset: 'small'
-                        });
-
-                        if (item.menu && typeof item.menu === 'object') {
-                            btn.setMenu(new Common.UI.Menu({items: []}));
-                            btn.menu.on('item:click', function(menu, mi, e) {
-                                _api && _api.onPluginToolbarMenuItemClick(mi.options.guid, mi.value);
-                            });
-                            _fillButtonMenu(item.menu, plugin.guid, lang, btn.menu);
-                        }
-                        if ( !btn.menu || btn.split) {
-                            btn.on('click', function(b, e) {
-                                _api && _api.onPluginToolbarMenuItemClick(b.options.guid, b.options.value, b.pressed);
+                        if (item.type==='button' || item.type==='big-button') {
+                            btn = new Common.UI.ButtonCustom({
+                                cls: 'btn-toolbar x-huge icon-top',
+                                iconsSet: item.icons,
+                                caption: item.text || ' ',
+                                menu: item.items,
+                                split: item.items && !!item.split,
+                                enableToggle: item.enableToggle && (!item.items || !!item.split),
+                                value: item.id,
+                                guid: plugin.guid,
+                                tabid: tab.id,
+                                separator: item.separator,
+                                hint: item.hint || '',
+                                lock: item.lockInViewMode ? [_set.customLock, _set.viewMode, _set.previewReviewMode, _set.viewFormMode, _set.docLockView, _set.docLockForms, _set.docLockComments, _set.selRangeEdit, _set.editFormula ] : [_set.customLock],
+                                dataHint: '1',
+                                dataHintDirection: 'bottom',
+                                dataHintOffset: 'small'
                             });
+
+                            if (item.items && typeof item.items === 'object') {
+                                btn.setMenu(new Common.UI.Menu({items: []}));
+                                btn.menu.on('item:click', function(menu, mi, e) {
+                                    _api && _api.onPluginToolbarMenuItemClick(mi.options.guid, mi.value);
+                                });
+                                _fillButtonMenu(item.items, plugin.guid, lang, btn.menu);
+                            }
+                            if ( !btn.menu || btn.split) {
+                                btn.on('click', function(b, e) {
+                                    _api && _api.onPluginToolbarMenuItemClick(b.options.guid, b.options.value, b.pressed);
+                                });
+                            }
+                            added.push(btn);
+                            item.disabled && Common.Utils.lockControls(_set.customLock, item.disabled, {array: [btn]});
                         }
-                        added.push(btn);
-                        item.disabled && Common.Utils.lockControls(_set.customLock, item.disabled, {array: [btn]});
-                    }
-                });
+                    });
 
-                toolbar.addCustomItems({action: plugin.tab.id, caption: plugin.tab.text || ''}, added, removed);
-                if (!toolbar.customButtonsArr)
-                    toolbar.customButtonsArr = [];
-                if (!toolbar.customButtonsArr[plugin.guid])
-                    toolbar.customButtonsArr[plugin.guid] = [];
-                Array.prototype.push.apply(toolbar.customButtonsArr[plugin.guid], added);
-                Array.prototype.push.apply(btns, added);
-            }
+                    toolbar.addCustomItems({action: tab.id, caption: tab.text || ''}, added, removed);
+                    if (!toolbar.customButtonsArr)
+                        toolbar.customButtonsArr = [];
+                    if (!toolbar.customButtonsArr[plugin.guid])
+                        toolbar.customButtonsArr[plugin.guid] = [];
+                    Array.prototype.push.apply(toolbar.customButtonsArr[plugin.guid], added);
+                    Array.prototype.push.apply(btns, added);
+                }
+            });
         });
         return btns;
     };
diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js
index 93f6b254f0..28cc908fb2 100644
--- a/apps/documenteditor/main/app/controller/Toolbar.js
+++ b/apps/documenteditor/main/app/controller/Toolbar.js
@@ -3712,11 +3712,6 @@ define([
         },
 
         onPluginToolbarMenu: function(data) {
-            // Common.UI.LayoutManager.getTab(toolbar, 'tab1', 'Tab 1');
-            // Common.UI.LayoutManager.getTab(toolbar, 'tab2', 'Tab 2');
-            // Common.UI.LayoutManager.getTab(toolbar, 'tab1', 'Tab 1');
-            // toolbar.setVisible('tab1', true);
-            // toolbar.setVisible('tab2', true);
             // var icons = [
             //     {
             //         "theme" : "theme-classic-light",
@@ -3750,96 +3745,112 @@ define([
             // ];
             // data = [{
             //     guid: 'plugin-guid-1',
-            //     tab: {
-            //         id: 'tab1',
-            //         text: 'Tab1'
-            //     },
-            //     items: [
-            //         {
-            //             id: 'button-id-1',
-            //             type: 'button',
-            //             icons: icons,
-            //             text:  { "en": "english Button 1", "es": "spanish Button 1"},
-            //             hint: 'hint',
-            //             lockInViewMode: true
-            //         },
+            //     tabs: [
             //         {
-            //             id: 'button-id-2',
-            //             type: 'button',
-            //             icons: icons,
-            //             text:  { "en": "english Toggle 2", "es": "spanish Toggle 2"},
-            //             enableToggle: true,
-            //             hint: 'hint',
-            //             lockInViewMode: true
-            //         },
-            //         {
-            //             id: 'button-id-3',
-            //             type: 'button',
-            //             icons: icons,
-            //             text:  { "en": "english Menu 3", "es": "spanish Menu 3"},
-            //             hint: 'hint',
-            //             separator: true,
-            //             split: false,
-            //             // disabled: true,
-            //             menu: [
+            //             id: 'tab1',
+            //             text: 'Tab1',
+            //             items: [
             //                 {
-            //                     id: 'item-id-1',
-            //                     text: 'Text1'
-            //                 }
-            //             ],
-            //             lockInViewMode: true
-            //         },
-            //         {
-            //             id: 'button-id-4',
-            //             type: 'button',
-            //             icons: icons,
-            //             text:  { "en": "english Split Menu 4", "es": "spanish Split Menu 4"},
-            //             hint: 'hint',
-            //             split: true,
-            //             menu: [
+            //                     id: 'button-id-1',
+            //                     type: 'button',
+            //                     icons: icons,
+            //                     text:  "Button 1",
+            //                     hint: 'hint',
+            //                     lockInViewMode: true
+            //                 },
+            //                 {
+            //                     id: 'button-id-2',
+            //                     type: 'button',
+            //                     icons: icons,
+            //                     text:  "Button 2",
+            //                     enableToggle: true,
+            //                     hint: 'hint',
+            //                     lockInViewMode: true
+            //                 },
+            //                 {
+            //                     id: 'button-id-3',
+            //                     type: 'button',
+            //                     icons: icons,
+            //                     text:  "Button Menu 3",
+            //                     hint: 'hint',
+            //                     separator: true,
+            //                     split: false,
+            //                     // disabled: true,
+            //                     items: [
+            //                         {
+            //                             id: 'item-id-1',
+            //                             text: 'Text1'
+            //                         }
+            //                     ],
+            //                     lockInViewMode: true
+            //                 },
             //                 {
-            //                     id: 'item-id-2',
-            //                     text: 'Text2'
+            //                     id: 'button-id-4',
+            //                     type: 'button',
+            //                     icons: icons,
+            //                     text:  "Button Split Menu 4",
+            //                     hint: 'hint',
+            //                     split: true,
+            //                     items: [
+            //                         {
+            //                             id: 'item-id-2',
+            //                             text: 'Text2'
+            //                         },
+            //                         {
+            //                             id: 'item-id-2',
+            //                             text: 'Text2',
+            //                             items: [
+            //                                 {
+            //                                     id: 'item-id-3',
+            //                                     text: 'Text3'
+            //                                 },
+            //                                 {
+            //                                     id: 'item-id-3',
+            //                                     text: 'Text3',
+            //                                     separator: true
+            //                                 }
+            //                             ],
+            //                             separator: true
+            //                         }
+            //                     ],
+            //                     lockInViewMode: true
             //                 },
             //                 {
-            //                     id: 'item-id-2',
-            //                     text: 'Text2',
+            //                     id: 'button-id-5',
+            //                     type: 'button',
+            //                     icons: icons,
+            //                     text:  "Toggle Split Menu 5",
+            //                     hint: 'hint',
+            //                     split: true,
+            //                     enableToggle: true,
             //                     items: [
             //                         {
-            //                             id: 'item-id-3',
-            //                             text: 'Text3'
+            //                             id: 'item-id-2',
+            //                             text: 'Text2'
             //                         },
             //                         {
-            //                             id: 'item-id-3',
-            //                             text: 'Text3',
+            //                             id: 'item-id-2',
+            //                             text: 'Text2',
             //                             separator: true
             //                         }
             //                     ],
-            //                     separator: true
+            //                     lockInViewMode: true
             //                 }
-            //             ],
-            //             lockInViewMode: true
+            //             ]
             //         },
             //         {
-            //             id: 'button-id-5',
-            //             type: 'button',
-            //             icons: icons,
-            //             text:  { "en": "english Toggle Split Menu 5", "es": "spanish Toggle Split Menu 5"},
-            //             hint: 'hint',
-            //             split: true,
-            //             enableToggle: true,
-            //             menu: [
+            //             id: 'tab2',
+            //             text: 'Tab2',
+            //             items: [
             //                 {
-            //                     id: 'item-id-2',
-            //                     text: 'Text2'
+            //                     id: 'button-id-7',
+            //                     type: 'button',
+            //                     icons: icons,
+            //                     text:  "Button 7",
+            //                     hint: 'hint',
+            //                     lockInViewMode: true
             //                 },
-            //                 {
-            //                     id: 'item-id-2',
-            //                     text: 'Text2',
-            //                     separator: true
-            //                 }
-            //             ],
-            //             lockInViewMode: true
+            //           ]
             //         }
             //     ]
             // }];

From 72e5fe4c0b743fcf07a76850f4c8bf1900211a85 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Thu, 28 Mar 2024 19:23:50 +0300
Subject: [PATCH 15/16] Fix merge

---
 apps/common/main/lib/component/ComboDataView.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/common/main/lib/component/ComboDataView.js b/apps/common/main/lib/component/ComboDataView.js
index a31b8e6270..8cd343395d 100644
--- a/apps/common/main/lib/component/ComboDataView.js
+++ b/apps/common/main/lib/component/ComboDataView.js
@@ -236,7 +236,6 @@ define([
         },
 
         startCheckSize: function() {
-            if (!this.cmpEl || !this.cmpEl.is(':visible')) return;
             var me = this;
             me.checkSize();
             if (!me._timer_id) {

From 5a1f1ce8fe912478b18d55d9e2a2774bd9efa372 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Thu, 28 Mar 2024 19:32:19 +0300
Subject: [PATCH 16/16] Refactoring

---
 .../main/app/controller/Toolbar.js            | 142 ------------------
 1 file changed, 142 deletions(-)

diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js
index 8dde117610..2fa5ae7c95 100644
--- a/apps/documenteditor/main/app/controller/Toolbar.js
+++ b/apps/documenteditor/main/app/controller/Toolbar.js
@@ -3720,148 +3720,6 @@ define([
         },
 
         onPluginToolbarMenu: function(data) {
-            // var icons = [
-            //     {
-            //         "theme" : "theme-classic-light",
-            //         "100%": {
-            //             "normal": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/light/icon.png",
-            //             "active": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/dark/icon.png"
-            //         },
-            //         "200%": {
-            //             "normal": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/light/icon@2x.png",
-            //             "active": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/dark/icon@2x.png"
-            //         }
-            //     },
-            //     {
-            //         "style" : "light",
-            //         "100%": {
-            //             "normal": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/light/icon.png"
-            //         },
-            //         "200%": {
-            //             "normal": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/light/icon@2x.png"
-            //         }
-            //     },
-            //     {
-            //         "style" : "dark",
-            //         "100%": {
-            //             "normal": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/dark/icon.png"
-            //         },
-            //         "200%": {
-            //             "normal": "http://127.0.0.1:8000/sdkjs-plugins/chatgpt/resources/dark/icon@2x.png"
-            //         }
-            //     }
-            // ];
-            // data = [{
-            //     guid: 'plugin-guid-1',
-            //     tabs: [
-            //         {
-            //             id: 'tab1',
-            //             text: 'Tab1',
-            //             items: [
-            //                 {
-            //                     id: 'button-id-1',
-            //                     type: 'button',
-            //                     icons: icons,
-            //                     text:  "Button 1",
-            //                     hint: 'hint',
-            //                     lockInViewMode: true
-            //                 },
-            //                 {
-            //                     id: 'button-id-2',
-            //                     type: 'button',
-            //                     icons: icons,
-            //                     text:  "Button 2",
-            //                     enableToggle: true,
-            //                     hint: 'hint',
-            //                     lockInViewMode: true
-            //                 },
-            //                 {
-            //                     id: 'button-id-3',
-            //                     type: 'button',
-            //                     icons: icons,
-            //                     text:  "Button Menu 3",
-            //                     hint: 'hint',
-            //                     separator: true,
-            //                     split: false,
-            //                     // disabled: true,
-            //                     items: [
-            //                         {
-            //                             id: 'item-id-1',
-            //                             text: 'Text1'
-            //                         }
-            //                     ],
-            //                     lockInViewMode: true
-            //                 },
-            //                 {
-            //                     id: 'button-id-4',
-            //                     type: 'button',
-            //                     icons: icons,
-            //                     text:  "Button Split Menu 4",
-            //                     hint: 'hint',
-            //                     split: true,
-            //                     items: [
-            //                         {
-            //                             id: 'item-id-2',
-            //                             text: 'Text2'
-            //                         },
-            //                         {
-            //                             id: 'item-id-2',
-            //                             text: 'Text2',
-            //                             items: [
-            //                                 {
-            //                                     id: 'item-id-3',
-            //                                     text: 'Text3'
-            //                                 },
-            //                                 {
-            //                                     id: 'item-id-3',
-            //                                     text: 'Text3',
-            //                                     separator: true
-            //                                 }
-            //                             ],
-            //                             separator: true
-            //                         }
-            //                     ],
-            //                     lockInViewMode: true
-            //                 },
-            //                 {
-            //                     id: 'button-id-5',
-            //                     type: 'button',
-            //                     icons: icons,
-            //                     text:  "Toggle Split Menu 5",
-            //                     hint: 'hint',
-            //                     split: true,
-            //                     enableToggle: true,
-            //                     items: [
-            //                         {
-            //                             id: 'item-id-2',
-            //                             text: 'Text2'
-            //                         },
-            //                         {
-            //                             id: 'item-id-2',
-            //                             text: 'Text2',
-            //                             separator: true
-            //                         }
-            //                     ],
-            //                     lockInViewMode: true
-            //                 }
-            //             ]
-            //         },
-            //         {
-            //             id: 'tab2',
-            //             text: 'Tab2',
-            //             items: [
-            //                 {
-            //                     id: 'button-id-7',
-            //                     type: 'button',
-            //                     icons: icons,
-            //                     text:  "Button 7",
-            //                     hint: 'hint',
-            //                     lockInViewMode: true
-            //                 },
-            //           ]
-            //         }
-            //     ]
-            // }];
             this.toolbar && Array.prototype.push.apply(this.toolbar.lockControls, Common.UI.LayoutManager.addCustomItems(this.toolbar, data));
         },