test: Added tests for split views inside folders, b=no-bug, c=tabs, folders, tests

Author: mr-cheffy

src/browser/components/tabbrowser/content/tabs-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
-index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..bc971287bbd0d799700cdd8f25f1191422af1b92 100644
+index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..ddb0735916c1cd29f316b2e66a95c765a933362d 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -289,6 +289,7 @@
@@ -553,7 +553,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..bc971287bbd0d799700cdd8f25f11914
        dragData.dropBefore = dropBefore;
        dragData.animDropElementIndex = newDropElementIndex;
 -
-+      gZenFolders.setFolderIndentation(draggedTab, dropElement);
++      gZenFolders.setFolderIndentation(movingTabs, dropElement);
        // Shift background tabs to leave a gap where the dragged tab
        // would currently be dropped.
        for (let item of tabs) {

src/zen/folders/ZenFolders.mjs

@@ -318,7 +318,7 @@
       if (selectedItem) {
         group.setAttribute('has-active', 'true');
         selectedItem.setAttribute('folder-active', 'true');
-        this.setFolderIndentation(selectedItem, group, /* for collapse = */ true);
+        this.setFolderIndentation([selectedItem], group, /* for collapse = */ true);
       }
 
       for (const item of itemsAfterSelected) {
@@ -874,10 +874,11 @@
       return [];
     }
 
-    setFolderIndentation(tab, group = undefined, forCollapse = true) {
+    setFolderIndentation(tabs, group = undefined, forCollapse = true) {
       if (!gZenPinnedTabManager.expandedSidebarMode) {
         return;
       }
+      const tab = tabs[0];
       let isTab = false;
       if (!group && tab?.group) {
         group = tab; // So we can set isTab later
@@ -897,7 +898,13 @@
       }
       const tabLevel = tabToAnimate?.group?.level || 0;
       const spacing = (level - tabLevel) * baseSpacing;
-      tabToAnimate.style.setProperty('--zen-folder-indent', `${spacing}px`);
+      for (const tab of tabs) {
+        if (gBrowser.isTabGroupLabel(tab)) {
+          tab.group.style.setProperty('--zen-folder-indent', `${spacing}px`);
+          continue;
+        }
+        tab.style.setProperty('--zen-folder-indent', `${spacing}px`);
+      }
     }
 
     changeFolderUserIcon(group) {

src/zen/folders/zen-folders.css

@@ -94,6 +94,7 @@ tab-group[split-view-group] {
 
       & > .tabbrowser-tab {
         --tab-hover-background-color: var(--zen-split-view-active-tab-bg);
+        --zen-folder-indent: 0 !important;
         & .tab-background {
           background-color: var(--zen-split-view-active-tab-bg) !important;
         }

src/zen/tabs/ZenPinnedTabManager.mjs

@@ -986,7 +986,8 @@
           event.target.closest('.zen-current-workspace-indicator') ||
           this._isGoingToPinnedTabs;
         const essentialTabsTarget = event.target.closest('.zen-essentials-container');
-        const tabsTarget = event.target.closest('.zen-workspace-normal-tabs-section');
+        const tabsTarget =
+          event.target.closest('.zen-workspace-normal-tabs-section') || !this._isGoingToPinnedTabs;
 
         // TODO: Solve the issue of adding a tab between two groups
         // Remove group labels from the moving tabs and replace it

src/zen/tests/split_view/browser.toml

@@ -13,3 +13,4 @@ support-files = [
 ["browser_split_groups.js"]
 ["browser_split_browser_duplication.js"]
 ["browser_split_view_with_glance.js"]
+["browser_split_view_with_folders.js"]

src/zen/tests/split_view/browser_split_view_with_folders.js

@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+   https://creativecommons.org/publicdomain/zero/1.0/ */
+
+'use strict';
+
+add_task(async function test_Split_View_Inside_Folder() {
+  const [tab1, tab2] = await Promise.all([
+    addTabTo(gBrowser, getUrlForNthTab(1)),
+    addTabTo(gBrowser, getUrlForNthTab(2)),
+  ]);
+  const pinEvent1 = BrowserTestUtils.waitForEvent(tab1, 'TabPinned');
+  const pinEvent2 = BrowserTestUtils.waitForEvent(tab2, 'TabPinned');
+  gBrowser.pinTab(tab1);
+  gBrowser.pinTab(tab2);
+  await Promise.all([pinEvent1, pinEvent2]);
+  Assert.ok(
+    gBrowser.tabs.length === 4, // empty + initial + 2 split tabs
+    'There should be four tabs after pinning both tabs'
+  );
+  const folder = await gZenFolders.createFolder([tab1, tab2], {
+    renameFolder: false,
+    label: 'test',
+  });
+  Assert.equal(tab1.group, folder, 'The first pinned tab should be in the folder group');
+  Assert.equal(tab2.group, folder, 'The second pinned tab should be in the folder group');
+  await createSplitView([tab1, tab2], 'grid');
+  ok(
+    tab2.group === tab1.group,
+    'The second pinned tab should be in the same split group after duplication'
+  );
+  ok(
+    tab1.group.hasAttribute('split-view-group'),
+    'The first pinned tab should be in a split group after duplication'
+  );
+  Assert.ok(tab1.group.pinned, 'The split group should be pinned after duplication of both tabs');
+  Assert.equal(tab1.group.group, folder, 'The split group should be the folder after duplication');
+  const removeEvent = BrowserTestUtils.waitForEvent(window, 'TabGroupRemoved');
+  folder.delete();
+  await removeEvent;
+});