Bug 450915 - Increase the drag space of the TabsToolbar by 15px on the bottom to improve the tab reordering experience. r?gijs
MozReview-Commit-ID: I022PxskDF0
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -175,16 +175,32 @@ tabbrowser {
pointer-events: none; /* avoid blocking dragover events on scroll buttons */
}
.tabbrowser-tab[tabdrop-samewindow],
.tabbrowser-tabs[movingtab] > .tabbrowser-tab[fadein]:not([selected]) {
transition: transform 200ms var(--animation-easing-function);
}
+#TabsToolbar[movingtab] > .tabbrowser-tabs {
+ padding-bottom: 15px;
+}
+
+#TabsToolbar[movingtab] + #nav-bar {
+ margin-top: -15px;
+ pointer-events: none;
+}
+
+/* Allow dropping a tab on buttons with associated drop actions. */
+#TabsToolbar[movingtab] + #nav-bar > #nav-bar-customization-target > #home-button,
+#TabsToolbar[movingtab] + #nav-bar > #nav-bar-customization-target > #downloads-button,
+#TabsToolbar[movingtab] + #nav-bar > #nav-bar-customization-target > #bookmarks-menu-button {
+ pointer-events: auto;
+}
+
.new-tab-popup,
#alltabs-popup {
-moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-alltabs-popup");
}
toolbar[printpreview="true"] {
-moz-binding: url("chrome://global/content/printPreviewBindings.xml#printpreviewtoolbar");
}
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -6690,16 +6690,17 @@
<method name="_animateTabMove">
<parameter name="event"/>
<body><![CDATA[
let draggedTab = event.dataTransfer.mozGetDataAt(TAB_DROP_TYPE, 0);
if (this.getAttribute("movingtab") != "true") {
this.setAttribute("movingtab", "true");
+ this.parentNode.setAttribute("movingtab", "true");
this.selectedItem = draggedTab;
}
if (!("animLastScreenX" in draggedTab._dragData))
draggedTab._dragData.animLastScreenX = draggedTab._dragData.screenX;
let screenX = event.screenX;
if (screenX == draggedTab._dragData.animLastScreenX)
@@ -6793,16 +6794,17 @@
<body><![CDATA[
if (this.getAttribute("movingtab") != "true")
return;
for (let tab of this.tabbrowser.visibleTabs)
tab.style.transform = "";
this.removeAttribute("movingtab");
+ this.parentNode.removeAttribute("movingtab");
this._handleTabSelect();
]]></body>
</method>
<method name="handleEvent">
<parameter name="aEvent"/>
<body><![CDATA[
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -21,16 +21,17 @@
--tab-min-height: 41px;
}
:root:-moz-lwtheme {
--tab-line-color: var(--lwt-accent-color);
}
#tabbrowser-tabs,
+#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
min-height: var(--tab-min-height);
}
.tab-stack {
min-height: inherit;
}
