mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-09 01:45:30 +02:00
Enhance ZenUIManager and ZenPinnedTabManager for improved tab drag-and-drop behavior and URL bar handling
This commit is contained in:
parent
88fbae4bec
commit
01d9fc31c1
4 changed files with 64 additions and 17 deletions
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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 */
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue