fix: tabs: possible tree breakage and changing configured behavior with 'do not move it' setting

- Added sub-setting for controlling branch creation logic. It works
only for the 'do not move it' option. For the other options it's
inactive and visualizes the behavior ('on' for the 'first/last child',
'off' otherwise).
- Added the upgrade logic to preserve previous behavior with 'do not
move it' option.
- Fixed incorrectly found target panel with 'do not move it' option and
the `browser.tabs.insertRelatedAfterCurrent` set to false

(resolves #2280)

Author: mbnuqw

src/_locales/dict.setup-page.ts

@@ -3149,6 +3149,17 @@ Przykłady: "*", "ctrl+$", "ctrl+alt+g"`,
     zh_TW: '使用一般規則',
     ja: '一般ルールを使用する',
   },
+  'settings.move_new_tab_parent_indent': {
+    en: 'Create and maintain a tree structure if possible',
+    de: 'Erstellen und pflegen Sie nach Möglichkeit eine Baumstruktur',
+    fr: 'Créer et maintenir une structure arborescente si possible',
+    hu: 'Ha lehetséges, hozzon létre és tartson fenn fa szerkezetet',
+    pl: 'Utwórz i zachowaj strukturę drzewa, jeśli to możliwe',
+    ru: 'Создавать и сохранять древовидную структуру, если это возможно',
+    zh_CN: '尽可能创建并维护树形结构',
+    zh_TW: '若可行，請建立並維護樹狀結構',
+    ja: '可能であればツリー構造を作成し維持する',
+  },
   'settings.move_new_tab_parent_act_panel': {
     en: 'Only if panel of parent tab is active',
     de: 'Nur, wenn Panel des übergeordneten Tabs aktiv ist',

src/defaults/settings.ts

@@ -101,6 +101,7 @@ export const DEFAULT_SETTINGS: SettingsState = {
   // New tab position
   moveNewTabPin: 'start',
   moveNewTabParent: 'last_child',
+  moveNewTabParentIndent: false,
   moveNewTabParentActPanel: false,
   moveNewTabButton: 'end',
   moveNewTabButtonActivePin: 'start',

src/page.setup/components/settings.tabs.vue

@@ -157,6 +157,16 @@ section(ref="el")
       :folded="true"
       @update:value="Settings.saveDebounced(150)")
     .sub-fields
+      ToggleField(
+        v-if="Settings.state.moveNewTabParent === 'default' && Settings.state.tabsTree"
+        label="settings.move_new_tab_parent_indent"
+        v-model:value="Settings.state.moveNewTabParentIndent"
+        @update:value="Settings.saveDebounced(150)")
+      ToggleField(
+        v-else
+        label="settings.move_new_tab_parent_indent"
+        :inactive="true"
+        v-bind:value="Settings.state.tabsTree && (Settings.state.moveNewTabParent === 'first_child' || Settings.state.moveNewTabParent === 'last_child')")
       ToggleField(
         label="settings.move_new_tab_parent_act_panel"
         :inactive="Settings.state.moveNewTabParent === 'none'"

src/services/settings.actions.ts

@@ -39,6 +39,7 @@ export async function loadSettings(): Promise<void> {
   }
 
   Utils.normalizeObject(storedManaged.settings, storedLocal.settings)
+  const groupOnOpen = storedManaged.settings.groupOnOpen
   Utils.normalizeObject(storedManaged.settings, DEFAULT_SETTINGS)
   Utils.updateObject(Settings.state, storedManaged.settings, Settings.state)
 
@@ -47,6 +48,12 @@ export async function loadSettings(): Promise<void> {
     Settings.state.tabsPanelSwitchActMove = true
   }
 
+  // TMP
+  // Try to keep previous behavior with moveNewTabParent === 'default' and groupOnOpen
+  if (groupOnOpen && Settings.state.moveNewTabParent === 'default') {
+    Settings.state.moveNewTabParentIndent = true
+  }
+
   parsePrefaceTemplate()
 
   if (Info.isSidebar) {

src/services/tabs.fg.create.ts

@@ -647,9 +647,18 @@ export function getPanelForNewTab(tab: Tab): TabsPanel | undefined {
 
   // Find panel for tab opened from another tab
   if (parentTab && !parentTab.pinned) {
-    const panelOfParent = Sidebar.panelsById[parentTab.panelId] as TabsPanel
-    if (!Settings.state.moveNewTabParentActPanel || panelOfParent === activePanel) {
-      return panelOfParent
+    // For the 'default' opt (do not move it / keep original position)
+    // find the panel by tab index (e.g. if `browser.tabs.insertRelatedAfterCurrent` is false
+    // Firefox will open new child tabs at the end of list)
+    if (Settings.state.moveNewTabParent === 'default') {
+      return findTabsPanelNearToTabIndex(tab.index)
+    }
+    // For the other cases (except 'none') use the panel of the parent tab
+    else if (Settings.state.moveNewTabParent !== 'none') {
+      const panelOfParent = Sidebar.panelsById[parentTab.panelId] as TabsPanel
+      if (!Settings.state.moveNewTabParentActPanel || panelOfParent === activePanel) {
+        return panelOfParent
+      }
     }
   }
 
@@ -804,6 +813,7 @@ export function getIndexForNewTab(panel: TabsPanel, conf?: IndexForNewTabConf):
 }
 
 interface ParentForNewTabConf {
+  index?: number
   openerTabId?: ID
   fromNewTabButton?: boolean
 }
@@ -812,8 +822,6 @@ interface ParentForNewTabConf {
  * Find and return parent id
  */
 export function getParentForNewTab(panel: Panel, conf?: ParentForNewTabConf): ID | undefined {
-  const activeTab = Tabs.byId[Tabs.activeId]
-
   const openerTabId = conf?.openerTabId
   const fromNewTabButton = conf?.fromNewTabButton ?? false
 
@@ -831,7 +839,33 @@ export function getParentForNewTab(panel: Panel, conf?: ParentForNewTabConf): ID
     if (Settings.state.moveNewTabParent === 'last_child') return openerTabId
     if (Settings.state.moveNewTabParent === 'start') return
     if (Settings.state.moveNewTabParent === 'end') return
-    if (Settings.state.moveNewTabParent === 'default') return parent.parentId
+    // Find appropriate parent for the unknown (not controlled by Sidebery) index
+    if (Settings.state.moveNewTabParent === 'default') {
+      const prevTab = conf?.index ? Tabs.list[conf.index - 1] : undefined
+      const prevIsSiblingToParent = prevTab !== parent && prevTab?.parentId === parent.parentId
+      const nextTab = conf?.index ? Tabs.list[conf.index] : undefined
+      Logs.info('next tab:', nextTab?.url)
+
+      // If the prev tab is the parent, the sibling of the parent or is inside the parent branch
+      // and if the next tab is not in the branch
+      if (
+        // prettier-ignore
+        (prevTab &&
+          (prevTab === parent ||
+          prevIsSiblingToParent ||
+          Tabs.findAncestor(prevTab, t => t === parent))
+        ) &&
+        (!nextTab || (nextTab && !Tabs.findAncestor(nextTab, t => t === parent)))
+      ) {
+        // Create branch or keep it flat
+        if (Settings.state.moveNewTabParentIndent && !prevIsSiblingToParent) return parent.id
+        else return parent.parentId
+      }
+      // or integrate the new tab inside existed tree/list
+      else {
+        return nextTab?.parentId
+      }
+    }
   }
 
   // Place new tab (for the other cases)
@@ -841,6 +875,8 @@ export function getParentForNewTab(panel: Panel, conf?: ParentForNewTabConf): ID
 
   if (moveNewTabSetting === 'start') return
   if (moveNewTabSetting === 'end') return
+
+  const activeTab = Tabs.byId[Tabs.activeId]
   if (activeTab && activeTab.panelId === panel.id && !activeTab.pinned) {
     if (moveNewTabSetting === 'before') return activeTab.parentId
     else if (moveNewTabSetting === 'after') return activeTab.parentId

src/types/settings.ts

@@ -100,6 +100,7 @@ export interface SettingsState {
   // New tab position
   moveNewTabPin: (typeof SETTINGS_OPTIONS.moveNewTabPin)[number]
   moveNewTabParent: (typeof SETTINGS_OPTIONS.moveNewTabParent)[number]
+  moveNewTabParentIndent: boolean
   moveNewTabParentActPanel: boolean
   moveNewTabButton: (typeof SETTINGS_OPTIONS.moveNewTab)[number]
   moveNewTabButtonActivePin: (typeof SETTINGS_OPTIONS.moveNewTabActivePin)[number]
@@ -116,6 +117,7 @@ export interface SettingsState {
 
   // Tabs tree
   tabsTree: boolean
+  groupOnOpen?: boolean // DEPR
   tabsTreeLimit: (typeof SETTINGS_OPTIONS.tabsTreeLimit)[number]
   autoFoldTabs: boolean
   autoFoldTabsExcept: (typeof SETTINGS_OPTIONS.autoFoldTabsExcept)[number]