removed CSS contain from widgets

src/public/app/layouts/desktop_layout.js

@@ -71,7 +71,6 @@ export default class DesktopLayout {
                     .command("showRecentChanges"))
                 .child(new SpacerWidget(40, 0))
                 .child(new FlexContainer("column")
-                    .overflowing()
                     .id("plugin-buttons"))
                 .child(new SpacerWidget(0, 1000))
                 .child(new ProtectedSessionStatusWidget())
@@ -87,7 +86,7 @@ export default class DesktopLayout {
             .child(new FlexContainer('column')
                 .id('rest-pane')
                 .css("flex-grow", "1")
-                .child(new FlexContainer('row').overflowing()
+                .child(new FlexContainer('row')
                     .child(new TabRowWidget())
                     .child(new TitleBarButtonsWidget())
                     .css('height', '40px')
@@ -103,7 +102,6 @@ export default class DesktopLayout {
                                 .child(new FlexContainer('row').class('title-row')
                                     .css('align-items: center;')
                                     .cssBlock('.title-row > * { margin: 5px; }')
-                                    .overflowing()
                                     .child(new NoteIconWidget())
                                     .child(new NoteTitleWidget())
                                     .child(new SpacerWidget(0, 1))

src/public/app/layouts/mobile_layout.js

@@ -98,7 +98,7 @@ export default class MobileLayout {
             .child(new ScreenContainer("detail", "column")
                 .class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-7 col-md-8 col-lg-8")
                 .css('max-height', '100%')
-                .child(new FlexContainer('row').overflowing()
+                .child(new FlexContainer('row')
                     .css('font-size', 'larger')
                     .css('align-items', 'center')
                     .css('position', 'fixed')

src/public/app/services/resizer.js

@@ -54,7 +54,7 @@ function setupRightPaneResizer() {
         leftInstance = Split(['#center-pane', '#right-pane'], {
             sizes: [100 - rightPaneWidth, rightPaneWidth],
             gutterSize: 5,
-            onDragEnd: sizes => options.save('rightPaneWidth', Math.round(sizes[0]))
+            onDragEnd: sizes => options.save('rightPaneWidth', Math.round(sizes[1]))
         });
     }
 }

src/public/app/widgets/attribute_widgets/attribute_detail.js

@@ -237,7 +237,6 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
         utils.bindElShortcut(this.$widget, 'ctrl+return', () => this.saveAndClose());
         utils.bindElShortcut(this.$widget, 'esc', () => this.cancelAndClose());
 
-        this.contentSized();
 
         this.$title = this.$widget.find('.attr-detail-title');
 

src/public/app/widgets/attribute_widgets/attribute_editor.js

@@ -185,7 +185,6 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.contentSized();
         this.$editor = this.$widget.find('.attribute-list-editor');
 
         this.initialized = this.initEditor();

src/public/app/widgets/basic_widget.js

@@ -26,12 +26,14 @@ class BasicWidget extends Component {
     }
 
     contentSized() {
-        this.css('contain', 'layout paint');
+        console.log("Using contentSized() is deprecated NOOP and it is recommended to remove its use.");
+
         return this;
     }
 
     overflowing() {
-        this.css('contain', 'none !important');
+        console.log("Using overflowing() is deprecated NOOP and it is recommended to remove its use.");
+
         return this;
     }
 

src/public/app/widgets/buttons/button_widget.js

@@ -19,7 +19,6 @@ export default class ButtonWidget extends NoteContextAwareWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.overflowing();
 
         if (this.settings.onClick) {
             this.$widget.on("click", () => this.settings.onClick(this));

src/public/app/widgets/buttons/global_menu.js

@@ -76,7 +76,6 @@ const TPL = `
 export default class GlobalMenuWidget extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
-        this.overflowing();
 
         this.$widget.find(".show-about-dialog-button").on('click',
             () => import("../../dialogs/about.js").then(d => d.showDialog()));

src/public/app/widgets/buttons/note_actions.js

@@ -32,7 +32,6 @@ const TPL = `
 export default class NoteActionsWidget extends NoteContextAwareWidget {
     doRender() {
         this.$widget = $(TPL);
-        this.overflowing();
 
         this.$showSourceButton = this.$widget.find('.show-source-button');
         this.$renderNoteButton = this.$widget.find('.render-note-button');

src/public/app/widgets/collapsible_widget.js

@@ -16,7 +16,6 @@ export default class CollapsibleWidget extends NoteContextAwareWidget {
 
     doRender() {
         this.$widget = $(WIDGET_TPL);
-        this.contentSized();
         this.$widget.find('[data-target]').attr('data-target', "#" + this.componentId);
 
         this.$bodyWrapper = this.$widget.find('.body-wrapper');

src/public/app/widgets/containers/ribbon_container.js

@@ -130,7 +130,6 @@ export default class RibbonContainer extends NoteContextAwareWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.overflowing();
 
         this.$tabContainer = this.$widget.find('.ribbon-tab-container');
         this.$buttonContainer = this.$widget.find('.ribbon-button-container');

src/public/app/widgets/history_navigation.js

@@ -25,7 +25,6 @@ export default class HistoryNavigationWidget extends BasicWidget {
         }
 
         this.$widget = $(TPL);
-        this.contentSized();
 
         const contextMenuHandler = e => {
             e.preventDefault();

src/public/app/widgets/mobile_widgets/close_detail_button.js

@@ -8,7 +8,6 @@ const TPL = `
 class CloseDetailButtonWidget extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
-        this.overflowing();
 
         this.$widget.on('click', () => this.triggerCommand('setActiveScreen', {screen:'tree'}));
     }

src/public/app/widgets/mobile_widgets/mobile_detail_menu.js

@@ -10,7 +10,6 @@ const TPL = `<button type="button" class="action-button bx bx-menu" style="paddi
 class MobileDetailMenuWidget extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
-        this.overflowing();
 
         this.$widget.on("click", async e => {
             const note = appContext.tabManager.getActiveContextNote();

src/public/app/widgets/mobile_widgets/mobile_global_buttons.js

@@ -48,7 +48,6 @@ const WIDGET_TPL = `
 class MobileGlobalButtonsWidget extends BasicWidget {
     doRender() {
         this.$widget = $(WIDGET_TPL);
-        this.overflowing();
     }
 }
 

src/public/app/widgets/note_detail.js

@@ -75,7 +75,6 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.contentSized();
 
         this.$widget.on("dragover", e => e.preventDefault());
 

src/public/app/widgets/note_icon.js

@@ -78,7 +78,6 @@ const TPL = `
 export default class NoteIconWidget extends NoteContextAwareWidget {
     doRender() {
         this.$widget = $(TPL);
-        this.overflowing();
         this.$icon = this.$widget.find('button.note-icon');
         this.$iconList = this.$widget.find('.icon-list');
         this.$iconList.on('click', 'span', async e => {

src/public/app/widgets/note_list.js

@@ -32,7 +32,6 @@ export default class NoteListWidget extends NoteContextAwareWidget {
     doRender() {
         this.$widget = $(TPL);
         this.$content = this.$widget.find('.note-list-widget-content');
-        this.contentSized();
 
         const observer = new IntersectionObserver(entries => {
             this.isIntersecting = entries[0].isIntersecting;

src/public/app/widgets/note_title.js

@@ -44,7 +44,6 @@ export default class NoteTitleWidget extends NoteContextAwareWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.contentSized();
         this.$noteTitle = this.$widget.find(".note-title");
 
         this.$noteTitle.on('input', () => this.spacedUpdate.scheduleUpdate());

src/public/app/widgets/note_type.js

@@ -34,7 +34,6 @@ const TPL = `
 export default class NoteTypeWidget extends NoteContextAwareWidget {
     doRender() {
         this.$widget = $(TPL);
-        this.overflowing();
 
         this.$widget.on('show.bs.dropdown', () => this.renderDropdown());
 

src/public/app/widgets/note_update_status.js

@@ -27,7 +27,6 @@ export default class NoteUpdateStatusWidget extends NoteContextAwareWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.overflowing();
 
         this.$filePath = this.$widget.find(".file-path");
         this.$fileLastModified = this.$widget.find(".file-last-modified");

src/public/app/widgets/protected_note_switch.js

@@ -73,7 +73,6 @@ const TPL = `
 export default class ProtectedNoteSwitchWidget extends NoteContextAwareWidget {
     doRender() {
         this.$widget = $(TPL);
-        this.overflowing();
 
         this.$protectButton = this.$widget.find(".protect-button");
         this.$protectButton.on('click', () => protectedSessionService.protectNote(this.noteId, true, false));

src/public/app/widgets/quick_search.js

@@ -43,7 +43,6 @@ const MAX_DISPLAYED_NOTES = 15;
 export default class QuickSearchWidget extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
-        this.overflowing();
 
         this.$searchString = this.$widget.find('.search-string');
         this.$dropdownMenu = this.$widget.find('.dropdown-menu');

src/public/app/widgets/ribbon_widgets/basic_properties.js

@@ -52,7 +52,6 @@ export default class BasicPropertiesWidget extends NoteContextAwareWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.overflowing();
 
         this.$widget.find(".note-type-container").append(this.noteTypeWidget.render());
         this.$widget.find(".protected-note-switch-container").append(this.protectedNoteSwitchWidget.render());

src/public/app/widgets/ribbon_widgets/book_properties.js

@@ -58,7 +58,6 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.overflowing();
 
         this.$viewTypeSelect = this.$widget.find('.view-type-select');
         this.$viewTypeSelect.on('change', () => this.toggleViewType(this.$viewTypeSelect.val()));

src/public/app/widgets/ribbon_widgets/file_properties.js

@@ -70,7 +70,6 @@ export default class FilePropertiesWidget extends NoteContextAwareWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.contentSized();
         this.$fileNoteId = this.$widget.find(".file-note-id");
         this.$fileName = this.$widget.find(".file-filename");
         this.$fileType = this.$widget.find(".file-filetype");

src/public/app/widgets/ribbon_widgets/image_properties.js

@@ -52,7 +52,6 @@ export default class ImagePropertiesWidget extends NoteContextAwareWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.contentSized();
         this.$copyToClipboardButton = this.$widget.find(".image-copy-to-clipboard");
         this.$uploadNewRevisionButton = this.$widget.find(".image-upload-new-revision");
         this.$uploadNewRevisionInput = this.$widget.find(".image-upload-new-revision-input");

src/public/app/widgets/ribbon_widgets/inherited_attribute_list.js

@@ -38,7 +38,6 @@ export default class InheritedAttributesWidget extends NoteContextAwareWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.overflowing();
 
         this.$container = this.$widget.find('.inherited-attributes-container');
         this.$widget.append(this.attributeDetailWidget.render());

src/public/app/widgets/ribbon_widgets/link_map.js

@@ -78,7 +78,6 @@ export default class LinkMapWidget extends NoteContextAwareWidget {
 
         this.$styleResolver = this.$widget.find('.style-resolver');
 
-        this.overflowing();
 
         window.addEventListener('resize', () => {
             if (!this.graph) { // no graph has been even rendered

src/public/app/widgets/ribbon_widgets/note_info_widget.js

@@ -76,7 +76,6 @@ export default class NoteInfoWidget extends NoteContextAwareWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.overflowing();
 
         this.$noteId = this.$widget.find(".note-info-note-id");
         this.$dateCreated = this.$widget.find(".note-info-date-created");

src/public/app/widgets/ribbon_widgets/note_paths.js

@@ -50,7 +50,6 @@ export default class NotePathsWidget extends NoteContextAwareWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.overflowing();
 
         this.$notePathList = this.$widget.find(".note-path-list");
         this.$widget.on('show.bs.dropdown', () => this.renderDropdown());

src/public/app/widgets/ribbon_widgets/note_properties.js

@@ -30,7 +30,6 @@ export default class NotePropertiesWidget extends NoteContextAwareWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.contentSized();
 
         this.$pageUrl = this.$widget.find('.page-url');
     }

src/public/app/widgets/ribbon_widgets/owned_attribute_list.js

@@ -41,7 +41,6 @@ export default class OwnedAttributeListWidget extends NoteContextAwareWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.overflowing();
 
         this.$widget.find('.attr-editor-placeholder').replaceWith(this.attributeEditorWidget.render());
         this.$widget.append(this.attributeDetailWidget.render());

src/public/app/widgets/ribbon_widgets/promoted_attributes.js

@@ -37,7 +37,6 @@ const TPL = `
 export default class PromotedAttributesWidget extends NoteContextAwareWidget {
     doRender() {
         this.$widget = $(TPL);
-        this.overflowing();
         this.$container = this.$widget.find(".promoted-attributes-container");
     }
 

src/public/app/widgets/ribbon_widgets/search_definition.js

@@ -217,8 +217,6 @@ export default class SearchDefinitionWidget extends NoteContextAwareWidget {
         this.$widget = $(TPL);
         this.$component = this.$widget.find('.search-definition-widget');
 
-        this.contentSized();
-        this.overflowing();
 
         this.$widget.on('click', '[data-search-option-add]', async event => {
             const searchOptionName = $(event.target).attr('data-search-option-add');

src/public/app/widgets/ribbon_widgets/similar_notes.js

@@ -47,7 +47,6 @@ export default class SimilarNotesWidget extends NoteContextAwareWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.overflowing();
 
         this.$similarNotesWrapper = this.$widget.find(".similar-notes-wrapper");
     }

src/public/app/widgets/search_result.js

@@ -44,7 +44,6 @@ export default class SearchResultWidget extends NoteContextAwareWidget {
         this.$content = this.$widget.find('.search-result-widget-content');
         this.$noResults = this.$widget.find('.search-no-results');
         this.$notExecutedYet = this.$widget.find('.search-not-executed-yet');
-        this.contentSized();
     }
 
     async refreshWithNote(note) {

src/public/app/widgets/sql_result.js

@@ -20,7 +20,6 @@ export default class SqlResultWidget extends NoteContextAwareWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.overflowing();
 
         this.$sqlConsoleResultContainer = this.$widget.find('.sql-console-result-container');
     }

src/public/app/widgets/sql_table_schemas.js

@@ -42,7 +42,6 @@ export default class SqlTableSchemasWidget extends NoteContextAwareWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.overflowing();
 
         this.$sqlConsoleTableSchemas = this.$widget.find('.sql-table-schemas');
     }

src/public/app/widgets/sync_status.js

@@ -97,7 +97,6 @@ export default class SyncStatusWidget extends BasicWidget {
         this.$widget.find('.sync-status-icon:not(.sync-status-in-progress)')
             .on('click', () => syncService.syncNow())
 
-        this.overflowing();
     }
 
     showIcon(className) {

src/public/app/widgets/tab_row.js

@@ -233,7 +233,6 @@ const TAB_ROW_TPL = `
 export default class TabRowWidget extends BasicWidget {
     doRender() {
         this.$widget = $(TAB_ROW_TPL);
-        this.overflowing();
 
         this.draggabillies = [];
 

src/public/app/widgets/title_bar_buttons.js

@@ -35,7 +35,6 @@ export default class TitleBarButtonsWidget extends BasicWidget {
         }
 
         this.$widget = $(TPL);
-        this.contentSized();
 
         const $minimizeBtn = this.$widget.find(".minimize-btn");
         const $maximizeBtn = this.$widget.find(".maximize-btn");

src/public/app/widgets/type_widgets/book.js

@@ -22,7 +22,6 @@ export default class BookTypeWidget extends TypeWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.contentSized();
         this.$helpNoChildren = this.$widget.find('.note-detail-book-empty-help');
     }
 

src/public/app/widgets/type_widgets/deleted.js

@@ -14,6 +14,5 @@ export default class DeletedTypeWidget extends TypeWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.contentSized();
     }
 }

src/public/app/widgets/type_widgets/editable_code.js

@@ -25,7 +25,6 @@ export default class EditableCodeTypeWidget extends TypeWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.contentSized();
         this.$editor = this.$widget.find('.note-detail-code-editor');
         this.$executeButton = this.$widget.find('.execute-button');
 

src/public/app/widgets/type_widgets/editable_text.js

@@ -77,7 +77,6 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.contentSized();
         this.$editor = this.$widget.find('.note-detail-editable-text-editor');
 
         this.initialized = this.initEditor();

src/public/app/widgets/type_widgets/empty.js

@@ -49,7 +49,6 @@ export default class EmptyTypeWidget extends TypeWidget {
         // FIXME: this might be optimized - cleaned up after use since it's always used only for new tab
 
         this.$widget = $(TPL);
-        this.contentSized();
         this.$autoComplete = this.$widget.find(".note-autocomplete");
 
         noteAutocompleteService.initNoteAutocomplete(this.$autoComplete, {

src/public/app/widgets/type_widgets/file.js

@@ -42,7 +42,6 @@ export default class FileTypeWidget extends TypeWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.contentSized();
         this.$previewContent = this.$widget.find(".file-preview-content");
         this.$previewNotAvailable = this.$widget.find(".file-preview-not-available");
         this.$pdfPreview = this.$widget.find(".pdf-preview");

src/public/app/widgets/type_widgets/image.js

@@ -43,7 +43,6 @@ class ImageTypeWidget extends TypeWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.contentSized();
         this.$imageWrapper = this.$widget.find('.note-detail-image-wrapper');
         this.$imageView = this.$widget.find('.note-detail-image-view')
             .attr("id", "image-view-" + utils.randomString(10));

src/public/app/widgets/type_widgets/protected_session.js

@@ -25,7 +25,6 @@ export default class ProtectedSessionTypeWidget extends TypeWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.contentSized();
         this.$passwordForm = this.$widget.find(".protected-session-password-form");
         this.$passwordInput = this.$widget.find(".protected-session-password");
 

src/public/app/widgets/type_widgets/read_only_code.js

@@ -32,7 +32,6 @@ export default class ReadOnlyCodeTypeWidget extends TypeWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.contentSized();
         this.$content = this.$widget.find('.note-detail-read-only-code-content');
 
         this.$widget.find('.edit-code-note-button').on('click', () => {

src/public/app/widgets/type_widgets/read_only_text.js

@@ -65,7 +65,6 @@ export default class ReadOnlyTextTypeWidget extends AbstractTextTypeWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.contentSized();
 
         this.$content = this.$widget.find('.note-detail-readonly-text-content');
 

src/public/app/widgets/type_widgets/relation_map.js

@@ -99,7 +99,6 @@ export default class RelationMapTypeWidget extends TypeWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.contentSized();
         this.$relationMapContainer = this.$widget.find(".relation-map-container");
         this.$createChildNote = this.$widget.find(".relation-map-create-child-note");
         this.$zoomInButton = this.$widget.find(".relation-map-zoom-in");

src/public/app/widgets/type_widgets/render.js

@@ -17,7 +17,6 @@ export default class RenderTypeWidget extends TypeWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.contentSized();
         this.$noteDetailRenderHelp = this.$widget.find('.note-detail-render-help');
         this.$noteDetailRenderContent = this.$widget.find('.note-detail-render-content');
     }

src/public/stylesheets/style.css

@@ -602,10 +602,6 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     pointer-events: none;
 }
 
-.component {
-    contain: size;
-}
-
 .toast {
     background-color: var(--accented-background-color) !important;
     color: var(--main-text-color) !important;