diff --git a/.gitattributes b/.gitattributes index 622b6f29d..83a478f83 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1,2 +1 @@ *.patch linguist-language=C++ -.github/workflows/object/*.tar.gz filter=lfs diff=lfs merge=lfs -text diff --git a/.github/workflows/alpha.yml b/.github/workflows/alpha.yml index d347e6bd0..96139823e 100644 --- a/.github/workflows/alpha.yml +++ b/.github/workflows/alpha.yml @@ -53,7 +53,7 @@ jobs: - name: Bump version if: ${{ github.event.inputs.update_version == 'true' }} run: | - pnpm surfer ci --brand alpha --bump prepatch + pnpm surfer ci --brand alpha --bump prerelease - name: Bump version without new version if: ${{ github.event.inputs.update_version == 'false' }} @@ -317,23 +317,16 @@ jobs: with: submodules: recursive token: ${{ secrets.DEPLOY_KEY }} - lfs: true - name: Git Pull run: | git pull - git lfs pull - uses: actions/download-artifact@v4 - name: List run: find . - - name: Unpack windows build (.tar.gz) - run: | - tar -xvf .github/workflows/object/windows-x64-signed-generic.tar.gz -C . - tar -xvf .github/workflows/object/windows-x64-signed-specific.tar.gz -C . - - name: Clone updates repo uses: actions/checkout@v4 with: @@ -348,8 +341,8 @@ jobs: cp -a ../linux_update_manifest_generic/. updates/ cp -a ../linux_update_manifest_specific/. updates/ - cp -a ../windows-x64-signed-generic/update_manifest/. updates/ - cp -a ../windows-x64-signed-specific/update_manifest/. updates/ + cp -a ../.github/workflows/object/windows-x64-signed-generic/update_manifest/. updates/ + cp -a ../.github/workflows/object/windows-x64-signed-specific/update_manifest/. updates/ cp -a ../macos_update_manifest_aarch64/. updates/ cp -a ../macos_update_manifest_x64/. updates/ @@ -376,16 +369,16 @@ jobs: zen-generic.AppImage.zsync zen-specific.AppImage zen-specific.AppImage.zsync - windows-x64-signed-generic/zen.win-generic.zip - windows-x64-signed-specific/zen.win-specific.zip + .github/workflows/object/windows-x64-signed-generic/zen.win-generic.zip + .github/workflows/object/windows-x64-signed-specific/zen.win-specific.zip linux.mar linux-generic.mar - windows-x64-signed-generic/windows-generic.mar - windows-x64-signed-specific/windows.mar + .github/workflows/object/windows-x64-signed-generic/windows-generic.mar + .github/workflows/object/windows-x64-signed-specific/windows.mar macos-x64.mar macos-aarch64.mar - windows-x64-signed-specific/zen.installer.exe - windows-x64-signed-generic/zen.installer-generic.exe + .github/workflows/object/windows-x64-signed-specific/zen.installer.exe + .github/workflows/object/windows-x64-signed-generic/zen.installer-generic.exe zen.macos-x64.dmg zen.macos-aarch64.dmg diff --git a/.github/workflows/object/windows-x64-signed-generic.tar.gz b/.github/workflows/object/windows-x64-signed-generic.tar.gz deleted file mode 100644 index e4e2794a4..000000000 --- a/.github/workflows/object/windows-x64-signed-generic.tar.gz +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:805f5d9f727596007dc64057d456e87a2648dff596230ca12af6cf48860843fa -size 237797081 diff --git a/.github/workflows/object/windows-x64-signed-generic/update_manifest/browser/WINNT_x86_64-msvc-x64/alpha-generic/update.xml b/.github/workflows/object/windows-x64-signed-generic/update_manifest/browser/WINNT_x86_64-msvc-x64/alpha-generic/update.xml new file mode 100644 index 000000000..fb054ad6c --- /dev/null +++ b/.github/workflows/object/windows-x64-signed-generic/update_manifest/browser/WINNT_x86_64-msvc-x64/alpha-generic/update.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.github/workflows/object/windows-x64-signed-generic/update_manifest/browser/WINNT_x86_64-msvc/alpha-generic/update.xml b/.github/workflows/object/windows-x64-signed-generic/update_manifest/browser/WINNT_x86_64-msvc/alpha-generic/update.xml new file mode 100644 index 000000000..fb054ad6c --- /dev/null +++ b/.github/workflows/object/windows-x64-signed-generic/update_manifest/browser/WINNT_x86_64-msvc/alpha-generic/update.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.github/workflows/object/windows-x64-signed-generic/windows-generic.mar b/.github/workflows/object/windows-x64-signed-generic/windows-generic.mar new file mode 100644 index 000000000..e6585be2f Binary files /dev/null and b/.github/workflows/object/windows-x64-signed-generic/windows-generic.mar differ diff --git a/.github/workflows/object/windows-x64-signed-generic/zen.installer-generic.exe b/.github/workflows/object/windows-x64-signed-generic/zen.installer-generic.exe new file mode 100644 index 000000000..ccb8e7109 Binary files /dev/null and b/.github/workflows/object/windows-x64-signed-generic/zen.installer-generic.exe differ diff --git a/.github/workflows/object/windows-x64-signed-generic/zen.win-generic.zip b/.github/workflows/object/windows-x64-signed-generic/zen.win-generic.zip new file mode 100644 index 000000000..df89ace0b Binary files /dev/null and b/.github/workflows/object/windows-x64-signed-generic/zen.win-generic.zip differ diff --git a/.github/workflows/object/windows-x64-signed-specific.tar.gz b/.github/workflows/object/windows-x64-signed-specific.tar.gz deleted file mode 100644 index 50be1c3b8..000000000 --- a/.github/workflows/object/windows-x64-signed-specific.tar.gz +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:51d3bb5508804e438755658157f0f18331675b418bdb11db485f938a4fc5fd8a -size 237484305 diff --git a/.github/workflows/object/windows-x64-signed-specific/update_manifest/browser/WINNT_x86_64-msvc-x64/alpha/update.xml b/.github/workflows/object/windows-x64-signed-specific/update_manifest/browser/WINNT_x86_64-msvc-x64/alpha/update.xml new file mode 100644 index 000000000..f9974e93f --- /dev/null +++ b/.github/workflows/object/windows-x64-signed-specific/update_manifest/browser/WINNT_x86_64-msvc-x64/alpha/update.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.github/workflows/object/windows-x64-signed-specific/update_manifest/browser/WINNT_x86_64-msvc/alpha/update.xml b/.github/workflows/object/windows-x64-signed-specific/update_manifest/browser/WINNT_x86_64-msvc/alpha/update.xml new file mode 100644 index 000000000..f9974e93f --- /dev/null +++ b/.github/workflows/object/windows-x64-signed-specific/update_manifest/browser/WINNT_x86_64-msvc/alpha/update.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.github/workflows/object/windows-x64-signed-specific/windows.mar b/.github/workflows/object/windows-x64-signed-specific/windows.mar new file mode 100644 index 000000000..2dd8b1319 Binary files /dev/null and b/.github/workflows/object/windows-x64-signed-specific/windows.mar differ diff --git a/.github/workflows/object/windows-x64-signed-specific/zen.installer.exe b/.github/workflows/object/windows-x64-signed-specific/zen.installer.exe new file mode 100644 index 000000000..70d73a035 Binary files /dev/null and b/.github/workflows/object/windows-x64-signed-specific/zen.installer.exe differ diff --git a/.github/workflows/object/windows-x64-signed-specific/zen.win-specific.zip b/.github/workflows/object/windows-x64-signed-specific/zen.win-specific.zip new file mode 100644 index 000000000..c60429b72 Binary files /dev/null and b/.github/workflows/object/windows-x64-signed-specific/zen.win-specific.zip differ diff --git a/README.md b/README.md index a0c112610..91dd1227c 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,24 @@ Zen is built with performance in mind, and we have optimized the browser to be a Zen is available for Linux, macOS, and Windows. You can download the latest version from the official website at [zen-browser.app](https://zen-browser.app/download), or from the [GitHub Releases](https://github.com/zen-browser/desktop/releases) page. +### Windows + +#### Winget + +- Generic + +``` +winget install --id Zen-Team.Zen-Browser +``` + +- Optimized + +``` +winget install --id Zen-Team.Zen-Browser.Optimized +``` + +#### + ### macOS - Requires macOS 10.15 or later diff --git a/build/winsign/sign.ps1 b/build/winsign/sign.ps1 index 62e84fa8a..f50df3da5 100644 --- a/build/winsign/sign.ps1 +++ b/build/winsign/sign.ps1 @@ -28,14 +28,17 @@ function SignAndPackage($name) { $files = Get-ChildItem engine\obj-x86_64-pc-windows-msvc\ -Recurse -Include *.exe $files += Get-ChildItem engine\obj-x86_64-pc-windows-msvc\ -Recurse -Include *.dll - signtool.exe sign /n "$SignIdentity" /t http://time.certum.pl/ /fd sha1 /v $files + signtool.exe sign /n "$SignIdentity" /t http://time.certum.pl/ /fd sha256 /v $files echo "Packaging $name" $env:SURFER_SIGNING_MODE="sign" $env:MAR="$PWD\\build\\winsign\\mar.exe" if ($name -eq "generic") { $env:SURFER_COMPAT="true" + } else { + rm env:SURFER_COMPAT -ErrorAction SilentlyContinue } + echo "Compat Mode? $env:SURFER_COMPAT" pnpm surfer package --verbose # In the release script, we do the following: @@ -67,13 +70,22 @@ function SignAndPackage($name) { # Move the zip mv (Get-Item .\dist\*.en-US.win64.zip) windsign-temp\windows-x64-signed-$name\zen.win-$name.zip + # Extract the zip, sign everything inside, and repackage it + Expand-Archive -Path windsign-temp\windows-x64-signed-$name\zen.win-$name.zip -DestinationPath windsign-temp\windows-x64-signed-$name\zen.win-$name + rm windsign-temp\windows-x64-signed-$name\zen.win-$name.zip + $files = Get-ChildItem windsign-temp\windows-x64-signed-$name\zen.win-$name -Recurse -Include *.exe + $files += Get-ChildItem windsign-temp\windows-x64-signed-$name\zen.win-$name -Recurse -Include *.dll + signtool.exe sign /n "$SignIdentity" /t http://time.certum.pl/ /fd sha256 /v $files + Compress-Archive -Path windsign-temp\windows-x64-signed-$name\zen.win-$name -DestinationPath windsign-temp\windows-x64-signed-$name\zen.win-$name.zip + rmdir windsign-temp\windows-x64-signed-$name\zen.win-$name -Recurse -ErrorAction SilentlyContinue + # Move the manifest - foreach ($file in Get-ChildItem .\dist\update\) { - mv ".\\dist\\update\\$file" windsign-temp\windows-x64-signed-$name\update_manifest - } + mv .\dist\update\. windsign-temp\windows-x64-signed-$name\update_manifest echo "Invoking tar for $name" - tar -czvf .\.github\workflows\object\windows-x64-signed-$name.tar.gz -C .\windsign-temp\windows-x64-signed-$name . + # note: We need to sign it into a parent folder, called windows-x64-signed-$name + rmdir .\.github\workflows\object\windows-x64-signed-$name -Recurse -ErrorAction SilentlyContinue + mv .\windsign-temp\windows-x64-signed-$name .\.github\workflows\object\windows-x64-signed-$name -Force echo "Finished $name" } diff --git a/l10n b/l10n index 39b011023..49d1e57f7 160000 --- a/l10n +++ b/l10n @@ -1 +1 @@ -Subproject commit 39b011023d038fb8bb58eece6113919eb5c52770 +Subproject commit 49d1e57f7bcea61b146034a9b0d5647d7b515d55 diff --git a/package.json b/package.json index 12d94f376..8cf568030 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ }, "homepage": "https://github.com/zen-browser/core#readme", "dependencies": { - "@zen-browser/surfer": "^1.4.18" + "@zen-browser/surfer": "^1.4.20" }, "devDependencies": { "husky": "^9.1.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 106683d80..001eb000b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,8 +9,8 @@ importers: .: dependencies: '@zen-browser/surfer': - specifier: ^1.4.18 - version: 1.4.18 + specifier: ^1.4.20 + version: 1.4.20 devDependencies: husky: specifier: ^9.1.5 @@ -119,8 +119,8 @@ packages: '@types/node@17.0.45': resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==} - '@zen-browser/surfer@1.4.18': - resolution: {integrity: sha512-NFqF5amqa4TuGFk+uVQNY4FngIvyhXvtZdpHUbU8Oeq3nfKE+bsLUHbFz8j9I5sFLQkuHmCsfTtR5gKA5el4YA==} + '@zen-browser/surfer@1.4.20': + resolution: {integrity: sha512-M9+Jax/B+UQsebJ0K3BaNEKUi/EelKufvG2frWQ4uVAQF9LzFwyyliS5wbcUTs3Ufit4b8xQK7ddt02DmK/Lng==} hasBin: true ansi-escapes@7.0.0: @@ -1003,7 +1003,7 @@ snapshots: '@types/node@17.0.45': {} - '@zen-browser/surfer@1.4.18': + '@zen-browser/surfer@1.4.20': dependencies: '@resvg/resvg-js': 1.4.0 async-icns: 1.0.2 diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js index fdbf02435..9b5153e14 100644 --- a/src/browser/app/profile/zen-browser.js +++ b/src/browser/app/profile/zen-browser.js @@ -52,7 +52,7 @@ pref('pdfjs.enableHighlightFloatingButton', true); pref("alerts.showFavicons", true); -pref("browser.tabs.loadBookmarksInTabs", true); +pref("browser.tabs.loadBookmarksInTabs", false); pref('browser.toolbars.bookmarks.visibility', 'never'); // Enable Do Not Track and GPC by default. @@ -73,20 +73,22 @@ pref('zen.welcomeScreen.seen', false); pref('zen.tabs.vertical', true); pref('zen.tabs.vertical.right-side', false); pref('zen.theme.accent-color', "#aac7ff"); -pref('zen.theme.border-radius', 10); // In pixels -pref('zen.theme.content-element-separation', 4); // In pixels +pref('zen.theme.border-radius', 5); // In pixels +pref('zen.theme.content-element-separation', 8); // In pixels pref('zen.theme.toolbar-themed', true); pref('zen.theme.pill-button', false); pref('zen.view.compact', false); -pref('zen.view.compact.hide-toolbar', false); pref('zen.theme.color-prefs.amoled', false); pref('zen.theme.color-prefs.colorful', false); +pref('zen.view.compact.hide-tabbar', true); +pref('zen.view.compact.hide-toolbar', false); pref('zen.view.compact.toolbar-flash-popup', true); pref('zen.view.compact.toolbar-flash-popup.duration', 800); +pref('zen.view.compact.toolbar-hide-after-hover.duration', 1000); -pref('zen.view.sidebar-height-throttle', 500); // in ms +pref('zen.view.sidebar-height-throttle', 200); // in ms pref('zen.view.sidebar-expanded', false); pref('zen.view.sidebar-expanded.on-hover', false); pref('zen.view.sidebar-expanded.show-button', true); @@ -99,7 +101,6 @@ pref('zen.keyboard.shortcuts', ""); // Empty string means default shortcuts pref('zen.keyboard.shortcuts.disable-firefox', false); pref('zen.tabs.dim-pending', true); pref('zen.themes.updated-value-observer', false); -pref('zen.themes.tabs.legacy-location', false); // Pref to enable the new profiles (TODO: Check this out!) //pref("browser.profiles.enabled", true); @@ -117,6 +118,7 @@ pref('zen.splitView.min-resize-width', 7); pref('zen.workspaces.enabled', true); pref('zen.workspaces.hide-default-container-indicator', true); pref('zen.workspaces.individual-pinned-tabs', true); +pref('zen.workspaces.show-icon-strip', true); pref('zen.workspaces.icons', '["🌐", "📁", "📎", "📝", "📅", "📊"]'); // Zen Watermark @@ -196,10 +198,14 @@ pref("widget.non-native-theme.use-theme-accent", true); pref("privacy.resistFingerprinting.letterboxing", false); pref("privacy.resistFingerprinting.letterboxing.dimensions", ""); +// Remove Inspect Accessibity Properties menu +pref("devtools.accessibility.enabled", false); + // Enable GPU by default pref('gfx.webrender.all', true); pref('layers.acceleration.force-enabled', true); pref('media.ffmpeg.vaapi.enabled', true); +pref('media.ffmpeg.encoder.enabled', true); pref("media.hardware-video-decoding.enabled", true); -pref("gfx.canvas.accelerated", true); \ No newline at end of file +pref("gfx.canvas.accelerated", true); diff --git a/src/browser/base/content/ZenStartup.mjs b/src/browser/base/content/ZenStartup.mjs index b956e7b71..11014c1e7 100644 --- a/src/browser/base/content/ZenStartup.mjs +++ b/src/browser/base/content/ZenStartup.mjs @@ -40,6 +40,8 @@ // Disable smooth scroll gBrowser.tabContainer.arrowScrollbox.smoothScroll = false; + ZenWorkspaces.init(); + gZenUIManager.init(); gZenVerticalTabsManager.init(); gZenCompactModeManager.init(); gZenKeyboardShortcuts.init(); @@ -66,7 +68,7 @@ tabs.style.maxHeight = '0px'; // reset to 0 const toolbarRect = toolbarItems.getBoundingClientRect(); // -5 for the controls padding - let totalHeight = toolbarRect.height - 15; + let totalHeight = toolbarRect.height - 5; // remove the height from other elements that aren't hidden const otherElements = document.querySelectorAll('#tabbrowser-tabs > *:not([hidden="true"])'); for (let tab of otherElements) { @@ -75,14 +77,6 @@ } tabs.style.maxHeight = totalHeight + 'px'; //console.info('ZenThemeModifier: set tabs max-height to', totalHeight + 'px'); - - const allTabs = document.getElementById('alltabs-button'); - allTabs.removeAttribute('hidden'); - allTabs.removeAttribute('badged'); - allTabs.setAttribute('class', 'toolbarbutton-1 zen-sidebar-action-button'); - document.getElementById('zen-sidebar-icons-wrapper').prepend( - allTabs - ); }, openWatermark() { @@ -107,10 +101,6 @@ _changeSidebarLocation() { const legacyLocation = Services.prefs.getBoolPref('zen.themes.tabs.legacy-location', false); const kElementsToAppend = ['sidebar-splitter', 'sidebar-box']; - if (legacyLocation) { - kElementsToAppend.push('navigator-toolbox'); - window.document.documentElement.setAttribute('zen-sidebar-legacy', 'true'); - } const wrapper = document.getElementById('zen-tabbox-wrapper'); const appWrapepr = document.getElementById('zen-sidebar-box-container'); for (let id of kElementsToAppend) { @@ -123,9 +113,7 @@ const browser = document.getElementById('browser'); const toolbox = document.getElementById('navigator-toolbox'); - if (!legacyLocation) { - browser.prepend(toolbox); - } + browser.prepend(toolbox); // remove all styles except for the width, since we are xulstoring the complet style list const width = toolbox.style.width; @@ -139,6 +127,102 @@ splitter.setAttribute('resizebefore', 'sibling'); splitter.setAttribute('resizeafter', 'none'); toolbox.insertAdjacentElement('afterend', splitter); + + this._addSidebarButtons(); + this._hideToolbarButtons(); + }, + + _moveWindowButtons() { + const windowControls = document.getElementsByClassName('titlebar-buttonbox-container')[0]; + const toolboxIcons = document.getElementById('zen-sidebar-top-buttons-customization-target'); + if (AppConstants.platform === "macosx") { + toolboxIcons.prepend(windowControls); + } + }, + + _hideToolbarButtons() { + const elementsToHide = [ + 'alltabs-button', + ]; + for (let id of elementsToHide) { + const elem = document.getElementById(id); + if (elem) { + elem.setAttribute('hidden', 'true'); + } + } + }, + + _addSidebarButtons() { + const sidebarBox = window.MozXULElement.parseXULToFragment(` + + + + + + + `); + document.getElementById('navigator-toolbox').prepend(sidebarBox); + const sideBarTopButtons = document.getElementById('zen-sidebar-top-buttons') + .querySelector('#zen-sidebar-top-buttons-customization-target'); + + const newTab = document.getElementById('vertical-tabs-newtab-button'); + newTab.classList.add('zen-sidebar-action-button'); + + setTimeout(() => { + CustomizableUI.registerArea( + "zen-sidebar-top-buttons", + { + type: CustomizableUI.TYPE_TOOLBAR, + defaultPlacements: [ + "PanelUI-menu-button", "zen-expand-sidebar-button", "zen-profile-button" + ], + defaultCollapsed: null, + } + ); + CustomizableUI.registerToolbarNode( + document.getElementById('zen-sidebar-top-buttons') + ); + + const panelMenu = document.getElementById('PanelUI-menu-button'); + panelMenu.classList.add('zen-sidebar-action-button'); + panelMenu.setAttribute('cui-areatype', 'toolbar'); + + sideBarTopButtons.prepend(panelMenu); + + const defaultSidebarIcons = [ + 'zen-sidepanel-button', + 'zen-workspaces-button', + 'new-tab-button' + ]; + for (let id of defaultSidebarIcons) { + const elem = document.getElementById(id); + if (id === 'zen-workspaces-button' || !elem) continue; + elem.setAttribute('removable', 'true'); + } + CustomizableUI.registerArea( + "zen-sidebar-icons-wrapper", + { + type: CustomizableUI.TYPE_TOOLBAR, + defaultPlacements: defaultSidebarIcons, + defaultCollapsed: null, + } + ); + CustomizableUI.registerToolbarNode( + document.getElementById('zen-sidebar-icons-wrapper') + ); + + this._moveWindowButtons(); + }, 100); }, _focusSearchBar() { diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs index 40d87ef70..52d455be3 100644 --- a/src/browser/base/content/ZenUIManager.mjs +++ b/src/browser/base/content/ZenUIManager.mjs @@ -1,4 +1,12 @@ var gZenUIManager = { + _popupTrackingElements: [], + + init () { + + document.addEventListener('popupshowing', this.onPopupShowing.bind(this)); + document.addEventListener('popuphidden', this.onPopupHidden.bind(this)); + }, + openAndChangeToTab(url, options) { if (window.ownerGlobal.parent) { let tab = window.ownerGlobal.parent.gBrowser.addTrustedTab(url, options); @@ -24,6 +32,46 @@ var gZenUIManager = { createValidXULText(text) { return text.replace(/&/g, '&').replace(//g, '>'); }, + + /** + * Adds the 'has-popup-menu' attribute to the element when popup is opened on it. + * @param element element to track + */ + addPopupTrackingAttribute(element) { + this._popupTrackingElements.push(element); + }, + + removePopupTrackingAttribute(element) { + this._popupTrackingElements.remove(element); + }, + + onPopupShowing(showEvent) { + for (const el of this._popupTrackingElements) { + if (!el.contains(event.explicitOriginalTarget)) { + continue; + } + document.removeEventListener('mousemove', this.__removeHasPopupAttribute); + el.setAttribute('has-popup-menu', ''); + this.__currentPopup = showEvent.target; + this.__currentPopupTrackElement = el; + break; + } + }, + + onPopupHidden(hideEvent) { + if (!this.__currentPopup || this.__currentPopup !== hideEvent.target) { + return; + } + const element = this.__currentPopupTrackElement; + if (document.getElementById('main-window').matches(':hover')) { + element.removeAttribute('has-popup-menu'); + } else { + this.__removeHasPopupAttribute = () => element.removeAttribute('has-popup-menu'); + document.addEventListener('mousemove', this.__removeHasPopupAttribute, {once: true}); + } + this.__currentPopup = null; + this.__currentPopupTrackElement = null; + }, }; var gZenVerticalTabsManager = { @@ -33,6 +81,7 @@ var gZenVerticalTabsManager = { Services.prefs.addObserver('zen.tabs.vertical.right-side', updateEvent); Services.prefs.addObserver('zen.view.sidebar-expanded.max-width', updateEvent); Services.prefs.addObserver('zen.view.sidebar-expanded.on-hover', updateEvent); + gZenCompactModeManager.addEventListener(updateEvent); this._updateEvent(); this.initRightSideOrderContextMenu(); }, @@ -72,16 +121,33 @@ var gZenVerticalTabsManager = { _updateEvent() { this._updateMaxWidth(); - if (Services.prefs.getBoolPref('zen.view.sidebar-expanded')) { - this.navigatorToolbox.setAttribute('zen-expanded', 'true'); - } else { - this.navigatorToolbox.removeAttribute('zen-expanded'); - } + const topButtons = document.getElementById('zen-sidebar-top-buttons'); + const customizationTarget = document.getElementById('nav-bar-customization-target'); + const tabboxWrapper = document.getElementById('zen-tabbox-wrapper'); + const browser = document.getElementById('browser'); if (Services.prefs.getBoolPref('zen.tabs.vertical.right-side')) { this.navigatorToolbox.setAttribute('zen-right-side', 'true'); } else { this.navigatorToolbox.removeAttribute('zen-right-side'); } + if (Services.prefs.getBoolPref('zen.view.sidebar-expanded')) { + this.navigatorToolbox.setAttribute('zen-expanded', 'true'); + } else { + this.navigatorToolbox.removeAttribute('zen-expanded'); + } + + if (this.navigatorToolbox.hasAttribute('zen-expanded') && !this.navigatorToolbox.hasAttribute('zen-right-side') + && !Services.prefs.getBoolPref('zen.view.compact') && !Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover')) { + this.navigatorToolbox.prepend(topButtons); + browser.prepend(this.navigatorToolbox); + } else { + customizationTarget.prepend(topButtons); + tabboxWrapper.prepend(this.navigatorToolbox); + } + + // Always move the splitter next to the sidebar + this.navigatorToolbox.after(document.getElementById('zen-sidebar-splitter')); + this._updateOnHoverVerticalTabs(); }, @@ -126,68 +192,3 @@ var gZenVerticalTabsManager = { Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', false); }, }; - -var gZenCompactModeManager = { - _flashSidebarTimeout: null, - - init() { - Services.prefs.addObserver('zen.view.compact', this._updateEvent.bind(this)); - Services.prefs.addObserver('zen.view.compact.toolbar-flash-popup.duration', this._updatedSidebarFlashDuration.bind(this)); - }, - - get prefefence() { - return Services.prefs.getBoolPref('zen.view.compact'); - }, - - set preference(value) { - Services.prefs.setBoolPref('zen.view.compact', value); - }, - - _updateEvent() { - Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', false); - }, - - toggle() { - this.preference = !this.prefefence; - }, - - _updatedSidebarFlashDuration() { - this._flashSidebarDuration = Services.prefs.getIntPref('zen.view.compact.toolbar-flash-popup.duration'); - }, - - toggleSidebar() { - let sidebar = document.getElementById('navigator-toolbox'); - sidebar.toggleAttribute('zen-user-show'); - }, - - get flashSidebarDuration() { - if (this._flashSidebarDuration) { - return this._flashSidebarDuration; - } - return Services.prefs.getIntPref('zen.view.compact.toolbar-flash-popup.duration'); - }, - - flashSidebar() { - let sidebar = document.getElementById('navigator-toolbox'); - let tabPanels = document.getElementById('tabbrowser-tabpanels'); - if (sidebar.matches(':hover') || tabPanels.matches("[zen-split-view='true']")) { - return; - } - if (this._flashSidebarTimeout) { - clearTimeout(this._flashSidebarTimeout); - } else { - window.requestAnimationFrame(() => sidebar.setAttribute('flash-popup', '')); - } - this._flashSidebarTimeout = setTimeout(() => { - window.requestAnimationFrame(() => { - sidebar.removeAttribute('flash-popup'); - this._flashSidebarTimeout = null; - }); - }, this.flashSidebarDuration); - }, - - toggleToolbar() { - let toolbar = document.getElementById('zen-appcontent-navbar-container'); - toolbar.toggleAttribute('zen-user-show'); - }, -}; diff --git a/src/browser/base/content/zen-assets.inc.xhtml b/src/browser/base/content/zen-assets.inc.xhtml index 88e141bc5..41068665d 100644 --- a/src/browser/base/content/zen-assets.inc.xhtml +++ b/src/browser/base/content/zen-assets.inc.xhtml @@ -26,7 +26,9 @@ \ No newline at end of file + diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn index a75e0cc28..3e828a6b1 100644 --- a/src/browser/base/content/zen-assets.jar.inc.mn +++ b/src/browser/base/content/zen-assets.jar.inc.mn @@ -3,7 +3,9 @@ content/browser/zenThemeModifier.js (content/zenThemeModifier.js) content/browser/ZenStartup.mjs (content/ZenStartup.mjs) content/browser/ZenUIManager.mjs (content/ZenUIManager.mjs) + content/browser/zen-components/ZenCompactMode.mjs (content/zen-components/src/ZenCompactMode.mjs) content/browser/zen-components/ZenViewSplitter.mjs (content/zen-components/src/ZenViewSplitter.mjs) + content/browser/zen-components/ZenThemesCommon.mjs (content/zen-components/src/ZenThemesCommon.mjs) content/browser/zen-components/ZenWorkspaces.mjs (content/zen-components/src/ZenWorkspaces.mjs) content/browser/zen-components/ZenSidebarManager.mjs (content/zen-components/src/ZenSidebarManager.mjs) content/browser/zen-components/ZenProfileDialogUI.mjs (content/zen-components/src/ZenProfileDialogUI.mjs) diff --git a/src/browser/base/content/zen-components b/src/browser/base/content/zen-components index b9c35455a..e14fbd8e5 160000 --- a/src/browser/base/content/zen-components +++ b/src/browser/base/content/zen-components @@ -1 +1 @@ -Subproject commit b9c35455ad1a299cdb9202dba15c8e1dc3780191 +Subproject commit e14fbd8e5c069abf1717e674712229c67b80d461 diff --git a/src/browser/base/content/zen-sidebar-icons.inc.xhtml b/src/browser/base/content/zen-sidebar-icons.inc.xhtml index 4b8522959..bb019bbf9 100644 --- a/src/browser/base/content/zen-sidebar-icons.inc.xhtml +++ b/src/browser/base/content/zen-sidebar-icons.inc.xhtml @@ -1,9 +1,11 @@ - - - - - - - - + + \ No newline at end of file diff --git a/src/browser/base/content/zen-sidebar-panel.inc.xhtml b/src/browser/base/content/zen-sidebar-panel.inc.xhtml index aed10e105..4330ef51f 100644 --- a/src/browser/base/content/zen-sidebar-panel.inc.xhtml +++ b/src/browser/base/content/zen-sidebar-panel.inc.xhtml @@ -1,4 +1,4 @@ - + - + diff --git a/src/browser/base/content/zen-styles/zen-animations.css b/src/browser/base/content/zen-styles/zen-animations.css index 0e2c48ac7..040918170 100644 --- a/src/browser/base/content/zen-styles/zen-animations.css +++ b/src/browser/base/content/zen-styles/zen-animations.css @@ -35,7 +35,7 @@ @keyframes zen-slide-in { from { - transform: translateX(-10px); + transform: translateX(-30px); opacity: 0; } to { @@ -94,7 +94,7 @@ @keyframes zen-vtabs-animation { 0% { opacity: 0; - transform: translateX(-5px); + transform: translateX(-10px); } 20% { @@ -109,7 +109,7 @@ @keyframes zen-sidebar-panel-animation-right { 0% { opacity: 0; - transform: translateX(5px); + transform: translateX(10px); } 20% { @@ -136,3 +136,33 @@ display: none !important; } } + +@keyframes zen-workspaces-button-active { + from { + bottom: -20px; + } + + to { + bottom: -2px; + } +} + +@keyframes zen-workspaces-button-active-collapsed-left { + from { + left: -20px; + } + + to { + left: -2px; + } +} + +@keyframes zen-workspaces-button-active-collapsed-right { + from { + right: -20px; + } + + to { + right: -2px; + } +} diff --git a/src/browser/base/content/zen-styles/zen-browser-container.css b/src/browser/base/content/zen-styles/zen-browser-container.css index eedc6025c..e7bf4d44d 100644 --- a/src/browser/base/content/zen-styles/zen-browser-container.css +++ b/src/browser/base/content/zen-styles/zen-browser-container.css @@ -5,19 +5,10 @@ transform: translate3d(0, 0, 0); position: relative; - /* This fixes an issue with the left border */ - --zen-webview-correction-margin: 2px; - margin-left: var(--zen-webview-correction-margin); - - #browser:has(#navigator-toolbox[zen-right-side="true"]) & { - margin-left: 0; - margin-right: var(--zen-webview-correction-margin); - } - --uc-tweak-rounded-corners-shadow-color: var(--zen-colors-border); --uc-tweak-rounded-corners-shadow: - 0 0 1px 1px var(--uc-tweak-rounded-corners-shadow-color); + 0 0 0 1px var(--uc-tweak-rounded-corners-shadow-color); box-shadow: var(--uc-tweak-rounded-corners-shadow) !important; @@ -32,7 +23,7 @@ * same shadow from the browser window on top. */ box-shadow: var(--uc-tweak-rounded-corners-shadow, 0 0 transparent), - 0 0 0 16px var(--zen-themed-toolbar-bg) !important; + 0 0 0 16px var(--zen-main-browser-background) !important; clip-path: inset(0); pointer-events: none; } diff --git a/src/browser/base/content/zen-styles/zen-browser-ui.css b/src/browser/base/content/zen-styles/zen-browser-ui.css index ff17a92f5..1811dee7f 100644 --- a/src/browser/base/content/zen-styles/zen-browser-ui.css +++ b/src/browser/base/content/zen-styles/zen-browser-ui.css @@ -10,13 +10,22 @@ --inactive-titlebar-opacity: 1; } -:root:not([inDOMFullscreen='true']) #tabbrowser-tabpanels { - padding-right: var(--zen-element-separation); - padding-bottom: var(--zen-element-separation); +:root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) { + & #tabbrowser-tabpanels { + padding-right: var(--zen-element-separation); + padding-bottom: var(--zen-element-separation); - #browser:has(#navigator-toolbox[zen-right-side="true"]) & { - padding-right: 0; - padding-left: var(--zen-element-separation); + #browser:has(#navigator-toolbox[zen-right-side="true"]) & { + padding-right: 0; + padding-left: var(--zen-element-separation); + } + } +} + +:root:is([inDOMFullscreen='true'], [chromehidden~='location'], [chromehidden~='toolbar']) { + #navigator-toolbox, + #zen-sidebar-splitter { + display: none; } } @@ -24,11 +33,11 @@ width: 100%; } -:not([inDOMFullscreen='true']) #appcontent { +:root:not([inDOMFullscreen='true']) #appcontent { overflow: hidden; } -:not([inDOMFullscreen='true']) #appcontent, +:root:not([inDOMFullscreen='true']) #appcontent, #sidebar-box { /** Sidebar is already hidden in full screen mode */ border: none; @@ -41,4 +50,5 @@ #tabbrowser-tabbox { display: flex; flex-direction: row; + padding: 1px; /* To allow the web view's shadow to be visible */ } diff --git a/src/browser/base/content/zen-styles/zen-compact-mode.css b/src/browser/base/content/zen-styles/zen-compact-mode.css index 1a96b5acc..2004ee89c 100644 --- a/src/browser/base/content/zen-styles/zen-compact-mode.css +++ b/src/browser/base/content/zen-styles/zen-compact-mode.css @@ -7,214 +7,115 @@ } @media (-moz-bool-pref: 'zen.view.compact') { - :root[sizemode='fullscreen'], - #navigator-toolbox[inFullscreen] { - margin-top: 0 !important; - } + :root:not([customizing]) { + @media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') { + #zen-sidebar-web-panel-wrapper { + margin-left: calc(var(--zen-sidebar-web-panel-spacing) * 2) !important; + } - #nav-bar { - padding-left: 5px !important; - } + #zen-sidebar-top-buttons-customization-target { + padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important; + } - #navigator-toolbox { - --zen-compact-toolbox-margin-single: calc(var(--zen-element-separation) * 2); - --zen-compact-toolbox-margin: var(--zen-compact-toolbox-margin-single); - position: absolute; - display: block; - transition: 200ms ease-in-out !important; - transform: translateX(calc(-100% + (var(--zen-compact-toolbox-margin-single) / 2))); - opacity: 0; - line-height: 0; - z-index: 2; - height: 100%; - margin: 0; - padding: var(--zen-compact-toolbox-margin) !important; + /* Set the extra paddings */ + #tabbrowser-tabpanels { + #browser:has(#navigator-toolbox[zen-right-side='true']) & { + padding-right: var(--zen-element-separation); + } - & #titlebar { - border: 1px solid var(--zen-colors-border); - transition-delay: 200ms; - background: var(--zen-colors-tertiary) !important; - padding: var(--zen-toolbox-padding); - border-radius: var(--zen-panel-radius); - } + #browser:has(#navigator-toolbox:not([zen-right-side='true'])) & { + padding-left: var(--zen-element-separation); + } + } - & > * { - pointer-events: none; - } + #zen-sidebar-splitter { + display: none !important; + } - &, - & #titlebar { - min-width: var(--zen-toolbox-min-width) !important; - } - } + #navigator-toolbox { + position: absolute; + height: 98%; + z-index: 9; + background: var(--zen-themed-toolbar-bg) !important; + box-shadow: 0 0 2px 2px rgba(0,0,0,.1); + border-top-right-radius: var(--zen-border-radius); + border-bottom-right-radius: var(--zen-border-radius); + border: 1px solid var(--zen-colors-border); + border-left-width: 0; + padding: var(--zen-toolbox-padding) !important; + transition: all 0.2s ease-in-out; + right: calc(100% - var(--zen-element-separation) + 1px); + top: 50%; + opacity: 0; - @media not (-moz-bool-pref: 'zen.view.sidebar-expanded') { - #navigator-toolbox { - width: fit-content !important; - --zen-toolbox-max-width: calc(50px + var(--zen-compact-toolbox-margin-single) * 2) !important; - } - } + transform: translate3d(0, -50%, 0); - @media (-moz-bool-pref: 'zen.view.sidebar-expanded') { - #navigator-toolbox { - min-width: calc(var(--zen-navigation-toolbar-min-width) + var(--zen-compact-toolbox-margin-single) * 2) !important; - } - } + #browser:has(#navigator-toolbox[zen-right-side='true']) & { + border-left-width: 1px; + border-right-width: 0; - #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[hidden='true'])), - #sidebar-box:not([positionend='true']) { - margin-right: 0 !important; - margin-left: var(--zen-sidebar-web-panel-spacing) !important; - } + left: calc(100% - var(--zen-element-separation) - 1px); + right: unset; - #sidebar-box[positionend='true'] { - margin-left: 0 !important; - margin-right: var(--zen-sidebar-web-panel-spacing) !important; - } + border-top-left-radius: var(--zen-border-radius); + border-bottom-left-radius: var(--zen-border-radius); - #sidebar-splitter { - margin: 0 !important; - } - - @media not (-moz-bool-pref: 'zen.view.compact.hide-toolbar') { - #navigator-toolbox { - /* Remove the top margin */ - /* The toolbox isn't relative to the webview anymore, meaning we can't just add a static value and call it a day... - * The top margin is calculated by taking the following factors into account: - * 1. Element separation - * 2. Extra margin to separate from the webview - * 3. Add element separation variable, to avoid overlaping with the toolbar - * 4. Calculate toolbar height, taken from zen-urlbar.css - */ - --zen-compact-toolbox-margin: calc( - var(--zen-compact-toolbox-margin-single) + 0.15rem + var(--zen-element-separation) + - (18px + (var(--toolbarbutton-inner-padding) * 2)) - ) - var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single) - var(--zen-compact-toolbox-margin-single); - - :root[zen-sidebar-legacy='true'] & { - --zen-compact-toolbox-margin: calc(var(--zen-compact-toolbox-margin-single) / 2) - var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single) - var(--zen-compact-toolbox-margin-single); + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + + #navigator-toolbox:hover, + #navigator-toolbox[zen-has-hover], + #navigator-toolbox:focus-within, + #navigator-toolbox[zen-user-show], + #navigator-toolbox[flash-popup], + #navigator-toolbox[has-popup-menu], + #navigator-toolbox[movingtab], + #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox, + #navigator-toolbox:has(.tabbrowser-tab:active), + #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) { + opacity: 1; + + transform: translate3d(calc(100% - var(--zen-element-separation)), -50%, 0); + #browser:has(#navigator-toolbox[zen-right-side='true']) & { + transform: translate3d(calc(-100% + var(--zen-element-separation)), -50%, 0); + } } } - #zen-sidebar-web-panel-wrapper, - #sidebar-box { - margin-top: 0 !important; - } - } + @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') { + #tabbrowser-tabpanels { + padding-top: var(--zen-element-separation) !important; + } - #navigator-toolbox:hover, - #navigator-toolbox:focus-within, - #navigator-toolbox[zen-user-show], - #navigator-toolbox[flash-popup], - #navigator-toolbox[movingtab], - #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox, - #navigator-toolbox:has(.tabbrowser-tab:active), - #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) { - transform: none !important; - opacity: 1; + #zen-appcontent-navbar-container { + position: absolute; + top: 0; + transform: translateY(calc(-100% + var(--zen-element-separation) + 1px)); + left: 0; + z-index: 10; + background: var(--zen-themed-toolbar-bg); + box-shadow: 0 0 2px 2px rgba(0,0,0,.1) !important; + border-bottom-left-radius: var(--zen-border-radius); + border-bottom-right-radius: var(--zen-border-radius); + border: 1px solid var(--zen-colors-border); + border-top-width: 0px; + transition: all 0.2s ease-in-out; + width: 100%; + opacity: 0; + } - & > * { - pointer-events: all; - } - } + #zen-appcontent-navbar-container:hover, + #zen-appcontent-navbar-container[zen-has-hover], + #zen-appcontent-navbar-container:focus-within, + #zen-appcontent-navbar-container[zen-user-show], + #zen-appcontent-navbar-container[has-popup-menu], + #zen-appcontent-navbar-container:has(*[open='true']) { + opacity: 1; + border-top-width: 1px; - #navigator-toolbox > * { - line-height: normal; - } - - #navigator-toolbox, - #navigator-toolbox > * { - -moz-appearance: none !important; - } - - #zen-sidebar-splitter { - display: none !important; - } - - /* Don't apply transform before window has been fully created */ - :root:not([sessionrestored]) #navigator-toolbox { - transform: none !important; - } - - :root[customizing] #navigator-toolbox { - position: relative !important; - transform: none !important; - opacity: 1 !important; - } - - #navigator-toolbox[inFullscreen] > #PersonalToolbar, - #PersonalToolbar[collapsed='true'] { - display: none; - } - - :root:not([inDOMFullscreen='true']) #tabbrowser-tabbox #tabbrowser-tabpanels { - padding-left: var(--zen-element-separation) !important; - } - - #zen-appcontent-navbar-container { - z-index: 2; - } - - @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') { - #zen-appcontent-navbar-container { - --urlbar-height: unset; - transition: 0.2s ease-in-out; - transform: translateY(calc(-100% + var(--zen-element-separation))); - opacity: 0; - position: absolute; - width: 100%; - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; - border-top-left-radius: env(-moz-gtk-csd-titlebar-radius); - border-top-right-radius: env(-moz-gtk-csd-titlebar-radius); - border-bottom: 1px solid var(--zen-colors-border); - top: 0; - background: var(--zen-colors-tertiary); - transition: 0.2s ease-in-out; - } - - #zen-appcontent-navbar-container:hover, - #zen-appcontent-navbar-container:focus-within, - #zen-appcontent-navbar-container:active, - #zen-appcontent-navbar-container[zen-user-show], - #mainPopupSet:has(> #appMenu-popup:hover) ~ #zen-appcontent-navbar-container, - #zen-appcontent-navbar-container:has(*[open='true']) { - transform: translateY(0); - opacity: 1; - } - - :root:not([inDOMFullscreen='true']) #tabbrowser-tabpanels { - padding-top: var(--zen-element-separation) !important; - } - - #zen-sidebar-web-panel-wrapper { - margin-top: 10px !important; - } - } - - #navigator-toolbox[zen-right-side='true'] { - & { - right: 0 !important; - transform: translateX(calc(100% - (var(--zen-compact-toolbox-margin-single) / 2))) !important; - } - - &:hover, - &:focus-within, - &[zen-user-show], - &[flash-popup], - &[movingtab], - &:has(.tabbrowser-tab:active), - & #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox, - &:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) { - transform: none !important; - opacity: 1; - - & > * { - pointer-events: all; + transform: translateY(-1px); } } } diff --git a/src/browser/base/content/zen-styles/zen-sidebar-panels.css b/src/browser/base/content/zen-styles/zen-sidebar-panels.css index 3ad381252..59f288cda 100644 --- a/src/browser/base/content/zen-styles/zen-sidebar-panels.css +++ b/src/browser/base/content/zen-styles/zen-sidebar-panels.css @@ -68,12 +68,16 @@ } #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) { - margin: var(--zen-appcontent-separator-from-window); position: absolute; z-index: 1; width: -moz-available; - padding: var(--zen-sidebar-web-panel-spacing); - height: calc(100% - var(--zen-element-separation)); + margin: var(--zen-sidebar-web-panel-spacing); + /* Why times 3? + * + 1 for the top margin, making the element overflow the view. + * + 1 for the margin we want to add at the bottom + * + 1 so that the panel can be correctly spaced from the border of the webview + */ + height: calc(100% - var(--zen-sidebar-web-panel-spacing) * 3); } #zen-sidebar-web-panel { @@ -147,6 +151,7 @@ position: absolute; z-index: 1; animation: zen-sidebar-panel-animation-2 0.15s ease-in-out forwards; + max-height: 100%; } #zen-sidebar-web-panel[hidden='true'][pinned='true'] { diff --git a/src/browser/base/content/zen-styles/zen-sidebar.css b/src/browser/base/content/zen-styles/zen-sidebar.css index d06af38a8..d607850ce 100644 --- a/src/browser/base/content/zen-styles/zen-sidebar.css +++ b/src/browser/base/content/zen-styles/zen-sidebar.css @@ -10,12 +10,35 @@ toolbar { align-items: center; list-style-image: var(--avatar-image-url); position: relative; + border-radius: var(--tab-border-radius); + + width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important; + height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important; & image { + border-radius: 999px; display: flex; justify-content: center; align-items: center; - padding: 8px; + height: calc(var(--toolbarbutton-inner-padding) + 10px); + width: calc(var(--toolbarbutton-inner-padding) + 10px); + padding: 0; + + margin: 0 var(--toolbarbutton-inner-padding) !important; + } + + &:hover { + background-color: var(--toolbarbutton-hover-background); + + & image { + background: transparent !important; + } + } +} + +@media not (-moz-bool-pref: 'zen.view.sidebar-expanded.show-button') { + #zen-expand-sidebar-button { + display: none !important; } } @@ -54,3 +77,8 @@ toolbar { } } } + +/* Menubar */ +#toolbar-menubar { + display: none !important; +} diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css index 9b9ce8bed..757dcc80c 100644 --- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css +++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css @@ -8,9 +8,17 @@ height: 100%; } + #TabsToolbar > * { + justify-content: center; + + } + + #private-browsing-indicator-with-label { + display: none !important; + } + #browser { --zen-toolbox-padding: 5px; - --zen-toolbox-top-align: var(--zen-toolbox-padding); } #navigator-toolbox { @@ -18,30 +26,68 @@ --tab-border-radius: var(--border-radius-medium); --zen-toolbox-min-width: 1px; + --tab-hover-background-color: var(--toolbarbutton-hover-background) !important; + min-width: var(--zen-toolbox-min-width); padding: var(--zen-toolbox-padding); padding-top: var(--zen-toolbox-top-align); + padding-bottom: var(--zen-element-separation); + + display: flex; } #TabsToolbar-customization-target { - gap: var(--zen-toolbox-padding); + position: relative; + gap: 0; + &::after { + content: ''; + display: block; + height: 1px; + background: color-mix(in srgb, var(--zen-colors-border) 70%, transparent 30%); + margin: 0 auto; + width: 80%; + left: 50%; + transform: translateX(-50%); + position: absolute; + bottom: calc(-1 * var(--zen-toolbox-padding)); + } + + & > * { + border-top-width: 0 !important; + } + } + + #vertical-tabs-newtab-button { + &:hover, &:not(:is(:hover, :active)) .toolbarbutton-icon { + background: transparent !important; + } } #tabbrowser-tabs { margin-inline-start: 0 !important; padding-inline-start: 0 !important; - grid-gap: 2px !important; - border-bottom: 1px solid var(--zen-colors-border) !important; + position: relative; + border-bottom: 0px solid transparent !important; --tab-block-margin: 2px; + grid-gap: 0 !important; & .tabbrowser-tab { + animation: zen-slide-in 0.2s; + max-width: unset !important; padding: 0 !important; + position: relative; + + height: calc(var(--tab-min-height) + var(--tab-block-margin) * 2) !important; + min-height: calc(var(--tab-min-height) + var(--tab-block-margin) * 2) !important; + + border-radius: var(--border-radius-medium); + & .tab-background { overflow: hidden; @@ -61,30 +107,22 @@ #zen-sidebar-icons-wrapper { background: transparent; + padding: 0; + gap: 5px; + align-items: center; - & toolbarbutton { - width: fit-content; + & > toolbarbutton:not(#zen-workspaces-button) { padding: 0 !important; } } #newtab-button-container { - margin-inline-end: 0 !important; - padding-top: 0 !important; - border-top: solid transparent 0px !important; + display: none !important; + } - &[showborder] { - padding-top: 4px !important; - - &::before { - content: ''; - display: block; - height: 1px; - background: color-mix(in srgb, var(--zen-colors-border) 70%, transparent 30%); - margin: 0 auto; - margin-block-end: 4px; - width: 80%; - } + #tabbrowser-arrowscrollbox { + &::part(scrollbox) { + gap: 0px !important; } } @@ -107,101 +145,202 @@ /* Mark: toolbox as expanded */ #navigator-toolbox:is( - #navigator-toolbox[zen-user-hover='true']:hover, + #navigator-toolbox[zen-user-hover='true'][zen-has-hover], #navigator-toolbox[zen-user-hover='true']:focus-within, #navigator-toolbox[zen-user-hover='true'][movingtab], #navigator-toolbox[zen-user-hover='true'][flash-popup], - #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox, + #navigator-toolbox[zen-user-hover='true'][has-popup-menu], #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)), #navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true'])) { - --zen-toolbox-min-width: 150px; + --zen-toolbox-min-width: fit-content; + + & #titlebar { + min-width: 150px; + } + + & #zen-workspaces-button { + margin-left: 2px; + margin-right: 2px; + + & .zen-workspace-sidebar-icon[no-icon='true'] { + display: none; + } + } & #zen-sidebar-icons-wrapper { - display: grid; + display: flex; /* Make sure the icons take most of the space, smartly */ - grid-template-columns: repeat(auto-fit, minmax(34px, auto)); - gap: 4px; + flex-direction: row; justify-content: space-between; - padding-top: calc(var(--zen-toolbox-padding) * 2); + padding-top: var(--zen-element-separation); - width: calc(100% - var(--zen-toolbox-padding)); + width: 100%; position: relative; + + --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important; } /* Mark: Fix separator paddings */ &[zen-right-side='true'] { - padding-left: 0 !important; + padding-left: 0; } &:not([zen-right-side='true']) { - padding-right: 0 !important; + padding-right: 0; } - & #newtab-button-container { - &::before { + & #TabsToolbar-customization-target { + &::after { width: 100%; - margin-block-end: calc(var(--zen-toolbox-padding) + 2px); + bottom: calc(-0.5 * var(--zen-toolbox-padding)); } - & #vertical-tabs-newtab-button { - padding: 0 !important; + & > *:not(tabs):not(#search-container) { + width: 100%; + border-radius: var(--tab-border-radius); + + padding-left: var(--toolbarbutton-inner-padding); + padding-right: var(--toolbarbutton-inner-padding); & label { display: flex; - text-align: start; - align-items: center; - padding: 0; + width: 0; } - - &:hover * { - background: transparent !important; + + & image { + height: 16px; + width: 16px; + padding: 0 !important; + } + + &:is([open], [checked]) { + background: var(--toolbarbutton-active-background) !important; + + & image, label { + background: transparent !important; + } + } + + &:hover { + background: var(--toolbarbutton-hover-background) !important; + + & image, label { + background: transparent !important; + } } } } & #tabbrowser-tabs { & .tabbrowser-tab { - &:not([pinned]) .tab-close-button { + & .tab-background { + @media not (prefers-color-scheme: dark) { + box-shadow: none !important; + } + } + + &:not([pinned]):is(:hover, [visuallyselected]) .tab-close-button { display: block !important; } + + .tab-throbber, + .tab-icon-pending, + .tab-icon-image, + .tab-sharing-icon-overlay, + .tab-icon-overlay { + &:not([pinned]) { + margin-inline-end: var(--toolbarbutton-inner-padding) !important; + margin-inline-start: calc(var(--toolbarbutton-inner-padding) / 4) !important; + } + } } } @media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') { - :root:not([zen-sidebar-legacy='true']) #navigator-toolbox:is([zen-user-hover='true']:hover, :not([zen-user-hover='true'])) { - padding-right: 47px !important; + & #zen-profile-button { + width: 100% !important; + padding: var(--toolbarbutton-inner-padding) !important; + + & label { + padding-left: calc(var(--toolbarbutton-inner-padding) * 1.5); + } } } } /* Mark: toolbox as collapsed */ #navigator-toolbox:not(#navigator-toolbox:is( - #navigator-toolbox[zen-user-hover='true']:hover, + #navigator-toolbox[zen-user-hover='true'][zen-has-hover], #navigator-toolbox[zen-user-hover='true']:focus-within, #navigator-toolbox[zen-user-hover='true'][movingtab], #navigator-toolbox[zen-user-hover='true'][flash-popup], - #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox, + #navigator-toolbox[zen-user-hover='true'][has-popup-menu], #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)), #navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true']))) { - --zen-toolbox-max-width: 50px; + --zen-toolbox-max-width: 51px; max-width: var(--zen-toolbox-max-width) !important; + min-width: calc(var(--zen-toolbox-max-width) + var(--zen-toolbox-padding) / 2 + 2px) !important; - #vertical-tabs-newtab-button { + & #vertical-tabs-newtab-button { padding: 0 !important; background: transparent !important; } + :root[customizing] & #zen-sidebar-icons-wrapper { + min-width: unset !important; + } + & #zen-sidebar-icons-wrapper { display: flex; flex-direction: column; - padding-top: calc(var(--zen-toolbox-padding) * 2); + padding-top: var(--zen-element-separation); + align-items: center; } :root:has(&) #zen-sidebar-splitter { display: none !important; } + &:has(#newtab-button-container tab:not([hidden])) #vertical-pinned-tabs-container { + padding-bottom: 5px !important; + margin-bottom: 5px !important; + border-bottom: 1px solid var(--zen-colors-border) !important; + } + + & #zen-workspaces-button[as-button='true']::after { + content: ''; + display: block; + height: 80%; + width: 3px; + background: color-mix(in srgb, var(--zen-primary-color) 50%, transparent 50%); + position: absolute; + left: calc(-1 * var(--zen-toolbox-padding) - 1px); + top: 50%; + transform: translateY(-50%); + border-top-right-radius: var(--zen-border-radius); + border-bottom-right-radius: var(--zen-border-radius); + } + + &[zen-right-side='true'] #zen-workspaces-button[as-button='true']::after { + left: unset; + right: calc(-1 * var(--zen-toolbox-padding) - 1px); + + border-top-left-radius: var(--zen-border-radius); + border-bottom-left-radius: var(--zen-border-radius); + + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + & #TabsToolbar-customization-target { + padding-bottom: var(--zen-toolbox-padding); + + &::after { + bottom: -1px !important; + } + } + & #tabbrowser-tabs { --tab-min-width: 36px !important; @@ -225,6 +364,56 @@ } } } + + #vertical-pinned-tabs-container { + display: flex; + flex-direction: column; + gap: 0 !important; + } + + @media (-moz-bool-pref: 'zen.view.sidebar-collapsed.hide-mute-button') { + & .tab-icon-overlay:is([soundplaying], [muted]):not([selected]) { + display: none !important; + + :is( + :root[uidensity=compact], + #tabbrowser-tabs[secondarytext-unsupported], + :root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:hover + ) .tab-icon-stack[indicator-replaces-favicon] > :not(&), + :root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:not(:hover) &[indicator-replaces-favicon] { + opacity: 1 !important; + } + } + } + + & .tab-throbber, & .tab-icon-pending, & .tab-icon-image, & .tab-sharing-icon-overlay, & .tab-icon-overlay { + margin-inline-end: 0 !important; + } + } + + & #zen-workspaces-button { + flex-direction: column; + + &:not([as-button='true']) { + + & toolbarbutton { + &[active='true']::after { + bottom: 50% !important; + transform: translateY(50%) !important; + } + + :root:has(#navigator-toolbox:not([zen-right-side='true'])) &[active='true']::after { + left: -2px; + animation: zen-workspaces-button-active-collapsed-left 0.1s ease-in-out !important; + } + + :root:has(#navigator-toolbox[zen-right-side='true']) &[active='true']::after { + left: unset !important; + right: -2px; + animation: zen-workspaces-button-active-collapsed-right 0.1s ease-in-out !important; + } + } + } } } @@ -246,8 +435,6 @@ } #TabsToolbar { - --hovered-verticaltab-width: 20em; - z-index: 1; background-repeat: no-repeat !important; background-position: center center !important; @@ -261,14 +448,14 @@ border-top-right-radius: var(--zen-border-radius); } - #navigator-toolbox:hover, + #navigator-toolbox[zen-has-hover], #navigator-toolbox:focus-within, #navigator-toolbox[movingtab], #navigator-toolbox[flash-popup], - #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox, + #navigator-toolbox[has-popup-menu], #navigator-toolbox:has(.tabbrowser-tab:active), #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) { - --zen-navigation-toolbar-min-width: 3.4rem !important; + --zen-navigation-toolbar-min-width: 55.5px !important; /* + the width of the splitter */ max-width: var(--zen-navigation-toolbar-min-width) !important; min-width: var(--zen-navigation-toolbar-min-width) !important; @@ -284,6 +471,7 @@ padding: var(--zen-toolbox-padding); transition: 0 !important; animation: zen-vtabs-animation 0.3s ease-in-out; + -moz-window-dragging: no-drag; } &[zen-right-side='true'] #TabsToolbar { @@ -305,37 +493,6 @@ display: none !important; visibility: hidden !important; } - - & #zen-sidebar-icons-wrapper { - display: block !important; - } - - & .zen-sidebar-action-button { - width: 100%; - border-radius: var(--zen-button-border-radius); - - &:hover { - background: var(--button-hover-bgcolor); - } - - & > *, - &:hover > * { - background: transparent !important; - --toolbarbutton-active-background: transparent; - } - - & label:not(.toolbarbutton-badge) { - --toolbarbutton-hover-background: transparent; - display: block !important; - text-align: start; - } - } - - #navigator-toolbox, - #titlebar, - #TabsToolbar { - transition: .1s !important; - } } } @@ -349,4 +506,66 @@ order: 2; } } + + /* Mark: Override the default tab close button */ + #tabbrowser-tabs { + & .tabbrowser-tab { + &[pinned] .tab-close-button { + display: none !important; + } + + &[selected] .tab-background { + background: var(--zen-colors-secondary) !important; + } + } + } + + /* Customization mode */ + /*:root[customizing] #TabsToolbar > *:not(#zen-sidebar-icons-wrapper) { + overflow: hidden; + max-width: 0 !important; + margin-right: var(--zen-element-separation); + padding: 0 !important; + opacity: 0; + display: none; + }*/ + + :root[customizing] #TabsToolbar > *, + :root[customizing] #TabsToolbar-customization-target { + min-width: unset !important; + } + + /* Mark: Sidebar top buttons */ + #zen-sidebar-top-buttons { + order: -1; + + min-width: unset !important; + --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important; + + & #zen-sidebar-top-buttons-customization-target { + height: 100%; + align-items: center; + + #nav-bar:has(&) & { + padding-inline-start: calc(var(--zen-toolbox-padding) + var(--toolbarbutton-outer-padding)); + } + + #browser:has(#navigator-toolbox[zen-right-side='true']) & { + padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important; + } + + & toolbarbutton { + height: 100%; + padding: 0 var(--toolbarbutton-outer-padding) !important; + } + } + + & .zen-sidebar-action-button { + padding: 0 !important; + + & label { + display: none !important; + } + } + } } \ No newline at end of file diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css index 6724540f2..6b76a703b 100644 --- a/src/browser/base/content/zen-styles/zen-theme.css +++ b/src/browser/base/content/zen-styles/zen-theme.css @@ -74,6 +74,11 @@ --zen-button-border-radius: 7px; --zen-button-padding: 0.6rem 1.2rem; + /* Toolbar */ + --zen-toolbar-height: 39px; + --zen-toolbar-button-inner-padding: 6px; + --toolbarbutton-outer-padding: 4px; + /* Other colors */ --urlbar-box-bgcolor: var(--zen-urlbar-background) !important; --toolbar-field-focus-background-color: var(--urlbar-box-bgcolor) !important; @@ -103,6 +108,8 @@ --fp-contextmenu-bgcolor: light-dark(Menu, rgb(43 42 51 / 0.95)); --toolbar-bgcolor: transparent; + --toolbarbutton-active-background: var(--zen-colors-border) !important; + --input-bgcolor: var(--zen-colors-tertiary) !important; --input-border-color: var(--zen-input-border-color) !important; --zen-themed-toolbar-bg: var(--zen-colors-tertiary); diff --git a/src/browser/base/content/zen-styles/zen-toolbar.css b/src/browser/base/content/zen-styles/zen-toolbar.css index c5d029a22..6687dd523 100644 --- a/src/browser/base/content/zen-styles/zen-toolbar.css +++ b/src/browser/base/content/zen-styles/zen-toolbar.css @@ -1,4 +1,5 @@ -#nav-bar { +#nav-bar, +#zen-sidebar-top-buttons { background: transparent; } diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css index eb146580e..d864d3771 100644 --- a/src/browser/base/content/zen-styles/zen-urlbar.css +++ b/src/browser/base/content/zen-styles/zen-urlbar.css @@ -1,5 +1,10 @@ /* URL and tool bars */ +#urlbar-container { + padding-block: 0 !important; + padding-bottom: 2px !important; +} + #urlbar { --toolbarbutton-border-radius: 10px; --urlbarView-separator-color: var(--zen-colors-border); @@ -171,53 +176,26 @@ button.popup-notification-dropmarker { margin-top: 5px; } -:root:not([zen-sidebar-legacy='true']) { - @media (max-width: 650px) { - #urlbar-container { - width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding))); - } - - #nav-bar[downloadsbuttonshown] #urlbar-container, - #nav-bar[unifiedextensionsbuttonshown] #urlbar-container { - width: calc(76px + 24px + 2 * var(--toolbarbutton-inner-padding)); - } - - #nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container { - width: 176px; - } - - #identity-icon-box { - max-width: 70px; - } - - #urlbar-zoom-button { - display: none; - } +@media (max-width: 550px) { + #urlbar-container { + width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding))); } -} -:root[zen-sidebar-legacy='true'] { - @media (max-width: 550px) { - #urlbar-container { - width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding))); - } + #nav-bar[downloadsbuttonshown] #urlbar-container, + #nav-bar[unifiedextensionsbuttonshown] #urlbar-container { + width: calc(76px + 24px + 2 * var(--toolbarbutton-inner-padding)); + } - #nav-bar[downloadsbuttonshown] #urlbar-container, - #nav-bar[unifiedextensionsbuttonshown] #urlbar-container { - width: calc(76px + 24px + 2 * var(--toolbarbutton-inner-padding)); - } + #nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container { + width: 176px; + } - #nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container { - width: 176px; - } + #identity-icon-box { + max-width: 70px; + } - #identity-icon-box { - max-width: 70px; - } - - #urlbar-zoom-button { - display: none; - } + #urlbar-zoom-button { + display: none; } } @@ -272,6 +250,16 @@ button.popup-notification-dropmarker { } } +#nav-bar, +#zen-sidebar-top-buttons { + min-height: var(--zen-toolbar-height) !important; + height: var(--zen-toolbar-height) !important; + max-height: var(--zen-toolbar-height) !important; + display: flex; + align-items: center; +} + + /* Other small tweaks */ #nav-bar-customization-target { /* Don't grow if potentially-user-sized elements (like the searchbar or the @@ -279,9 +267,19 @@ button.popup-notification-dropmarker { * available space as much as possible, see bug 1795260. */ min-width: 0; + --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding); + /* Add space to beginning of toolbar and make that space click the first */ > :is(toolbarbutton, toolbaritem):first-child, > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) { padding-inline-start: 0; } } + +.titlebar-button:last-child { + padding-right: var(--zen-element-separation) !important; +} + +#PersonalToolbar:not([collapsed="true"]) { + padding-bottom: 6px; +} \ No newline at end of file diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css index 11448cdf4..9678c3ccc 100644 --- a/src/browser/base/content/zen-styles/zen-workspaces.css +++ b/src/browser/base/content/zen-styles/zen-workspaces.css @@ -1,12 +1,73 @@ #zen-workspaces-button { - border: 1px solid var(--zen-colors-border); - border-radius: var(--zen-button-border-radius); - min-height: 33px; justify-content: center; align-items: center; display: flex; - box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; - -moz-window-dragging: no-drag; + + position: relative; + + &:not([as-button='true']) { + border-radius: var(--zen-button-border-radius); + background: color-mix(in srgb, var(--zen-colors-border) 50%, transparent 50%); + padding: 5px; + height: fit-content; + gap: 3px; + + & toolbarbutton { + margin: 0 !important; + width: 25px; + display: flex; + justify-content: center; + padding: 0 !important; + align-items: center; + position: relative; + + & > * { + opacity: .6; + } + + &[active='true']::after { + content: ''; + position: absolute; + width: 4px; + border-radius: 99px; + height: 4px; + background: var(--zen-primary-color); + bottom: -2px; + left: 50%; + transform: translateX(-50%); + animation: zen-workspaces-button-active 0.1s ease-in-out; + } + } + } + + &[as-button='true'] { + border-radius: var(--tab-border-radius); + + &:hover { + background: var(--toolbarbutton-hover-background); + } + } + + :root:has(#navigator-toolbox:not([zen-expanded='true'])) &[as-button='true'] { + margin: 0 !important; + padding: var(--toolbarbutton-inner-padding) !important; + width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important; + height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important; + border-radius: var(--tab-border-radius) !important; + + &:hover { + background: var(--toolbarbutton-hover-background) !important; + } + } +} + +#zen-workspaces-button .zen-workspace-sidebar-wrapper { + position: absolute; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; } #zen-workspaces-button .zen-workspace-sidebar-name { @@ -15,31 +76,41 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - font-size: 12px; + font-size: 13px; } @media (-moz-bool-pref: 'zen.view.sidebar-expanded') { /** Keep these selectors in sync with the ones in vertical-tabs.css */ #navigator-toolbox:is( - #navigator-toolbox[zen-user-hover='true']:hover, + #navigator-toolbox[zen-user-hover='true'][zen-has-hover], + #navigator-toolbox[zen-user-hover='true'][has-popup-menu], #navigator-toolbox[zen-user-hover='true']:focus-within, #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox, #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)), :not([zen-user-hover='true']) ) { - & #zen-workspaces-button { - width: calc(var(--zen-sidebar-action-button-width) - 1px) !important; - margin-top: .2rem; - height: calc(var(--zen-sidebar-action-button-width) - 10px) !important; + & #zen-workspaces-button[as-button='true'] { + width: 100% !important; + margin: 2px; + min-width: calc(2 * var(--toolbarbutton-inner-padding) + 16px); + + & .zen-workspace-sidebar-wrapper { + left: calc(var(--toolbarbutton-outer-padding) + 5px); + width: calc(100% - (var(--toolbarbutton-outer-padding) * 3 )); + } } & #zen-workspaces-button .zen-workspace-sidebar-name { display: block; } - & #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] { - display: none; + & #zen-workspaces-button .zen-workspace-sidebar-icon { + margin-inline-end: 5px; + + & [no-icon='true'] { + display: none; + } } & #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] + .zen-workspace-sidebar-name { @@ -51,7 +122,6 @@ white-space: nowrap; text-overflow: ellipsis; display: flex; - padding: 2px 10px; width: calc(100% - var(--zen-tabbrowser-padding) * 6) !important; gap: 0.5ch; } diff --git a/src/browser/components/customizableui/CustomizableUI-sys-mjs.patch b/src/browser/components/customizableui/CustomizableUI-sys-mjs.patch index 693e332f2..03d93876e 100644 --- a/src/browser/components/customizableui/CustomizableUI-sys-mjs.patch +++ b/src/browser/components/customizableui/CustomizableUI-sys-mjs.patch @@ -1,5 +1,5 @@ diff --git a/browser/components/customizableui/CustomizableUI.sys.mjs b/browser/components/customizableui/CustomizableUI.sys.mjs -index f466105b8290b13c672351bb68dd92644dd670fe..b195cd59d7ff07ff512e7388c9dc33f3c661d955 100644 +index 289c3df7dcd6fa6b35681ce61c1e920b6a2651d7..07ecece92643203d376378818facfc55774c63e9 100644 --- a/browser/components/customizableui/CustomizableUI.sys.mjs +++ b/browser/components/customizableui/CustomizableUI.sys.mjs @@ -25,7 +25,7 @@ ChromeUtils.defineLazyGetter(lazy, "gWidgetsBundle", function () { @@ -23,12 +23,25 @@ index f466105b8290b13c672351bb68dd92644dd670fe..b195cd59d7ff07ff512e7388c9dc33f3 lazy.resetPBMToolbarButtonEnabled ? "reset-pbm-toolbar-button" : null, ].filter(name => name); -@@ -288,7 +287,7 @@ var CustomizableUIInternal = { +@@ -288,10 +287,10 @@ var CustomizableUIInternal = { { type: CustomizableUI.TYPE_TOOLBAR, defaultPlacements: [ - "firefox-view-button", +// "firefox-view-button", "tabbrowser-tabs", - "new-tab-button", - "alltabs-button", +- "new-tab-button", +- "alltabs-button", ++// "new-tab-button", ++// "alltabs-button", + ], + defaultCollapsed: null, + }, +@@ -331,6 +330,7 @@ var CustomizableUIInternal = { + CustomizableUI.AREA_NAVBAR, + CustomizableUI.AREA_BOOKMARKS, + CustomizableUI.AREA_TABSTRIP, ++ "zen-sidebar-top-buttons", + ]); + if (AppConstants.platform != "macosx") { + toolbars.add(CustomizableUI.AREA_MENUBAR); diff --git a/src/browser/components/preferences/zen-settings.js b/src/browser/components/preferences/zen-settings.js index 8c553d4d4..c3277861d 100644 --- a/src/browser/components/preferences/zen-settings.js +++ b/src/browser/components/preferences/zen-settings.js @@ -2,25 +2,6 @@ // 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/. -const kZenColors = [ - '#aac7ff', - '#74d7cb', - '#a0d490', - '#dec663', - '#ffb787', - '#dec1b1', - '#ffb1c0', - '#ddbfc3', - '#f6b0ea', - '#d4bbff', -]; - -const kZenOSToSmallName = { - WINNT: 'windows', - Darwin: 'macos', - Linux: 'linux', -}; - var gZenMarketplaceManager = { init() { const checkForUpdates = document.getElementById('zenThemeMarketplaceCheckForUpdates'); @@ -79,125 +60,42 @@ var gZenMarketplaceManager = { return document.getElementById('zenThemeMarketplaceList'); }, - get themesDataFile() { - return PathUtils.join(PathUtils.profileDir, 'zen-themes.json'); - }, - - get themesRootPath() { - return PathUtils.join(PathUtils.profileDir, 'chrome', 'zen-themes'); - }, - async removeTheme(themeId) { - const themePath = PathUtils.join(this.themesRootPath, themeId); - console.info('ZenThemeMarketplaceParent(settings): Removing theme ', themePath); + const themePath = ZenThemesCommon.getThemeFolder(themeId); + + console.info(`[ZenThemeMarketplaceParent:settings]: Removing theme ${themePath}`); + await IOUtils.remove(themePath, { recursive: true, ignoreAbsent: true }); - let themes = await this._getThemes(); + const themes = await ZenThemesCommon.getThemes(); delete themes[themeId]; - await IOUtils.writeJSON(this.themesDataFile, themes); + await IOUtils.writeJSON(ZenThemesCommon.themesDataFile, themes); this.triggerThemeUpdate(); }, async disableTheme(themeId) { - const themes = await this._getThemes(); + const themes = await ZenThemesCommon.getThemes(); const theme = themes[themeId]; theme.enabled = false; - await IOUtils.writeJSON(this.themesDataFile, themes); + await IOUtils.writeJSON(ZenThemesCommon.themesDataFile, themes); this._doNotRebuildThemesList = true; this.triggerThemeUpdate(); }, async enableTheme(themeId) { - const themes = await this._getThemes(); + const themes = await ZenThemesCommon.getThemes(); const theme = themes[themeId]; theme.enabled = true; - await IOUtils.writeJSON(this.themesDataFile, themes); + await IOUtils.writeJSON(ZenThemesCommon.themesDataFile, themes); this._doNotRebuildThemesList = true; this.triggerThemeUpdate(); }, - async _getThemes() { - if (!this._themes) { - if (!(await IOUtils.exists(this.themesDataFile))) { - await IOUtils.writeJSON(this.themesDataFile, {}); - } - this._themes = await IOUtils.readJSON(this.themesDataFile); - } - return this._themes; - }, - - get currentOperatingSystem() { - let os = Services.appinfo.OS; - return kZenOSToSmallName[os]; - }, - - _getValidPreferences(preferences) { - for (let entry of preferences) { - const key = entry.property; - // [!][os:]key - let restOfPreferences = key; - let isNegation = false; - if (key.startsWith('!')) { - isNegation = true; - restOfPreferences = key.slice(1); - } - let os = ''; - if (restOfPreferences.includes(':')) { - [os, restOfPreferences] = restOfPreferences.split(':'); - } - if (isNegation && os === this.currentOperatingSystem) { - delete preferences[key]; - } else if (os && os !== this.currentOperatingSystem && !isNegation) { - delete preferences[key]; - } else { - // Change the key to contain only the rest of the preferences. - preferences[restOfPreferences] = preferences[key]; - if (key !== restOfPreferences) { - delete preferences[key]; - } - } - } - return preferences; - }, - - async _getThemePreferences(theme) { - const themePath = PathUtils.join(this.themesRootPath, theme.id, 'preferences.json'); - if (!(await IOUtils.exists(themePath)) || !theme.preferences) { - return []; - } - - let themePreferences = await IOUtils.readJSON(themePath); - - // compat mode for old preferences, all of them can only be checkboxes - if (typeof themePreferences === 'object' && !Array.isArray(themePreferences)) { - console.warn( - `[ZenThemeMarketplaceManager]: Warning, ${theme.name} uses legacy preferences, please migrate them to the new preferences style, as legacy preferences might be removed at a future release. More information at: ` - ); - themePreferences = Object.entries(themePreferences).map(([property, label]) => { - return { - property, - label, - type: 'checkbox', - }; - }); - } - - return this._getValidPreferences(themePreferences); - }, - - _getBrowser() { - if (!this.__browser) { - this.__browser = Services.wm.getMostRecentWindow('navigator:browser'); - } - - return this.__browser; - }, - async _buildThemesList() { if (!this.themesList) return; if (this._doNotRebuildThemesList) { @@ -205,15 +103,18 @@ var gZenMarketplaceManager = { return; } - console.log('ZenThemeMarketplaceParent(settings): Building themes list'); + console.log('[ZenThemeMarketplaceParent:settings]: Building themes list'); - let themes = await this._getThemes(); + const themes = await ZenThemesCommon.getThemes(); - const browser = this._getBrowser(); + const browser = ZenThemesCommon.currentBrowser; const themeList = document.createElement('div'); - for (let theme of Object.values(themes)) { + for (const theme of Object.values(themes)) { + const sanitizedName = `theme-${theme.name?.replaceAll(/\s/g, '-')?.replaceAll(/[^A-z_-]+/g, '')}`; + const isThemeEnabled = theme.enabled === undefined || theme.enabled; + const fragment = window.MozXULElement.parseXULToFragment(` @@ -223,14 +124,13 @@ var gZenMarketplaceManager = { - + ${theme.preferences ? `` : ''} `); const themeName = `${theme.name} (v${theme.version || '1.0.0'})`; - const sanitizedName = `theme-${theme.name?.replaceAll(/\s/g, '-')?.replaceAll(/[^A-z_-]+/g, '')}`; const base = fragment.querySelector('.zenThemeMarketplaceItem'); const baseHeader = fragment.querySelector('#zenThemeMarketplaceItemContentHeader'); @@ -246,16 +146,21 @@ var gZenMarketplaceManager = { mainDialogDiv.className = 'zenThemeMarketplaceItemPreferenceDialog'; headerDiv.className = 'zenThemeMarketplaceItemPreferenceDialogTopBar'; headerTitle.textContent = themeName; - headerTitle.title = `CSS Selector: ${sanitizedName}`; + browser.document.l10n.setAttributes(headerTitle, 'zen-theme-marketplace-theme-header-title', { + name: sanitizedName, + }); headerTitle.className = 'zenThemeMarketplaceItemTitle'; closeButton.id = `${sanitizedName}-modal-close`; - closeButton.textContent = 'Close'; + browser.document.l10n.setAttributes(closeButton, 'zen-theme-marketplace-close-modal'); contentDiv.id = `${sanitizedName}-preferences-content`; contentDiv.className = 'zenThemeMarketplaceItemPreferenceDialogContent'; mozToggle.className = 'zenThemeMarketplaceItemPreferenceToggle'; - mozToggle.pressed = theme.enabled; - mozToggle.title = theme.enabled ? 'Disable theme' : 'Enable theme'; + mozToggle.pressed = isThemeEnabled; + browser.document.l10n.setAttributes( + mozToggle, + `zen-theme-marketplace-toggle-${isThemeEnabled ? 'enabled' : 'disabled'}-button` + ); baseHeader.appendChild(mozToggle); @@ -279,38 +184,54 @@ var gZenMarketplaceManager = { if (!event.target.hasAttribute('pressed')) { await this.disableTheme(themeId); + + browser.document.l10n.setAttributes(mozToggle, 'zen-theme-marketplace-toggle-disabled-button'); + + if (theme.preferences) { + document.getElementById(`zenThemeMarketplaceItemConfigureButton-${sanitizedName}`).setAttribute('hidden', true); + } } else { await this.enableTheme(themeId); + + browser.document.l10n.setAttributes(mozToggle, 'zen-theme-marketplace-toggle-enabled-button'); + + if (theme.preferences) { + document.getElementById(`zenThemeMarketplaceItemConfigureButton-${sanitizedName}`).removeAttribute('hidden'); + } } }); fragment.querySelector('.zenThemeMarketplaceItemTitle').textContent = themeName; fragment.querySelector('.zenThemeMarketplaceItemDescription').textContent = theme.description; fragment.querySelector('.zenThemeMarketplaceItemUninstallButton').addEventListener('click', async (event) => { - if (!confirm('Are you sure you want to remove this theme?')) { + const [msg] = await document.l10n.formatValues([{ id: 'zen-theme-marketplace-remove-confirmation' }]); + + if (!confirm(msg)) { return; } - const target = event.target; - const themeId = target.getAttribute('zen-theme-id'); - await this.removeTheme(themeId); - }); - fragment.querySelector('.zenThemeMarketplaceItemConfigureButton').addEventListener('click', () => { - dialog.showModal(); + + await this.removeTheme(event.target.getAttribute('zen-theme-id')); }); - if (theme.enabled && theme.preferences) { - fragment.querySelector('.zenThemeMarketplaceItemConfigureButton').removeAttribute('hidden'); + if (theme.preferences) { + fragment.querySelector('.zenThemeMarketplaceItemConfigureButton').addEventListener('click', () => { + dialog.showModal(); + }); + + if (isThemeEnabled) { + fragment.querySelector('.zenThemeMarketplaceItemConfigureButton').removeAttribute('hidden'); + } } - const preferences = await this._getThemePreferences(theme); + const preferences = await ZenThemesCommon.getThemePreferences(theme); if (preferences.length > 0) { const preferencesWrapper = document.createXULElement('vbox'); - preferencesWrapper.classList.add('zenThemeMarketplaceItemPreferences'); + preferencesWrapper.setAttribute('flex', '1'); - for (let entry of preferences) { - const { property, label, type } = entry; + for (const entry of preferences) { + const { property, label, type, placeholder } = entry; switch (type) { case 'dropdown': { @@ -335,18 +256,23 @@ var gZenMarketplaceManager = { const defaultItem = document.createXULElement('menuitem'); defaultItem.setAttribute('value', 'none'); - defaultItem.setAttribute('label', '-'); + + if (placeholder) { + defaultItem.setAttribute('label', placeholder || '-'); + } else { + browser.document.l10n.setAttributes(defaultItem, 'zen-theme-marketplace-dropdown-default-label'); + } menupopup.appendChild(defaultItem); - for (let option of options) { + for (const option of options) { const { label, value } = option; const valueType = typeof value; if (!['string', 'number'].includes(valueType)) { console.log( - `ZenThemeMarketplaceParent(settings): Warning, invalid data type received (${valueType}), skipping.` + `[ZenThemeMarketplaceParent:settings]: Warning, invalid data type received (${valueType}), skipping.` ); continue; } @@ -395,7 +321,7 @@ var gZenMarketplaceManager = { } case 'checkbox': { - const fragment = window.MozXULElement.parseXULToFragment(` + const checkbox = window.MozXULElement.parseXULToFragment(` @@ -403,13 +329,13 @@ var gZenMarketplaceManager = { // Checkbox only works with "true" and "false" values, it's not like HTML checkboxes. if (Services.prefs.getBoolPref(property, false)) { - fragment.querySelector('.zenThemeMarketplaceItemPreferenceCheckbox').setAttribute('checked', 'true'); + checkbox.querySelector('.zenThemeMarketplaceItemPreferenceCheckbox').setAttribute('checked', 'true'); } - fragment.querySelector('.zenThemeMarketplaceItemPreferenceCheckbox').addEventListener('click', (event) => { - let target = event.target.closest('.zenThemeMarketplaceItemPreferenceCheckbox'); - let key = target.getAttribute('zen-pref'); - let checked = target.hasAttribute('checked'); + checkbox.querySelector('.zenThemeMarketplaceItemPreferenceCheckbox').addEventListener('click', (event) => { + const target = event.target.closest('.zenThemeMarketplaceItemPreferenceCheckbox'); + const key = target.getAttribute('zen-pref'); + const checked = target.hasAttribute('checked'); if (!checked) { target.removeAttribute('checked'); @@ -420,13 +346,63 @@ var gZenMarketplaceManager = { Services.prefs.setBoolPref(key, !checked); }); - preferencesWrapper.appendChild(fragment); + preferencesWrapper.appendChild(checkbox); + break; + } + + case 'string': { + const container = document.createXULElement('hbox'); + container.classList.add('zenThemeMarketplaceItemPreference'); + container.setAttribute('align', 'center'); + container.setAttribute('role', 'group'); + + const savedValue = Services.prefs.getStringPref(property, ''); + const sanitizedProperty = property?.replaceAll(/\./g, '-'); + + const input = document.createElement('input'); + input.setAttribute('flex', '1'); + input.setAttribute('type', 'text'); + input.id = `${sanitizedProperty}-input`; + input.value = savedValue; + + if (placeholder) { + input.setAttribute('placeholder', placeholder || '-'); + } else { + browser.document.l10n.setAttributes(input, 'zen-theme-marketplace-input-default-placeholder'); + } + + input.addEventListener( + 'input', + ZenThemesCommon.throttle((event) => { + const value = event.target.value; + + Services.prefs.setStringPref(property, value); + + if (value === '') { + browser.document.querySelector(':root').style.removeProperty(`--${sanitizedProperty}`); + } else { + browser.document.querySelector(':root').style.setProperty(`--${sanitizedProperty}`, value); + } + }, 500) + ); + + const nameLabel = document.createXULElement('label'); + nameLabel.setAttribute('flex', '1'); + nameLabel.setAttribute('class', 'zenThemeMarketplaceItemPreferenceLabel'); + nameLabel.setAttribute('value', label); + nameLabel.setAttribute('tooltiptext', property); + + container.appendChild(nameLabel); + container.appendChild(input); + container.setAttribute('aria-labelledby', label); + + preferencesWrapper.appendChild(container); break; } default: console.log( - `ZenThemeMarketplaceParent(settings): Warning, unknown preference type received (${type}), skipping.` + `[ZenThemeMarketplaceParent:settings]: Warning, unknown preference type received (${type}), skipping.` ); continue; } @@ -450,13 +426,10 @@ var gZenLooksAndFeel = { this._initializeTabbarExpandForm(); gZenThemeBuilder.init(); gZenMarketplaceManager.init(); - var onLegacyToolbarChange = this.onLegacyToolbarChange.bind(this); - Services.prefs.addObserver('zen.themes.tabs.legacy-location', onLegacyToolbarChange); var onPreferColorSchemeChange = this.onPreferColorSchemeChange.bind(this); window.matchMedia('(prefers-color-scheme: dark)').addListener(onPreferColorSchemeChange); this.onPreferColorSchemeChange(); window.addEventListener('unload', () => { - Services.prefs.removeObserver('zen.themes.tabs.legacy-location', onLegacyToolbarChange); window.matchMedia('(prefers-color-scheme: dark)').removeListener(onPreferColorSchemeChange); }); setTimeout(() => { @@ -469,6 +442,7 @@ var gZenLooksAndFeel = { } }, 500); this.setDarkThemeListener(); + this.setCompactModeStyle(); }, onPreferColorSchemeChange(event) { @@ -482,9 +456,9 @@ var gZenLooksAndFeel = { }, setDarkThemeListener() { - this.chooser = document.getElementById('zen-dark-theme-styles-form'); - this.radios = [...this.chooser.querySelectorAll('input')]; - for (let radio of this.radios) { + const chooser = document.getElementById('zen-dark-theme-styles-form'); + const radios = [...chooser.querySelectorAll('input')]; + for (let radio of radios) { if (radio.value === 'amoled' && Services.prefs.getBoolPref('zen.theme.color-prefs.amoled')) { radio.checked = true; } else if (radio.value === 'colorful' && Services.prefs.getBoolPref('zen.theme.color-prefs.colorful')) { @@ -516,11 +490,38 @@ var gZenLooksAndFeel = { } }, - async onLegacyToolbarChange(event) { - let buttonIndex = await confirmRestartPrompt(true, 1, true, false); - if (buttonIndex == CONFIRM_RESTART_PROMPT_RESTART_NOW) { - Services.startup.quit(Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart); - return; + setCompactModeStyle() { + const chooser = document.getElementById('zen-compact-mode-styles-form'); + const radios = [...chooser.querySelectorAll('input')]; + for (let radio of radios) { + if (radio.value === 'left' && Services.prefs.getBoolPref('zen.view.compact.hide-tabbar')) { + radio.checked = true; + } else if (radio.value === 'top' && Services.prefs.getBoolPref('zen.view.compact.hide-toolbar')) { + radio.checked = true; + } else if ( + radio.value === 'both' && + !Services.prefs.getBoolPref('zen.view.compact.hide-tabbar') && + !Services.prefs.getBoolPref('zen.view.compact.hide-toolbar') + ) { + radio.checked = true; + } + radio.addEventListener('change', (e) => { + let value = e.target.value; + switch (value) { + case 'left': + Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true); + Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', false); + break; + case 'top': + Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', false); + Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true); + break; + default: + Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true); + Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true); + break; + } + }); } }, @@ -559,7 +560,7 @@ var gZenLooksAndFeel = { _initializeColorPicker(accentColor) { let elem = document.getElementById('zenLooksAndFeelColorOptions'); elem.innerHTML = ''; - for (let color of kZenColors) { + for (let color of ZenThemesCommon.kZenColors) { let colorElemParen = document.createElement('div'); let colorElem = document.createElement('div'); colorElemParen.classList.add('zenLooksAndFeelColorOptionParen'); @@ -582,7 +583,7 @@ var gZenLooksAndFeel = { }, _getInitialAccentColor() { - return Services.prefs.getStringPref('zen.theme.accent-color', kZenColors[0]); + return Services.prefs.getStringPref('zen.theme.accent-color', ZenThemesCommon.kZenColors[0]); }, }; @@ -812,11 +813,6 @@ Preferences.addAll([ type: 'bool', default: false, }, - { - id: 'zen.themes.tabs.legacy-location', - type: 'bool', - default: false, - }, { id: 'zen.workspaces.hide-default-container-indicator', type: 'bool', @@ -827,4 +823,9 @@ Preferences.addAll([ type: 'bool', default: true, }, + { + id: 'zen.workspaces.show-icon-strip', + type: 'bool', + default: true, + }, ]); diff --git a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml index 53d350b0d..f1e52860a 100644 --- a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml +++ b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml @@ -36,10 +36,10 @@ - + - + @@ -77,14 +77,14 @@ - + - + - + @@ -126,10 +126,10 @@ - + - + @@ -190,17 +190,48 @@ + +
+
+
+
+
+
+
+ +
+ + + + + - - + diff --git a/src/browser/components/tabbrowser/content/tabbrowser-js.patch b/src/browser/components/tabbrowser/content/tabbrowser-js.patch index bb8d079a4..1a2424f5f 100644 --- a/src/browser/components/tabbrowser/content/tabbrowser-js.patch +++ b/src/browser/components/tabbrowser/content/tabbrowser-js.patch @@ -1,8 +1,8 @@ diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js -index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..7774dbf9f963529570b08465d107df236fcefae7 100644 +index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..c776348e776c1f9efc9b9f2ca479b1050f0a750b 100644 --- a/browser/components/tabbrowser/content/tabbrowser.js +++ b/browser/components/tabbrowser/content/tabbrowser.js -@@ -453,10 +453,13 @@ +@@ -453,10 +453,12 @@ }, get _numPinnedTabs() { @@ -13,12 +13,11 @@ index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..7774dbf9f963529570b08465d107df23 + if (!tab.pinned) { break; } -+ if (tab.hidden) continue; + i++; } return i; }, -@@ -2704,6 +2707,11 @@ +@@ -2704,6 +2706,11 @@ ); } @@ -30,7 +29,7 @@ index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..7774dbf9f963529570b08465d107df23 if (!UserInteraction.running("browser.tabs.opening", window)) { UserInteraction.start("browser.tabs.opening", "initting", window); } -@@ -2771,6 +2779,9 @@ +@@ -2771,6 +2778,9 @@ noInitialLabel, skipBackgroundNotify, }); @@ -40,7 +39,7 @@ index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..7774dbf9f963529570b08465d107df23 if (insertTab) { // insert the tab into the tab container in the correct position this._insertTabAtIndex(t, { -@@ -3248,6 +3259,14 @@ +@@ -3248,6 +3258,14 @@ ) { tabWasReused = true; tab = this.selectedTab; @@ -55,7 +54,7 @@ index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..7774dbf9f963529570b08465d107df23 if (!tabData.pinned) { this.unpinTab(tab); } else { -@@ -3297,6 +3316,13 @@ +@@ -3297,6 +3315,13 @@ preferredRemoteType, }); @@ -69,7 +68,7 @@ index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..7774dbf9f963529570b08465d107df23 if (select) { tabToSelect = tab; } -@@ -4184,6 +4210,7 @@ +@@ -4184,6 +4209,7 @@ isLastTab || aTab.pinned || aTab.hidden || @@ -77,7 +76,7 @@ index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..7774dbf9f963529570b08465d107df23 this._removingTabs.size > 3 /* don't want lots of concurrent animations */ || !aTab.hasAttribute( -@@ -5117,10 +5144,10 @@ +@@ -5117,10 +5143,10 @@ SessionStore.deleteCustomTabValue(aTab, "hiddenBy"); }, diff --git a/src/browser/themes/shared/preferences/zen-preferences.css b/src/browser/themes/shared/preferences/zen-preferences.css index ad37698d0..c2d866d4b 100644 --- a/src/browser/themes/shared/preferences/zen-preferences.css +++ b/src/browser/themes/shared/preferences/zen-preferences.css @@ -179,7 +179,8 @@ groupbox h2 { margin-bottom: 15px; } -#zen-dark-theme-styles-form { +#zen-dark-theme-styles-form, +#zen-compact-mode-styles-form { display: flex; justify-content: space-between; gap: var(--space-large); @@ -234,6 +235,43 @@ groupbox h2 { border-color: var(--zen-primary-color); } +.zen-compact-mode-styles-browser-wrapper { + width: 55%; + height: 60px; + display: flex; + border-radius: 10px; + border: 1px solid var(--zen-colors-border); + background: var(--zen-colors-tertiary); + position: relative; + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1); + + padding: 7px; + + &[left] div { + width: 100%; + background: var(--zen-primary-color); + border-radius: 5px; + height: 18px; + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1); + } + + &[top] div { + width: 18px; + background: var(--zen-primary-color); + border-radius: 5px; + height: 100%; + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1); + } + + &[both] div { + width: 100%; + height: 100%; + background: var(--zen-colors-secondary); + border-radius: 5px; + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1); + } +} + .zenLooksAndFeelColorOption { width: 60px; height: 60px; @@ -480,6 +518,10 @@ groupbox h2 { flex-direction: row; } +.zenThemeMarketplaceItemPreferenceToggle { + align-self: start; +} + #zenThemeMarketplaceItemContentHeader { display: flex; flex-direction: row; diff --git a/src/browser/themes/shared/zen-icons/icons.css b/src/browser/themes/shared/zen-icons/icons.css index f06f81896..2f7b62ca0 100644 --- a/src/browser/themes/shared/zen-icons/icons.css +++ b/src/browser/themes/shared/zen-icons/icons.css @@ -19,8 +19,8 @@ list-style-image: url('back.svg') !important; } -:root[zen-sidebar-legacy='true'] #forward-button, -:root[zen-sidebar-legacy='true'] #zen-sidebar-web-panel-forward { +#forward-button, +#zen-sidebar-web-panel-forward { list-style-image: url('forward.svg') !important; @media (max-width: 650px) { @@ -28,17 +28,8 @@ } } -:root:not([zen-sidebar-legacy='true']) #forward-button, -:root:not([zen-sidebar-legacy='true']) #zen-sidebar-web-panel-forward { - list-style-image: url('forward.svg') !important; - - @media (max-width: 650px) { - display: none; - } -} - -:root[zen-sidebar-legacy='true'] #reload-button, -:root[zen-sidebar-legacy='true'] #zen-sidebar-web-panel-reload { +#reload-button, +#zen-sidebar-web-panel-reload { list-style-image: url('reload.svg') !important; @media (max-width: 650px) { @@ -46,15 +37,6 @@ } } -:root:not([zen-sidebar-legacy='true']) #reload-button, -:root:not([zen-sidebar-legacy='true']) #zen-sidebar-web-panel-reload { - list-style-image: url('reload.svg') !important; - - @media (max-width: 700px) { - display: none; - } -} - #stop-button, .close-icon, #zen-sidebar-web-panel-close { @@ -191,7 +173,7 @@ #zoom-in-button, #tabs-newtab-button, -#TabsToolbar #new-tab-button, +#new-tab-button, #appMenu-zoomEnlarge-button2, #PanelUI-zen-profiles-newProfile, #zen-sidebar-add-panel-button, diff --git a/src/toolkit/modules/UpdateUtils-sys-mjs.patch b/src/toolkit/modules/UpdateUtils-sys-mjs.patch new file mode 100644 index 000000000..501a3d7e5 --- /dev/null +++ b/src/toolkit/modules/UpdateUtils-sys-mjs.patch @@ -0,0 +1,13 @@ +diff --git a/toolkit/modules/UpdateUtils.sys.mjs b/toolkit/modules/UpdateUtils.sys.mjs +index be9ce9d5402c30bf4a9712f1ce9026503c191a53..230882363b3e1bbe7f0977567db61f72494a19ea 100644 +--- a/toolkit/modules/UpdateUtils.sys.mjs ++++ b/toolkit/modules/UpdateUtils.sys.mjs +@@ -81,7 +81,7 @@ export var UpdateUtils = { + replacement = Services.appinfo.name; + break; + case "VERSION": +- replacement = Services.appinfo.version; ++ replacement = AppConstants.ZEN_FIREFOX_VERSION; + break; + case "BUILD_ID": + replacement = Services.appinfo.appBuildID; diff --git a/surfer.json b/surfer.json index 42d9ebcfd..c756cfd11 100644 --- a/surfer.json +++ b/surfer.json @@ -5,7 +5,7 @@ "binaryName": "zen", "version": { "product": "firefox", - "version": "130.0" + "version": "130.0.1" }, "buildOptions": { "generateBranding": true @@ -18,7 +18,7 @@ "brandShortName": "Zen Browser", "brandFullName": "Zen Browser", "release": { - "displayVersion": "1.0.1-a", + "displayVersion": "1.0.1-a.2", "github": { "repo": "zen-browser/desktop" },