1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-09 04:05:29 +02:00

Enhance ZenUIManager and ZenPinnedTabManager for improved tab drag-and-drop behavior and URL bar handling

This commit is contained in:
mr. M 2025-02-03 20:27:03 +01:00
parent 88fbae4bec
commit 01d9fc31c1
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
4 changed files with 64 additions and 17 deletions

View file

@ -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;
}

View file

@ -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 */

View file

@ -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');
}
}
}

View file

@ -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;
}