diff --git a/src/browser/base/content/browser-sidebar-js.patch b/src/browser/base/content/browser-sidebar-js.patch index 3861608c..c8a1d416 100644 --- a/src/browser/base/content/browser-sidebar-js.patch +++ b/src/browser/base/content/browser-sidebar-js.patch @@ -258,7 +258,17 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645af } } }, -@@ -485,6 +628,9 @@ var SidebarUI = { +@@ -286,6 +413,9 @@ var SidebarUI = { + // First reset all ordinals to match DOM ordering. + let browser = document.getElementById("browser"); + [...browser.children].forEach((node, i) => { ++ // Do not change ordinal on vertical tabs ++ if (node.id == 'TabsToolbar' || node.id == 'verticaltabs-splitter') return ++ + node.style.MozBoxOrdinalGroup = i + 1; + }); + +@@ -485,6 +615,9 @@ var SidebarUI = { }, _loadSidebarExtension(commandID) { @@ -268,7 +278,7 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645af let sidebar = this.sidebars.get(commandID); let { extensionId } = sidebar; if (extensionId) { -@@ -523,6 +669,7 @@ var SidebarUI = { +@@ -523,6 +656,7 @@ var SidebarUI = { } this._fireFocusedEvent(); @@ -276,7 +286,7 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645af return true; }); }, -@@ -546,10 +693,28 @@ var SidebarUI = { +@@ -546,10 +680,28 @@ var SidebarUI = { } return this._show(commandID).then(() => { this._loadSidebarExtension(commandID); @@ -305,7 +315,7 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645af /** * Implementation for show. Also used internally for sidebars that are shown * when a window is opened and we don't want to ping telemetry. -@@ -559,6 +724,29 @@ var SidebarUI = { +@@ -559,6 +711,29 @@ var SidebarUI = { */ _show(commandID) { return new Promise(resolve => { @@ -335,7 +345,7 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645af this.selectMenuItem(commandID); this._box.hidden = this._splitter.hidden = false; -@@ -570,13 +758,21 @@ var SidebarUI = { +@@ -570,13 +745,21 @@ var SidebarUI = { this._box.setAttribute("sidebarcommand", commandID); this.lastOpenedId = commandID; @@ -359,7 +369,7 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645af this.browser.addEventListener( "load", event => { -@@ -615,22 +811,46 @@ var SidebarUI = { +@@ -615,22 +798,46 @@ var SidebarUI = { this.selectMenuItem(""); @@ -413,7 +423,7 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645af }, /** -@@ -638,25 +858,121 @@ var SidebarUI = { +@@ -638,25 +845,121 @@ var SidebarUI = { * none if the argument is an empty string. */ selectMenuItem(commandID) { diff --git a/src/browser/locales/en-US/browser/preferences/preferences-ftl.patch b/src/browser/locales/en-US/browser/preferences/preferences-ftl.patch index 46d74d12..5449ac30 100644 --- a/src/browser/locales/en-US/browser/preferences/preferences-ftl.patch +++ b/src/browser/locales/en-US/browser/preferences/preferences-ftl.patch @@ -1,5 +1,5 @@ diff --git a/browser/locales/en-US/browser/preferences/preferences.ftl b/browser/locales/en-US/browser/preferences/preferences.ftl -index f24485700321defc69cd57099ede164701b9b3ec..c62c09a76a96a8fd443537146edf4461839135f4 100644 +index f24485700321defc69cd57099ede164701b9b3ec..8061f090bf6d2fb29c4824d5d1a812688abfafb4 100644 --- a/browser/locales/en-US/browser/preferences/preferences.ftl +++ b/browser/locales/en-US/browser/preferences/preferences.ftl @@ -1432,3 +1432,18 @@ httpsonly-radio-disabled = @@ -16,7 +16,7 @@ index f24485700321defc69cd57099ede164701b9b3ec..c62c09a76a96a8fd443537146edf4461 +preferences-sidebar-active-tabs-description = When enabled, sidebar tabs will remain active even when closed. When disabled, sidebar tabs will be closed when you click on another tab. + +preferences-vertical-tabs-enabled = -+ .label = Use vertical tabs (Early Access) ++ .label = Use vertical tabs (In dev) +preferences-vertical-tabs-collapse = + .label = Collapse tabs + diff --git a/src/browser/themes/pulse/addons/shared.css b/src/browser/themes/pulse/addons/shared.css index e09c0521..0a5f4063 100644 --- a/src/browser/themes/pulse/addons/shared.css +++ b/src/browser/themes/pulse/addons/shared.css @@ -108,10 +108,20 @@ tab.tabbrowser-tab:nth-child(1) { margin: 8px; } +#verticaltabs-splitter { + background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage)); + -moz-default-appearance: auto !important; + -moz-font-smoothing-background-color: auto !important; + width: 4px; +} + /* ========================================================================== */ -/* Sidebar tabs */ +/* Sidebar tabs & vertical tabs */ .sidebar-item-background[checked='true']::before, -.sidebar-item-background[checked='true']::after { +.sidebar-item-background[checked='true']::after, +#browser .tab-background[selected='true']::before, +#browser .tab-background[selected='true']::after { content: ''; position: absolute; right: 0; @@ -128,19 +138,23 @@ tab.tabbrowser-tab:nth-child(1) { z-index: 10; } -.sidebar-item-background[checked='true']::before { +.sidebar-item-background[checked='true']::before, +#browser .tab-background[selected='true']::before { background-image: url('chrome://global/skin/icons/tab-rising-edge.svg'); top: var(--tab-rounding-size-neg); + left: unset; /* This is for vertical tabs */ } -.sidebar-item-background[checked='true']::after { +.sidebar-item-background[checked='true']::after, +#browser .tab-background[selected='true']::after { background-image: url('chrome://global/skin/icons/tab-falling-edge.svg'); bottom: var(--tab-rounding-size-neg); transform: rotate(180deg); } /* Show the curve next to the sidebar panel */ -#sidebar-box[checked] ~ #appcontent::before { +#sidebar-box[checked] ~ #appcontent::before, +#browser #TabsToolbar ~ #appcontent::before { content: ''; background-image: url('chrome://global/skin/icons/tab-rising-edge.svg'); @@ -158,12 +172,14 @@ tab.tabbrowser-tab:nth-child(1) { transform: rotate(180deg); } -#appcontent { +#appcontent, +#browser #TabsToolbar { position: relative; } /* Curve up at the top of the tabs */ -#sidebar-icons[checked]::before { +#sidebar-icons[checked]::before, +#browser #TabsToolbar::before { content: ''; background-image: url('chrome://global/skin/icons/tab-rising-edge.svg'); background-size: cover; @@ -255,7 +271,14 @@ tab[pending], } /* Hide the firefox view button */ -:root:not([privatebrowsingmode="temporary"]) :is(toolbarbutton, toolbarpaletteitem) + #tabbrowser-tabs, :root[privatebrowsingmode="temporary"] :is(toolbarbutton:not(#firefox-view-button), toolbarpaletteitem:not(#wrapper-firefox-view-button)) + #tabbrowser-tabs { - border-inline-start: none; +:root:not([privatebrowsingmode='temporary']) + :is(toolbarbutton, toolbarpaletteitem) + + #tabbrowser-tabs, +:root[privatebrowsingmode='temporary'] + :is( + toolbarbutton:not(#firefox-view-button), + toolbarpaletteitem:not(#wrapper-firefox-view-button) + ) + + #tabbrowser-tabs { + border-inline-start: none; } - diff --git a/src/browser/themes/pulse/vertical_tabs.css b/src/browser/themes/pulse/vertical_tabs.css index be08bb7c..b75da267 100644 --- a/src/browser/themes/pulse/vertical_tabs.css +++ b/src/browser/themes/pulse/vertical_tabs.css @@ -5,6 +5,9 @@ */ :root { --vertical-tabs-max-width: 350px; + --vertical-tabs-collapse-width: calc( + 16px + 2 * var(--inline-tab-padding) + 2 * var(--tab-block-margin) + ); } #browser #TabsToolbar .titlebar-spacer, @@ -20,7 +23,11 @@ #browser #TabsToolbar { background-color: -moz-Dialog; max-width: var(--vertical-tabs-max-width); + min-width: var(--vertical-tabs-collapse-width); -moz-box-ordinal-group: 0; + overflow-x: hidden; + + transition: min-width 150ms ease-in-out, max-width 150ms ease-in-out; } #browser #TabsToolbar:not([collapse='true']) { @@ -28,9 +35,7 @@ } #browser #TabsToolbar[collapse='true'] { - max-width: calc( - 16px + 2 * var(--inline-tab-padding) + 2 * var(--tab-block-margin) - ); + max-width: var(--vertical-tabs-collapse-width); } /** On collapse hover of tabs or splitter, the max width should increase again */ @@ -106,7 +111,8 @@ #browser #tabbrowser-tabs { border-inline-start: none; - margin-inline-start: none; + margin-inline-start: 0; + padding-inline-start: 0; } #browser #TabsToolbar[collapse='true'] .tabbrowser-tab {