set cssClass and other note related classes on the root widget instead, fixes #1799

package.json

@@ -52,7 +52,7 @@
     "is-svg": "4.3.1",
     "jimp": "0.16.1",
     "joplin-turndown-plugin-gfm": "1.0.12",
-    "jsdom": "16.5.1",
+    "jsdom": "16.5.2",
     "mime-types": "2.1.29",
     "multer": "1.4.2",
     "node-abi": "2.21.0",

src/public/app/layouts/desktop_layout.js

@@ -1,9 +1,9 @@
-import FlexContainer from "../widgets/flex_container.js";
+import FlexContainer from "../widgets/containers/flex_container.js";
 import GlobalMenuWidget from "../widgets/global_menu.js";
 import TabRowWidget from "../widgets/tab_row.js";
 import TitleBarButtonsWidget from "../widgets/title_bar_buttons.js";
 import StandardTopWidget from "../widgets/standard_top_widget.js";
-import SidePaneContainer from "../widgets/side_pane_container.js";
+import SidePaneContainer from "../widgets/containers/side_pane_container.js";
 import NoteTreeWidget from "../widgets/note_tree.js";
 import TabCachingWidget from "../widgets/tab_caching_widget.js";
 import NotePathsWidget from "../widgets/note_paths.js";
@@ -20,12 +20,12 @@ import SimilarNotesWidget from "../widgets/similar_notes.js";
 import WhatLinksHereWidget from "../widgets/collapsible_widgets/what_links_here.js";
 import SidePaneToggles from "../widgets/side_pane_toggles.js";
 import EditedNotesWidget from "../widgets/collapsible_widgets/edited_notes.js";
-import CollapsibleSectionContainer from "../widgets/collapsible_section_container.js";
+import CollapsibleSectionContainer from "../widgets/containers/collapsible_section_container.js";
 import PromotedAttributesWidget from "../widgets/type_property_widgets/promoted_attributes.js";
 import InheritedAttributesWidget from "../widgets/type_property_widgets/inherited_attribute_list.js";
 import NoteListWidget from "../widgets/note_list.js";
 import SearchDefinitionWidget from "../widgets/type_property_widgets/search_definition.js";
-import Container from "../widgets/container.js";
+import Container from "../widgets/containers/container.js";
 import SqlResultWidget from "../widgets/sql_result.js";
 import SqlTableSchemasWidget from "../widgets/sql_table_schemas.js";
 import FilePropertiesWidget from "../widgets/type_property_widgets/file_properties.js";
@@ -34,7 +34,8 @@ import NotePropertiesWidget from "../widgets/type_property_widgets/note_properti
 import NoteIconWidget from "../widgets/note_icon.js";
 import SearchResultWidget from "../widgets/search_result.js";
 import SyncStatusWidget from "../widgets/sync_status.js";
-import ScrollingContainer from "../widgets/scrolling_container.js";
+import ScrollingContainer from "../widgets/containers/scrolling_container.js";
+import RootContainer from "../widgets/containers/root_container.js";
 
 const RIGHT_PANE_CSS = `
 <style>
@@ -136,10 +137,8 @@ export default class DesktopLayout {
     getRootWidget(appContext) {
         appContext.mainTreeWidget = new NoteTreeWidget("main");
 
-        return new FlexContainer('column')
+        return new RootContainer()
             .setParent(appContext)
-            .id('root-widget')
-            .css('height', '100vh')
             .child(new FlexContainer('row').overflowing()
                 .css('height', '36px')
                 .child(new GlobalMenuWidget())

src/public/app/layouts/mobile_layout.js

@@ -1,4 +1,4 @@
-import FlexContainer from "../widgets/flex_container.js";
+import FlexContainer from "../widgets/containers/flex_container.js";
 import NoteTitleWidget from "../widgets/note_title.js";
 import NoteDetailWidget from "../widgets/note_detail.js";
 import NoteTreeWidget from "../widgets/note_tree.js";
@@ -6,7 +6,7 @@ import MobileGlobalButtonsWidget from "../widgets/mobile_widgets/mobile_global_b
 import CloseDetailButtonWidget from "../widgets/mobile_widgets/close_detail_button.js";
 import MobileDetailMenuWidget from "../widgets/mobile_widgets/mobile_detail_menu.js";
 import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
-import ScrollingContainer from "../widgets/scrolling_container.js";
+import ScrollingContainer from "../widgets/containers/scrolling_container.js";
 
 const MOBILE_CSS = `
 <style>

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

@@ -1,4 +1,4 @@
-import TabAwareWidget from "./tab_aware_widget.js";
+import TabAwareWidget from "../tab_aware_widget.js";
 
 const TPL = `
 <div class="section-container">

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

@@ -1,4 +1,4 @@
-import BasicWidget from "./basic_widget.js";
+import BasicWidget from "../basic_widget.js";
 
 export default class Container extends BasicWidget {
     constructor() {

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

@@ -0,0 +1,42 @@
+import FlexContainer from "./flex_container.js";
+import utils from "../../services/utils.js";
+import appContext from "../../services/app_context.js";
+
+export default class RootContainer extends FlexContainer {
+    constructor() {
+        super('column');
+
+        this.id('root-widget');
+        this.css('height', '100vh');
+    }
+
+    refresh() {
+        this.$widget.removeClass(); // remove all classes
+        const note = appContext.tabManager.getActiveTabNote();
+
+        if (note) {
+            this.$widget.addClass(note.getCssClass());
+
+            this.$widget.addClass(utils.getNoteTypeClass(note.type));
+            this.$widget.addClass(utils.getMimeTypeClass(note.mime));
+
+            this.$widget.toggleClass("protected", note.isProtected);
+        }
+    }
+
+    tabNoteSwitchedEvent() {
+        this.refresh();
+    }
+
+    activeTabChangedEvent() {
+        this.refresh();
+    }
+
+    tabNoteSwitchedAndActivatedEvent() {
+        this.refresh();
+    }
+
+    noteTypeMimeChangedEvent() {
+        this.refresh();
+    }
+}

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

@@ -1,4 +1,4 @@
-import options from "../services/options.js";
+import options from "../../services/options.js";
 import FlexContainer from "./flex_container.js";
 
 export default class SidePaneContainer extends FlexContainer {

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

@@ -1,4 +1,4 @@
-import FlexContainer from "../flex_container.js";
+import FlexContainer from "../containers/flex_container.js";
 
 export default class ScreenContainer extends FlexContainer {
     constructor(screenName, direction) {

src/public/app/widgets/note_detail.js

@@ -129,27 +129,6 @@ export default class NoteDetailWidget extends TabAwareWidget {
 
             this.child(typeWidget);
         }
-
-        this.setupClasses();
-    }
-
-    setupClasses() {
-        for (const clazz of Array.from(this.$widget[0].classList)) { // create copy to safely iterate over while removing classes
-            if (clazz !== 'note-detail' && !clazz.startsWith('hidden-')) {
-                this.$widget.removeClass(clazz);
-            }
-        }
-
-        const note = this.note;
-
-        if (note) {
-            this.$widget.addClass(note.getCssClass());
-
-            this.$widget.addClass(utils.getNoteTypeClass(note.type));
-            this.$widget.addClass(utils.getMimeTypeClass(note.mime));
-
-            this.$widget.toggleClass("protected", note.isProtected);
-        }
     }
 
     getTypeWidget() {