From d80ca330c10737a641e26aba5f95465e0de2b9cd Mon Sep 17 00:00:00 2001
From: OVSharova <olga.sharova@onlyoffice.com>
Date: Mon, 6 Sep 2021 11:55:05 +0300
Subject: [PATCH] changes SE

---
 test/spreadsheeteditor/main/index.html        |  21 +-
 .../main/js/ApplicationController.js          |   9 +-
 .../main/js/ApplicationView.js                |  41 +-
 .../main/js/CellEditorController.js           | 338 ++++++++
 .../main/js/CellEditorView.js                 | 106 +++
 .../main/resources/less/celleditor.less       | 159 ++++
 .../main/template/CellEditor.template         |  11 +
 .../common/main/lib/component/BaseView.js     | 117 +++
 .../common/main/lib/component/Button.js       | 774 +++++++++++++++++
 .../main/lib/component/ToggleManager.js       | 115 +++
 .../main/lib/core/NotificationCenter.js       |  78 ++
 .../common/main/lib/core/application.js       | 565 +++++++++++++
 .../common/main/lib/core/keymaster.js         | 346 ++++++++
 .../resources/less/colors-table-ie-fix.less   |  70 ++
 .../main/resources/less/colors-table.less     | 239 ++++++
 .../common/main/resources/less/variables.less | 799 ++++++++++++++++++
 16 files changed, 3784 insertions(+), 4 deletions(-)
 create mode 100644 test/spreadsheeteditor/main/js/CellEditorController.js
 create mode 100644 test/spreadsheeteditor/main/js/CellEditorView.js
 create mode 100644 test/spreadsheeteditor/main/resources/less/celleditor.less
 create mode 100644 test/spreadsheeteditor/main/template/CellEditor.template
 create mode 100644 test/unit-tests/common/main/lib/component/BaseView.js
 create mode 100644 test/unit-tests/common/main/lib/component/Button.js
 create mode 100644 test/unit-tests/common/main/lib/component/ToggleManager.js
 create mode 100644 test/unit-tests/common/main/lib/core/NotificationCenter.js
 create mode 100644 test/unit-tests/common/main/lib/core/application.js
 create mode 100644 test/unit-tests/common/main/lib/core/keymaster.js
 create mode 100644 test/unit-tests/common/main/resources/less/colors-table-ie-fix.less
 create mode 100644 test/unit-tests/common/main/resources/less/colors-table.less
 create mode 100644 test/unit-tests/common/main/resources/less/variables.less

diff --git a/test/spreadsheeteditor/main/index.html b/test/spreadsheeteditor/main/index.html
index 2227b02a98..661c560f06 100644
--- a/test/spreadsheeteditor/main/index.html
+++ b/test/spreadsheeteditor/main/index.html
@@ -10,6 +10,7 @@
     <!-- 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" />
     <!-- debug end -->
 
     <!-- splash -->
@@ -204,6 +205,17 @@
 </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>
     <div id="editor_sdk" class="sdk-view" style="overflow: hidden;" tabindex="-1"></div>
     <ul id="worksheets" class="worksheet-list"></ul>
 </div>
@@ -257,6 +269,7 @@
 <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 src="../../../vendor/requirejs/require.js"></script>
 <script>
     require.config({
@@ -278,8 +291,14 @@
 <script type="text/javascript" src="../../unit-tests/common/main/lib/util/LocalStorage.js"></script>
 <script type="text/javascript" src="../../unit-tests/common/main/lib/util/utils.js"></script>
 <script type="text/javascript" src="../../unit-tests/common/main/lib/view/LoadMask.js"></script>
+
+<!--<script type="text/javascript" src="../../unit-tests/common/main/lib/component/BaseView.js"></script>
+<script type="text/javascript" src="../../unit-tests/common/main/lib/core/application.js"></script>-->
 <!--<script type="text/javascript" src="../../unit-tests/common/main/lib/view/modals.js"></script>
-<script type="text/javascript" src="../../unit-tests/common/main/lib/controller/modals.js"></script>-->
+<script type="text/javascript" src="../../unit-tests/common/main/lib/controller/modals.js"></script>
+<script type="text/javascript" src="js/CellEditorView.js"></script>
+<script type="text/javascript" src="js/CellEditorController.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 1b85ab1623..e97d8dff3a 100644
--- a/test/spreadsheeteditor/main/js/ApplicationController.js
+++ b/test/spreadsheeteditor/main/js/ApplicationController.js
@@ -134,7 +134,7 @@ SSE.ApplicationController = new(function(){
                 api.asc_registerCallback('asc_onRunAutostartMacroses', onRunAutostartMacroses);
                 api.asc_setDocInfo(docInfo);
                 api.asc_getEditorPermissions(config.licenseUrl, config.customerId);
-                api.asc_enableKeyEvents(true);
+                api.asc_enableKeyEvents(false);
 
                // Common.Analytics.trackEvent('Load', 'Start');
             }
@@ -202,6 +202,7 @@ SSE.ApplicationController = new(function(){
         hidePreloader();
         onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
 
+
         if ( permissions.print === false)
             $('#idt-print').hide();
 
@@ -241,6 +242,8 @@ SSE.ApplicationController = new(function(){
         Common.Gateway.on('downloadas',         onDownloadAs);
         Common.Gateway.on('requestclose',       onRequestClose);
 
+
+
         SSE.ApplicationView.tools.get('#idt-fullscreen')
             .on('click', function(){
                 common.utils.openLink(embedConfig.fullscreenUrl);
@@ -379,7 +382,7 @@ SSE.ApplicationController = new(function(){
 
         onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
         
-        api.asc_setViewMode(true);
+        //api.asc_setViewMode(true);
         api.asc_LoadDocument();
     }
     
@@ -427,6 +430,8 @@ SSE.ApplicationController = new(function(){
             }
 
             me.loadMask && me.loadMask.hide();
+           /* if (type == Asc.c_oAscAsyncActionType.BlockInteraction && !( (id == Asc.c_oAscAsyncAction['LoadDocumentFonts'] || id == Asc.c_oAscAsyncAction['ApplyChanges']) && (this.dontCloseDummyComment || this.inTextareaControl || Common.Utils.ModalWindow.isVisible() || this.inFormControl) ))
+                this.onEditComplete(this.loadMask, {restorefocus:true});*/
         }
     }
 
diff --git a/test/spreadsheeteditor/main/js/ApplicationView.js b/test/spreadsheeteditor/main/js/ApplicationView.js
index f396aa6888..917609fa59 100644
--- a/test/spreadsheeteditor/main/js/ApplicationView.js
+++ b/test/spreadsheeteditor/main/js/ApplicationView.js
@@ -36,13 +36,39 @@ if (SSE === undefined) {
 
 SSE.ApplicationView = new(function(){
 
-    var $btnTools;
+    var $btnTools
+        ,$cellname
+        ,$btnexpand
+        ,$btnfunc
+        ,btnNamedRanges;
+
+
 
     // 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">' +
@@ -59,12 +85,25 @@ 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/js/CellEditorController.js b/test/spreadsheeteditor/main/js/CellEditorController.js
new file mode 100644
index 0000000000..d9481bd18b
--- /dev/null
+++ b/test/spreadsheeteditor/main/js/CellEditorController.js
@@ -0,0 +1,338 @@
+/*
+ *
+ * (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
+ *
+*/
+/**
+ *    CellEditor.js
+ *
+ *    CellEditor Controller
+ *
+ *    Created by Maxim Kadushkin on 08 April 2014
+ *    Copyright (c) 2018 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'test/unit-tests/common/main/lib/core/application'
+
+], function (Viewport) {
+    'use strict';
+
+    SSE.Controllers.CellEditor = Backbone.Controller.extend({
+        views: [
+            'CellEditorView'
+        ],
+
+        events: function() {
+            return {
+                'keyup input#ce-cell-name': _.bind(this.onCellName,this),
+                'keyup textarea#ce-cell-content': _.bind(this.onKeyupCellEditor,this),
+                'blur textarea#ce-cell-content': _.bind(this.onBlurCellEditor,this),
+                'click button#ce-btn-expand': _.bind(this.expandEditorField,this),
+                'click button#ce-func-label': _.bind(this.onInsertFunction, this)
+            };
+        },
+
+        initialize: function() {
+            this.addListeners({
+                'CellEditor': {},
+                'Viewport': {
+                    'layout:resizedrag': _.bind(this.onLayoutResize, this)
+                },
+                'Common.Views.Header': {
+                    'formulabar:hide': function (state) {
+                        this.editor.setVisible(!state);
+                        common.localStorage.setBool('sse-hidden-formula', state);
+                        Common.NotificationCenter.trigger('layout:changed', 'celleditor', state?'hidden':'showed');
+                    }.bind(this)
+                }
+            });
+        },
+
+        setApi: function(api) {
+            this.api = api;
+
+            this.api.isCEditorFocused = false;
+            this.api.asc_registerCallback('asc_onSelectionNameChanged', _.bind(this.onApiCellSelection, this));
+            this.api.asc_registerCallback('asc_onEditCell', _.bind(this.onApiEditCell, this));
+            this.api.asc_registerCallback('asc_onCoAuthoringDisconnect', _.bind(this.onApiDisconnect,this));
+            Common.NotificationCenter.on('api:disconnect', _.bind(this.onApiDisconnect, this));
+            Common.NotificationCenter.on('cells:range', _.bind(this.onCellsRange, this));
+            this.api.asc_registerCallback('asc_onLockDefNameManager', _.bind(this.onLockDefNameManager, this));
+            this.api.asc_registerCallback('asc_onInputKeyDown', _.bind(this.onInputKeyDown, this));
+
+            return this;
+        },
+
+        setMode: function(mode) {
+            this.mode = mode;
+
+            this.editor.$btnfunc[this.mode.isEdit?'removeClass':'addClass']('disabled');
+            this.editor.btnNamedRanges.setVisible(this.mode.isEdit && !this.mode.isEditDiagram && !this.mode.isEditMailMerge);
+
+            if ( this.mode.isEdit ) {
+                this.api.asc_registerCallback('asc_onSelectionChanged', _.bind(this.onApiSelectionChanged, this));
+            }
+        },
+
+        onInputKeyDown: function(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);
+            } 
+        },
+
+        onLaunch: function() {
+            this.editor = this.getView('CellEditor');
+            this.bindViewEvents(this.editor, this.events);
+
+            this.editor.$el.parent().find('.after').css({zIndex: '4'}); // for spreadsheets - bug 23127
+
+            var val = common.localStorage.getItem('sse-celleditor-height');
+            this.editor.keep_height = (val!==null && parseInt(val)>0) ? parseInt(val) : 74;
+            if (common.localStorage.getBool('sse-celleditor-expand')) {
+                this.editor.$el.height(this.editor.keep_height);
+                this.onLayoutResize(undefined, 'cell:edit');
+            }
+
+            this.editor.btnNamedRanges.menu.on('item:click', _.bind(this.onNamedRangesMenu, this))
+                                           .on('show:before', _.bind(this.onNameBeforeShow, this));
+            this.namedrange_locked = false;
+        },
+
+        onApiEditCell: function(state) {
+            if (this.viewmode) return; // signed file
+
+            if (state == Asc.c_oAscCellEditorState.editStart){
+                this.api.isCellEdited = true;
+                this.editor.cellNameDisabled(true);
+            } else if (state == Asc.c_oAscCellEditorState.editInCell) {
+                this.api.isCEditorFocused = 'clear';
+            } else if (state == Asc.c_oAscCellEditorState.editEnd) {
+                this.api.isCellEdited = false;
+                this.api.isCEditorFocused = false;
+                this.editor.cellNameDisabled(false);
+            }
+            this.editor.$btnfunc.toggleClass('disabled', state == Asc.c_oAscCellEditorState.editText);
+        },
+
+        onApiCellSelection: function(info) {
+            this.editor.updateCellInfo(info);
+        },
+
+        onApiSelectionChanged: function(info) {
+            if (this.viewmode) return; // signed file
+
+            var seltype = info.asc_getSelectionType(),
+                coauth_disable = (!this.mode.isEditMailMerge && !this.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;
+
+            this.editor.$btnfunc.toggleClass('disabled', is_image || is_mode_2 || coauth_disable);
+        },
+
+        onApiDisconnect: function() {
+            this.mode.isEdit = false;
+
+            var controller = this.getApplication().getController('FormulaDialog');
+            if (controller) {
+                controller.hideDialog();
+            }
+
+            if (!this.mode.isEdit) {
+                $('#ce-func-label', this.editor.el).addClass('disabled');
+                this.editor.btnNamedRanges.setVisible(false);
+            }
+        },
+
+        onCellsRange: function(status) {
+            this.editor.cellNameDisabled(status != Asc.c_oAscSelectionDialogType.None);
+            this.editor.$btnfunc.toggleClass('disabled', status != Asc.c_oAscSelectionDialogType.None);
+        },
+
+        onLayoutResize: function(o, r) {
+            if (r == 'cell:edit') {
+                if (Math.floor(this.editor.$el.height()) > 19) {
+                    if (!this.editor.$btnexpand.hasClass('btn-collapse')) {
+                        this.editor.$el.addClass('expanded');
+                        this.editor.$btnexpand['addClass']('btn-collapse');
+                    }
+
+                    o && common.localStorage.setItem('sse-celleditor-height', this.editor.$el.height());
+                    o && common.localStorage.setBool('sse-celleditor-expand', true);
+                } else {
+                    this.editor.$el.removeClass('expanded');
+                    this.editor.$btnexpand['removeClass']('btn-collapse');
+                    o && common.localStorage.setBool('sse-celleditor-expand', false);
+                }
+            }
+        },
+
+        onCellName: function(e) {
+            if (e.keyCode == Common.UI.Keys.RETURN){
+                var name = this.editor.$cellname.val();
+                if (name && name.length) {
+                    this.api.asc_findCell(name);
+                }
+
+                Common.NotificationCenter.trigger('edit:complete', this.editor);
+            }
+        },
+
+        onBlurCellEditor: function() {
+            if (this.api.isCEditorFocused == 'clear')
+                this.api.isCEditorFocused = undefined;
+            else if (this.api.isCellEdited)
+                this.api.isCEditorFocused = true;
+//            if (Common.Utils.isIE && !$('#menu-formula-selection').hasClass('open')) {// for formula menu
+//                this.getApplication().getController('DocumentHolder').documentHolder.focus();
+//            }
+        },
+
+        onKeyupCellEditor: function(e) {
+            if(e.keyCode == Common.UI.Keys.RETURN && !e.altKey){
+                this.api.isCEditorFocused = 'clear';
+            }
+        },
+
+        expandEditorField: function() {
+            if ( Math.floor(this.editor.$el.height()) > 19) {
+                this.editor.keep_height = this.editor.$el.height();
+                this.editor.$el.height(19);
+                this.editor.$el.removeClass('expanded');
+                this.editor.$btnexpand['removeClass']('btn-collapse');
+                common.localStorage.setBool('sse-celleditor-expand', false);
+            } else {
+                this.editor.$el.height(this.editor.keep_height);
+                this.editor.$el.addClass('expanded');
+                this.editor.$btnexpand['addClass']('btn-collapse');
+                common.localStorage.setBool('sse-celleditor-expand', true);
+            }
+            
+            Common.NotificationCenter.trigger('layout:changed', 'celleditor');
+            Common.NotificationCenter.trigger('edit:complete', this.editor, {restorefocus:true});
+        },
+
+        onInsertFunction: function() {
+            if (this.viewmode) return; // signed file
+
+            if ( this.mode.isEdit && !this.editor.$btnfunc['hasClass']('disabled')) {
+                var controller = this.getApplication().getController('FormulaDialog');
+                if (controller) {
+                    $('#ce-func-label', this.editor.el).blur();
+                    controller.showDialog();
+                }
+            }
+        },
+
+        onNamedRangesMenu: function(menu, item) {
+            var me = this;
+            if (item.options.value=='manager') {
+                var wc = this.api.asc_getWorksheetsCount(),
+                        i = -1,
+                        items = [], sheetNames = [];
+                while (++i < wc) {
+                    if (!this.api.asc_isWorksheetHidden(i)) {
+                        sheetNames[i] = this.api.asc_getWorksheetName(i);
+                        items.push({displayValue: sheetNames[i], value: i});
+                    }
+                }
+
+                (new SSE.Views.NameManagerDlg({
+                    api: this.api,
+                    handler: function(result) {
+                        Common.NotificationCenter.trigger('edit:complete', me.editor);
+                    },
+                    locked: this.namedrange_locked,
+                    sheets: items,
+                    sheetNames: sheetNames,
+                    ranges: this.api.asc_getDefinedNames(Asc.c_oAscGetDefinedNamesList.All),
+                    props : this.api.asc_getDefaultDefinedName(),
+                    sort  : this.rangeListSort
+                })).on('close', function(win){
+                    me.rangeListSort = win.getSettings();
+                }).show();
+            } else {
+                this.api.asc_findCell(item.caption);
+                Common.NotificationCenter.trigger('edit:complete', this.editor);
+            }
+        },
+
+        onNameBeforeShow: function() {
+            var names = this.api.asc_getDefinedNames(Asc.c_oAscGetDefinedNamesList.WorksheetWorkbook, true),
+                rangesMenu = this.editor.btnNamedRanges.menu,
+                prev_name='';
+
+            rangesMenu.removeItems(2, rangesMenu.items.length-1);
+            names.sort(function(item1, item2) {
+                var n1 = item1.asc_getName(true).toLowerCase(),
+                    n2 = item2.asc_getName(true).toLowerCase();
+                if (n1==n2) return 0;
+                return (n1<n2) ? -1 : 1;
+            });
+            _.each(names, function(field, index) {
+                var name = field.asc_getName(true);
+                if (prev_name !== name) {
+                    rangesMenu.addItem(new Common.UI.MenuItem({
+                        caption : name
+                    }));
+                }
+                prev_name = name;
+            });
+            this.editor.btnNamedRanges.menu.items[0].setDisabled(!!this.api.asc_isProtectedSheet());
+            this.editor.btnNamedRanges.menu.items[1].setVisible(rangesMenu.items.length>2);
+        },
+
+        onLockDefNameManager: function(state) {
+            this.namedrange_locked = (state == Asc.c_oAscDefinedNameReason.LockDefNameManager);
+        },
+
+        SetDisabled: function(disabled) {
+            this.editor.$btnfunc[!disabled && this.mode.isEdit ?'removeClass':'addClass']('disabled');
+            this.editor.btnNamedRanges.setVisible(!disabled && this.mode.isEdit && !this.mode.isEditDiagram && !this.mode.isEditMailMerge);
+        },
+
+        setPreviewMode: function(mode) {
+            if (this.viewmode === mode) return;
+            this.viewmode = mode;
+            this.editor.$btnfunc[!mode && this.mode.isEdit?'removeClass':'addClass']('disabled');
+            this.editor.cellNameDisabled(mode && !(this.mode.isEdit && !this.mode.isEditDiagram && !this.mode.isEditMailMerge));
+        }
+    });
+});
\ No newline at end of file
diff --git a/test/spreadsheeteditor/main/js/CellEditorView.js b/test/spreadsheeteditor/main/js/CellEditorView.js
new file mode 100644
index 0000000000..25a908a19f
--- /dev/null
+++ b/test/spreadsheeteditor/main/js/CellEditorView.js
@@ -0,0 +1,106 @@
+/*
+ *
+ * (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
+ *
+*/
+/**
+ *    CellEdit.js
+ *
+ *    Created by Maxim Kadushkin on 04 April 2014
+ *    Copyright (c) 2018 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'text!spreadsheeteditor/main/template/CellEditor.template',
+    'test/unit-tests/common/main/lib/component/BaseView'
+], function (template) {
+    'use strict';
+
+    SSE.Views.CellEditor = Common.UI.BaseView.extend(_.extend({
+        template: _.template(template),
+
+        initialize: function (options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+        },
+
+        render: function () {
+            $(this.el).html(this.template());
+
+            this.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);
+
+            this.$cellname = $('#ce-cell-name', this.el);
+            this.$btnexpand = $('#ce-btn-expand', this.el);
+            this.$btnfunc = $('#ce-func-label', this.el);
+
+            var me = this;
+            this.$cellname.on('focus', function(e){
+                var txt = me.$cellname[0];
+                txt.selectionStart = 0;
+                txt.selectionEnd = txt.value.length;
+                txt.scrollLeft = txt.scrollWidth;
+            });
+
+            this.$btnfunc.addClass('disabled');
+            this.$btnfunc.tooltip({
+                title       : this.tipFormula,
+                placement   : 'cursor'
+            });
+
+            return this;
+        },
+
+        updateCellInfo: function(info) {
+            if (info) {
+                this.$cellname.val(typeof(info)=='string' ? info : info.asc_getName());
+            }
+        },
+
+        cellNameDisabled: function(disabled){
+            (disabled) ? this.$cellname.attr('disabled', 'disabled') : this.$cellname.removeAttr('disabled');
+            this.btnNamedRanges.setDisabled(disabled);
+        },
+
+        tipFormula: 'Insert Function',
+        textManager: 'Manager'
+    }, SSE.Views.CellEditor || {}));
+});
diff --git a/test/spreadsheeteditor/main/resources/less/celleditor.less b/test/spreadsheeteditor/main/resources/less/celleditor.less
new file mode 100644
index 0000000000..75dbb5e845
--- /dev/null
+++ b/test/spreadsheeteditor/main/resources/less/celleditor.less
@@ -0,0 +1,159 @@
+// Common styles
+@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";
+#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;
+    border-left: solid @scaled-one-px-value @border-toolbar;
+    min-height: 20px;
+    background-color: @background-toolbar-ie;
+    background-color: @background-toolbar;
+
+    .ce-group-name {
+        float: left;
+        height: 20px;
+        //border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
+        //border-bottom: @scaled-one-px-value solid @border-toolbar;
+        background-color: @background-toolbar-ie;
+        background-color: @background-toolbar;
+
+        #ce-cell-name {
+            width: 100px;
+            height: 19px;
+            height: calc(19px + (1px - 1px/var(--pixel-ratio-factor,1)));
+            padding: 0px 19px 0 4px;
+            vertical-align: top;
+            display: inline-block;
+            border: 0 none;
+            border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
+            border-right: @scaled-one-px-value solid @border-toolbar;
+            transition: none;
+            -webkit-transition: none;
+            box-shadow: 0 @scaled-one-px-value-ie 0 0 @border-toolbar-ie;
+            box-shadow: 0 @scaled-one-px-value 0 0 @border-toolbar;
+
+            &[disabled] {
+                color: @border-preview-select-ie;
+                color: @border-preview-select;
+                opacity: 0.5;
+            }
+        }
+
+        #ce-cell-name-menu {
+            display: inline-block;
+            position: absolute;
+            left: 80px;
+            background-color: @background-toolbar-ie;
+            background-color: @background-toolbar;
+
+            button {
+                background-color: @background-normal-ie;
+                background-color: @background-normal;
+                height: 19px;
+
+                &.disabled {
+                    opacity: 0.5;
+                }
+
+                &:active:not(.disabled),
+                &.active:not(.disabled){
+                    .caret {
+                        border-color: @icon-normal;
+                    }
+                }
+            }
+
+            .dropdown-menu a {
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+
+        #ce-func-label {
+            height: 20px;
+            margin-left: -3px;
+            .border-radius(0);
+
+            &.disabled {
+                opacity: 0.4;
+            }
+        }
+    }
+
+    &:not(.expanded) {
+        #ce-func-label {
+            border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
+            border-bottom: @scaled-one-px-value solid @border-toolbar;
+        }
+    }
+
+    .ce-group-expand {
+        float: right;
+        //height: 20px;
+        height: 100%;
+        background-color: @background-normal-ie;
+        background-color: @background-normal;
+    }
+
+    .ce-group-content {
+        margin: 0 16px 0 120px;
+        height: 100%;
+        border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
+        border-left: @scaled-one-px-value solid @border-toolbar;
+
+        #ce-cell-content {
+            height: 100%;
+            resize: none;
+            min-height: 19px;
+            border: 0 none;
+            font-size: 12px;
+            line-height: 18px;
+            padding-bottom: 0;
+
+            &[disabled] {
+                color: @border-preview-select-ie;
+                color: @border-preview-select;
+                opacity: 0.5;
+            }
+        }
+    }
+
+    #ce-cell-name, #ce-cell-content {
+        border-radius: 0;
+    }
+
+    &+.layout-resizer {
+        border-top: 0 none;
+        border-bottom: 0 none;
+
+        &.move {
+            border-top: @scaled-one-px-value-ie solid @border-toolbar-ie;
+            border-top: @scaled-one-px-value solid @border-toolbar;
+            border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
+            border-bottom: @scaled-one-px-value solid @border-toolbar;
+            opacity: 0.4;
+        }
+    }
+}
+
+#ce-btn-expand {
+    width: 16px;
+    height: 18px;
+    .border-radius(0);
+    background: transparent;
+    padding: 0 2px 0;
+
+    .caret {
+        transition: transform .2s;
+        border-color: @icon-normal;
+    }
+
+    &.btn-collapse {
+        .caret {
+            transform: rotate(45deg);
+        }
+    }
+}
diff --git a/test/spreadsheeteditor/main/template/CellEditor.template b/test/spreadsheeteditor/main/template/CellEditor.template
new file mode 100644
index 0000000000..1c1abe44c7
--- /dev/null
+++ b/test/spreadsheeteditor/main/template/CellEditor.template
@@ -0,0 +1,11 @@
+<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/BaseView.js b/test/unit-tests/common/main/lib/component/BaseView.js
new file mode 100644
index 0000000000..bab307eab4
--- /dev/null
+++ b/test/unit-tests/common/main/lib/component/BaseView.js
@@ -0,0 +1,117 @@
+/*
+ *
+ * (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
+ *
+*/
+/**
+ *  BaseView.js
+ *
+ *  Created by Alexander Yuzhin on 1/17/14
+ *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+if (Common === undefined)
+    var Common = {};
+
+define([
+    'backbone'
+], function (Backbone) {
+    'use strict';
+
+    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
+        },
+
+        BaseView: Backbone.View.extend({
+            isSuspendEvents: false,
+
+            initialize : function(options) {
+                this.options = this.options ? _({}).extend(this.options, options) : options;
+            },
+
+            setVisible: function(visible) {
+                return this[visible ? 'show': 'hide']();
+            },
+
+            isVisible: function() {
+                return $(this.el).is(":visible");
+            },
+
+            suspendEvents: function() {
+                this.isSuspendEvents = true;
+            },
+
+            resumeEvents: function() {
+                this.isSuspendEvents = false;
+            }
+        }),
+
+        getId: function(prefix) {
+            return _.uniqueId(prefix || "asc-gen");
+        }
+    });
+});
\ No newline at end of file
diff --git a/test/unit-tests/common/main/lib/component/Button.js b/test/unit-tests/common/main/lib/component/Button.js
new file mode 100644
index 0000000000..941a930b75
--- /dev/null
+++ b/test/unit-tests/common/main/lib/component/Button.js
@@ -0,0 +1,774 @@
+/*
+ *
+ * (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
+ *
+*/
+/**
+ *  Button.js
+ *
+ *  Created by Alexander Yuzhin on 1/20/14
+ *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+/**
+ *  Using template
+ *
+ *  A simple button with text:
+ *  <button type="button" class="btn" id="id-button">Caption</button>
+ *
+ *  A simple button with icon:
+ *  <button type="button" class="btn" id="id-button"><span class="icon">&nbsp;</span></button>
+ *
+ *  A button with menu:
+ *  <div class="btn-group" id="id-button">
+ *      <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
+ *          <span class="icon">&nbsp;</span>
+ *          <span class="caret"></span>
+ *      </button>
+ *      <ul class="dropdown-menu" role="menu">
+ *      </ul>
+ *  </div>
+ *
+ *  A split button:
+ *  <div class="btn-group split" id="id-button">
+ *      <button type="button" class="btn"><span class="icon">&nbsp;</span></button>
+ *      <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
+ *          <span class="caret"></span>
+ *          <span class="sr-only"></span>
+ *      </button>
+ *      <ul class="dropdown-menu" role="menu">
+ *      </ul>
+ *  </div>
+ *
+ *   A useful classes of button size
+ *
+ *  - `'small'`
+ *  - `'normal'`
+ *  - `'large'`
+ *  - `'huge'`
+ *
+ *  A useful classes of button type
+ *
+ *  - `'default'`
+ *  - `'active'`
+ *
+ *
+ *  Buttons can also be toggled. To enable this, you simple set the {@link #enableToggle} property to `true`.
+ *
+ *  Example usage:
+ *      new Common.UI.Button({
+ *          el: $('#id'),
+ *          enableToggle: true
+ *      });
+ *
+ *
+ *  @property {Boolean} disabled
+ *  True if this button is disabled. Read-only.
+ *
+ *  disabled: false,
+ *
+ *
+ *  @property {Boolean} pressed
+ *  True if this button is pressed (only if enableToggle = true). Read-only.
+ *
+ *  pressed: false,
+ *
+ *
+ *  @cfg {Boolean} [allowDepress=true]
+ *  False to not allow a pressed Button to be depressed. Only valid when {@link #enableToggle} is true.
+ *
+ *  @cfg {String/Object} hint
+ *  The tooltip for the button - can be a string to be used as bootstrap tooltip
+ *
+ */
+
+if (Common === undefined)
+    var Common = {};
+
+define([
+    'unit-tests/common/main/lib/component/BaseView',
+    'unit-tests/common/main/lib/component/ToggleManager'
+], function () {
+    'use strict';
+
+    window.createButtonSet = function() {
+        function ButtonsArray(args) {};
+        ButtonsArray.prototype = new Array;
+        ButtonsArray.prototype.constructor = ButtonsArray;
+
+        var _disabled = false;
+
+        ButtonsArray.prototype.add = function(button) {
+            button.setDisabled(_disabled);
+            this.push(button);
+        };
+
+        ButtonsArray.prototype.setDisabled = function(disable) {
+            // if ( _disabled != disable ) //bug when disable buttons outside the group
+            {
+                _disabled = disable;
+
+                this.forEach( function(button) {
+                    button.setDisabled(disable);
+                });
+            }
+        };
+
+        ButtonsArray.prototype.toggle = function(state, suppress) {
+            this.forEach(function(button) {
+                button.toggle(state, suppress);
+            });
+        };
+
+        ButtonsArray.prototype.pressed = function() {
+            return this.some(function(button) {
+                return button.pressed;
+            });
+        };
+
+        ButtonsArray.prototype.contains = function(id) {
+            return this.some(function(button) {
+                return button.id == id;
+            });
+        };
+
+        ButtonsArray.prototype.concat = function () {
+            var args = Array.prototype.slice.call(arguments);
+            var result = Array.prototype.slice.call(this);
+
+            args.forEach(function(sub){
+                if (sub instanceof Array )
+                    Array.prototype.push.apply(result, sub);
+                else if (sub)
+                    result.push(sub);
+            });
+
+            return result;
+        };
+
+        var _out_array = Object.create(ButtonsArray.prototype);
+        for ( var i in arguments ) {
+            _out_array.add(arguments[i]);
+        }
+
+        return _out_array;
+    };
+
+    var templateBtnIcon =
+            '<% if ( iconImg ) { %>' +
+                '<img src="<%= iconImg %>">' +
+            '<% } else { %>' +
+                '<% if (/svgicon/.test(iconCls)) {' +
+                    'print(\'<svg class=\"icon\"><use class=\"zoom-int\" xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'\"></use>' +
+                                                    '<use class=\"zoom-grit\" xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'-150\"></use></svg>\');' +
+            '} else ' +
+                    'print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); %>' +
+            '<% } %>';
+
+    var templateHugeCaption =
+            '<button type="button" class="btn <%= cls %>" id="<%= id %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>" <% if (dataHintTitle) { %> data-hint-title="<%= dataHintTitle %>" <% } %>> ' +
+                '<div class="inner-box-icon">' +
+                    templateBtnIcon +
+                '</div>' +
+                '<div class="inner-box-caption">' +
+                    '<span class="caption"><%= caption %></span>' +
+                '</div>' +
+            '</button>';
+
+    var templateHugeMenuCaption =
+        '<div class="btn-group icon-top" id="<%= id %>" style="<%= style %>">' +
+            '<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>" <% if (dataHintTitle) { %> data-hint-title="<%= dataHintTitle %>" <% } %>>' +
+                '<div class="inner-box-icon">' +
+                    templateBtnIcon +
+                '</div>' +
+                '<div class="inner-box-caption">' +
+                    '<span class="caption"><%= caption %></span>' +
+                    '<i class="caret"></i>' +
+                '</div>' +
+            '</button>' +
+        '</div>';
+
+    var templateHugeSplitCaption =
+        '<div class="btn-group x-huge split icon-top" id="<%= id %>" style="<%= style %>">' +
+            '<button type="button" class="btn <%= cls %> inner-box-icon">' +
+                '<span class="btn-fixflex-hcenter">' +
+                    templateBtnIcon +
+                '</span>' +
+            '</button>' +
+            '<button type="button" class="btn <%= cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>" <% if (dataHintTitle) { %> data-hint-title="<%= dataHintTitle %>" <% } %>>' +
+                '<span class="btn-fixflex-vcenter">' +
+                    '<span class="caption"><%= caption %></span>' +
+                    '<i class="caret"></i>' +
+                '</span>' +
+            '</button>' +
+        '</div>';
+
+    Common.UI.Button = Common.UI.BaseView.extend({
+        options : {
+            id              : null,
+            hint            : false,
+            enableToggle    : false,
+            allowDepress    : true,
+            toggleGroup     : null,
+            cls             : '',
+            iconCls         : '',
+            caption         : '',
+            menu            : null,
+            disabled        : false,
+            pressed         : false,
+            split           : false,
+            visible         : true,
+            dataHint        : '',
+            dataHintDirection: '',
+            dataHintOffset: '0, 0'
+        },
+
+        template: _.template([
+            '<% var applyicon = function() { %>',
+                '<% if (iconImg) { print(\'<img src=\"\' + iconImg + \'\">\'); } else { %>',
+                // '<% if (iconCls != "") { print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); }} %>',
+                '<% if (iconCls != "") { ' +
+                    ' if (/svgicon/.test(iconCls)) {' +
+                        'print(\'<svg class=\"icon\"><use class=\"zoom-int\" xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'\"></use>' +
+                            '<use class=\"zoom-grit\" xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'-150\"></use></svg>\');' +
+                    '} else ' +
+                        'print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); ' +
+                '}} %>',
+            '<% } %>',
+            '<% if ( !menu ) { %>',
+                '<button type="button" class="btn <%= cls %>" id="<%= id %>" style="<%= style %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>" <% if (dataHintTitle) { %> data-hint-title="<%= dataHintTitle %>" <% } %>>',
+                    '<% applyicon() %>',
+                    '<span class="caption"><%= caption %></span>',
+                '</button>',
+            '<% } else if (split == false) {%>',
+                '<div class="btn-group" id="<%= id %>" style="<%= style %>">',
+                    '<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>" <% if (dataHintTitle) { %> data-hint-title="<%= dataHintTitle %>" <% } %>>',
+                        '<% applyicon() %>',
+                        '<span class="caption"><%= caption %></span>',
+                        '<span class="inner-box-caret">' +
+                            '<i class="caret"></i>' +
+                        '</span>',
+                    '</button>',
+                '</div>',
+            '<% } else { %>',
+                '<div class="btn-group split" id="<%= id %>" style="<%= style %>">',
+                    '<button type="button" class="btn <%= cls %>">',
+                        '<% applyicon() %>',
+                        '<span class="caption"><%= caption %></span>',
+                    '</button>',
+                    '<button type="button" class="btn <%= cls %> dropdown-toggle" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>" <% if (dataHintTitle) { %> data-hint-title="<%= dataHintTitle %>" <% } %>>',
+                        '<i class="caret"></i>',
+                        '<span class="sr-only"></span>',
+                    '</button>',
+                '</div>',
+            '<% } %>'
+        ].join('')),
+
+        initialize : function(options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+
+            var me = this;
+
+            me.id           = me.options.id || Common.UI.getId();
+            me.hint         = me.options.hint;
+            me.enableToggle = me.options.enableToggle;
+            me.allowDepress = me.options.allowDepress;
+            me.cls          = me.options.cls;
+            me.iconCls      = me.options.iconCls;
+            me.menu         = me.options.menu;
+            me.split        = me.options.split;
+            me.toggleGroup  = me.options.toggleGroup;
+            me.disabled     = me.options.disabled;
+            me.visible      = me.options.visible;
+            me.pressed      = me.options.pressed;
+            me.caption      = me.options.caption;
+            me.template     = me.options.template || me.template;
+            me.style        = me.options.style;
+            me.rendered     = false;
+
+            if (me.options.el) {
+                me.render();
+            } else if (me.options.parentEl)
+                me.render(me.options.parentEl);
+        },
+
+        render: function(parentEl) {
+            var me = this;
+
+            me.trigger('render:before', me);
+
+            me.cmpEl = me.$el || $(me.el);
+
+            if (parentEl) {
+                me.setElement(parentEl, false);
+
+                if (!me.rendered) {
+                    if ( /icon-top/.test(me.cls) && !!me.caption && /huge/.test(me.cls) ) {
+                        if ( me.split === true ) {
+                            !!me.cls && (me.cls = me.cls.replace(/\s?(?:x-huge|icon-top)/g, ''));
+                            this.template = _.template(templateHugeSplitCaption);
+                        } else
+                        if ( !!me.menu ) {
+                            this.template = _.template(templateHugeMenuCaption);
+                        } else {
+                            this.template = _.template(templateHugeCaption);
+                        }
+                    }
+
+                    me.cmpEl = $(this.template({
+                        id           : me.id,
+                        cls          : me.cls,
+                        iconCls      : me.iconCls,
+                        iconImg      : me.options.iconImg,
+                        menu         : me.menu,
+                        split        : me.split,
+                        disabled     : me.disabled,
+                        pressed      : me.pressed,
+                        caption      : me.caption,
+                        style        : me.style,
+                        dataHint     : me.options.dataHint,
+                        dataHintDirection: me.options.dataHintDirection,
+                        dataHintOffset: me.options.dataHintOffset,
+                        dataHintTitle: me.options.dataHintTitle
+                    }));
+
+                    if (me.menu && _.isObject(me.menu) && _.isFunction(me.menu.render))
+                        me.menu.render(me.cmpEl);
+
+                    parentEl.html(me.cmpEl);
+                    me.$icon = me.$el.find('.icon');
+                }
+            }
+
+            if (!me.rendered) {
+                var el = me.cmpEl,
+                    isGroup = el.hasClass('btn-group'),
+                    isSplit = el.hasClass('split');
+
+                if (me.options.hint) {
+                    var modalParents = me.cmpEl.closest('.asc-window');
+
+                    if (typeof me.options.hint == 'object' && me.options.hint.length>1 && $('button', el).length>0) {
+                        var btnEl = $('button', el);
+                        me.btnEl = $(btnEl[0]);
+                        me.btnMenuEl = $(btnEl[1]);
+                    } else {
+                        me.btnEl = me.cmpEl;
+                        me.btnEl.attr('data-toggle', 'tooltip');
+                    }
+                    me.btnEl.tooltip({
+                        title       : (typeof me.options.hint == 'string') ? me.options.hint : me.options.hint[0],
+                        placement   : me.options.hintAnchor||'cursor'
+                    });
+                    me.btnMenuEl && me.btnMenuEl.tooltip({
+                        title       : me.options.hint[1],
+                        placement   : me.options.hintAnchor||'cursor'
+                    });
+
+                    if (modalParents.length > 0) {
+                        me.btnEl.data('bs.tooltip').tip().css('z-index', parseInt(modalParents.css('z-index')) + 10);
+                        me.btnMenuEl && me.btnMenuEl.data('bs.tooltip').tip().css('z-index', parseInt(modalParents.css('z-index')) + 10);
+                        var onModalClose = function(dlg) {
+                            if (modalParents[0] !== dlg.$window[0]) return;
+                            var tip = me.btnEl.data('bs.tooltip');
+                            if (tip) {
+                                if (tip.dontShow===undefined)
+                                    tip.dontShow = true;
+
+                                tip.hide();
+                            }
+                            Common.NotificationCenter.off({'modal:close': onModalClose});
+                        };
+                        Common.NotificationCenter.on({'modal:close': onModalClose});
+                    }
+                }
+
+                if (_.isString(me.toggleGroup)) {
+                    me.enableToggle = true;
+                }
+
+                var buttonHandler = function(e) {
+                    if (!me.disabled && e.which == 1) {
+                        me.doToggle();
+                        if (me.options.hint) {
+                            var tip = me.btnEl.data('bs.tooltip');
+                            if (tip) {
+                                if (tip.dontShow===undefined)
+                                    tip.dontShow = true;
+
+                                tip.hide();
+                            }
+                        }
+                        me.trigger('click', me, e);
+                    }
+                };
+
+                var doSplitSelect = function(select, element, e) {
+                    if (!select) {
+                        // Is mouse under button
+                        var isUnderMouse = false;
+
+                        $('button', el).each(function(index, button){
+                            if ($(button).is(':hover')) {
+                                isUnderMouse = true;
+                                return false;
+                            }
+                        });
+
+                        if (!isUnderMouse) {
+                            el.removeClass('over');
+                            $('button', el).removeClass('over');
+                        }
+                    }
+
+                    if ( element == 'button') {
+                        if (!select && (me.enableToggle && me.allowDepress && me.pressed))
+                            return;
+                        if (select && !isSplit && (me.enableToggle && me.allowDepress && !me.pressed)) { // to depress button with menu
+                            e.preventDefault();
+                            return;
+                        }
+
+                        $('button:first', el).toggleClass('active', select);
+                    } else
+                        $('[data-toggle^=dropdown]', el).toggleClass('active', select);
+
+                    el.toggleClass('active', select);
+                };
+
+                var menuHandler = function(e) {
+                    if (!me.disabled && e.which == 1) {
+                        if (isSplit) {
+                            if (me.options.hint) {
+                                var tip = (me.btnMenuEl ? me.btnMenuEl : me.btnEl).data('bs.tooltip');
+                                if (tip) {
+                                    if (tip.dontShow===undefined)
+                                        tip.dontShow = true;
+
+                                    tip.hide();
+                                }
+                            }
+                            var isOpen = el.hasClass('open');
+                            doSplitSelect(!isOpen, 'arrow', e);
+                        }
+                    }
+                };
+
+                var doSetActiveState = function(e, state) {
+                    if (isSplit) {
+                        doSplitSelect(state, 'button', e);
+                    } else {
+                        el.toggleClass('active', state);
+                        $('button', el).toggleClass('active', state);
+                    }
+                };
+
+                var splitElement;
+                var onMouseDown = function (e) {
+                    splitElement = e.currentTarget.className.match(/dropdown/) ? 'arrow' : 'button';
+                    doSplitSelect(true, splitElement, e);
+                    $(document).on('mouseup',   onMouseUp);
+                };
+
+                var onMouseUp = function (e) {
+                    doSplitSelect(false, splitElement, e);
+                    $(document).off('mouseup',   onMouseUp);
+                };
+
+                var onAfterHideMenu = function(e, isFromInputControl) {
+                    me.cmpEl.find('.dropdown-toggle').blur();
+                    if (me.cmpEl.hasClass('active') !== me.pressed) 
+                        me.cmpEl.trigger('button.internal.active', [me.pressed]);
+                };
+
+                if (isGroup) {
+                    if (isSplit) {
+                        $('[data-toggle^=dropdown]', el).on('mousedown', _.bind(menuHandler, this));
+                        $('button', el).on('mousedown', _.bind(onMouseDown, this));
+                        (me.options.width>0) && $('button:first', el).css('width', me.options.width - $('[data-toggle^=dropdown]', el).outerWidth());
+                    }
+
+                    el.on('hide.bs.dropdown', _.bind(doSplitSelect, me, false, 'arrow'));
+                    el.on('show.bs.dropdown', _.bind(doSplitSelect, me, true, 'arrow'));
+                    el.on('hidden.bs.dropdown', _.bind(onAfterHideMenu, me));
+
+                    $('button:first', el).on('click', buttonHandler);
+                } else {
+                    el.on('click', buttonHandler);
+                }
+
+                el.on('button.internal.active', _.bind(doSetActiveState, me));
+
+                el.on('mouseover', function(e) {
+                    if (!me.disabled) {
+                        me.cmpEl.addClass('over');
+                        me.trigger('mouseover', me, e);
+                    }
+                });
+
+                el.on('mouseout', function(e) {
+                    me.cmpEl.removeClass('over');
+                    if (!me.disabled) {
+                        me.trigger('mouseout', me, e);
+                    }
+                });
+
+                // Register the button in the toggle manager
+                Common.UI.ToggleManager.register(me);
+            }
+
+            me.rendered = true;
+
+            if (me.pressed) {
+                me.toggle(me.pressed, true);
+            }
+
+            if (me.disabled) {
+                me.setDisabled(!(me.disabled=false));
+            }
+
+            if (!me.visible) {
+                me.setVisible(me.visible);
+            }
+
+            me.trigger('render:after', me);
+
+            return this;
+        },
+
+        doToggle: function(){
+            var me = this;
+            if (me.enableToggle && (me.allowDepress !== false || !me.pressed)) {
+                me.toggle();
+            }
+        },
+
+        toggle: function(toggle, suppressEvent) {
+            var state = toggle === undefined ? !this.pressed : !!toggle;
+
+            this.pressed = state;
+
+            if (this.cmpEl)
+                this.cmpEl.trigger('button.internal.active', [state]);
+
+            if (!suppressEvent)
+                this.trigger('toggle', this, state);
+        },
+
+        click: function(opts) {
+            if ( !this.disabled ) {
+                this.doToggle();
+                this.trigger('click', this, opts);
+            }
+        },
+
+        isActive: function() {
+            if (this.enableToggle)
+                return this.pressed;
+
+            return this.cmpEl.hasClass('active')
+        },
+
+        setDisabled: function(disabled) {
+            if (this.rendered && this.disabled != disabled) {
+                var el = this.cmpEl,
+                    isGroup = el.hasClass('btn-group'),
+                    me = this;
+
+                disabled = (disabled===true);
+
+                if (disabled !== el.hasClass('disabled')) {
+                    var decorateBtn = function(button) {
+                        button.toggleClass('disabled', disabled);
+                        if (!me.options.allowMouseEventsOnDisabled)
+                            (disabled) ? button.attr({disabled: disabled}) : button.removeAttr('disabled');
+                    };
+
+                    decorateBtn(el);
+                    isGroup && decorateBtn(el.children('button'));
+                }
+
+                if ((disabled || !Common.Utils.isGecko) && this.options.hint) {
+                    var tip = this.btnEl.data('bs.tooltip');
+                    if (tip) {
+                        disabled && tip.hide();
+                        !Common.Utils.isGecko && (tip.enabled = !disabled);
+                    }
+                    if (this.btnMenuEl) {
+                        tip = this.btnMenuEl.data('bs.tooltip');
+                        if (tip) {
+                            disabled && tip.hide();
+                            !Common.Utils.isGecko && (tip.enabled = !disabled);
+                        }
+                    }
+                }
+
+                if (disabled && this.menu && _.isObject(this.menu) && this.menu.rendered && this.menu.isVisible())
+                    setTimeout(function(){ me.menu.hide()}, 1);
+
+                if ( !!me.options.signals ) {
+                    var opts = me.options.signals;
+                    if ( !(opts.indexOf('disabled') < 0) ) {
+                        me.trigger('disabled', me, disabled);
+                    }
+                }
+            }
+
+            this.disabled = disabled;
+        },
+
+        isDisabled: function() {
+            return this.disabled;
+        },
+
+        setIconCls: function(cls) {
+            var btnIconEl = $(this.el).find('.icon'),
+                oldCls = this.iconCls;
+
+            this.iconCls = cls;
+            if (/svgicon/.test(this.iconCls)) {
+                var icon = /svgicon\s(\S+)/.exec(this.iconCls);
+                btnIconEl.find('use.zoom-int').attr('xlink:href', icon && icon.length>1 ? '#' + icon[1]: '');
+                btnIconEl.find('use.zoom-grit').attr('xlink:href', icon && icon.length>1 ? '#' + icon[1] + '-150' : '');
+            } else {
+                btnIconEl.removeClass(oldCls);
+                btnIconEl.addClass(cls || '');
+            }
+        },
+
+        changeIcon: function(opts) {
+            var me = this;
+            if ( opts && (opts.curr || opts.next) && me.$icon) {
+                !!opts.curr && (me.$icon.removeClass(opts.curr));
+                !!opts.next && !me.$icon.hasClass(opts.next) && (me.$icon.addClass(opts.next));
+
+                if ( !!me.options.signals ) {
+                    if ( !(me.options.signals.indexOf('icon:changed') < 0) ) {
+                        me.trigger('icon:changed', me, opts);
+                    }
+                }
+            }
+        },
+
+        hasIcon: function(iconcls) {
+            return this.$icon.hasClass(iconcls);
+        },
+
+        setVisible: function(visible) {
+            if (this.cmpEl) this.cmpEl.toggleClass('hidden', !visible);
+            this.visible = visible;
+        },
+
+        isVisible: function() {
+            return (this.cmpEl) ? this.cmpEl.is(":visible") : $(this.el).is(":visible");
+        },
+
+        updateHint: function(hint) {
+            this.options.hint = hint;
+
+            if (!this.rendered) return;
+            
+            var cmpEl = this.cmpEl,
+                modalParents = cmpEl.closest('.asc-window');
+
+
+            if (!this.btnEl) {
+                if (typeof this.options.hint == 'object' && this.options.hint.length>1 && $('button', cmpEl).length>0) {
+                    var btnEl = $('button', cmpEl);
+                    this.btnEl = $(btnEl[0]);
+                    this.btnMenuEl = $(btnEl[1]);
+                } else {
+                    this.btnEl = cmpEl;
+                    this.btnEl.attr('data-toggle', 'tooltip');
+                }
+            }
+
+            if (this.btnEl.data('bs.tooltip'))
+                this.btnEl.removeData('bs.tooltip');
+            if (this.btnMenuEl && this.btnMenuEl.data('bs.tooltip'))
+                this.btnMenuEl.removeData('bs.tooltip');
+
+            this.btnEl.tooltip({
+                title       : (typeof hint == 'string') ? hint : hint[0],
+                placement   : this.options.hintAnchor||'cursor'
+            });
+            this.btnMenuEl && this.btnMenuEl.tooltip({
+                title       : hint[1],
+                placement   : this.options.hintAnchor||'cursor'
+            });
+
+            if (modalParents.length > 0) {
+                this.btnEl.data('bs.tooltip').tip().css('z-index', parseInt(modalParents.css('z-index')) + 10);
+                this.btnMenuEl && this.btnMenuEl.data('bs.tooltip').tip().css('z-index', parseInt(modalParents.css('z-index')) + 10);
+            }
+
+            if (this.disabled || !Common.Utils.isGecko) {
+                var tip = this.btnEl.data('bs.tooltip');
+                if (tip) {
+                    this.disabled && tip.hide();
+                    !Common.Utils.isGecko && (tip.enabled = !this.disabled);
+                }
+                if (this.btnMenuEl) {
+                    tip = this.btnMenuEl.data('bs.tooltip');
+                    if (tip) {
+                        this.disabled && tip.hide();
+                        !Common.Utils.isGecko && (tip.enabled = !this.disabled);
+                    }
+                }
+            }
+        },
+
+        setCaption: function(caption) {
+            if (this.caption != caption) {
+                this.caption = caption;
+
+                if (this.rendered) {
+                    var captionNode = this.cmpEl.find('.caption');
+
+                    if (captionNode.length > 0) {
+                        captionNode.text(caption);
+                    } else {
+                        this.cmpEl.find('button:first').addBack().filter('button').text(caption);
+                    }
+                }
+            }
+        },
+
+        setMenu: function (m) {
+            if (m && _.isObject(m) && _.isFunction(m.render)){
+                this.menu = m;
+                if (this.rendered)
+                    this.menu.render(this.cmpEl);
+            }
+        }
+    });
+});
+
diff --git a/test/unit-tests/common/main/lib/component/ToggleManager.js b/test/unit-tests/common/main/lib/component/ToggleManager.js
new file mode 100644
index 0000000000..3df283a624
--- /dev/null
+++ b/test/unit-tests/common/main/lib/component/ToggleManager.js
@@ -0,0 +1,115 @@
+/*
+ *
+ * (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
+ *
+*/
+/**
+ *  ToggleManager.js
+ *
+ *  Created by Alexander Yuzhin on 1/28/14
+ *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+
+if (Common === undefined)
+    var Common = {};
+
+define([
+    'unit-tests/common/main/lib/component/BaseView'
+], function () {
+    'use strict';
+
+    var groups = {};
+
+    function toggleGroup(cmp, state) {
+        var g, i, l;
+        if (state) {
+            g = groups[cmp.toggleGroup];
+            for (i = 0, l = g.length; i < l; i++) {
+                if (g[i] !== cmp) {
+                    if (g[i].isActive) {
+                        g[i].isActive() && g[i].toggle(false);
+                    } else {
+                        g[i].toggle(false);
+                    }
+                }
+            }
+        }
+    }
+
+    /**
+     * Private utility class used by component
+     */
+    Common.UI.ToggleManager = {
+        register: function(cmp) {
+            if (!cmp.toggleGroup) {
+                return;
+            }
+            var group = groups[cmp.toggleGroup];
+            if (!group) {
+                group = groups[cmp.toggleGroup] = [];
+            }
+            group.push(cmp);
+            cmp.on('toggle', toggleGroup);
+        },
+
+        unregister: function(cmp) {
+            if (!cmp.toggleGroup) {
+                return;
+            }
+            var group = groups[cmp.toggleGroup];
+            if (group) {
+                _.without(group, cmp);
+                cmp.off('toggle', toggleGroup);
+            }
+        },
+
+        /**
+         * Gets the toggled components in the passed group or null
+         * @param {String} group
+         * @return {Common.UI.BaseView}
+         */
+        getToggled: function(group) {
+            var g = groups[group],
+                i = 0,
+                len;
+            if (g) {
+                for (len = g.length; i < len; i++) {
+                    if (g[i].pressed === true ||
+                        g[i].checked === true) {
+                        return g[i];
+                    }
+                }
+            }
+            return null;
+        }
+    }
+});
\ 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
new file mode 100644
index 0000000000..4415acffde
--- /dev/null
+++ b/test/unit-tests/common/main/lib/core/NotificationCenter.js
@@ -0,0 +1,78 @@
+/*
+ *
+ * (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
+ *
+*/
+/**
+ *  NotificationCenter.js
+ *
+ *  A pub-sub object that can be used to decouple various parts
+ *  of an application through event-driven architecture.
+ *
+ *  Created by Alexander Yuzhin on 1/21/14
+ *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+
+/**
+ *  Using:
+ *
+ *  Common.NotificationCenter.on("foo", function(){
+ *      alert("bar");
+ *  });
+ *
+ *  Common.NotificationCenter.trigger("foo"); // => alert box "bar"
+ *
+ */
+
+if (Common === undefined)
+    var Common = {};
+
+define([
+    'backbone'
+], function (Backbone) {
+    'use strict';
+
+    var NotificationCenter = function(){};
+
+    // Copy the basic Backbone.Events on to the event aggregator
+    _.extend(NotificationCenter.prototype, Backbone.Events);
+
+    if(typeof Common.NotificationCenter == 'undefined') {
+        // Method to create new Common.NotificationCenter class
+        NotificationCenter.extend = Backbone.Model.extend;
+
+        Common.NotificationCenter = new NotificationCenter();
+    }
+    else {
+        throw ('Native Common.NotificationCenter instance already defined.')
+    }
+});
\ 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
new file mode 100644
index 0000000000..2903aaa1b8
--- /dev/null
+++ b/test/unit-tests/common/main/lib/core/application.js
@@ -0,0 +1,565 @@
+(function(){
+    var resolveNamespace = function(className, root) {
+        var parts = className.split('.'),
+            current = root || window;
+
+        for(var a = 0, b = parts.length; a < b; a++) {
+            current = current[parts[a]] || {};
+        }
+
+        return current;
+    };
+
+    /**
+     * @class Backbone.Application
+     * @cfg {Object} options The list of options available within Application
+     */
+    var Application = function(options) {
+        _.extend(this, options || {});
+        
+        this.eventbus = new EventBus({application: this});
+        
+        this.createApplicationNamespace();
+        this.initialize.apply(this, arguments);
+
+        if (this.autoCreate !== false)
+            $($.proxy(this.onReady, this));
+    };
+
+    _.extend(Application.prototype, {
+        /**
+         * @cfg {Object} nameSpace (required)
+         * Define the application namespace       
+         */
+        nameSpace: 'Application',
+        
+        models: {},
+        collections: {},
+        controllers: {},
+        
+        /**
+         * @cfg allocationMap Define the inner structure of our application object
+         * @cfg allocationMap.model The key for models map
+         * @cfg allocationMap.collection The key for collections map
+         * @cfg allocationMap.controller The key for controllers map
+         * @cfg allocationMap.view The key for views map
+         */        
+        allocationMap: {
+            model: 'Models',
+            collection: 'Collections',
+            controller: 'Controllers',
+            view: 'Views'
+        },
+
+        /**
+         * Function to create inner structure of the application using {@link #allocationMap allocationMap} config
+         */           
+        createApplicationNamespace: function() {
+            var nameSpace = window;
+
+            // create global reference in the defined namespace
+            if(this.nameSpace) {
+                // if it wasn't already defined, create it
+                if(typeof nameSpace[this.nameSpace] == 'undefined') {
+                    nameSpace[this.nameSpace] = {}
+                }
+            }
+
+            // let's have a link to the application namespace
+            // this way we will be able to get all references to Models, Collections and Controllers
+            // using given namespace
+            nameSpace[this.nameSpace] = this;
+            
+            _.each(this.allocationMap, function(name, key) {
+                this[name] = this[name] || {};
+            }, this);
+        },
+        
+        /**
+         * Function that will be called during application instance creation
+         */
+        initialize: function() {},
+
+        /**
+         * Called when DOM is ready. This is global callback is used to:         
+         * * Used to initialize controllers and execute {@link Backbone.Controller#onLaunch onLaunch} callback
+         * * Execute {@link Backbone.Application#launch launch} callback
+         */
+        onReady: function() {
+            this.start();
+        },
+
+        start: function() {
+            // initialize controllers
+            this.initializeControllers(this.controllers || {});
+            // call to controller.onLaunch callback
+            this.launchControllers();
+            // call application.launch callback
+            this.launch.call(this);
+        },
+
+        /**
+         * Function that will convert string identifier into the instance reference
+         * @param {String} type Type of instance that should be resolved. See {@link #allocationMap} for valid values
+         * @param {String[]} classes The list of class references
+         * @return {Object} The objects map
+         */ 
+        getClasseRefs: function(type, classes) {
+            var hashMap = {},
+                allocationMap = this.allocationMap[type],
+                root = this[allocationMap];
+
+            _.each(classes, function(cls) {
+                hashMap[cls] = resolveNamespace(cls, (cls.indexOf('.') > -1) ? window : root);
+            }, this);
+
+            return hashMap;
+        },
+        
+        /**
+         * Function that will loop through all application controllers and create their instances
+         * Additionally, read the list of models and collections from each controller and save the reference within application
+         */
+        initializeControllers: function(controllers) {
+            this.controllers = {};
+
+            _.each(controllers, function(ctrl) {
+                var root = (ctrl.indexOf('.') > -1) ? window : this[this.allocationMap.controller],
+                    classReference = resolveNamespace(ctrl, root),
+                    id = ctrl.split('.').pop();
+
+                var controller = new classReference({
+                    id: ctrl,
+                    application: this
+                });
+
+                controller.views = this.getClasseRefs('view', controller.views || []);
+
+                _.extend(this.models, this.getClasseRefs('model', controller.models || []));
+                _.extend(this.collections, this.getClasseRefs('collection', controller.collections || {}));
+
+                this.buildCollections();
+                this.controllers[ctrl] = controller;
+            }, this);
+        },
+
+        /**
+         * Launch all controllers using {@link Backbone.Controller#onLaunch callback}
+         */
+        launchControllers: function() {
+            _.each(this.controllers, function(ctrl, id) {
+                ctrl.onLaunch(this);
+            }, this);
+        },
+
+        /**
+         * Called during application launch
+         * @template
+         */
+        launch: function() {},
+
+        /**
+         * Function to add event listeners to the {@link #Backbone.EventBus EventBus}
+         */
+        addListeners: function(listeners, controller) {
+            this.eventbus.addListeners(listeners, controller)
+        },
+
+        /**
+         * Getter to retreive link to the particular controller instance by name
+         * @param {String} name
+         * @return {Backbone.Controller} The controller instance
+         */
+        getController: function(name) {
+            return this.controllers[name];
+        },
+
+        /**
+         * Getter to retrieve link to the particular model instance by name
+         * If model instance isn't created, create it
+         * @param {String} name
+         * @return {Backbone.Model} The model instance
+         */
+        getModel: function(name) {
+            this._modelsCache = this._modelsCache || {};
+
+            var model = this._modelsCache[name],
+                modelClass = this.getModelConstructor(name);
+
+            if(!model && modelClass) {
+                model = this.createModel(name);
+                this._modelsCache[name] = model;
+            }
+
+            return model || null;
+        },
+
+        /**
+         * Getter to retrieve link to the particular model constructor by name
+         * @param {String} name
+         * @return {Backbone.Model} The model constructor
+         */
+        getModelConstructor: function(name) {
+            return this.models[name];
+        },
+
+        /**
+         * Function to create new model instance
+         * @param {String} name The name of the model that needs to be created
+         * @param {Object} [options] The list of option that should be passed to the model constructor
+         */
+        createModel: function(name, options) {
+            var modelClass = this.getModelConstructor(name),
+                model = null;
+
+            if (modelClass)
+                model = new modelClass(_.extend(options || {}));
+
+            return model;
+        },
+
+        /**
+         * Getter to retrieve link to the particular collection instance by name
+         * If collection instance isn't created, create it
+         * @param {String} name
+         * @return {Backbone.Collection} The collection instance         
+         */
+        getCollection: function(name) {
+            this._collectionsCache = this._collectionsCache || {};
+
+            var collection = this._collectionsCache[name],
+                collectionClass = this.getCollectionConstructor(name);
+
+            if(!collection && collectionClass) {
+                collection = this.createCollection(name);
+                this._collectionsCache[name] = collection;
+            }
+
+            return collection || null;
+        },
+
+        /**
+         * Getter to retrieve link to the particular collection constructor
+         * @param {String} name
+         * @return {Backbone.Collection} The collection constructor               
+         */
+        getCollectionConstructor: function(name) {
+            return this.collections[name];
+        },
+
+        /**
+         * Function to create new collection instance
+         * @param {String} name The name of the collection that needs to be created
+         */
+        createCollection: function(name) {
+            var collectionClass = this.getCollectionConstructor(name),
+                collection = null;
+
+            if (collectionClass)
+                collection = new collectionClass();
+
+            return collection;
+        },
+
+        /**
+         * Function that will loop throught the list of collection constructors and create instances
+         */
+        buildCollections: function() {
+            _.each(this.collections, function(collection, alias) {
+                this.getCollection(alias);
+            }, this);
+        }
+    });
+
+
+    // Since we are using Backbone let's make sure that there are no conflicts in namespaces
+    if(typeof Backbone.Application == 'undefined') {
+        Backbone.Application = Application;
+        /**
+         * @method extend
+         * Method to create new Backbone.Application class
+         * @static
+         */    
+        Backbone.Application.extend = Backbone.Model.extend;        
+    }
+    else {
+        throw ('Native Backbone.Application instance already defined.')
+    }
+
+    /**
+     * @class Backbone.Controller
+     * @cfg {Object} options The list of options available within Controller
+     */    
+    var Controller = function(options) {
+        _.extend(this, options || {});
+        this.initialize.apply(this, arguments);
+    };
+
+    _.extend(Controller.prototype, {
+        name: null,
+        views: {},
+        models: {},
+        collections: {},
+
+        initialize: function(options) {
+        },
+
+        /**
+         * Add new listener to the application event bus
+         * Delegate to {@link Backbone.Application#addListeners addListeners} callback
+         */
+        addListeners: function(listeners) {
+            this.getApplication().addListeners(listeners, this);
+        },
+
+        /**
+         * Called after application launch
+         * @template
+         */
+        onLaunch: function(application) {
+        },
+
+        /**
+         * Getter that will return the reference to the application instance
+         */
+        getApplication: function() {
+            return this.application;
+        },
+
+        /**
+         * Getter that will return the reference to the view instance
+         */
+        getView: function(name) {
+            return this._viewsCache[name];
+        },
+
+        /**
+         * Getter that will return the reference to the view constructor by name
+         * @param {String} name
+         * @return {Backbone.View} The view constructor            
+         */
+        getViewConstructor: function(name) {
+            return this.views[name];
+        },
+
+        /**
+         * Function to create a new view instance
+         * All views are cached within _viewsCache hash map
+         * @param {String} name
+         * @param {Object} options Options to be passed within view constructor
+         * @return {Backbone.View} The view instance            
+         */
+        createView: function(name, options) {
+            var view = this.getViewConstructor(name),
+                viewOptions = _.extend(options || {}, {
+                    alias: name
+                });
+
+            this._viewsCache = this._viewsCache || {};
+            this._viewsCache[name] = new view(viewOptions);
+
+            this._viewsCache[name].options = _.extend({}, viewOptions);
+
+            return this._viewsCache[name];
+        },
+
+        /**
+         * Method to get model instance reference by name
+         * Delegate to {@link Backbone.Application#getModel getModel} method
+         */
+        getModel: function(name) {
+            return this.application.getModel(name);
+        },
+
+        /**
+         * Method to get model constructor reference by name
+         * Delegate to {@link Backbone.Application#getModelConstructor getModelConstructor} method
+         */
+        getModelConstructor: function(name) {
+            return this.application.getModelConstructor(name);
+        },
+
+        /**
+         * Method to create model instance by name
+         * Delegate to {@link Backbone.Application#createModel createModel} method
+         */
+        createModel: function(name, options) {
+            return this.application.createModel(name)
+        },
+
+        /**
+         * Delegate method to get collection instance reference by name
+         * Delegate to {@link Backbone.Application#getCollection getCollection} method
+         */
+        getCollection: function(name) {
+            return this.application.getCollection(name);
+        },
+
+        /**
+         * Delegate method to get collection constructor reference by name
+         * Delegate to {@link Backbone.Application#getCollectionConstructor getCollectionConstructor} method
+         */
+        getCollectionConstructor: function(name) {
+            return this.application.getCollectionConstructor(name);
+        },
+
+        /**
+         * Delegate method to create collection instance
+         * Delegate to {@link Backbone.Application#createCollection createCollection} method
+         */
+        createCollection: function(name) {
+            return this.application.createCollection(name);
+        },
+
+        /**
+         * Method to fire cross-controller event
+         * Delegate to {@link Backbone.Application#fireEvent fireEvent} method
+         */
+        fireEvent: function(selector, event, args) {
+            this.application.eventbus.fireEvent(selector, event, args);
+        },
+
+        /**
+         * Method to bind events from controlling view to controller
+         * probably isn't safe, testing needed
+         */
+        bindViewEvents: function(view, events) {
+            this.unbindViewEvents(view);
+
+            events = _.isFunction(events) ? events.call(this) : events;
+
+            for (var key in events) {
+                var method = events[key];
+                if (!_.isFunction(method)) method = this[events[key]];
+
+                var match = key.match(/^(\S+)\s*(.*)$/);
+                var eventName = match[1], selector = match[2];
+                method = _.bind(method, this);
+                eventName += '.bindViewEvents' + view.cid;
+                view.$el.on(eventName, selector, method);
+            }
+
+            return this;
+        },
+
+        /**
+         * Method to unbind events from view to controller
+         *
+         */
+        unbindViewEvents: function(view) {
+            view.$el.off('.bindViewEvents' + view.cid);
+            return this;
+        }
+    });
+
+    if(typeof Backbone.Controller == 'undefined') {
+        Backbone.Controller = Controller;
+        /**
+         * @method extend
+         * Method to create new Backbone.Controller class
+         * @static
+         */
+        Backbone.Controller.extend = Backbone.Model.extend;        
+    }
+    else {
+        throw ('Native Backbone.Controller instance already defined.')
+    }
+
+    /**
+     * @class Backbone.EventBus
+     * @cfg {Object} options The list of options available within Controller
+     * @private
+     */     
+    var EventBus = function(options) {
+        var me = this;
+
+        _.extend(this, options || {});
+
+        _.extend(Backbone.View.prototype, {
+            alias: null,
+            hidden: false,
+            getAlias: function() {
+                return this.options.alias;
+            },
+            /**
+             * Instead of calling View.trigger lets use custom function
+             * It will notify the EventBus about new event
+             */
+            fireEvent: function(event, args) {
+                this.trigger.apply(this, arguments);
+                me.fireEvent(this.getAlias(), event, args);
+            },
+            hide: function() {
+                this.$el.hide();
+                this.hidden = true;
+            },
+            show: function() {
+                this.$el.show();
+                this.hidden = false;
+            }
+        });
+    };
+
+    _.extend(EventBus.prototype, {
+        pool: {},
+        /**
+         * Add new listeners to the event bus
+         */
+        addListeners: function(selectors, controller) {
+
+            this.pool[controller.id] = this.pool[controller.id] || {};
+            var pool = this.pool[controller.id];
+
+            if(_.isArray(selectors)) {
+                _.each(selectors, function(selector) {
+                    this.addListeners(selector, controller);
+                }, this)
+            }
+            else if(_.isObject(selectors)) {
+                _.each(selectors, function(listeners, selector) {
+                    _.each(listeners, function(listener, event) {
+                        pool[selector] = pool[selector] || {};
+                        pool[selector][event] = pool[selector][event] || [];
+                        pool[selector][event].push(listener);
+
+                    }, this);
+                }, this)
+
+            }
+        },
+
+        /**
+         * Execute event listener by given selector and event name
+         */
+        fireEvent: function(selector, event, args) {
+            var application = this.getApplication();
+
+            _.each(this.pool, function(eventsPoolByAlias, controllerId) {
+                var events = eventsPoolByAlias[selector];
+
+                if(events) {
+                    var listeners = events[event],
+                        controller = application.getController(controllerId);
+
+                    _.each(listeners, function(fn) {
+                        fn.apply(controller, args);
+                    });
+                }
+
+
+            }, this);
+        },
+
+        getApplication: function() {
+            return this.application;
+        }
+    });
+
+    // Since we are using Backbone let's make sure that there are no conflicts in namespaces
+    if(typeof Backbone.EventBus == 'undefined') {
+        Backbone.EventBus = EventBus;
+    }
+    else {
+        throw ('Native Backbone.Application instance already defined.')
+    }
+})();
\ No newline at end of file
diff --git a/test/unit-tests/common/main/lib/core/keymaster.js b/test/unit-tests/common/main/lib/core/keymaster.js
new file mode 100644
index 0000000000..eeac761ebf
--- /dev/null
+++ b/test/unit-tests/common/main/lib/core/keymaster.js
@@ -0,0 +1,346 @@
+//     keymaster.js
+//     (c) 2011-2013 Thomas Fuchs
+//     keymaster.js may be freely distributed under the MIT license.
+//
+//      changesets: 833cf1a00fe2, e19d5b8a37fe
+
+;(function(global){
+  var k,
+    _handlers = {},
+    _mods = { 16: false, 18: false, 17: false, 91: false },
+    _scope = 'all',
+    // modifier keys
+    _MODIFIERS = {
+      '⇧': 16, shift: 16,
+      '⌥': 18, alt: 18, option: 18,
+      '⌃': 17, ctrl: 17, control: 17,
+      '⌘': 91, command: 91
+    },
+    // special keys
+    _MAP = {
+      backspace: 8, tab: 9, clear: 12,
+      enter: 13, 'return': 13,
+      esc: 27, escape: 27, space: 32,
+      left: 37, up: 38,
+      right: 39, down: 40,
+      del: 46, 'delete': 46,
+      home: 36, end: 35,
+      pageup: 33, pagedown: 34,
+      ',': 188, '.': 190, '/': 191,
+      '`': 192, '-': 189, '=': 187,
+      ';': 186, '\'': 222,
+      '[': 219, ']': 221, '\\': 220,
+      'ff-': 173, 'ff=': 61
+    },
+    code = function(x){
+      return _MAP[x] || x.toUpperCase().charCodeAt(0);
+    },
+    _downKeys = [];
+    var locked;
+
+  for(k=1;k<20;k++) _MAP['f'+k] = 111+k;
+
+  // IE doesn't support Array#indexOf, so have a simple replacement
+  function index(array, item){
+    var i = array.length;
+    while(i--) if(array[i]===item) return i;
+    return -1;
+  }
+
+  // for comparing mods before unassignment
+  function compareArray(a1, a2) {
+    if (a1.length != a2.length) return false;
+    for (var i = 0; i < a1.length; i++) {
+        if (a1[i] !== a2[i]) return false;
+    }
+    return true;
+  }
+
+  var modifierMap = {
+      16:'shiftKey',
+      18:'altKey',
+      17:'ctrlKey',
+      91:'metaKey'
+  };
+  function updateModifierKey(event) {
+      for(k in _mods) _mods[k] = event[modifierMap[k]];
+  };
+
+  // handle keydown event
+  function dispatch(event) {
+    var key, handler, k, i, modifiersMatch, scope;
+    key = event.keyCode;
+
+    if (Common.UI.HintManager.isHintVisible()) {
+      if (key === 112) {
+        Common.UI.HintManager.clearHints();
+      } else if (key !== 27) {
+        return;
+      }
+    }
+
+    if (index(_downKeys, key) == -1) {
+        _downKeys.push(key);
+    }
+
+    // if a modifier key, set the key.<modifierkeyname> property to true and return
+    if(key == 93 || key == 224) key = 91; // right command on webkit, command on Gecko
+    if(key in _mods) {
+      _mods[key] = true;
+      // 'assignKey' from inside this closure is exported to window.key
+      for(k in _MODIFIERS) if(_MODIFIERS[k] == key) assignKey[k] = true;
+      return;
+    }
+    updateModifierKey(event);
+
+    // see if we need to ignore the keypress (filter() can can be overridden)
+    // by default ignore key presses if a select, textarea, or input is focused
+    if(!assignKey.filter.call(this, event)) return;
+
+    // abort if no potentially matching shortcuts found
+    if (!(key in _handlers)) return;
+
+    scope = getScope();
+
+    // for each potential shortcut
+    for (i = 0; i < _handlers[key].length; i++) {
+      handler = _handlers[key][i];
+
+      // see if it's in the current scope
+      if(handler.scope == scope || handler.scope == 'all'){
+        // check if modifiers match if any
+        modifiersMatch = handler.mods.length > 0;
+        for(k in _mods)
+          if((!_mods[k] && index(handler.mods, +k) > -1) ||
+            (_mods[k] && index(handler.mods, +k) == -1)) modifiersMatch = false;
+        // call the handler and stop the event if neccessary
+        if((handler.mods.length == 0 && !_mods[16] && !_mods[18] && !_mods[17] && !_mods[91]) || modifiersMatch){
+          if(locked===true || handler.locked || handler.method(event, handler)===false){
+            if(event.preventDefault) event.preventDefault();
+              else event.returnValue = false;
+            if(event.stopPropagation) event.stopPropagation();
+            if(event.cancelBubble) event.cancelBubble = true;
+          }
+        }
+      }
+    }
+  };
+
+  // unset modifier keys on keyup
+  function clearModifier(event){
+    var key = event.keyCode, k,
+        i = index(_downKeys, key);
+
+    // remove key from _downKeys
+    if (i >= 0) {
+        _downKeys.splice(i, 1);
+    }
+
+    if(key == 93 || key == 224) key = 91;
+    if(key in _mods) {
+      _mods[key] = false;
+      for(k in _MODIFIERS) if(_MODIFIERS[k] == key) assignKey[k] = false;
+    }
+  };
+
+  function resetModifiers() {
+    for(k in _mods) _mods[k] = false;
+    for(k in _MODIFIERS) assignKey[k] = false;
+  };
+
+  // parse and assign shortcut
+  function assignKey(key, scope, method){
+    var keys, mods;
+    keys = getKeys(key);
+    if (method === undefined) {
+      method = scope;
+      scope = 'all';
+    }
+
+    // for each shortcut
+    for (var i = 0; i < keys.length; i++) {
+      // set modifier keys if any
+      mods = [];
+      key = keys[i].split('+');
+      if (key.length > 1){
+        mods = getMods(key);
+        key = [key[key.length-1]];
+      }
+      // convert to keycode and...
+      key = key[0]
+      key = code(key);
+      // ...store handler
+      if (!(key in _handlers)) _handlers[key] = [];
+      _handlers[key].push({ shortcut: keys[i], scope: scope, method: method, key: keys[i], mods: mods });
+    }
+  };
+
+  // unbind all handlers for given key in current scope
+  function unbindKey(key, scope) {
+    var multipleKeys, keys,
+      mods = [],
+      i, j, obj;
+
+    multipleKeys = getKeys(key);
+
+    for (j = 0; j < multipleKeys.length; j++) {
+      keys = multipleKeys[j].split('+');
+
+      if (keys.length > 1) {
+        mods = getMods(keys);
+        key = keys[keys.length - 1];
+      }
+
+      key = code(key);
+
+      if (scope === undefined) {
+        scope = getScope();
+      }
+      if (!_handlers[key]) {
+        return;
+      }
+      for (i in _handlers[key]) {
+        obj = _handlers[key][i];
+        // only clear handlers if correct scope and mods match
+        if (obj.scope === scope && compareArray(obj.mods, mods)) {
+          _handlers[key][i] = {};
+        }
+      }
+    }
+  };
+
+  // Returns true if the key with code 'keyCode' is currently down
+  // Converts strings into key codes.
+  function isPressed(keyCode) {
+      if (typeof(keyCode)=='string') {
+        keyCode = code(keyCode);
+      }
+      return index(_downKeys, keyCode) != -1;
+  }
+
+  function getPressedKeyCodes() {
+      return _downKeys.slice(0);
+  }
+
+  function filter(event){
+    var tagName = (event.target || event.srcElement).tagName;
+    // ignore keypressed in any elements that support keyboard data input
+    return !(tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA');
+  }
+
+  // initialize key.<modifier> to false
+  for(k in _MODIFIERS) assignKey[k] = false;
+
+  // set current scope (default 'all')
+  function setScope(scope){ _scope = scope || 'all' };
+  function getScope(){ return _scope || 'all' };
+
+  // delete all handlers for a given scope
+  function deleteScope(scope){
+    var key, handlers, i;
+
+    for (key in _handlers) {
+      handlers = _handlers[key];
+      for (i = 0; i < handlers.length; ) {
+        if (handlers[i].scope === scope) handlers.splice(i, 1);
+        else i++;
+      }
+    }
+  };
+
+  // abstract key logic for assign and unassign
+  function getKeys(key) {
+    var keys;
+    key = key.replace(/\s/g, '');
+    keys = key.split(',');
+    if ((keys[keys.length - 1]) == '') {
+      keys[keys.length - 2] += ',';
+    }
+    return keys;
+  }
+
+  // abstract mods logic for assign and unassign
+  function getMods(key) {
+    var mods = key.slice(0, key.length - 1);
+    for (var mi = 0; mi < mods.length; mi++)
+    mods[mi] = _MODIFIERS[mods[mi]];
+    return mods;
+  }
+
+  // cross-browser events
+  function addEvent(object, event, method) {
+    if (object.addEventListener)
+      object.addEventListener(event, method, false);
+    else if(object.attachEvent)
+      object.attachEvent('on'+event, function(){ method(window.event) });
+  };
+
+  // set the handlers globally on document
+  addEvent(document, 'keydown', function(event) { dispatch(event) }); // Passing _scope to a callback to ensure it remains the same by execution. Fixes #48
+  addEvent(document, 'keyup', clearModifier);
+
+  // reset modifiers to false whenever the window is (re)focused.
+  addEvent(window, 'focus', resetModifiers);
+
+  // store previously defined key
+  var previousKey = global.key;
+
+  // restore previously defined key and return reference to our key object
+  function noConflict() {
+    var k = global.key;
+    global.key = previousKey;
+    return k;
+  }
+
+  function setKeyOptions(key, scope, option, value) {
+      var keys, mods = [], i, obj;
+      var multipleKeys = getKeys(key);
+
+      for (var j = multipleKeys.length; j--; ) {
+        keys = multipleKeys[j].split('+');
+
+        if (keys.length > 1) {
+          mods = getMods(keys);
+          key = keys[keys.length - 1];
+        }
+
+        key = code(key);
+
+        if (scope === undefined) {
+          scope = getScope();
+        }
+        if (_handlers[key]) {
+          for (i in _handlers[key]) {
+            obj = _handlers[key][i];
+            if (obj.scope === scope && compareArray(obj.mods, mods)) {
+              _handlers[key][i][option] = value;
+            }
+          }
+        }
+      }
+  }
+
+  function suspend(key, scope) { 
+    key ? setKeyOptions(key, scope, 'locked', true) : (locked = true); 
+  }
+
+  function resume(key, scope) { 
+    key ? setKeyOptions(key, scope, 'locked', false) : (locked = false); 
+  }
+
+  // set window.key and window.key.set/get/deleteScope, and the default filter
+  global.key = assignKey;
+  global.key.setScope = setScope;
+  global.key.getScope = getScope;
+  global.key.deleteScope = deleteScope;
+  global.key.filter = filter;
+  global.key.isPressed = isPressed;
+  global.key.getPressedKeyCodes = getPressedKeyCodes;
+  global.key.noConflict = noConflict;
+  global.key.unbind = unbindKey;
+  global.key.suspend = suspend;
+  global.key.resume = resume;
+
+  if(typeof module !== 'undefined') module.exports = key;
+
+})(this);
diff --git a/test/unit-tests/common/main/resources/less/colors-table-ie-fix.less b/test/unit-tests/common/main/resources/less/colors-table-ie-fix.less
new file mode 100644
index 0000000000..442ff10da2
--- /dev/null
+++ b/test/unit-tests/common/main/resources/less/colors-table-ie-fix.less
@@ -0,0 +1,70 @@
+
+@toolbar-header-document-ie: #446995;
+@toolbar-header-spreadsheet-ie: #40865c;
+@toolbar-header-presentation-ie: #aa5252;
+
+@background-normal-ie: #fff;
+@background-toolbar-ie: #f1f1f1;
+@background-toolbar-additional-ie: #f1f1f1;
+@background-primary-dialog-button-ie: #7d858c;
+@background-tab-underline-ie: #444;
+@background-notification-popover-ie: #fcfed7;
+@background-notification-badge-ie: #ffd112;
+@background-scrim-ie: fade(#000, 20%);
+@background-loader-ie: fade(#000, 65%);
+@background-alt-key-hint-ie: #FFD938;
+
+@highlight-button-hover-ie: #d8dadc;
+@highlight-button-pressed-ie: #7d858c;
+@highlight-button-pressed-hover-ie: #7d858c;
+@highlight-primary-dialog-button-hover-ie: #666d73;
+@highlight-header-button-hover-ie: fade(#fff, 20%);
+@highlight-header-button-pressed-ie: fade(#000, 20%);
+@highlight-toolbar-tab-underline-ie: #444;
+@highlight-text-select-ie: #3494fb;
+
+@border-toolbar-ie: #cbcbcb;
+@border-divider-ie: #cbcbcb;
+@border-regular-control-ie: #cfcfcf;
+@border-toolbar-button-hover-ie: #d8dadc;
+@border-preview-hover-ie: #cfcfcf;
+@border-preview-select-ie: #848484;
+@border-control-focus-ie: #848484;
+@border-color-shading-ie: fade(#000, 20%);
+@border-error-ie: #d9534f;
+
+@text-normal-ie: #444;
+@text-normal-pressed-ie: #fff;
+@text-secondary-ie: #a5a5a5;
+@text-tertiary-ie: #a5a5a5;
+@text-link-ie: #acbfff;
+@text-inverse-ie: #fff;
+@text-toolbar-header-ie: #fff;
+@text-contrast-background-ie: #fff;
+
+@icon-normal-ie: #444;
+@icon-normal-pressed-ie: #fff;
+@icon-inverse-ie: #444;
+@icon-toolbar-header-ie: fade(#fff, 80%);
+@icon-notification-badge-ie: #000;
+@icon-contrast-popover-ie: #fff;
+@icon-success-ie: #5b9f27;
+
+@canvas-scroll-thumb-hover-ie: #c0c0c0;
+@canvas-scroll-thumb-border-hover-ie: #cbcbcb;
+
+@button-header-normal-icon-offset-x-ie: -20px;
+@button-header-active-icon-offset-x-ie: -20px;
+@scaled-one-px-value-ie: 1px;
+
+@component-disabled-opacity-ie: .4;
+
+/*.ie {
+    .toolbar__icon.toolbar__icon-big {
+        @big-icon-background-image-ie: ~"url(@{app-image-const-path}/iconsbig.png)";
+        background-image: @big-icon-background-image-ie;
+    }
+}*/
+
+//@huge-icon-background-image-ie: ~"url(@{app-image-const-path}/iconshuge.png)";
+
diff --git a/test/unit-tests/common/main/resources/less/colors-table.less b/test/unit-tests/common/main/resources/less/colors-table.less
new file mode 100644
index 0000000000..177ab6b13a
--- /dev/null
+++ b/test/unit-tests/common/main/resources/less/colors-table.less
@@ -0,0 +1,239 @@
+@import "./colors-table-ie-fix.less";
+
+// Brand colors
+// -------------------------
+
+@brand-primary:         #428bca;
+@brand-success:         #5cb85c;
+@brand-warning:         #f0ad4e;
+@brand-danger:          #d9534f;
+@brand-info:            #5bc0de;
+
+
+:root {
+    --toolbar-header-document: #446995;
+    --toolbar-header-spreadsheet: #40865c;
+    --toolbar-header-presentation: #aa5252;
+
+    --background-normal: #fff;
+    --background-toolbar: #f7f7f7;
+    --background-toolbar-additional: #efefef;
+    --background-primary-dialog-button: #444;
+    --background-tab-underline: #444;
+    --background-notification-popover: #fcfed7;
+    --background-notification-badge: #ffd112;
+    --background-scrim: fade(#000, 20%);
+    --background-loader: fade(#181818, 90%);
+    --background-alt-key-hint: #FFD938;
+
+    --highlight-button-hover: #e0e0e0;
+    --highlight-button-pressed: #cbcbcb;
+    --highlight-button-pressed-hover: #bababa;
+    --highlight-primary-dialog-button-hover: #1c1c1c;
+    --highlight-header-button-hover: fade(#fff, 15%);
+    --highlight-header-button-pressed: fade(#fff, 25%);
+    --highlight-toolbar-tab-underline: #444;
+    --highlight-text-select: #3494fb;
+
+    --border-toolbar: #cbcbcb;
+    --border-divider: #dfdfdf;
+    --border-regular-control: #c0c0c0;
+    --border-toolbar-button-hover: #e0e0e0;
+    --border-preview-hover: #bababa;
+    --border-preview-select: #888;
+    --border-control-focus: #848484;
+    --border-color-shading: fade(#000, 15%);
+    --border-error: #f62211;
+
+    --text-normal: fade(#000, 80%);
+    --text-normal-pressed: fade(#000, 80%);
+    --text-secondary: fade(#000, 60%);
+    --text-tertiary: fade(#000, 40%);
+    --text-link: #445799;
+    --text-link-hover: #445799;
+    --text-link-active: #445799;
+    --text-link-visited: #445799;
+    --text-inverse: #fff;
+    --text-toolbar-header: #fff;
+    --text-contrast-background: #fff;
+
+    --icon-normal: #444;
+    --icon-normal-pressed: #444;
+    --icon-inverse: #fff;
+    --icon-toolbar-header: #fff;
+    --icon-notification-badge: #000;
+    --icon-contrast-popover: #fff;
+    --icon-success: #090;
+
+    // Canvas
+
+    --canvas-background: #eee;
+    --canvas-content-background: #fff;
+    --canvas-page-border: #ccc;
+
+    --canvas-ruler-background: #fff;
+    --canvas-ruler-margins-background: #d9d9d9;
+    --canvas-ruler-mark: #555;
+    --canvas-ruler-handle-border: #555;
+    --canvas-ruler-handle-border-disabled: #aaa;
+
+    --canvas-high-contrast: #000;
+    --canvas-high-contrast-disabled: #666;
+
+    --canvas-cell-border: fade(#000, 10%);
+    --canvas-cell-title-hover: #dfdfdf;
+    --canvas-cell-title-selected: #cfcfcf;
+    --canvas-cell-title-border: #d8d8d8;
+    --canvas-cell-title-border-hover: #c9c9c9;
+    --canvas-cell-title-border-selected: #bbb;
+
+    --canvas-dark-cell-title: #444;
+    --canvas-dark-cell-title-hover: #666 ;
+    --canvas-dark-cell-title-selected: #111;
+    --canvas-dark-cell-title-border: #3d3d3d;
+    --canvas-dark-cell-title-border-hover: #5c5c5c;
+    --canvas-dark-cell-title-border-selected: #0f0f0f;
+
+    --canvas-scroll-thumb: #f7f7f7;
+    --canvas-scroll-thumb-hover: #c0c0c0;
+    --canvas-scroll-thumb-pressed: #adadad;
+    --canvas-scroll-thumb-border: #cbcbcb;
+    --canvas-scroll-thumb-border-hover: #cbcbcb;
+    --canvas-scroll-thumb-border-pressed: #adadad;
+    --canvas-scroll-arrow: #adadad;
+    --canvas-scroll-arrow-hover: #f7f7f7;
+    --canvas-scroll-arrow-pressed: #f7f7f7;
+    --canvas-scroll-thumb-target: #c0c0c0;
+    --canvas-scroll-thumb-target-hover: #f7f7f7;
+    --canvas-scroll-thumb-target-pressed: #f7f7f7;
+
+    // Others
+
+    //--button-small-normal-icon-offset-x: 0;
+    //--button-small-active-icon-offset-x: 0;
+    //--button-large-normal-icon-offset-x: 0;
+    //--button-large-active-icon-offset-x: 0;
+    //--button-huge-normal-icon-offset-x: 0;
+    //--button-huge-active-icon-offset-x: 0;
+    //--button-xhuge-normal-icon-offset-x: 0;
+    //--button-xhuge-active-icon-offset-x: 0;
+    --button-header-normal-icon-offset-x: -20px;
+    --button-header-active-icon-offset-x: -20px;
+    //--menu-icon-item-checked-offset-x: 0;
+
+    --modal-window-mask-opacity: 0.2;
+    --image-border-types-filter: none;
+    --image-border-types-filter-selected: none;
+    --component-normal-icon-filter: none;
+
+    --component-normal-icon-opacity: .8;
+    --component-hover-icon-opacity: .8;
+    --component-active-icon-opacity: 1;
+    --component-active-hover-icon-opacity: 1;
+    --component-disabled-opacity: .4;
+
+    --header-component-normal-icon-opacity: 1;
+    --header-component-hover-icon-opacity: 1;
+    --header-component-active-icon-opacity: 1;
+    --header-component-active-hover-icon-opacity: 1;
+    //--button-icon-opacity: 1;
+}
+
+// Background
+// -------------------------
+@background-normal: var(--background-normal);
+@background-toolbar: var(--background-toolbar);
+@background-toolbar-additional: var(--background-toolbar-additional);
+@background-primary-dialog-button: var(--background-primary-dialog-button);
+@background-tab-underline: var(--background-tab-underline);
+@background-notification-popover: var(--background-notification-popover);
+@background-notification-badge: var(--background-notification-badge);
+@background-scrim: var(--background-scrim);
+@background-loader: var(--background-loader);
+@background-alt-key-hint: var(--background-alt-key-hint);
+
+// Highlight
+// -------------------------
+@highlight-button-hover: var(--highlight-button-hover);
+@highlight-button-pressed: var(--highlight-button-pressed);
+@highlight-button-pressed-hover: var(--highlight-button-pressed-hover);
+@highlight-primary-dialog-button-hover: var(--highlight-primary-dialog-button-hover);
+@highlight-header-button-hover: var(--highlight-header-button-hover);
+@highlight-header-button-pressed: var(--highlight-header-button-pressed);
+@highlight-toolbar-tab-underline: var(--highlight-toolbar-tab-underline);
+@highlight-text-select: var(--highlight-text-select);
+
+// Border
+// -------------------------
+@border-toolbar: var(--border-toolbar);
+@border-divider: var(--border-divider);
+@border-regular-control: var(--border-regular-control);
+@border-toolbar-button-hover: var(--border-toolbar-button-hover);
+@border-preview-hover: var(--border-preview-hover);
+@border-preview-select: var(--border-preview-select);
+@border-control-focus: var(--border-control-focus);
+@border-color-shading: var(--border-color-shading);
+@border-error: var(--border-error);
+
+// Text
+// -------------------------
+@text-normal: var(--text-normal);
+@text-normal-pressed: var(--text-normal-pressed);
+@text-secondary: var(--text-secondary);
+@text-tertiary: var(--text-tertiary);
+@text-link: var(--text-link);
+@text-link-hover: var(--text-link-hover);
+@text-link-active: var(--text-link-active);
+@text-link-visited: var(--text-link-visited);
+@text-inverse: var(--text-inverse);
+@text-toolbar-header: var(--text-toolbar-header);
+@text-contrast-background: var(--text-contrast-background);
+@text-alt-key-hint: var(--text-alt-key-hint);
+
+// Icon
+// -------------------------
+@icon-normal: var(--icon-normal);
+@icon-normal-pressed: var(--icon-normal-pressed);
+@icon-inverse: var(--icon-inverse);
+@icon-toolbar-header: var(--icon-toolbar-header);
+@icon-contrast-popover: var(--icon-contrast-popover);
+@icon-notification-badge: var(--icon-notification-badge);
+@icon-success: var(--icon-success);
+
+@button-small-normal-icon-offset-x: var(--button-small-normal-icon-offset-x,0);
+@button-small-active-icon-offset-x: var(--button-small-active-icon-offset-x,0);
+@button-large-normal-icon-offset-x: var(--button-large-normal-icon-offset-x, 0);
+@button-large-active-icon-offset-x: var(--button-large-active-icon-offset-x, 0);
+@button-huge-normal-icon-offset-x: var(--button-huge-normal-icon-offset-x, 0);
+@button-xhuge-normal-icon-offset-x: var(--button-xhuge-normal-icon-offset-x, 0);
+@button-xhuge-active-icon-offset-x: var(--button-xhuge-active-icon-offset-x, 0);
+//@button-huge-normal-icon-offset-x: var(--button-huge-normal-icon-offset-x, 0);
+//@button-huge-active-icon-offset-x: var(--button-huge-active-icon-offset-x, 0);
+
+@button-header-normal-icon-offset-x: var(--button-header-normal-icon-offset-x, -20px);
+@button-header-active-icon-offset-x: var(--button-header-active-icon-offset-x, -20px);
+
+@component-normal-icon-filter: var(--component-normal-icon-filter);
+@component-normal-icon-opacity: var(--component-normal-icon-opacity, .8);
+@component-hover-icon-opacity: var(--component-hover-icon-opacity, .8);
+@component-active-icon-opacity: var(--component-active-icon-opacity, .8);
+@component-active-hover-icon-opacity: var(--component-active-hover-icon-opacity, .8);
+@component-disabled-opacity: var(--component-disabled-opacity, .4);
+//@button-icon-opacity: var(--button-icon-opacity, 1);
+
+@header-component-normal-icon-opacity: var(--header-component-normal-icon-opacity, 1);
+@header-component-hover-icon-opacity: var(--header-component-hover-icon-opacity, 1);
+@header-component-active-icon-opacity: var(--header-component-active-icon-opacity, 1);
+@header-component-active-hover-icon-opacity: var(--header-component-active-hover-icon-opacity, 1);
+
+@menu-icon-item-checked-offset-x: var(--menu-icon-item-checked-offset-x, 0);
+@img-border-type-filter: var(--image-border-types-filter, none);
+@img-border-type-filter-selected: var(--image-border-types-filter-selected, none);
+
+// Canvas
+// ---------------------------
+@canvas-background: var(--canvas-background);
+@canvas-content-background: var(--canvas-content-background);
+@canvas-page-border: var(--canvas-page-border);
+@canvas-scroll-thumb-hover: var(--canvas-scroll-thumb-hover);
+@canvas-scroll-thumb-border-hover: var(--canvas-scroll-thumb-border-hover);
diff --git a/test/unit-tests/common/main/resources/less/variables.less b/test/unit-tests/common/main/resources/less/variables.less
new file mode 100644
index 0000000000..42eac33a73
--- /dev/null
+++ b/test/unit-tests/common/main/resources/less/variables.less
@@ -0,0 +1,799 @@
+//
+// Global values
+// --------------------------------------------------
+@pixel-ratio-factor: var(--pixel-ratio-factor, 1);
+@scaled-one-px-value: var(--scaled-one-pixel, 1px);
+@scaled-two-px-value: var(--scaled-two-pixel, 2px);
+
+// Paths
+// -------------------------
+
+@app-image-path:            "../../resources/img";                    // use for data-uri(...)
+@common-image-path:         "../../../../common/main/resources/img";  // use for data-uri(...)
+@app-image-const-path:      "resources/img";                    // use for url(...)
+@common-image-const-path:   "../../common/main/resources/img";        // use for url(...)
+
+// Grays
+// -------------------------
+
+//@gray-deep:             #444444; //rgb(68, 68, 68)
+//@gray-darker:           #848484; //rgb(132, 132, 132)
+//@gray-dark:             #cbcbcb; //rgb(203, 203, 203)
+//@gray:                  #cfcfcf; //rgb(207, 207, 207)
+//@gray-light:            #f1f1f1; //rgb(241, 241, 241)
+//@gray-lighter:          #ededed; //rgb(237, 237, 237)
+//@gray-soft:             #adadad; //rgb(173, 173, 173)
+
+//@primary:               #7d858c; //rgb(125, 133, 140)
+//@primary-hover:         #666d73; //rgb(102, 109, 115)
+//@secondary:             #d8dadc; //rgb(216, 218, 220)
+//@secondary-hover:       #cbced1; //rgb(203, 206, 209)
+
+//@black:                 #000000;
+
+// Brand colors
+// -------------------------
+
+@brand-primary:         #428bca;
+@brand-success:         #5cb85c;
+@brand-warning:         #f0ad4e;
+@brand-danger:          #d9534f;
+@brand-info:            #5bc0de;
+
+// Scaffolding
+// -------------------------
+
+@body-bg:               #fff;
+@text-color:            #cbcbcb; // @gray-dark
+
+// Links
+// -------------------------
+
+@link-color:            @brand-primary;
+@link-hover-color:      darken(@link-color, 15%);
+@link-hover-decoration: underline;
+
+// Typography
+// -------------------------
+
+@font-family-sans-serif:  Arial, Helvetica, "Helvetica Neue", sans-serif;
+@font-family-serif:       Georgia, "Times New Roman", Times, serif;
+@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
+@font-family-tahoma:      tahoma, arial, verdana, sans-serif;
+@font-family-base:        @font-family-sans-serif;
+
+@font-size-base:          11px;
+@font-size-large:         13px;
+@font-size-small:         9px;
+
+@font-size-h1:            floor(@font-size-base * 2.6);
+@font-size-h2:            floor(@font-size-base * 2.15);
+@font-size-h3:            ceil(@font-size-base * 1.7);
+@font-size-h4:            ceil(@font-size-base * 1.25);
+@font-size-h5:            @font-size-base;
+@font-size-h6:            ceil(@font-size-base * 0.85);
+
+@line-height-base:        1.428571429; // 20/14
+@line-height-computed:    floor(@font-size-base * @line-height-base);
+
+@headings-font-family:    @font-family-base;
+@headings-font-weight:    500;
+@headings-line-height:    1.1;
+@headings-color:          inherit;
+
+
+// Iconography
+// -------------------------
+
+@icon-font-path:          "../fonts/";
+@icon-font-name:          "glyphicons-halflings-regular";
+@icon-font-svg-id:        "glyphicons_halflingsregular";
+
+@icon-src-base64:               false;
+@huge-icon-size:                37px;
+@x-huge-icon-size:              45px;
+
+// Components
+// -------------------------
+// Based on 14px font-size and 1.428 line-height (~20px to start)
+
+@padding-base-vertical:          1px;
+@padding-base-horizontal:        3px;
+
+@padding-large-vertical:         10px;
+@padding-large-horizontal:       16px;
+
+@padding-small-vertical:         1px;
+@padding-small-horizontal:       3px;
+
+@padding-xs-vertical:            1px;
+@padding-xs-horizontal:          5px;
+
+@line-height-large:              1.33;
+@line-height-small:              1.5;
+
+@border-radius-base:             4px;
+@border-radius-large:            6px;
+@border-radius-small:            2px;
+
+@component-active-color:         #fff;
+@component-active-bg:            #7d858c; // @primary;
+
+@caret-width-base:               4px;
+@caret-width-large:              5px;
+
+// Tables
+// -------------------------
+
+@table-cell-padding:                 8px;
+@table-condensed-cell-padding:       5px;
+
+@table-bg:                           transparent; // overall background-color
+@table-bg-accent:                    #f9f9f9; // for striping
+@table-bg-hover:                     #f5f5f5;
+@table-bg-active:                    @table-bg-hover;
+
+@table-border-color:                 #ddd; // table and cell border
+
+
+// Buttons
+// -------------------------
+
+@btn-font-weight:                normal;
+
+@btn-default-color:              #333;
+@btn-default-bg:                 #fff;
+@btn-default-border:             #ccc;
+
+@btn-primary-color:              #fff;
+@btn-primary-bg:                 @brand-primary;
+@btn-primary-border:             darken(@btn-primary-bg, 5%);
+
+@btn-success-color:              #fff;
+@btn-success-bg:                 @brand-success;
+@btn-success-border:             darken(@btn-success-bg, 5%);
+
+@btn-warning-color:              #fff;
+@btn-warning-bg:                 @brand-warning;
+@btn-warning-border:             darken(@btn-warning-bg, 5%);
+
+@btn-danger-color:               #fff;
+@btn-danger-bg:                  @brand-danger;
+@btn-danger-border:              darken(@btn-danger-bg, 5%);
+
+@btn-info-color:                 #fff;
+@btn-info-bg:                    @brand-info;
+@btn-info-border:                darken(@btn-info-bg, 5%);
+
+@btn-link-disabled-color:        #f1f1f1; // @gray-light;
+
+// Allows for customizing button radius independently from global border radius
+@btn-border-radius-base:         @border-radius-base;
+@btn-border-radius-large:        @border-radius-large;
+@btn-border-radius-small:        @border-radius-small;
+
+// Forms
+// -------------------------
+
+@input-bg:                       #fff;
+@input-bg-disabled:              #ededed; // @gray-lighter;
+
+@input-color:                    #000;
+@input-border:                   #cfcfcf; // @gray;
+@input-border-radius:            @border-radius-base;
+@input-border-radius-large:      @border-radius-large;
+@input-border-radius-small:      @border-radius-small;
+@input-border-focus:             #66afe9;
+
+// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
+//** Default `.form-control` border radius
+// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
+@input-border-radius:            @border-radius-base;
+//** Large `.form-control` border radius
+@input-border-radius-large:      @border-radius-large;
+//** Small `.form-control` border radius
+@input-border-radius-small:      @border-radius-small;
+
+@input-color-placeholder:        #cfcfcf; // @gray;
+
+@input-height-base:              (floor(@font-size-base * @line-height-base) + (@padding-base-vertical * 2) + 5);
+@input-height-large:             (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
+@input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
+
+@form-group-margin-bottom:       15px;
+
+@legend-color:                   #cbcbcb; // @gray-dark
+@legend-border-color:            #e5e5e5;
+
+@input-group-addon-bg:           @input-bg;
+@input-group-addon-border-color: @input-border;
+
+// Disabled cursor for form controls and buttons.
+@cursor-disabled:                default;
+
+// Dropdowns
+// -------------------------
+
+@dropdown-bg:                    #fff;
+@dropdown-border:                rgba(0,0,0,.15);
+@dropdown-fallback-border:       #ccc;
+@dropdown-divider-bg:            #e5e5e5;
+
+@dropdown-link-color:            #444; // @gray-deep;
+@dropdown-link-hover-color:      darken(#444, 5%); // darken(@gray-deep, 5%);
+@dropdown-link-hover-bg:         #d8dadc; // @secondary;
+
+@dropdown-link-active-color:     @component-active-color;
+@dropdown-link-active-bg:        @component-active-bg;
+
+@dropdown-link-disabled-color:   #cfcfcf; // @gray;
+
+@dropdown-header-color:          #cfcfcf; // @gray;
+
+
+// COMPONENT VARIABLES
+// --------------------------------------------------
+
+
+// Z-index master list
+// -------------------------
+// Used for a bird's eye view of components dependent on the z-axis
+// Try to avoid customizing these :)
+
+@zindex-navbar:            1000;
+@zindex-dropdown:          1000;
+@zindex-popover:           1010;
+@zindex-tooltip:           1030;
+@zindex-navbar-fixed:      1030;
+@zindex-modal-background:  1040;
+@zindex-modal:             1050;
+
+// Media queries breakpoints
+// --------------------------------------------------
+
+// Extra small screen / phone
+// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
+@screen-xs:                  480px;
+@screen-xs-min:              @screen-xs;
+@screen-phone:               @screen-xs-min;
+
+// Small screen / tablet
+// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
+@screen-sm:                  768px;
+@screen-sm-min:              @screen-sm;
+@screen-tablet:              @screen-sm-min;
+
+// Medium screen / desktop
+// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
+@screen-md:                  992px;
+@screen-md-min:              @screen-md;
+@screen-desktop:             @screen-md-min;
+
+// Large screen / wide desktop
+// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
+@screen-lg:                  1200px;
+@screen-lg-min:              @screen-lg;
+@screen-lg-desktop:          @screen-lg-min;
+
+// So media queries don't overlap when required, provide a maximum
+@screen-xs-max:              (@screen-sm-min - 1);
+@screen-sm-max:              (@screen-md-min - 1);
+@screen-md-max:              (@screen-lg-min - 1);
+
+
+// Grid system
+// --------------------------------------------------
+
+// Number of columns in the grid system
+@grid-columns:              12;
+// Padding, to be divided by two and applied to the left and right of all columns
+@grid-gutter-width:         30px;
+
+// Navbar collapse
+
+// Point at which the navbar becomes uncollapsed
+@grid-float-breakpoint:     @screen-sm-min;
+// Point at which the navbar begins collapsing
+@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
+
+
+// Navbar
+// -------------------------
+
+// Basics of a navbar
+@navbar-height:                    50px;
+@navbar-margin-bottom:             @line-height-computed;
+@navbar-border-radius:             @border-radius-base;
+@navbar-padding-horizontal:        floor(@grid-gutter-width / 2);
+@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
+@navbar-collapse-max-height:       340px;
+
+@navbar-default-color:             #777;
+@navbar-default-bg:                #f8f8f8;
+@navbar-default-border:            darken(@navbar-default-bg, 6.5%);
+
+// Navbar links
+@navbar-default-link-color:                #777;
+@navbar-default-link-hover-color:          #333;
+@navbar-default-link-hover-bg:             transparent;
+@navbar-default-link-active-color:         #555;
+@navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);
+@navbar-default-link-disabled-color:       #ccc;
+@navbar-default-link-disabled-bg:          transparent;
+
+// Navbar brand label
+@navbar-default-brand-color:               @navbar-default-link-color;
+@navbar-default-brand-hover-color:         darken(@navbar-default-brand-color, 10%);
+@navbar-default-brand-hover-bg:            transparent;
+
+// Navbar toggle
+@navbar-default-toggle-hover-bg:           #ddd;
+@navbar-default-toggle-icon-bar-bg:        #ccc;
+@navbar-default-toggle-border-color:       #ddd;
+
+
+// Inverted navbar
+//
+// Reset inverted navbar basics
+@navbar-inverse-color:                      #f1f1f1; // @gray-light;
+@navbar-inverse-bg:                         #222;
+@navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);
+
+// Inverted navbar links
+@navbar-inverse-link-color:                 #f1f1f1; // @gray-light;
+@navbar-inverse-link-hover-color:           #fff;
+@navbar-inverse-link-hover-bg:              transparent;
+@navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
+@navbar-inverse-link-active-bg:             darken(@navbar-inverse-bg, 10%);
+@navbar-inverse-link-disabled-color:        #444;
+@navbar-inverse-link-disabled-bg:           transparent;
+
+// Inverted navbar brand label
+@navbar-inverse-brand-color:                @navbar-inverse-link-color;
+@navbar-inverse-brand-hover-color:          #fff;
+@navbar-inverse-brand-hover-bg:             transparent;
+
+// Inverted navbar toggle
+@navbar-inverse-toggle-hover-bg:            #333;
+@navbar-inverse-toggle-icon-bar-bg:         #fff;
+@navbar-inverse-toggle-border-color:        #333;
+
+
+// Navs
+// -------------------------
+
+@nav-link-padding:                          10px 15px;
+@nav-link-hover-bg:                         #ededed; // @gray-lighter;
+
+@nav-disabled-link-color:                   #f1f1f1; // @gray-light;
+@nav-disabled-link-hover-color:             #f1f1f1; // @gray-light;
+
+@nav-open-link-hover-color:                 #fff;
+
+// Tabs
+@nav-tabs-border-color:                     #ddd;
+
+@nav-tabs-link-hover-border-color:          #ededed; // @gray-lighter;
+
+@nav-tabs-active-link-hover-bg:             @body-bg;
+@nav-tabs-active-link-hover-color:          #cfcfcf; // @gray;
+@nav-tabs-active-link-hover-border-color:   #ddd;
+
+@nav-tabs-justified-link-border-color:            #ddd;
+@nav-tabs-justified-active-link-border-color:     @body-bg;
+
+// Pills
+@nav-pills-border-radius:                   @border-radius-base;
+@nav-pills-active-link-hover-bg:            @component-active-bg;
+@nav-pills-active-link-hover-color:         @component-active-color;
+
+
+// Pagination
+// -------------------------
+@pagination-color:                     @link-color;
+@pagination-bg:                        #fff;
+@pagination-border:                    #ddd;
+
+@pagination-hover-color:               @link-hover-color;
+@pagination-hover-bg:                  #ededed; // @gray-lighter;
+@pagination-hover-border:              #ddd;
+
+@pagination-active-bg:                 @brand-primary;
+@pagination-active-color:              #fff;
+@pagination-active-border:             @brand-primary;
+
+@pagination-disabled-color:            #f1f1f1; // @gray-light;
+@pagination-disabled-bg:               #fff;
+@pagination-disabled-border:           #ddd;
+
+// Pager
+// -------------------------
+@pager-bg:                             @pagination-bg;
+@pager-border:                         @pagination-border;
+@pager-border-radius:                  15px;
+
+@pager-hover-bg:                       @pagination-hover-bg;
+
+@pager-active-bg:                      @pagination-active-bg;
+@pager-active-color:                   @pagination-active-color;
+
+@pager-disabled-color:                 #f1f1f1; // @gray-light;
+
+
+// Jumbotron
+// -------------------------
+
+@jumbotron-padding:              30px;
+@jumbotron-color:                inherit;
+@jumbotron-bg:                   #ededed; // @gray-lighter;
+@jumbotron-heading-color:        inherit;
+@jumbotron-font-size:            ceil(@font-size-base * 1.5);
+@jumbotron-heading-font-size:    ceil((@font-size-base * 4.5));
+
+// Form states and alerts
+// -------------------------
+
+@state-success-text:             #3c763d;
+@state-success-bg:               #dff0d8;
+@state-success-border:           darken(spin(@state-success-bg, -10), 5%);
+
+@state-info-text:                #31708f;
+@state-info-bg:                  #d9edf7;
+@state-info-border:              darken(spin(@state-info-bg, -10), 7%);
+
+@state-warning-text:             #8a6d3b;
+@state-warning-bg:               #fcf8e3;
+@state-warning-border:           darken(spin(@state-warning-bg, -10), 5%);
+
+@state-danger-text:              #a94442;
+@state-danger-bg:                #f2dede;
+@state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);
+
+
+// Tooltips
+// -------------------------
+@tooltip-max-width:           200px;
+@tooltip-color:               #fff;
+@tooltip-bg:                  #000;
+@tooltip-opacity:             .9;
+
+@tooltip-arrow-width:         5px;
+@tooltip-arrow-color:         @tooltip-bg;
+
+
+// Popovers
+// -------------------------
+@popover-bg:                          #fff;
+@popover-max-width:                   276px;
+@popover-border-color:                rgba(0,0,0,.2);
+@popover-fallback-border-color:       #ccc;
+
+@popover-title-bg:                    darken(@popover-bg, 3%);
+
+@popover-arrow-width:                 10px;
+@popover-arrow-color:                 #fff;
+
+@popover-arrow-outer-width:           (@popover-arrow-width + 1);
+@popover-arrow-outer-color:           rgba(0,0,0,.25);
+@popover-arrow-outer-fallback-color:  #999;
+
+
+// Labels
+// -------------------------
+
+@label-default-bg:            #f1f1f1; // @gray-light;
+@label-primary-bg:            @brand-primary;
+@label-success-bg:            @brand-success;
+@label-info-bg:               @brand-info;
+@label-warning-bg:            @brand-warning;
+@label-danger-bg:             @brand-danger;
+
+@label-color:                 #fff;
+@label-link-hover-color:      #fff;
+
+
+// Modals
+// -------------------------
+@modal-inner-padding:         20px;
+
+@modal-title-padding:         15px;
+@modal-title-line-height:     @line-height-base;
+
+@modal-content-bg:                             #fff;
+@modal-content-border-color:                   rgba(0,0,0,.2);
+@modal-content-fallback-border-color:          #999;
+
+@modal-backdrop-bg:           #000;
+@modal-backdrop-opacity:      .5;
+@modal-header-border-color:   #e5e5e5;
+@modal-footer-border-color:   @modal-header-border-color;
+
+@modal-lg:                    900px;
+@modal-md:                    600px;
+@modal-sm:                    300px;
+
+// Alerts
+// -------------------------
+@alert-padding:               15px;
+@alert-border-radius:         @border-radius-base;
+@alert-link-font-weight:      bold;
+
+@alert-success-bg:            @state-success-bg;
+@alert-success-text:          @state-success-text;
+@alert-success-border:        @state-success-border;
+
+@alert-info-bg:               @state-info-bg;
+@alert-info-text:             @state-info-text;
+@alert-info-border:           @state-info-border;
+
+@alert-warning-bg:            @state-warning-bg;
+@alert-warning-text:          @state-warning-text;
+@alert-warning-border:        @state-warning-border;
+
+@alert-danger-bg:             @state-danger-bg;
+@alert-danger-text:           @state-danger-text;
+@alert-danger-border:         @state-danger-border;
+
+
+// Progress bars
+// -------------------------
+@progress-bg:                 #f5f5f5;
+@progress-bar-color:          #fff;
+@progress-border-radius:      @border-radius-base;
+
+@progress-bar-bg:             @brand-primary;
+@progress-bar-success-bg:     @brand-success;
+@progress-bar-warning-bg:     @brand-warning;
+@progress-bar-danger-bg:      @brand-danger;
+@progress-bar-info-bg:        @brand-info;
+
+
+// List group
+// -------------------------
+@list-group-bg:               #fff;
+@list-group-border:           #ddd;
+@list-group-border-radius:    @border-radius-base;
+
+@list-group-hover-bg:         #f5f5f5;
+@list-group-active-color:     @component-active-color;
+@list-group-active-bg:        @component-active-bg;
+@list-group-active-border:    @list-group-active-bg;
+@list-group-active-text-color:  lighten(@list-group-active-bg, 40%);
+
+@list-group-disabled-color:      #f1f1f1; // @gray-light;
+@list-group-disabled-bg:         #ededed; // @gray-lighter;
+@list-group-disabled-text-color: @list-group-disabled-color;
+
+@list-group-link-color:          #555;
+@list-group-link-hover-color:   @list-group-link-color;
+@list-group-link-heading-color:  #333;
+
+
+// Panels
+// -------------------------
+@panel-bg:                    #fff;
+@panel-body-padding:          15px;
+@panel-heading-padding:       10px 15px;
+@panel-footer-padding:        @panel-heading-padding;
+@panel-inner-border:          #ddd;
+@panel-border-radius:         @border-radius-base;
+@panel-footer-bg:             #f5f5f5;
+
+//@panel-default-text:          @gray-dark;
+@panel-default-border:        #ddd;
+@panel-default-heading-bg:    #f5f5f5;
+
+@panel-primary-text:          #fff;
+@panel-primary-border:        @brand-primary;
+@panel-primary-heading-bg:    @brand-primary;
+
+@panel-success-text:          @state-success-text;
+@panel-success-border:        @state-success-border;
+@panel-success-heading-bg:    @state-success-bg;
+
+@panel-warning-text:          @state-warning-text;
+@panel-warning-border:        @state-warning-border;
+@panel-warning-heading-bg:    @state-warning-bg;
+
+@panel-danger-text:           @state-danger-text;
+@panel-danger-border:         @state-danger-border;
+@panel-danger-heading-bg:     @state-danger-bg;
+
+@panel-info-text:             @state-info-text;
+@panel-info-border:           @state-info-border;
+@panel-info-heading-bg:       @state-info-bg;
+
+
+// Thumbnails
+// -------------------------
+@thumbnail-padding:           4px;
+@thumbnail-bg:                @body-bg;
+@thumbnail-border:            #ddd;
+@thumbnail-border-radius:     @border-radius-base;
+
+//@thumbnail-caption-color:     @text-color;
+@thumbnail-caption-padding:   9px;
+
+
+// Wells
+// -------------------------
+@well-bg:                     #f5f5f5;
+@well-border:                 darken(@well-bg, 7%);
+
+// Badges
+// -------------------------
+@badge-color:                 #fff;
+@badge-link-hover-color:      #fff;
+@badge-bg:                    #f1f1f1; // @gray-light;
+
+@badge-active-color:          @link-color;
+@badge-active-bg:             #fff;
+
+@badge-font-weight:           bold;
+@badge-line-height:           1;
+@badge-border-radius:         10px;
+
+
+// Breadcrumbs
+// -------------------------
+@breadcrumb-padding-vertical:   8px;
+@breadcrumb-padding-horizontal: 15px;
+@breadcrumb-bg:               #f5f5f5;
+@breadcrumb-color:            #ccc;
+@breadcrumb-active-color:     #f1f1f1; // @gray-light;
+@breadcrumb-separator:        "/";
+
+
+// Carousel
+// ------------------------
+
+@carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);
+
+@carousel-control-color:                      #fff;
+@carousel-control-width:                      15%;
+@carousel-control-opacity:                    .5;
+@carousel-control-font-size:                  20px;
+
+@carousel-indicator-active-bg:                #fff;
+@carousel-indicator-border-color:             #fff;
+
+@carousel-caption-color:                      #fff;
+
+
+// Close
+// ------------------------
+@close-font-weight:           bold;
+@close-color:                 #000;
+@close-text-shadow:           0 1px 0 #fff;
+
+
+// Code
+// ------------------------
+@code-color:                  #c7254e;
+@code-bg:                     #f9f2f4;
+
+@kbd-color:                   #fff;
+@kbd-bg:                      #333;
+
+@pre-bg:                      #f5f5f5;
+//@pre-color:                   @gray-dark;
+@pre-border-color:            #ccc;
+@pre-scrollable-max-height:   340px;
+
+// Type
+// ------------------------
+@text-muted:                  #f1f1f1; // @gray-light;
+@abbr-border-color:           #f1f1f1; // @gray-light;
+@headings-small-color:        #f1f1f1; // @gray-light;
+@blockquote-small-color:      #f1f1f1; // @gray-light;
+@blockquote-font-size:        (@font-size-base * 1.25);
+@blockquote-border-color:     #ededed; // @gray-lighter;
+@page-header-border-color:    #ededed; // @gray-lighter;
+
+// Miscellaneous
+// -------------------------
+
+// Hr border color
+@hr-border:                   #ededed; // @gray-lighter;
+
+// Horizontal forms & lists
+@component-offset-horizontal: 180px;
+@blockquote-font-size:        (@font-size-base * 1.25);
+@dl-horizontal-offset:        @component-offset-horizontal;
+@dl-horizontal-breakpoint:    @grid-float-breakpoint;
+
+
+// Container sizes
+// --------------------------------------------------
+
+// Small screen / tablet
+@container-tablet:             ((720px + @grid-gutter-width));
+@container-sm:                 @container-tablet;
+
+// Medium screen / desktop
+@container-desktop:            ((940px + @grid-gutter-width));
+@container-md:                 @container-desktop;
+
+// Large screen / wide desktop
+@container-large-desktop:      ((1140px + @grid-gutter-width));
+@container-lg:                 @container-large-desktop;
+
+
+// Texture offsets
+// --------------------------------------------------
+
+// Common components texture
+@common-controls: "controls/common-controls.png";
+@common-controls2x: "controls/common-controls@2x.png";
+
+// Dialog alerts
+@alerts-offset-x: 0;
+@alerts-offset-y: 0;
+
+// Dialog close
+@but-close-offset-x: -26px;
+@but-close-offset-y: -151px;
+
+// Dropdown arrow
+@arrow-small-offset-x: -85px;
+@arrow-small-offset-y: -96px;
+
+// Dropdown arrow up
+@arrow-up-small-offset-x: -85px;
+@arrow-up-small-offset-y: -104px;
+
+// Dropdown arrow big
+@arrow-big-offset-x: -41px;
+@arrow-big-offset-y: -144px;
+
+// Checkbox
+@checkbox-offset-x: -35px;
+@checkbox-offset-y: 0px;
+
+// Radio button
+@radio-offset-x: -35px;
+@radio-offset-y: -65px;
+
+// Menu check
+@menu-check-offset-x: -41px;
+@menu-check-offset-y: -172px;
+
+// Multislider thumb
+@slide-thumb-offset-x: -13px;
+@slide-thumb-offset-y: -150px;
+
+// Slider thumb
+@multislide-thumb-offset-x: 0px;
+@multislide-thumb-offset-y: -150px;
+
+// Slider track
+@slide-track-offset-x: 0px;
+@slide-track-offset-y: -195px;
+
+// Input error
+@input-error-offset-x: -73px;
+@input-error-offset-y: -170px;
+
+// Input warning
+@input-warning-offset-x: -57px;
+@input-warning-offset-y: -170px;
+
+// Spinner
+@spinner-offset-x: -41px;
+@spinner-offset-y: -187px;
+
+// Search dialog
+@search-dlg-offset-x: -36px;
+@search-dlg-offset-y: -96px;
+
+// No color
+@nocolor-offset-x: 0;
+@nocolor-offset-y: -137px;
+
+// Plus
+@plus-offset-x: -80px;
+@plus-offset-y: -184px;
+
+@dl-horizontal-offset:        @component-offset-horizontal;
+// Point at which .dl-horizontal becomes horizontal
+@dl-horizontal-breakpoint:    @grid-float-breakpoint;
\ No newline at end of file