refactor: remove hover tab change preference and related functionality in split view

src/browser/app/profile/zen-browser.js

@@ -193,7 +193,6 @@ pref('zen.sidebar.use-google-favicons', true);
 // Zen Split View
 pref('zen.splitView.enable-tab-drop', true);
 pref('zen.splitView.min-resize-width', 7);
-pref('zen.splitView.change-on-hover', false);
 pref('zen.splitView.rearrange-hover-size', 24);
 
 // Startup flags

src/browser/base/zen-components/ZenViewSplitter.mjs

@@ -61,7 +61,6 @@ class SplitNode extends SplitLeafNode {
 
 class ZenViewSplitter extends ZenDOMOperatedFeature {
   currentView = -1;
-  canChangeTabOnHover = false;
   _data = [];
   _tabBrowserPanel = null;
   __modifierElement = null;
@@ -78,7 +77,8 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
   MAX_TABS = 4;
 
   init() {
-    XPCOMUtils.defineLazyPreferenceGetter(this, 'canChangeTabOnHover', 'zen.splitView.change-on-hover', false);
+    this.handleTabEvent = this._handleTabEvent.bind(this);
+
     XPCOMUtils.defineLazyPreferenceGetter(this, 'minResizeWidth', 'zen.splitView.min-resize-width', 7);
     XPCOMUtils.defineLazyPreferenceGetter(this, '_edgeHoverSize', 'zen.splitView.rearrange-edge-hover-size', 24);
 
@@ -226,6 +226,11 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       for (const tab of gBrowser.tabs) {
         tab.style.removeProperty('transform');
       }
+      // Add a min width to all the browser elements to prevent them from resizing
+      for (const browser of gBrowser.browsers) {
+        const width = browser.getBoundingClientRect().width;
+        browser.style.minWidth = `${width}px`;
+      }
       const panelsWidth = gBrowser.tabbox.getBoundingClientRect().width;
       const halfWidth = panelsWidth / 2;
       const side = event.clientX > halfWidth ? 'right' : 'left';
@@ -769,7 +774,6 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
     this._removeHeader(container);
     this.resetContainerStyle(container);
     container.removeEventListener('mousedown', this.handleTabEvent);
-    container.removeEventListener('mouseover', this.handleTabEvent);
     if (!forUnsplit) {
       tab.linkedBrowser.docShellIsActive = false;
     }
@@ -1026,13 +1030,13 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
    * Deactivates the split view.
    */
   deactivateCurrentSplitView() {
+    this.setTabsDocShellState(this._data[this.currentView].tabs, false);
     for (const tab of this._data[this.currentView].tabs) {
       const container = tab.linkedBrowser.closest('.browserSidebarContainer');
       this.resetContainerStyle(container);
     }
     this.removeSplitters();
     this.tabBrowserPanel.removeAttribute('zen-split-view');
-    this.setTabsDocShellState(this._data[this.currentView].tabs, false);
     this.updateSplitViewButton(true);
     this.currentView = -1;
     this.toggleWrapperDisplay(false);
@@ -1057,10 +1061,10 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
 
     this.tabBrowserPanel.setAttribute('zen-split-view', 'true');
 
-    this.setTabsDocShellState(splitData.tabs, true);
     this.updateSplitViewButton(false);
     this.applyGridToTabs(splitData.tabs);
     this.applyGridLayout(splitData.layoutTree);
+    this.setTabsDocShellState(splitData.tabs, true);
     this.toggleWrapperDisplay(true);
   }
 
@@ -1152,7 +1156,9 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
     const nodeRootPosition = splitNode.positionToRoot;
     if (!splitNode.children) {
       const browserContainer = splitNode.tab.linkedBrowser.closest('.browserSidebarContainer');
-      browserContainer.style.inset = `${nodeRootPosition.top}% ${nodeRootPosition.right}% ${nodeRootPosition.bottom}% ${nodeRootPosition.left}%`;
+      window.requestAnimationFrame(() => {
+        browserContainer.style.inset = `${nodeRootPosition.top}% ${nodeRootPosition.right}% ${nodeRootPosition.bottom}% ${nodeRootPosition.left}%`;
+      });
       this._tabToSplitNode.set(splitNode.tab, splitNode);
       return;
     }
@@ -1183,11 +1189,13 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
 
       if (i < splittersNeeded) {
         const splitter = currentSplitters[i];
-        if (splitNode.direction === 'column') {
-          splitter.style.inset = `${100 - childRootPosition.bottom}% ${childRootPosition.right}% 0% ${childRootPosition.left}%`;
-        } else {
-          splitter.style.inset = `${childRootPosition.top}% 0% ${childRootPosition.bottom}% ${100 - childRootPosition.right}%`;
-        }
+        window.requestAnimationFrame(() => {
+          if (splitNode.direction === 'column') {
+            splitter.style.inset = `${100 - childRootPosition.bottom}% ${childRootPosition.right}% 0% ${childRootPosition.left}%`;
+          } else {
+            splitter.style.inset = `${childRootPosition.top}% 0% ${childRootPosition.bottom}% ${100 - childRootPosition.right}%`;
+          }
+        });
       }
     });
   }
@@ -1247,9 +1255,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
    * @param {Element} container - The container element.
    */
   styleContainer(container) {
-    container.setAttribute('zen-split-anim', 'true');
     container.addEventListener('mousedown', this.handleTabEvent);
-    container.addEventListener('mouseover', this.handleTabEvent);
   }
 
   /**
@@ -1257,8 +1263,8 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
    *
    * @param {Event} event - The event.
    */
-  handleTabEvent = (event) => {
-    if (this.rearrangeViewEnabled || (event.type === 'mouseover' && !this.canChangeTabOnHover)) {
+  _handleTabEvent = (event) => {
+    if (this.rearrangeViewEnabled) {
       return;
     }
     const container = event.currentTarget.closest('.browserSidebarContainer');
@@ -1346,8 +1352,8 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
         browser.addEventListener('dragstart', this.onBrowserDragStart);
         browser.addEventListener('dragend', this.onBrowserDragEnd);
       } else {
-        browser.removeAttribute('zen-split');
-        browser.removeAttribute('style');
+        //   browser.removeAttribute('zen-split');
+        //   browser.removeAttribute('style');
 
         browser.removeEventListener('dragstart', this.onBrowserDragStart);
         browser.removeEventListener('dragend', this.onBrowserDragEnd);
@@ -1537,6 +1543,9 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
         gBrowser.selectedTab = this._draggingTab;
         this._draggingTab = null;
       }
+      for (const browser of gBrowser.browsers) {
+        browser.removeAttribute('style');
+      }
     }
   }
 

src/browser/components/preferences/zen-settings.js

@@ -949,11 +949,6 @@ Preferences.addAll([
     type: 'bool',
     default: true,
   },
-  {
-    id: 'zen.splitView.change-on-hover',
-    type: 'bool',
-    default: true,
-  },
   {
     id: 'zen.tab-unloader.timeout-minutes',
     type: 'int',

src/browser/components/preferences/zenLooksAndFeel.inc.xhtml

@@ -215,13 +215,4 @@
 <html:h1 data-l10n-id="zen-split-view-title"/>
 </hbox>
 
-<groupbox id="zenSplitViewGroup" data-category="paneZenLooks" hidden="true" class="highlighting-group">
-      <label><html:h2 data-l10n-id="zen-split-view-header"/></label>
-      <description class="description-deemphasized" data-l10n-id="zen-split-view-description" />
-
-      <checkbox id="zenLooksAndFeelSplitViewChangeOnHover"
-            data-l10n-id="zen-split-view-change-on-hover"
-            preference="zen.splitView.change-on-hover"/>
-</groupbox>
-
 </html:template>