mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-28 22:18:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update tabs max-height calculation in ZenThemeModifier

Browse Source
This commit is contained in:
Mauro Balades
2024-07-20 01:01:07 +02:00
parent a4a1aa5c43
commit 323c0e51f3
3 changed files with 28 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/browser/base/content/zenThemeModifier.js
View File

@@ -135,8 +135,17 @@ var ZenThemeModifier = {
this._updateZenAvatar(); this._updateZenAvatar();
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this._onPrefersColorSchemeChange.bind(this)); window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this._onPrefersColorSchemeChange.bind(this));
this._updateTabsToolbar(); function throttle(f, delay) {
window.addEventListener("resize", this._onResize.bind(this)); let timer = 0;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => f.apply(this, args), delay);
}
}
new ResizeObserver(throttle(
this._updateTabsToolbar.bind(this), 1000
)).observe(document.getElementById("tabbrowser-tabs"));
this.closeWatermark(); this.closeWatermark();
}, },
@@ -145,17 +154,14 @@ var ZenThemeModifier = {
this._updateZenAvatar(); this._updateZenAvatar();
}, },
_onResize(event) {
this._updateTabsToolbar();
},
_updateTabsToolbar() { _updateTabsToolbar() {
// Set tabs max-height to the "toolbar-items" height // Set tabs max-height to the "toolbar-items" height
const toolbarItems = document.getElementById("tabbrowser-tabs"); const toolbarItems = document.getElementById("tabbrowser-tabs");
const tabs = document.getElementById("tabbrowser-arrowscrollbox"); const tabs = document.getElementById("tabbrowser-arrowscrollbox");
tabs.style.maxHeight = '0px'; // reset to 0
const toolbarRect = toolbarItems.getBoundingClientRect(); const toolbarRect = toolbarItems.getBoundingClientRect();
// -5 for the controls padding // -7 for the controls padding
tabs.style.maxHeight = toolbarRect.height - 5 + "px"; tabs.style.maxHeight = toolbarRect.height - 7 + "px";
console.log("ZenThemeModifier: set tabs max-height to", toolbarRect.height + "px"); console.log("ZenThemeModifier: set tabs max-height to", toolbarRect.height + "px");
}, },

2
src/browser/themes/shared/zen-browser-shared.css
View File

@@ -723,7 +723,5 @@ panelmultiview {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
transition: .1s; transition: .1s;
border-top: 1px solid var(--zen-colors-border);
padding-top: 10px;
} }
} }

14
src/browser/themes/shared/zen-sidebar.css
View File

@@ -169,6 +169,20 @@
align-items: center; align-items: center;
justify-content: end; justify-content: end;
min-height: fit-content; min-height: fit-content;
--zen-sidebar-action-content-separator: 15px;
padding-top: var(--zen-sidebar-action-content-separator);
margin-top: var(--zen-sidebar-action-content-separator);
}
#zen-sidebar-icons-wrapper::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 1px;
background: var(--zen-colors-border);
} }
#zen-sidepanel-button[hidden="true"] { #zen-sidepanel-button[hidden="true"] {