Detect overflow state of pinned tabs more correctly

piroor · May 20, 2024 · f51d766 · f51d766
1 parent a740926
commit f51d766
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/webextensions/sidebar/pinned-tabs.js b/webextensions/sidebar/pinned-tabs.js
@@ -98,9 +98,10 @@ export function reposition(options = {}) {
 
   Size.updateContainers();
 
-  let col = 1;
-  let row = 1;
+  let count = 0;
+  let row = 0;
   for (const tab of pinnedTabs) {
+    count++;
     if (options.justNow)
       tab.$TST.removeState(Constants.kTAB_STATE_ANIMATION_READY);
 
@@ -119,16 +120,15 @@ export function reposition(options = {}) {
     });
     */
 
-    col++;
-    if (col >= maxCol) {
-      col = 0;
+    if (count > 0 &&
+        count / maxCol == 0) {
       row++;
       //log('=> new row');
     }
   }
-  log('reposition: ', { maxWidth, faviconized, width, height, maxCol, maxRow, pinnedTabsAreaRatio, allTabsAreaHeight, mMaxVisibleRows, mAreaHeight, col, row });
-  log('overflow: contentsHeight > mAreaHeight : ', contentsHeight > mAreaHeight, ' , row > maxRow : ', row > maxRow);
-  SidebarTabs.pinnedContainer.classList.toggle('overflow', contentsHeight > mAreaHeight || row > maxRow);
+  log('reposition: ', { maxWidth, faviconized, width, height, maxCol, maxRow, pinnedTabsAreaRatio, allTabsAreaHeight, mMaxVisibleRows, mAreaHeight });
+  log('overflow: contentsHeight > mAreaHeight : ', contentsHeight > mAreaHeight);
+  SidebarTabs.pinnedContainer.classList.toggle('overflow', contentsHeight > mAreaHeight);
 }
 
 export function reserveToReposition(options = {}) {

diff --git a/webextensions/sidebar/size.js b/webextensions/sidebar/size.js
@@ -223,8 +223,10 @@ export function updateContainers() {
   mPinnedTabsScrollBoxRect = mPinnedScrollBox.getBoundingClientRect();
   mNormalTabsScrollBoxRect = mNormalScrollBox.getBoundingClientRect();
 
-  const pinnedContainerStyle = window.getComputedStyle(mPinnedScrollBox, null);
-  mPinnedTabsContainerWidth = mPinnedTabsScrollBoxRect.width - parseFloat(pinnedContainerStyle.paddingLeft) - parseFloat(pinnedContainerStyle.borderLeftWidth) - parseFloat(pinnedContainerStyle.paddingRight) - parseFloat(pinnedContainerStyle.borderRightWidth);
+  const pinnedContainerBox     = mPinnedScrollBox.querySelector('.tabs');
+  const pinnedContainerBoxRect = pinnedContainerBox.getBoundingClientRect();
+  const pinnedContainerStyle   = window.getComputedStyle(pinnedContainerBox, null);
+  mPinnedTabsContainerWidth    = pinnedContainerBoxRect.width - parseFloat(pinnedContainerStyle.paddingLeft) - parseFloat(pinnedContainerStyle.borderLeftWidth) - parseFloat(pinnedContainerStyle.paddingRight) - parseFloat(pinnedContainerStyle.borderRightWidth);
 
   const range = document.createRange();
   //range.selectNodeContents(mTabBar);