diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs index 696271fc..4c33209d 100644 --- a/src/browser/base/content/ZenUIManager.mjs +++ b/src/browser/base/content/ZenUIManager.mjs @@ -144,11 +144,11 @@ var gZenUIManager = { }, _prevUrlbarLabel: null, - _lastSearch: "", + _lastSearch: '', handleNewTab(werePassedURL, searchClipboard, where) { - const shouldOpenURLBar = Services.prefs.getBoolPref('zen.urlbar.replace-newtab') - && !werePassedURL && !searchClipboard && where === 'tab'; + const shouldOpenURLBar = + Services.prefs.getBoolPref('zen.urlbar.replace-newtab') && !werePassedURL && !searchClipboard && where === 'tab'; if (shouldOpenURLBar) { this._prevUrlbarLabel = gURLBar._untrimmedValue; gURLBar._zenHandleUrlbarClose = this.handleUrlbarClose.bind(this); @@ -164,7 +164,7 @@ var gZenUIManager = { gURLBar._zenHandleUrlbarClose = null; if (onSwitch) { this._prevUrlbarLabel = null; - this._lastSearch = ""; + this._lastSearch = ''; } else { this._lastSearch = gURLBar._untrimmedValue; } diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css index 93cb23dd..1490e804 100644 --- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css +++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css @@ -995,7 +995,7 @@ } &:hover .tab-background { - background: var(--tab-selected-bgcolor); + background: color-mix(in srgb, var(--zen-toolbar-element-bg) 50%, var(--tab-selected-bgcolor) 50%); } @media (-moz-bool-pref: 'zen.theme.essentials-favicon-bg') { @@ -1091,28 +1091,47 @@ #zen-drag-indicator { --zen-drag-indicator-height: 2px; --zen-drag-indicator-bg: color-mix(in srgb, var(--zen-primary-color) 50%, light-dark(rgba(0, 0, 0, .85), rgba(255, 255, 255, .95)) 50%); - width: calc(var(--indicator-width) - 2 * var(--zen-drag-indicator-height) - 4px); - height: var(--zen-drag-indicator-height); position: fixed; z-index: 1000; background: var(--zen-drag-indicator-bg); - transition: top 0.1s ease-out; pointer-events: none; - left: calc(var(--indicator-left) + 2 * var(--zen-drag-indicator-height) + 4px); border-radius: 5px; &::before { content: ""; position: absolute; - left: calc(-2 * var(--zen-drag-indicator-height)); - top: 50%; height: calc(2 * var(--zen-drag-indicator-height)); width: calc(2 * var(--zen-drag-indicator-height)); border: var(--zen-drag-indicator-height) solid var(--zen-drag-indicator-bg); border-radius: 50%; - transform: translate(calc(-1 * var(--zen-drag-indicator-height)), -50%); background: transparent; } + + &[orientation='horizontal'] { + left: calc(var(--indicator-left) + 2 * var(--zen-drag-indicator-height) + 4px); + width: calc(var(--indicator-width) - 2 * var(--zen-drag-indicator-height) - 4px); + height: var(--zen-drag-indicator-height); + transition: top 0.1s ease-out, left 0.1s ease-out, width 0.1s ease-out; + + &::before { + left: calc(-2 * var(--zen-drag-indicator-height)); + top: 50%; + transform: translate(calc(-1 * var(--zen-drag-indicator-height)), -50%); + } + } + + &[orientation='vertical'] { + top: calc(var(--indicator-top) + 2 * var(--zen-drag-indicator-height) + 4px); + height: calc(var(--indicator-height) - 2 * var(--zen-drag-indicator-height) - 4px); + width: var(--zen-drag-indicator-height); + transition: top 0.1s ease-out, left 0.1s ease-out, height 0.1s ease-out; + + &::before { + top: calc(-2 * var(--zen-drag-indicator-height)); + left: 50%; + transform: translate(-50%, calc(-1 * var(--zen-drag-indicator-height))); + } + } } /* Horizontal tabs reordering indicators */ diff --git a/src/browser/base/zen-components/ZenPinnedTabManager.mjs b/src/browser/base/zen-components/ZenPinnedTabManager.mjs index 5ce2b952..d5ed4b9d 100644 --- a/src/browser/base/zen-components/ZenPinnedTabManager.mjs +++ b/src/browser/base/zen-components/ZenPinnedTabManager.mjs @@ -649,7 +649,7 @@ const tabsTarget = event.target.closest('#tabbrowser-arrowscrollbox'); let moved = false; - let isVertical = true; + let isVertical = this.expandedSidebarMode; let isRegularTabs = false; // Check for pinned tabs container if (pinnedTabsTarget) { @@ -724,6 +724,10 @@ return this._dragIndicator; } + get expandedSidebarMode() { + return document.documentElement.getAttribute('zen-sidebar-expanded') === 'true'; + } + applyDragoverClass(event, draggedTab) { const pinnedTabsTarget = event.target.closest('#vertical-pinned-tabs-container'); const essentialTabsTarget = event.target.closest('#zen-essentials-container'); @@ -736,7 +740,7 @@ } let shouldAddDragOverElement = false; - let isVertical = true; + let isVertical = this.expandedSidebarMode; // Decide whether we should show a dragover class for the given target if (pinnedTabsTarget) { @@ -755,6 +759,7 @@ } if (!shouldAddDragOverElement) { + this.removeTabContainersDragoverClass(); return; } @@ -771,11 +776,26 @@ } else { top = rect.top + 'px'; } + indicator.setAttribute('orientation', 'horizontal'); indicator.style.setProperty('--indicator-left', rect.left + separation / 2 + 'px'); indicator.style.setProperty('--indicator-width', rect.width - separation + 'px'); indicator.style.top = top; + indicator.style.removeProperty('left'); } else { - // SUPPORT FOR ESSENTIALS + const separation = 8; + const middleX = targetTab.screenX + rect.width / 2; + const indicator = this.dragIndicator; + let left = 0; + if (event.screenX > middleX) { + left = rect.left + rect.width + 1 + 'px'; + } else { + left = rect.left - 2 + 'px'; + } + indicator.setAttribute('orientation', 'vertical'); + indicator.style.setProperty('--indicator-top', rect.top + separation / 2 + 'px'); + indicator.style.setProperty('--indicator-height', rect.height - separation + 'px'); + indicator.style.left = left; + indicator.style.removeProperty('top'); } } } diff --git a/src/browser/components/tabbrowser/content/tab-js.patch b/src/browser/components/tabbrowser/content/tab-js.patch index 9d9c6c45..7c9a94ac 100644 --- a/src/browser/components/tabbrowser/content/tab-js.patch +++ b/src/browser/components/tabbrowser/content/tab-js.patch @@ -1,5 +1,5 @@ diff --git a/browser/components/tabbrowser/content/tab.js b/browser/components/tabbrowser/content/tab.js -index d41c486c02a6f09dcff5741a59ad8b617294c481..44535569b609d9bcd09f10e46e3161ce0a331c30 100644 +index d41c486c02a6f09dcff5741a59ad8b617294c481..544ca38934d9b0fe0722082c71ee58f148c2cc90 100644 --- a/browser/components/tabbrowser/content/tab.js +++ b/browser/components/tabbrowser/content/tab.js @@ -37,6 +37,7 @@ @@ -27,7 +27,15 @@ index d41c486c02a6f09dcff5741a59ad8b617294c481..44535569b609d9bcd09f10e46e3161ce event.target.classList.contains("tab-icon-overlay") ) { eventMaySelectTab = false; -@@ -553,6 +555,11 @@ +@@ -544,6 +546,7 @@ + if (this.multiselected) { + gBrowser.removeMultiSelectedTabs(); + } else { ++ gZenPinnedTabManager._removePinnedAttributes(this.contextTab, true); + gBrowser.removeTab(this, { + animate: true, + triggeringEvent: event, +@@ -553,6 +556,11 @@ // (see tabbrowser-tabs 'click' handler). gBrowser.tabContainer._blockDblClick = true; }