diff --git a/test/spreadsheeteditor/main/index.html b/test/spreadsheeteditor/main/index.html
index 661c560f0..8743a3b3e 100644
--- a/test/spreadsheeteditor/main/index.html
+++ b/test/spreadsheeteditor/main/index.html
@@ -8,6 +8,7 @@
     <meta name="author" content="">
 
     <!-- debug begin -->
+
     <link rel="stylesheet" type="text/css" href="../../../../sdkjs/cell/css/main.css"/>
     <link rel="stylesheet/less" type="text/css" href="resources/less/application.less" />
     <link rel="stylesheet/less" type="text/css" href="resources/less/celleditor.less" />
@@ -205,16 +206,18 @@
 </script>
 
 <div class="viewer">
-    <div class="ce-group-name">
-        <input id="ce-cell-name" class="aslabel form-control" type="text">
-        <div id="ce-cell-name-menu"></div>
-        <button id="ce-func-label" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-function"></i></button>
-    </div>
-    <div class="ce-group-expand">
-        <button id="ce-btn-expand" type="button" class="btn"><span class="caret">&nbsp;</span></button>
-    </div>
-    <div class="ce-group-content">
-        <textarea id="ce-cell-content" class="form-control" spellcheck="false" rows="1" cols="20"></textarea>
+    <div id="cell-editing-box">
+        <div class="ce-group-name">
+            <input id="ce-cell-name" class="aslabel form-control" type="text">
+            <div id="ce-cell-name-menu" class="layout-item" style="height: 20px; top: 0px; border-left: none;"></div>
+           <!-- <button id="ce-func-label" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-function"></i></button>
+        --></div>
+        <div class="ce-group-expand">
+            <button id="ce-btn-expand" type="button" class="btn"><span class="caret">&nbsp;</span></button>
+        </div>
+        <div class="ce-group-content">
+            <textarea id="ce-cell-content" class="form-control" spellcheck="false" rows="1" cols="20"></textarea>
+        </div>
     </div>
     <div id="editor_sdk" class="sdk-view" style="overflow: hidden;" tabindex="-1"></div>
     <ul id="worksheets" class="worksheet-list"></ul>
@@ -263,12 +266,16 @@
 <script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
 <script type="text/javascript" src="../../../vendor/jquery.browser/dist/jquery.browser.min.js"></script>
 <script type="text/javascript" src="../../../vendor/bootstrap/dist/js/bootstrap.js"></script>
+<script type="text/javascript" src="../../../vendor/underscore/underscore.js"></script>
+
+
 <script type="text/javascript" src="../../../vendor/sockjs/sockjs.min.js"></script>
 <script type="text/javascript" src="../../../vendor/underscore/underscore-min.js"></script>
 <script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
 <script type="text/javascript" src="../../../vendor/jszip/jszip.min.js"></script>
 <script type="text/javascript" src="../../../vendor/jszip-utils/jszip-utils.min.js"></script>
 
+<script type="text/javascript" src="../../../vendor/backbone/backbone.js"></script>
 
 <script src="../../../vendor/requirejs/require.js"></script>
 <script>
@@ -299,6 +306,9 @@
 <script type="text/javascript" src="js/CellEditorView.js"></script>
 <script type="text/javascript" src="js/CellEditorController.js"></script>-->
 
+
+<script type="text/javascript" src="../../unit-tests/common/main/lib/view/CellEditor.js"></script>
+<script type="text/javascript" src="../../unit-tests/common/main/lib/controller/CellEditor.js"></script>
 <script type="text/javascript" src="js/ApplicationView.js"></script>
 <script type="text/javascript" src="js/ApplicationController.js"></script>
 <script type="text/javascript" src="js/application.js"></script>
diff --git a/test/spreadsheeteditor/main/js/ApplicationController.js b/test/spreadsheeteditor/main/js/ApplicationController.js
index e97d8dff3..c28f5fca1 100644
--- a/test/spreadsheeteditor/main/js/ApplicationController.js
+++ b/test/spreadsheeteditor/main/js/ApplicationController.js
@@ -243,6 +243,11 @@ SSE.ApplicationController = new(function(){
         Common.Gateway.on('requestclose',       onRequestClose);
 
 
+         if(common.controller.CellEditor ) {
+             common.controller.CellEditor.create();
+             common.controller.CellEditor.setApi(api)
+             common.controller.CellEditor.setMode(config);
+         }
 
         SSE.ApplicationView.tools.get('#idt-fullscreen')
             .on('click', function(){
diff --git a/test/spreadsheeteditor/main/js/ApplicationView.js b/test/spreadsheeteditor/main/js/ApplicationView.js
index 917609fa5..cd16ae144 100644
--- a/test/spreadsheeteditor/main/js/ApplicationView.js
+++ b/test/spreadsheeteditor/main/js/ApplicationView.js
@@ -30,45 +30,19 @@
  * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
  *
 */
+
 if (SSE === undefined) {
     var SSE = {};
 }
 
 SSE.ApplicationView = new(function(){
 
-    var $btnTools
-        ,$cellname
-        ,$btnexpand
-        ,$btnfunc
-        ,btnNamedRanges;
-
-
-
+    var $btnTools;
     // Initialize view
 
     function createView(){
-
-        $cellname = $('#ce-cell-name');
-        $btnexpand = $('#ce-btn-expand');
-        $btnfunc = $('#ce-func-label');
-        $btnfunc.addClass('disabled');
-        /*btnNamedRanges = new Common.UI.Button({
-            parentEl: $('#ce-cell-name-menu'),
-            menu        : new Common.UI.Menu({
-                style   : 'min-width: 70px;max-width:400px;',
-                maxHeight: 250,
-                items: [
-                    { caption: this.textManager, value: 'manager' },
-                    { caption: '--' }
-                ]
-            })
-        });
-        this.btnNamedRanges.setVisible(false);
-        this.btnNamedRanges.menu.setOffset(-81);*/
-
         $btnTools = $('#box-tools button');
 
-
         $btnTools.addClass('dropdown-toggle').attr('data-toggle', 'dropdown').attr('aria-expanded', 'true');
         $btnTools.parent().append(
             '<ul class="dropdown-menu pull-right">' +
@@ -85,25 +59,13 @@ SSE.ApplicationView = new(function(){
     function getTools(name) {
         return $btnTools.parent().find(name);
     }
-    function updateCellInfo(info) {
-        if (info) {
-            this.$cellname.val(typeof(info)=='string' ? info : info.asc_getName());
-        }
-    }
-    function cellNameDisabled(disabled){
-        (disabled) ? this.$cellname.attr('disabled', 'disabled') : this.$cellname.removeAttr('disabled');
-        this.btnNamedRanges.setDisabled(disabled);
-    }
+
 
     return {
         create: createView
         , tools: {
             get: getTools
         },
-        cell:   {
-            updateInfo: updateCellInfo,
-            nameDisabled: cellNameDisabled
-        },
 
         txtDownload: 'Download',
         txtPrint: 'Print',
diff --git a/test/spreadsheeteditor/main/resources/less/celleditor.less b/test/spreadsheeteditor/main/resources/less/celleditor.less
index 75dbb5e84..ee2d65154 100644
--- a/test/spreadsheeteditor/main/resources/less/celleditor.less
+++ b/test/spreadsheeteditor/main/resources/less/celleditor.less
@@ -2,8 +2,9 @@
 @import "../../../../unit-tests/common/main/resources/less/colors-table-ie-fix.less";
 @import "../../../../unit-tests/common/main/resources/less/variables.less";
 @import "../../../../unit-tests/common/main/resources/less/colors-table.less";
+@import "../../../../unit-tests/common/main/resources/less/asc-mixins.less";
+@import "../../../../unit-tests/common/main/resources/less/buttons.less";
 #cell-editing-box {
-    --pixel-ratio-factor: 1;
     border-bottom: solid @scaled-one-px-value-ie @border-toolbar-ie;
     border-bottom: solid @scaled-one-px-value @border-toolbar;
     border-left: solid @scaled-one-px-value-ie @border-toolbar-ie;
@@ -23,7 +24,7 @@
         #ce-cell-name {
             width: 100px;
             height: 19px;
-            height: calc(19px + (1px - 1px/var(--pixel-ratio-factor,1)));
+            //height: calc(19px + (1px - 1px/var(--pixel-ratio-factor,1)));
             padding: 0px 19px 0 4px;
             vertical-align: top;
             display: inline-block;
diff --git a/test/spreadsheeteditor/main/template/CellEditor.template b/test/spreadsheeteditor/main/template/CellEditor.template
deleted file mode 100644
index 1c1abe44c..000000000
--- a/test/spreadsheeteditor/main/template/CellEditor.template
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="ce-group-name">
-    <input id="ce-cell-name" class="aslabel form-control" type="text">
-    <div id="ce-cell-name-menu"></div>
-    <button id="ce-func-label" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-function"></i></button>
-</div>
-<div class="ce-group-expand">
-    <button id="ce-btn-expand" type="button" class="btn"><span class="caret">&nbsp;</span></button>
-</div>
-<div class="ce-group-content">
-    <textarea id="ce-cell-content" class="form-control" spellcheck="false" rows="1" cols="20"></textarea>
-</div>
diff --git a/test/unit-tests/common/main/lib/component/Menu.js b/test/unit-tests/common/main/lib/component/Menu.js
new file mode 100644
index 000000000..398f0490c
--- /dev/null
+++ b/test/unit-tests/common/main/lib/component/Menu.js
@@ -0,0 +1,1058 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2019
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+*/
+/**
+ *  Menu.js
+ *
+ *  A menu object. This is the container to which you may add {@link Common.UI.MenuItem menu items}.
+ *
+ *  Created by Alexander Yuzhin on 1/28/14
+ *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+/**
+ *  Default template
+ *
+ *  <ul class="dropdown-menu" role="menu">
+ *      <li><a href="#">item 1</a></li>-->
+ *      <li><a href="#">item 2</a></li>-->
+ *      <li class="divider"></li>-->
+ *      <li><a href="#">item 3</a></li>
+ *  </ul>
+ *
+ *  A useful classes of menu position
+ *
+ *  - `'pull-right'` using for layout menu by right side of a parent
+ *
+ *
+ *  Example usage:
+ *
+ *      new Common.UI.Menu({
+ *          items: [
+ *              { caption: 'item 1', value: 1 },
+ *              { caption: 'item 1', value: 2 },
+ *              { caption: '--' },
+ *              { caption: 'item 1', value: 3 },
+ *          ]
+ *      })
+ *
+ *  @property {Object} itemTemplate
+ *
+ *  Default template for items
+ *
+ *
+ *  @property {Array} items
+ *
+ *  Arrow of the {Common.UI.MenuItem} menu items
+ *
+ *
+ *  @property {Boolean/Number} restoreHeight
+ *
+ *  Adjust to the browser height and restore to restoreHeight when it's Number
+ *
+ *
+ */
+
+if (Common === undefined)
+    var Common = {};
+
+define([
+    'common/main/lib/extend/Bootstrap',
+    'common/main/lib/component/BaseView',
+    'common/main/lib/component/MenuItem',
+    'common/main/lib/component/Scroller'
+], function () {
+    'use strict';
+
+    Common.UI.Menu = (function(){
+        var manager = (function(){
+            var active = [],
+                menus = {};
+
+            return {
+                register: function(menu) {
+                    menus[menu.id] = menu;
+                    menu
+                    .on('show:after', function(m) {
+                        active.push(m);
+                    })
+                    .on('hide:after', function(m) {
+                        var index = active.indexOf(m);
+
+                        if (index > -1)
+                            active.splice(index, 1);
+                    });
+                },
+
+                unregister: function(menu) {
+                    var index = active.indexOf(menu);
+
+                    delete menus[menu.id];
+
+                    if (index > -1)
+                        active.splice(index, 1);
+
+                    menu.off('show:after').off('hide:after');
+                },
+
+                hideAll: function() {
+                    Common.NotificationCenter.trigger('menumanager:hideall');
+
+                    if (active && active.length > 0) {
+                        _.each(active, function(menu) {
+                            if (menu) menu.hide();
+                        });
+                        return true;
+                    }
+                    return false;
+                }
+            }
+        })();
+
+        return _.extend(Common.UI.BaseView.extend({
+            options : {
+                cls         : '',
+                style       : '',
+                itemTemplate: null,
+                items       : [],
+                menuAlign   : 'tl-bl',
+                menuAlignEl : null,
+                offset      : [0, 0],
+                cyclic      : true,
+                search      : false,
+                scrollAlwaysVisible: true
+            },
+
+            template: _.template([
+                '<ul class="dropdown-menu <%= options.cls %>" oo_editor_input="true" style="<%= options.style %>" role="menu"></ul>'
+            ].join('')),
+
+            initialize : function(options) {
+                Common.UI.BaseView.prototype.initialize.call(this, options);
+
+                var me = this;
+
+                this.id             = this.options.id || Common.UI.getId();
+                this.itemTemplate   = this.options.itemTemplate || Common.UI.MenuItem.prototype.template;
+                this.rendered       = false;
+                this.items          = [];
+                this.offset         = [0, 0];
+                this.menuAlign      = this.options.menuAlign;
+                this.menuAlignEl    = this.options.menuAlignEl;
+                this.scrollAlwaysVisible = this.options.scrollAlwaysVisible;
+                this.search = this.options.search;
+
+                if (this.options.restoreHeight) {
+                    this.options.restoreHeight = (typeof (this.options.restoreHeight) == "number") ? this.options.restoreHeight : (this.options.maxHeight ? this.options.maxHeight : 100000);
+                    !this.options.maxHeight && (this.options.maxHeight = this.options.restoreHeight);
+                }
+
+                if (!this.options.cyclic) this.options.cls += ' no-cyclic';
+
+                _.each(this.options.items, function(item) {
+                    if (item instanceof Common.UI.MenuItem) {
+                        me.items.push(item)
+                    } else {
+                        me.items.push(
+                            new Common.UI.MenuItem(_.extend({
+                                tagName : 'li',
+                                template: me.itemTemplate
+                            }, item))
+                        );
+                    }
+                });
+
+                if (this.options.el)
+                    this.render();
+
+                manager.register(this);
+            },
+
+            remove: function() {
+                manager.unregister(this);
+                Common.UI.BaseView.prototype.remove.call(this);
+            },
+
+            render: function(parentEl) {
+                var me = this;
+
+                this.trigger('render:before', this);
+
+                this.cmpEl = me.$el || $(this.el);
+
+                if (parentEl) {
+                    this.setElement(parentEl, false);
+
+                    if (!me.rendered) {
+                        this.cmpEl = $(this.template({
+                            options : me.options
+                        }));
+
+                        parentEl.append(this.cmpEl);
+                    }
+                } else {
+                    if (!me.rendered) {
+                        this.cmpEl = this.template({
+                            options : me.options
+                        });
+                        this.$el.append(this.cmpEl);
+                    }
+                }
+
+                var rootEl = this.cmpEl.parent(),
+                    menuRoot = (rootEl.attr('role') === 'menu') ? rootEl : rootEl.find('[role=menu]');
+                this.menuRoot = menuRoot;
+
+                if (menuRoot) {
+                    if (!me.rendered) {
+                        _.each(me.items || [], function(item) {
+                            menuRoot.append(item.render().el);
+
+                            item.on('click',  _.bind(me.onItemClick, me));
+                            item.on('toggle', _.bind(me.onItemToggle, me));
+                        });
+                    }
+
+                    if (this.options.maxHeight) {
+                        menuRoot.css({'max-height': me.options.maxHeight});
+                        this.scroller = new Common.UI.Scroller({
+                            el: me.$el.find('.dropdown-menu '),
+                            minScrollbarLength: 30,
+                            suppressScrollX: true,
+                            alwaysVisibleY: this.scrollAlwaysVisible
+                        });
+                    }
+
+                    menuRoot.css({
+                        position    : 'fixed',
+                        right       : 'auto',
+                        left        : -1000,
+                        top         : -1000
+                    });
+
+                    this.parentEl = menuRoot.parent();
+
+                    this.parentEl.on('show.bs.dropdown',    _.bind(me.onBeforeShowMenu, me));
+                    this.parentEl.on('shown.bs.dropdown',   _.bind(me.onAfterShowMenu, me));
+                    this.parentEl.on('hide.bs.dropdown',    _.bind(me.onBeforeHideMenu, me));
+                    this.parentEl.on('hidden.bs.dropdown',  _.bind(me.onAfterHideMenu, me));
+                    this.parentEl.on('keydown.after.bs.dropdown', _.bind(me.onAfterKeydownMenu, me));
+
+                    menuRoot.hover(
+                        function(e) { me.isOver = true;},
+                        function(e) { me.isOver = false; }
+                    );
+                }
+
+                this.rendered = true;
+
+                this.trigger('render:after', this);
+
+                return this;
+            },
+
+            isVisible: function() {
+                return this.rendered && (this.cmpEl.is(':visible'));
+            },
+
+            show: function() {
+                if (this.rendered && this.parentEl && !this.parentEl.hasClass('open')) {
+                    this.cmpEl.dropdown('toggle');
+                }
+            },
+
+            hide: function() {
+                if (this.rendered && this.parentEl) {
+                    if ( this.parentEl.hasClass('open') )
+                        this.cmpEl.dropdown('toggle');
+                    else if (this.parentEl.hasClass('over'))
+                        this.parentEl.removeClass('over');
+                }
+            },
+
+            insertItem: function(index, item) {
+                var me = this,
+                    el = this.cmpEl;
+
+                if (!(item instanceof Common.UI.MenuItem)) {
+                    item = new Common.UI.MenuItem(_.extend({
+                        tagName : 'li',
+                        template: me.itemTemplate
+                    }, item));
+                }
+
+                if (index < 0 || index >= me.items.length)
+                    me.items.push(item);
+                else
+                    me.items.splice(index, 0, item);
+
+                if (this.rendered) {
+                    var menuRoot = this.menuRoot;
+                    if (menuRoot) {
+                        if (index < 0) {
+                            menuRoot.append(item.render().el);
+                        } else if (index === 0) {
+                            menuRoot.prepend(item.render().el);
+                        } else {
+                            menuRoot.children('li:nth-child(' + (index+1) + ')').before(item.render().el);
+                        }
+
+                        item.on('click',  _.bind(me.onItemClick, me));
+                        item.on('toggle', _.bind(me.onItemToggle, me));
+                    }
+                }
+            },
+
+            addItem: function(item) {
+                this.insertItem(-1, item);
+            },
+
+            removeItem: function(item) {
+                var me = this,
+                    index = me.items.indexOf(item);
+
+                if (index > -1) {
+                    me.items.splice(index, 1);
+
+                    item.off('click').off('toggle');
+                    item.remove();
+                }
+            },
+
+            removeItems: function(from, len) {
+                if (from > this.items.length-1) return;
+                if (from+len>this.items.length) len = this.items.length - from;
+
+                for (var i=from; i<from+len; i++) {
+                    this.items[i].off('click').off('toggle');
+                    this.items[i].remove();
+                }
+                this.items.splice(from, len);
+            },
+
+            removeAll: function() {
+                var me = this;
+
+                _.each(me.items, function(item){
+                    item.off('click').off('toggle');
+                    item.remove();
+                });
+
+                me.items = [];
+            },
+
+            onBeforeShowMenu: function(e) {
+                Common.NotificationCenter.trigger('menu:show');
+                this.trigger('show:before', this, e);
+                this.alignPosition();
+            },
+
+            onAfterShowMenu: function(e) {
+                this.trigger('show:after', this, e);
+                if (this.scroller) {
+                    var menuRoot = this.menuRoot;
+                    if (this.wheelSpeed===undefined) {
+                        var item = menuRoot.find('> li:first'),
+                            itemHeight = (item.length) ? item.outerHeight() : 1;
+                        this.wheelSpeed = Math.min((Math.floor(menuRoot.height()/itemHeight) * itemHeight)/10, 20);
+                    }
+                    this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible, wheelSpeed: this.wheelSpeed});
+
+                    var $selected = menuRoot.find('> li .checked');
+                    if ($selected.length) {
+                        var itemTop = $selected.position().top,
+                            itemHeight = $selected.outerHeight(),
+                            listHeight = menuRoot.outerHeight();
+                        if (itemTop < 0 || itemTop + itemHeight > listHeight) {
+                            var height = menuRoot.scrollTop() + itemTop + (itemHeight - listHeight)/2;
+                            height = (Math.floor(height/itemHeight) * itemHeight);
+                            menuRoot.scrollTop(height);
+                        }
+                        setTimeout(function(){$selected.focus();}, 1);
+                    }
+                }
+                this._search = {};
+            },
+
+            onBeforeHideMenu: function(e) {
+                this.trigger('hide:before', this, e);
+
+                if (Common.UI.Scroller.isMouseCapture())
+                    e.preventDefault();
+            },
+
+            onAfterHideMenu: function(e, isFromInputControl) {
+                this.trigger('hide:after', this, e, isFromInputControl);
+                Common.NotificationCenter.trigger('menu:hide', this, isFromInputControl);
+            },
+
+            onAfterKeydownMenu: function(e) {
+                this.trigger('keydown:before', this, e);
+                if (e.isDefaultPrevented())
+                    return;
+
+                if (e.keyCode == Common.UI.Keys.RETURN) {
+                    var li = $(e.target).closest('li');
+                    if (li.length<=0) li = $(e.target).parent().find('li .dataview');
+                    if (li.length>0) li.click();
+                    if (!li.hasClass('dropdown-submenu'))
+                        Common.UI.Menu.Manager.hideAll();
+                    if ( $(e.currentTarget).closest('li').hasClass('dropdown-submenu')) {
+                        e.stopPropagation();
+                        return false;
+                    }
+                } else if (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN)  {
+                    this.fromKeyDown = true;
+                } else if (e.keyCode == Common.UI.Keys.ESC)  {
+//                    Common.NotificationCenter.trigger('menu:afterkeydown', e);
+//                    return false;
+                } else if (this.search && e.keyCode > 64 && e.keyCode < 91 && e.key){
+                    var me = this;
+                    clearTimeout(this._search.timer);
+                    this._search.timer = setTimeout(function () { me._search = {}; }, 1000);
+
+                    (!this._search.text) && (this._search.text = '');
+                    (!this._search.char) && (this._search.char = e.key);
+                    (this._search.char !== e.key) && (this._search.full = true);
+                    this._search.text += e.key;
+                    if (this._search.index===undefined) {
+                        var $items = this.menuRoot.find('> li').find('> a');
+                        this._search.index = $items.index($items.filter(':focus'));
+                    }
+                    this.selectCandidate();
+                }
+            },
+
+            selectCandidate: function() {
+                var index = this._search.index || 0,
+                    re = new RegExp('^' + ((this._search.full) ? this._search.text : this._search.char), 'i'),
+                    itemCandidate, idxCandidate;
+
+                for (var i=0; i<this.items.length; i++) {
+                    var item = this.items[i];
+                    if (re.test(item.caption)) {
+                        if (!itemCandidate) {
+                            itemCandidate = item;
+                            idxCandidate = i;
+                        }
+                        if (this._search.full && i==index || i>index) {
+                            itemCandidate = item;
+                            idxCandidate = i;
+                            break;
+                        }
+                    }
+                }
+
+                if (itemCandidate) {
+                    this._search.index = idxCandidate;
+                    var item = itemCandidate.cmpEl.find('a');
+                    if (this.scroller) {
+                        this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible, wheelSpeed: this.wheelSpeed});
+                        var itemTop = item.position().top,
+                            itemHeight = item.outerHeight(),
+                            listHeight = this.menuRoot.outerHeight();
+                        if (itemTop < 0 || itemTop + itemHeight > listHeight) {
+                            var height = this.menuRoot.scrollTop() + itemTop;
+                            height = (Math.floor(height/itemHeight) * itemHeight);
+                            this.menuRoot.scrollTop(height);
+                        }
+                    }
+                    item.focus();
+                }
+            },
+
+            onItemClick: function(item, e) {
+                if (!item.menu) this.isOver = false;
+                if (item.options.stopPropagation) {
+                    e.stopPropagation();
+                    var me = this;
+                    _.delay(function(){
+                        me.$el.parent().parent().find('[data-toggle=dropdown]').focus();
+                    }, 10);
+                    return;
+                }
+                this.trigger('item:click', this, item, e);
+            },
+
+            onItemToggle: function(item, state, e) {
+                this.trigger('item:toggle', this, item, state, e);
+            },
+
+            setOffset: function(offsetX, offsetY) {
+                this.offset[0] = _.isUndefined(offsetX) ? this.offset[0] : offsetX;
+                this.offset[1] = _.isUndefined(offsetY) ? this.offset[1] : offsetY;
+                this.alignPosition();
+            },
+
+            getOffset: function() {
+                return this.offset;
+            },
+
+            alignPosition: function(fixedAlign, fixedOffset) {
+                var menuRoot = this.menuRoot,
+                    menuParent  = this.menuAlignEl || menuRoot.parent(),
+                    m           = this.menuAlign.match(/^([a-z]+)-([a-z]+)/),
+                    offset      = menuParent.offset(),
+                    docW        = Common.Utils.innerWidth() - 10,
+                    docH        = Common.Utils.innerHeight() - 10, // Yep, it's magic number
+                    menuW       = menuRoot.outerWidth(),
+                    menuH       = menuRoot.outerHeight(),
+                    parentW     = menuParent.outerWidth(),
+                    parentH     = menuParent.outerHeight();
+
+                var posMenu = {
+                    'tl': [0, 0],
+                    'bl': [0, menuH],
+                    'tr': [menuW, 0],
+                    'br': [menuW, menuH]
+                };
+                var posParent = {
+                    'tl': [0, 0],
+                    'tr': [parentW, 0],
+                    'bl': [0, parentH],
+                    'br': [parentW, parentH]
+                };
+                var left = offset.left - posMenu[m[1]][0] + posParent[m[2]][0] + this.offset[0];
+                var top  = offset.top  - posMenu[m[1]][1] + posParent[m[2]][1] + this.offset[1];
+
+                if (left + menuW > docW)
+                    if (menuParent.is('li.dropdown-submenu')) {
+                        left = offset.left - menuW + 2;
+                    } else {
+                        left = docW - menuW;
+                    }
+                if (left < 0)
+                    left = 0;
+
+                if (this.options.restoreHeight) {
+                    if (typeof (this.options.restoreHeight) == "number") {
+                        if (top + menuH > docH) {
+                            menuRoot.css('max-height', (docH - top) + 'px');
+                            (!this.scroller) && (this.scroller = new Common.UI.Scroller({
+                                el: this.$el.find('.dropdown-menu '),
+                                minScrollbarLength: 30,
+                                suppressScrollX: true,
+                                alwaysVisibleY: this.scrollAlwaysVisible
+                            }));
+                            this.wheelSpeed = undefined;
+                        } else if ( top + menuH < docH && menuRoot.height() < this.options.restoreHeight) {
+                            menuRoot.css('max-height', (Math.min(docH - top, this.options.restoreHeight)) + 'px');
+                            this.wheelSpeed = undefined;
+                        }
+                    }
+                } else {
+                    var cg = Common.Utils.croppedGeometry();
+                    docH = cg.height - 10;
+                    if (top + menuH > docH + cg.top) {
+                        if (fixedAlign && typeof fixedAlign == 'string') { // how to align if menu height > window height
+                            m = fixedAlign.match(/^([a-z]+)-([a-z]+)/);
+                            top  = offset.top  - posMenu[m[1]][1] + posParent[m[2]][1] + this.offset[1] + (fixedOffset || 0);
+                        } else
+                            top = docH - menuH;
+                    }
+
+
+                    if (top < cg.top)
+                        top = cg.top;
+                }
+                if (this.options.additionalAlign)
+                    this.options.additionalAlign.call(this, menuRoot, left, top);
+                else {
+                    var _css = {left: left, top: top};
+                    if (!(menuH < docH)) _css['margin-top'] = 0;
+
+                    menuRoot.css(_css);
+                }
+            },
+
+            clearAll: function() {
+                _.each(this.items, function(item){
+                    if (item.setChecked)
+                        item.setChecked(false, true);
+                });
+            }
+
+        }), {
+            Manager: (function() {
+                return manager;
+            })()
+        })
+    })();
+
+    Common.UI.MenuSimple = Common.UI.BaseView.extend({
+        options : {
+            cls         : '',
+            style       : '',
+            itemTemplate: null,
+            items       : [],
+            menuAlign   : 'tl-bl',
+            menuAlignEl : null,
+            offset      : [0, 0],
+            cyclic      : true,
+            search      : false,
+            scrollAlwaysVisible: true
+        },
+
+        template: _.template([
+            '<ul class="dropdown-menu <%= options.cls %>" oo_editor_input="true" style="<%= options.style %>" role="menu">',
+                '<% _.each(items, function(item) { %>',
+                    '<% if (!item.id) item.id = Common.UI.getId(); %>',
+                    '<% item.checked = item.checked || false;  %>',
+                    '<li><%= itemTemplate(item) %></li>',
+                '<% }) %>',
+            '</ul>'
+        ].join('')),
+
+        initialize : function(options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+
+            var me = this;
+
+            this.id             = this.options.id || Common.UI.getId();
+            this.itemTemplate   = this.options.itemTemplate || _.template([
+                                                                '<a id="<%= id %>" <% if(typeof style !== "undefined") { %> style="<%= style %>" <% } %>',
+                                                                    '<% if(typeof canFocused !== "undefined") { %> tabindex="-1" type="menuitem" <% } %>',
+                                                                    '<% if(typeof stopPropagation !== "undefined") { %> data-stopPropagation="true" <% } %>',
+                                                                    'class="<% if (checked) { %> checked <% } %>" >',
+                                                                    '<% if (typeof iconCls !== "undefined") { %>',
+                                                                        '<span class="menu-item-icon <%= iconCls %>"></span>',
+                                                                    '<% } %>',
+                                                                '<%= caption %>',
+                                                                '</a>'
+                                                            ].join(''));
+            this.rendered       = false;
+            this.items          = this.options.items || [];
+            this.offset         = [0, 0];
+            this.menuAlign      = this.options.menuAlign;
+            this.menuAlignEl    = this.options.menuAlignEl;
+            this.scrollAlwaysVisible = this.options.scrollAlwaysVisible;
+            this.search = this.options.search;
+
+            if (this.options.restoreHeight) {
+                this.options.restoreHeight = (typeof (this.options.restoreHeight) == "number") ? this.options.restoreHeight : (this.options.maxHeight ? this.options.maxHeight : 100000);
+                !this.options.maxHeight && (this.options.maxHeight = this.options.restoreHeight);
+            }
+
+            if (!this.options.cyclic) this.options.cls += ' no-cyclic';
+
+            if (this.options.el)
+                this.render();
+
+            Common.UI.Menu.Manager.register(this);
+        },
+
+        remove: function() {
+            Common.UI.Menu.Manager.unregister(this);
+            Common.UI.BaseView.prototype.remove.call(this);
+        },
+
+        render: function(parentEl) {
+            var me = this;
+
+            this.trigger('render:before', this);
+
+            this.cmpEl = me.$el || $(this.el);
+
+            parentEl && this.setElement(parentEl, false);
+
+            if (!me.rendered) {
+                this.cmpEl = $(this.template({
+                    items: me.items,
+                    itemTemplate: me.itemTemplate,
+                    options : me.options
+                }));
+
+                parentEl ? parentEl.append(this.cmpEl) : this.$el.append(this.cmpEl);
+            }
+
+            var rootEl = this.cmpEl.parent(),
+                menuRoot = (rootEl.attr('role') === 'menu') ? rootEl : rootEl.find('[role=menu]');
+            this.menuRoot = menuRoot;
+
+            if (menuRoot) {
+                if (!me.rendered) {
+                    menuRoot.on( "click", "li",       _.bind(me.onItemClick, me));
+                    menuRoot.on( "mousedown", "li",   _.bind(me.onItemMouseDown, me));
+                }
+
+                if (this.options.maxHeight) {
+                    menuRoot.css({'max-height': me.options.maxHeight});
+                    this.scroller = new Common.UI.Scroller({
+                        el: me.$el.find('.dropdown-menu '),
+                        minScrollbarLength: 30,
+                        suppressScrollX: true,
+                        alwaysVisibleY: this.scrollAlwaysVisible
+                    });
+                }
+
+                menuRoot.css({
+                    position    : 'fixed',
+                    right       : 'auto',
+                    left        : -1000,
+                    top         : -1000
+                });
+
+                this.parentEl = menuRoot.parent();
+
+                this.parentEl.on('show.bs.dropdown',    _.bind(me.onBeforeShowMenu, me));
+                this.parentEl.on('shown.bs.dropdown',   _.bind(me.onAfterShowMenu, me));
+                this.parentEl.on('hide.bs.dropdown',    _.bind(me.onBeforeHideMenu, me));
+                this.parentEl.on('hidden.bs.dropdown',  _.bind(me.onAfterHideMenu, me));
+                this.parentEl.on('keydown.after.bs.dropdown', _.bind(me.onAfterKeydownMenu, me));
+
+                menuRoot.hover(
+                    function(e) { me.isOver = true;},
+                    function(e) { me.isOver = false; }
+                );
+            }
+
+            this.rendered = true;
+
+            this.trigger('render:after', this);
+
+            return this;
+        },
+
+        resetItems: function(items) {
+            this.items = items || [];
+            this.$items = null;
+            var template = _.template([
+                                '<% _.each(items, function(item) { %>',
+                                    '<% if (!item.id) item.id = Common.UI.getId(); %>',
+                                    '<% item.checked = item.checked || false;  %>',
+                                    '<li><%= itemTemplate(item) %></li>',
+                                '<% }) %>'
+                            ].join(''));
+            this.cmpEl && this.cmpEl.html(template({
+                items: this.items,
+                itemTemplate: this.itemTemplate,
+                options : this.options
+            }));
+        },
+
+        isVisible: function() {
+            return this.rendered && (this.cmpEl.is(':visible'));
+        },
+
+        show: function() {
+            if (this.rendered && this.parentEl && !this.parentEl.hasClass('open')) {
+                this.cmpEl.dropdown('toggle');
+            }
+        },
+
+        hide: function() {
+            if (this.rendered && this.parentEl) {
+                if ( this.parentEl.hasClass('open') )
+                    this.cmpEl.dropdown('toggle');
+                else if (this.parentEl.hasClass('over'))
+                    this.parentEl.removeClass('over');
+            }
+        },
+
+        onItemClick: function(e) {
+            if (e.which != 1 && e.which !== undefined)
+                return false;
+
+            var index = $(e.currentTarget).closest('li').index(),
+                item = (index>=0) ? this.items[index] : null;
+            if (!item) return;
+
+            if (item.disabled)
+                return false;
+
+            if (item.checkable && !item.checked)
+                this.setChecked(index, !item.checked);
+
+            this.isOver = false;
+            if (item.stopPropagation) {
+                e.stopPropagation();
+                var me = this;
+                _.delay(function(){
+                    me.$el.parent().parent().find('[data-toggle=dropdown]').focus();
+                }, 10);
+                return;
+            }
+            this.trigger('item:click', this, item, e);
+        },
+
+        onItemMouseDown: function(e) {
+            if (e.which != 1) {
+                e.preventDefault();
+                e.stopPropagation();
+
+                return false;
+            }
+            e.stopPropagation();
+        },
+
+        setChecked: function(index, check, suppressEvent) {
+            this.toggle(index, check, suppressEvent);
+        },
+
+        toggle: function(index, toggle, suppressEvent) {
+            var state = !!toggle;
+            var item = this.items[index];
+
+            this.clearAll();
+
+            if (item && item.checkable) {
+                item.checked = state;
+
+                if (this.rendered) {
+                    var itemEl = item.el || this.cmpEl.find('#'+item.id);
+                    if (itemEl) {
+                        itemEl.toggleClass('checked', item.checked);
+                        if (!_.isEmpty(item.iconCls)) {
+                            itemEl.css('background-image', 'none');
+                        }
+                    }
+                }
+
+                if (!suppressEvent)
+                    this.trigger('item:toggle', this, item, state);
+            }
+        },
+
+        setDisabled: function(disabled) {
+            this.disabled = !!disabled;
+
+            if (this.rendered)
+                this.cmpEl.toggleClass('disabled', this.disabled);
+        },
+
+        isDisabled: function() {
+            return this.disabled;
+        },
+
+        onBeforeShowMenu: function(e) {
+            Common.NotificationCenter.trigger('menu:show');
+            this.trigger('show:before', this, e);
+            this.alignPosition();
+        },
+
+        onAfterShowMenu: function(e) {
+            this.trigger('show:after', this, e);
+            if (this.scroller) {
+                this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible});
+                var menuRoot = this.menuRoot,
+                    $selected = menuRoot.find('> li .checked');
+                if ($selected.length) {
+                    var itemTop = $selected.position().top,
+                        itemHeight = $selected.outerHeight(),
+                        listHeight = menuRoot.outerHeight();
+                    if (itemTop < 0 || itemTop + itemHeight > listHeight) {
+                        var height = menuRoot.scrollTop() + itemTop + (itemHeight - listHeight)/2;
+                        height = (Math.floor(height/itemHeight) * itemHeight);
+                        menuRoot.scrollTop(height);
+                    }
+                    setTimeout(function(){$selected.focus();}, 1);
+                }
+            }
+            this._search = {};
+            if (this.search && !this.$items) {
+                var me = this;
+                this.$items = this.menuRoot.find('> li').find('> a');
+                _.each(this.$items, function(item, index) {
+                    me.items[index].el = $(item);
+                });
+            }
+        },
+
+        onBeforeHideMenu: function(e) {
+            this.trigger('hide:before', this, e);
+
+            if (Common.UI.Scroller.isMouseCapture())
+                e.preventDefault();
+        },
+
+        onAfterHideMenu: function(e, isFromInputControl) {
+            this.trigger('hide:after', this, e, isFromInputControl);
+            Common.NotificationCenter.trigger('menu:hide', this, isFromInputControl);
+        },
+
+        onAfterKeydownMenu: function(e) {
+            if (e.keyCode == Common.UI.Keys.RETURN) {
+                var li = $(e.target).closest('li');
+                if (li.length<=0) li = $(e.target).parent().find('li .dataview');
+                if (li.length>0) li.click();
+                if (!li.hasClass('dropdown-submenu'))
+                    Common.UI.Menu.Manager.hideAll();
+                if ( $(e.currentTarget).closest('li').hasClass('dropdown-submenu')) {
+                    e.stopPropagation();
+                    return false;
+                }
+            } else if (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN)  {
+                this.fromKeyDown = true;
+            } else if (e.keyCode == Common.UI.Keys.ESC)  {
+//                    Common.NotificationCenter.trigger('menu:afterkeydown', e);
+//                    return false;
+            } else if (this.search && e.keyCode > 64 && e.keyCode < 91 && e.key){
+                var me = this;
+                clearTimeout(this._search.timer);
+                this._search.timer = setTimeout(function () { me._search = {}; }, 1000);
+
+                (!this._search.text) && (this._search.text = '');
+                (!this._search.char) && (this._search.char = e.key);
+                (this._search.char !== e.key) && (this._search.full = true);
+                this._search.text += e.key;
+                if (this._search.index===undefined) {
+                    this._search.index = this.$items.index(this.$items.filter(':focus'));
+                }
+                this.selectCandidate();
+            }
+        },
+
+        selectCandidate: function() {
+            var index = this._search.index || 0,
+                re = new RegExp('^' + ((this._search.full) ? this._search.text : this._search.char), 'i'),
+                itemCandidate, idxCandidate;
+
+            for (var i=0; i<this.items.length; i++) {
+                var item = this.items[i];
+                if (re.test(item.caption)) {
+                    if (!itemCandidate) {
+                        itemCandidate = item;
+                        idxCandidate = i;
+                    }
+                    if (this._search.full && i==index || i>index) {
+                        itemCandidate = item;
+                        idxCandidate = i;
+                        break;
+                    }
+                }
+            }
+
+            if (itemCandidate) {
+                this._search.index = idxCandidate;
+                var item = itemCandidate.el;
+                if (this.scroller) {
+                    this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible});
+                    var itemTop = item.position().top,
+                        itemHeight = item.outerHeight(),
+                        listHeight = this.menuRoot.outerHeight();
+                    if (itemTop < 0 || itemTop + itemHeight > listHeight) {
+                        var height = this.menuRoot.scrollTop() + itemTop;
+                        height = (Math.floor(height/itemHeight) * itemHeight);
+                        this.menuRoot.scrollTop(height);
+                    }
+                }
+                item.focus();
+            }
+        },
+
+        setOffset: function(offsetX, offsetY) {
+            this.offset[0] = _.isUndefined(offsetX) ? this.offset[0] : offsetX;
+            this.offset[1] = _.isUndefined(offsetY) ? this.offset[1] : offsetY;
+            this.alignPosition();
+        },
+
+        getOffset: function() {
+            return this.offset;
+        },
+
+        alignPosition: function(fixedAlign, fixedOffset) {
+            var menuRoot = this.menuRoot,
+                menuParent  = this.menuAlignEl || menuRoot.parent(),
+                m           = this.menuAlign.match(/^([a-z]+)-([a-z]+)/),
+                offset      = menuParent.offset(),
+                docW        = Common.Utils.innerWidth(),
+                docH        = Common.Utils.innerHeight() - 10, // Yep, it's magic number
+                menuW       = menuRoot.outerWidth(),
+                menuH       = menuRoot.outerHeight(),
+                parentW     = menuParent.outerWidth(),
+                parentH     = menuParent.outerHeight();
+
+            var posMenu = {
+                'tl': [0, 0],
+                'bl': [0, menuH],
+                'tr': [menuW, 0],
+                'br': [menuW, menuH]
+            };
+            var posParent = {
+                'tl': [0, 0],
+                'tr': [parentW, 0],
+                'bl': [0, parentH],
+                'br': [parentW, parentH]
+            };
+            var left = offset.left - posMenu[m[1]][0] + posParent[m[2]][0] + this.offset[0];
+            var top  = offset.top  - posMenu[m[1]][1] + posParent[m[2]][1] + this.offset[1];
+
+            if (left + menuW > docW)
+                if (menuParent.is('li.dropdown-submenu')) {
+                    left = offset.left - menuW + 2;
+                } else {
+                    left = docW - menuW;
+                }
+
+            if (this.options.restoreHeight) {
+                if (typeof (this.options.restoreHeight) == "number") {
+                    if (top + menuH > docH) {
+                        menuRoot.css('max-height', (docH - top) + 'px');
+                        (!this.scroller) && (this.scroller = new Common.UI.Scroller({
+                            el: this.$el.find('.dropdown-menu '),
+                            minScrollbarLength: 30,
+                            suppressScrollX: true,
+                            alwaysVisibleY: this.scrollAlwaysVisible
+                        }));
+                    } else if ( top + menuH < docH && menuRoot.height() < this.options.restoreHeight) {
+                        menuRoot.css('max-height', (Math.min(docH - top, this.options.restoreHeight)) + 'px');
+                    }
+                }
+            } else {
+                if (top + menuH > docH) {
+                    if (fixedAlign && typeof fixedAlign == 'string') { // how to align if menu height > window height
+                        m = fixedAlign.match(/^([a-z]+)-([a-z]+)/);
+                        top  = offset.top  - posMenu[m[1]][1] + posParent[m[2]][1] + this.offset[1] + (fixedOffset || 0);
+                    } else
+                        top = docH - menuH;
+                }
+
+                if (top < 0)
+                    top = 0;
+            }
+
+            if (this.options.additionalAlign)
+                this.options.additionalAlign.call(this, menuRoot, left, top);
+            else
+                menuRoot.css({left: Math.ceil(left), top: Math.ceil(top)});
+        },
+
+        clearAll: function() {
+            this.cmpEl && this.cmpEl.find('li > a.checked').removeClass('checked');
+            _.each(this.items, function(item){
+                item.checked = false;
+            });
+        }
+    });
+
+});
\ No newline at end of file
diff --git a/test/unit-tests/common/main/lib/component/MenuItem.js b/test/unit-tests/common/main/lib/component/MenuItem.js
new file mode 100644
index 000000000..b3ff956e3
--- /dev/null
+++ b/test/unit-tests/common/main/lib/component/MenuItem.js
@@ -0,0 +1,394 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2019
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+*/
+/**
+ *  MenuItem.js
+ *
+ *  A base class for all menu items that require menu-related functionality such as click handling,
+ *  sub-menus, icons, etc.
+ *
+ *  Created by Alexander Yuzhin on 1/27/14
+ *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+/**
+ *  Default template
+ *
+ *  Simple menu item:
+ *  <li><a href="#">Caption</a></li>
+ *
+ *  Separator:
+ *  <li class="divider"></li>
+ *
+ *  Menu item with sub-menu:
+ *  <li class="dropdown-submenu">
+ *      <a href="#">Sub-menu item</a>
+ *      <ul class="dropdown-menu"></ul>
+ *  </li>
+ *
+ *
+ *  Example usage:
+ *
+ *      new Common.UI.MenuItem({
+ *          caption: 'View Compact Toolbar',
+ *          checkable: true,
+ *          menu: {
+ *              items: [
+ *                  { caption: 'Menu item 1', value: 'value-1' },
+ *                  { caption: 'Menu item 2', value: 'value-2' },
+ *                  new Common.UI.MenuItem({ caption: 'Menu item 3', value: 'value-3' })
+ *              ]
+ *          }
+ *      });
+ *
+ *  @property {Object} value
+ *
+ *  @property {Common.UI.Menu} menu
+ *
+ *
+ */
+
+
+if (Common === undefined)
+    var Common = {};
+
+define([
+    'common/main/lib/component/BaseView',
+    'common/main/lib/component/ToggleManager'
+], function () {
+    'use strict';
+
+    Common.UI.MenuItem = Common.UI.BaseView.extend({
+        options : {
+            id          : null,
+            cls         : '',
+            style       : '',
+            hint        : false,
+            checkable   : false,
+            checked     : false,
+            allowDepress: false,
+            disabled    : false,
+            value       : null,
+            toggleGroup : null,
+            iconCls     : '',
+            menu        : null,
+            canFocused  : true,
+            dataHint    : '',
+            dataHintDirection: '',
+            dataHintOffset: ''
+        },
+
+        tagName : 'li',
+
+        template: _.template([
+            '<a id="<%= id %>" style="<%= style %>" <% if(options.canFocused) { %> tabindex="-1" type="menuitem" <% }; if(!_.isUndefined(options.stopPropagation)) { %> data-stopPropagation="true" <% }; if(!_.isUndefined(options.dataHint)) { %> data-hint="<%= options.dataHint %>" <% }; if(!_.isUndefined(options.dataHintDirection)) { %> data-hint-direction="<%= options.dataHintDirection %>" <% }; if(!_.isUndefined(options.dataHintOffset)) { %> data-hint-offset="<%= options.dataHintOffset %>" <% }; %> >',
+                '<% if (!_.isEmpty(iconCls)) { %>',
+                    '<span class="menu-item-icon <%= iconCls %>"></span>',
+                '<% } %>',
+                '<%= caption %>',
+            '</a>'
+        ].join('')),
+
+        initialize : function(options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+
+            var me = this;
+
+            this.id             = me.options.id || Common.UI.getId();
+            this.cls            = me.options.cls;
+            this.style          = me.options.style;
+            this.caption        = me.options.caption;
+            this.menu           = me.options.menu || null;
+            this.checkable      = me.options.checkable;
+            this.checked        = me.options.checked;
+            me.allowDepress     = me.options.allowDepress;
+            this.disabled       = me.options.disabled;
+            this.value          = me.options.value;
+            this.toggleGroup    = me.options.toggleGroup;
+            this.template       = me.options.template || this.template;
+            this.iconCls        = me.options.iconCls;
+            this.hint           = me.options.hint;
+            this.rendered       = false;
+
+            if (this.menu !== null && !(this.menu instanceof Common.UI.Menu) && !(this.menu instanceof Common.UI.MenuSimple)) {
+                this.menu = new Common.UI.Menu(_.extend({}, me.options.menu));
+            }
+
+            if (me.options.el)
+                this.render();
+        },
+
+        render: function() {
+            var me = this,
+                el = me.$el || $(this.el);
+
+            me.trigger('render:before', me);
+
+            if (me.caption === '--') {
+                el.addClass('divider');
+            } else {
+                if (!this.rendered) {
+                    el.off('click');
+                    Common.UI.ToggleManager.unregister(me);
+
+                    el.html(this.template({
+                        id      : me.id,
+                        caption : me.caption,
+                        iconCls : me.iconCls,
+                        style   : me.style,
+                        options : me.options
+                    }));
+
+                    if (me.menu) {
+                        el.addClass('dropdown-submenu');
+
+                        me.menu.render(el);
+                        el.mouseenter(_.bind(me.menu.alignPosition, me.menu));
+//                        el.focusin(_.bind(me.onFocusItem, me));
+                        el.focusout(_.bind(me.onBlurItem, me));
+                        el.hover(
+                            _.bind(me.onHoverItem, me),
+                            _.bind(me.onUnHoverItem, me)
+                        );
+                    }
+
+                    var firstChild = el.children(':first');
+
+                    if (this.checkable && firstChild) {
+                        firstChild.toggleClass('checkable', this.checkable);
+                        firstChild.toggleClass('no-checkmark', this.options.checkmark===false);
+                        firstChild.toggleClass('checked', this.checked);
+                        if (!_.isEmpty(this.iconCls)) {
+                            firstChild.css('background-image', 'none');
+                        }
+                    }
+
+                    if (me.options.hint) {
+                        el.attr('data-toggle', 'tooltip');
+                        el.tooltip({
+                            title       : me.options.hint,
+                            placement   : me.options.hintAnchor||function(tip, element) {
+                                var pos = this.getPosition(),
+                                    actualWidth = tip.offsetWidth,
+                                    actualHeight = tip.offsetHeight,
+                                    innerWidth = Common.Utils.innerWidth(),
+                                    innerHeight = Common.Utils.innerHeight();
+                                var top = pos.top,
+                                    left = pos.left + pos.width + 2;
+                                if (top + actualHeight > innerHeight) {
+                                    top = innerHeight - actualHeight - 2;
+                                }
+                                if (left + actualWidth > innerWidth) {
+                                    left = pos.left - actualWidth - 2;
+                                }
+                                $(tip).offset({top: top,left: left}).addClass('in');
+                            }
+                        });
+                    }
+
+                    if (this.disabled)
+                        el.toggleClass('disabled', this.disabled);
+
+                    el.on('click',      _.bind(this.onItemClick, this));
+                    el.on('mousedown',  _.bind(this.onItemMouseDown, this));
+
+                    Common.UI.ToggleManager.register(me);
+                }
+            }
+
+            me.cmpEl = el;
+            me.rendered = true;
+
+            me.trigger('render:after', me);
+
+            return this;
+        },
+
+        setCaption: function(caption, noencoding) {
+            this.caption = caption;
+
+            if (this.rendered)
+                this.cmpEl.find('a').contents().last()[0].textContent = (noencoding) ? caption : Common.Utils.String.htmlEncode(caption);
+        },
+
+        setIconCls: function(iconCls) {
+            if (this.rendered && !_.isEmpty(this.iconCls)) {
+                var firstChild = this.cmpEl.children(':first');
+                if (firstChild) {
+                    firstChild.find('.menu-item-icon').removeClass(this.iconCls).addClass(iconCls);
+                }
+            }
+            this.iconCls = iconCls;
+        },
+
+        setChecked: function(check, suppressEvent) {
+            this.toggle(check, suppressEvent);
+        },
+
+        isChecked: function() {
+            return this.checked;
+        },
+
+        setDisabled: function(disabled) {
+            this.disabled = !!disabled;
+
+            if (this.rendered)
+                this.cmpEl.toggleClass('disabled', this.disabled);
+        },
+
+        isDisabled: function() {
+            return this.disabled;
+        },
+
+        toggle: function(toggle, suppressEvent) {
+            var state = toggle === undefined ? !this.checked : !!toggle;
+
+            if (this.checkable) {
+                this.checked = state;
+
+                if (this.rendered) {
+                    var firstChild = this.cmpEl.children(':first');
+
+                    if (firstChild) {
+                        firstChild.toggleClass('checked', this.checked);
+                        if (!_.isEmpty(this.iconCls)) {
+                            firstChild.css('background-image', 'none');
+                        }
+                    }
+                }
+
+                if (!suppressEvent)
+                    this.trigger('toggle', this, state);
+            }
+        },
+
+        onItemMouseDown: function(e) {
+            if (e.which != 1) {
+                e.preventDefault();
+                e.stopPropagation();
+
+                return false;
+            }
+            e.stopPropagation();
+        },
+
+        onItemClick: function(e) {
+            if (e.which != 1 && (e.which !== undefined || this.menu))
+                return false;
+
+            if (!this.disabled && (this.allowDepress || !(this.checked && this.toggleGroup)) && !this.menu)
+                this.setChecked(!this.checked);
+
+            if (this.menu) {
+                if (e.target.id == this.id) {
+                    return false;
+                }
+
+                if (!this.menu.isOver)
+                    this.cmpEl.removeClass('over');
+
+                return;
+            }
+
+            if (!this.disabled) {
+                this.trigger('click', this, e);
+            } else {
+                return false;
+            }
+        },
+
+        onHoverItem: function(e) {
+            this._doHover(e);
+//            $('a', this.cmpEl).focus();
+        },
+
+        onUnHoverItem: function(e) {
+            this._doUnHover(e);
+//            $('a', this.cmpEl).blur();
+        },
+
+//        onFocusItem: function(e) {
+//            this._doHover(e);
+//        },
+
+        onBlurItem: function(e) {
+            this._doUnHover(e);
+        },
+
+        _doHover: function(e) {
+            var me = this;
+
+            if (me.menu && !me.disabled) {
+                clearTimeout(me.hideMenuTimer);
+
+                me.cmpEl.trigger('show.bs.dropdown');
+                me.expandMenuTimer = _.delay(function(){
+                    me.cmpEl.addClass('over');
+                    me.cmpEl.trigger('shown.bs.dropdown');
+                }, 200);
+            }
+        },
+
+        _doUnHover: function(e) {
+            var me = this;
+            if (me.cmpEl.hasClass('dropdown-submenu') && me.cmpEl.hasClass('over') &&
+               (e && e.relatedTarget && me.cmpEl.find(e.relatedTarget).length>0 || me.cmpEl.hasClass('focused-submenu'))) {
+                // When focus go from menuItem to it's submenu don't hide this submenu
+                me.cmpEl.removeClass('focused-submenu');
+                return;
+            }
+            if (me.menu && !me.disabled) {
+                clearTimeout(me.expandMenuTimer);
+
+                me.hideMenuTimer = _.delay(function(){
+                    if (!me.menu.isOver)
+                        me.cmpEl.removeClass('over');
+                }, 200);
+
+                if (e && e.type !== 'focusout') { // when mouseleave from clicked menu item with submenu
+                    var focused = me.cmpEl.children(':focus');
+                    if (focused.length>0) {
+                        focused.blur();
+                        me.cmpEl.closest('ul').focus();
+                    }
+                }
+            }
+        }
+    });
+
+    Common.UI.MenuItemSeparator = function(options) {
+        options = options || {};
+        options.caption = '--';
+        return new Common.UI.MenuItem(options);
+    };
+});
\ No newline at end of file
diff --git a/test/unit-tests/common/main/lib/component/Scroller.js b/test/unit-tests/common/main/lib/component/Scroller.js
new file mode 100644
index 000000000..a9901a389
--- /dev/null
+++ b/test/unit-tests/common/main/lib/component/Scroller.js
@@ -0,0 +1,180 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2019
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+*/
+/**
+ *  Scroller.js
+ *
+ *  Created by Alexander Yuzhin on 3/14/14
+ *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+if (Common === undefined)
+    var Common = {};
+
+define([
+    'vendor/perfect-scrollbar/src/jquery.mousewheel',
+    'test/unit-tests/common/main/lib/mods/perfectscrollbar',
+    'test/unit-tests/common/main/lib/component/BaseView'
+], function () { 'use strict';
+
+    Common.UI.Scroller = (function(){
+        var mouseCapture;
+
+        return _.extend(Common.UI.BaseView.extend({
+            options: {
+                wheelSpeed              : 20,
+                wheelPropagation        : false,
+                minScrollbarLength      : null,
+                useBothWheelAxes        : false,
+                useKeyboard             : true,
+                suppressScrollX         : false,
+                suppressScrollY         : false,
+                scrollXMarginOffset     : 5,
+                scrollYMarginOffset     : 5,
+                includePadding          : true,
+                includeMargin           : true,
+                alwaysVisibleX          : false,
+                alwaysVisibleY          : false
+            },
+
+            initialize: function(options) {
+                Common.UI.BaseView.prototype.initialize.call(this, options);
+
+                if (this.options.el) {
+                    this.render();
+                }
+            },
+
+            render: function() {
+                var me = this;
+
+                me.cmpEl = me.$el || $(this.el);
+
+                if (!me.rendered) {
+                    me.cmpEl.perfectScrollbar(_.extend({}, me.options));
+                    me.rendered = true;
+
+                    this.setAlwaysVisibleX(me.options.alwaysVisibleX);
+                    this.setAlwaysVisibleY(me.options.alwaysVisibleY);
+                }
+
+                return this;
+            },
+
+            remove: function() {
+                this.destroy();
+                Backbone.View.prototype.remove.call(this);
+            },
+
+            update: function(config) {
+                var options = this.options;
+                if (config) {
+                    this.destroy();
+                    options = _.extend(this.options, config);
+                    this.cmpEl.perfectScrollbar(options);
+                } else {
+                    this.cmpEl.perfectScrollbar('update');
+                }
+
+                this.setAlwaysVisibleX(options.alwaysVisibleX);
+                this.setAlwaysVisibleY(options.alwaysVisibleY);
+
+                // Emulate capture scroller
+                var mouseDownHandler = function(e) {
+                    mouseCapture = true;
+
+                    var upHandler = function(e) {
+                        $(document).unbind('mouseup', upHandler);
+                        _.delay(function() {
+                            mouseCapture = false;
+                        }, 10);
+                    };
+
+                    $(document).mouseup(upHandler);
+                };
+
+                $('.ps-scrollbar-x-rail, .ps-scrollbar-y-rail, .ps-scrollbar-x, .ps-scrollbar-y', this.cmpEl)
+                    .off('mousedown', mouseDownHandler).on('mousedown', mouseDownHandler);
+            },
+
+            destroy: function() {
+                this.cmpEl.perfectScrollbar('destroy');
+            },
+
+            scrollLeft: function(pos) {
+                this.cmpEl.scrollLeft(pos);
+                this.update();
+            },
+
+            scrollTop: function(pos) {
+                this.cmpEl.scrollTop(pos);
+                this.update();
+            },
+
+            getScrollTop: function () {
+                return this.cmpEl.scrollTop();
+            },
+
+            getScrollLeft: function () {
+                return this.cmpEl.scrollLeft();
+            },
+            setAlwaysVisibleX: function(flag) {
+                if (flag) {
+                    $(this.el).find('.ps-scrollbar-x-rail').addClass('always-visible-x');
+                    $(this.el).find('.ps-scrollbar-x').addClass('always-visible-x');
+                } else {
+                    $(this.el).find('.ps-scrollbar-x-rail').removeClass('always-visible-x');
+                    $(this.el).find('.ps-scrollbar-x').addClass('always-visible-x');
+                }
+            },
+            setAlwaysVisibleY: function(flag) {
+                if (flag) {
+                    $(this.el).find('.ps-scrollbar-y-rail').addClass('always-visible-y');
+                    $(this.el).find('.ps-scrollbar-y').addClass('always-visible-y');
+                } else {
+                    $(this.el).find('.ps-scrollbar-y-rail').removeClass('always-visible-y');
+                    $(this.el).find('.ps-scrollbar-y').addClass('always-visible-y');
+                }
+            },
+
+            isVisible: function() {
+                return $(this.el).find('.ps-scrollbar-y-rail').is(':visible');
+            }
+
+        }), {
+            isMouseCapture: function() {
+                return mouseCapture
+            }
+        })
+    })();
+});
\ No newline at end of file
diff --git a/test/unit-tests/common/main/lib/controller/CellEditor.js b/test/unit-tests/common/main/lib/controller/CellEditor.js
new file mode 100644
index 000000000..5aaf7b721
--- /dev/null
+++ b/test/unit-tests/common/main/lib/controller/CellEditor.js
@@ -0,0 +1,236 @@
+!window.common && (window.common = {});
+!common.controller && (common.controller = {});
+Common.UI = _.extend(Common.UI || {}, {
+    Keys : {
+        BACKSPACE:  8,
+        TAB:        9,
+        RETURN:     13,
+        SHIFT:      16,
+        CTRL:       17,
+        ALT:        18,
+        ESC:        27,
+        LEFT:       37,
+        UP:         38,
+        RIGHT:      39,
+        DOWN:       40,
+        DELETE:     46,
+        HOME:       36,
+        END:        35,
+        SPACE:      32,
+        PAGEUP:     33,
+        PAGEDOWN:   34,
+        INSERT:     45,
+        EQUALITY_FF:61,
+        NUM_PLUS:   107,
+        NUM_MINUS:  109,
+        F1:         112,
+        F2:         113,
+        F3:         114,
+        F4:         115,
+        F5:         116,
+        F6:         117,
+        F7:         118,
+        F8:         119,
+        F9:         120,
+        F10:        121,
+        F11:        122,
+        F12:        123,
+        MINUS_FF:   173,
+        EQUALITY:   187,
+        MINUS:      189
+    }});
+common.controller.CellEditor = new(function(){
+    var  me,
+        api,
+        editor,
+        mode,
+        created=false;
+
+    function onCellName(e){
+        if (e.keyCode == Common.UI.Keys.RETURN){
+            var name = editor.$cellname.val();
+            if (name && name.length) {
+                api.asc_findCell(name);
+            }
+            //Common.NotificationCenter.trigger('edit:complete', editor);
+        }
+    }
+    function onKeyupCellEditor(e) {
+        if(e.keyCode == Common.UI.Keys.RETURN && !e.altKey){
+            api.isCEditorFocused = 'clear';
+        }
+    }
+    function onBlurCellEditor() {
+        if (api.isCEditorFocused == 'clear')
+            api.isCEditorFocused = undefined;
+        else if (api.isCellEdited)
+            api.isCEditorFocused = true;
+    }
+    function expandEditorField() {
+        if ( Math.floor(editor.$el.height()) > 19) {
+            editor.keep_height = editor.$el.height();
+            editor.$el.height(19);
+            editor.$el.removeClass('expanded');
+            editor.$btnexpand['removeClass']('btn-collapse');
+            common.localStorage.setBool('sse-celleditor-expand', false);
+        } else {
+            editor.$el.height(editor.keep_height);
+            editor.$el.addClass('expanded');
+            editor.$btnexpand['addClass']('btn-collapse');
+            common.localStorage.setBool('sse-celleditor-expand', true);
+        }
+
+        //Common.NotificationCenter.trigger('layout:changed', 'celleditor');
+        //Common.NotificationCenter.trigger('edit:complete', editor, {restorefocus:true});
+    }
+    function events() {
+           editor.$el.find('#ce-cell-name').on( 'keyup', onCellName);
+           editor.$el.find('textarea#ce-cell-content').on( 'keyup', onKeyupCellEditor);
+           editor.$el.find('textarea#ce-cell-content').on('blur',  onBlurCellEditor);
+           editor.$el.find('button#ce-btn-expand').on('click',  expandEditorField);/*,
+            /*'click button#ce-func-label': onInsertFunction*/
+    }
+    function createController() {
+        me = this;
+        if (created)
+            return me;
+
+
+        created = true;
+        onLaunch();
+        return me;
+    }
+    function onLayoutResize(o, r) {
+        if (r == 'cell:edit') {
+            if (Math.floor(editor.$el.height()) > 19) {
+                if (!editor.$btnexpand.hasClass('btn-collapse')) {
+                    editor.$el.addClass('expanded');
+                    editor.$btnexpand['addClass']('btn-collapse');
+                }
+
+                o && common.localStorage.setItem('sse-celleditor-height', editor.$el.height());
+                o && common.localStorage.setBool('sse-celleditor-expand', true);
+            } else {
+                editor.$el.removeClass('expanded');
+                editor.$btnexpand['removeClass']('btn-collapse');
+                o && common.localStorage.setBool('sse-celleditor-expand', false);
+            }
+        }
+    }
+    function  onLaunch(){
+        common.view.CellEditor.create();
+        editor = common.view.CellEditor;
+        //me.bindViewEvents(editor, events);
+        events();
+
+        editor.$el.parent().find('.after').css({zIndex: '4'}); // for spreadsheets - bug 23127
+
+        var val = common.localStorage.getItem('sse-celleditor-height');
+        editor.keep_height = (val!==null && parseInt(val)>0) ? parseInt(val) : 74;
+        if (common.localStorage.getBool('sse-celleditor-expand')) {
+            editor.$el.height(editor.keep_height);
+            onLayoutResize(undefined, 'cell:edit');
+        }
+
+       /* editor.btnNamedRanges.menu.on('item:click', _.bind(this.onNamedRangesMenu, this))
+            .on('show:before', _.bind(this.onNameBeforeShow, this));*/
+        this.namedrange_locked = false;
+    }
+
+    function onApiCellSelection(info){
+        editor.cell.updateInfo(info);
+    }
+    function onApiEditCell(state) {
+        if (this.viewmode) return; // signed file
+
+        if (state == Asc.c_oAscCellEditorState.editStart){
+            api.isCellEdited = true;
+            editor.cell.nameDisabled(true);
+        } else if (state == Asc.c_oAscCellEditorState.editInCell) {
+            api.isCEditorFocused = 'clear';
+        } else if (state == Asc.c_oAscCellEditorState.editEnd) {
+            api.isCellEdited = false;
+            api.isCEditorFocused = false;
+            editor.cell.nameDisabled(false);
+        }
+        editor.$btnfunc.toggleClass('disabled', state == Asc.c_oAscCellEditorState.editText);
+    }
+    function onLockDefNameManager(state) {
+        this.namedrange_locked = (state == Asc.c_oAscDefinedNameReason.LockDefNameManager);
+    }
+    function onInputKeyDown(e) {
+        if (Common.UI.Keys.UP === e.keyCode || Common.UI.Keys.DOWN === e.keyCode ||
+            Common.UI.Keys.TAB === e.keyCode || Common.UI.Keys.RETURN === e.keyCode || Common.UI.Keys.ESC === e.keyCode ||
+            Common.UI.Keys.LEFT === e.keyCode || Common.UI.Keys.RIGHT === e.keyCode) {
+            var menu = $('#menu-formula-selection'); // for formula menu
+            if (menu.hasClass('open'))
+                menu.find('.dropdown-menu').trigger('keydown', e);
+        }
+    }
+    function onApiDisconnect() {
+        mode.isEdit = false;
+
+        var controller = this.getApplication().getController('FormulaDialog');
+        if (controller) {
+            controller.hideDialog();
+        }
+
+        if (!mode.isEdit) {
+            $('#ce-func-label', editor.$el).addClass('disabled');
+            editor.btnNamedRanges.setVisible(false);
+        }
+    }
+    function onCellsRange(status) {
+        editor.cell.nameDisabled(status != Asc.c_oAscSelectionDialogType.None);
+        editor.$btnfunc.toggleClass('disabled', status != Asc.c_oAscSelectionDialogType.None);
+    }
+    function setApi(apiF){
+        api=apiF;
+
+        api.isCEditorFocused = false;
+        api.asc_registerCallback('asc_onSelectionNameChanged', onApiCellSelection);
+        api.asc_registerCallback('asc_onEditCell', onApiEditCell);
+        api.asc_registerCallback('asc_onCoAuthoringDisconnect', onApiDisconnect);
+        //Common.NotificationCenter.on('api:disconnect', onApiDisconnect);
+        //Common.NotificationCenter.on('cells:range', onCellsRange);
+        api.asc_registerCallback('asc_onLockDefNameManager', onLockDefNameManager);
+        api.asc_registerCallback('asc_onInputKeyDown', onInputKeyDown);
+    }
+    function onApiSelectionChanged(info) {
+        if (this.viewmode) return; // signed file
+
+        var seltype = info.asc_getSelectionType(),
+            coauth_disable = (!mode.isEditMailMerge && !mode.isEditDiagram) ? (info.asc_getLocked() === true || info.asc_getLockedTable() === true || info.asc_getLockedPivotTable()===true) : false;
+
+        var is_chart_text   = seltype == Asc.c_oAscSelectionType.RangeChartText,
+            is_chart        = seltype == Asc.c_oAscSelectionType.RangeChart,
+            is_shape_text   = seltype == Asc.c_oAscSelectionType.RangeShapeText,
+            is_shape        = seltype == Asc.c_oAscSelectionType.RangeShape,
+            is_image        = seltype == Asc.c_oAscSelectionType.RangeImage || seltype == Asc.c_oAscSelectionType.RangeSlicer,
+            is_mode_2       = is_shape_text || is_shape || is_chart_text || is_chart;
+
+        editor.$btnfunc.toggleClass('disabled', is_image || is_mode_2 || coauth_disable);
+    }
+    function setMode(modeF) {
+        mode = modeF;
+
+        editor.$btnfunc[mode.isEdit?'removeClass':'addClass']('disabled');
+        //editor.btnNamedRanges.setVisible(mode.isEdit && !mode.isEditDiagram && !mode.isEditMailMerge);
+
+        if ( mode.isEdit ) {
+            api.asc_registerCallback('asc_onSelectionChanged', onApiSelectionChanged);
+        }
+    }
+    function setPreviewMode(mode) {
+        if (this.viewmode === mode) return;
+        this.viewmode = mode;
+        editor.$btnfunc[!mode && mode.isEdit?'removeClass':'addClass']('disabled');
+        editor.cell.nameDisabled(mode && !(mode.isEdit && !mode.isEditDiagram && !mode.isEditMailMerge));
+    }
+    return {
+        create: createController,
+        setApi: setApi,
+        setMode: setMode
+    }
+
+})();
\ No newline at end of file
diff --git a/test/unit-tests/common/main/lib/core/NotificationCenter.js b/test/unit-tests/common/main/lib/core/NotificationCenter.js
index 4415acffd..8545dac73 100644
--- a/test/unit-tests/common/main/lib/core/NotificationCenter.js
+++ b/test/unit-tests/common/main/lib/core/NotificationCenter.js
@@ -55,10 +55,9 @@
 
 if (Common === undefined)
     var Common = {};
-
-define([
-    'backbone'
-], function (Backbone) {
+/*if (Backbone === undefined)
+    var Backbone = ;*/
+Common.NotificationCenter=new( function (Backbone) {
     'use strict';
 
     var NotificationCenter = function(){};
@@ -75,4 +74,4 @@ define([
     else {
         throw ('Native Common.NotificationCenter instance already defined.')
     }
-});
\ No newline at end of file
+})();
\ No newline at end of file
diff --git a/test/unit-tests/common/main/lib/core/application.js b/test/unit-tests/common/main/lib/core/application.js
index 2903aaa1b..85328c4cd 100644
--- a/test/unit-tests/common/main/lib/core/application.js
+++ b/test/unit-tests/common/main/lib/core/application.js
@@ -1,4 +1,4 @@
-(function(){
+Backbone=new(function(){
     var resolveNamespace = function(className, root) {
         var parts = className.split('.'),
             current = root || window;
diff --git a/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-bug-23744.patch b/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-bug-23744.patch
new file mode 100644
index 000000000..cc14919b8
--- /dev/null
+++ b/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-bug-23744.patch
@@ -0,0 +1,34 @@
+# HG changeset patch
+# User Alexey Musinov
+# Date 1415710176 -10800
+#      Tue Nov 11 15:49:36 2014 +0300
+# Node ID 784fe548cf4cbfc0a6c96b295ae83c551ce22166
+# Parent  07b43d47bcf8afe8a2dabc8a0bce8c7dab3bd498
+ [Common] â perfect-scrollbar - ñêðîëèíã íàä 'textarea' è 'input' ïåðåäàåòñÿ â ýòè ýëåìåíòû.
+
+diff -r 07b43d47bcf8 -r 784fe548cf4c apps/common/main/lib/mods/perfect-scrollbar.js
+--- a/apps/common/main/lib/mods/perfect-scrollbar.js	Mon Nov 10 19:37:33 2014 +0300
++++ b/apps/common/main/lib/mods/perfect-scrollbar.js	Tue Nov 11 15:49:36 2014 +0300
+@@ -313,6 +313,22 @@
+           var deltaX = e.deltaX * e.deltaFactor || deprecatedDeltaX,
+               deltaY = e.deltaY * e.deltaFactor || deprecatedDeltaY;
+ 
++            if (e && e.target && (e.target.type === 'textarea' || e.target.type === 'input')) {
++                e.stopImmediatePropagation();
++                e.preventDefault();
++
++                var scroll = $(e.target).scrollTop(), wheelDeltaY = 0;
++                if (e.originalEvent) {
++                    if (e.originalEvent.wheelDelta) wheelDeltaY = e.originalEvent.wheelDelta / -40;
++                    if (e.originalEvent.deltaY) wheelDeltaY = e.originalEvent.deltaY;
++                    if (e.originalEvent.detail) wheelDeltaY = e.originalEvent.detail;
++                }
++
++                $(e.target).scrollTop(scroll - wheelDeltaY);
++
++                return;
++            }
++
+           shouldPrevent = false;
+           if (!settings.useBothWheelAxes) {
+             // deltaX will only be used for horizontal scrolling and deltaY will
diff --git a/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-bug-25932.diff b/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-bug-25932.diff
new file mode 100644
index 000000000..104d7ff02
--- /dev/null
+++ b/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-bug-25932.diff
@@ -0,0 +1,48 @@
+diff -r 5047272bb302 apps/common/main/lib/mods/perfect-scrollbar.js
+--- a/apps/common/main/lib/mods/perfect-scrollbar.js	Fri Sep 12 18:17:33 2014 +0400
++++ b/apps/common/main/lib/mods/perfect-scrollbar.js	Fri Sep 12 18:18:56 2014 +0400
+@@ -146,7 +146,12 @@
+ 
+       var updateScrollbarCss = function () {
+         $scrollbarXRail.css({left: $this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: containerWidth, display: scrollbarXActive ? "inherit": "none"});
+-        $scrollbarYRail.css({top: $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: containerHeight, display: scrollbarYActive ? "inherit": "none"});
++
++        if ($scrollbarYRail.hasClass('in-scrolling'))
++            $scrollbarYRail.css({/*top: $this.scrollTop(),*/ right: scrollbarYRight - $this.scrollLeft(), height: containerHeight, display: scrollbarYActive ? "inherit": "none"});
++        else
++            $scrollbarYRail.css({top: $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: containerHeight, display: scrollbarYActive ? "inherit": "none"});
++
+         $scrollbarX.css({left: scrollbarXLeft, width: scrollbarXWidth});
+         $scrollbarY.css({top: scrollbarYTop, height: scrollbarYHeight});
+       };
+@@ -229,6 +234,15 @@
+           currentPageY = e.pageY;
+           currentTop = $scrollbarY.position().top;
+           $scrollbarYRail.addClass('in-scrolling');
++
++            var padding = parseInt($scrollbarYRail.offsetParent().css('padding-top'));
++            var rect = $scrollbarYRail[0].getBoundingClientRect();
++            $scrollbarYRail.css({
++                position: 'fixed',
++                left: rect.left,
++                top: rect.top - padding
++            });
++
+           e.stopPropagation();
+           e.preventDefault();
+         });
+@@ -244,6 +258,14 @@
+         $(document).bind('mouseup' + eventClassName, function (e) {
+           if ($scrollbarYRail.hasClass('in-scrolling')) {
+             $scrollbarYRail.removeClass('in-scrolling');
++
++              $scrollbarYRail.css({
++                  position: '',
++                  left: '',
++                  top: ''
++              });
++
++              updateScrollbarCss();
+           }
+         });
+ 
diff --git a/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-change-event.diff b/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-change-event.diff
new file mode 100644
index 000000000..a87c91975
--- /dev/null
+++ b/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-change-event.diff
@@ -0,0 +1,15 @@
+diff -r daaf445d707b apps/common/main/lib/mods/perfect-scrollbar.js
+--- a/apps/common/main/lib/mods/perfect-scrollbar.js	Mon Jun 15 15:25:53 2015 +0300
++++ b/apps/common/main/lib/mods/perfect-scrollbar.js	Thu Jun 18 13:29:36 2015 +0300
+// change thumb event
+@@ -197,6 +197,10 @@
+         }
+ 
+         updateScrollbarCss();
++
++        if (settings.onChange) {
++            settings.onChange(this);
++        }
+       };
+ 
+       var bindMouseScrollXHandler = function () {
diff --git a/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-margins.diff b/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-margins.diff
new file mode 100644
index 000000000..bdb9a8b55
--- /dev/null
+++ b/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-margins.diff
@@ -0,0 +1,103 @@
+diff -r c7981f4f7e09 apps/common/main/lib/mods/perfect-scrollbar.js
+--- a/apps/common/main/lib/mods/perfect-scrollbar.js	Tue Oct 07 11:32:00 2014 +0400
++++ b/apps/common/main/lib/mods/perfect-scrollbar.js	Wed Oct 08 11:37:27 2014 +0400
+//  Use margins of scrollbarYRail when calculate scrollbarYRail height (scrollbarYRailHeight) and top position
+@@ -28,7 +28,8 @@
+     suppressScrollY: false,
+     scrollXMarginOffset: 0,
+     scrollYMarginOffset: 0,
+-    includePadding: false
++    includePadding: false,
++    includeMargin: true
+   };
+ 
+   var getEventClassName = (function () {
+@@ -97,11 +98,12 @@
+           scrollbarYHeight,
+           scrollbarYTop,
+           scrollbarYRight = parseInt($scrollbarYRail.css('right'), 10),
++          scrollbarYRailHeight,
+           eventClassName = getEventClassName();
+ 
+       var updateContentScrollTop = function (currentTop, deltaY) {
+         var newTop = currentTop + deltaY,
+-            maxTop = containerHeight - scrollbarYHeight;
++            maxTop = scrollbarYRailHeight - scrollbarYHeight;
+ 
+         if (newTop < 0) {
+           scrollbarYTop = 0;
+@@ -113,7 +115,7 @@
+           scrollbarYTop = newTop;
+         }
+ 
+-        var scrollTop = parseInt(scrollbarYTop * (contentHeight - containerHeight) / (containerHeight - scrollbarYHeight), 10);
++        var scrollTop = parseInt(scrollbarYTop * (contentHeight - containerHeight) / (scrollbarYRailHeight - scrollbarYHeight), 10);
+         $this.scrollTop(scrollTop);
+         $scrollbarXRail.css({bottom: scrollbarXBottom - scrollTop});
+       };
+@@ -148,9 +150,9 @@
+         $scrollbarXRail.css({left: $this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: containerWidth, display: scrollbarXActive ? "inherit": "none"});
+ 
+         if ($scrollbarYRail.hasClass('in-scrolling'))
+-            $scrollbarYRail.css({/*top: $this.scrollTop(),*/ right: scrollbarYRight - $this.scrollLeft(), height: containerHeight, display: scrollbarYActive ? "inherit": "none"});
++            $scrollbarYRail.css({/*top: $this.scrollTop(),*/ right: scrollbarYRight - $this.scrollLeft(), height: scrollbarYRailHeight, display: scrollbarYActive ? "inherit": "none"});
+         else
+-            $scrollbarYRail.css({top: $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: containerHeight, display: scrollbarYActive ? "inherit": "none"});
++            $scrollbarYRail.css({top: $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: scrollbarYRailHeight, display: scrollbarYActive ? "inherit": "none"});
+ 
+         $scrollbarX.css({left: scrollbarXLeft, width: scrollbarXWidth});
+         $scrollbarY.css({top: scrollbarYTop, height: scrollbarYHeight});
+@@ -159,6 +161,7 @@
+       var updateBarSizeAndPosition = function () {
+         containerWidth = settings.includePadding ? $this.innerWidth() : $this.width();
+         containerHeight = settings.includePadding ? $this.innerHeight() : $this.height();
++        scrollbarYRailHeight = containerHeight - (settings.includeMargin ? (parseInt($scrollbarYRail.css('margin-top')) + parseInt($scrollbarYRail.css('margin-bottom'))): 0);
+         contentWidth = $this.prop('scrollWidth');
+         contentHeight = $this.prop('scrollHeight');
+ 
+@@ -176,8 +179,8 @@
+ 
+         if (!settings.suppressScrollY && containerHeight + settings.scrollYMarginOffset < contentHeight) {
+           scrollbarYActive = true;
+-          scrollbarYHeight = getSettingsAdjustedThumbSize(parseInt(containerHeight * containerHeight / contentHeight, 10));
+-          scrollbarYTop = parseInt($this.scrollTop() * (containerHeight - scrollbarYHeight) / (contentHeight - containerHeight), 10);
++          scrollbarYHeight = getSettingsAdjustedThumbSize(parseInt(scrollbarYRailHeight * containerHeight / contentHeight, 10));
++          scrollbarYTop = parseInt($this.scrollTop() * (scrollbarYRailHeight - scrollbarYHeight) / (contentHeight - containerHeight), 10);
+         }
+         else {
+           scrollbarYActive = false;
+@@ -186,8 +189,8 @@
+           $this.scrollTop(0);
+         }
+ 
+-        if (scrollbarYTop >= containerHeight - scrollbarYHeight) {
+-          scrollbarYTop = containerHeight - scrollbarYHeight;
++        if (scrollbarYTop >= scrollbarYRailHeight - scrollbarYHeight) {
++          scrollbarYTop = scrollbarYRailHeight - scrollbarYHeight;
+         }
+         if (scrollbarXLeft >= containerWidth - scrollbarXWidth) {
+           scrollbarXLeft = containerWidth - scrollbarXWidth;
+@@ -235,12 +238,12 @@
+           currentTop = $scrollbarY.position().top;
+           $scrollbarYRail.addClass('in-scrolling');
+ 
+-            var padding = parseInt($scrollbarYRail.offsetParent().css('padding-top'));
++            var margin = parseInt($scrollbarYRail.css('margin-top'));
+             var rect = $scrollbarYRail[0].getBoundingClientRect();
+             $scrollbarYRail.css({
+                 position: 'fixed',
+                 left: rect.left,
+-                top: rect.top - padding
++                top: rect.top - margin
+             });
+ 
+           e.stopPropagation();
+@@ -419,7 +422,7 @@
+         $scrollbarYRail.bind('click' + eventClassName, function (e) {
+           var halfOfScrollbarLength = parseInt(scrollbarYHeight / 2, 10),
+               positionTop = e.pageY - $scrollbarYRail.offset().top - halfOfScrollbarLength,
+-              maxPositionTop = containerHeight - scrollbarYHeight,
++              maxPositionTop = scrollbarYRailHeight - scrollbarYHeight,
+               positionRatio = positionTop / maxPositionTop;
+ 
+           if (positionRatio < 0) {
diff --git a/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-x-margins.diff b/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-x-margins.diff
new file mode 100644
index 000000000..628d58055
--- /dev/null
+++ b/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-x-margins.diff
@@ -0,0 +1,89 @@
+From d16a11fb136ef9ff06d20810e56e4a944173c977 Mon Sep 17 00:00:00 2001
+From: Julia Radzhabova
+Date: Fri, 19 Apr 2019 17:54:45 +0300
+Subject: [PATCH] [Common] perfect-scrollbar: set width and position for
+ scrollbarXRail based on margins.
+
+---
+ apps/common/main/lib/mods/perfect-scrollbar.js | 18 ++++++++++--------
+ 1 file changed, 10 insertions(+), 8 deletions(-)
+
+diff --git a/apps/common/main/lib/mods/perfect-scrollbar.js b/apps/common/main/lib/mods/perfect-scrollbar.js
+index 9b6f650..778009d 100644
+--- a/apps/common/main/lib/mods/perfect-scrollbar.js
++++ b/apps/common/main/lib/mods/perfect-scrollbar.js
+@@ -95,6 +95,7 @@
+           scrollbarXWidth,
+           scrollbarXLeft,
+           scrollbarXBottom = parseInt($scrollbarXRail.css('bottom'), 10),
++          scrollbarXRailWidth,
+           scrollbarYHeight,
+           scrollbarYTop,
+           scrollbarYRight = parseInt($scrollbarYRail.css('right'), 10),
+@@ -122,7 +123,7 @@
+ 
+       var updateContentScrollLeft = function (currentLeft, deltaX) {
+         var newLeft = currentLeft + deltaX,
+-            maxLeft = containerWidth - scrollbarXWidth;
++            maxLeft = scrollbarXRailWidth - scrollbarXWidth;
+ 
+         if (newLeft < 0) {
+           scrollbarXLeft = 0;
+@@ -134,7 +135,7 @@
+           scrollbarXLeft = newLeft;
+         }
+ 
+-        var scrollLeft = parseInt(scrollbarXLeft * (contentWidth - containerWidth) / (containerWidth - scrollbarXWidth), 10);
++        var scrollLeft = parseInt(scrollbarXLeft * (contentWidth - containerWidth) / (scrollbarXRailWidth - scrollbarXWidth), 10);
+         $this.scrollLeft(scrollLeft);
+         $scrollbarYRail.css({right: scrollbarYRight - scrollLeft});
+       };
+@@ -147,7 +148,7 @@
+       };
+ 
+       var updateScrollbarCss = function () {
+-        $scrollbarXRail.css({left: $this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: containerWidth, display: scrollbarXActive ? "inherit": "none"});
++        $scrollbarXRail.css({left: $this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: scrollbarXRailWidth, display: scrollbarXActive ? "inherit": "none"});
+ 
+         if ($scrollbarYRail.hasClass('in-scrolling'))
+             $scrollbarYRail.css({/*top: $this.scrollTop(),*/ right: scrollbarYRight - $this.scrollLeft(), height: scrollbarYRailHeight, display: scrollbarYActive ? "inherit": "none"});
+@@ -162,13 +163,14 @@
+         containerWidth = settings.includePadding ? $this.innerWidth() : $this.width();
+         containerHeight = settings.includePadding ? $this.innerHeight() : $this.height();
+         scrollbarYRailHeight = containerHeight - (settings.includeMargin ? (parseInt($scrollbarYRail.css('margin-top')) + parseInt($scrollbarYRail.css('margin-bottom'))): 0);
++        scrollbarXRailWidth = containerWidth - (settings.includeMargin ? (parseInt($scrollbarXRail.css('margin-left')) + parseInt($scrollbarXRail.css('margin-right'))): 0);
+         contentWidth = $this.prop('scrollWidth');
+         contentHeight = $this.prop('scrollHeight');
+ 
+         if (!settings.suppressScrollX && containerWidth + settings.scrollXMarginOffset < contentWidth) {
+           scrollbarXActive = true;
+-          scrollbarXWidth = getSettingsAdjustedThumbSize(parseInt(containerWidth * containerWidth / contentWidth, 10));
+-          scrollbarXLeft = parseInt($this.scrollLeft() * (containerWidth - scrollbarXWidth) / (contentWidth - containerWidth), 10);
++          scrollbarXWidth = getSettingsAdjustedThumbSize(parseInt(scrollbarXRailWidth * containerWidth / contentWidth, 10));
++          scrollbarXLeft = parseInt($this.scrollLeft() * (scrollbarXRailWidth - scrollbarXWidth) / (contentWidth - containerWidth), 10);
+         }
+         else {
+           scrollbarXActive = false;
+@@ -192,8 +194,8 @@
+         if (scrollbarYTop >= scrollbarYRailHeight - scrollbarYHeight) {
+           scrollbarYTop = scrollbarYRailHeight - scrollbarYHeight;
+         }
+-        if (scrollbarXLeft >= containerWidth - scrollbarXWidth) {
+-          scrollbarXLeft = containerWidth - scrollbarXWidth;
++        if (scrollbarXLeft >= scrollbarXRailWidth - scrollbarXWidth) {
++          scrollbarXLeft = scrollbarXRailWidth - scrollbarXWidth;
+         }
+ 
+         updateScrollbarCss();
+@@ -461,7 +463,7 @@
+         $scrollbarXRail.bind('click' + eventClassName, function (e) {
+           var halfOfScrollbarLength = parseInt(scrollbarXWidth / 2, 10),
+               positionLeft = e.pageX - $scrollbarXRail.offset().left - halfOfScrollbarLength,
+-              maxPositionLeft = containerWidth - scrollbarXWidth,
++              maxPositionLeft = scrollbarXRailWidth - scrollbarXWidth,
+               positionRatio = positionLeft / maxPositionLeft;
+ 
+           if (positionRatio < 0) {
+-- 
+2.6.1.windows.1
+
diff --git a/test/unit-tests/common/main/lib/mods/perfect-scrollbar.js b/test/unit-tests/common/main/lib/mods/perfect-scrollbar.js
new file mode 100644
index 000000000..fe1879cc3
--- /dev/null
+++ b/test/unit-tests/common/main/lib/mods/perfect-scrollbar.js
@@ -0,0 +1,658 @@
+/* Copyright (c) 2012, 2014 Hyeonje Alex Jun and other contributors
+ * Licensed under the MIT License
+ */
+(function (factory) {
+  'use strict';
+
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define(['jquery'], factory);
+  } else if (typeof exports === 'object') {
+    // Node/CommonJS
+    factory(require('jquery'));
+  } else {
+    // Browser globals
+    factory(jQuery);
+  }
+}(function ($) {
+  'use strict';
+
+  // The default settings for the plugin
+  var defaultSettings = {
+    wheelSpeed: 10,
+    wheelPropagation: false,
+    minScrollbarLength: null,
+    useBothWheelAxes: false,
+    useKeyboard: true,
+    suppressScrollX: false,
+    suppressScrollY: false,
+    scrollXMarginOffset: 0,
+    scrollYMarginOffset: 0,
+    includePadding: false,
+    includeMargin: true
+  };
+
+  var getEventClassName = (function () {
+    var incrementingId = 0;
+    return function () {
+      var id = incrementingId;
+      incrementingId += 1;
+      return '.perfect-scrollbar-' + id;
+    };
+  }());
+
+  $.fn.perfectScrollbar = function (suppliedSettings, option) {
+
+    return this.each(function () {
+      // Use the default settings
+      var settings = $.extend(true, {}, defaultSettings),
+          $this = $(this);
+
+      if (typeof suppliedSettings === "object") {
+        // But over-ride any supplied
+        $.extend(true, settings, suppliedSettings);
+      } else {
+        // If no settings were supplied, then the first param must be the option
+        option = suppliedSettings;
+      }
+
+      // Catch options
+
+      if (option === 'update') {
+        if ($this.data('perfect-scrollbar-update')) {
+          $this.data('perfect-scrollbar-update')();
+        }
+        return $this;
+      }
+      else if (option === 'destroy') {
+        if ($this.data('perfect-scrollbar-destroy')) {
+          $this.data('perfect-scrollbar-destroy')();
+        }
+        return $this;
+      }
+
+      if ($this.data('perfect-scrollbar')) {
+        // if there's already perfect-scrollbar
+        return $this.data('perfect-scrollbar');
+      }
+
+
+      // Or generate new perfectScrollbar
+
+      // Set class to the container
+      $this.addClass('ps-container oo');
+
+      var $scrollbarXRail = $("<div class='ps-scrollbar-x-rail'></div>").appendTo($this),
+          $scrollbarYRail = $("<div class='ps-scrollbar-y-rail'></div>").appendTo($this),
+          $scrollbarX = $("<div class='ps-scrollbar-x'></div>").appendTo($scrollbarXRail),
+          $scrollbarY = $("<div class='ps-scrollbar-y'></div>").appendTo($scrollbarYRail),
+          scrollbarXActive,
+          scrollbarYActive,
+          containerWidth,
+          containerHeight,
+          contentWidth,
+          contentHeight,
+          scrollbarXWidth,
+          scrollbarXLeft,
+          scrollbarXBottom = parseInt($scrollbarXRail.css('bottom'), 10),
+          scrollbarXRailWidth,
+          scrollbarYHeight,
+          scrollbarYTop,
+          scrollbarYRight = parseInt($scrollbarYRail.css('right'), 10),
+          scrollbarYRailHeight,
+          eventClassName = getEventClassName();
+
+      var updateContentScrollTop = function (currentTop, deltaY) {
+        var newTop = currentTop + deltaY,
+            maxTop = scrollbarYRailHeight - scrollbarYHeight;
+
+        if (newTop < 0) {
+          scrollbarYTop = 0;
+        }
+        else if (newTop > maxTop) {
+          scrollbarYTop = maxTop;
+        }
+        else {
+          scrollbarYTop = newTop;
+        }
+
+        var scrollTop = parseInt(scrollbarYTop * (contentHeight - containerHeight) / (scrollbarYRailHeight - scrollbarYHeight), 10);
+        $this.scrollTop(scrollTop);
+        $scrollbarXRail.css({bottom: scrollbarXBottom - scrollTop});
+      };
+
+      var updateContentScrollLeft = function (currentLeft, deltaX) {
+        var newLeft = currentLeft + deltaX,
+            maxLeft = scrollbarXRailWidth - scrollbarXWidth;
+
+        if (newLeft < 0) {
+          scrollbarXLeft = 0;
+        }
+        else if (newLeft > maxLeft) {
+          scrollbarXLeft = maxLeft;
+        }
+        else {
+          scrollbarXLeft = newLeft;
+        }
+
+        var scrollLeft = parseInt(scrollbarXLeft * (contentWidth - containerWidth) / (scrollbarXRailWidth - scrollbarXWidth), 10);
+        $this.scrollLeft(scrollLeft);
+        $scrollbarYRail.css({right: scrollbarYRight - scrollLeft});
+      };
+
+      var getSettingsAdjustedThumbSize = function (thumbSize) {
+        if (settings.minScrollbarLength) {
+          thumbSize = Math.max(thumbSize, settings.minScrollbarLength);
+        }
+        return thumbSize;
+      };
+
+      var updateScrollbarCss = function () {
+        $scrollbarXRail.css({left: $this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: scrollbarXRailWidth, display: scrollbarXActive ? "inherit": "none"});
+
+        if ($scrollbarYRail.hasClass('in-scrolling'))
+            $scrollbarYRail.css({/*top: $this.scrollTop(),*/ right: scrollbarYRight - $this.scrollLeft(), height: scrollbarYRailHeight, display: scrollbarYActive ? "inherit": "none"});
+        else
+            $scrollbarYRail.css({top: $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: scrollbarYRailHeight, display: scrollbarYActive ? "inherit": "none"});
+
+        $scrollbarX && $scrollbarX.css({left: scrollbarXLeft, width: scrollbarXWidth});
+        $scrollbarY && $scrollbarY.css({top: scrollbarYTop, height: scrollbarYHeight});
+      };
+
+      var updateBarSizeAndPosition = function () {
+        containerWidth = settings.includePadding ? $this.innerWidth() : $this.width();
+        containerHeight = settings.includePadding ? $this.innerHeight() : $this.height();
+        scrollbarYRailHeight = containerHeight - (settings.includeMargin ? (parseInt($scrollbarYRail.css('margin-top')) + parseInt($scrollbarYRail.css('margin-bottom'))): 0);
+        scrollbarXRailWidth = containerWidth - (settings.includeMargin ? (parseInt($scrollbarXRail.css('margin-left')) + parseInt($scrollbarXRail.css('margin-right'))): 0);
+        contentWidth = $this.prop('scrollWidth');
+        contentHeight = $this.prop('scrollHeight');
+
+        if (!settings.suppressScrollX && containerWidth + settings.scrollXMarginOffset < contentWidth) {
+          scrollbarXActive = true;
+          scrollbarXWidth = getSettingsAdjustedThumbSize(parseInt(scrollbarXRailWidth * containerWidth / contentWidth, 10));
+          scrollbarXLeft = parseInt($this.scrollLeft() * (scrollbarXRailWidth - scrollbarXWidth) / (contentWidth - containerWidth), 10);
+        }
+        else {
+          scrollbarXActive = false;
+          scrollbarXWidth = 0;
+          scrollbarXLeft = 0;
+          $this.scrollLeft(0);
+        }
+
+        if (!settings.suppressScrollY && containerHeight + settings.scrollYMarginOffset < contentHeight) {
+          scrollbarYActive = true;
+          scrollbarYHeight = getSettingsAdjustedThumbSize(parseInt(scrollbarYRailHeight * containerHeight / contentHeight, 10));
+          scrollbarYTop = parseInt($this.scrollTop() * (scrollbarYRailHeight - scrollbarYHeight) / (contentHeight - containerHeight), 10);
+        }
+        else {
+          scrollbarYActive = false;
+          scrollbarYHeight = 0;
+          scrollbarYTop = 0;
+          $this.scrollTop(0);
+        }
+
+        if (scrollbarYTop >= scrollbarYRailHeight - scrollbarYHeight) {
+          scrollbarYTop = scrollbarYRailHeight - scrollbarYHeight;
+        }
+        if (scrollbarXLeft >= scrollbarXRailWidth - scrollbarXWidth) {
+          scrollbarXLeft = scrollbarXRailWidth - scrollbarXWidth;
+        }
+
+        updateScrollbarCss();
+
+        if (settings.onChange) {
+            settings.onChange(this);
+        }
+      };
+
+      var bindMouseScrollXHandler = function () {
+        var currentLeft,
+            currentPageX;
+
+        $scrollbarX.bind('mousedown' + eventClassName, function (e) {
+          currentPageX = e.pageX;
+          currentLeft = $scrollbarX.position().left;
+          $scrollbarXRail.addClass('in-scrolling');
+          e.stopPropagation();
+          e.preventDefault();
+        });
+
+        $(document).bind('mousemove' + eventClassName, function (e) {
+          if ($scrollbarXRail.hasClass('in-scrolling')) {
+            updateContentScrollLeft(currentLeft, e.pageX - currentPageX);
+            e.stopPropagation();
+            e.preventDefault();
+          }
+        });
+
+        $(document).bind('mouseup' + eventClassName, function (e) {
+          if ($scrollbarXRail.hasClass('in-scrolling')) {
+            $scrollbarXRail.removeClass('in-scrolling');
+          }
+        });
+
+        currentLeft =
+        currentPageX = null;
+      };
+
+      var bindMouseScrollYHandler = function () {
+        var currentTop,
+            currentPageY;
+
+        $scrollbarY.bind('mousedown' + eventClassName, function (e) {
+          currentPageY = e.pageY;
+          currentTop = $scrollbarY.position().top;
+          $scrollbarYRail.addClass('in-scrolling');
+
+            var margin = parseInt($scrollbarYRail.css('margin-top'));
+            var rect = $scrollbarYRail[0].getBoundingClientRect();
+            $scrollbarYRail.css({
+                position: 'fixed',
+                left: rect.left,
+                top: rect.top - margin
+            });
+
+          e.stopPropagation();
+          e.preventDefault();
+        });
+
+        $(document).bind('mousemove' + eventClassName, function (e) {
+          if ($scrollbarYRail.hasClass('in-scrolling')) {
+            updateContentScrollTop(currentTop, e.pageY - currentPageY);
+            e.stopPropagation();
+            e.preventDefault();
+          }
+        });
+
+        $(document).bind('mouseup' + eventClassName, function (e) {
+          if ($scrollbarYRail.hasClass('in-scrolling')) {
+            $scrollbarYRail.removeClass('in-scrolling');
+
+              $scrollbarYRail.css({
+                  position: '',
+                  left: '',
+                  top: ''
+              });
+
+              updateScrollbarCss();
+          }
+        });
+
+        currentTop =
+        currentPageY = null;
+      };
+
+      // check if the default scrolling should be prevented.
+      var shouldPreventDefault = function (deltaX, deltaY) {
+        var scrollTop = $this.scrollTop();
+        if (deltaX === 0) {
+          if (!scrollbarYActive) {
+            return false;
+          }
+          if ((scrollTop === 0 && deltaY > 0) || (scrollTop >= contentHeight - containerHeight && deltaY < 0)) {
+            return !settings.wheelPropagation;
+          }
+        }
+
+        var scrollLeft = $this.scrollLeft();
+        if (deltaY === 0) {
+          if (!scrollbarXActive) {
+            return false;
+          }
+          if ((scrollLeft === 0 && deltaX < 0) || (scrollLeft >= contentWidth - containerWidth && deltaX > 0)) {
+            return !settings.wheelPropagation;
+          }
+        }
+        return true;
+      };
+
+      // bind handlers
+      var bindMouseWheelHandler = function () {
+        // FIXME: Backward compatibility.
+        // After e.deltaFactor applied, wheelSpeed should have smaller value.
+        // Currently, there's no way to change the settings after the scrollbar initialized.
+        // But if the way is implemented in the future, wheelSpeed should be reset.
+        settings.wheelSpeed /= 10;
+
+        var shouldPrevent = false;
+        $this.bind('mousewheel' + eventClassName, function (e, deprecatedDelta, deprecatedDeltaX, deprecatedDeltaY) {
+          Common.NotificationCenter.trigger('hints:clear');
+          var deltaX = e.deltaX * e.deltaFactor || deprecatedDeltaX,
+              deltaY = e.deltaY * e.deltaFactor || deprecatedDeltaY;
+
+            if (e && e.target && (e.target.type === 'textarea' || e.target.type === 'input')) {
+                e.stopImmediatePropagation();
+                e.preventDefault();
+
+                var scroll = $(e.target).scrollTop(), wheelDeltaY = 0;
+                if (e.originalEvent) {
+                    if (e.originalEvent.wheelDelta) wheelDeltaY = e.originalEvent.wheelDelta;
+                    else if (e.originalEvent.deltaY) wheelDeltaY = -e.originalEvent.deltaY*40;
+                    else if (e.originalEvent.detail) wheelDeltaY = e.originalEvent.detail;
+                } else {
+                    wheelDeltaY = (e.wheelDelta !== undefined) ? e.wheelDelta : e.deltaY;
+                }
+
+
+                $(e.target).scrollTop(scroll - wheelDeltaY);
+
+                return;
+            }
+
+          shouldPrevent = false;
+          if (!settings.useBothWheelAxes) {
+            // deltaX will only be used for horizontal scrolling and deltaY will
+            // only be used for vertical scrolling - this is the default
+            $this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed));
+            $this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));
+          } else if (scrollbarYActive && !scrollbarXActive) {
+            // only vertical scrollbar is active and useBothWheelAxes option is
+            // active, so let's scroll vertical bar using both mouse wheel axes
+            if (deltaY) {
+              $this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed));
+            } else {
+              $this.scrollTop($this.scrollTop() + (deltaX * settings.wheelSpeed));
+            }
+            shouldPrevent = true;
+          } else if (scrollbarXActive && !scrollbarYActive) {
+            // useBothWheelAxes and only horizontal bar is active, so use both
+            // wheel axes for horizontal bar
+            if (deltaX) {
+              $this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));
+            } else {
+              $this.scrollLeft($this.scrollLeft() - (deltaY * settings.wheelSpeed));
+            }
+            shouldPrevent = true;
+          }
+
+          // update bar position
+          updateBarSizeAndPosition();
+
+          shouldPrevent = (shouldPrevent || shouldPreventDefault(deltaX, deltaY));
+          if (shouldPrevent) {
+            e.stopPropagation();
+            e.preventDefault();
+          }
+        });
+
+        // fix Firefox scroll problem
+        $this.bind('MozMousePixelScroll' + eventClassName, function (e) {
+          if (shouldPrevent) {
+            e.preventDefault();
+          }
+        });
+      };
+
+      var bindKeyboardHandler = function () {
+        var hovered = false;
+        $this.bind('mouseenter' + eventClassName, function (e) {
+          hovered = true;
+        });
+        $this.bind('mouseleave' + eventClassName, function (e) {
+          hovered = false;
+        });
+
+        var shouldPrevent = false;
+        $(document).bind('keydown' + eventClassName, function (e) {
+          if (!hovered || $(document.activeElement).is(":input,[contenteditable]")) {
+            return;
+          }
+
+          var deltaX = 0,
+              deltaY = 0;
+
+          switch (e.which) {
+          case 37: // left
+            deltaX = -30;
+            break;
+          case 38: // up
+            deltaY = 30;
+            break;
+          case 39: // right
+            deltaX = 30;
+            break;
+          case 40: // down
+            deltaY = -30;
+            break;
+          case 33: // page up
+            deltaY = 90;
+            break;
+          case 32: // space bar
+          case 34: // page down
+            deltaY = -90;
+            break;
+          case 35: // end
+            deltaY = -containerHeight;
+            break;
+          case 36: // home
+            deltaY = containerHeight;
+            break;
+          default:
+            return;
+          }
+
+          $this.scrollTop($this.scrollTop() - deltaY);
+          $this.scrollLeft($this.scrollLeft() + deltaX);
+
+          shouldPrevent = shouldPreventDefault(deltaX, deltaY);
+          if (shouldPrevent) {
+            e.preventDefault();
+          }
+        });
+      };
+
+      var bindRailClickHandler = function () {
+        var stopPropagation = function (e) { e.stopPropagation(); };
+
+        $scrollbarY.bind('click' + eventClassName, stopPropagation);
+        $scrollbarYRail.bind('click' + eventClassName, function (e) {
+          var halfOfScrollbarLength = parseInt(scrollbarYHeight / 2, 10),
+              positionTop = e.pageY - $scrollbarYRail.offset().top - halfOfScrollbarLength,
+              maxPositionTop = scrollbarYRailHeight - scrollbarYHeight,
+              positionRatio = positionTop / maxPositionTop;
+
+          if (positionRatio < 0) {
+            positionRatio = 0;
+          } else if (positionRatio > 1) {
+            positionRatio = 1;
+          }
+
+          $this.scrollTop((contentHeight - containerHeight) * positionRatio);
+        });
+
+        $scrollbarX.bind('click' + eventClassName, stopPropagation);
+        $scrollbarXRail.bind('click' + eventClassName, function (e) {
+          var halfOfScrollbarLength = parseInt(scrollbarXWidth / 2, 10),
+              positionLeft = e.pageX - $scrollbarXRail.offset().left - halfOfScrollbarLength,
+              maxPositionLeft = scrollbarXRailWidth - scrollbarXWidth,
+              positionRatio = positionLeft / maxPositionLeft;
+
+          if (positionRatio < 0) {
+            positionRatio = 0;
+          } else if (positionRatio > 1) {
+            positionRatio = 1;
+          }
+
+          $this.scrollLeft((contentWidth - containerWidth) * positionRatio);
+        });
+      };
+
+      // bind mobile touch handler
+      var bindMobileTouchHandler = function () {
+        var applyTouchMove = function (differenceX, differenceY) {
+          $this.scrollTop($this.scrollTop() - differenceY);
+          $this.scrollLeft($this.scrollLeft() - differenceX);
+
+          // update bar position
+          updateBarSizeAndPosition();
+        };
+
+        var startCoords = {},
+            startTime = 0,
+            speed = {},
+            breakingProcess = null,
+            inGlobalTouch = false;
+
+        $(window).bind("touchstart" + eventClassName, function (e) {
+          inGlobalTouch = true;
+        });
+        $(window).bind("touchend" + eventClassName, function (e) {
+          inGlobalTouch = false;
+        });
+
+        $this.bind("touchstart" + eventClassName, function (e) {
+          var touch = e.originalEvent.targetTouches[0];
+
+          startCoords.pageX = touch.pageX;
+          startCoords.pageY = touch.pageY;
+
+          startTime = (new Date()).getTime();
+
+          if (breakingProcess !== null) {
+            clearInterval(breakingProcess);
+          }
+
+          e.stopPropagation();
+        });
+        $this.bind("touchmove" + eventClassName, function (e) {
+          if (!inGlobalTouch && e.originalEvent.targetTouches.length === 1) {
+            var touch = e.originalEvent.targetTouches[0];
+
+            var currentCoords = {};
+            currentCoords.pageX = touch.pageX;
+            currentCoords.pageY = touch.pageY;
+
+            var differenceX = currentCoords.pageX - startCoords.pageX,
+              differenceY = currentCoords.pageY - startCoords.pageY;
+
+            applyTouchMove(differenceX, differenceY);
+            startCoords = currentCoords;
+
+            var currentTime = (new Date()).getTime();
+
+            var timeGap = currentTime - startTime;
+            if (timeGap > 0) {
+              speed.x = differenceX / timeGap;
+              speed.y = differenceY / timeGap;
+              startTime = currentTime;
+            }
+
+            e.preventDefault();
+          }
+        });
+        $this.bind("touchend" + eventClassName, function (e) {
+          clearInterval(breakingProcess);
+          breakingProcess = setInterval(function () {
+            if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) {
+              clearInterval(breakingProcess);
+              return;
+            }
+
+            applyTouchMove(speed.x * 30, speed.y * 30);
+
+            speed.x *= 0.8;
+            speed.y *= 0.8;
+          }, 10);
+        });
+      };
+
+      var bindScrollHandler = function () {
+        $this.bind('scroll' + eventClassName, function (e) {
+          updateBarSizeAndPosition();
+        });
+      };
+
+      var destroy = function () {
+        $this.unbind(eventClassName);
+        $(window).unbind(eventClassName);
+        $(document).unbind(eventClassName);
+        $this.data('perfect-scrollbar', null);
+        $this.data('perfect-scrollbar-update', null);
+        $this.data('perfect-scrollbar-destroy', null);
+        $scrollbarX.remove();
+        $scrollbarY.remove();
+        $scrollbarXRail.remove();
+        $scrollbarYRail.remove();
+
+        // clean all variables
+        $scrollbarX =
+        $scrollbarY =
+        containerWidth =
+        containerHeight =
+        contentWidth =
+        contentHeight =
+        scrollbarXWidth =
+        scrollbarXLeft =
+        scrollbarXBottom =
+        scrollbarYHeight =
+        scrollbarYTop =
+        scrollbarYRight = null;
+      };
+
+      var ieSupport = function (version) {
+        $this.addClass('ie').addClass('ie' + version);
+
+        var bindHoverHandlers = function () {
+          var mouseenter = function () {
+            $(this).addClass('hover');
+          };
+          var mouseleave = function () {
+            $(this).removeClass('hover');
+          };
+          $this.bind('mouseenter' + eventClassName, mouseenter).bind('mouseleave' + eventClassName, mouseleave);
+          $scrollbarXRail.bind('mouseenter' + eventClassName, mouseenter).bind('mouseleave' + eventClassName, mouseleave);
+          $scrollbarYRail.bind('mouseenter' + eventClassName, mouseenter).bind('mouseleave' + eventClassName, mouseleave);
+          $scrollbarX.bind('mouseenter' + eventClassName, mouseenter).bind('mouseleave' + eventClassName, mouseleave);
+          $scrollbarY.bind('mouseenter' + eventClassName, mouseenter).bind('mouseleave' + eventClassName, mouseleave);
+        };
+
+        var fixIe6ScrollbarPosition = function () {
+          updateScrollbarCss = function () {
+            $scrollbarX.css({left: scrollbarXLeft + $this.scrollLeft(), bottom: scrollbarXBottom, width: scrollbarXWidth});
+            $scrollbarY.css({top: scrollbarYTop + $this.scrollTop(), right: scrollbarYRight, height: scrollbarYHeight});
+            $scrollbarX.hide().show();
+            $scrollbarY.hide().show();
+          };
+        };
+
+        if (version === 6) {
+          bindHoverHandlers();
+          fixIe6ScrollbarPosition();
+        }
+      };
+
+      var supportsTouch = (('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch);
+
+      var initialize = function () {
+        var ieMatch = navigator.userAgent.toLowerCase().match(/(msie) ([\w.]+)/);
+        if (ieMatch && ieMatch[1] === 'msie') {
+          // must be executed at first, because 'ieSupport' may addClass to the container
+          ieSupport(parseInt(ieMatch[2], 10));
+        }
+
+        updateBarSizeAndPosition();
+        bindScrollHandler();
+        bindMouseScrollXHandler();
+        bindMouseScrollYHandler();
+        bindRailClickHandler();
+        if (supportsTouch) {
+          bindMobileTouchHandler();
+        }
+        if ($this.mousewheel) {
+          bindMouseWheelHandler();
+        }
+        if (settings.useKeyboard) {
+          bindKeyboardHandler();
+        }
+        $this.data('perfect-scrollbar', $this);
+        $this.data('perfect-scrollbar-update', updateBarSizeAndPosition);
+        $this.data('perfect-scrollbar-destroy', destroy);
+      };
+
+      // initialize
+      initialize();
+
+      return $this;
+    });
+  };
+}));
diff --git a/test/unit-tests/common/main/lib/view/CellEditor.js b/test/unit-tests/common/main/lib/view/CellEditor.js
new file mode 100644
index 000000000..701c576d5
--- /dev/null
+++ b/test/unit-tests/common/main/lib/view/CellEditor.js
@@ -0,0 +1,86 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2021
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+/**
+ *  CellEditor.js
+ *
+ *  Displays loading mask over selected element(s) or component. Accepts both single and multiple selectors.
+ *
+ *  Created by Sharova Olga 07.09.2021
+ *  Copyright (c) 2021 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+!window.common && (window.common = {});
+!common.view && (common.view = {});
+
+common.view.CellEditor = new(function (){
+    var  me
+        ,$cellname
+        ,$cellcontent
+        ,$btnexpand
+        ,$btnfunc;
+
+    function  createView()
+    {
+        me=this;
+        me.$el = $('#cell-editing-box');
+        me.$cellcontent=$('#ce-cell-content');
+        me.$cellname = $('#ce-cell-name');
+        me.$btnexpand = $('#ce-btn-expand');
+        me.$btnfunc = $('#ce-func-label');
+        me.$btnfunc.addClass('disabled');
+
+        me.$cellname.on('focus', function(e){
+            var txt = me.$cellname[0];
+            txt.selectionStart = 0;
+            txt.selectionEnd = txt.value.length;
+            txt.scrollLeft = txt.scrollWidth;
+        });
+    }
+    function updateCellInfo(info) {
+        if (info) {
+            me.$cellname.val(typeof(info)=='string' ? info : info.asc_getName());
+        }
+    }
+    function cellNameDisabled(disabled){
+        (disabled) ? me.$cellname.attr('disabled', 'disabled') : me.$cellname.removeAttr('disabled');
+        //this.btnNamedRanges.setDisabled(disabled);
+    }
+    return {
+        create: createView,
+        cell:   {
+            updateInfo: updateCellInfo,
+            nameDisabled: cellNameDisabled
+        }
+    }
+})();
\ No newline at end of file
diff --git a/test/unit-tests/common/main/resources/less/asc-mixins.less b/test/unit-tests/common/main/resources/less/asc-mixins.less
new file mode 100644
index 000000000..ae626a8f9
--- /dev/null
+++ b/test/unit-tests/common/main/resources/less/asc-mixins.less
@@ -0,0 +1,397 @@
+*, *:before, *:after {
+    -moz-user-select: none;
+}
+
+:focus {
+    outline: none;
+}
+
+.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
+    background: @color;
+    background: -webkit-gradient(linear, left bottom,left top, color-stop(0, @start), color-stop(1, @stop));
+    background: -moz-linear-gradient(center bottom, @start 0%, @stop 100%);
+    background: -o-linear-gradient(@stop, @start);
+    background: linear-gradient(bottom, @start, @stop);
+//    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop, @start));
+}
+
+.box-shadow(@arguments) {
+    -webkit-box-shadow: @arguments;
+    //-moz-box-shadow: @arguments;
+    box-shadow: @arguments;
+}
+
+.box-inner-shadow(@arguments) {
+    -webkit-box-shadow: inset @arguments;
+    //-moz-box-shadow: inset @arguments;
+    box-shadow: inset @arguments;
+}
+
+.border-radius(@radius: 2px) {
+    border-radius: @radius;
+}
+
+.position(@type: absolute, @left: 0, @top: 0, @right: 0, @bottom: 0) {
+    position: @type;
+    left: @left;
+    top: @top;
+    right: @right;
+    bottom: @bottom;
+}
+
+.fontsize(@value) {
+    font-size: @value;
+}
+
+// User select
+.user-select(@select: none) {
+    -webkit-user-select: @select;
+       -moz-user-select: @select;
+        -ms-user-select: @select;
+//         -o-user-select: @select;
+            user-select: @select;
+}
+
+.toolbar-btn-icon(@icon-class, @index, @icon-size, @offset-x: 0, @offset-y: 0) {
+    .@{icon-class} {background-position: 0 -(@index * @icon-size - @offset-y);}
+    .btn.active   > .@{icon-class},
+    .btn:active   > .@{icon-class} {background-position: (-1 * @icon-size - @offset-x) -(@index * @icon-size - @offset-y);}
+    .btn.disabled > .@{icon-class} {background-position: (-2 * @icon-size - @offset-x) -(@index * @icon-size - @offset-y);}
+}
+
+.toolbar-group-btn-icon(@icon-class, @index, @icon-size, @offset-x: 0, @offset-y: 0) {
+    .@{icon-class} {background-position: 0 -(@index * @icon-size - @offset-y);}
+    .btn-group.open > .@{icon-class},
+    .btn.active   > .@{icon-class},
+    .btn:active   > .@{icon-class} {background-position: (-1 * @icon-size - @offset-x) -(@index * @icon-size - @offset-y);}
+    .btn.disabled > .@{icon-class} {background-position: (-2 * @icon-size - @offset-x) -(@index * @icon-size - @offset-y);}
+}
+
+.menu-btn-icon(@icon-class, @index, @icon-size) {
+                                .menu-item-icon.@{icon-class} {background-position: 0 -@index*@icon-size;}
+    li            > a.checked > .menu-item-icon.@{icon-class} {background-position: -1*@icon-size -@index*@icon-size;}
+}
+
+.options-btn-icon(@icon-class, @index, @icon-size) {
+                      .@{icon-class} {background-position:   0 -@index*@icon-size;}
+    button.over     > .@{icon-class} {background-position: -1*@icon-size -@index*@icon-size;}
+//    .btn-group.open > .@{icon-class},
+    button.active   > .@{icon-class},
+    button:active   > .@{icon-class} {background-position: -2*@icon-size -@index*@icon-size;}
+    button.disabled > .@{icon-class} {background-position: -3*@icon-size -@index*@icon-size;}
+}
+
+/**
+*/
+:root {
+    --bgX: 0px;
+
+    --pixel-ratio-factor: 1;
+
+    .pixel-ratio__1_5 {
+        @ratio: 1.5;
+        @one-px: 1px / @ratio;
+        @two-px: 2px / @ratio;
+
+        --pixel-ratio-factor: @ratio;
+        --scaled-one-pixel: @one-px;
+        --scaled-two-pixel: @two-px;
+    }
+
+    .pixel-ratio__2 {
+    }
+
+    .pixel-ratio__1_25 {
+        @ratio: 1.25;
+        @one-px: 1px / @ratio;
+        @two-px: 2px / @ratio;
+
+        --pixel-ratio-factor: @ratio;
+        --scaled-one-pixel: @one-px;
+        --scaled-two-pixel: @two-px;
+    }
+
+    .pixel-ratio__1_75 {
+        @ratio: 1.75;
+        @one-px: 1px / @ratio;
+        @two-px: 2px / @ratio;
+
+        --pixel-ratio-factor: @ratio;
+        --scaled-one-pixel: @one-px;
+        --scaled-two-pixel: @two-px;
+    }
+}
+
+.button-normal-icon(@icon-class, @index, @icon-size, @normal-h-offset: 0px) {
+    .@{icon-class} {
+        background-position: -0*@icon-size  -@index*@icon-size;
+        background-position: @normal-h-offset -@index*@icon-size;
+    }
+//    .@{icon-class} {background-position-y: -@index*@icon-size;}
+}
+
+.button-otherstates-icon(@icon-class, @icon-size) {
+    .btn {
+        &:active, &.active {
+            &:not(:disabled):not(.disabled) {
+                > .@{icon-class} {
+                    @iconsize: -1*@icon-size;
+
+                    background-position-x: @iconsize;
+                    --bgX: @iconsize;
+                }
+            }
+        }
+    }
+}
+
+.mx-button-otherstates-icon2(@offset) {
+    &.active, &:active{
+        &:not(:disabled):not(.disabled) {
+            .icon {
+                background-position-x: @offset;
+            }
+        }
+    }
+
+    //&.active   svg.icon,
+    //&:active   svg.icon {fill:#fff;}
+}
+
+.button-otherstates-icon2(@icon-class, @icon-size) {
+    button.@{icon-class} {
+        .mx-button-otherstates-icon2(@icon-size);
+    }
+}
+
+.menu-icon-normal(@icon-class, @index, @icon-size) {
+    .menu-item-icon.@{icon-class} {
+        background-position: 0          -@index*@icon-size;
+        background-position: var(--bgX) -@index*@icon-size;
+    }
+//    .menu-item-icon.@{icon-class} {background-position-y: -@index*@icon-size;}
+}
+
+.menu-otherstates-icon(@menu-class, @icon-size) {
+    .@{menu-class} li            > a.checked > .menu-item-icon {background-position-x: -1*@icon-size; --bgX: calc(-1*@icon-size);}
+    .@{menu-class} li.disabled                 .menu-item-icon {background-position-x: -2*@icon-size; --bgX: calc(-2*@icon-size);}
+}
+
+/**/
+
+.background-ximage(@image, @image2x, @w: auto, @h: auto, @repeat: no-repeat) {
+    background-image: data-uri(%("%s",@image));
+    background-repeat: @repeat;
+
+    @media
+    only screen and (-webkit-min-device-pixel-ratio: 2),
+    only screen and (min-resolution: 2dppx),
+    only screen and (min-resolution: 192dpi) {
+        background-image: data-uri(%("%s",@image2x));
+        background-size: @w @h;
+    }
+}
+
+.choose-image-path(@fromcommon) when (@fromcommon = false) {
+    @path: if(@icon-src-base64, @app-image-path, @app-image-const-path);
+};
+
+.choose-image-path(@fromcommon) when (@fromcommon = true) {
+    @path: if(@icon-src-base64, @common-image-path, @common-image-const-path);
+}
+
+.background-ximage-v2(@image, @w: auto, @h: auto, @repeat: no-repeat, @commonimage: true) {
+    .choose-image-path(@commonimage);
+    @imagepath: '@{path}/@{image}';
+
+    background-image: if(@icon-src-base64, data-uri(%("%s", '@{imagepath}')), ~"url(@{imagepath})");
+    background-repeat: @repeat;
+
+    @1d5ximage: replace(@imagepath, '\.png$', '@1.5x.png');
+    @1d75ximage: replace(@imagepath, '\.png$', '@1.75x.png');
+    @1d25ximage: replace(@imagepath, '\.png$', '@1.25x.png');
+    @2ximage: replace(@imagepath, '\.png$', '@2x.png');
+
+    @media only screen {
+         @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),
+             (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx),
+                 (min-resolution: 144dpi) and (max-resolution: 191dpi)
+         {
+             background-image: ~"url(@{1d5ximage})";
+             background-size: @w @h;
+         }
+
+        @media (-webkit-min-device-pixel-ratio: 2),
+            (min-resolution: 2dppx),
+            (min-resolution: 192dpi)
+        {
+            background-image: ~"url(@{2ximage})";
+            background-size: @w @h;
+        }
+    }
+}
+
+.background-ximage-all(@image, @w: auto, @h: auto, @repeat: no-repeat, @commonimage: true) {
+    .choose-image-path(@commonimage);
+    @imagepath: '@{path}/@{image}';
+
+    background-image: if(@icon-src-base64, data-uri(%("%s", '@{imagepath}')), ~"url(@{imagepath})");
+    background-repeat: @repeat;
+
+    @1d5ximage: replace(@imagepath, '\.png$', '@1.5x.png');
+    @1d75ximage: replace(@imagepath, '\.png$', '@1.75x.png');
+    @1d25ximage: replace(@imagepath, '\.png$', '@1.25x.png');
+    @2ximage: replace(@imagepath, '\.png$', '@2x.png');
+
+    @media only screen {
+        @media (-webkit-min-device-pixel-ratio: 1.25) and (-webkit-max-device-pixel-ratio: 1.49),
+        (min-resolution: 1.25dppx) and (max-resolution: 1.49dppx),
+        (min-resolution: 120dpi) and (max-resolution: 143dpi)
+        {
+            background-image: ~"url(@{1d25ximage})";
+            background-size: @w @h;
+        }
+
+        @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.74),
+        (min-resolution: 1.5dppx) and (max-resolution: 1.74dppx),
+        (min-resolution: 144dpi) and (max-resolution: 167dpi)
+        {
+            background-image: ~"url(@{1d5ximage})";
+            background-size: @w @h;
+        }
+
+        @media (-webkit-min-device-pixel-ratio: 1.75) and (-webkit-max-device-pixel-ratio: 1.9),
+        (min-resolution: 1.75dppx) and (max-resolution: 1.9dppx),
+        (min-resolution: 168dpi) and (max-resolution: 191dpi)
+        {
+            background-image: ~"url(@{1d75ximage})";
+            background-size: @w @h;
+        }
+
+        @media (-webkit-min-device-pixel-ratio: 2),
+        (min-resolution: 2dppx),
+        (min-resolution: 192dpi)
+        {
+            background-image: ~"url(@{2ximage})";
+            background-size: @w @h;
+        }
+    }
+}
+
+.img-commonctrl {
+    &.img-colored {
+        filter: none;
+    }
+}
+
+@common-controls-width: 100px;
+.img-commonctrl,
+        .dropdown-menu li .checked:before, .input-error:before, .input-warning:before,
+        .btn-toolbar .icon.img-commonctrl, .list-item div.checked:before
+{
+    background-image: if(@icon-src-base64, data-uri(%("%s",'@{common-image-path}/@{common-controls}')), ~"url(@{common-image-const-path}/@{common-controls})");
+    background-repeat: no-repeat;
+    filter: @component-normal-icon-filter;
+
+    @1d25ximage: replace(@common-controls, '\.png$', '@1.25x.png');
+    @1d5ximage: replace(@common-controls, '\.png$', '@1.5x.png');
+    @1d75ximage: replace(@common-controls, '\.png$', '@1.75x.png');
+    @2ximage: replace(@common-controls, '\.png$', '@2x.png');
+
+    @media only screen {
+        @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),
+                (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx),
+                (min-resolution: 144dpi) and (max-resolution: 191dpi)
+        {
+            background-image: ~"url(@{common-image-const-path}/@{1d5ximage})";
+            background-size: @common-controls-width auto;
+        }
+
+        @media (-webkit-min-device-pixel-ratio: 2),
+                    (min-resolution: 2dppx),
+                    (min-resolution: 192dpi)
+        {
+            background-image: ~"url(@{common-image-const-path}/@{2ximage})";
+            background-size: @common-controls-width auto;
+        }
+    }
+
+    .pixel-ratio__1_25 & {
+        background-image: ~"url(@{common-image-const-path}/@{1d25ximage})";
+        background-size: @common-controls-width auto;
+    }
+
+    .pixel-ratio__1_75 & {
+        background-image: ~"url(@{common-image-const-path}/@{1d75ximage})";
+        background-size: @common-controls-width auto;
+    }
+}
+
+@img-colorpicker-width: 205px;
+.img-colorpicker, .hsb-colorpicker .empty-color:before
+{
+    background-image: if(@icon-src-base64, data-uri(%("%s",'@{common-image-path}/hsbcolorpicker/hsb-colorpicker.png')), ~"url(@{common-image-const-path}/hsbcolorpicker/hsb-colorpicker.png)");
+    background-repeat: no-repeat;
+
+    @media only screen {
+        @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),
+                (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx),
+                (min-resolution: 144dpi) and (max-resolution: 191dpi)
+        {
+            background-image: ~"url(@{common-image-const-path}/hsbcolorpicker/hsb-colorpicker@1.5x.png)";
+            background-size:  @img-colorpicker-width auto;
+        }
+
+        @media (-webkit-min-device-pixel-ratio: 2),
+                    (min-resolution: 2dppx),
+                    (min-resolution: 192dpi)
+        {
+            background-image: ~"url(@{common-image-const-path}/hsbcolorpicker/hsb-colorpicker@2x.png)";
+            background-size:  @img-colorpicker-width auto;
+        }
+    }
+}
+
+.icon.lang-flag {
+    @img-flags-width: 48px;
+
+    width: 16px;
+    height: 12px;
+
+    background-image: if(@icon-src-base64, data-uri(%("%s",'@{common-image-path}/controls/flags.png')), ~"url(@{common-image-const-path}/controls/flags.png)");
+    background-repeat: no-repeat;
+
+    @media only screen {
+        @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),
+                (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx),
+                (min-resolution: 144dpi) and (max-resolution: 191dpi)
+        {
+            background-image: ~"url(@{common-image-const-path}/controls/flags@1.5x.png)";
+            background-size:  @img-flags-width auto;
+        }
+
+        @media (-webkit-min-device-pixel-ratio: 2),
+                (min-resolution: 2dppx),
+                (min-resolution: 192dpi)
+        {
+            background-image: ~"url(@{common-image-const-path}/controls/flags@2x.png)";
+            background-size:  @img-flags-width auto;
+        }
+    }
+}
+
+//.adaptive-solid-border(@width, @color, @borderside: all) {
+//    @lb-border: if((@borderside = all), border, e('border-@{borderside}'));
+//    @lb-border-width: if((@borderside = all), border-width, e('border-@{borderside}-width'));
+//
+//    @{lb-border}: @width solid @color;
+//
+//    @media only screen {
+//        @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),
+//            (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx),
+//                (min-resolution: 144dpi) and (max-resolution: 191dpi)
+//        {
+//            @{lb-border-width}: (@width / 1.5);
+//        }
+//    }
+//}
diff --git a/test/unit-tests/common/main/resources/less/buttons.less b/test/unit-tests/common/main/resources/less/buttons.less
new file mode 100644
index 000000000..5a2ea8148
--- /dev/null
+++ b/test/unit-tests/common/main/resources/less/buttons.less
@@ -0,0 +1,1148 @@
+@x-huge-btn-height: 46px;
+@x-huge-btn-icon-size: 28px;
+
+.btn {
+    border-radius: 1px;
+    color: @text-normal-ie;
+    color: @text-normal;
+    border-width: @scaled-one-px-value-ie;
+    border-width: @scaled-one-px-value;
+
+    .btnsize(@value) {
+        min-width: @value;
+        height: @value;
+        line-height: @value - 2px;
+    }
+
+    &.small {
+        .btnsize(20px);
+    }
+
+    &.normal {
+        height: 22px;
+    }
+
+    &.large {
+        .btnsize(30px);
+    }
+
+    &.huge {
+        .btnsize(37px);
+    }
+
+    &.huge-1 {
+        .btnsize(40px);
+    }
+
+    &.x-huge {
+        .btnsize(@x-huge-btn-height);
+    }
+
+    &[disabled], &.disabled {
+        opacity: @component-disabled-opacity;
+    }
+    
+    &:focus {
+        outline: 0;
+        outline-offset: 0;
+        color: @text-normal-ie;
+        color: @text-normal;
+    }
+
+    &:hover {
+        color: @text-normal-ie;
+        color: @text-normal;
+    }
+
+    &:active, &.active {
+        -webkit-box-shadow: none;
+        box-shadow: none;
+    }
+
+    .caret {
+        width: 4px;
+        height: 4px;
+        border: solid 1px @icon-normal-ie;
+        border: solid 1px @icon-normal;
+        border-bottom: none;
+        border-right: none;
+        background-image: none;
+
+        transition: transform 0.2s ease;
+        transform: rotate(-135deg) translate(1px,1px);
+    }
+
+    //&:active,
+    &:active:not(.disabled),
+    &.active:not(.disabled){
+        .caret {
+            transform: rotate(45deg);
+            border-color: @icon-normal-pressed-ie;
+            border-color: @icon-normal-pressed;
+        }
+    }
+
+    &:active,
+    &.active {
+        &:focus,
+        &.focus {
+            outline: none;
+        }
+    }
+
+    &.icon-top {
+        display: inline-flex;
+        flex-direction: column;
+        align-items: center;
+
+        .icon {
+            //flex-grow: 1;
+        }
+
+        .caption {
+            line-height: 18px;
+            padding: 0 4px;
+        }
+    }
+
+    &.notify {
+        .icon {
+            &::after {
+                content: ' ';
+                position: absolute;
+                border: 1px solid @icon-notification-badge-ie;
+                border: 1px solid @icon-notification-badge;
+                border-left: 0 none;
+                border-right: 0 none;
+                width: 6px;
+                height: 3px;
+                bottom: 4px;
+                right: 2px;
+            }
+
+            &::before {
+                content: ' ';
+                position: absolute;
+                width: 10px;
+                height: 7px;
+                bottom: 2px;
+                background-color: @background-notification-badge-ie;
+                background-color: @background-notification-badge;
+                border-radius: 2px;
+                right: 0;
+            }
+        }
+    }
+
+    .icon {
+        &.caret-up, &.caret-down {
+            &::after {
+                content: '';
+                position: absolute;
+                left: 6px;
+                width: 8px;
+                height: 8px;
+                background-color: transparent;
+                border: solid 1px @text-normal-ie;
+                border: solid 1px @text-normal;
+                border-bottom: none;
+                border-right: none;
+            }
+        }
+
+        &.caret-up {
+            &::after {
+                top: 8px;
+                -moz-transform: rotate(45deg);
+                -ms-transform: rotate(45deg);
+                -webkit-transform: rotate(45deg);
+                -o-transform: rotate(45deg);
+                transform: rotate(45deg);
+            }
+        }
+        &.caret-down {
+            &::after {
+                top: 4px;
+                -moz-transform: rotate(225deg);
+                -ms-transform: rotate(225deg);
+                -webkit-transform: rotate(225deg);
+                -o-transform: rotate(225deg);
+                transform: rotate(225deg);
+            }
+        }
+    }
+
+    &:not(:disabled) {
+        .icon {
+            opacity: @component-normal-icon-opacity;
+        }
+    }
+
+    &:hover:not(.disabled) {
+        .icon {
+            opacity: @component-hover-icon-opacity;
+        }
+    }
+
+    &:active:not(.disabled),
+    &.active:not(.disabled) {
+        .caret-up, .caret-down {
+            &::after {
+                border-color: @text-normal-pressed-ie;
+                border-color: @text-normal-pressed;
+            }
+        }
+
+        .icon {
+            opacity: @component-active-icon-opacity;
+        }
+
+        &:hover .icon {
+            opacity: @component-active-hover-icon-opacity;
+        }
+    }
+}
+
+.btn.icon-top, .btn-group.icon-top {
+    display: inline-flex;
+    flex-direction: column;
+
+    &.open,
+    &.over {
+        &.split {
+            > .inner-box-icon {
+                .box-shadow(none);
+            }
+        }
+    }
+
+    &.x-huge {
+        @icon-size: 28px;
+
+        min-width: 35px;
+        height: @x-huge-btn-height;
+
+        img {
+            width: @x-huge-btn-icon-size;
+            height: @x-huge-btn-icon-size;
+        }
+
+        .inner-box-caption {
+            line-height: 18px;
+            padding: 0 2px;
+            display: flex;
+            align-items: center;
+
+            .caption {
+                max-width: 107px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+        }
+
+        .icon:not(svg) {
+            width: @x-huge-btn-icon-size;
+            height: @x-huge-btn-icon-size;
+            min-width: 0;
+        }
+
+        svg.icon {
+            width: 28px;
+            height: 28px;
+
+            @media
+            only screen and (-webkit-min-device-pixel-ratio: 1.5),
+            only screen and (min-resolution: 1.5dppx),
+            only screen and (min-resolution: 144dpi) {
+                //width:calc(~"40px/1.5");
+                //height:calc(~"40px/1.5");
+            }
+        }
+
+        button.small .icon {
+            width: 20px;
+            height: 20px;
+            min-width: 0;
+        }
+
+        &.dropdown-toggle {
+            .caption {
+                max-width: 100px;
+            }
+        }
+    }
+
+    .inner-box-icon {
+        flex-grow: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 20px;
+    }
+
+    .btn-fixflex-hcenter {
+        flex-grow: 1;
+    }
+
+    .btn-fixflex-vcenter {
+        display: flex;
+        align-items: center;
+
+        .caret {
+            vertical-align: inherit;
+        }
+    }
+
+    .inner-box-caption {
+        margin: 0;
+        height: 18px;
+    }
+
+    div.inner-box-icon {
+        height: 28px;           // TODO: clear. Firefox bug 984869. fixed. isn't released.
+    }
+}
+
+.icon-top.btn-group {
+    &.x-huge, .x-huge {
+        .inner-box-caption {
+            padding-right: 4px;
+        }
+    }
+}
+
+.icon-top {
+    &.x-huge  {
+        .btn&, .btn-group& .btn-toolbar {
+            .mx-button-otherstates-icon2(@button-xhuge-active-icon-offset-x);
+        }
+
+        .btn.small {
+            .mx-button-otherstates-icon2(@button-small-active-icon-offset-x);
+        }
+    }
+}
+
+.btn-toolbar {
+    display: inline-block;
+    position: relative;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    .border-radius(1px);
+    background-color: transparent;
+
+    .masked:not(.statusbar) & {
+        &:disabled {
+            opacity: 1;
+        }
+    }
+
+    .btn.small;
+
+    &.bg-white {
+        width: 22px;
+        height: 22px;
+
+        background-color: @background-normal-ie;
+        background-color: @background-normal;
+        border: @scaled-one-px-value-ie solid @border-regular-control-ie;
+        border: @scaled-one-px-value solid @border-regular-control;
+        .border-radius(@border-radius-small);
+
+        &:focus:not(.disabled) {
+            border-color: @border-control-focus-ie;
+            border-color: @border-control-focus;
+        }
+    }
+
+    &:before,
+    &:after {
+        content: "";
+        display: none;
+    }
+
+    &:hover:not(.disabled),
+    .over:not(.disabled) {
+        background-color: @highlight-button-hover-ie;
+        background-color: @highlight-button-hover;
+    }
+
+
+    &:active:not(.disabled),
+    &.active:not(.disabled) {
+        color: @text-normal-pressed-ie;
+        color: @text-normal-pressed;
+        background-color: @highlight-button-pressed-ie;
+        background-color: @highlight-button-pressed;
+    }
+
+    &:not(.icon-top)
+    .caption:not(:empty) {
+        padding: 0 4px;
+    }
+
+    .icon {
+        padding: 0;
+        margin: 0;
+        display: inline-block;
+        background-repeat: no-repeat;
+    }
+
+    &:not(.x-huge) {
+        .icon {
+            width: 20px;
+            height: 20px;
+            line-height: 20px;
+
+        }
+
+        svg.icon {
+            @media
+            only screen and (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),
+            only screen and (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx),
+            only screen and (min-resolution: 144dpi) and (max-resolution: 143dpi) {
+                width:calc(~"28px/1.5");
+                height:calc(~"28px/1.5");
+            }
+        }
+    }
+
+    &.dropdown-toggle {
+        min-width: 7px;
+    }
+
+    // Large size
+    // ------------------------
+    &.large {
+        .icon {
+            width: 30px !important;
+            height: 30px;
+            line-height: 20px;
+        }
+    }
+
+    // Button has color line
+    // ------------------------
+    .btn-color-value-line {
+        pointer-events: none;
+        position: absolute;
+        left: 3px;
+        bottom: 1px;
+        width: 14px;
+        height: 3px;
+        background-color: red;
+        &.bordered {
+            border: @scaled-one-px-value-ie solid @border-regular-control-ie;
+            border: @scaled-one-px-value solid @border-regular-control;
+        }
+
+
+        .pixel-ratio__1_5 & {
+            height: 4px;
+        }
+    }
+}
+
+.btn-category {
+    .btn.large;
+    width: 100%;
+    padding: 0;
+    display: block;
+    position: relative;
+    .border-radius(0);
+    background-color: transparent;
+    font-weight: bold;
+
+    &:hover:not(.disabled),
+    .over:not(.disabled) {
+        background-color: @highlight-button-hover-ie;
+        background-color: @highlight-button-hover;
+    }
+
+    &:active:not(.disabled),
+    &.active:not(.disabled) {
+        background-color: @highlight-button-pressed-ie;
+        background-color: @highlight-button-pressed;
+        color: @text-normal-pressed-ie;
+        color: @text-normal-pressed;
+    }
+
+    .icon {
+        display: inline-block;
+        position: relative;
+        width: 20px;
+        height: 20px;
+        line-height: 20px;
+    }
+
+    &[disabled],
+    &.disabled {
+        //color: #000;  btn-category has no text
+        opacity: @component-disabled-opacity;
+    }
+}
+
+// The clickable button for toggling the menu
+// Remove the gradient and set the same inset shadow as the :active state
+.btn-group {
+    > .btn-toolbar {
+        float: none;
+    }
+
+    > .btn {
+        + .dropdown-toggle {
+            padding: 0 4px 0 3px;
+        }
+    }
+
+    > .dropdown-toggle:first-child {
+        .inner-box-caret {
+            padding: 0 4px 0 3px;
+        }
+    }
+
+    .caption {
+        &:empty {
+            display: none;
+
+            + .caret {
+                margin-left: 2px;
+            }
+        }
+    }
+
+    &.open {
+        > .btn-toolbar {
+                //color: @text-normal;
+
+                // Show no shadow for `.btn-link` since it has no other button styles.
+                &.btn-link {
+                    .box-shadow(none);
+                }
+        }
+
+        .dropdown-toggle {
+            .box-shadow(none);
+        }
+    }
+
+    &.over {
+        > button {
+            //background-color: @highlight-button-hover;
+        }
+    }
+
+    &:not(.split) {
+        .btn-toolbar {
+                &.dropdown-toggle:not(.x-huge) {
+                    width: 100%;
+                    min-width: 28px;
+                }
+
+                &.btn-text-value {
+                    .caret {
+                        margin: 6px 3px 6px 0;
+                    }
+                    .caption {
+                        vertical-align: middle;
+                    }
+                    &[disabled],
+                    &.disabled {
+                        opacity: @component-disabled-opacity;
+                    }
+                }
+
+            &.large {
+                &.dropdown-toggle {
+                    min-width: 40px;
+
+                    .caret {
+                        float: right;
+                    }
+                }
+            }
+        }
+        .dropdown-menu {
+            &.scale-menu {
+                li.disabled {
+                    opacity: @component-disabled-opacity;
+                }
+            }
+        }
+    }
+
+    &.split {
+
+        &.over:not(.disabled),
+        &.open {
+            box-shadow: inset 0 0 0 @scaled-one-px-value-ie @highlight-button-hover-ie;
+            box-shadow: inset 0 0 0 @scaled-one-px-value @highlight-button-hover;
+
+            button:not(.active):not(.btn-text-split-default) {
+                background-color: transparent;
+            }
+        }
+
+        &.over:not(.disabled) {
+            button {
+                &:not(.active) {
+                    &:hover {
+                        background-color: @highlight-button-hover-ie;
+                        background-color: @highlight-button-hover;
+                    }
+                }
+
+                &:active,
+                &:active:hover {
+                    background-color: @highlight-button-pressed-ie;
+                    background-color: @highlight-button-pressed;
+                }
+            }
+        }
+
+        &.open {
+            > button:not(.active) {
+                &:last-of-type {
+                    background-color: @highlight-button-pressed-ie;
+                    background-color: @highlight-button-pressed;
+                }
+            }
+
+            .caret {
+                background-position: @arrow-small-offset-x - 7px @arrow-small-offset-y;
+            }
+        }
+
+        button.active:not(.disabled) {
+            background-color: @highlight-button-pressed-ie;
+            background-color: @highlight-button-pressed;
+        }
+
+        .btn + .btn {
+            margin: 0;
+        }
+    }
+}
+
+.btn-color {
+    width: 45px;
+    height: 22px;
+    padding: @scaled-one-px-value-ie 11px @scaled-one-px-value-ie @scaled-one-px-value-ie;
+    padding: @scaled-one-px-value 11px @scaled-one-px-value @scaled-one-px-value;
+    border:@scaled-one-px-value-ie solid @border-regular-control-ie;
+    border:@scaled-one-px-value solid @border-regular-control;
+    .border-radius(@border-radius-small);
+
+    span:nth-child(1) {
+        float: left;
+        width: 100%;
+        height: 100%;
+        border: @scaled-one-px-value-ie solid @border-color-shading-ie;
+        border: @scaled-one-px-value solid @border-color-shading;
+        background-color: transparent;
+    }
+
+    .inner-box-caret {
+        position: absolute;
+        right: 0;
+        top: 2px;
+    }
+
+    &,
+    &:hover,
+    .over,
+    &:active,
+    &.active {
+        background: @background-normal-ie !important;
+        background: @background-normal !important;
+        .box-shadow(none)  !important;
+    }
+
+    &[disabled],
+    &.disabled {
+        opacity: @component-disabled-opacity;
+    }
+
+    .color-transparent {
+        &:before {
+            border-right: @scaled-one-px-value-ie solid red;
+            border-right: @scaled-one-px-value solid red;
+            height: 34px;
+            transform: translate(16px, -9px) rotate(62deg);
+            left: 0;
+        }
+    }
+
+    &:active:not(.disabled),
+    &.active:not(.disabled) {
+        .caret {
+            border-color: @icon-normal;
+        }
+    }
+
+    &:not(.disabled) {
+        &:focus, .btn-group.open &, .btn-group:active & {
+            border-color: @border-control-focus-ie;
+            border-color: @border-control-focus;
+        }
+    }
+}
+
+// for color button auto color
+.dropdown-menu {
+    li > a.selected,
+    li > a:hover {
+        span.color-auto {
+            outline: @scaled-one-px-value-ie solid @icon-normal-ie;
+            outline: @scaled-one-px-value solid @icon-normal;
+            border: @scaled-one-px-value-ie solid @background-normal-ie;
+            border: @scaled-one-px-value solid @background-normal;
+        }
+    }
+}
+
+
+.btn-options {
+    padding: 0;
+    margin:0;
+    border: 0 none;
+    //.box-shadow(none);
+    background-color: transparent;
+
+    &.bg-white {
+        background-color: @background-normal-ie;
+        background-color: @background-normal;
+    }
+
+    .icon {
+        position: relative;
+        min-width: inherit;
+        height: inherit;
+        line-height: inherit;
+        padding: 0;
+        margin: 0;
+        display: inline-block;
+        background-repeat: no-repeat;
+    }
+
+    box-shadow: inset 0 0 0 @scaled-one-px-value-ie @border-regular-control-ie;
+    box-shadow: inset 0 0 0 @scaled-one-px-value @border-regular-control;
+    .border-radius(@border-radius-small);
+
+    &:hover,
+    &.over {
+        background-color: @highlight-button-hover-ie;
+        background-color: @highlight-button-hover;
+    }
+
+    &:active,
+    &.active {
+        background-color: @highlight-button-pressed-ie;
+        background-color: @highlight-button-pressed;
+    }
+
+    &.large {
+        min-width: 28px;
+        width: 28px;
+        height: 28px;
+    }
+
+    &:focus:not(.disabled) {
+        box-shadow: inset 0 0 0 @scaled-one-px-value-ie @border-control-focus-ie;
+        box-shadow: inset 0 0 0 @scaled-one-px-value @border-control-focus;
+    }
+}
+
+.btn-text-default {
+    width: 75px;
+    height: 22px;
+    background: @background-normal-ie;
+    background: @background-normal;
+    border: @scaled-one-px-value-ie solid @border-regular-control-ie;
+    border: @scaled-one-px-value solid @border-regular-control;
+    .border-radius(@border-radius-small);
+
+    &.auto {
+        width: auto;
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+
+    &:focus:not(.disabled) {
+        border-color: @border-control-focus-ie;
+        border-color: @border-control-focus;
+    }
+
+    &:hover:not(.disabled),
+    .over:not(.disabled) {
+        background-color: @highlight-button-hover-ie !important;
+        background-color: @highlight-button-hover !important;
+    }
+
+    &:active:not(.disabled),
+    &.active:not(.disabled) {
+        background-color: @highlight-button-pressed-ie !important;
+        background-color: @highlight-button-pressed !important;
+        border-color: @highlight-button-pressed-ie;
+        border-color: @highlight-button-pressed;
+        color: @text-normal-pressed-ie;
+        color: @text-normal-pressed;
+    }
+
+    &[disabled],
+    &.disabled {
+        opacity: @component-disabled-opacity;
+    }
+}
+
+.btn-text-menu-default {
+    width: 100%;
+    height: 22px;
+    background: @background-normal-ie;
+    background: @background-normal;
+    border: @scaled-one-px-value-ie solid @border-regular-control-ie;
+    border: @scaled-one-px-value solid @border-regular-control;
+    .border-radius(@border-radius-small);
+
+    button {
+        width: 100%;
+    }
+
+    .caret {
+        position: absolute;
+        right: 5px;
+        margin-top: 5px;
+    }
+
+    &:hover:not(.disabled),
+    .over:not(.disabled) {
+        background-color: @highlight-button-hover-ie !important;
+        background-color: @highlight-button-hover !important;
+    }
+
+    &:active:not(.disabled),
+    &.active:not(.disabled) {
+        background-color: @highlight-button-pressed-ie !important;
+        background-color: @highlight-button-pressed !important;
+        color: @text-normal-pressed-ie;
+        color: @text-normal-pressed;
+    }
+
+    &[disabled],
+    &.disabled {
+        opacity: @component-disabled-opacity;
+    }
+}
+
+.btn-text-split-default {
+    width: 75px;
+    height: 22px;
+    background: @background-normal-ie;
+    background: @background-normal;
+    border: @scaled-one-px-value-ie solid @border-regular-control-ie;
+    border: @scaled-one-px-value solid @border-regular-control;
+    .border-radius(@border-radius-small);
+
+    &.dropdown-toggle {
+        width: 13px;
+    }
+
+    &:not(.dropdown-toggle) {
+        border-right: none;
+    }
+
+    &:hover:not(.disabled),
+    .over:not(.disabled) {
+        background-color: @highlight-button-hover-ie !important;
+        background-color: @highlight-button-hover !important;
+    }
+
+    &:active:not(.disabled),
+    &.active:not(.disabled) {
+        background-color: @highlight-button-pressed-ie !important;
+        background-color: @highlight-button-pressed !important;
+        border-color: @highlight-button-pressed-ie;
+        border-color: @highlight-button-pressed;
+        color: @text-normal-pressed-ie;
+        color: @text-normal-pressed;
+    }
+
+    &[disabled],
+    &.disabled {
+        opacity: @component-disabled-opacity;
+    }
+}
+
+.btn-icon-default {
+    width: 45px;
+    height: 22px;
+    background: @background-normal-ie;
+    background: @background-normal;
+    border: @scaled-one-px-value-ie solid @border-regular-control-ie;
+    border: @scaled-one-px-value solid @border-regular-control;
+    .border-radius(@border-radius-small);
+
+    .icon {
+        width: 28px;
+        padding: 0;
+        margin: 0;
+        position: relative;
+        display: inline-block;
+        background-repeat: no-repeat;
+    }
+
+    &.dropdown-toggle:first-child .inner-box-caret {
+      padding: 0 1px 0 2px;
+    }
+
+    &:hover:not(.disabled),
+    .over:not(.disabled) {
+        background-color: @highlight-button-hover-ie !important;
+        background-color: @highlight-button-hover !important;
+    }
+
+    &:active:not(.disabled),
+    &.active:not(.disabled) {
+        background-color: @highlight-button-pressed-ie !important;
+        background-color: @highlight-button-pressed !important;
+    }
+
+    &[disabled],
+    &.disabled {
+        opacity: @component-disabled-opacity;
+    }
+}
+
+.btn-large-dataview {
+    display: inline-block;
+    width: 72px;
+    height: 58px;
+    padding: 2px;
+    margin:0;
+    box-shadow: none;
+    background-color: @background-normal-ie;
+    background-color: @background-normal;
+    border: @scaled-one-px-value-ie solid @border-regular-control-ie;
+    border: @scaled-one-px-value solid @border-regular-control;
+    .border-radius(@border-radius-small);
+
+    &.template-table {
+        width: 92px;
+    }
+
+    .icon-template-slicer.icon {
+        min-width: 36px;
+        height: 55px;
+        line-height: 53px;
+        border: none;
+    }
+
+    .icon {
+        display: inline-block;
+        .btn.btnsize(52px);
+        padding: 0;
+        margin-right: 3px;
+        background-color: transparent;
+        background-repeat: no-repeat;
+        border: @scaled-one-px-value-ie solid @border-regular-control-ie;
+        border: @scaled-one-px-value solid @border-regular-control;
+        position: relative;
+    }
+
+    &.sheet-template-table {
+        width: 83px;
+        height: 54px;
+
+        .icon {
+            border: none;
+            .box-shadow(0 0 0 @scaled-one-px-value-ie @border-regular-control-ie);
+            .box-shadow(0 0 0 @scaled-one-px-value @border-regular-control);
+        }
+    }
+
+    svg.icon {
+        vertical-align: middle;
+        width: 52px;
+        padding: 5px;
+
+        fill: @icon-normal;
+
+        .btn& {
+            opacity: 1;
+        }
+    }
+
+    &:hover,
+    .over,
+    &:active,
+    &.active {
+        background-color: @background-normal-ie !important;
+        background-color: @background-normal !important;
+
+        &:not(:disabled) {
+            svg.icon {
+                opacity: inherit;
+            }
+        }
+    }
+
+    &:active:not(.disabled),
+    &.active:not(.disabled) {
+        .caret {
+            background-position: @arrow-small-offset-x @arrow-small-offset-y;
+            border-color: @icon-normal;
+        }
+    }
+
+    &[disabled],
+    &.disabled {
+        opacity: @component-disabled-opacity;
+    }
+
+    &:not(:disabled) {
+        .icon {
+            opacity: 1;
+        }
+
+        &:hover {
+            .icon {
+                .icon();
+            }
+        }
+    }
+}
+
+.cnt-lang {
+    color: @text-normal-ie;
+    color: @text-normal;
+    height: 20px;
+    line-height: 18px;
+    border: 0;
+    .border-radius(1px);
+    vertical-align: middle;
+
+    .dropdown-toggle {
+        margin: 0 6px 0 4px;
+    }
+
+    &:hover:not(.disabled) {
+        background-color: @highlight-button-hover-ie;
+        background-color: @highlight-button-hover;
+    }
+
+    &[disabled], &.disabled {
+        opacity: @component-disabled-opacity;
+    }
+
+    .caret {
+        width: 4px;
+        height: 4px;
+        border: solid 1px @icon-normal-ie;
+        border: solid 1px @icon-normal;
+        border-bottom: none;
+        border-right: none;
+        background-image: none;
+
+        transition: transform 0.2s ease;
+        transform: rotate(-135deg) translate(1px,1px);
+    }
+
+    &.open:not(.disabled){
+        &, .status-label {
+            color: @text-normal-pressed-ie;
+            color: @text-normal-pressed;
+        }
+
+        background-color: @highlight-button-pressed-ie;
+        background-color: @highlight-button-pressed;
+
+        .caret {
+            transform: rotate(45deg);
+            border-color: @icon-normal-pressed-ie;
+            border-color: @icon-normal-pressed;
+        }
+    }
+}
+// Dialog buttons
+// ------------------------
+
+.dlg-btn {
+    font-weight: bold;
+    width: 86px;
+    color: @text-normal-ie;
+    color: @text-normal;
+    background-color: @background-normal-ie;
+    background-color: @background-normal;
+    border: @scaled-one-px-value-ie solid @border-regular-control-ie;
+    border: @scaled-one-px-value solid @border-regular-control;
+
+    &:hover:not(.disabled),
+    &.hover:not(.disabled) {
+        background-color: @highlight-button-hover-ie;
+        background-color: @highlight-button-hover;
+    }
+
+    &.primary {
+        color: @text-inverse-ie;
+        color: @text-inverse;
+        background-color: @background-primary-dialog-button-ie;
+        background-color: @background-primary-dialog-button;
+        border: 0 none;
+
+        &:hover:not(.disabled),
+        &.hover:not(.disabled) {
+            background-color: @highlight-primary-dialog-button-hover-ie;
+            background-color: @highlight-primary-dialog-button-hover;
+        }
+    }
+
+    &[disabled] {
+        opacity: @component-disabled-opacity;
+    }
+
+    &.custom {
+        width: auto;
+        min-width: 86px;
+    }
+}
+
+@class100: zoom-int;
+@class150: zoom-grit;
+svg.icon {
+    .@{class150} {
+        display: none;
+    }
+
+    //@media
+    //only screen and (-webkit-min-device-pixel-ratio: 1.5),
+    //only screen and (-webkit-min-device-pixel-ratio: 2.5),
+    //only screen and (min-resolution: 1.5dppx),
+    //only screen and (min-resolution: 2.5dppx),
+    //only screen and (min-resolution: 144dpi),
+    //only screen and (min-resolution: 240dpi) {
+    //    .@{class100} {
+    //        display: none;
+    //    }
+    //
+    //    .@{class150} {
+    //        display: block;
+    //    }
+    //}
+
+    @media
+    only screen and (-webkit-min-device-pixel-ratio: 2) and (-webkit-max-device-pixel-ratio: 2.4),
+    only screen and (-webkit-min-device-pixel-ratio: 4),
+    only screen and (min-resolution: 2dppx) and (max-resolution: 2.4dppx),
+    only screen and (min-resolution: 4dppx),
+    only screen and (min-resolution: 192dpi) and (max-resolution: 239dpi),
+    only screen and (min-resolution: 384dpi) {
+        .@{class100} {
+            display: block;
+        }
+
+        .@{class150} {
+            display: none;
+        }
+    }
+}
\ No newline at end of file