From 5cdffcf1763336ce8f929f2b08c140b0f2759e6f Mon Sep 17 00:00:00 2001 From: Butkovits Atila Date: Sat, 10 Apr 2021 10:50:31 +0300 Subject: [PATCH] Backed out changeset 2ee25a7f42f2 (bug 1701990) for causing failures at browser_970511_undo_restore_default.js. CLOSED TREE --- browser/app/profile/firefox.js | 4 + .../base/content/browser-tabsintitlebar.js | 182 ++++++++++-------- browser/base/content/browser.js | 7 + .../customizableui/CustomizeMode.jsm | 37 ++++ .../content/customizeMode.inc.xhtml | 3 + .../customizableui/test/browser.ini | 2 + .../test/browser_customizemode_dragspace.js | 137 +++++++++++++ browser/docs/BrowserUsageTelemetry.rst | 1 + .../locales/en-US/browser/customizeMode.ftl | 2 + browser/modules/BrowserUsageTelemetry.jsm | 15 ++ .../browser_UsageTelemetry_toolbars.js | 15 ++ browser/themes/linux/browser.css | 8 +- browser/themes/osx/browser.css | 4 + browser/themes/shared/browser.inc.css | 6 + browser/themes/shared/tabs.inc.css | 10 +- browser/themes/windows/browser.css | 9 +- 16 files changed, 359 insertions(+), 83 deletions(-) create mode 100644 browser/components/customizableui/test/browser_customizemode_dragspace.js 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); } }