diff --git a/package.json b/package.json index 4ed18ae2..e3b6c454 100644 --- a/package.json +++ b/package.json @@ -7,17 +7,18 @@ "license": "MPL-2.0", "private": true, "dependencies": { - "gluon-build": "^1.0.0-rc.2" + "gluon-build": "^1.0.0-rc.4" }, "scripts": { "build": "gluon build", "build:ui": "gluon build --ui", "bs": "yarn build && yarn start", "bus": "yarn build:ui && yarn start", - "start": "gluon run", + "start": "yarn clearStartupCache && gluon run", "export": "gluon export-file", "imp": "gluon import", "clearProfile": "rm -rf engine/obj-x86_64-pc-linux-gnu/tmp/profile-default", + "clearStartupCache": "rm -rf engine/obj-x86_64-pc-linux-gnu/tmp/profile-default/startupCache", "download": "gluon download", "package": "gluon package", "ff-version": "gluon ff-version", diff --git a/src/browser/base/content/browser-js.patch b/src/browser/base/content/browser-js.patch new file mode 100644 index 00000000..1cd9150c --- /dev/null +++ b/src/browser/base/content/browser-js.patch @@ -0,0 +1,12 @@ +diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js +index a9d4fc4abe1d3b5d5213d3afd90fd0128ee0d032..f2eb4888521deefa7da2b7666ec6012af2a27a4e 100644 +--- a/browser/base/content/browser.js ++++ b/browser/base/content/browser.js +@@ -1841,6 +1841,7 @@ var gBrowserInit = { + gPrivateBrowsingUI.init(); + BrowserSearch.init(); + BrowserPageActions.init(); ++ VerticalTabs.init(); + if (gToolbarKeyNavEnabled) { + ToolbarKeyboardNavigator.init(); + } diff --git a/src/browser/base/content/browser-verticaltabs.js b/src/browser/base/content/browser-verticaltabs.js new file mode 100644 index 00000000..e1ab04cf --- /dev/null +++ b/src/browser/base/content/browser-verticaltabs.js @@ -0,0 +1,105 @@ +/* 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/. */ +// @ts-check + +const VERTICAL_TABS_POSITION = 'pulse.tabs.vertical' + +var VerticalTabs = { + /** + * @return {Boolean} true if the vertical tabs feature is enabled. + */ + get verticalTabsEnabled() { + return Services.prefs.getBoolPref(VERTICAL_TABS_POSITION, false) + }, + + /** + * @return {HTMLElement?} + */ + get tabsToolbar() { + return document.getElementById('TabsToolbar') + }, + + /** + * @return {HTMLElement?} + */ + get titlebarContainer() { + return document.getElementById('titlebar') + }, + + /** + * @return {HTMLElement?} + */ + get browserContainer() { + return document.getElementById('browser') + }, + + /** @type {HTMLElement?} */ + arrowScrollbox: null, + /** @type {HTMLElement?} */ + tabBrowserTabs: null, + + _initialized: false, + + init() { + if (this._initialized) { + return + } + + this.arrowScrollbox = document.getElementById('tabbrowser-arrowscrollbox') + this.tabBrowserTabs = document.getElementById('tabbrowser-tabs') + + Services.prefs.addObserver(VERTICAL_TABS_POSITION, this) + + if (this.verticalTabsEnabled) { + this.enableVerticalTabs() + } + + this._initialized = true + }, + + enableVerticalTabs() { + this.browserContainer?.prepend(this.tabsToolbar || '') + + this.arrowScrollbox?.setAttribute('orient', 'vertical') + this.tabBrowserTabs?.setAttribute('orient', 'vertical') + + document + .getElementById('navigator-toolbox-background') + ?.setAttribute('verticaltabs', 'true') + document + .querySelector('#TabsToolbar .toolbar-items') + ?.setAttribute('align', 'start') + }, + + disableVerticalTabs() { + this.titlebarContainer?.prepend(this.tabsToolbar || '') + + this.arrowScrollbox?.setAttribute('orient', 'horizontal') + this.tabBrowserTabs?.setAttribute('orient', 'horizontal') + + document + .getElementById('navigator-toolbox-background') + ?.removeAttribute('verticaltabs') + document + .querySelector('#TabsToolbar .toolbar-items') + ?.setAttribute('align', 'end') + }, + + /** + * The handler for `Services.prefs.addObserver`. + */ + observe(_subject, topic, data) { + switch (topic) { + case 'nsPref:changed': + if (data === VERTICAL_TABS_POSITION) { + if (this.verticalTabsEnabled) { + this.enableVerticalTabs() + } else { + this.disableVerticalTabs() + } + } + break + } + }, +} diff --git a/src/browser/base/content/browser-xhtml.patch b/src/browser/base/content/browser-xhtml.patch new file mode 100644 index 00000000..384156d0 --- /dev/null +++ b/src/browser/base/content/browser-xhtml.patch @@ -0,0 +1,20 @@ +diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml +index 8dfb7b3c787661b5541d77c0eddf408ee90c513f..2a8c13598f5d047bb2fbcbae0b1ee6032a50e9da 100644 +--- a/browser/base/content/browser.xhtml ++++ b/browser/base/content/browser.xhtml +@@ -105,6 +105,7 @@ + Services.scriptloader.loadSubScript("chrome://browser/content/browser-pageActions.js", this); + Services.scriptloader.loadSubScript("chrome://browser/content/browser-sidebar.js", this); + Services.scriptloader.loadSubScript("chrome://browser/content/browser-tabsintitlebar.js", this); ++ Services.scriptloader.loadSubScript("chrome://browser/content/browser-verticaltabs.js", this); + Services.scriptloader.loadSubScript("chrome://browser/content/tabbrowser.js", this); + Services.scriptloader.loadSubScript("chrome://browser/content/tabbrowser-tab.js", this); + Services.scriptloader.loadSubScript("chrome://browser/content/tabbrowser-tabs.js", this); +@@ -112,6 +113,7 @@ + Services.scriptloader.loadSubScript("chrome://browser/content/search/autocomplete-popup.js", this); + Services.scriptloader.loadSubScript("chrome://browser/content/search/searchbar.js", this); + ++ + window.onload = gBrowserInit.onLoad.bind(gBrowserInit); + window.onunload = gBrowserInit.onUnload.bind(gBrowserInit); + window.onclose = WindowIsClosing; diff --git a/src/browser/base/content/navigator-toolbox-inc-xhtml.patch b/src/browser/base/content/navigator-toolbox-inc-xhtml.patch new file mode 100644 index 00000000..a5e1cbba --- /dev/null +++ b/src/browser/base/content/navigator-toolbox-inc-xhtml.patch @@ -0,0 +1,15 @@ +diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml +index 8071a5fa5e1f3ba3dfd0345fa1e3284082eb2e39..c6d6d3b08f033ff207daa44074f8422e51b52640 100644 +--- a/browser/base/content/navigator-toolbox.inc.xhtml ++++ b/browser/base/content/navigator-toolbox.inc.xhtml +@@ -475,6 +475,10 @@ + consumeanchor="PanelUI-button" + data-l10n-id="appmenu-menu-button-closed2"/> + ++ ++# Intended for the vertical tabs view, should be hidden by default ++#include titlebar-items.inc.xhtml ++ + + + t.pinned == tab.pinned + ), +@@ -609,21 +630,31 @@ + } + } + ++ const verticalTabs = Services.prefs.getBoolPref( ++ "pulse.tabs.vertical", ++ false ++ ); ++ ++ const left = verticalTabs ? "top" : "left"; ++ const right = verticalTabs ? "bottom" : "right"; ++ const width = verticalTabs ? "height" : "width"; ++ const clientWidth = verticalTabs ? "clientHeight" : "clientWidth"; ++ + var rect = arrowScrollbox.getBoundingClientRect(); + var newMargin; + if (pixelsToScroll) { + // if we are scrolling, put the drop indicator at the edge + // so that it doesn't jump while scrolling + let scrollRect = arrowScrollbox.scrollClientRect; +- let minMargin = scrollRect.left - rect.left; ++ let minMargin = scrollRect[left] - rect[left]; + let maxMargin = Math.min( +- minMargin + scrollRect.width, +- scrollRect.right ++ minMargin + scrollRect[width], ++ scrollRect[right] + ); +- if (RTL_UI) { ++ if (RTL_UI && !verticalTabs) { + [minMargin, maxMargin] = [ +- this.clientWidth - maxMargin, +- this.clientWidth - minMargin, ++ this[clientWidth] - maxMargin, ++ this[clientWidth] - minMargin, + ]; + } + newMargin = pixelsToScroll > 0 ? maxMargin : minMargin; +@@ -634,30 +665,38 @@ + let tabRect = this._getVisibleTabs() + .at(-1) + .getBoundingClientRect(); +- if (RTL_UI) { +- newMargin = rect.right - tabRect.left; ++ if (RTL_UI && !verticalTabs) { ++ newMargin = rect[right] - tabRect[left]; + } else { +- newMargin = tabRect.right - rect.left; ++ newMargin = tabRect[right] - rect[left]; + } + } else { + let tabRect = children[newIndex].getBoundingClientRect(); +- if (RTL_UI) { +- newMargin = rect.right - tabRect.right; ++ if (RTL_UI && !verticalTabs) { ++ newMargin = rect[right] - tabRect[right]; + } else { +- newMargin = tabRect.left - rect.left; ++ newMargin = tabRect[left] - rect[left]; + } + } + } + + ind.hidden = false; +- newMargin += ind.clientWidth / 2; +- if (RTL_UI) { ++ newMargin += ind[clientWidth] / 2; ++ if (RTL_UI && !verticalTabs) { + newMargin *= -1; + } +- ind.style.transform = "translate(" + Math.round(newMargin) + "px)"; ++ ind.style.transform = ++ "translate(" + verticalTabs ++ ? "0, " ++ : "" + Math.round(newMargin) + "px)"; + } + + on_drop(event) { ++ const verticalTabs = Services.prefs.getBoolPref( ++ "pulse.tabs.vertical", ++ false ++ ); ++ + var dt = event.dataTransfer; + var dropEffect = dt.dropEffect; + var draggedTab; +@@ -714,7 +753,11 @@ + incrementDropIndex = false; + } + +- if (oldTranslateX && oldTranslateX != newTranslateX && !gReduceMotion) { ++ if ( ++ oldTranslateX && ++ oldTranslateX != newTranslateX && ++ !(gReduceMotion || verticalTabs) ++ ) { + for (let tab of movingTabs) { + tab.setAttribute("tabdrop-samewindow", "true"); + tab.style.transform = "translateX(" + newTranslateX + "px)"; +@@ -1519,6 +1562,11 @@ + } + + _animateTabMove(event) { ++ const verticalTabs = Services.prefs.getBoolPref( ++ "pulse.tabs.vertical", ++ false ++ ); ++ + let draggedTab = event.dataTransfer.mozGetDataAt(TAB_DROP_TYPE, 0); + let movingTabs = draggedTab._dragData.movingTabs; + +@@ -1530,19 +1578,28 @@ + } + } + +- if (!("animLastScreenX" in draggedTab._dragData)) { +- draggedTab._dragData.animLastScreenX = draggedTab._dragData.screenX; ++ const animLastScreen = verticalTabs ++ ? "animLastScreenY" ++ : "animLastScreenX"; ++ const screen = verticalTabs ? "screenY" : "screenX"; ++ const dimensions = verticalTabs ? "height" : "width"; ++ const scrollEdge = verticalTabs ? "scrollTop" : "scrollLeft"; ++ const scrollDimension = verticalTabs ? "scrollY" : "scrollX"; ++ const translate = verticalTabs ? "translateY" : "translateX"; ++ ++ if (!(animLastScreen in draggedTab._dragData)) { ++ draggedTab._dragData[animLastScreen] = draggedTab._dragData[screen]; + } + +- let screenX = event.screenX; +- if (screenX == draggedTab._dragData.animLastScreenX) { ++ let screenX = event[screen]; ++ if (screenX == draggedTab._dragData[animLastScreen]) { + return; + } + + // Direction of the mouse movement. +- let ltrMove = screenX > draggedTab._dragData.animLastScreenX; ++ let ltrMove = screenX > draggedTab._dragData[animLastScreen]; + +- draggedTab._dragData.animLastScreenX = screenX; ++ draggedTab._dragData[animLastScreen] = screenX; + + let pinned = draggedTab.pinned; + let numPinned = gBrowser._numPinnedTabs; +@@ -1551,36 +1608,40 @@ + pinned ? numPinned : undefined + ); + +- if (RTL_UI) { ++ if (RTL_UI && !verticalTabs) { + tabs.reverse(); + // Copy moving tabs array to avoid infinite reversing. + movingTabs = [...movingTabs].reverse(); + } +- let tabWidth = draggedTab.getBoundingClientRect().width; ++ let tabWidth = draggedTab.getBoundingClientRect()[dimensions]; + let shiftWidth = tabWidth * movingTabs.length; ++ ++ // We want to store the output value as both the width and the height to ++ // force compatibility with code elsewhere + draggedTab._dragData.tabWidth = tabWidth; ++ draggedTab._dragData.tabHeight = tabWidth; + + // Move the dragged tab based on the mouse position. + + let leftTab = tabs[0]; + let rightTab = tabs[tabs.length - 1]; +- let rightMovingTabScreenX = movingTabs[movingTabs.length - 1].screenX; +- let leftMovingTabScreenX = movingTabs[0].screenX; +- let translateX = screenX - draggedTab._dragData.screenX; ++ let rightMovingTabScreenX = movingTabs[movingTabs.length - 1][screen]; ++ let leftMovingTabScreenX = movingTabs[0][screen]; ++ let translateX = screenX - draggedTab._dragData[screen]; + if (!pinned) { + translateX += +- this.arrowScrollbox.scrollbox.scrollLeft - +- draggedTab._dragData.scrollX; ++ this.arrowScrollbox.scrollbox[scrollEdge] - ++ draggedTab._dragData[scrollDimension]; + } +- let leftBound = leftTab.screenX - leftMovingTabScreenX; ++ let leftBound = leftTab[screen] - leftMovingTabScreenX; + let rightBound = +- rightTab.screenX + +- rightTab.getBoundingClientRect().width - ++ rightTab[screen] + ++ rightTab.getBoundingClientRect()[dimensions] - + (rightMovingTabScreenX + tabWidth); + translateX = Math.min(Math.max(translateX, leftBound), rightBound); + + for (let tab of movingTabs) { +- tab.style.transform = "translateX(" + translateX + "px)"; ++ tab.style.transform = translate + "(" + translateX + "px)"; + } + + draggedTab._dragData.translateX = translateX; +@@ -1613,11 +1674,11 @@ + if (tabs[mid] == draggedTab && ++mid > high) { + break; + } +- screenX = tabs[mid].screenX + getTabShift(tabs[mid], oldIndex); ++ screenX = tabs[mid][screen] + getTabShift(tabs[mid], oldIndex); + if (screenX > tabCenter) { + high = mid - 1; + } else if ( +- screenX + tabs[mid].getBoundingClientRect().width < ++ screenX + tabs[mid].getBoundingClientRect()[dimensions] < + tabCenter + ) { + low = mid + 1; +@@ -1640,16 +1701,16 @@ + for (let tab of tabs) { + if (tab != draggedTab) { + let shift = getTabShift(tab, newIndex); +- tab.style.transform = shift ? "translateX(" + shift + "px)" : ""; ++ tab.style.transform = shift ? translate + "(" + shift + "px)" : ""; + } + } + + function getTabShift(tab, dropIndex) { + if (tab._tPos < draggedTab._tPos && tab._tPos >= dropIndex) { +- return RTL_UI ? -shiftWidth : shiftWidth; ++ return RTL_UI && !verticalTabs ? -shiftWidth : shiftWidth; + } + if (tab._tPos > draggedTab._tPos && tab._tPos < dropIndex) { +- return RTL_UI ? shiftWidth : -shiftWidth; ++ return RTL_UI && !verticalTabs ? shiftWidth : -shiftWidth; + } + return 0; + } diff --git a/src/browser/base/jar-mn.patch b/src/browser/base/jar-mn.patch new file mode 100644 index 00000000..ec667ba7 --- /dev/null +++ b/src/browser/base/jar-mn.patch @@ -0,0 +1,12 @@ +diff --git a/browser/base/jar.mn b/browser/base/jar.mn +index 4239a2af4952c0c7ceafaae1d614925a960402bc..f53ab91867941b7282d71b4687ae8af7df47e621 100644 +--- a/browser/base/jar.mn ++++ b/browser/base/jar.mn +@@ -58,6 +58,7 @@ browser.jar: + content/browser/browser-toolbarKeyNav.js (content/browser-toolbarKeyNav.js) + content/browser/browser-thumbnails.js (content/browser-thumbnails.js) + content/browser/browser-graphics-utils.js (content/browser-graphics-utils.js) ++ content/browser/browser-verticaltabs.js (content/browser-verticaltabs.js) + content/browser/browser-webrtc.js (content/browser-webrtc.js) + * content/browser/pageinfo/pageInfo.xhtml (content/pageinfo/pageInfo.xhtml) + content/browser/pageinfo/pageInfo.js (content/pageinfo/pageInfo.js) diff --git a/src/browser/components/preferences/main-inc-xhtml.patch b/src/browser/components/preferences/main-inc-xhtml.patch index 683438b3..fdf0ff8a 100644 --- a/src/browser/components/preferences/main-inc-xhtml.patch +++ b/src/browser/components/preferences/main-inc-xhtml.patch @@ -1,8 +1,19 @@ diff --git a/browser/components/preferences/main.inc.xhtml b/browser/components/preferences/main.inc.xhtml -index 3d4035690d38f4d851cc86749ebeec7b7ca9aaf2..e9136a52427d7f3ada87803373f16c20a25b066a 100644 +index fdf515554d67c5082b0d9c73b72533e06a085030..fffba209eb127bd0052bcb0864cc001f1f3c5c75 100644 --- a/browser/components/preferences/main.inc.xhtml +++ b/browser/components/preferences/main.inc.xhtml -@@ -125,6 +125,15 @@ +@@ -61,6 +61,10 @@ + hidden="true"> + + ++ ++ + + +@@ -122,6 +126,15 @@ diff --git a/src/browser/components/preferences/main-js.patch b/src/browser/components/preferences/main-js.patch index da3f0268..7e97d308 100644 --- a/src/browser/components/preferences/main-js.patch +++ b/src/browser/components/preferences/main-js.patch @@ -1,8 +1,8 @@ diff --git a/browser/components/preferences/main.js b/browser/components/preferences/main.js -index ceee50df3743724f1d59cebb0fec244639e65405..8e065ec0aec2ec86ad2d51ccd828afd36cd0e212 100644 +index a4a4ec894115afc70d203661f2b225adeeeaa8fc..304b3303c848fbecbfc20f134819c33b65a387af 100644 --- a/browser/components/preferences/main.js +++ b/browser/components/preferences/main.js -@@ -154,6 +154,11 @@ Preferences.addAll([ +@@ -161,6 +161,11 @@ Preferences.addAll([ // Media { id: "media.hardwaremediakeys.enabled", type: "bool" }, @@ -10,7 +10,7 @@ index ceee50df3743724f1d59cebb0fec244639e65405..8e065ec0aec2ec86ad2d51ccd828afd3 + + // Pulse browser: custom settings + { id: 'pulse.sidebar.enabled', type: 'bool' }, -+ { id: 'pulse.sidebar.extensions.enabled', type: 'bool' } ++ { id: 'pulse.tabs.vertical', type: 'bool' } ]); if (AppConstants.HAVE_SHELL_SERVICE) { 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 7ea0a6bd..1a8fb7d5 100644 --- a/src/browser/locales/en-US/browser/preferences/preferences-ftl.patch +++ b/src/browser/locales/en-US/browser/preferences/preferences-ftl.patch @@ -1,8 +1,8 @@ diff --git a/browser/locales/en-US/browser/preferences/preferences.ftl b/browser/locales/en-US/browser/preferences/preferences.ftl -index b10403800c7aafe97471474f6bddb6098ce21a82..b39593816149a71a1e6b40626e304e367359fd02 100644 +index d7b87eacb425cb277e226261c7d994e084100a5d..277547d122293ade9a6dd9c41640f62a1adc1e16 100644 --- a/browser/locales/en-US/browser/preferences/preferences.ftl +++ b/browser/locales/en-US/browser/preferences/preferences.ftl -@@ -1413,3 +1413,11 @@ httpsonly-radio-disabled = +@@ -1424,3 +1424,11 @@ httpsonly-radio-disabled = desktop-folder-name = Desktop downloads-folder-name = Downloads choose-download-folder-title = Choose Download Folder: @@ -10,7 +10,7 @@ index b10403800c7aafe97471474f6bddb6098ce21a82..b39593816149a71a1e6b40626e304e36 +## Pulse browser: Settings entries localization +preferences-sidebar-header = Sidebar +preferences-sidebar-visible = -+ .label = Show sidebar tabs ++ .label = Show sidebar tabs + -+preferences-sidebar-extensions-visible = -+ .label = Show available extensions on the sidebar ++preferences-vertical-tabs-enabled = ++ .label = Use vertical tabs (Early Access) diff --git a/src/browser/themes/pulse/addons/shared.css b/src/browser/themes/pulse/addons/shared.css index ac843daa..add84f9d 100644 --- a/src/browser/themes/pulse/addons/shared.css +++ b/src/browser/themes/pulse/addons/shared.css @@ -90,11 +90,6 @@ tab.tabbrowser-tab:nth-child(1) { overflow-clip-margin: 8px !important; } -/* #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[multiselected="true"]:-moz-lwtheme, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[selected="true"]:-moz-lwtheme { - -moz-context-properties: fill; - fill: var(--lwt-selected-tab-background-color); -} */ - .tab-background[selected='true']::before, .tab-background[selected='true']::after { content: ''; @@ -135,6 +130,11 @@ tab.tabbrowser-tab:nth-child(1) { border-radius: var(--toolbarbutton-border-radius) !important; } +/* Vertical tab new button stuff */ +#browser #TabsToolbar #new-tab-button { + margin: 8px; +} + /* ========================================================================== */ /* Sidebar tabs */ .sidebar-item-background[checked='true']::before, diff --git a/src/browser/themes/pulse/jar.inc.mn b/src/browser/themes/pulse/jar.inc.mn index f1dd059d..c1923250 100644 --- a/src/browser/themes/pulse/jar.inc.mn +++ b/src/browser/themes/pulse/jar.inc.mn @@ -8,5 +8,6 @@ # to the location of the actual manifest. * skin/classic/browser/pulse/sidebar_tabs.css (../pulse/sidebar_tabs.css) + skin/classic/browser/pulse/vertical_tabs.css (../pulse/vertical_tabs.css) skin/classic/browser/pulse/downloads.css (../pulse/content/downloads.css) skin/classic/browser/addons/shared.css (../pulse/addons/shared.css) diff --git a/src/browser/themes/pulse/vertical_tabs.css b/src/browser/themes/pulse/vertical_tabs.css new file mode 100644 index 00000000..ccb7cfd7 --- /dev/null +++ b/src/browser/themes/pulse/vertical_tabs.css @@ -0,0 +1,83 @@ +/* + * 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/. + */ +#browser #TabsToolbar .titlebar-spacer, +#browser #TabsToolbar .titlebar-buttonbox-container, +#browser #TabsToolbar #alltabs-button { + display: none; +} + +#browser #TabsToolbar { + background-color: -moz-Dialog; + max-width: 350px; +} + +#browser #TabsToolbar:-moz-lwtheme { + background-image: var(--lwt-additional-images); + background-repeat: no-repeat, no-repeat, no-repeat; + background-position: center; + background-size: cover; + + background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)); +} + +#browser #TabsToolbar .tabbrowser-tab { + max-width: unset; + width: 100%; + + /* Stops the tabs from getting squished or stretched */ + min-height: unset; + max-height: var(--tab-min-height); + + /* Animate tabs out vertically */ + transition: min-height 100ms ease-out, max-height 100ms ease-out; +} + +/* Put the new tab button on the bottom */ +#browser #TabsToolbar #TabsToolbar-customization-target { + -moz-box-orient: vertical; + height: 100%; + /* Not sure why, but this forces the scroll box to scroll */ + max-height: 100%; +} + +/* Work around for tab closing animation whilst in vertical tabs. Without this + the clean up code (created by 608589) will not work correctly */ +/* TODO: This causes tabs to stick around for longer and trigger a clean up + function. This isn't that performant, so we should look into fixing it in + the future */ +#browser #TabsToolbar .tabbrowser-tab:not([pinned], [fadein]) { + max-width: 0.1px; + max-height: 0.1px; +} + +#browser #TabsToolbar tab.tabbrowser-tab:nth-child(1) { + margin-left: 0; +} + +/* Border radius up at the top left of the browser when vertical tabs are enabled */ +@media (-moz-gtk-csd-available) { + :root[tabsintitlebar][sizemode='normal']:not([gtktiledwindow='true']) + #navigator-toolbox-background[verticaltabs='true'] + #nav-bar { + border-top-left-radius: env(-moz-gtk-csd-titlebar-radius); + border-top-right-radius: env(-moz-gtk-csd-titlebar-radius); + } +} + +#navigator-toolbox-background:not([verticaltabs='true']) + #nav-bar + .titlebar-buttonbox-container { + display: none; +} + +/* This fixes some consistencies with which buttons should be visible */ +#browser #tabbrowser-arrowscrollbox-periphery { + display: none; +} + +#browser #new-tab-button { + display: inherit !important; +} diff --git a/src/browser/themes/shared/browser-shared-css.patch b/src/browser/themes/shared/browser-shared-css.patch index 9cf002a9..2cec70c8 100644 --- a/src/browser/themes/shared/browser-shared-css.patch +++ b/src/browser/themes/shared/browser-shared-css.patch @@ -1,12 +1,13 @@ diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css -index b3f83092c310fe2378f79d5a07726ad8c215e2a3..c4b32e71b153a02c8505a2f879321c7006fd76a2 100644 +index b3f83092c310fe2378f79d5a07726ad8c215e2a3..d54dba549d4d3808671e03cc7747248186b1abdf 100644 --- a/browser/themes/shared/browser-shared.css +++ b/browser/themes/shared/browser-shared.css -@@ -23,6 +23,8 @@ +@@ -23,6 +23,9 @@ @import url("chrome://browser/skin/customizableui/customizeMode.css"); @import url("chrome://browser/skin/UITour.css"); +@import url("chrome://browser/skin/pulse/sidebar_tabs.css"); ++@import url("chrome://browser/skin/pulse/vertical_tabs.css"); + @namespace html url("http://www.w3.org/1999/xhtml"); diff --git a/yarn.lock b/yarn.lock index 138ab251..62c4484d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -339,10 +339,10 @@ globrex@^0.1.2: resolved "https://registry.yarnpkg.com/globrex/-/globrex-0.1.2.tgz#dd5d9ec826232730cd6793a5e33a9302985e6098" integrity sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg== -gluon-build@^1.0.0-rc.2: - version "1.0.0-rc.2" - resolved "https://registry.yarnpkg.com/gluon-build/-/gluon-build-1.0.0-rc.2.tgz#f2c1a45508df858885823bdb75137afa4755d067" - integrity sha512-BR5Y91tC1NE0RthLYZFYks0FwRMI1p3cK9iVOCHJ1WUflf1lTvtNoHiD9efEsGnhpvAH4uXx1gE2RQovfdG5fw== +gluon-build@^1.0.0-rc.4: + version "1.0.0-rc.4" + resolved "https://registry.yarnpkg.com/gluon-build/-/gluon-build-1.0.0-rc.4.tgz#4f8f5372029932f70a26b4b06110215126f65489" + integrity sha512-vcpbfouLHYqDRC0yyil2baOhSAxYB/XhMXq0FZH7QD6dAoKBj8wVP2Moc3WDyvneED4HxgXoiupGxtbNFdUTog== dependencies: "@resvg/resvg-js" "^1.4.0" async-icns "^1.0.2"