diff --git a/src/zen/common/ZenUIManager.mjs b/src/zen/common/ZenUIManager.mjs index 4d3c8b0fd..9e07487b8 100644 --- a/src/zen/common/ZenUIManager.mjs +++ b/src/zen/common/ZenUIManager.mjs @@ -629,7 +629,7 @@ var gZenVerticalTabsManager = { document.getElementById('urlbar').removeAttribute('--urlbar-height'); if (!this._hasSetSingleToolbar) { document.getElementById('urlbar').style.setProperty('--urlbar-height', '32px'); - } else { + } else if (gURLBar.getAttribute('breakout') !== 'true') { try { gURLBar.zenUpdateLayoutBreakout(); } catch (e) { diff --git a/src/zen/common/styles/zen-urlbar.css b/src/zen/common/styles/zen-urlbar.css index d690f68cb..0224c1b37 100644 --- a/src/zen/common/styles/zen-urlbar.css +++ b/src/zen/common/styles/zen-urlbar.css @@ -147,11 +147,28 @@ position: fixed; } -#urlbar[breakout-extend='true'] #urlbar-background { - box-shadow: 0px 0px 90px -10px rgba(0, 0, 0, 0.6) !important; - border: 1px solid hsla(0, 0%, 100%, 0.1) !important; - backdrop-filter: none !important; - border-radius: 0.8rem !important; +#urlbar[breakout-extend='true'] { + z-index: 2; + --urlbar-margin-inline: 5px; + + & #identity-box { + margin-right: var(--urlbar-margin-inline); + } + + & #urlbar-background { + /* We cant have a transparent background with a backdrop-filter because on normal websites, + the backdrop woudn't work, we would need to apply a clip-path to the site and that's not recommended + due to performance issues */ + background-color: light-dark( + hsl(0, 0%, 100%), + color-mix(in srgb, hsl(0, 0%, 5%) 60%, var(--zen-colors-primary) 40%) + ) !important; + box-shadow: 0px 0px 90px -10px rgba(0, 0, 0, 0.6) !important; + backdrop-filter: none !important; + border-radius: 1.1rem !important; + outline: 0.5px solid rgba(255, 255, 255, 0.15) !important; + outline-offset: -2px; + } } #urlbar-go-button { @@ -414,28 +431,6 @@ button.popup-notification-dropmarker { } } -#urlbar[open] { - z-index: 2; - --urlbar-margin-inline: 5px; - - & #identity-box { - margin-right: var(--urlbar-margin-inline); - } - - & #urlbar-background { - /* We cant have a transparent background with a backdrop-filter because on normal websites, - the backdrop woudn't work, we would need to apply a clip-path to the site and that's not recommended - due to performance issues */ - background-color: light-dark( - hsl(0, 0%, 100%), - color-mix(in srgb, hsl(0, 0%, 5%) 90%, var(--zen-colors-primary) 10%) - ) !important; - @media (-prefers-color-scheme: dark) { - outline: 1px solid rgba(0, 0, 0, 0.3) !important; - } - } -} - :root[zen-single-toolbar='true'] { #urlbar[open] { min-width: min(90%, 40rem); diff --git a/src/zen/tabs/zen-tabs/vertical-tabs.css b/src/zen/tabs/zen-tabs/vertical-tabs.css index c0217d85f..314cd9f1c 100644 --- a/src/zen/tabs/zen-tabs/vertical-tabs.css +++ b/src/zen/tabs/zen-tabs/vertical-tabs.css @@ -1250,10 +1250,7 @@ gap: calc(var(--zen-toolbox-padding) - 2px); transition: max-height 0.3s ease-out; opacity: 1; - grid-template-columns: repeat(auto-fit, minmax(48px, 1fr) minmax(48px, 1fr)); - &[data-hack-type='3'] { - grid-template-columns: repeat(auto-fit, minmax(calc(100% / 3 - 1%), auto)); - } + grid-template-columns: repeat(auto-fit, minmax(max(23.7%, 48px), 1fr)); scrollbar-width: thin; min-width: calc(100% + var(--zen-toolbox-padding) * 2); padding: 0 var(--zen-toolbox-padding); diff --git a/src/zen/workspaces/ZenWorkspaces.mjs b/src/zen/workspaces/ZenWorkspaces.mjs index aca636031..31f6d4d88 100644 --- a/src/zen/workspaces/ZenWorkspaces.mjs +++ b/src/zen/workspaces/ZenWorkspaces.mjs @@ -2032,7 +2032,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature { ); for (const cloned of clonedEssentials) { const container = cloned.container; - const essentialsWorkspacess = cloned.workspaces; + const essentialsWorkspaces = cloned.workspaces; const repeats = cloned.repeat; // Animate like the workspaces above expect essentials are a bit more // complicated because they are not based on workspaces but on containers @@ -2047,9 +2047,9 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature { // will slide in from the right // Get the index from first and last workspace - const firstWorkspaceIndex = workspaces.workspaces.findIndex((w) => w.uuid === essentialsWorkspacess[0].uuid); + const firstWorkspaceIndex = workspaces.workspaces.findIndex((w) => w.uuid === essentialsWorkspaces[0].uuid); const lastWorkspaceIndex = workspaces.workspaces.findIndex( - (w) => w.uuid === essentialsWorkspacess[essentialsWorkspacess.length - 1].uuid + (w) => w.uuid === essentialsWorkspaces[essentialsWorkspaces.length - 1].uuid ); // Check if the container is even going to appear on the screen, to save on animation if ( @@ -2077,7 +2077,18 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature { (isGoingLeft ? repeats - 1 : -repeats + 1) ) * 100; - const needsOffsetAdjustment = stepsInBetween > essentialsWorkspacess.length || usingSameContainer; + // If we are on the same container and both new and old workspace are in the same "essentialsWorkspaces" + // we can simply not animate the essentials + if ( + usingSameContainer && + essentialsWorkspaces.some((w) => w.uuid === newWorkspace.uuid) && + essentialsWorkspaces.some((w) => w.uuid === previousWorkspace.uuid) + ) { + newOffset = 0; + existingOffset = 0; + } + + const needsOffsetAdjustment = stepsInBetween > essentialsWorkspaces.length || usingSameContainer; if (repeats > 0 && needsOffsetAdjustment) { if (!isGoingLeft) { @@ -2386,16 +2397,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature { ); const workspaceObject = this.getWorkspaceFromId(workspaceId); const essentialContainer = this.getEssentialsSection(workspaceObject.containerTabId); - const essentialNumChildren = essentialContainer.children.length; - let essentialHackType = 0; - if (essentialNumChildren % 3 === 0) { - essentialHackType = 3; - } - if (essentialHackType > 0) { - essentialContainer.setAttribute('data-hack-type', essentialHackType); - } else { - essentialContainer.removeAttribute('data-hack-type'); - } this._updateMarginTopPinnedTabs(arrowScrollbox, pinnedContainer, essentialContainer, workspaceIndicator, forAnimation); this.updateShouldHideSeparator(arrowScrollbox, pinnedContainer); } diff --git a/surfer.json b/surfer.json index d65dd994e..fb81af012 100644 --- a/surfer.json +++ b/surfer.json @@ -19,7 +19,7 @@ "brandShortName": "Zen", "brandFullName": "Zen Browser", "release": { - "displayVersion": "1.11.5b", + "displayVersion": "1.12b", "github": { "repo": "zen-browser/desktop" }, @@ -39,7 +39,7 @@ "brandShortName": "Twilight", "brandFullName": "Zen Twilight", "release": { - "displayVersion": "1.11.5t", + "displayVersion": "1.12t", "github": { "repo": "zen-browser/desktop" }