fix: Fixed wrong calculation of indentation and other small refactoring, b=no-bug, c=common, folders, tabs

src/zen/common/styles/zen-theme.css

@@ -154,6 +154,9 @@
   --urlbar-box-hover-bgcolor: var(--toolbarbutton-hover-background) !important;
   --input-bgcolor: light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)) !important;
 
+  /* Transitions */
+  --zen-tabbox-element-indent-transition: margin-inline-start 0.1s ease-in-out;
+
   /* XUL */
   --zen-main-browser-background: light-dark(rgb(235, 235, 235), #1b1b1b);
   --zen-main-browser-background-toolbar: var(--zen-main-browser-background);

src/zen/folders/ZenFolders.mjs

@@ -344,12 +344,14 @@
       // Calculate the height we need to hide until we reach the selected item.
       let heightUntilSelected;
       if (selectedItem) {
-        const selectedContainer = selectedItem.group?.hasAttribute('split-view-group')
-          ? selectedItem.group
-          : selectedItem;
+        const isSplitView = selectedItem.group?.hasAttribute('split-view-group');
+        const selectedContainer = isSplitView ? selectedItem.group : selectedItem;
         heightUntilSelected =
           window.windowUtils.getBoundsWithoutFlushing(selectedContainer).top -
           window.windowUtils.getBoundsWithoutFlushing(groupStart).bottom;
+        if (isSplitView) {
+          heightUntilSelected -= 2;
+        }
       } else {
         heightUntilSelected = window.windowUtils.getBoundsWithoutFlushing(tabsContainer).height;
       }
@@ -521,7 +523,7 @@
     #onNewFolder(event) {
       const isFromToolbar = event.target.id === 'zen-context-menu-new-folder-toolbar';
       const contextMenu = event.target.parentElement;
-      let tabs = TabContextMenu.contextTab.multiselected
+      let tabs = TabContextMenu.contextTab?.multiselected
         ? gBrowser.selectedTabs
         : [TabContextMenu.contextTab];
       let triggerTab =

src/zen/folders/zen-folders.css

@@ -7,8 +7,10 @@
 tab-group[split-view-group] {
   display: block;
   @media (prefers-reduced-motion: no-preference) {
-    #tabbrowser-tabs[movingtab] &:not(:active) {
-      transition: var(--tab-dragover-transition);
+    transition: var(--zen-tabbox-element-indent-transition);
+
+    #tabbrowser-tabs[movingtab] & {
+      transition: var(--zen-tabbox-element-indent-transition);
     }
   }
   --zen-split-view-active-tab-bg: color-mix(
@@ -19,10 +21,6 @@ tab-group[split-view-group] {
 
   margin-inline-start: var(--zen-folder-indent) !important;
 
-  #tabbrowser-tabs[movingtab] & {
-    transition: margin-inline-start 0.15s ease-in-out;
-  }
-
   & .tab-group-label {
     height: 100% !important;
   }
@@ -194,7 +192,7 @@ zen-folder {
   );
 
   -moz-window-dragging: no-drag;
-  transition: margin-inline-start 0.15s ease-in-out;
+  transition: var(--zen-tabbox-element-indent-transition);
 
   margin-inline-start: var(--zen-folder-indent) !important;
 
@@ -226,7 +224,7 @@ zen-folder {
     }
 
     & > zen-folder {
-      transition: margin-inline-start 0.15s ease-in-out;
+      transition: var(--zen-tabbox-element-indent-transition);
     }
 
     & > tab::before {

src/zen/tabs/zen-tabs/vertical-tabs.css

@@ -292,7 +292,7 @@
     & .tab-content > image {
       transition:
         scale 0.07s ease,
-        margin-inline-start 0.15s ease-in-out;
+        var(--zen-tabbox-element-indent-transition);
     }
 
     margin-inline-start: var(--zen-folder-indent) !important;