search

piroor / treestyletab

Tree Style Tab, Show tabs like a tree.
http://piro.sakura.ne.jp/xul/treestyletab/
Other
3.51k stars 279 forks source link

[Bug] Tree display rapidly blinking when tabs reach exactly (pixel-precisely) the height of the panel #3589

Closed vkovalcik closed 3 months ago

vkovalcik commented 4 months ago

Abstract

TST repeatedly shows and hides the vertical scroll bar, about 10 times per second. The tabs jump left and right super quickly and everything appear fuzzy :)

It seems it started to happen in the last weeks.

Steps to reproduce

Make so many tabs that they EXACTLY fill the height of the tree panel. Now move the window up or down to find the problematic height. The issue appears only when pixel height is exactly in the wrong part of the tab (so it may appear with height 504, but not 505 or 503)

Expected result

The scroll bar should either stay there or be hidden.

Actual result

The scroll bar cannot decide...

Environment

piroor commented 4 months ago

Sorry I couldn't imagine what happens on your environment... Could you post a screencast?

vkovalcik commented 4 months ago

Sure, this is the result. In reality the blinking is much faster.

tst

piroor commented 4 months ago

Thanks, I agree that it may happen on environments with always-visible scrollbars (Windows 10 and older).

I've tried it on Windows 11 with modified accessibility option to show scrollbars always, but I couldn't reproduce the problem. Could you paste exported settings of TST, if you use any user stylesheet?

piroor commented 4 months ago

I've introduced some changes to reduce needless update around tab bar. Could you try a development build? https://github.com/piroor/treestyletab?tab=readme-ov-file#development-builds

vkovalcik commented 4 months ago

You are crazy fast :) Sorry for the late answer.

I have tested the last development build, but unfortunately the behavior is still there.

You are right, I am indeed on Windows 10, so I see it may be difficult to debug. But if you want me to test something etc. perhaps I can help.

I am attaching the config configs-treestyletab@piro.sakura.ne.jp.json

... and my custom stylesheet follows. However I have tested that the stylesheet text completely, the "blinking issues" still occurs.

tab-item.discarded tab-favicon {
  opacity: 0.2;
}
tab-item.discarded tab-label,
tab-item.discarded tab-counter {
  color: #888;
}

/* Hide CLOSE button on tabs */
#tabbar tab-item tab-item-substance tab-closebox {
  display: none;
}
piroor commented 4 months ago

Hmm... the "blinking" happens on my environment also, but it stops soon. On my case, the console says as following while the blinking:

tst<Sidebar-1>: sidebar/sidebar:                 Normal Tabs Underflow common.js:735:13
tst<Sidebar-1>: sidebar/sidebar:                        updateTabbarLayout reasons: resize common.js:735:13
tst<Sidebar-1>: sidebar/sidebar:                        height:  
Object { newTabButtonSize: 20, extraTabbarTopContainerSize: 0, extraTabbarBottomContainerSize: 0 }
common.js:735:13
tst<Sidebar-1>: sidebar/sidebar:                 Normal Tabs Overflow common.js:735:13
tst<Sidebar-1>: sidebar/sidebar:             updateTabbarLayout reasons: common.js:735:13
tst<Sidebar-1>: sidebar/sidebar:             height:  
Object { newTabButtonSize: 19, extraTabbarTopContainerSize: 0, extraTabbarBottomContainerSize: 0 }
common.js:735:13
tst<Sidebar-1>: sidebar/sidebar:                  updateTabbarLayout reasons: resize common.js:735:13
tst<Sidebar-1>: sidebar/sidebar:                  height:  
Object { newTabButtonSize: 19, extraTabbarTopContainerSize: 0, extraTabbarBottomContainerSize: 0 }
common.js:735:13
tst<Sidebar-1>: sidebar/scroll:                           canBeStickyTabs  
Array []
common.js:735:13
tst<Sidebar-1>: sidebar/scroll:                           updateStickyTab  
Array []

Object { above: [], below: [] }
common.js:735:13
tst<Sidebar-1>: sidebar/scroll:                          renderVirtualScrollViewport  
Object { firstRenderableIndex: 0, firstRenderableTabIndex: 5, lastRenderableIndex: 14, lastRenderableTabIndex: 56, old: (15) […], new: (15) […], renderOperations: (1) […], scrollPosition: 0, viewPortSize: 479, allRenderableTabsSize: 479 }
common.js:735:13
tst<Sidebar-1>: sidebar/scroll:                          1 msec, offset = 0 common.js:735:13
tst<Sidebar-1>: sidebar/sidebar:                   Normal Tabs Underflow common.js:735:13
tst<Sidebar-1>: sidebar/sidebar:                        updateTabbarLayout reasons: resize common.js:735:13
tst<Sidebar-1>: sidebar/sidebar:                        height:  
Object { newTabButtonSize: 20, extraTabbarTopContainerSize: 0, extraTabbarBottomContainerSize: 0 }
common.js:735:13
tst<Sidebar-1>: sidebar/scroll:                           canBeStickyTabs  
Array []
common.js:735:13
tst<Sidebar-1>: sidebar/scroll:                           updateStickyTab  
Array []

Object { above: [], below: [] }
common.js:735:13
tst<Sidebar-1>: sidebar/scroll:                          renderVirtualScrollViewport  
Object { firstRenderableIndex: 0, firstRenderableTabIndex: 5, lastRenderableIndex: 14, lastRenderableTabIndex: 56, old: (15) […], new: (15) […], renderOperations: (1) […], scrollPosition: 0, viewPortSize: 478, allRenderableTabsSize: 479 }
common.js:735:13
tst<Sidebar-1>: sidebar/scroll:                          2 msec, offset = 0 common.js:735:13
tst<Sidebar-1>: sidebar/sidebar:                 Normal Tabs Underflow common.js:735:13
tst<Sidebar-1>: sidebar/sidebar:                 Normal Tabs Overflow common.js:735:13
tst<Sidebar-1>: sidebar/sidebar:                   Normal Tabs Overflow common.js:735:13

Could you paste logs on your case with the config?: configs-treestyletab@piro.sakura.ne.jp.json (I've just modified your json file to report debug logs about operations to refresh the tab bar. You can deactivate the debug mode with TST options => Development => unchecking "Debug mode".)

piroor commented 4 months ago

See also https://github.com/piroor/treestyletab/wiki/How-to-inspect-tree-of-tabs#how-to-collect-debug-logs-of-tst to collect debug logs of TST.

vkovalcik commented 4 months ago

Sure thing! My log starts when I had a lot of tabs and was one tab before reaching the issue. So the log captures creating a new tab, then a lot of "blinking" and ends with me closing the new tab.


tst<Sidebar-1>: sidebar/scroll:      tryFinishPositionLocking  
Set []
 on tab created common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                          renderVirtualScrollViewport  
Object { firstRenderableIndex: 0, firstRenderableTabIndex: 0, lastRenderableIndex: 50, lastRenderableTabIndex: 180, old: (51) […], new: (51) […], renderOperations: (1) […], scrollPosition: 0, viewPortSize: 1631, allRenderableTabsSize: 1631 }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                          0 msec, offset = 0 common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                   Normal Tabs Underflow common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                   isTabInViewport  184 
Object { allowedOffset: 0, tabTop: 1599, tabBottom: 1632, viewPortTop: 0, viewPortBottom: 1630.5999755859375 }
common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                  scroll to active tab on updateTabbarLayout common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                   scrollToTab to  184 undefined 
Object {  }

Object { stack: "scrollToTab@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:806:33\n@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:831:14\nFrameRequestCallback*@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:824:10\ndispatchWithDetails@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/extlib/EventListenerManager.js:68:32\ndispatch@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/extlib/EventListenerManager.js:47:26\nonOverflow@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:149:41\nonOverflowEvent@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/common.js:1093:7\nEventListener.handleEvent*watchOverflowStateChange@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/common.js:1097:10\nstartObserveOverflowStateChange@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:142:27\ninit@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:101:3\ninit/<@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:288:14\nasync*addAsync@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/MetricsData.js:31:19\naddAsync@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/MetricsData.js:52:32\ninit@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:287:17\nasync*@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/index.js:31:8\n" }
common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                        updateTabbarLayout reasons: resize common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                        height:  
Object { newTabButtonSize: 20, extraTabbarTopContainerSize: 0, extraTabbarBottomContainerSize: 0 }
common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                 Normal Tabs Underflow common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                      isTabInViewport  184 
Object { allowedOffset: 0, tabTop: 1599, tabBottom: 1632, viewPortTop: 0, viewPortBottom: 1629.800048828125 }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                    isTabInViewport  184 
Object { allowedOffset: 0, tabTop: 1599, tabBottom: 1632, viewPortTop: 0, viewPortBottom: 1629.800048828125 }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                           canBeStickyTabs  
Array []
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                           updateStickyTab  
Array []

Object { above: [], below: [] }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                          renderVirtualScrollViewport  
Object { firstRenderableIndex: 0, firstRenderableTabIndex: 0, lastRenderableIndex: 50, lastRenderableTabIndex: 180, old: (51) […], new: (51) […], renderOperations: (1) […], scrollPosition: 0.8000030517578125, viewPortSize: 1630.1999969482422, allRenderableTabsSize: 1631 }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                          1 msec, offset = 0 common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                   Normal Tabs Overflow common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                        updateTabbarLayout reasons: resize common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                        height:  
Object { newTabButtonSize: 19, extraTabbarTopContainerSize: 0, extraTabbarBottomContainerSize: 0 }
common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                             updateTabbarLayout reasons: resize common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                             height:  
Object { newTabButtonSize: 19, extraTabbarTopContainerSize: 0, extraTabbarBottomContainerSize: 0 }
common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                 Normal Tabs Overflow common.js:733:13
tst<Sidebar-1>: sidebar/scroll:      tryFinishPositionLocking  
Set []
 on tab removed 184 common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:            updateTabbarLayout reasons: common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:            height:  
Object { newTabButtonSize: 19, extraTabbarTopContainerSize: 0, extraTabbarBottomContainerSize: 0 }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                      scrollTo  
Object { tab: {…} }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                       smoothScrollTo  
Object { tab: {…} }
 smoothScrollTo@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:698:34
scrollTo@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:602:12
scrollToTab@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:892:11
async*@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:831:14
FrameRequestCallback*@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:824:10
dispatchWithDetails@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/extlib/EventListenerManager.js:68:32
dispatch@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/extlib/EventListenerManager.js:47:26
onOverflow@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:149:41
watchOverflowStateChange/onObserved/<@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/common.js:1032:9
FrameRequestCallback*onObserved@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/common.js:1019:12
watchOverflowStateChange/resizeObserver<@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/common.js:1047:9
ResizeObserverCallback*watchOverflowStateChange@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/common.js:1043:22
startObserveOverflowStateChange@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:142:27
init@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:101:3
init/<@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:288:14
async*addAsync@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/MetricsData.js:31:19
addAsync@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/MetricsData.js:52:32
init@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:287:17
async*@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/index.js:31:8
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                        calculateScrollDeltaForTab  184 
Object { delta: 18.4000244140625, tabTop: 1599, tabBottom: 1632, scrollBoxBottom: 1630.5999755859375 }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                    scrollTo  
Object { tab: {…} }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                     smoothScrollTo  
Object { tab: {…} }
 smoothScrollTo@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:698:34
scrollTo@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:602:12
scrollToTab@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:892:11
async*@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:831:14
FrameRequestCallback*@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:824:10
dispatchWithDetails@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/extlib/EventListenerManager.js:68:32
dispatch@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/extlib/EventListenerManager.js:47:26
onOverflow@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:149:41
onOverflowEvent@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/common.js:1093:7
EventListener.handleEvent*watchOverflowStateChange@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/common.js:1097:10
startObserveOverflowStateChange@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:142:27
init@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:101:3
init/<@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:288:14
async*addAsync@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/MetricsData.js:31:19
addAsync@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/MetricsData.js:52:32
init@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:287:17
async*@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/index.js:31:8
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                      calculateScrollDeltaForTab  184 
Object { delta: 18.4000244140625, tabTop: 1599, tabBottom: 1632, scrollBoxBottom: 1630.5999755859375 }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                     isTabInViewport  184 
Object { allowedOffset: 0, tabTop: 1599, tabBottom: 1632, viewPortTop: 0, viewPortBottom: 1630.5999755859375 }
common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                    scroll to active tab on updateTabbarLayout common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                     scrollToTab to  184 undefined 
Object {  }

Object { stack: "scrollToTab@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:806:33\n@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:831:14\nFrameRequestCallback*@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:824:10\ndispatchWithDetails@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/extlib/EventListenerManager.js:68:32\ndispatch@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/extlib/EventListenerManager.js:47:26\nonOverflow@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:149:41\nwatchOverflowStateChange/onObserved/<@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/common.js:1032:9\nFrameRequestCallback*onObserved@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/common.js:1019:12\nwatchOverflowStateChange/resizeObserver<@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/common.js:1047:9\nResizeObserverCallback*watchOverflowStateChange@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/common.js:1043:22\nstartObserveOverflowStateChange@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:142:27\ninit@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:101:3\ninit/<@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:288:14\nasync*addAsync@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/MetricsData.js:31:19\naddAsync@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/MetricsData.js:52:32\ninit@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:287:17\nasync*@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/index.js:31:8\n" }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                           canBeStickyTabs  
Array []
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                           updateStickyTab  
Array []

Object { above: [], below: [] }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                          renderVirtualScrollViewport  
Object { firstRenderableIndex: 0, firstRenderableTabIndex: 0, lastRenderableIndex: 50, lastRenderableTabIndex: 180, old: (51) […], new: (51) […], renderOperations: (1) […], scrollPosition: 0, viewPortSize: 1631, allRenderableTabsSize: 1631 }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                          0 msec, offset = 0 common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                   Normal Tabs Underflow common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                   isTabInViewport  184 
Object { allowedOffset: 0, tabTop: 1599, tabBottom: 1632, viewPortTop: 0, viewPortBottom: 1630.5999755859375 }
common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                  scroll to active tab on updateTabbarLayout common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                   scrollToTab to  184 undefined 
Object {  }

Object { stack: "scrollToTab@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:806:33\n@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:831:14\nFrameRequestCallback*@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:824:10\ndispatchWithDetails@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/extlib/EventListenerManager.js:68:32\ndispatch@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/extlib/EventListenerManager.js:47:26\nonOverflow@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:149:41\nonOverflowEvent@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/common.js:1093:7\nEventListener.handleEvent*watchOverflowStateChange@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/common.js:1097:10\nstartObserveOverflowStateChange@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:142:27\ninit@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:101:3\ninit/<@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:288:14\nasync*addAsync@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/MetricsData.js:31:19\naddAsync@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/MetricsData.js:52:32\ninit@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:287:17\nasync*@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/index.js:31:8\n" }
common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                        updateTabbarLayout reasons: resize common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                        height:  
Object { newTabButtonSize: 20, extraTabbarTopContainerSize: 0, extraTabbarBottomContainerSize: 0 }
common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                 Normal Tabs Underflow common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                      isTabInViewport  184 
Object { allowedOffset: 0, tabTop: 1599, tabBottom: 1632, viewPortTop: 0, viewPortBottom: 1629.800048828125 }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                    isTabInViewport  184 
Object { allowedOffset: 0, tabTop: 1599, tabBottom: 1632, viewPortTop: 0, viewPortBottom: 1629.800048828125 }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                           canBeStickyTabs  
Array []
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                           updateStickyTab  
Array []

Object { above: [], below: [] }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                          renderVirtualScrollViewport  
Object { firstRenderableIndex: 0, firstRenderableTabIndex: 0, lastRenderableIndex: 50, lastRenderableTabIndex: 180, old: (51) […], new: (51) […], renderOperations: (1) […], scrollPosition: 0.8000030517578125, viewPortSize: 1630.1999969482422, allRenderableTabsSize: 1631 }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                          1 msec, offset = 0 common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                   Normal Tabs Overflow common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                        updateTabbarLayout reasons: resize common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                        height:  
Object { newTabButtonSize: 19, extraTabbarTopContainerSize: 0, extraTabbarBottomContainerSize: 0 }
common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                             updateTabbarLayout reasons: resize common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                             height:  
Object { newTabButtonSize: 19, extraTabbarTopContainerSize: 0, extraTabbarBottomContainerSize: 0 }
common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                 Normal Tabs Overflow common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                      scrollTo  
Object { tab: {…} }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                       smoothScrollTo  
Object { tab: {…} }
 smoothScrollTo@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:698:34
scrollTo@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:602:12
scrollToTab@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:892:11
async*@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:831:14
FrameRequestCallback*@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:824:10
dispatchWithDetails@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/extlib/EventListenerManager.js:68:32
dispatch@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/extlib/EventListenerManager.js:47:26
onOverflow@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:149:41
watchOverflowStateChange/onObserved/<@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/common.js:1032:9
FrameRequestCallback*onObserved@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/common.js:1019:12
watchOverflowStateChange/resizeObserver<@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/common.js:1047:9
ResizeObserverCallback*watchOverflowStateChange@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/common.js:1043:22
startObserveOverflowStateChange@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:142:27
init@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:101:3
init/<@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:288:14
async*addAsync@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/MetricsData.js:31:19
addAsync@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/MetricsData.js:52:32
init@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:287:17
async*@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/index.js:31:8
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                    scrollTo  
Object { tab: {…} }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                     smoothScrollTo  
Object { tab: {…} }
 smoothScrollTo@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:698:34
scrollTo@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:602:12
scrollToTab@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:892:11
async*@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:831:14
FrameRequestCallback*@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:824:10
dispatchWithDetails@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/extlib/EventListenerManager.js:68:32
dispatch@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/extlib/EventListenerManager.js:47:26
onOverflow@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:149:41
onOverflowEvent@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/common.js:1093:7
EventListener.handleEvent*watchOverflowStateChange@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/common.js:1097:10
startObserveOverflowStateChange@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:142:27
init@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:101:3
init/<@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:288:14
async*addAsync@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/MetricsData.js:31:19
addAsync@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/common/MetricsData.js:52:32
init@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/sidebar.js:287:17
async*@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/index.js:31:8
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                     isTabInViewport  180 
Object { allowedOffset: 0, tabTop: 1567, tabBottom: 1600, viewPortTop: 0, viewPortBottom: 1630.5999755859375 }
common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                              updateTabbarLayout reasons: common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                              height:  
Object { newTabButtonSize: 19, extraTabbarTopContainerSize: 0, extraTabbarBottomContainerSize: 0 }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                           canBeStickyTabs  
Array []
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                           updateStickyTab  
Array []

Object { above: [], below: [] }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                          renderVirtualScrollViewport  
Object { firstRenderableIndex: 0, firstRenderableTabIndex: 0, lastRenderableIndex: 49, lastRenderableTabIndex: 179, old: (51) […], new: (50) […], renderOperations: (2) […], scrollPosition: 0, viewPortSize: 1631, allRenderableTabsSize: 1599 }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                          2 msec, offset = 0 common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                   Normal Tabs Underflow common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                   isTabInViewport  180 
Object { allowedOffset: 0, tabTop: 1567, tabBottom: 1600, viewPortTop: 0, viewPortBottom: 1600 }
common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                        updateTabbarLayout reasons: resize common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                        height:  
Object { newTabButtonSize: 20, extraTabbarTopContainerSize: 0, extraTabbarBottomContainerSize: 0 }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:            scrollToTab to  180 undefined 
Object {  }

Object { stack: "scrollToTab@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:806:33\nreserveToScrollToTab/<@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:1106:16\nFrameRequestCallback*reserveToScrollToTab@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:1099:10\nonBackgroundMessage@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/scroll.js:1268:27\nasync*dispatchWithDetails@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/extlib/EventListenerManager.js:68:32\ndispatch@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/extlib/EventListenerManager.js:47:26\nonConnectionMessage@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/background-connection.js:129:17\nonConnectionMessage@moz-extension://fee3c9bc-23b4-46eb-a937-e47ca33e5189/sidebar/background-connection.js:112:26\n" }
common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:                 Normal Tabs Underflow common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                                  canBeStickyTabs  
Array []
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                                  updateStickyTab  
Array []

Object { above: [], below: [] }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                                 renderVirtualScrollViewport  
Object { firstRenderableIndex: 0, firstRenderableTabIndex: 0, lastRenderableIndex: 49, lastRenderableTabIndex: 179, old: (50) […], new: (50) […], renderOperations: (1) […], scrollPosition: 0, viewPortSize: 1630.1999969482422, allRenderableTabsSize: 1599 }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                                 1 msec, offset = 0 common.js:733:13
tst<Sidebar-1>: sidebar/scroll:             isTabInViewport  180 
Object { allowedOffset: 0, tabTop: 1567, tabBottom: 1600, viewPortTop: 0, viewPortBottom: 1600 }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:            => already visible common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:            updateTabbarLayout reasons: common.js:733:13
tst<Sidebar-1>: sidebar/sidebar:            height:  
Object { newTabButtonSize: 20, extraTabbarTopContainerSize: 0, extraTabbarBottomContainerSize: 0 }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                canBeStickyTabs  
Array []
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:                updateStickyTab  
Array []

Object { above: [], below: [] }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:               renderVirtualScrollViewport  
Object { firstRenderableIndex: 0, firstRenderableTabIndex: 0, lastRenderableIndex: 49, lastRenderableTabIndex: 179, old: (50) […], new: (50) […], renderOperations: (1) […], scrollPosition: 0, viewPortSize: 1630.1999969482422, allRenderableTabsSize: 1599 }
common.js:733:13
tst<Sidebar-1>: sidebar/scroll:               0 msec, offset = 0 common.js:733:13

​
piroor commented 3 months ago

Good news: I've successfully reproduced the problem.

There are two triggers:

When both these condition become true, the height of overflowed sidebar contents become smaller than the view port on the edge case, so it repeatedly transitioned between overflow and underflow states.

I've introduced a change 817950a to stabilize sizes of "New Tab" buttons. On my environment the flashing of the scrollbar has gone away even when I apply 125% zoom.

vkovalcik commented 3 months ago

Great work, seems resolved!

I was able to confirm that with the current normal release version the blinking is still happening, but stops when setting zoom to 100 % in my Windows settings. Indeed, it is normally set to 125 % (and Windows even recommends 150 %, so I the >100 % zoom should be fairly common on high resolution monitors).

After installation of the latest development build the problem stops or at least I am no longer able to reproduce it. Excellent :)

BTW I was looking for a way to donate to your project, but didn't find any. Is there a way to do it?

piroor commented 3 months ago

Thanks, but there is no donation way for now. Here is a FAQ topic about that: https://github.com/piroor/treestyletab/blob/trunk/README.md#user-content-other-topics-how-to-donate-to-this-project

vkovalcik commented 3 months ago

I see, I have never read a FAQ entry about not receiving donations (or expected to see one :) ), but it is an interesting read. So anyway thank you very much for the fix and for your add-on!

github-actions[bot] commented 3 months ago

This issue has been closed due to no response within 14 days after labeled as "maybe fixed", 7 days after last reopened, and 7 days after last commented.