#note-detail-wrapper => .note-tab-content

src/public/javascripts/services/note_detail.js

@@ -26,7 +26,8 @@ const $noteDetailComponents = $(".note-detail-component");
 
 const $protectButton = $("#protect-button");
 const $unprotectButton = $("#unprotect-button");
-const $noteDetailWrapper = $("#note-detail-wrapper");
+const $noteTabContent = $(".note-tab-content");
+const $noteTabsContainer = $("#note-tab-container");
 const $childrenOverview = $("#children-overview");
 const $scriptArea = $("#note-detail-script-area");
 const $savedIndicator = $("#saved-indicator");
@@ -147,7 +148,7 @@ async function saveNoteIfChanged() {
 }
 
 function updateNoteView() {
-    $noteDetailWrapper.toggleClass("protected", activeNote.isProtected);
+    $noteTabContent.toggleClass("protected", activeNote.isProtected);
     $protectButton.toggleClass("active", activeNote.isProtected);
     $protectButton.prop("disabled", activeNote.isProtected);
     $unprotectButton.toggleClass("active", !activeNote.isProtected);
@@ -203,7 +204,7 @@ async function loadNoteDetail(noteId) {
 
     updateNoteView();
 
-    $noteDetailWrapper.show();
+    $noteTabContent.show();
 
     noteChangeDisabled = true;
 
@@ -331,11 +332,11 @@ messagingService.subscribeToSyncMessages(syncData => {
     }
 });
 
-$noteDetailWrapper.on("dragover", e => e.preventDefault());
+$noteTabsContainer.on("dragover", e => e.preventDefault());
 
-$noteDetailWrapper.on("dragleave", e => e.preventDefault());
+$noteTabsContainer.on("dragleave", e => e.preventDefault());
 
-$noteDetailWrapper.on("drop", e => {
+$noteTabsContainer.on("drop", e => {
     importDialog.uploadFiles(getActiveNoteId(), e.originalEvent.dataTransfer.files, {
         safeImport: true,
         shrinkImages: true,

src/public/javascripts/services/protected_session.js

@@ -10,7 +10,7 @@ const $component = $("#protected-session-password-component");
 const $passwordForms = $(".protected-session-password-form");
 const $passwordInputs = $(".protected-session-password");
 const $passwordInModal = $("#protected-session-password-in-modal");
-const $noteDetailWrapper = $("#note-detail-wrapper");
+const $tabContent = $(".note-tab-content"); // FIXME TAB
 const $protectButton = $("#protect-button");
 const $unprotectButton = $("#unprotect-button");
 const $enterProtectedSessionButton = $("#enter-protected-session-button");
@@ -44,7 +44,7 @@ function ensureProtectedSession(requireProtectedSession, modal) {
 
         if (modal) {
             if (treeService.getActiveNode().data.isProtected) {
-                $noteDetailWrapper.hide();
+                $tabContent.hide();
             }
 
             $dialog.modal();
@@ -83,7 +83,7 @@ async function setupProtectedSession(password) {
     if (protectedSessionDeferred !== null) {
         ensureDialogIsClosed();
 
-        $noteDetailWrapper.show();
+        $tabContent.show();
 
         protectedSessionDeferred.resolve(true);
         protectedSessionDeferred = null;

src/public/stylesheets/desktop.css

@@ -28,7 +28,7 @@ body {
     grid-template-columns: 1fr !important;
 }
 
-#tabs-container {
+#note-tab-container {
     grid-area: tab-container;
     min-height: 0;
     min-height: 0;
@@ -134,7 +134,7 @@ li.dropdown-submenu:hover > ul.dropdown-menu {
     border-style: solid;
 }
 
-#note-detail-wrapper {
+.note-tab-content {
     font-family: var(--detail-font-family);
     font-size: var(--detail-font-size);
 }

src/public/stylesheets/style.css

@@ -103,7 +103,7 @@ ul.fancytree-container {
     display: none;
 }
 
-#note-detail-wrapper {
+.note-tab-content {
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -148,7 +148,7 @@ ul.fancytree-container {
 
 /** we disable shield background when in distraction free mode because I couldn't get it to stay static
     (it kept growing with content) */
-#container:not(.distraction-free-mode) #note-detail-wrapper.protected {
+#container:not(.distraction-free-mode) .note-tab-content.protected {
     /* DON'T COLLAPSE THE RULES INTO SINGLE ONE, BACKGROUND WON'T DISPLAY */
     background: url('../images/shield.svg') no-repeat;
     background-size: contain;

src/views/tabs.ejs

@@ -15,24 +15,10 @@
             </div>
         </div>
     </div>
-    <!-- Styles to prevent flash after JS initialization -->
-    <style>
-        .chrome-tabs .chrome-tab {
-            width: 258px
-        }
-
-        .chrome-tabs .chrome-tab:nth-child(1) {
-            transform: translate3d(0px, 0, 0)
-        }
-
-        .chrome-tabs .chrome-tab:nth-child(2) {
-            transform: translate3d(239px, 0, 0)
-        }
-    </style>
 </div>
 
-<div id="tabs-container">
+<div id="note-tab-container">
-    <div id="note-detail-wrapper">
+    <div class="note-tab-content">
         <% include title.ejs %>
 
         <div id="note-detail-script-area"></div>