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,
|
_prevUrlbarLabel: null,
|
||||||
_lastSearch: "",
|
_lastSearch: '',
|
||||||
|
|
||||||
handleNewTab(werePassedURL, searchClipboard, where) {
|
handleNewTab(werePassedURL, searchClipboard, where) {
|
||||||
const shouldOpenURLBar = Services.prefs.getBoolPref('zen.urlbar.replace-newtab')
|
const shouldOpenURLBar =
|
||||||
&& !werePassedURL && !searchClipboard && where === 'tab';
|
Services.prefs.getBoolPref('zen.urlbar.replace-newtab') && !werePassedURL && !searchClipboard && where === 'tab';
|
||||||
if (shouldOpenURLBar) {
|
if (shouldOpenURLBar) {
|
||||||
this._prevUrlbarLabel = gURLBar._untrimmedValue;
|
this._prevUrlbarLabel = gURLBar._untrimmedValue;
|
||||||
gURLBar._zenHandleUrlbarClose = this.handleUrlbarClose.bind(this);
|
gURLBar._zenHandleUrlbarClose = this.handleUrlbarClose.bind(this);
|
||||||
|
@ -164,7 +164,7 @@ var gZenUIManager = {
|
||||||
gURLBar._zenHandleUrlbarClose = null;
|
gURLBar._zenHandleUrlbarClose = null;
|
||||||
if (onSwitch) {
|
if (onSwitch) {
|
||||||
this._prevUrlbarLabel = null;
|
this._prevUrlbarLabel = null;
|
||||||
this._lastSearch = "";
|
this._lastSearch = '';
|
||||||
} else {
|
} else {
|
||||||
this._lastSearch = gURLBar._untrimmedValue;
|
this._lastSearch = gURLBar._untrimmedValue;
|
||||||
}
|
}
|
||||||
|
|
|
@ -995,7 +995,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover .tab-background {
|
&: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') {
|
@media (-moz-bool-pref: 'zen.theme.essentials-favicon-bg') {
|
||||||
|
@ -1091,28 +1091,47 @@
|
||||||
#zen-drag-indicator {
|
#zen-drag-indicator {
|
||||||
--zen-drag-indicator-height: 2px;
|
--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%);
|
--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;
|
position: fixed;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
background: var(--zen-drag-indicator-bg);
|
background: var(--zen-drag-indicator-bg);
|
||||||
transition: top 0.1s ease-out;
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
left: calc(var(--indicator-left) + 2 * var(--zen-drag-indicator-height) + 4px);
|
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: calc(-2 * var(--zen-drag-indicator-height));
|
|
||||||
top: 50%;
|
|
||||||
height: calc(2 * var(--zen-drag-indicator-height));
|
height: calc(2 * var(--zen-drag-indicator-height));
|
||||||
width: 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: var(--zen-drag-indicator-height) solid var(--zen-drag-indicator-bg);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
transform: translate(calc(-1 * var(--zen-drag-indicator-height)), -50%);
|
|
||||||
background: transparent;
|
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 */
|
/* Horizontal tabs reordering indicators */
|
||||||
|
|
|
@ -649,7 +649,7 @@
|
||||||
const tabsTarget = event.target.closest('#tabbrowser-arrowscrollbox');
|
const tabsTarget = event.target.closest('#tabbrowser-arrowscrollbox');
|
||||||
|
|
||||||
let moved = false;
|
let moved = false;
|
||||||
let isVertical = true;
|
let isVertical = this.expandedSidebarMode;
|
||||||
let isRegularTabs = false;
|
let isRegularTabs = false;
|
||||||
// Check for pinned tabs container
|
// Check for pinned tabs container
|
||||||
if (pinnedTabsTarget) {
|
if (pinnedTabsTarget) {
|
||||||
|
@ -724,6 +724,10 @@
|
||||||
return this._dragIndicator;
|
return this._dragIndicator;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get expandedSidebarMode() {
|
||||||
|
return document.documentElement.getAttribute('zen-sidebar-expanded') === 'true';
|
||||||
|
}
|
||||||
|
|
||||||
applyDragoverClass(event, draggedTab) {
|
applyDragoverClass(event, draggedTab) {
|
||||||
const pinnedTabsTarget = event.target.closest('#vertical-pinned-tabs-container');
|
const pinnedTabsTarget = event.target.closest('#vertical-pinned-tabs-container');
|
||||||
const essentialTabsTarget = event.target.closest('#zen-essentials-container');
|
const essentialTabsTarget = event.target.closest('#zen-essentials-container');
|
||||||
|
@ -736,7 +740,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
let shouldAddDragOverElement = false;
|
let shouldAddDragOverElement = false;
|
||||||
let isVertical = true;
|
let isVertical = this.expandedSidebarMode;
|
||||||
|
|
||||||
// Decide whether we should show a dragover class for the given target
|
// Decide whether we should show a dragover class for the given target
|
||||||
if (pinnedTabsTarget) {
|
if (pinnedTabsTarget) {
|
||||||
|
@ -755,6 +759,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!shouldAddDragOverElement) {
|
if (!shouldAddDragOverElement) {
|
||||||
|
this.removeTabContainersDragoverClass();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -771,11 +776,26 @@
|
||||||
} else {
|
} else {
|
||||||
top = rect.top + 'px';
|
top = rect.top + 'px';
|
||||||
}
|
}
|
||||||
|
indicator.setAttribute('orientation', 'horizontal');
|
||||||
indicator.style.setProperty('--indicator-left', rect.left + separation / 2 + 'px');
|
indicator.style.setProperty('--indicator-left', rect.left + separation / 2 + 'px');
|
||||||
indicator.style.setProperty('--indicator-width', rect.width - separation + 'px');
|
indicator.style.setProperty('--indicator-width', rect.width - separation + 'px');
|
||||||
indicator.style.top = top;
|
indicator.style.top = top;
|
||||||
|
indicator.style.removeProperty('left');
|
||||||
} else {
|
} 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
|
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
|
--- a/browser/components/tabbrowser/content/tab.js
|
||||||
+++ b/browser/components/tabbrowser/content/tab.js
|
+++ b/browser/components/tabbrowser/content/tab.js
|
||||||
@@ -37,6 +37,7 @@
|
@@ -37,6 +37,7 @@
|
||||||
|
@ -27,7 +27,15 @@ index d41c486c02a6f09dcff5741a59ad8b617294c481..44535569b609d9bcd09f10e46e3161ce
|
||||||
event.target.classList.contains("tab-icon-overlay")
|
event.target.classList.contains("tab-icon-overlay")
|
||||||
) {
|
) {
|
||||||
eventMaySelectTab = false;
|
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).
|
// (see tabbrowser-tabs 'click' handler).
|
||||||
gBrowser.tabContainer._blockDblClick = true;
|
gBrowser.tabContainer._blockDblClick = true;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue