mirror of
https://github.com/zen-browser/desktop.git
synced 2025-09-05 19:08:18 +00:00
Remove compact view preference and update related logic for improved clarity
This commit is contained in:
mr. M
@@ -111,7 +111,6 @@ pref('zen.theme.color-prefs.use-workspace-colors', true);
|
||||
pref('zen.theme.color-prefs.amoled', false);
|
||||
pref('zen.theme.color-prefs.colorful', false);
|
||||
|
||||
pref('zen.view.compact', false);
|
||||
pref('zen.view.compact.hide-tabbar', true);
|
||||
pref('zen.view.compact.hide-toolbar', false);
|
||||
pref('zen.view.compact.toolbar-flash-popup', true);
|
||||
|
||||
@@ -233,14 +233,6 @@ var gZenVerticalTabsManager = {
|
||||
},
|
||||
|
||||
initializePreferences(updateEvent) {
|
||||
XPCOMUtils.defineLazyPreferenceGetter(
|
||||
this,
|
||||
'_prefsCompactMode',
|
||||
'zen.view.compact',
|
||||
false
|
||||
// no need to update the event, it's handled by the compact mode manager
|
||||
);
|
||||
|
||||
XPCOMUtils.defineLazyPreferenceGetter(this, '_prefsVerticalTabs', 'zen.tabs.vertical', true, updateEvent);
|
||||
XPCOMUtils.defineLazyPreferenceGetter(this, '_prefsRightSide', 'zen.tabs.vertical.right-side', false, updateEvent);
|
||||
XPCOMUtils.defineLazyPreferenceGetter(this, '_prefsUseSingleToolbar', 'zen.view.use-single-toolbar', false, updateEvent);
|
||||
@@ -267,7 +259,7 @@ var gZenVerticalTabsManager = {
|
||||
}
|
||||
|
||||
const topButtons = document.getElementById('zen-sidebar-top-buttons');
|
||||
const isCompactMode = this._prefsCompactMode && !forCustomizableMode;
|
||||
const isCompactMode = gZenCompactModeManager.preference && !forCustomizableMode;
|
||||
const isVerticalTabs = this._prefsVerticalTabs || forCustomizableMode;
|
||||
const isSidebarExpanded = this._prefsSidebarExpanded || !isVerticalTabs;
|
||||
const isRightSide = this._prefsRightSide && isVerticalTabs;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml
|
||||
index 5dd337a2ffc9f9107d735f4dc96a50d57b12d213..58ecaf7136e13885ac38d74d40b5ef0f52cd7684 100644
|
||||
index ca8953f3604f4f70de76576964af5f3c733f17a0..a2731ef6d4392301217cd05f6583e4814f1118e2 100644
|
||||
--- a/browser/base/content/browser.xhtml
|
||||
+++ b/browser/base/content/browser.xhtml
|
||||
@@ -98,6 +98,8 @@
|
||||
@@ -101,6 +101,8 @@
|
||||
|
||||
<title data-l10n-id="browser-main-window-title"></title>
|
||||
|
||||
@@ -11,7 +11,7 @@ index 5dd337a2ffc9f9107d735f4dc96a50d57b12d213..58ecaf7136e13885ac38d74d40b5ef0f
|
||||
# All JS files which are needed by browser.xhtml and other top level windows to
|
||||
# support MacOS specific features *must* go into the global-scripts.inc file so
|
||||
# that they can be shared with macWindow.inc.xhtml.
|
||||
@@ -141,6 +143,7 @@
|
||||
@@ -145,6 +147,7 @@
|
||||
window.addEventListener("DOMContentLoaded",
|
||||
gBrowserInit.onDOMContentLoaded.bind(gBrowserInit), { once: true });
|
||||
</script>
|
||||
@@ -19,18 +19,18 @@ index 5dd337a2ffc9f9107d735f4dc96a50d57b12d213..58ecaf7136e13885ac38d74d40b5ef0f
|
||||
</head>
|
||||
<html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
# All sets except for popupsets (commands, keys, and stringbundles)
|
||||
@@ -162,9 +165,12 @@
|
||||
@@ -166,9 +169,12 @@
|
||||
</vbox>
|
||||
</html:template>
|
||||
|
||||
-#include navigator-toolbox.inc.xhtml
|
||||
-
|
||||
-#include browser-box.inc.xhtml
|
||||
+ <hbox id="zen-main-app-wrapper" flex="1">
|
||||
+ <hbox id="zen-main-app-wrapper" flex="1" persist="zen-compact-mode">
|
||||
+ #include navigator-toolbox.inc.xhtml
|
||||
+ <html:span id="zen-sidebar-box-container">
|
||||
+ </html:span>
|
||||
+ #include browser-box.inc.xhtml
|
||||
+ #include browser-box.inc.xhtml
|
||||
+ </hbox>
|
||||
|
||||
<html:template id="customizationPanel">
|
||||
|
||||
@@ -5,330 +5,328 @@
|
||||
*/
|
||||
/* All overrides for compact mode go here */
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.compact') {
|
||||
:root:not([customizing]):not([inDOMFullscreen='true']) {
|
||||
#zen-sidebar-top-buttons:has(#zen-sidebar-top-buttons-customization-target:empty) {
|
||||
max-height: 0 !important;
|
||||
min-height: 0 !important;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
:root[zen-compact-mode='true']:not([customizing]):not([inDOMFullscreen='true']) {
|
||||
#zen-sidebar-top-buttons:has(#zen-sidebar-top-buttons-customization-target:empty) {
|
||||
max-height: 0 !important;
|
||||
min-height: 0 !important;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') or (-moz-bool-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;
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') or (-moz-bool-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: 0 !important;
|
||||
}
|
||||
|
||||
#zen-appcontent-wrapper {
|
||||
margin-left: var(--zen-element-separation) !important;
|
||||
|
||||
& #tabbrowser-tabbox {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
#zen-sidebar-top-buttons-customization-target {
|
||||
padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
|
||||
}
|
||||
|
||||
#zen-sidebar-splitter {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#navigator-toolbox {
|
||||
--zen-toolbox-max-width: 64px !important;
|
||||
--zen-compact-float: var(--zen-element-separation);
|
||||
|
||||
&:not([animate='true']) {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
transition:
|
||||
left 0.25s ease,
|
||||
right 0.25s ease,
|
||||
opacity 1.5s ease;
|
||||
top: 0;
|
||||
bottom: var(--zen-element-separation);
|
||||
opacity: 0;
|
||||
padding: 0 var(--zen-compact-float) !important;
|
||||
|
||||
:root[zen-single-toolbar='true'] & {
|
||||
top: var(--zen-element-separation);
|
||||
}
|
||||
}
|
||||
|
||||
#zen-tabbox-wrapper {
|
||||
/* Remove extra 1px of margine we have to add to the tabbox */
|
||||
&:not([zen-right-side='true']) #nav-bar {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
#zen-appcontent-wrapper {
|
||||
margin-left: var(--zen-element-separation) !important;
|
||||
|
||||
& #tabbrowser-tabbox {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
#zen-sidebar-top-buttons-customization-target {
|
||||
padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
|
||||
}
|
||||
|
||||
#zen-sidebar-splitter {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#navigator-toolbox {
|
||||
--zen-toolbox-max-width: 64px !important;
|
||||
--zen-compact-float: var(--zen-element-separation);
|
||||
|
||||
&:not([animate='true']) {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
transition:
|
||||
left 0.25s ease,
|
||||
right 0.25s ease,
|
||||
opacity 1.5s ease;
|
||||
top: 0;
|
||||
bottom: var(--zen-element-separation);
|
||||
opacity: 0;
|
||||
padding: 0 var(--zen-compact-float) !important;
|
||||
|
||||
:root[zen-single-toolbar='true'] & {
|
||||
top: var(--zen-element-separation);
|
||||
}
|
||||
}
|
||||
|
||||
&:not([zen-right-side='true']) #nav-bar {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
& #urlbar[open] {
|
||||
top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:not([zen-right-side='true']) #navigator-toolbox {
|
||||
left: calc(-1 * var(--zen-sidebar-width) + var(--zen-element-separation));
|
||||
}
|
||||
|
||||
/* 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-bool-pref: 'zen.view.compact.hide-toolbar') {
|
||||
&:not([zen-single-toolbar='true']) #navigator-toolbox:not([animate='true']) {
|
||||
margin-top: var(--zen-toolbar-height) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&[zen-right-side='true'] {
|
||||
& #navigator-toolbox {
|
||||
--zen-compact-float: calc(var(--zen-element-separation) + 1px);
|
||||
|
||||
&:not([animate='true']) {
|
||||
right: calc(-1 * var(--zen-sidebar-width) + var(--zen-element-separation));
|
||||
}
|
||||
}
|
||||
|
||||
& .browserSidebarContainer {
|
||||
margin-left: 0 !important;
|
||||
margin-right: var(--zen-element-separation) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#navigator-toolbox:not([animate='true']) #titlebar {
|
||||
box-shadow: var(--zen-big-shadow);
|
||||
border-radius: calc(var(--zen-native-inner-radius) + var(--zen-element-separation) / 2);
|
||||
padding: var(--zen-toolbox-padding) !important;
|
||||
position: relative;
|
||||
background: var(--zen-dialog-background);
|
||||
border: 1px solid var(--zen-colors-border-contrast);
|
||||
|
||||
:root[zen-single-toolbar='true'] {
|
||||
padding-top: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
@media (-moz-bool-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 */
|
||||
backdrop-filter: blur(5px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#navigator-toolbox:hover,
|
||||
#navigator-toolbox[zen-has-hover],
|
||||
#navigator-toolbox[zen-user-show],
|
||||
#navigator-toolbox[flash-popup],
|
||||
#navigator-toolbox[has-popup-menu],
|
||||
#navigator-toolbox[movingtab],
|
||||
#navigator-toolbox:has(.tabbrowser-tab:active),
|
||||
#navigator-toolbox:has(
|
||||
*:is([panelopen='true'], [open='true'], #nav-bar:focus-within):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.3125s var(--zen-compact-mode-func),
|
||||
right 0.3125s var(--zen-compact-mode-func);
|
||||
opacity: 1;
|
||||
|
||||
left: -1px;
|
||||
:root[zen-right-side='true'] & {
|
||||
right: -1px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
& #urlbar[open] {
|
||||
top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
|
||||
&:not([zen-single-toolbar='true']) {
|
||||
& #navigator-toolbox {
|
||||
top: 0;
|
||||
&:not([zen-right-side='true']) #navigator-toolbox {
|
||||
left: calc(-1 * var(--zen-sidebar-width) + var(--zen-element-separation));
|
||||
}
|
||||
|
||||
/* 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-bool-pref: 'zen.view.compact.hide-toolbar') {
|
||||
&:not([zen-single-toolbar='true']) #navigator-toolbox:not([animate='true']) {
|
||||
margin-top: var(--zen-toolbar-height) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&[zen-right-side='true'] {
|
||||
& #navigator-toolbox {
|
||||
--zen-compact-float: calc(var(--zen-element-separation) + 1px);
|
||||
|
||||
&:not([animate='true']) {
|
||||
right: calc(-1 * var(--zen-sidebar-width) + var(--zen-element-separation));
|
||||
}
|
||||
}
|
||||
|
||||
& .browserSidebarContainer {
|
||||
margin-left: 0 !important;
|
||||
margin-right: var(--zen-element-separation) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#navigator-toolbox:not([animate='true']) #titlebar {
|
||||
box-shadow: var(--zen-big-shadow);
|
||||
border-radius: calc(var(--zen-native-inner-radius) + 2px);
|
||||
padding: var(--zen-toolbox-padding) !important;
|
||||
position: relative;
|
||||
background: var(--zen-dialog-background);
|
||||
border: 1px solid var(--zen-colors-border-contrast);
|
||||
|
||||
:root[zen-single-toolbar='true'] {
|
||||
padding-top: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
@media (-moz-bool-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 */
|
||||
backdrop-filter: blur(5px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#navigator-toolbox:hover,
|
||||
#navigator-toolbox[zen-has-hover],
|
||||
#navigator-toolbox[zen-user-show],
|
||||
#navigator-toolbox[flash-popup],
|
||||
#navigator-toolbox[has-popup-menu],
|
||||
#navigator-toolbox[movingtab],
|
||||
#navigator-toolbox:has(.tabbrowser-tab:active),
|
||||
#navigator-toolbox:has(
|
||||
*:is([panelopen='true'], [open='true'], #nav-bar:focus-within):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.3125s var(--zen-compact-mode-func),
|
||||
right 0.3125s var(--zen-compact-mode-func);
|
||||
opacity: 1;
|
||||
|
||||
left: -1px;
|
||||
:root[zen-right-side='true'] & {
|
||||
right: -1px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
|
||||
&:not([zen-single-toolbar='true']) {
|
||||
& #navigator-toolbox {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
& #navigator-toolbox {
|
||||
--zen-toolbox-top-align: var(--zen-element-separation);
|
||||
}
|
||||
|
||||
& #sidebar-box,
|
||||
& #titlebar,
|
||||
& #zen-appcontent-wrapper,
|
||||
& #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel:not([pinned='true'])) {
|
||||
margin-top: var(--zen-element-separation) !important;
|
||||
}
|
||||
|
||||
& #zen-appcontent-wrapper {
|
||||
z-index: 3 !important;
|
||||
}
|
||||
|
||||
& #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
|
||||
margin-top: calc(var(--zen-element-separation) * 2) !important;
|
||||
}
|
||||
|
||||
& #zen-appcontent-navbar-container {
|
||||
--zen-compact-toolbar-offset: 5px;
|
||||
position: absolute;
|
||||
top: calc((-1 * var(--zen-toolbar-height)) + var(--zen-element-separation) + 1px);
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3) !important;
|
||||
border-bottom-left-radius: var(--zen-border-radius);
|
||||
border-bottom-right-radius: var(--zen-border-radius);
|
||||
border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
|
||||
border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
|
||||
transition: all 0.15s ease;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
background: var(--zen-dialog-background);
|
||||
|
||||
max-height: var(--zen-toolbar-height);
|
||||
overflow: hidden;
|
||||
|
||||
& > * {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
& #navigator-toolbox {
|
||||
--zen-toolbox-top-align: var(--zen-element-separation);
|
||||
& #urlbar {
|
||||
transform: translateY(-50%);
|
||||
transition: transform 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
& #sidebar-box,
|
||||
& #titlebar,
|
||||
& #zen-appcontent-wrapper,
|
||||
& #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel:not([pinned='true'])) {
|
||||
margin-top: var(--zen-element-separation) !important;
|
||||
@media (-moz-bool-pref: 'zen.view.compact.color-toolbar') {
|
||||
background-attachment: fixed;
|
||||
backdrop-filter: blur(5px);
|
||||
background: var(--zen-main-browser-background-toolbar);
|
||||
background-size: 100% 2000px;
|
||||
border-bottom: 1px solid var(--zen-colors-border);
|
||||
}
|
||||
}
|
||||
|
||||
& #zen-appcontent-wrapper {
|
||||
z-index: 3 !important;
|
||||
}
|
||||
& #zen-appcontent-navbar-container:hover,
|
||||
& #zen-appcontent-navbar-container[zen-has-hover],
|
||||
& #zen-appcontent-navbar-container:focus-within,
|
||||
& #zen-appcontent-navbar-container[zen-user-show],
|
||||
& #zen-appcontent-navbar-container[has-popup-menu],
|
||||
& #zen-appcontent-navbar-container:has(*:is([panelopen='true'], [open='true']):not(.zen-compact-mode-ignore)) {
|
||||
opacity: 1;
|
||||
border-top-width: 1px;
|
||||
|
||||
& #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
|
||||
margin-top: calc(var(--zen-element-separation) * 2) !important;
|
||||
}
|
||||
top: -1px;
|
||||
overflow: initial;
|
||||
max-height: unset;
|
||||
|
||||
& #zen-appcontent-navbar-container {
|
||||
--zen-compact-toolbar-offset: 5px;
|
||||
position: absolute;
|
||||
top: calc((-1 * var(--zen-toolbar-height)) + var(--zen-element-separation) + 1px);
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3) !important;
|
||||
border-bottom-left-radius: var(--zen-border-radius);
|
||||
border-bottom-right-radius: var(--zen-border-radius);
|
||||
border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
|
||||
border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
|
||||
transition: all 0.15s ease;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
background: var(--zen-dialog-background);
|
||||
& #urlbar {
|
||||
transform: translateY(0);
|
||||
|
||||
max-height: var(--zen-toolbar-height);
|
||||
overflow: hidden;
|
||||
|
||||
& > * {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
& #urlbar {
|
||||
transform: translateY(-50%);
|
||||
transition: transform 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.compact.color-toolbar') {
|
||||
background-attachment: fixed;
|
||||
backdrop-filter: blur(5px);
|
||||
background: var(--zen-main-browser-background-toolbar);
|
||||
background-size: 100% 2000px;
|
||||
border-bottom: 1px solid var(--zen-colors-border);
|
||||
}
|
||||
}
|
||||
|
||||
& #zen-appcontent-navbar-container:hover,
|
||||
& #zen-appcontent-navbar-container[zen-has-hover],
|
||||
& #zen-appcontent-navbar-container:focus-within,
|
||||
& #zen-appcontent-navbar-container[zen-user-show],
|
||||
& #zen-appcontent-navbar-container[has-popup-menu],
|
||||
& #zen-appcontent-navbar-container:has(*:is([panelopen='true'], [open='true']):not(.zen-compact-mode-ignore)) {
|
||||
opacity: 1;
|
||||
border-top-width: 1px;
|
||||
|
||||
top: -1px;
|
||||
overflow: initial;
|
||||
max-height: unset;
|
||||
|
||||
& #urlbar {
|
||||
transform: translateY(0);
|
||||
|
||||
&[open]:not([zen-floating-urlbar='true']) {
|
||||
top: 0 !important;
|
||||
}
|
||||
&[open]:not([zen-floating-urlbar='true']) {
|
||||
top: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -65,12 +65,10 @@
|
||||
|
||||
#tabbrowser-tabpanels:has(> [zen-split='true']),
|
||||
#zen-splitview-overlay {
|
||||
@media (-moz-bool-pref: 'zen.view.compact') {
|
||||
:root:not([customizing]) & {
|
||||
@media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
|
||||
& {
|
||||
margin-top: calc(var(--zen-split-column-gap) * -1);
|
||||
}
|
||||
:root:not([zen-compact-mode='true']):not([customizing]) & {
|
||||
@media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
|
||||
& {
|
||||
margin-top: calc(var(--zen-split-column-gap) * -1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -981,8 +981,8 @@
|
||||
/* Very special occasions */
|
||||
|
||||
/* Mark: Right side windows controls with collapsed sidebar */
|
||||
@media not (-moz-bool-pref: 'zen.view.compact') {
|
||||
:root[zen-right-side='true']:not([zen-sidebar-expanded='true']):not([zen-window-buttons-reversed='true']) {
|
||||
:root:not([zen-compact-mode='true']) {
|
||||
&[zen-right-side='true']:not([zen-sidebar-expanded='true']):not([zen-window-buttons-reversed='true']) {
|
||||
& #navigator-toolbox {
|
||||
margin-top: var(--zen-toolbar-height) !important;
|
||||
}
|
||||
@@ -1006,7 +1006,7 @@
|
||||
%include vertical-tabs-topbuttons-fix.css
|
||||
}
|
||||
|
||||
:root:not([zen-right-side='true']):not([zen-sidebar-expanded='true'])[zen-window-buttons-reversed='true'] {
|
||||
&:not([zen-right-side='true']):not([zen-sidebar-expanded='true'])[zen-window-buttons-reversed='true'] {
|
||||
& #navigator-toolbox {
|
||||
margin-top: var(--zen-toolbar-height) !important;
|
||||
}
|
||||
|
||||
@@ -20,10 +20,10 @@ var gZenCompactModeManager = {
|
||||
_removeHoverFrames: {},
|
||||
|
||||
init() {
|
||||
Services.prefs.addObserver('zen.view.compact', this._updateEvent.bind(this));
|
||||
Services.prefs.addObserver('zen.view.sidebar-expanded.on-hover', this._disableTabsOnHoverIfConflict.bind(this));
|
||||
Services.prefs.addObserver('zen.tabs.vertical.right-side', this._updateSidebarIsOnRight.bind(this));
|
||||
|
||||
ChromeUtils.defineLazyGetter(this, 'mainAppWrapper', () => document.getElementById('zen-main-app-wrapper'));
|
||||
|
||||
this._canAnimateSidebar = Services.prefs.getBoolPref('zen.view.compact.animate-sidebar', true);
|
||||
|
||||
gZenUIManager.addPopupTrackingAttribute(this.sidebar);
|
||||
@@ -33,12 +33,22 @@ var gZenCompactModeManager = {
|
||||
this.addContextMenu();
|
||||
},
|
||||
|
||||
get prefefence() {
|
||||
return Services.prefs.getBoolPref('zen.view.compact');
|
||||
get preference() {
|
||||
if (!document.documentElement.hasAttribute('zen-compact-mode')) {
|
||||
document.documentElement.setAttribute('zen-compact-mode', this.mainAppWrapper.getAttribute('zen-compact-mode'));
|
||||
}
|
||||
return this.mainAppWrapper.getAttribute('zen-compact-mode') === 'true';
|
||||
},
|
||||
|
||||
set preference(value) {
|
||||
Services.prefs.setBoolPref('zen.view.compact', value);
|
||||
if (this.preference === value) {
|
||||
return value;
|
||||
}
|
||||
// We use this element in order to make it persis across restarts, by using the XULStore.
|
||||
// main-window can't store attributes other than window sizes, so we use this instead
|
||||
this.mainAppWrapper.setAttribute('zen-compact-mode', value);
|
||||
document.documentElement.setAttribute('zen-compact-mode', value);
|
||||
this._updateEvent();
|
||||
return value;
|
||||
},
|
||||
|
||||
@@ -58,7 +68,7 @@ var gZenCompactModeManager = {
|
||||
},
|
||||
|
||||
flashSidebarIfNecessary(aInstant = false) {
|
||||
if (!aInstant && this.prefefence && lazyCompactMode.COMPACT_MODE_FLASH_ENABLED && !gZenGlanceManager._animating) {
|
||||
if (!aInstant && this.preference && lazyCompactMode.COMPACT_MODE_FLASH_ENABLED && !gZenGlanceManager._animating) {
|
||||
this.flashSidebar();
|
||||
}
|
||||
},
|
||||
@@ -113,7 +123,6 @@ var gZenCompactModeManager = {
|
||||
|
||||
_updateEvent() {
|
||||
this._evenListeners.forEach((callback) => callback());
|
||||
this._disableTabsOnHoverIfConflict();
|
||||
this.updateContextMenu();
|
||||
this.animateCompactMode();
|
||||
},
|
||||
@@ -127,7 +136,7 @@ var gZenCompactModeManager = {
|
||||
},
|
||||
|
||||
animateCompactMode() {
|
||||
const isCompactMode = this.prefefence;
|
||||
const isCompactMode = this.preference;
|
||||
const canHideSidebar = Services.prefs.getBoolPref('zen.view.compact.hide-tabbar');
|
||||
// Do this so we can get the correct width ONCE compact mode styled have been applied
|
||||
if (this._canAnimateSidebar) {
|
||||
@@ -208,9 +217,7 @@ var gZenCompactModeManager = {
|
||||
},
|
||||
|
||||
updateContextMenu() {
|
||||
document
|
||||
.getElementById('zen-context-menu-compact-mode-toggle')
|
||||
.setAttribute('checked', Services.prefs.getBoolPref('zen.view.compact'));
|
||||
document.getElementById('zen-context-menu-compact-mode-toggle').setAttribute('checked', this.preference);
|
||||
|
||||
const hideTabBar = Services.prefs.getBoolPref('zen.view.compact.hide-tabbar');
|
||||
const hideToolbar = Services.prefs.getBoolPref('zen.view.compact.hide-toolbar');
|
||||
@@ -230,14 +237,8 @@ var gZenCompactModeManager = {
|
||||
}
|
||||
},
|
||||
|
||||
_disableTabsOnHoverIfConflict() {
|
||||
if (Services.prefs.getBoolPref('zen.view.compact') && Services.prefs.getBoolPref('zen.view.compact.hide-tabbar')) {
|
||||
Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', false);
|
||||
}
|
||||
},
|
||||
|
||||
toggle() {
|
||||
return (this.preference = !this.prefefence);
|
||||
return (this.preference = !this.preference);
|
||||
},
|
||||
|
||||
_updateSidebarIsOnRight() {
|
||||
|
||||
@@ -977,11 +977,6 @@ Preferences.addAll([
|
||||
type: 'bool',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: 'zen.view.compact',
|
||||
type: 'bool',
|
||||
default: false,
|
||||
},
|
||||
{
|
||||
id: 'zen.view.compact.hide-toolbar',
|
||||
type: 'bool',
|
||||
|
||||
@@ -235,9 +235,6 @@
|
||||
<label><html:h2 data-l10n-id="zen-look-and-feel-compact-view-header"/></label>
|
||||
<description class="description-deemphasized" data-l10n-id="zen-look-and-feel-compact-view-description" />
|
||||
|
||||
<checkbox id="zenLooksAndFeelShowCompactView"
|
||||
data-l10n-id="zen-look-and-feel-compact-view-enabled"
|
||||
preference="zen.view.compact"/>
|
||||
<html:div id="ZenCompactModeStyle">
|
||||
<form xmlns="http://www.w3.org/1999/xhtml" autocomplete="off" id="zen-compact-mode-styles-form">
|
||||
<label class="web-appearance-choice">
|
||||
|
||||
Reference in New Issue
Block a user