From ab2e0c03b867237ddac6198d2d9160fe0dc3e282 Mon Sep 17 00:00:00 2001 From: mauro-balades Date: Tue, 17 Sep 2024 20:31:24 +0200 Subject: [PATCH] Fixed common bugs --- src/browser/app/profile/zen-browser.js | 11 +- src/browser/base/content/ZenStartup.mjs | 2 +- .../content/zen-styles/zen-animations.css | 4 +- .../zen-styles/zen-browser-container.css | 3 +- .../content/zen-styles/zen-compact-mode.css | 43 +++----- .../base/content/zen-styles/zen-sidebar.css | 23 +++- .../zen-styles/zen-tabs/vertical-tabs.css | 100 +++++++++++++++--- .../base/content/zen-styles/zen-theme.css | 2 +- .../base/content/zen-styles/zen-urlbar.css | 15 +++ .../content/zen-styles/zen-workspaces.css | 1 + 10 files changed, 152 insertions(+), 52 deletions(-) diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js index e36106606..2619e0e08 100644 --- a/src/browser/app/profile/zen-browser.js +++ b/src/browser/app/profile/zen-browser.js @@ -52,7 +52,7 @@ pref('pdfjs.enableHighlightFloatingButton', true); pref("alerts.showFavicons", true); -pref("browser.tabs.loadBookmarksInTabs", true); +pref("browser.tabs.loadBookmarksInTabs", false); pref('browser.toolbars.bookmarks.visibility', 'never'); // Enable Do Not Track and GPC by default. @@ -73,7 +73,7 @@ pref('zen.welcomeScreen.seen', false); pref('zen.tabs.vertical', true); pref('zen.tabs.vertical.right-side', false); pref('zen.theme.accent-color', "#aac7ff"); -pref('zen.theme.border-radius', 10); // In pixels +pref('zen.theme.border-radius', 5); // In pixels pref('zen.theme.content-element-separation', 4); // In pixels pref('zen.theme.toolbar-themed', true); pref('zen.theme.pill-button', false); @@ -86,7 +86,7 @@ pref('zen.theme.color-prefs.colorful', false); pref('zen.view.compact.toolbar-flash-popup', true); pref('zen.view.compact.toolbar-flash-popup.duration', 800); -pref('zen.view.sidebar-height-throttle', 500); // in ms +pref('zen.view.sidebar-height-throttle', 200); // in ms pref('zen.view.sidebar-expanded', false); pref('zen.view.sidebar-expanded.on-hover', false); pref('zen.view.sidebar-expanded.show-button', true); @@ -99,7 +99,12 @@ pref('zen.keyboard.shortcuts', ""); // Empty string means default shortcuts pref('zen.keyboard.shortcuts.disable-firefox', false); pref('zen.tabs.dim-pending', true); pref('zen.themes.updated-value-observer', false); + +#ifdef XP_MACOSX +pref('zen.themes.tabs.legacy-location', true); +#else pref('zen.themes.tabs.legacy-location', false); +#endif // Pref to enable the new profiles (TODO: Check this out!) //pref("browser.profiles.enabled", true); diff --git a/src/browser/base/content/ZenStartup.mjs b/src/browser/base/content/ZenStartup.mjs index b956e7b71..207ed8ff0 100644 --- a/src/browser/base/content/ZenStartup.mjs +++ b/src/browser/base/content/ZenStartup.mjs @@ -66,7 +66,7 @@ tabs.style.maxHeight = '0px'; // reset to 0 const toolbarRect = toolbarItems.getBoundingClientRect(); // -5 for the controls padding - let totalHeight = toolbarRect.height - 15; + let totalHeight = toolbarRect.height - 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) { diff --git a/src/browser/base/content/zen-styles/zen-animations.css b/src/browser/base/content/zen-styles/zen-animations.css index 0e2c48ac7..c9e758901 100644 --- a/src/browser/base/content/zen-styles/zen-animations.css +++ b/src/browser/base/content/zen-styles/zen-animations.css @@ -94,7 +94,7 @@ @keyframes zen-vtabs-animation { 0% { opacity: 0; - transform: translateX(-5px); + transform: translateX(-10px); } 20% { @@ -109,7 +109,7 @@ @keyframes zen-sidebar-panel-animation-right { 0% { opacity: 0; - transform: translateX(5px); + transform: translateX(10px); } 20% { diff --git a/src/browser/base/content/zen-styles/zen-browser-container.css b/src/browser/base/content/zen-styles/zen-browser-container.css index 943d4dd2f..a87f7a55e 100644 --- a/src/browser/base/content/zen-styles/zen-browser-container.css +++ b/src/browser/base/content/zen-styles/zen-browser-container.css @@ -8,6 +8,7 @@ /* This fixes an issue with the left border */ --zen-webview-correction-margin: 2px; margin-left: var(--zen-webview-correction-margin); + margin-top: var(--zen-webview-correction-margin); #browser:has(#navigator-toolbox[zen-right-side="true"]) & { margin-left: 0; @@ -17,7 +18,7 @@ --uc-tweak-rounded-corners-shadow-color: var(--zen-colors-border); --uc-tweak-rounded-corners-shadow: - 0 0 1px 1px var(--uc-tweak-rounded-corners-shadow-color); + 0 0 0 1px var(--uc-tweak-rounded-corners-shadow-color); box-shadow: var(--uc-tweak-rounded-corners-shadow) !important; diff --git a/src/browser/base/content/zen-styles/zen-compact-mode.css b/src/browser/base/content/zen-styles/zen-compact-mode.css index fc5417917..eda76c8a4 100644 --- a/src/browser/base/content/zen-styles/zen-compact-mode.css +++ b/src/browser/base/content/zen-styles/zen-compact-mode.css @@ -12,14 +12,12 @@ margin-top: 0 !important; } - #nav-bar { - padding-left: 5px !important; - } - #navigator-toolbox { --zen-compact-toolbox-margin-single: calc(var(--zen-element-separation) * 2); - --zen-compact-toolbox-margin: var(--zen-compact-toolbox-margin-single); - position: absolute; + --zen-compact-toolbox-margin: + calc(var(--zen-compact-toolbox-margin-single) / 2) var(--zen-compact-toolbox-margin-single) + calc(var(--zen-compact-toolbox-margin-single) + var(--zen-element-separation)) var(--zen-compact-toolbox-margin-single); + position: absolute !important; display: block; transition: 200ms ease-in-out !important; transform: translateX(calc(-100% + (var(--zen-compact-toolbox-margin-single) / 2))); @@ -28,6 +26,7 @@ z-index: 2; height: 100%; margin: 0; + margin-top: var(--zen-element-separation) !important; padding: var(--zen-compact-toolbox-margin) !important; min-width: 500px !important; @@ -50,7 +49,7 @@ } } - #tabbrowser-tabpanels { + :root:not([inDOMFullscreen='true']) #tabbrowser-tabpanels { padding: var(--zen-element-separation) !important; padding-top: 0 !important; } @@ -98,6 +97,7 @@ (18px + (var(--toolbarbutton-inner-padding) * 2)) ) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single); + margin-top: 0 !important; :root[zen-sidebar-legacy='true'] & { --zen-compact-toolbox-margin: calc(var(--zen-compact-toolbox-margin-single) / 2) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single) @@ -111,6 +111,11 @@ } } + #navigator-toolbox[zen-right-side='true'] { + right: 0 !important; + transform: translateX(calc(100% - (var(--zen-compact-toolbox-margin-single) / 2))) !important; + } + #navigator-toolbox:hover, #navigator-toolbox:focus-within, #navigator-toolbox[zen-user-show], @@ -120,6 +125,7 @@ #navigator-toolbox:has(.tabbrowser-tab:active), #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) { transform: none !important; + position: absolute !important; opacity: 1; & > * { @@ -200,27 +206,4 @@ margin-top: 10px !important; } } - - #navigator-toolbox[zen-right-side='true'] { - & { - right: 0 !important; - transform: translateX(calc(100% - (var(--zen-compact-toolbox-margin-single) / 2))) !important; - } - - &:hover, - &:focus-within, - &[zen-user-show], - &[flash-popup], - &[movingtab], - &:has(.tabbrowser-tab:active), - & #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox, - &:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) { - transform: none !important; - opacity: 1; - - & > * { - pointer-events: all; - } - } - } } diff --git a/src/browser/base/content/zen-styles/zen-sidebar.css b/src/browser/base/content/zen-styles/zen-sidebar.css index 100fa29b7..0b8d465cd 100644 --- a/src/browser/base/content/zen-styles/zen-sidebar.css +++ b/src/browser/base/content/zen-styles/zen-sidebar.css @@ -10,12 +10,33 @@ toolbar { align-items: center; list-style-image: var(--avatar-image-url); position: relative; + border-radius: var(--tab-border-radius); + + width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important; + height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important; & image { + border-radius: 999px; display: flex; justify-content: center; align-items: center; - padding: 8px; + height: calc(var(--toolbarbutton-inner-padding) + 10px); + width: calc(var(--toolbarbutton-inner-padding) + 10px); + padding: 0; + } + + &:hover { + background-color: var(--toolbarbutton-hover-background); + + & image { + background: transparent !important; + } + } +} + +@media not (-moz-bool-pref: 'zen.view.sidebar-expanded.show-button') { + #zen-expand-sidebar-button { + display: none !important; } } diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css index c811a6144..147dffc23 100644 --- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css +++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css @@ -8,9 +8,16 @@ height: 100%; } + #private-browsing-indicator-with-label { + display: none !important; + } + #browser { --zen-toolbox-padding: 5px; - --zen-toolbox-top-align: var(--zen-toolbox-padding); + + :root:not([zen-sidebar-legacy='true']) & { + --zen-toolbox-top-align: var(--zen-toolbox-padding); + } } #navigator-toolbox { @@ -24,30 +31,47 @@ padding-top: var(--zen-toolbox-top-align); margin-top: 0 !important; + display: flex; } #TabsToolbar-customization-target { + position: relative; gap: var(--zen-toolbox-padding); + &::after { + content: ''; + display: block; + height: 1px; + background: color-mix(in srgb, var(--zen-colors-border) 70%, transparent 30%); + margin: 0 auto; + width: 80%; + left: 50%; + transform: translateX(-50%); + position: absolute; + bottom: calc(-1 * var(--zen-toolbox-padding)); + } } #tabbrowser-tabs { margin-inline-start: 0 !important; padding-inline-start: 0 !important; - grid-gap: 2px !important; - border-bottom: 1px solid var(--zen-colors-border) !important; + position: relative; + border-bottom: 0px solid transparent !important; --tab-block-margin: 2px; + grid-gap: 0 !important; & .tabbrowser-tab { max-width: unset !important; padding: 0 !important; + font-size: var(--urlbarView-small-font-size); + position: relative; - height: var(--tab-min-height) !important; - min-height: var(--tab-min-height) !important; + height: calc(var(--tab-min-height) + var(--tab-block-margin) * 2) !important; + min-height: calc(var(--tab-min-height) + var(--tab-block-margin) * 2) !important; border-radius: var(--border-radius-medium); @@ -100,7 +124,7 @@ #tabbrowser-arrowscrollbox { &::part(scrollbox) { - gap: 2px !important; + gap: 0px !important; } } @@ -154,6 +178,13 @@ padding-right: 0 !important; } + & #TabsToolbar-customization-target { + &::after { + width: 98%; + bottom: calc(-0.5 * var(--zen-toolbox-padding)); + } + } + & #newtab-button-container { &::before { width: 100%; @@ -178,6 +209,12 @@ & #tabbrowser-tabs { & .tabbrowser-tab { + & .tab-background { + @media not (prefers-color-scheme: dark) { + box-shadow: none !important; + } + } + &:not([pinned]):is(:hover, [visuallyselected]) .tab-close-button { display: block !important; } @@ -189,6 +226,11 @@ padding-right: 47px !important; } } + + & #zen-profile-button { + width: 100% !important; + padding: var(--toolbarbutton-inner-padding) !important; + } } /* Mark: toolbox as collapsed */ @@ -242,6 +284,31 @@ } } } + + #vertical-pinned-tabs-container { + display: flex; + flex-direction: column; + gap: 0 !important; + } + + @media (-moz-bool-pref: 'zen.view.sidebar-collapsed.hide-mute-button') { + & .tab-icon-overlay:is([soundplaying], [muted]):not([selected]) { + display: none !important; + + :is( + :root[uidensity=compact], + #tabbrowser-tabs[secondarytext-unsupported], + :root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:hover + ) .tab-icon-stack[indicator-replaces-favicon] > :not(&), + :root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:not(:hover) &[indicator-replaces-favicon] { + opacity: 1 !important; + } + } + } + + & .tab-throbber, & .tab-icon-pending, & .tab-icon-image, & .tab-sharing-icon-overlay, & .tab-icon-overlay { + margin-inline-end: 0 !important; + } } } @@ -285,7 +352,7 @@ #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox, #navigator-toolbox:has(.tabbrowser-tab:active), #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) { - --zen-navigation-toolbar-min-width: 3.4rem !important; + --zen-navigation-toolbar-min-width: 50px !important; max-width: var(--zen-navigation-toolbar-min-width) !important; min-width: var(--zen-navigation-toolbar-min-width) !important; @@ -347,12 +414,6 @@ text-align: start; } } - - #navigator-toolbox, - #titlebar, - #TabsToolbar { - transition: .1s !important; - } } } @@ -373,6 +434,19 @@ &[pinned] .tab-close-button { display: none !important; } + + &[selected] .tab-background { + background: var(--zen-colors-secondary) !important; + } } } + + /* Customization mode */ + :root[customizing] #navigator-toolbox { + overflow: hidden; + max-width: 0 !important; + margin-right: var(--zen-element-separation); + padding: 0 !important; + opacity: 0; + } } \ No newline at end of file diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css index 6724540f2..ba69687c7 100644 --- a/src/browser/base/content/zen-styles/zen-theme.css +++ b/src/browser/base/content/zen-styles/zen-theme.css @@ -71,7 +71,7 @@ --in-content-page-background: var(--zen-colors-tertiary) !important; --zen-in-content-dialog-background: var(--zen-colors-tertiary); - --zen-button-border-radius: 7px; + --zen-button-border-radius: var(--zen-border-radius); --zen-button-padding: 0.6rem 1.2rem; /* Other colors */ diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css index eb146580e..0d3b378f8 100644 --- a/src/browser/base/content/zen-styles/zen-urlbar.css +++ b/src/browser/base/content/zen-styles/zen-urlbar.css @@ -285,3 +285,18 @@ button.popup-notification-dropmarker { padding-inline-start: 0; } } + +@media (-moz-bool-pref: 'zen.view.compact') or (-moz-bool-pref: 'zen.themes.tabs.legacy-location') { + #nav-bar { + padding-left: var(--zen-element-separation) !important; + } + + .titlebar-button:last-child { + padding-right: var(--zen-element-separation) !important; + } +} + + +#PersonalToolbar { + padding-bottom: 6px; +} \ No newline at end of file diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css index 11448cdf4..a437ae98b 100644 --- a/src/browser/base/content/zen-styles/zen-workspaces.css +++ b/src/browser/base/content/zen-styles/zen-workspaces.css @@ -16,6 +16,7 @@ white-space: nowrap; text-overflow: ellipsis; font-size: 12px; + pointer-events: none; } @media (-moz-bool-pref: 'zen.view.sidebar-expanded') {