diff --git a/browser/app/profile/firefox.js b/browser/app/profile/firefox.js
index ca5e8e139374..a1c9d39d1335 100644
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -571,6 +571,10 @@ pref("browser.tabs.secondaryTextUnsupportedLocales", "ar,bn,bo,ckb,fa,gu,he,hi,j
//Control the visibility of Tab Manager Menu.
pref("browser.tabs.tabmanager.enabled", false);
+// Offer additional drag space to the user. The drag space
+// will only be shown if browser.tabs.drawInTitlebar is true.
+pref("browser.tabs.extraDragSpace", false);
+
// When tabs opened by links in other tabs via a combination of
// browser.link.open_newwindow being set to 3 and target="_blank" etc are
// closed:
diff --git a/browser/base/content/browser-tabsintitlebar.js b/browser/base/content/browser-tabsintitlebar.js
index 23301332d842..3184f7b4488d 100644
--- a/browser/base/content/browser-tabsintitlebar.js
+++ b/browser/base/content/browser-tabsintitlebar.js
@@ -3,93 +3,123 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-var TabsInTitlebar = {
- init() {
- this._readPref();
- Services.prefs.addObserver(this._prefName, this);
+var TabsInTitlebar;
- this._initialized = true;
- this._update();
- },
+{
+ // start private TabsInTitlebar scope
+ TabsInTitlebar = {
+ init() {
+ this._readPref();
+ Services.prefs.addObserver(this._prefName, this);
- allowedBy(condition, allow) {
- if (allow) {
- if (condition in this._disallowed) {
- delete this._disallowed[condition];
+ dragSpaceObserver.init();
+ this._initialized = true;
+ this._update();
+ },
+
+ allowedBy(condition, allow) {
+ if (allow) {
+ if (condition in this._disallowed) {
+ delete this._disallowed[condition];
+ this._update();
+ }
+ } else if (!(condition in this._disallowed)) {
+ this._disallowed[condition] = null;
this._update();
}
- } else if (!(condition in this._disallowed)) {
- this._disallowed[condition] = null;
- this._update();
- }
- },
+ },
- get systemSupported() {
- let isSupported = false;
- switch (AppConstants.MOZ_WIDGET_TOOLKIT) {
- case "windows":
- case "cocoa":
- isSupported = true;
- break;
- case "gtk":
- isSupported = window.matchMedia("(-moz-gtk-csd-available)").matches;
- break;
- }
- delete this.systemSupported;
- return (this.systemSupported = isSupported);
- },
+ get systemSupported() {
+ let isSupported = false;
+ switch (AppConstants.MOZ_WIDGET_TOOLKIT) {
+ case "windows":
+ case "cocoa":
+ isSupported = true;
+ break;
+ case "gtk":
+ isSupported = window.matchMedia("(-moz-gtk-csd-available)").matches;
+ break;
+ }
+ delete this.systemSupported;
+ return (this.systemSupported = isSupported);
+ },
- get enabled() {
- return document.documentElement.getAttribute("tabsintitlebar") == "true";
- },
+ get enabled() {
+ return document.documentElement.getAttribute("tabsintitlebar") == "true";
+ },
- observe(subject, topic, data) {
- if (topic == "nsPref:changed") {
- this._readPref();
- }
- },
+ observe(subject, topic, data) {
+ if (topic == "nsPref:changed") {
+ this._readPref();
+ }
+ },
- _initialized: false,
- _disallowed: {},
- _prefName: "browser.tabs.drawInTitlebar",
+ _initialized: false,
+ _disallowed: {},
+ _prefName: "browser.tabs.drawInTitlebar",
- _readPref() {
- let hiddenTitlebar = Services.prefs.getBoolPref(
- "browser.tabs.drawInTitlebar",
- window.matchMedia("(-moz-gtk-csd-hide-titlebar-by-default)").matches
- );
- this.allowedBy("pref", hiddenTitlebar);
- },
+ _readPref() {
+ let hiddenTitlebar = Services.prefs.getBoolPref(
+ "browser.tabs.drawInTitlebar",
+ window.matchMedia("(-moz-gtk-csd-hide-titlebar-by-default)").matches
+ );
+ this.allowedBy("pref", hiddenTitlebar);
+ },
- _update() {
- if (!this._initialized) {
- return;
- }
+ _update() {
+ if (!this._initialized) {
+ return;
+ }
- let allowed =
- this.systemSupported &&
- !window.fullScreen &&
- !Object.keys(this._disallowed).length;
- if (allowed) {
- document.documentElement.setAttribute("tabsintitlebar", "true");
- if (AppConstants.platform == "macosx") {
- document.documentElement.setAttribute("chromemargin", "0,-1,-1,-1");
- document.documentElement.removeAttribute("drawtitle");
+ let allowed =
+ this.systemSupported &&
+ !window.fullScreen &&
+ !Object.keys(this._disallowed).length;
+ if (allowed) {
+ document.documentElement.setAttribute("tabsintitlebar", "true");
+ if (AppConstants.platform == "macosx") {
+ document.documentElement.setAttribute("chromemargin", "0,-1,-1,-1");
+ document.documentElement.removeAttribute("drawtitle");
+ } else {
+ document.documentElement.setAttribute("chromemargin", "0,2,2,2");
+ }
} else {
- document.documentElement.setAttribute("chromemargin", "0,2,2,2");
+ document.documentElement.removeAttribute("tabsintitlebar");
+ document.documentElement.removeAttribute("chromemargin");
+ if (AppConstants.platform == "macosx") {
+ document.documentElement.setAttribute("drawtitle", "true");
+ }
}
- } else {
- document.documentElement.removeAttribute("tabsintitlebar");
- document.documentElement.removeAttribute("chromemargin");
- if (AppConstants.platform == "macosx") {
- document.documentElement.setAttribute("drawtitle", "true");
+
+ ToolbarIconColor.inferFromText("tabsintitlebar", allowed);
+ },
+
+ uninit() {
+ Services.prefs.removeObserver(this._prefName, this);
+ dragSpaceObserver.uninit();
+ },
+ };
+
+ // Adds additional drag space to the window by listening to
+ // the corresponding preference.
+ let dragSpaceObserver = {
+ pref: "browser.tabs.extraDragSpace",
+
+ init() {
+ Services.prefs.addObserver(this.pref, this);
+ this.observe();
+ },
+
+ uninit() {
+ Services.prefs.removeObserver(this.pref, this);
+ },
+
+ observe() {
+ if (Services.prefs.getBoolPref(this.pref)) {
+ document.documentElement.setAttribute("extradragspace", "true");
+ } else {
+ document.documentElement.removeAttribute("extradragspace");
}
- }
-
- ToolbarIconColor.inferFromText("tabsintitlebar", allowed);
- },
-
- uninit() {
- Services.prefs.removeObserver(this._prefName, this);
- },
-};
+ },
+ };
+} // end private TabsInTitlebar scope
diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
index 98d29b3c3427..01cc7c334b1c 100644
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -6499,6 +6499,13 @@ function setToolbarVisibility(
};
let event = new CustomEvent("toolbarvisibilitychange", eventParams);
toolbar.dispatchEvent(event);
+
+ if (
+ toolbar.getAttribute("type") == "menubar" &&
+ CustomizationHandler.isCustomizing()
+ ) {
+ gCustomizeMode._updateDragSpaceCheckbox();
+ }
}
function updateToggleControlLabel(control) {
diff --git a/browser/components/customizableui/CustomizeMode.jsm b/browser/components/customizableui/CustomizeMode.jsm
index 6400e927aac7..91001407eed9 100644
--- a/browser/components/customizableui/CustomizeMode.jsm
+++ b/browser/components/customizableui/CustomizeMode.jsm
@@ -11,6 +11,7 @@ const kPaletteId = "customization-palette";
const kDragDataTypePrefix = "text/toolbarwrapper-id/";
const kSkipSourceNodePref = "browser.uiCustomization.skipSourceNodeCheck";
const kDrawInTitlebarPref = "browser.tabs.drawInTitlebar";
+const kExtraDragSpacePref = "browser.tabs.extraDragSpace";
const kCompactModeShowPref = "browser.compactmode.show";
const kBookmarksToolbarPref = "browser.toolbars.bookmarks.visibility";
const kKeepBroadcastAttributes = "keepbroadcastattributeswhencustomizing";
@@ -171,9 +172,12 @@ function CustomizeMode(aWindow) {
if (this._canDrawInTitlebar()) {
this._updateTitlebarCheckbox();
+ this._updateDragSpaceCheckbox();
Services.prefs.addObserver(kDrawInTitlebarPref, this);
+ Services.prefs.addObserver(kExtraDragSpacePref, this);
} else {
this.$("customization-titlebar-visibility-checkbox").hidden = true;
+ this.$("customization-extra-drag-space-checkbox").hidden = true;
}
// Observe pref changes to the bookmarks toolbar visibility,
@@ -231,6 +235,7 @@ CustomizeMode.prototype = {
uninit() {
if (this._canDrawInTitlebar()) {
Services.prefs.removeObserver(kDrawInTitlebarPref, this);
+ Services.prefs.removeObserver(kExtraDragSpacePref, this);
}
Services.prefs.removeObserver(kBookmarksToolbarPref, this);
},
@@ -1810,6 +1815,7 @@ CustomizeMode.prototype = {
this._updateUndoResetButton();
if (this._canDrawInTitlebar()) {
this._updateTitlebarCheckbox();
+ this._updateDragSpaceCheckbox();
}
break;
}
@@ -1859,9 +1865,40 @@ CustomizeMode.prototype = {
}
},
+ _updateDragSpaceCheckbox() {
+ let extraDragSpace = Services.prefs.getBoolPref(kExtraDragSpacePref);
+ let drawInTitlebar = Services.prefs.getBoolPref(
+ kDrawInTitlebarPref,
+ this.window.matchMedia("(-moz-gtk-csd-hide-titlebar-by-default)").matches
+ );
+ let menuBar = this.$("toolbar-menubar");
+ let menuBarEnabled =
+ menuBar &&
+ AppConstants.platform != "macosx" &&
+ menuBar.getAttribute("autohide") != "true";
+
+ let checkbox = this.$("customization-extra-drag-space-checkbox");
+ if (extraDragSpace) {
+ checkbox.setAttribute("checked", "true");
+ } else {
+ checkbox.removeAttribute("checked");
+ }
+
+ if (!drawInTitlebar || menuBarEnabled) {
+ checkbox.setAttribute("disabled", "true");
+ } else {
+ checkbox.removeAttribute("disabled");
+ }
+ },
+
toggleTitlebar(aShouldShowTitlebar) {
// Drawing in the titlebar means not showing the titlebar, hence the negation:
Services.prefs.setBoolPref(kDrawInTitlebarPref, !aShouldShowTitlebar);
+ this._updateDragSpaceCheckbox();
+ },
+
+ toggleDragSpace(aShouldShowDragSpace) {
+ Services.prefs.setBoolPref(kExtraDragSpacePref, aShouldShowDragSpace);
},
_getBoundsWithoutFlushing(element) {
diff --git a/browser/components/customizableui/content/customizeMode.inc.xhtml b/browser/components/customizableui/content/customizeMode.inc.xhtml
index 8ab504fb4e39..847e4cc64c53 100644
--- a/browser/components/customizableui/content/customizeMode.inc.xhtml
+++ b/browser/components/customizableui/content/customizeMode.inc.xhtml
@@ -29,6 +29,9 @@
# NB: because oncommand fires after click, by the time we've fired, the checkbox binding
# will already have switched the button's state, so this is correct:
oncommand="gCustomizeMode.toggleTitlebar(this.checked)" data-l10n-id="customize-mode-titlebar"/>
+
diff --git a/browser/components/customizableui/test/browser.ini b/browser/components/customizableui/test/browser.ini
index b6e17c6e6bc1..c773f04d0e4a 100644
--- a/browser/components/customizableui/test/browser.ini
+++ b/browser/components/customizableui/test/browser.ini
@@ -143,6 +143,8 @@ skip-if = verify
[browser_currentset_post_reset.js]
[browser_customizemode_contextmenu_menubuttonstate.js]
skip-if = os == "win" && bits == 64 # 1526429
+[browser_customizemode_dragspace.js]
+skip-if = os == "linux" # linux doesn't get drag space (no tabsintitlebar)
[browser_customizemode_uidensity.js]
[browser_disable_commands_customize.js]
[browser_drag_outside_palette.js]
diff --git a/browser/components/customizableui/test/browser_customizemode_dragspace.js b/browser/components/customizableui/test/browser_customizemode_dragspace.js
new file mode 100644
index 000000000000..1dab9914d1b0
--- /dev/null
+++ b/browser/components/customizableui/test/browser_customizemode_dragspace.js
@@ -0,0 +1,137 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const PREF_DRAG_SPACE = "browser.tabs.extraDragSpace";
+
+add_task(async function setup() {
+ await startCustomizing();
+});
+
+add_task(async function test_dragspace_checkbox() {
+ let win = document.getElementById("main-window");
+ let checkbox = document.getElementById(
+ "customization-extra-drag-space-checkbox"
+ );
+ is(
+ Services.prefs.getBoolPref(PREF_DRAG_SPACE),
+ false,
+ "Drag space is disabled initially."
+ );
+ ok(!checkbox.checked, "Checkbox state reflects disabled drag space.");
+
+ let dragSpaceEnabled = BrowserTestUtils.waitForAttribute(
+ "extradragspace",
+ win,
+ "true"
+ );
+ EventUtils.synthesizeMouseAtCenter(checkbox, {});
+ await dragSpaceEnabled;
+ is(
+ Services.prefs.getBoolPref(PREF_DRAG_SPACE),
+ true,
+ "Drag space is enabled."
+ );
+
+ EventUtils.synthesizeMouseAtCenter(checkbox, {});
+ await BrowserTestUtils.waitForCondition(
+ () => !win.hasAttribute("extradragspace")
+ );
+ is(
+ Services.prefs.getBoolPref(PREF_DRAG_SPACE),
+ false,
+ "Drag space is disabled."
+ );
+});
+
+add_task(async function test_dragspace_checkbox_disable() {
+ let dragSpaceCheckbox = document.getElementById(
+ "customization-extra-drag-space-checkbox"
+ );
+ let titleBarCheckbox = document.getElementById(
+ "customization-titlebar-visibility-checkbox"
+ );
+
+ ok(!titleBarCheckbox.checked, "Title bar is disabled initially.");
+ ok(
+ !dragSpaceCheckbox.hasAttribute("disabled"),
+ "Drag space checkbox is enabled initially."
+ );
+
+ let checkboxDisabled = BrowserTestUtils.waitForAttribute(
+ "disabled",
+ dragSpaceCheckbox,
+ "true"
+ );
+ EventUtils.synthesizeMouseAtCenter(titleBarCheckbox, {});
+ await checkboxDisabled;
+ info("Checkbox was disabled!");
+
+ EventUtils.synthesizeMouseAtCenter(titleBarCheckbox, {});
+ await BrowserTestUtils.waitForCondition(
+ () => !dragSpaceCheckbox.hasAttribute("disabled")
+ );
+ info("Checkbox was enabled!");
+});
+
+add_task(async function test_dragspace_reset() {
+ let win = document.getElementById("main-window");
+ let checkbox = document.getElementById(
+ "customization-extra-drag-space-checkbox"
+ );
+ is(
+ Services.prefs.getBoolPref(PREF_DRAG_SPACE),
+ false,
+ "Drag space is disabled initially."
+ );
+ ok(!checkbox.checked, "Checkbox state reflects disabled drag space.");
+
+ // Enable dragspace manually.
+ let dragSpaceEnabled = BrowserTestUtils.waitForAttribute(
+ "extradragspace",
+ win,
+ "true"
+ );
+ EventUtils.synthesizeMouseAtCenter(checkbox, {});
+ await dragSpaceEnabled;
+ is(
+ Services.prefs.getBoolPref(PREF_DRAG_SPACE),
+ true,
+ "Drag space is enabled."
+ );
+
+ // Disable dragspace through reset.
+ await gCustomizeMode.reset();
+ await BrowserTestUtils.waitForCondition(
+ () => !win.hasAttribute("extradragspace")
+ );
+ is(
+ Services.prefs.getBoolPref(PREF_DRAG_SPACE),
+ false,
+ "Drag space is disabled."
+ );
+
+ // Undo reset and check that dragspace is enabled again.
+ dragSpaceEnabled = BrowserTestUtils.waitForAttribute(
+ "extradragspace",
+ win,
+ "true"
+ );
+ await gCustomizeMode.undoReset();
+ await dragSpaceEnabled;
+ is(
+ Services.prefs.getBoolPref(PREF_DRAG_SPACE),
+ true,
+ "Drag space is enabled."
+ );
+
+ Services.prefs.clearUserPref(PREF_DRAG_SPACE);
+});
+
+add_task(async function cleanup() {
+ await endCustomizing();
+
+ Services.prefs.clearUserPref(PREF_DRAG_SPACE);
+});
diff --git a/browser/docs/BrowserUsageTelemetry.rst b/browser/docs/BrowserUsageTelemetry.rst
index 641e8ef5c972..208fc19b341f 100644
--- a/browser/docs/BrowserUsageTelemetry.rst
+++ b/browser/docs/BrowserUsageTelemetry.rst
@@ -41,6 +41,7 @@ For the purposes of this telemetry a set of areas are defined:
* ``menu-bar`` - The main menu.
* ``menu-toolbar`` - The normally hidden toolbar that holds the main menu.
+ * ``drag-space`` - The optional drag space.
* ``titlebar`` - The optional title bar.
* ``tabs-bar`` - The area where tabs are displayed.
* ``bookmarks-bar`` - The bookmarks toolbar.
diff --git a/browser/locales/en-US/browser/customizeMode.ftl b/browser/locales/en-US/browser/customizeMode.ftl
index 8c82226e6cee..cdecb9fcea14 100644
--- a/browser/locales/en-US/browser/customizeMode.ftl
+++ b/browser/locales/en-US/browser/customizeMode.ftl
@@ -23,6 +23,8 @@ customize-mode-uidensity-menu-touch =
.tooltiptext = Touch
customize-mode-uidensity-auto-touch-mode-checkbox =
.label = Use Touch for Tablet Mode
+customize-mode-extra-drag-space =
+ .label = Drag Space
customize-mode-lwthemes =
.label = Themes
customize-mode-overflow-list-description = Drag and drop items here to keep them within reach but out of your toolbar…
diff --git a/browser/modules/BrowserUsageTelemetry.jsm b/browser/modules/BrowserUsageTelemetry.jsm
index b05c6b06406c..86a4eaaf4654 100644
--- a/browser/modules/BrowserUsageTelemetry.jsm
+++ b/browser/modules/BrowserUsageTelemetry.jsm
@@ -448,6 +448,7 @@ let BrowserUsageTelemetry = {
this._setupAfterRestore();
this._inited = true;
+ Services.prefs.addObserver("browser.tabs.extraDragSpace", this);
Services.prefs.addObserver("browser.tabs.drawInTitlebar", this);
this._recordUITelemetry();
@@ -511,6 +512,15 @@ let BrowserUsageTelemetry = {
break;
case "nsPref:changed":
switch (data) {
+ case "browser.tabs.extraDragSpace":
+ this._recordWidgetChange(
+ "drag-space",
+ Services.prefs.getBoolPref("browser.tabs.extraDragSpace")
+ ? "on"
+ : "off",
+ "pref"
+ );
+ break;
case "browser.tabs.drawInTitlebar":
this._recordWidgetChange(
"titlebar",
@@ -617,6 +627,11 @@ let BrowserUsageTelemetry = {
widgetMap.set("menu-toolbar", menuBarHidden ? "off" : "on");
+ widgetMap.set(
+ "drag-space",
+ Services.prefs.getBoolPref("browser.tabs.extraDragSpace") ? "on" : "off"
+ );
+
// Drawing in the titlebar means not showing the titlebar, hence the negation.
widgetMap.set(
"titlebar",
diff --git a/browser/modules/test/browser/browser_UsageTelemetry_toolbars.js b/browser/modules/test/browser/browser_UsageTelemetry_toolbars.js
index 4cb4a4084a86..f5565d434e68 100644
--- a/browser/modules/test/browser/browser_UsageTelemetry_toolbars.js
+++ b/browser/modules/test/browser/browser_UsageTelemetry_toolbars.js
@@ -79,6 +79,7 @@ function organizeToolbars(state = {}) {
pageActionsInUrlBar: [],
// Areas to show or hide.
+ dragSpaceVisible: false,
titlebarVisible: false,
menubarVisible: false,
personalToolbarVisible: false,
@@ -111,6 +112,10 @@ function organizeToolbars(state = {}) {
targetState.personalToolbarVisible
);
+ Services.prefs.setBoolPref(
+ "browser.tabs.extraDragSpace",
+ !targetState.titlebarVisible && targetState.dragSpaceVisible
+ );
Services.prefs.setBoolPref(
"browser.tabs.drawInTitlebar",
!targetState.titlebarVisible
@@ -164,6 +169,7 @@ add_task(async function widgetPositions() {
BrowserUsageTelemetry._recordUITelemetry();
assertVisibilityScalars([
+ "drag-space_pinned_off",
"menu-toolbar_pinned_off",
"titlebar_pinned_off",
"bookmarks-bar_pinned_off",
@@ -197,12 +203,14 @@ add_task(async function widgetPositions() {
"library-button",
],
+ dragSpaceVisible: true,
personalToolbarVisible: true,
});
BrowserUsageTelemetry._recordUITelemetry();
assertVisibilityScalars([
+ "drag-space_pinned_on",
"menu-toolbar_pinned_off",
"titlebar_pinned_off",
"bookmarks-bar_pinned_on",
@@ -251,6 +259,7 @@ add_task(async function customizeMode() {
BrowserUsageTelemetry._recordUITelemetry();
assertVisibilityScalars([
+ "drag-space_pinned_off",
"menu-toolbar_pinned_off",
"titlebar_pinned_off",
"bookmarks-bar_pinned_off",
@@ -372,6 +381,7 @@ add_task(async function contextMenus() {
BrowserUsageTelemetry._recordUITelemetry();
assertVisibilityScalars([
+ "drag-space_pinned_off",
"menu-toolbar_pinned_off",
"titlebar_pinned_off",
"bookmarks-bar_pinned_off",
@@ -471,6 +481,7 @@ add_task(async function pageActions() {
BrowserUsageTelemetry._recordUITelemetry();
assertVisibilityScalars([
+ "drag-space_pinned_off",
"menu-toolbar_pinned_off",
"titlebar_pinned_off",
"bookmarks-bar_pinned_off",
@@ -577,6 +588,7 @@ add_task(async function extensions() {
BrowserUsageTelemetry._recordUITelemetry();
assertVisibilityScalars([
+ "drag-space_pinned_off",
"menu-toolbar_pinned_off",
"titlebar_pinned_off",
"bookmarks-bar_pinned_off",
@@ -603,6 +615,7 @@ add_task(async function extensions() {
BrowserUsageTelemetry._recordUITelemetry();
assertVisibilityScalars([
+ "drag-space_pinned_off",
"menu-toolbar_pinned_off",
"titlebar_pinned_off",
"bookmarks-bar_pinned_off",
@@ -624,6 +637,7 @@ add_task(async function extensions() {
BrowserUsageTelemetry._recordUITelemetry();
assertVisibilityScalars([
+ "drag-space_pinned_off",
"menu-toolbar_pinned_off",
"titlebar_pinned_off",
"bookmarks-bar_pinned_off",
@@ -671,6 +685,7 @@ add_task(async function extensions() {
BrowserUsageTelemetry._recordUITelemetry();
assertVisibilityScalars([
+ "drag-space_pinned_off",
"menu-toolbar_pinned_off",
"titlebar_pinned_off",
"bookmarks-bar_pinned_off",
diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css
index 3ceffec08273..45b8be852d5c 100644
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -439,7 +439,13 @@ menuitem.bookmark-item {
height: var(--tab-min-height);
}
:root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] {
- height: var(--tab-min-height);
+ height: calc(var(--tab-min-height) + var(--space-above-tabbar));
+ }
+
+ /* Add extra space to titlebar for dragging */
+ :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items,
+ :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
+ padding-top: var(--space-above-tabbar);
}
/* Make #TabsToolbar transparent as we style underlying #titlebar with
diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css
index 5f08f9e29d27..b3c1c820bfdd 100644
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -570,6 +570,10 @@ moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left {
}
} /*** END !proton ***/
+#TabsToolbar > .toolbar-items {
+ padding-top: var(--space-above-tabbar);
+}
+
@media not (-moz-proton) {
#TabsToolbar:not(:-moz-lwtheme) {
color: #333;
diff --git a/browser/themes/shared/browser.inc.css b/browser/themes/shared/browser.inc.css
index b91352437e67..8a8be030a441 100644
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -14,6 +14,8 @@
--toolbar-bgimage: var(--toolbar-non-lwt-bgimage);
--toolbar-color: var(--toolbar-non-lwt-textcolor);
+ /* Note: Setting this to 0 (without px) breaks CSS calculations for OSX. */
+ --space-above-tabbar: 0px;
--tabs-navbar-shadow-size: 1px;
--panelui-subview-transition-duration: 150ms;
@@ -111,6 +113,10 @@
}
} /*** END proton ***/
+:root[extradragspace][tabsintitlebar]:not([inFullscreen]) {
+ --space-above-tabbar: 8px;
+}
+
@media (min-resolution: 1.5dppx) {
:root {
--tabs-navbar-shadow-size: 0.5px;
diff --git a/browser/themes/shared/tabs.inc.css b/browser/themes/shared/tabs.inc.css
index e5e792db1063..a046f9ab6bdf 100644
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -766,14 +766,16 @@
%ifdef MENUBAR_CAN_AUTOHIDE
#toolbar-menubar:not([autohide=true]) + #TabsToolbar,
%endif
-:root:not([tabsintitlebar]) {
+:root:not([tabsintitlebar]),
+:root[extradragspace] {
--tabs-top-border-width: 1px;
}
%ifdef MENUBAR_CAN_AUTOHIDE
#toolbar-menubar:not([autohide=true]) + #TabsToolbar .tabbrowser-tab > .tab-stack > .tab-background,
%endif
-:root:not([tabsintitlebar]) .tab-background {
+:root:not([tabsintitlebar]) .tab-background,
+:root[extradragspace] .tab-background {
border-top-style: solid;
}
} /*** END !proton ***/
@@ -962,9 +964,9 @@
}
%ifdef MENUBAR_CAN_AUTOHIDE
-:root[tabsintitlebar] #toolbar-menubar[autohide=true] + #TabsToolbar .tabbrowser-tab::after,
+:root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide=true] + #TabsToolbar .tabbrowser-tab::after,
%else
-:root[tabsintitlebar] .tabbrowser-tab::after,
+:root[tabsintitlebar]:not([extradragspace]) .tabbrowser-tab::after,
%endif
/* Show full height tab separators on hover and multiselection. */
.tabbrowser-tab:hover::after,
diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css
index c6540188c25a..aec68347c6bf 100644
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -112,16 +112,21 @@
height: calc(var(--tab-min-height) - var(--tabs-navbar-shadow-size));
}
:root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] {
- height: calc(var(--tab-min-height) - var(--tabs-navbar-shadow-size));
+ height: calc(var(--tab-min-height) + var(--space-above-tabbar) - var(--tabs-navbar-shadow-size));
}
}
}
+:root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items,
+:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
+ padding-top: var(--space-above-tabbar);
+}
+
/* Add 4px extra margin on top of the tabs toolbar on Windows 7. */
@media (-moz-os-version: windows-win7) {
:root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items,
:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
- padding-top: 4px;
+ padding-top: calc(var(--space-above-tabbar) + 4px);
}
}