From f2c6d0a6b9ceb3dd445ae03bb62f06481d491bf4 Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Sat, 5 Apr 2025 04:15:18 +0200 Subject: [PATCH] fix: streamline style clearing in ZenGlanceManager and update version numbers in surfer.json --- src/browser/base/content/ZenStartup.mjs | 2 - src/browser/base/content/ZenUIManager.mjs | 2 +- src/browser/base/content/browser-xhtml.patch | 6 +- src/browser/base/content/zen-assets.inc.xhtml | 1 - .../base/content/zen-assets.jar.inc.mn | 1 - .../content/zen-styles/zen-browser-ui.css | 39 ++ .../content/zen-styles/zen-compact-mode.css | 509 +++++++++--------- .../zen-styles/zen-gradient-generator.css | 2 +- .../content/zen-styles/zen-sidebar-panels.css | 306 ----------- .../base/zen-components/ZenCompactMode.mjs | 208 +++---- .../base/zen-components/ZenGlanceManager.mjs | 9 +- .../zen-components/ZenGradientGenerator.mjs | 4 +- .../base/zen-components/ZenViewSplitter.mjs | 4 +- surfer.json | 4 +- 14 files changed, 425 insertions(+), 672 deletions(-) delete mode 100644 src/browser/base/content/zen-styles/zen-sidebar-panels.css diff --git a/src/browser/base/content/ZenStartup.mjs b/src/browser/base/content/ZenStartup.mjs index 2d774b7a1..26d9c0c86 100644 --- a/src/browser/base/content/ZenStartup.mjs +++ b/src/browser/base/content/ZenStartup.mjs @@ -83,8 +83,6 @@ _changeSidebarLocation() { const kElementsToAppend = ['sidebar-splitter', 'sidebar-box']; - const appWrapepr = document.getElementById('zen-sidebar-box-container'); - appWrapepr.setAttribute('hidden', 'true'); const browser = document.getElementById('browser'); const toolbox = document.getElementById('navigator-toolbox'); diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs index 389d2d857..14d7b974b 100644 --- a/src/browser/base/content/ZenUIManager.mjs +++ b/src/browser/base/content/ZenUIManager.mjs @@ -657,10 +657,10 @@ var gZenVerticalTabsManager = { this.navigatorToolbox.after(document.getElementById('zen-sidebar-splitter')); window.dispatchEvent(new Event('resize')); gZenCompactModeManager.getAndApplySidebarWidth(); + gZenUIManager.updateTabsToolbar(); } catch (e) { console.error(e); } - gZenUIManager.updateTabsToolbar(); this._isUpdating = false; }, diff --git a/src/browser/base/content/browser-xhtml.patch b/src/browser/base/content/browser-xhtml.patch index 9fe640974..527fb79dc 100644 --- a/src/browser/base/content/browser-xhtml.patch +++ b/src/browser/base/content/browser-xhtml.patch @@ -1,5 +1,5 @@ diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml -index 0d0a559a6473149b50f4bf18d059e86907c4acd3..a5a48ba1d50b3bf74dec3f3d371a76228e246a9e 100644 +index 0d0a559a6473149b50f4bf18d059e86907c4acd3..25ad798eb26f04262d069fdaf1f3fb00adec9807 100644 --- a/browser/base/content/browser.xhtml +++ b/browser/base/content/browser.xhtml @@ -26,6 +26,7 @@ @@ -27,7 +27,7 @@ index 0d0a559a6473149b50f4bf18d059e86907c4acd3..a5a48ba1d50b3bf74dec3f3d371a7622 # All sets except for popupsets (commands, keys, and stringbundles) -@@ -169,9 +173,13 @@ +@@ -169,9 +173,11 @@ @@ -37,8 +37,6 @@ index 0d0a559a6473149b50f4bf18d059e86907c4acd3..a5a48ba1d50b3bf74dec3f3d371a7622 + + + #include navigator-toolbox.inc.xhtml -+ -+ + #include browser-box.inc.xhtml + diff --git a/src/browser/base/content/zen-assets.inc.xhtml b/src/browser/base/content/zen-assets.inc.xhtml index 4bd038f68..3df177b91 100644 --- a/src/browser/base/content/zen-assets.inc.xhtml +++ b/src/browser/base/content/zen-assets.inc.xhtml @@ -19,7 +19,6 @@ - diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn index e78e173a4..f94d0c19c 100644 --- a/src/browser/base/content/zen-assets.jar.inc.mn +++ b/src/browser/base/content/zen-assets.jar.inc.mn @@ -45,7 +45,6 @@ content/browser/zen-styles/zen-workspaces.css (content/zen-styles/zen-workspaces.css) content/browser/zen-styles/zen-urlbar.css (content/zen-styles/zen-urlbar.css) content/browser/zen-styles/zen-popup.css (content/zen-styles/zen-popup.css) - content/browser/zen-styles/zen-sidebar-panels.css (content/zen-styles/zen-sidebar-panels.css) content/browser/zen-styles/zen-gradient-generator.css (content/zen-styles/zen-gradient-generator.css) content/browser/zen-styles/zen-rices.css (content/zen-styles/zen-rices.css) content/browser/zen-styles/zen-branding.css (content/zen-styles/zen-branding.css) diff --git a/src/browser/base/content/zen-styles/zen-browser-ui.css b/src/browser/base/content/zen-styles/zen-browser-ui.css index bbc350802..6b6a32ac4 100644 --- a/src/browser/base/content/zen-styles/zen-browser-ui.css +++ b/src/browser/base/content/zen-styles/zen-browser-ui.css @@ -191,3 +191,42 @@ :root[zen-window-buttons-reversed='true'][zen-right-side='true'] .titlebar-buttonbox-container { margin-inline-start: calc(var(--zen-element-separation) - 3px); } + +.zen-split-view-splitter[orient='vertical'], +#zen-sidebar-splitter { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: var(--zen-element-separation); + background: transparent; + border: none; + cursor: ew-resize; + z-index: 3; + + &:is(.zen-split-view-splitter[orient='vertical']) { + /* Bit of a hacky solution, but it works */ + width: var(--zen-split-row-gap); + margin-left: calc(var(--zen-element-separation) * -1 - 1px); + height: unset; + cursor: ew-resize; + } + + &::before { + height: 50px; + width: 2px; + background: var(--button-primary-bgcolor); + border-radius: 2px; + content: ''; + position: absolute; + top: 50%; + left: 50%; + opacity: 0; + transition: opacity 0.1s ease-in-out; + pointer-events: none; + } + + &:hover::before { + opacity: 1; + } +} 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 7d2cc078d..7766cef61 100644 --- a/src/browser/base/content/zen-styles/zen-compact-mode.css +++ b/src/browser/base/content/zen-styles/zen-compact-mode.css @@ -7,287 +7,288 @@ :root[zen-compact-mode='true']:not([customizing]):not([inDOMFullscreen='true']) { %include zen-tabs/vertical-tabs-topbuttons-fix.css - @media -moz-pref('zen.view.compact.hide-tabbar') or -moz-pref('zen.view.use-single-toolbar') { - #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) { - margin-left: var(--zen-sidebar-web-panel-spacing) !important; - } - - #zen-tabbox-wrapper { - /* Remove extra 1px of margine we have to add to the tabbox */ - margin-left: var(--zen-element-separation) !important; - margin-right: var(--zen-element-separation) !important; - } - - #zen-appcontent-wrapper { - & #tabbrowser-tabbox { - margin-left: 0 !important; + &:not([zen-compact-animating]) { + & #zen-sidebar-splitter { + display: none !important; } - } - #zen-sidebar-top-buttons-customization-target { - padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important; - } + #zen-tabbox-wrapper { + /* Remove extra 1px of margine we have to add to the tabbox */ + margin-left: var(--zen-element-separation) !important; + margin-right: var(--zen-element-separation) !important; + } - #zen-sidebar-splitter { - display: none !important; - } - - &:not([zen-window-buttons-reversed='true']) #zen-appcontent-navbar-container #nav-bar { - margin-left: var(--zen-element-separation) !important; - } - - &[zen-window-buttons-reversed='true'] #zen-appcontent-navbar-container #nav-bar { - margin-right: var(--zen-element-separation) !important; - margin-left: calc(var(--zen-element-separation) - 3px) !important; - } - - #navigator-toolbox { - --zen-toolbox-max-width: 64px !important; - --zen-compact-float: var(--zen-element-separation); - - /* Initial padding for when we are animating */ - padding: 0 0 0 var(--zen-toolbox-padding) !important; - - &:not([animate='true']) { - position: fixed; - z-index: 10; - transition: - left 0.15s ease, - right 0.15s ease, - opacity 1.5s ease; - top: 0; - bottom: var(--zen-element-separation); - padding: 0 var(--zen-compact-float) !important; - opacity: 0; - - :root[zen-single-toolbar='true'] & { - top: calc(var(--zen-element-separation) / 2); - height: calc(100% - var(--zen-element-separation)); - } - - & #zen-sidebar-top-buttons { - margin: 0 0 calc(var(--zen-toolbox-padding) / 2) 0; + #zen-appcontent-wrapper { + & #tabbrowser-tabbox { + margin-left: 0 !important; } } - &:not([zen-right-side='true']) #nav-bar { - margin-left: 0 !important; + #zen-sidebar-splitter { + display: none !important; } - } - &:not([zen-right-side='true']) #navigator-toolbox { - left: calc(-1 * var(--actual-zen-sidebar-width) + 1px); - } - - /* When we have multiple toolbars and the top-toolbar is NOT being hidden, - * we need to adjust the top-padding of the toolbox to account for the - * extra toolbar height. */ - @media not -moz-pref('zen.view.compact.hide-toolbar') { - &:not([zen-single-toolbar='true']) { - #navigator-toolbox:not([animate='true']) { - margin-top: var(--zen-toolbar-height) !important; - } + #zen-sidebar-top-buttons-customization-target { + padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important; } - } - &[zen-right-side='true'] { - & #navigator-toolbox { - --zen-compact-float: calc(var(--zen-element-separation) + 1px); + &:not([zen-window-buttons-reversed='true']) #zen-appcontent-navbar-container #nav-bar { + margin-left: var(--zen-element-separation) !important; + } + + &[zen-window-buttons-reversed='true'] #zen-appcontent-navbar-container #nav-bar { + margin-right: var(--zen-element-separation) !important; + margin-left: calc(var(--zen-element-separation) - 3px) !important; + } + + #navigator-toolbox { + --zen-toolbox-max-width: 64px !important; + --zen-compact-float: var(--zen-element-separation); + + /* Initial padding for when we are animating */ + padding: 0 0 0 var(--zen-toolbox-padding) !important; &:not([animate='true']) { - right: calc(-1 * var(--actual-zen-sidebar-width) + 1px); + position: fixed; + z-index: 10; + transition: + left 0.15s ease, + right 0.15s ease, + opacity 1.5s ease; + top: 0; + bottom: var(--zen-element-separation); + padding: 0 var(--zen-compact-float) !important; + opacity: 0; + + :root[zen-single-toolbar='true'] & { + top: calc(var(--zen-element-separation) / 2); + height: calc(100% - var(--zen-element-separation)); + } + + & #zen-sidebar-top-buttons { + margin: 0 0 calc(var(--zen-toolbox-padding) / 2) 0; + } + } + + &:not([zen-right-side='true']) #nav-bar { + margin-left: 0 !important; } } - & .browserSidebarContainer { - margin-left: 0 !important; - margin-right: 0 !important; + &:not([zen-right-side='true']) #navigator-toolbox { + left: calc(-1 * var(--actual-zen-sidebar-width) + 1px); } - } - #navigator-toolbox:not([animate='true']) #titlebar { - box-shadow: var(--zen-big-shadow); - border-radius: calc(var(--zen-native-inner-radius) + var(--zen-element-separation) / 4); - padding: var(--zen-toolbox-padding) !important; - position: relative; - background: var(--zen-dialog-background); - outline: 1px solid var(--zen-colors-border-contrast); - outline-offset: -1px; - /* times 4 because we have the inner padding and the outter padding to consider */ - :root[zen-sidebar-expanded='true'] & { - &[has-animated-padding='true'] { - width: calc(var(--zen-sidebar-width) + var(--zen-toolbox-padding)); - } - - &:not([has-animated-padding='true']) { - width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding)); + /* When we have multiple toolbars and the top-toolbar is NOT being hidden, + * we need to adjust the top-padding of the toolbox to account for the + * extra toolbar height. */ + @media not -moz-pref('zen.view.compact.hide-toolbar') { + &:not([zen-single-toolbar='true']) { + #navigator-toolbox:not([animate='true']) { + margin-top: var(--zen-toolbar-height) !important; + } } } - :root[zen-single-toolbar='true'] { - padding-top: 0 !important; - margin-left: 0 !important; + &[zen-right-side='true'] { + & #navigator-toolbox { + --zen-compact-float: calc(var(--zen-element-separation) + 1px); + + &:not([animate='true']) { + right: calc(-1 * var(--actual-zen-sidebar-width) + 1px); + } + } + + & .browserSidebarContainer { + margin-left: 0 !important; + margin-right: 0 !important; + } } - @media -moz-pref('zen.view.compact.color-sidebar') { - background: var(--zen-main-browser-background-toolbar) !important; - background-attachment: fixed !important; - background-size: 2000px !important; /* Dont ask me why */ - /* NOTE: We MUST not add a backdrop-filter if we want the URL - * bar to be floating correctly: - * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Containing_block#identifying_the_containing_block */ + #navigator-toolbox:not([animate='true']) #titlebar { + box-shadow: var(--zen-big-shadow); + border-radius: calc(var(--zen-native-inner-radius) + var(--zen-element-separation) / 4); + padding: var(--zen-toolbox-padding) !important; + position: relative; + background: var(--zen-dialog-background); + outline: 1px solid var(--zen-colors-border-contrast); + outline-offset: -1px; + /* times 4 because we have the inner padding and the outter padding to consider */ + :root[zen-sidebar-expanded='true'] & { + &[has-animated-padding='true'] { + width: calc(var(--zen-sidebar-width) + var(--zen-toolbox-padding)); + } + + &:not([has-animated-padding='true']) { + width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding)); + } + } + + :root[zen-single-toolbar='true'] { + padding-top: 0 !important; + margin-left: 0 !important; + } + + @media -moz-pref('zen.view.compact.color-sidebar') { + background: var(--zen-main-browser-background-toolbar) !important; + background-attachment: fixed !important; + background-size: 2000px !important; /* Dont ask me why */ + /* NOTE: We MUST not add a backdrop-filter if we want the URL + * bar to be floating correctly: + * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Containing_block#identifying_the_containing_block */ + } + + & #urlbar[open][zen-floating-urlbar='true'] { + transition: left 0.05s ease; + visibility: visible; + + #navigator-toolbox:has(&) { + opacity: 1; + } + } + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-image: url(chrome://browser/content/zen-images/grain-bg.png); + pointer-events: none; + z-index: 0; + opacity: var(--zen-grainy-background-opacity, 0); + mix-blend-mode: overlay; + } } - & #urlbar[open][zen-floating-urlbar='true'] { - transition: left 0.05s ease; - visibility: visible; - - #navigator-toolbox:has(&) { + #navigator-toolbox[zen-has-hover]:not(:has(#urlbar[zen-floating-urlbar='true']:hover)), + #navigator-toolbox[zen-user-show], + #navigator-toolbox[zen-has-empty-tab], + #navigator-toolbox[flash-popup], + #navigator-toolbox[has-popup-menu], + #navigator-toolbox[movingtab], + #navigator-toolbox:has(.tabbrowser-tab:active), + &[zen-renaming-tab='true'] #navigator-toolbox, + #navigator-toolbox:has( + *:is([panelopen='true'], [open='true'], #urlbar:focus-within):not(#urlbar[zen-floating-urlbar='true']):not(tab):not(.zen-compact-mode-ignore) + ) { + &:not([animate='true']) { + --zen-compact-mode-func: linear( + 0 0%, + 0.002748 1%, + 0.010544 2%, + 0.022757 3%, + 0.038804 4%, + 0.058151 5%, + 0.080308 6%, + 0.104828 7.000000000000001%, + 0.131301 8%, + 0.159358 9%, + 0.188662 10%, + 0.21891 11%, + 0.249828 12%, + 0.281172 13%, + 0.312724 14.000000000000002%, + 0.344288 15%, + 0.375693 16%, + 0.40679 17%, + 0.437447 18%, + 0.467549 19%, + 0.497 20%, + 0.525718 21%, + 0.553633 22%, + 0.580688 23%, + 0.60684 24%, + 0.632052 25%, + 0.656298 26%, + 0.679562 27%, + 0.701831 28.000000000000004%, + 0.723104 28.999999999999996%, + 0.743381 30%, + 0.76267 31%, + 0.780983 32%, + 0.798335 33%, + 0.814744 34%, + 0.830233 35%, + 0.844826 36%, + 0.858549 37%, + 0.87143 38%, + 0.883498 39%, + 0.894782 40%, + 0.905314 41%, + 0.915125 42%, + 0.924247 43%, + 0.93271 44%, + 0.940547 45%, + 0.947787 46%, + 0.954463 47%, + 0.960603 48%, + 0.966239 49%, + 0.971397 50%, + 0.976106 51%, + 0.980394 52%, + 0.984286 53%, + 0.987808 54%, + 0.990984 55.00000000000001%, + 0.993837 56.00000000000001%, + 0.99639 56.99999999999999%, + 0.998664 57.99999999999999%, + 1.000679 59%, + 1.002456 60%, + 1.004011 61%, + 1.005363 62%, + 1.006528 63%, + 1.007522 64%, + 1.008359 65%, + 1.009054 66%, + 1.009618 67%, + 1.010065 68%, + 1.010405 69%, + 1.010649 70%, + 1.010808 71%, + 1.01089 72%, + 1.010904 73%, + 1.010857 74%, + 1.010757 75%, + 1.010611 76%, + 1.010425 77%, + 1.010205 78%, + 1.009955 79%, + 1.009681 80%, + 1.009387 81%, + 1.009077 82%, + 1.008754 83%, + 1.008422 84%, + 1.008083 85%, + 1.00774 86%, + 1.007396 87%, + 1.007052 88%, + 1.00671 89%, + 1.006372 90%, + 1.00604 91%, + 1.005713 92%, + 1.005394 93%, + 1.005083 94%, + 1.004782 95%, + 1.004489 96%, + 1.004207 97%, + 1.003935 98%, + 1.003674 99%, + 1.003423 100% + ); + transition: + left 0.25s var(--zen-compact-mode-func), + right 0.25s var(--zen-compact-mode-func); opacity: 1; - } - } - &::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-image: url(chrome://browser/content/zen-images/grain-bg.png); - pointer-events: none; - z-index: 0; - opacity: var(--zen-grainy-background-opacity, 0); - mix-blend-mode: overlay; - } - } - - #navigator-toolbox[zen-has-hover]:not(:has(#urlbar[zen-floating-urlbar='true']:hover)), - #navigator-toolbox[zen-user-show], - #navigator-toolbox[zen-has-empty-tab], - #navigator-toolbox[flash-popup], - #navigator-toolbox[has-popup-menu], - #navigator-toolbox[movingtab], - #navigator-toolbox:has(.tabbrowser-tab:active), - &[zen-renaming-tab='true'] #navigator-toolbox, - #navigator-toolbox:has( - *:is([panelopen='true'], [open='true'], #urlbar:focus-within):not(#urlbar[zen-floating-urlbar='true']):not(tab):not(.zen-compact-mode-ignore) - ) { - &:not([animate='true']) { - --zen-compact-mode-func: linear( - 0 0%, - 0.002748 1%, - 0.010544 2%, - 0.022757 3%, - 0.038804 4%, - 0.058151 5%, - 0.080308 6%, - 0.104828 7.000000000000001%, - 0.131301 8%, - 0.159358 9%, - 0.188662 10%, - 0.21891 11%, - 0.249828 12%, - 0.281172 13%, - 0.312724 14.000000000000002%, - 0.344288 15%, - 0.375693 16%, - 0.40679 17%, - 0.437447 18%, - 0.467549 19%, - 0.497 20%, - 0.525718 21%, - 0.553633 22%, - 0.580688 23%, - 0.60684 24%, - 0.632052 25%, - 0.656298 26%, - 0.679562 27%, - 0.701831 28.000000000000004%, - 0.723104 28.999999999999996%, - 0.743381 30%, - 0.76267 31%, - 0.780983 32%, - 0.798335 33%, - 0.814744 34%, - 0.830233 35%, - 0.844826 36%, - 0.858549 37%, - 0.87143 38%, - 0.883498 39%, - 0.894782 40%, - 0.905314 41%, - 0.915125 42%, - 0.924247 43%, - 0.93271 44%, - 0.940547 45%, - 0.947787 46%, - 0.954463 47%, - 0.960603 48%, - 0.966239 49%, - 0.971397 50%, - 0.976106 51%, - 0.980394 52%, - 0.984286 53%, - 0.987808 54%, - 0.990984 55.00000000000001%, - 0.993837 56.00000000000001%, - 0.99639 56.99999999999999%, - 0.998664 57.99999999999999%, - 1.000679 59%, - 1.002456 60%, - 1.004011 61%, - 1.005363 62%, - 1.006528 63%, - 1.007522 64%, - 1.008359 65%, - 1.009054 66%, - 1.009618 67%, - 1.010065 68%, - 1.010405 69%, - 1.010649 70%, - 1.010808 71%, - 1.01089 72%, - 1.010904 73%, - 1.010857 74%, - 1.010757 75%, - 1.010611 76%, - 1.010425 77%, - 1.010205 78%, - 1.009955 79%, - 1.009681 80%, - 1.009387 81%, - 1.009077 82%, - 1.008754 83%, - 1.008422 84%, - 1.008083 85%, - 1.00774 86%, - 1.007396 87%, - 1.007052 88%, - 1.00671 89%, - 1.006372 90%, - 1.00604 91%, - 1.005713 92%, - 1.005394 93%, - 1.005083 94%, - 1.004782 95%, - 1.004489 96%, - 1.004207 97%, - 1.003935 98%, - 1.003674 99%, - 1.003423 100% - ); - transition: - left 0.25s var(--zen-compact-mode-func), - right 0.25s var(--zen-compact-mode-func); - opacity: 1; - - &:not([supress-primary-adjustment='true']) { - left: calc(var(--zen-element-separation) / -2); - :root[zen-right-side='true'] & { - right: calc(var(--zen-element-separation) / -2); - left: auto; + &:not([supress-primary-adjustment='true']) { + left: calc(var(--zen-element-separation) / -2); + :root[zen-right-side='true'] & { + right: calc(var(--zen-element-separation) / -2); + left: auto; + } } } } diff --git a/src/browser/base/content/zen-styles/zen-gradient-generator.css b/src/browser/base/content/zen-styles/zen-gradient-generator.css index 5befbbc9d..515058327 100644 --- a/src/browser/base/content/zen-styles/zen-gradient-generator.css +++ b/src/browser/base/content/zen-styles/zen-gradient-generator.css @@ -133,7 +133,7 @@ padding: 5px; position: relative; - & .zen-theme-picker-dot-custom { + & .zen-theme-picker-dot.custom { background: var(--zen-theme-picker-dot-color); border: 1px solid var(--zen-colors-border); border-radius: 5px; diff --git a/src/browser/base/content/zen-styles/zen-sidebar-panels.css b/src/browser/base/content/zen-styles/zen-sidebar-panels.css deleted file mode 100644 index 3bdb4ebdf..000000000 --- a/src/browser/base/content/zen-styles/zen-sidebar-panels.css +++ /dev/null @@ -1,306 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. - */ - -#zen-sidebar-panels-wrapper { - /*min-height: 500px;*/ - display: flex; - align-items: center; - justify-content: space-between; - align-content: center; -} - -#zen-sidebar-panels-sites { - background: transparent; - max-width: 1px; - display: flex; -} - -#zen-sidebar-add-panel-button:not(:hover) image, -.zen-sidebar-panel-button:not([selected='true'], #zen-sidebar-add-panel-button) image { - background: transparent !important; -} - -.zen-sidebar-panel-button { - width: var(--zen-sidebar-action-button-width); - height: var(--zen-sidebar-action-button-width); - max-height: var(--zen-sidebar-action-button-width); - padding: 0 3px !important; - margin: 0; - justify-content: center; - align-items: center; - cursor: pointer; -} - -.zen-sidebar-panel-button image { - border-radius: 10px !important; - border: 2px solid transparent; -} - -.zen-sidebar-panel-button:hover image { - background: color-mix(in srgb, var(--toolbarbutton-hover-background) 12%, transparent); -} - -.zen-sidebar-panel-button[selected='true'] image { - border-color: var(--zen-primary-color); -} - -/** Sidebar view */ - -#zen-sidebar-web-panel-wrapper { - --zen-default-sidebar-width: 300px; - --zen-sidebar-web-panel-spacing: var(--zen-element-separation); - position: relative; - margin-right: 0; - display: flex; - pointer-events: none; - transition: width 0.3s ease-in-out; -} - -#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[hidden='true']) { - max-width: 0; - padding: 0; - margin: 0; - display: none; -} - -#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) { - position: absolute; - z-index: 1; - width: calc(100% - var(--zen-sidebar-web-panel-spacing) * 3); - margin: var(--zen-sidebar-web-panel-spacing); - /* Why times 3? - * + 1 for the top margin, making the element overflow the view. - * + 1 for the margin we want to add at the bottom - * + 1 so that the panel can be correctly spaced from the border of the webview - */ - height: calc(100% - var(--zen-sidebar-web-panel-spacing) * 4); -} - -#zen-sidebar-web-panel { - border-radius: var(--zen-native-inner-radius); - z-index: 2; - box-shadow: var(--zen-big-shadow); - background: var(--zen-colors-tertiary); - opacity: 0; - animation-delay: 0.1s; - flex-direction: column; - min-width: var(--zen-default-sidebar-width); - max-width: 720px; - min-height: var(--zen-default-sidebar-width); - width: calc(var(--zen-default-sidebar-width) + 200px); - pointer-events: all; - height: calc(100% - 20px); -} - -#zen-sidebar-web-panel:not([pinned='true']) { - /* We need to always override the height */ - height: unset !important; -} - -.zen-sidebar-web-panel-splitter, -.zen-split-view-splitter[orient='vertical'], -#zen-sidebar-splitter { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: var(--zen-element-separation); - background: transparent; - border: none; - cursor: ew-resize; - z-index: 3; - - &:is(.zen-split-view-splitter[orient='vertical']) { - /* Bit of a hacky solution, but it works */ - width: var(--zen-split-row-gap); - margin-left: calc(var(--zen-element-separation) * -1 - 1px); - height: unset; - cursor: ew-resize; - } - - &::before { - height: 50px; - width: 2px; - background: var(--button-primary-bgcolor); - border-radius: 2px; - content: ''; - position: absolute; - top: 50%; - left: 50%; - opacity: 0; - transition: opacity 0.1s ease-in-out; - pointer-events: none; - } - - &:hover::before { - opacity: 1; - } -} - -.zen-sidebar-web-panel-splitter[side='right'] { - left: 100%; -} - -.zen-sidebar-web-panel-splitter[side='left'] { - right: 100%; -} - -.zen-sidebar-web-panel-splitter[orient='horizontal'] { - width: 100%; - height: 7px; - cursor: ns-resize; - - &::before { - display: none; - } -} - -.zen-sidebar-web-panel-splitter[side='bottom'] { - top: initial; - bottom: -2px; -} - -#zen-sidebar-web-panel[hidden='true'] .zen-sidebar-web-panel-splitter, -#zen-sidebar-web-panel-wrapper[hidden='true'] + .zen-sidebar-web-panel-splitter, -#zen-sidebar-web-panel:not([pinned='true']) .zen-sidebar-web-panel-splitter[orient='horizontal'], -#zen-sidebar-web-panel:not([pinned='true']) .zen-sidebar-web-panel-splitter[side='left'] { - display: none; - margin: 0; -} - -#main-window[customizing='true'] #zen-sidebar-web-panel-wrapper { - display: none !important; -} - -#zen-sidebar-web-panel:not([hidden='true']) { - display: flex; -} - -#zen-sidebar-web-panel[pinned='true'] { - position: absolute; - z-index: 1; - max-height: 100%; -} - -#zen-sidebar-web-panel[hidden='true'][pinned='true'] { - display: flex; - pointer-events: none; -} - -#zen-sidebar-web-header, -#zen-sidebar-panels-wrapper { - width: 100%; - min-height: var(--zen-toolbar-height) !important; - display: flex; - align-items: center; - padding: 0 5px; - border: var(--zen-appcontent-border); - border-width: 0 !important; - border-bottom-width: 1px !important; - background: transparent; - position: relative; - color-scheme: var(--toolbar-color-scheme); - -moz-window-dragging: no-drag; - - --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important; -} - -#zen-sidebar-web-header { - justify-content: space-between; -} - -#zen-sidebar-web-header toolbarbutton { - fill: color-mix(in srgb, var(--toolbarbutton-icon-fill) 70%, transparent); -} - -#zen-sidebar-panels-wrapper { - border-top-width: 1px !important; - border-bottom-width: 0px !important; -} - -#zen-sidebar-web-panel-browser-containers { - height: 100%; - position: relative; -} - -#zen-sidebar-introduction-panel { - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin: 0 auto; - width: 70%; -} - -#zen-sidebar-introduction-panel[hidden='true'] { - display: none; -} - -#zen-sidebar-introduction-panel h1 { - font-size: 1.5em; - font-weight: 600; - margin: 0; - margin-bottom: 2px; -} - -#zen-sidebar-introduction-panel p { - opacity: 0.7; - text-align: center; -} - -#zen-sidebar-web-panel browser[zen-sidebar-id] { - height: 100%; -} - -#zen-sidebar-web-panel-title { - font-size: 0.9em; - font-weight: 600; - margin: 0 10px; - padding: 0; - color: var(--text-color-deemphasized); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: -moz-available; - text-align: center; - display: block; -} - -#zen-sidebar-web-panel[pinned] { - transform-origin: 50% 20%; -} - -#zen-sidebar-web-panel[pinned]:not([hidden]) { - animation: better-sidebar-pinned-show 0.15s ease-in-out forwards !important; -} - -#zen-sidebar-web-panel[pinned][hidden] { - animation: better-sidebar-pinned-hide 0.15s ease-in-out forwards !important; -} - -/** UNPINNED **/ -#zen-sidebar-web-panel { - /* Sets perspective */ - transform-origin: 50% 20%; -} - -#zen-sidebar-web-panel:not([hidden]) #zen-sidebar-introduction-panel * { - opacity: 0; - animation: better-sidebar-intro-show 0.5s 0.4s ease-out forwards !important; -} - -#zen-sidebar-web-panel:not([hidden]) #zen-sidebar-introduction-panel p { - animation: better-sidebar-intro-show 0.5s 0.8s ease-out forwards !important; -} - -#zen-sidebar-web-panel:not([hidden]) { - animation: better-sidebar-show 0.15s ease-in-out forwards !important; -} - -#zen-sidebar-web-panel[hidden] { - animation: better-sidebar-hide 0.15s ease-in-out forwards !important; -} diff --git a/src/browser/base/zen-components/ZenCompactMode.mjs b/src/browser/base/zen-components/ZenCompactMode.mjs index d444ac9fa..3707c4376 100644 --- a/src/browser/base/zen-components/ZenCompactMode.mjs +++ b/src/browser/base/zen-components/ZenCompactMode.mjs @@ -27,7 +27,6 @@ var gZenCompactModeManager = { _flashTimeouts: {}, _evenListeners: [], _removeHoverFrames: {}, - _animating: false, init() { Services.prefs.addObserver('zen.tabs.vertical.right-side', this._updateSidebarIsOnRight.bind(this)); @@ -67,7 +66,7 @@ var gZenCompactModeManager = { }, set preference(value) { - if (this.preference === value || this._animating) { + if (this.preference === value || document.documentElement.hasAttribute('zen-compact-animating')) { // We dont want the user to be able to spam the button return value; } @@ -146,10 +145,17 @@ var gZenCompactModeManager = { this._evenListeners.push(callback); }, - _updateEvent() { - this._evenListeners.forEach((callback) => callback()); + async _updateEvent() { + // IF we are animating IN, call the callbacks first so we can calculate the width + // once the window buttons are shown this.updateContextMenu(); - this.animateCompactMode(); + if (!this.preference) { + this._evenListeners.forEach((callback) => callback()); + await this.animateCompactMode(); + } else { + await this.animateCompactMode(); + this._evenListeners.forEach((callback) => callback()); + } }, // NOTE: Dont actually use event, it's just so we make sure @@ -160,6 +166,7 @@ var gZenCompactModeManager = { gZenUIManager.restoreScrollbarState(); // Second variable to get the genuine width of the sidebar this.sidebar.style.setProperty('--actual-zen-sidebar-width', `${sidebarWidth}px`); + window.dispatchEvent(new window.Event('resize')); // To recalculate the layout if (event && this.preference) { return; } @@ -169,104 +176,121 @@ var gZenCompactModeManager = { }, animateCompactMode() { - this._animating = true; - const isCompactMode = this.preference; - const canHideSidebar = - Services.prefs.getBoolPref('zen.view.compact.hide-tabbar') || gZenVerticalTabsManager._hasSetSingleToolbar; - const canAnimate = - lazyCompactMode.COMPACT_MODE_CAN_ANIMATE_SIDEBAR && - !this.sidebar.hasAttribute('zen-user-show') && - !this.sidebar.hasAttribute('zen-has-empty-tab') && - !this.sidebar.hasAttribute('zen-has-hover'); - // Do this so we can get the correct width ONCE compact mode styled have been applied - const titlebar = this.sidebar.querySelector('#titlebar'); - if (canAnimate) { - this.sidebar.setAttribute('animate', 'true'); - titlebar.setAttribute('has-animated-padding', 'true'); - } else { - titlebar.removeAttribute('has-animated-padding'); - } - this.sidebar.style.removeProperty('margin-right'); - this.sidebar.style.removeProperty('margin-left'); - this.sidebar.style.removeProperty('transform'); - window.requestAnimationFrame(() => { - let sidebarWidth = this.getAndApplySidebarWidth(); - if (!canAnimate) { - this.sidebar.removeAttribute('animate'); - this._animating = false; - return; + return new Promise((resolve) => { + // Get the splitter width before hiding it (we need to hide it before animating on right) + document.documentElement.setAttribute('zen-compact-animating', 'true'); + // We need to set the splitter width before hiding it + let splitterWidth = document.getElementById('zen-sidebar-splitter').getBoundingClientRect().width; + const isCompactMode = this.preference; + const canHideSidebar = + Services.prefs.getBoolPref('zen.view.compact.hide-tabbar') || gZenVerticalTabsManager._hasSetSingleToolbar; + const canAnimate = + lazyCompactMode.COMPACT_MODE_CAN_ANIMATE_SIDEBAR && + !this.sidebar.hasAttribute('zen-user-show') && + !this.sidebar.hasAttribute('zen-has-empty-tab') && + !this.sidebar.hasAttribute('zen-has-hover'); + // Do this so we can get the correct width ONCE compact mode styled have been applied + const titlebar = this.sidebar.querySelector('#titlebar'); + if (canAnimate) { + this.sidebar.setAttribute('animate', 'true'); + titlebar.setAttribute('has-animated-padding', 'true'); + } else { + titlebar.removeAttribute('has-animated-padding'); } - if (canHideSidebar && isCompactMode) { - gZenUIManager.motion - .animate( - this.sidebar, - this.sidebarIsOnRight - ? { - marginRight: `-${sidebarWidth}px`, - } - : { marginLeft: `-${sidebarWidth}px` }, - { - ease: 'easeIn', - type: 'spring', - bounce: 0, - duration: 0.2, - } - ) - .then(() => { - window.requestAnimationFrame(() => { + this.sidebar.style.removeProperty('margin-right'); + this.sidebar.style.removeProperty('margin-left'); + this.sidebar.style.removeProperty('transform'); + window.requestAnimationFrame(() => { + let sidebarWidth = this.getAndApplySidebarWidth(); + if (!canAnimate) { + this.sidebar.removeAttribute('animate'); + document.documentElement.removeAttribute('zen-compact-animating'); + resolve(); + return; + } + if (canHideSidebar && isCompactMode) { + sidebarWidth -= 0.5 * splitterWidth; + gZenUIManager.motion + .animate( + this.sidebar, + { + marginRight: this.sidebarIsOnRight ? `-${sidebarWidth}px` : 0, + marginLeft: this.sidebarIsOnRight ? 0 : `-${sidebarWidth}px`, + }, + { + ease: 'easeIn', + type: 'spring', + bounce: 0, + duration: 0.2, + } + ) + .then(() => { this.sidebar.style.transition = 'none'; + this.sidebar.style.opacity = 0; + this.getAndApplySidebarWidth(); + setTimeout(() => { + this.sidebar.removeAttribute('animate'); + document.documentElement.removeAttribute('zen-compact-animating'); + this.sidebar.style.removeProperty('margin-right'); + this.sidebar.style.removeProperty('margin-left'); + if (this.sidebarIsOnRight) { + this.sidebar.style.right = `-100%`; + } else { + this.sidebar.style.left = `-100%`; + } + + setTimeout(() => { + this.sidebar.style.left = ''; + this.sidebar.style.right = ''; + this.sidebar.style.removeProperty('opacity'); + this.sidebar.style.removeProperty('transform'); + this.sidebar.style.removeProperty('transition'); + }, 200); + + resolve(); + }, 0); + }); + } else if (canHideSidebar && !isCompactMode) { + document.getElementById('browser').style.overflow = 'clip'; + if (this.sidebarIsOnRight) { + this.sidebar.style.marginRight = `-${sidebarWidth}px`; + } else { + this.sidebar.style.marginLeft = `-${sidebarWidth}px`; + } + gZenUIManager.motion + .animate( + this.sidebar, + this.sidebarIsOnRight + ? { + marginRight: [`-${sidebarWidth}px`, 0], + transform: ['translateX(100%)', 'translateX(0)'], + } + : { marginLeft: 0 }, + { + ease: 'easeOut', + type: 'spring', + bounce: 0, + duration: 0.2, + } + ) + .then(() => { this.sidebar.removeAttribute('animate'); - this.sidebar.style.visibility = 'hidden'; + document.getElementById('browser').style.removeProperty('overflow'); + this.sidebar.style.transition = 'none'; this.sidebar.style.removeProperty('margin-right'); this.sidebar.style.removeProperty('margin-left'); this.sidebar.style.removeProperty('transform'); + document.documentElement.removeAttribute('zen-compact-animating'); setTimeout(() => { - this._animating = false; - this.sidebar.style.removeProperty('visibility'); this.sidebar.style.removeProperty('transition'); - this.sidebar.style.removeProperty('opacity'); - }, 300); + resolve(); + }); }); - }); - } else if (canHideSidebar && !isCompactMode) { - document.getElementById('browser').style.overflow = 'clip'; - if (this.sidebarIsOnRight) { - this.sidebar.style.marginRight = `-${sidebarWidth}px`; } else { - this.sidebar.style.marginLeft = `-${sidebarWidth}px`; + this.sidebar.removeAttribute('animate'); // remove the attribute if we are not animating + document.documentElement.removeAttribute('zen-compact-animating'); } - gZenUIManager.motion - .animate( - this.sidebar, - this.sidebarIsOnRight - ? { - marginRight: [`-${sidebarWidth}px`, 0], - transform: ['translateX(100%)', 'translateX(0)'], - } - : { marginLeft: 0 }, - { - ease: 'easeOut', - type: 'spring', - bounce: 0, - duration: 0.2, - } - ) - .then(() => { - this.sidebar.removeAttribute('animate'); - document.getElementById('browser').style.removeProperty('overflow'); - this.sidebar.style.transition = 'none'; - this.sidebar.style.removeProperty('margin-right'); - this.sidebar.style.removeProperty('margin-left'); - this.sidebar.style.removeProperty('transform'); - this._animating = false; - setTimeout(() => { - this.sidebar.style.removeProperty('transition'); - }); - }); - } else { - this.sidebar.removeAttribute('animate'); // remove the attribute if we are not animating - this._animating = false; - } + }); }); }, diff --git a/src/browser/base/zen-components/ZenGlanceManager.mjs b/src/browser/base/zen-components/ZenGlanceManager.mjs index 0ab461254..ed0e4db40 100644 --- a/src/browser/base/zen-components/ZenGlanceManager.mjs +++ b/src/browser/base/zen-components/ZenGlanceManager.mjs @@ -228,10 +228,8 @@ _clearContainerStyles(container) { const inset = container.style.inset; - window.requestAnimationFrame(() => { - container.removeAttribute('style'); - container.style.inset = inset; - }); + container.removeAttribute('style'); + container.style.inset = inset; } closeGlance({ @@ -560,12 +558,13 @@ async fullyOpenGlance({ forSplit = false } = {}) { this.animatingFullOpen = true; - this.#currentTab.removeAttribute('zen-glance-tab'); + this.#currentTab.setAttribute('zen-dont-split-glance', true); gBrowser._insertTabAtIndex(this.#currentTab, { index: this.getTabPosition(this.#currentTab), }); + this.#currentTab.removeAttribute('zen-glance-tab'); this._clearContainerStyles(this.browserWrapper); this.browserWrapper.removeAttribute('has-finished-animation'); this.browserWrapper.setAttribute('animate-full', true); diff --git a/src/browser/base/zen-components/ZenGradientGenerator.mjs b/src/browser/base/zen-components/ZenGradientGenerator.mjs index 7e43b36a0..c1b7990c7 100644 --- a/src/browser/base/zen-components/ZenGradientGenerator.mjs +++ b/src/browser/base/zen-components/ZenGradientGenerator.mjs @@ -366,13 +366,13 @@ addColorToCustomList(color) { const listItems = window.MozXULElement.parseXULToFragment(` - + `); listItems.querySelector('.zen-theme-picker-custom-list-item').setAttribute('data-color', color); - listItems.querySelector('.zen-theme-picker-dot-custom').style.setProperty('--zen-theme-picker-dot-color', color); + listItems.querySelector('.zen-theme-picker-dot').style.setProperty('--zen-theme-picker-dot-color', color); listItems.querySelector('.zen-theme-picker-custom-list-item-label').textContent = color; this.customColorList.appendChild(listItems); diff --git a/src/browser/base/zen-components/ZenViewSplitter.mjs b/src/browser/base/zen-components/ZenViewSplitter.mjs index 58e1fd0ce..3c3330733 100644 --- a/src/browser/base/zen-components/ZenViewSplitter.mjs +++ b/src/browser/base/zen-components/ZenViewSplitter.mjs @@ -902,7 +902,9 @@ class ZenViewSplitter extends ZenDOMOperatedFeature { async onLocationChange(browser) { this.disableTabRearrangeView(); let tab = window.gBrowser.getTabForBrowser(browser); - if (tab.hasAttribute('zen-glance-tab')) { + const ignoreSplit = tab.hasAttribute('zen-dont-split-glance'); + tab.removeAttribute('zen-dont-split-glance'); + if (tab.hasAttribute('zen-glance-tab') && !ignoreSplit) { // Extract from parent node so we are not selecting the wrong (current) tab tab = tab.parentNode.closest('.tabbrowser-tab'); console.assert(tab, 'Tab not found for zen-glance-tab'); diff --git a/surfer.json b/surfer.json index 4a26a8591..4da5dba2c 100644 --- a/surfer.json +++ b/surfer.json @@ -19,7 +19,7 @@ "brandShortName": "Zen", "brandFullName": "Zen Browser", "release": { - "displayVersion": "1.11b", + "displayVersion": "1.11.1b", "github": { "repo": "zen-browser/desktop" }, @@ -39,7 +39,7 @@ "brandShortName": "Twilight", "brandFullName": "Zen Twilight", "release": { - "displayVersion": "1.11t", + "displayVersion": "1.11.1t", "github": { "repo": "zen-browser/desktop" }