Determine to apply multi-column layout (or don't) to the tree in a gr…

…oup tab more robustly, even if its appearance is modified by the user style sheet #3595
piroor · Jul 30, 2024 · 63b55b4 · 63b55b4
1 parent aeb6cad
commit 63b55b4
Showing 1 changed file with 22 additions and 22 deletions.
diff --git a/webextensions/resources/group-tab.js b/webextensions/resources/group-tab.js
@@ -585,43 +585,43 @@
   function columnizeTree(aTree, options) {
     options = options || {};
     options.columnWidth = options.columnWidth || 'var(--column-width, 20em)';
+    const containerRect = options.containerRect || aTree.parentNode.getBoundingClientRect();
 
-    const style = aTree.style;
-    style.columnWidth = style.MozColumnWidth = `calc(${options.columnWidth})`;
-    const computedStyle = window.getComputedStyle(aTree, null);
-    aTree.columnWidth = Number((computedStyle.MozColumnWidth || computedStyle.columnWidth).replace(/px/, ''));
-    style.columnGap   = style.MozColumnGap = '1em';
-    style.columnFill  = style.MozColumnFill = 'auto';
-    style.columnCount = style.MozColumnCount = 'auto';
+    const uncolumnizedTree = aTree.cloneNode(true);
+    const uncolumnizedTreeStyle = uncolumnizedTree.style;
+    uncolumnizedTreeStyle.visibility = 'hidden';
+    uncolumnizedTreeStyle.position = 'absolute';
+    uncolumnizedTreeStyle.maxWidth = `${containerRect.width}px`;
+    uncolumnizedTreeStyle.height = uncolumnizedTreeStyle.maxHeight = '';
+    uncolumnizedTreeStyle.columnWidth = '';
+    aTree.parentNode.appendChild(uncolumnizedTree);
+    const totalContentsHeight = uncolumnizedTree.offsetHeight;
+    aTree.parentNode.removeChild(uncolumnizedTree);
 
-    const containerRect = options.containerRect || aTree.parentNode.getBoundingClientRect();
-    const maxWidth = containerRect.width;
-    if (aTree.columnWidth * 2 <= maxWidth ||
-        options.calculateCount) {
+    const style = aTree.style;
+    if (totalContentsHeight > containerRect.height) {
+      style.columnWidth = style.MozColumnWidth = `calc(${options.columnWidth})`;
+      const computedStyle = window.getComputedStyle(aTree, null);
+      aTree.columnWidth = Number((computedStyle.MozColumnWidth || computedStyle.columnWidth).replace(/px/, ''));
+      style.columnGap   = style.MozColumnGap = '1em';
+      style.columnFill  = style.MozColumnFill = 'auto';
+      style.columnCount = style.MozColumnCount = 'auto';
       const treeContentsRange = document.createRange();
       treeContentsRange.selectNodeContents(aTree);
       const overflow = treeContentsRange.getBoundingClientRect().width > window.innerWidth;
       treeContentsRange.detach();
+      style.maxWidth = '';
       const blankSpace = overflow ? 2 : 1;
       style.height = style.maxHeight =
         `calc(${containerRect.height}px - ${blankSpace}em)`;
-
-      if (getActualColumnCount(aTree) <= 1)
-        style.columnWidth = style.MozColumnWidth = '';
     }
     else {
+      style.columnWidth = style.MozColumnWidth = '';
+      style.maxWidth = `calc(${containerRect.width}px - 1em /* right-padding of #tabs */ - 20px /* left-margin of the tree */)`;
       style.height = style.maxHeight = '';
     }
   }
 
-  function getActualColumnCount(aTree) {
-    const range = document.createRange();
-    range.selectNodeContents(aTree);
-    const rect = range.getBoundingClientRect();
-    range.detach();
-    return Math.floor(rect.width / aTree.columnWidth);
-  }
-
   init();
   return true;
 })();