diff --git a/locales/ca/browser/browser/zen-general.ftl b/locales/ca/browser/browser/zen-general.ftl index b098352e9..20ec77018 100644 --- a/locales/ca/browser/browser/zen-general.ftl +++ b/locales/ca/browser/browser/zen-general.ftl @@ -59,7 +59,7 @@ zen-generic-next = Següent # These labels will be used for the site data panel settings zen-site-data-setting-allow = Permès zen-site-data-setting-block = Bloquejat -zen-site-data-setting-cross-site = Cross-Site cookie +zen-site-data-setting-cross-site = Galetes entre llocs zen-site-data-security-info-extension = .label = Extensió zen-site-data-security-info-secure = @@ -76,7 +76,7 @@ zen-site-data-share = .label = Comparteix aquesta pàgina zen-urlbar-copy-url-button = .tooltiptext = Copia l'URL -zen-site-data-setting-site-protection = Tracking Protection +zen-site-data-setting-site-protection = Protecció contra el seguiment # Section: Feature callouts diff --git a/locales/da/browser/browser/zen-general.ftl b/locales/da/browser/browser/zen-general.ftl index ab527f9c6..ce9ca9519 100644 --- a/locales/da/browser/browser/zen-general.ftl +++ b/locales/da/browser/browser/zen-general.ftl @@ -24,7 +24,7 @@ pictureinpicture-minimize-btn = .tooltip = Minimer zen-panel-ui-gradient-generator-custom-color = Brugerdefineret Farve zen-panel-ui-gradient-generator-saved-message = Gradienten blev gemt! -zen-copy-current-url-confirmation = Copied current URL! +zen-copy-current-url-confirmation = Kopieret nuværende URL! zen-general-cancel-label = .label = Annuller zen-general-confirm = @@ -73,12 +73,12 @@ zen-site-data-get-addons = zen-site-data-site-settings = .label = All Site Settings zen-site-data-share = - .label = Share This Page + .label = Del denne side zen-urlbar-copy-url-button = .tooltiptext = Kopiér URL -zen-site-data-setting-site-protection = Tracking Protection +zen-site-data-setting-site-protection = Sporingsbeskyttelse # Section: Feature callouts -zen-site-data-panel-feature-callout-title = A new home for add-ons, permissions, and more +zen-site-data-panel-feature-callout-title = Et nyt hjem for tilføjelser, tilladelser og mere zen-site-data-panel-feature-callout-subtitle = Click the icon to manage site settings, view security info, access extensions, and perform common actions. diff --git a/src/zen/common/ZenCustomizableUI.sys.mjs b/src/zen/common/ZenCustomizableUI.sys.mjs index e748b5b71..6e9667aba 100644 --- a/src/zen/common/ZenCustomizableUI.sys.mjs +++ b/src/zen/common/ZenCustomizableUI.sys.mjs @@ -37,7 +37,7 @@ export var ZenCustomizableUI = new (class { } #addSidebarButtons(window) { - const kDefaultSidebarWidth = '215px'; + const kDefaultSidebarWidth = '230px'; const toolbox = window.gNavToolbox; // Set a splitter to navigator-toolbox diff --git a/src/zen/common/styles/zen-browser-ui.css b/src/zen/common/styles/zen-browser-ui.css index 2ecf54fab..287201a20 100644 --- a/src/zen/common/styles/zen-browser-ui.css +++ b/src/zen/common/styles/zen-browser-ui.css @@ -26,6 +26,10 @@ } } +:root:not([zen-single-toolbar='true']) #zen-navigator-toolbox #zen-sidebar-top-buttons { + --zen-toolbar-height: 42px; +} + :root[zen-before-loaded='true'] #browser > *:not(#zen-toast-container), :root[zen-before-loaded='true'] #urlbar { opacity: 0 !important; @@ -333,10 +337,13 @@ } } -#zen-appcontent-navbar-wrapper #zen-sidebar-top-buttons { - max-width: fit-content; - :root[zen-right-side='true'] & { - order: 1; +#zen-appcontent-navbar-wrapper { + z-index: 1; + & #zen-sidebar-top-buttons { + max-width: fit-content; + :root[zen-right-side='true'] & { + order: 1; + } } } diff --git a/src/zen/common/styles/zen-popup.css b/src/zen/common/styles/zen-popup.css index 55f3ac798..c2d1b31f3 100644 --- a/src/zen/common/styles/zen-popup.css +++ b/src/zen/common/styles/zen-popup.css @@ -390,9 +390,9 @@ menuseparator { min-height: 28px; margin: 0px !important; border-radius: 6px !important; - background: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1)) !important; border-top: 2px solid light-dark(transparent, rgba(255, 255, 255, 0.1)); color: light-dark(rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8)) !important; + box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05); outline: 0.5px solid light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.02)); outline-offset: -0.5px; diff --git a/src/zen/common/styles/zen-single-components.css b/src/zen/common/styles/zen-single-components.css index b837c0fd2..3b528b05f 100644 --- a/src/zen/common/styles/zen-single-components.css +++ b/src/zen/common/styles/zen-single-components.css @@ -173,7 +173,10 @@ body > #confetti { .toolbarbutton-1:not(#tabs-newtab-button) { --tab-border-radius: 6px; --toolbarbutton-border-radius: var(--tab-border-radius); - --toolbarbutton-inner-padding: 7px; + --toolbarbutton-inner-padding: 6px; + @media (-moz-platform: macos) { + --toolbarbutton-inner-padding: 8px; + } --toolbarbutton-outer-padding: 2px; transition: diff --git a/src/zen/compact-mode/sidebar.inc.css b/src/zen/compact-mode/sidebar.inc.css index b93f6f174..62a906ce9 100644 --- a/src/zen/compact-mode/sidebar.inc.css +++ b/src/zen/compact-mode/sidebar.inc.css @@ -132,14 +132,13 @@ } } - #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], - &[zen-renaming-tab='true'] #navigator-toolbox, - #navigator-toolbox[zen-compact-mode-active] { + #navigator-toolbox:is( + [zen-has-hover], [zen-user-show], + [zen-has-empty-tab], [flash-popup], + [has-popup-menu], [movingtab], + [zen-compact-mode-active] + ), + &[zen-renaming-tab='true'] #navigator-toolbox { &:not([animate='true']) { --zen-compact-mode-func: linear( 0 0%, diff --git a/src/zen/compact-mode/toolbar.inc.css b/src/zen/compact-mode/toolbar.inc.css index 8cd55c910..44554528c 100644 --- a/src/zen/compact-mode/toolbar.inc.css +++ b/src/zen/compact-mode/toolbar.inc.css @@ -48,10 +48,7 @@ } } - & - #zen-appcontent-navbar-wrapper[zen-has-hover]:not( - :has(#urlbar[zen-floating-urlbar='true']:hover) - ), + & #zen-appcontent-navbar-wrapper[zen-has-hover], & #zen-appcontent-navbar-wrapper[has-popup-menu], & #zen-appcontent-navbar-wrapper:has( diff --git a/src/zen/compact-mode/zen-compact-mode.css b/src/zen/compact-mode/zen-compact-mode.css index 342514d03..d87f09dde 100644 --- a/src/zen/compact-mode/zen-compact-mode.css +++ b/src/zen/compact-mode/zen-compact-mode.css @@ -49,21 +49,3 @@ %include toolbar.inc.css } } - -/* Fix for https://github.com/zen-browser/desktop/issues/7615 */ -:root[zen-compact-mode='true']:not([customizing])[inDOMFullscreen='true'] { - @media -moz-pref('zen.view.compact.hide-tabbar') or -moz-pref('zen.view.use-single-toolbar') { - &:not([zen-compact-animating]) { - #navigator-toolbox { - opacity: 0; - } - } - } - @media -moz-pref('zen.view.compact.hide-toolbar') { - &:not([zen-single-toolbar='true']) { - & #zen-appcontent-navbar-wrapper { - opacity: 0; - } - } - } -} diff --git a/src/zen/glance/ZenGlanceManager.mjs b/src/zen/glance/ZenGlanceManager.mjs index 1990a1d77..88cf9caff 100644 --- a/src/zen/glance/ZenGlanceManager.mjs +++ b/src/zen/glance/ZenGlanceManager.mjs @@ -320,6 +320,9 @@ // we see flashing and if we do it directly, the animation does not play at all. // eslint-disable-next-line no-async-promise-executor return new Promise(async (resolve) => { + // Recalculate location. When opening from pinned tabs, + // view splitter doesn't catch if the tab is a glance tab or not. + gZenViewSplitter.onLocationChange(browserElement); this.#prepareGlanceAnimation(data, browserElement); if (data.width && data.height) { data.elementData = await this.#getElementPreviewData(data); diff --git a/src/zen/split-view/ZenViewSplitter.mjs b/src/zen/split-view/ZenViewSplitter.mjs index 9e8436691..3fe62d6c1 100644 --- a/src/zen/split-view/ZenViewSplitter.mjs +++ b/src/zen/split-view/ZenViewSplitter.mjs @@ -883,6 +883,8 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature { tab.removeAttribute('split-view'); tab.linkedBrowser.zenModeActive = false; const container = tab.linkedBrowser.closest('.browserSidebarContainer'); + container.removeAttribute('is-zen-split'); + container.style.inset = ''; this._removeHeader(container); this.resetContainerStyle(container); container.removeEventListener('mousedown', this.handleTabEvent); @@ -1012,7 +1014,7 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature { * * @param {Browser} browser - The browser instance. */ - async onLocationChange(browser) { + onLocationChange(browser) { this.disableTabRearrangeView(); let tab = window.gBrowser.getTabForBrowser(browser); const ignoreSplit = tab.hasAttribute('zen-dont-split-glance'); @@ -1256,6 +1258,7 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature { tab.splitViewValue = this.currentView; tab.setAttribute('split-view', 'true'); const container = tab.linkedBrowser?.closest('.browserSidebarContainer'); + container.setAttribute('is-zen-split', 'true'); if (!container?.querySelector('.zen-tab-rearrange-button')) { // insert a header into the container const header = this._createHeader(container); @@ -1308,9 +1311,7 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature { const nodeRootPosition = splitNode.positionToRoot; if (!splitNode.children) { const browserContainer = splitNode.tab.linkedBrowser.closest('.browserSidebarContainer'); - window.requestAnimationFrame(() => { - browserContainer.style.inset = `${nodeRootPosition.top}% ${nodeRootPosition.right}% ${nodeRootPosition.bottom}% ${nodeRootPosition.left}%`; - }); + browserContainer.style.inset = `${nodeRootPosition.top}% ${nodeRootPosition.right}% ${nodeRootPosition.bottom}% ${nodeRootPosition.left}%`; this._tabToSplitNode.set(splitNode.tab, splitNode); return; } @@ -1341,13 +1342,11 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature { if (i < splittersNeeded) { const splitter = currentSplitters[i]; - window.requestAnimationFrame(() => { - if (splitNode.direction === 'column') { - splitter.style.inset = `${100 - childRootPosition.bottom}% ${childRootPosition.right}% 0% ${childRootPosition.left}%`; - } else { - splitter.style.inset = `${childRootPosition.top}% 0% ${childRootPosition.bottom}% ${100 - childRootPosition.right}%`; - } - }); + if (splitNode.direction === 'column') { + splitter.style.inset = `${100 - childRootPosition.bottom}% ${childRootPosition.right}% 0% ${childRootPosition.left}%`; + } else { + splitter.style.inset = `${childRootPosition.top}% 0% ${childRootPosition.bottom}% ${100 - childRootPosition.right}%`; + } } }); this.maybeDisableOpeningTabOnSplitView(); @@ -1539,7 +1538,6 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature { */ resetContainerStyle(container, removeDeckSelected = false) { container.removeAttribute('zen-split'); - container.style.inset = ''; if (removeDeckSelected) { container.classList.remove('deck-selected'); } diff --git a/src/zen/split-view/zen-decks.css b/src/zen/split-view/zen-decks.css index 40b6c7b62..bc88c016f 100644 --- a/src/zen/split-view/zen-decks.css +++ b/src/zen/split-view/zen-decks.css @@ -18,6 +18,7 @@ flex: 0; margin: 0; } + #zen-splitview-dropzone { border-radius: var(--zen-native-inner-radius); transition: inset ease-out 0.08s; @@ -31,10 +32,6 @@ #tabbrowser-tabpanels[zen-split-view='true'] > [zen-split='true'], #zen-splitview-dropzone { flex: 1; - margin: var(--zen-split-column-gap) var(--zen-split-row-gap) !important; - margin-bottom: 0 !important; - margin-left: 0 !important; - position: absolute !important; overflow: hidden; & .dialogStack { @@ -43,6 +40,20 @@ } } +.browserSidebarContainer[is-zen-split='true'], +#zen-splitview-dropzone { + position: absolute !important; + + margin: var(--zen-split-column-gap) var(--zen-split-row-gap) !important; + margin-bottom: 0 !important; + margin-left: 0 !important; + + &.browserSidebarContainer:not([zen-split='true']) { + margin-top: 0 !important; + visibility: hidden; + } +} + #zen-splitview-dropzone { margin-top: 0 !important; } @@ -66,13 +77,15 @@ } } +#tabbrowser-tabbox { + --zen-split-row-gap: var(--zen-element-separation); + --zen-split-column-gap: calc(var(--zen-element-separation) + 1px); +} + #tabbrowser-tabbox[zen-split-view='true'] { :root[zen-no-padding='true'] & { --zen-element-separation: 8px; } - - --zen-split-row-gap: var(--zen-element-separation); - --zen-split-column-gap: calc(var(--zen-element-separation) + 1px); margin-right: calc(-1 * var(--zen-split-column-gap)); } diff --git a/src/zen/tabs/zen-tabs/vertical-tabs.css b/src/zen/tabs/zen-tabs/vertical-tabs.css index 90901c862..9d26c940f 100644 --- a/src/zen/tabs/zen-tabs/vertical-tabs.css +++ b/src/zen/tabs/zen-tabs/vertical-tabs.css @@ -115,7 +115,7 @@ } & #zen-sidebar-top-buttons { - margin: var(--zen-toolbox-padding) 0 calc(var(--zen-toolbox-padding) / 2) 0; + margin: calc(var(--zen-toolbox-padding) / 2) 0; :root[zen-right-side='true']:not([zen-window-buttons-reversed='true']) & { margin-top: 0; } @@ -961,7 +961,10 @@ } :root[zen-single-toolbar='true'] & { - --toolbarbutton-inner-padding: calc(var(--zen-toolbar-button-inner-padding) - 2px) !important; + --zen-toolbar-height: 36px; + @media (-moz-platform: macos) { + --zen-toolbar-height: 42px; + } & #PanelUI-button { order: -2; @@ -1153,11 +1156,11 @@ --zen-essential-tab-selected-bg: light-dark( rgba(255, 255, 255, 0.85), - color-mix(in srgb, var(--zen-primary-color), rgba(68, 64, 64, 0.85) 40%) + color-mix(in srgb, var(--zen-primary-color), rgba(132, 132, 132, 0.85) 40%) ); --zen-essential-tab-selected-bg-hover: light-dark( rgba(255, 255, 255, 0.8), - color-mix(in srgb, var(--zen-primary-color), rgba(68, 64, 64, 0.85) 50%) + color-mix(in srgb, var(--zen-primary-color), rgba(132, 132, 132, 0.85) 30%) ); :root[zen-default-theme='true'] & { diff --git a/src/zen/urlbar/ZenSiteDataPanel.sys.mjs b/src/zen/urlbar/ZenSiteDataPanel.sys.mjs index 91f648636..63fe006a3 100644 --- a/src/zen/urlbar/ZenSiteDataPanel.sys.mjs +++ b/src/zen/urlbar/ZenSiteDataPanel.sys.mjs @@ -380,6 +380,7 @@ export class nsZenSiteDataPanel { let img = this.document.createXULElement('toolbarbutton'); img.classList.add('permission-popup-permission-icon', 'zen-site-data-permission-icon'); + img.setAttribute('closemenu', 'none'); if (this.#iconMap[id]) { img.classList.add(`zen-permission-${this.#iconMap[id]}-icon`); } @@ -389,7 +390,6 @@ export class nsZenSiteDataPanel { labelContainer.setAttribute('align', 'start'); labelContainer.classList.add('permission-popup-permission-label-container'); labelContainer._permission = permission; - labelContainer.addEventListener('click', this); let nameLabel = this.document.createXULElement('label'); nameLabel.setAttribute('flex', '1'); @@ -419,6 +419,7 @@ export class nsZenSiteDataPanel { container.appendChild(img); container.appendChild(labelContainer); + container.addEventListener('click', this); return [container, isCrossSiteCookie]; } diff --git a/src/zen/workspaces/ZenWorkspaces.mjs b/src/zen/workspaces/ZenWorkspaces.mjs index 7cb7685f1..3f8f614e4 100644 --- a/src/zen/workspaces/ZenWorkspaces.mjs +++ b/src/zen/workspaces/ZenWorkspaces.mjs @@ -3048,7 +3048,7 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature { parent.removeAttribute('icons-overflow'); return; } - const maxButtonSize = 30; // IMPORTANT: This should match the CSS size of the icons + const maxButtonSize = 32; // IMPORTANT: This should match the CSS size of the icons const minButtonSize = 15; const separation = 3; // Space between icons diff --git a/src/zen/workspaces/zen-workspaces.css b/src/zen/workspaces/zen-workspaces.css index eb1044835..0cc3092ee 100644 --- a/src/zen/workspaces/zen-workspaces.css +++ b/src/zen/workspaces/zen-workspaces.css @@ -239,7 +239,7 @@ --toolbarbutton-inner-padding: 6px; & image { - border-radius: calc(var(--border-radius-medium) - 4px) !important; + border-radius: max(calc(var(--border-radius-medium) - 4px), 4px) !important; width: 26px; height: 26px; margin-right: -1px;