refactor: move sidebar height throttle and content element separation to ZenUIManager; streamline tab toolbar updates

src/browser/base/content/ZenUIManager.mjs

@@ -5,6 +5,45 @@ var gZenUIManager = {
   init() {
     document.addEventListener('popupshowing', this.onPopupShowing.bind(this));
     document.addEventListener('popuphidden', this.onPopupHidden.bind(this));
+    XPCOMUtils.defineLazyPreferenceGetter(this, 'sidebarHeightThrottle', 'zen.view.sidebar-height-throttle', 500);
+    XPCOMUtils.defineLazyPreferenceGetter(
+      this,
+      'contentElementSeparation',
+      'zen.theme.content-element-separation',
+      0
+    );
+    
+    function throttle(f, delay) {
+      let timer = 0;
+      return function (...args) {
+        clearTimeout(timer);
+        timer = setTimeout(() => f.apply(this, args), delay);
+      };
+    }
+
+    new ResizeObserver(throttle(this.updateTabsToolbar.bind(this), this.sidebarHeightThrottle)).observe(
+      document.getElementById('tabbrowser-tabs')
+    );
+  },
+
+
+  updateTabsToolbar() {
+    // Set tabs max-height to the "toolbar-items" height
+    const toolbarItems = document.getElementById('tabbrowser-tabs');
+    const tabs = document.getElementById('tabbrowser-arrowscrollbox');
+    tabs.style.maxHeight = '0px'; // reset to 0
+    const toolbarRect = toolbarItems.getBoundingClientRect();
+    let height = toolbarRect.height;
+    // -5 for the controls padding
+    let totalHeight = toolbarRect.height - (this.contentElementSeparation * 2) - 5;
+    // remove the height from other elements that aren't hidden
+    const otherElements = document.querySelectorAll('#tabbrowser-tabs > *:not([hidden="true"])');
+    for (let tab of otherElements) {
+      if (tabs === tab) continue;
+      totalHeight -= tab.getBoundingClientRect().height;
+    }
+    tabs.style.maxHeight = totalHeight + 'px';
+    //console.info('ZenThemeModifier: set tabs max-height to', totalHeight + 'px');
   },
 
   openAndChangeToTab(url, options) {